Start splitting RenderNeighbourhood into layers

a-b-street · Jan 10, 2025 · 56ef3a2 · 56ef3a2
1 parent c80c36f
commit 56ef3a2
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 108 deletions.
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
@@ -5,6 +5,7 @@
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
   import { layerId, Link } from "./common";
+  import { CellLayer, HighlightBoundaryLayer, OneWayLayer } from "./layers";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import { backend, mode } from "./stores";
 </script>
@@ -38,6 +39,39 @@
   </div>
 
   <div slot="map">
+    <HighlightBoundaryLayer gj={notNull($backend).renderNeighbourhood()} />
+
+    <GeoJSON data={notNull($backend).renderNeighbourhood()} generateId>
+      <CellLayer />
+      <OneWayLayer />
+
+      <CircleLayer
+        {...layerId("debug-borders")}
+        filter={["==", ["get", "kind"], "border_intersection"]}
+        paint={{
+          "circle-radius": 15,
+          "circle-color": "green",
+        }}
+      >
+        <Popup openOn="hover" let:props>
+          <PropertiesTable properties={props} />
+        </Popup>
+      </CircleLayer>
+
+      <LineLayer
+        {...layerId("debug-crosses")}
+        filter={["==", ["get", "kind"], "crosses"]}
+        paint={{
+          "line-width": 5,
+          "line-color": "blue",
+        }}
+      >
+        <Popup openOn="hover" let:props>
+          <PropertiesTable properties={props} />
+        </Popup>
+      </LineLayer>
+    </GeoJSON>
+
     <RenderNeighbourhood
       gj={notNull($backend).renderNeighbourhood()}
       interactive
@@ -48,32 +82,6 @@
           <PropertiesTable properties={props} />
         </Popup>
       </div>
-      <svelte:fragment slot="more-layers">
-        <CircleLayer
-          {...layerId("debug-borders")}
-          filter={["==", ["get", "kind"], "border_intersection"]}
-          paint={{
-            "circle-radius": 15,
-            "circle-color": "green",
-          }}
-        >
-          <Popup openOn="hover" let:props>
-            <PropertiesTable properties={props} />
-          </Popup>
-        </CircleLayer>
-        <LineLayer
-          {...layerId("debug-crosses")}
-          filter={["==", ["get", "kind"], "crosses"]}
-          paint={{
-            "line-width": 5,
-            "line-color": "blue",
-          }}
-        >
-          <Popup openOn="hover" let:props>
-            <PropertiesTable properties={props} />
-          </Popup>
-        </LineLayer>
-      </svelte:fragment>
     </RenderNeighbourhood>
 
     <GeoJSON data={notNull($backend).renderModalFilters()} generateId>

diff --git a/web/src/ImpactOneDestinationMode.svelte b/web/src/ImpactOneDestinationMode.svelte
@@ -11,7 +11,7 @@
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
   import { DotMarker, layerId, Link } from "./common";
-  import ModalFilterLayer from "./ModalFilterLayer.svelte";
+  import { ModalFilterLayer } from "./layers";
   import {
     backend,
     mode,

diff --git a/web/src/NetworkMode.svelte b/web/src/NetworkMode.svelte
@@ -8,7 +8,7 @@
   import editIcon from "../assets/edit.svg?url";
   import { HelpButton, layerId, Link } from "./common";
   import { pickNeighbourhoodName } from "./common/pick_names";
-  import ModalFilterLayer from "./ModalFilterLayer.svelte";
+  import { ModalFilterLayer } from "./layers";
   import {
     autosave,
     backend,

diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
@@ -1,14 +1,8 @@
 <script lang="ts">
-  import type { Feature, Polygon } from "geojson";
+  import type { Feature } from "geojson";
   import type { ExpressionSpecification, LngLat } from "maplibre-gl";
-  import {
-    FillLayer,
-    GeoJSON,
-    hoverStateFilter,
-    LineLayer,
-  } from "svelte-maplibre";
+  import { GeoJSON, hoverStateFilter, LineLayer } from "svelte-maplibre";
   import { layerId, roadLineWidth } from "./common";
-  import OneWayLayer from "./OneWayLayer.svelte";
   import { roadStyle, thickRoadsForShortcuts } from "./stores";
   import type { RenderNeighbourhoodOutput } from "./wasm";
 
@@ -64,70 +58,9 @@
       25 + extraWidth,
     ];
   }
-
-  function invertBoundary(gj: RenderNeighbourhoodOutput): Feature<Polygon> {
-    // @ts-expect-error TS can't figure out that we're narrowing the case here
-    let boundary: Feature<Polygon> = gj.features.find(
-      (f) => f.properties.kind == "boundary",
-    )!;
-
-    return {
-      type: "Feature",
-      properties: {},
-      geometry: {
-        type: "Polygon",
-        coordinates: [
-          [
-            [180.0, 90.0],
-            [-180.0, 90.0],
-            [-180.0, -90.0],
-            [180.0, -90.0],
-            [180.0, 90.0],
-          ],
-          // One hole
-          boundary.geometry.coordinates[0],
-        ],
-      },
-    };
-  }
 </script>
 
 <GeoJSON data={gj} generateId>
-  <GeoJSON data={invertBoundary(gj)}>
-    <FillLayer
-      {...layerId("neighbourhood-boundary")}
-      paint={{ "fill-color": "black", "fill-opacity": 0.3 }}
-    />
-  </GeoJSON>
-
-  <FillLayer
-    {...layerId("cells")}
-    filter={["==", ["get", "kind"], "cell"]}
-    layout={{
-      visibility: $roadStyle == "cells" ? "none" : "visible",
-    }}
-    paint={{
-      "fill-color": ["get", "color"],
-      "fill-opacity": 0.8,
-    }}
-  />
-
-  <FillLayer
-    {...layerId("border-arrows")}
-    filter={["==", ["get", "kind"], "border_arrow"]}
-    paint={{
-      "fill-color": ["get", "color"],
-    }}
-  />
-  <LineLayer
-    {...layerId("border-arrow-outlines")}
-    filter={["==", ["get", "kind"], "border_arrow"]}
-    paint={{
-      "line-color": "black",
-      "line-width": 2,
-    }}
-  />
-
   <LineLayer
     {...layerId("interior-roads-outlines")}
     filter={["==", ["get", "kind"], "interior_road"]}
@@ -154,8 +87,4 @@
       <slot name="line-popup" />
     {/if}
   </LineLayer>
-
-  <OneWayLayer />
-
-  <slot name="more-layers" />
 </GeoJSON>
diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -5,7 +5,12 @@
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
   import { DotMarker, layerId, Link } from "./common";
-  import ModalFilterLayer from "./ModalFilterLayer.svelte";
+  import {
+    CellLayer,
+    HighlightBoundaryLayer,
+    ModalFilterLayer,
+    OneWayLayer,
+  } from "./layers";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import {
     backend,
@@ -77,6 +82,11 @@
 
   <div slot="map">
     {#if prevMode == "neighbourhood"}
+      <HighlightBoundaryLayer gj={notNull($backend).renderNeighbourhood()} />
+      <GeoJSON data={notNull($backend).renderNeighbourhood()} generateId>
+        <CellLayer />
+        <OneWayLayer />
+      </GeoJSON>
       <RenderNeighbourhood
         gj={notNull($backend).renderNeighbourhood()}
         interactive={false}

diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
@@ -8,7 +8,12 @@
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
   import { DotMarker, gjPosition, layerId, Link } from "./common";
-  import ModalFilterLayer from "./ModalFilterLayer.svelte";
+  import {
+    CellLayer,
+    HighlightBoundaryLayer,
+    ModalFilterLayer,
+    OneWayLayer,
+  } from "./layers";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import { backend, map, mode } from "./stores";
   import type { AllShortcuts } from "./wasm";
@@ -149,6 +154,12 @@
   </div>
 
   <div slot="map">
+    <HighlightBoundaryLayer gj={notNull($backend).renderNeighbourhood()} />
+    <GeoJSON data={notNull($backend).renderNeighbourhood()} generateId>
+      <CellLayer />
+      <OneWayLayer />
+    </GeoJSON>
+
     {#if state.state == "neutral"}
       <RenderNeighbourhood
         gj={notNull($backend).renderNeighbourhood()}

diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
@@ -3,13 +3,18 @@
   import type { LngLat } from "maplibre-gl";
   import type { Waypoint } from "route-snapper-ts";
   import { onDestroy } from "svelte";
-  import { type LayerClickInfo } from "svelte-maplibre";
+  import { GeoJSON, type LayerClickInfo } from "svelte-maplibre";
   import { notNull } from "svelte-utils";
   import { Popup } from "svelte-utils/map";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import AnimatePaths from "../AnimatePaths.svelte";
   import { HelpButton, Link } from "../common";
-  import ModalFilterLayer from "../ModalFilterLayer.svelte";
+  import {
+    CellLayer,
+    HighlightBoundaryLayer,
+    ModalFilterLayer,
+    OneWayLayer,
+  } from "../layers";
   import RenderNeighbourhood from "../RenderNeighbourhood.svelte";
   import {
     animateShortcuts,
@@ -286,6 +291,12 @@
   </div>
 
   <div slot="map">
+    <HighlightBoundaryLayer {gj} />
+    <GeoJSON data={gj} generateId>
+      <CellLayer />
+      <OneWayLayer />
+    </GeoJSON>
+
     <RenderNeighbourhood
       {gj}
       interactive={action == "filter" || action == "oneway"}

diff --git a/web/src/layers/CellLayer.svelte b/web/src/layers/CellLayer.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { FillLayer, LineLayer } from "svelte-maplibre";
+  import { layerId } from "../common";
+  import { roadStyle } from "../stores";
+</script>
+
+<FillLayer
+  {...layerId("cells")}
+  filter={["==", ["get", "kind"], "cell"]}
+  layout={{
+    visibility: $roadStyle == "cells" ? "none" : "visible",
+  }}
+  paint={{
+    "fill-color": ["get", "color"],
+    "fill-opacity": 0.8,
+  }}
+/>
+
+<FillLayer
+  {...layerId("border-arrows")}
+  filter={["==", ["get", "kind"], "border_arrow"]}
+  paint={{
+    "fill-color": ["get", "color"],
+  }}
+/>
+<LineLayer
+  {...layerId("border-arrow-outlines")}
+  filter={["==", ["get", "kind"], "border_arrow"]}
+  paint={{
+    "line-color": "black",
+    "line-width": 2,
+  }}
+/>
diff --git a/web/src/layers/HighlightBoundaryLayer.svelte b/web/src/layers/HighlightBoundaryLayer.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Feature, Polygon } from "geojson";
+  import { FillLayer, GeoJSON } from "svelte-maplibre";
+  import { layerId } from "../common";
+  import type { RenderNeighbourhoodOutput } from "../wasm";
+
+  export let gj: RenderNeighbourhoodOutput;
+
+  function invertBoundary(gj: RenderNeighbourhoodOutput): Feature<Polygon> {
+    // @ts-expect-error TS can't figure out that we're narrowing the case here
+    let boundary: Feature<Polygon> = gj.features.find(
+      (f) => f.properties.kind == "boundary",
+    )!;
+
+    return {
+      type: "Feature",
+      properties: {},
+      geometry: {
+        type: "Polygon",
+        coordinates: [
+          [
+            [180.0, 90.0],
+            [-180.0, 90.0],
+            [-180.0, -90.0],
+            [180.0, -90.0],
+            [180.0, 90.0],
+          ],
+          // One hole
+          boundary.geometry.coordinates[0],
+        ],
+      },
+    };
+  }
+</script>
+
+<GeoJSON data={invertBoundary(gj)}>
+  <FillLayer
+    {...layerId("neighbourhood-boundary")}
+    paint={{ "fill-color": "black", "fill-opacity": 0.3 }}
+  />
+</GeoJSON>
diff --git a/web/src/ModalFilterLayer.svelte → web/src/layers/ModalFilterLayer.svelte b/web/src/ModalFilterLayer.svelte → web/src/layers/ModalFilterLayer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { GeoJSON, SymbolLayer } from "svelte-maplibre";
   import { emptyGeojson } from "svelte-utils/map";
-  import { layerId } from "./common";
-  import { backend, mutationCounter } from "./stores";
+  import { layerId } from "../common";
+  import { backend, mutationCounter } from "../stores";
 
   // TODO Runes would make this so nicer. The > 0 part is a hack...
   $: gj =

diff --git a/web/src/OneWayLayer.svelte → web/src/layers/OneWayLayer.svelte b/web/src/OneWayLayer.svelte → web/src/layers/OneWayLayer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { SymbolLayer } from "svelte-maplibre";
-  import { layerId } from "./common";
+  import { layerId } from "../common";
 </script>
 
 <SymbolLayer

diff --git a/web/src/layers/index.ts b/web/src/layers/index.ts
@@ -0,0 +1,4 @@
+export { default as CellLayer } from "./CellLayer.svelte";
+export { default as HighlightBoundaryLayer } from "./HighlightBoundaryLayer.svelte";
+export { default as ModalFilterLayer } from "./ModalFilterLayer.svelte";
+export { default as OneWayLayer } from "./OneWayLayer.svelte";