Fade things outside the edited neighbourhood. #27

web/src/RenderNeighbourhood.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { RenderNeighbourhoodOutput } from "./wasm";
   import OneWayLayer from "./OneWayLayer.svelte";
-  import type { Feature } from "geojson";
+  import type { Feature, Polygon } from "geojson";
   import {
     hoverStateFilter,
     FillLayer,
@@ -39,9 +39,42 @@
     ],
     "blue",
   );
+
+  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"]}

web/src/common/zorder.ts

@@ -94,6 +94,7 @@ const layerZorder = [
   "modal-filters",
 
   "boundary",
+  "neighbourhood-boundary",
 
   "freehand-line",