Different method for rendering filters and the rest of the

neighbourhood. Show filters on the network mode.

Author: dabreegster

backend/src/lib.rs

@@ -95,6 +95,11 @@ impl LTN {
         bytes
     }
 
+    #[wasm_bindgen(js_name = renderModalFilters)]
+    pub fn render_modal_filters(&self) -> Result<String, JsValue> {
+        Ok(serde_json::to_string(&self.map.filters_to_gj()).map_err(err_to_js)?)
+    }
+
     #[wasm_bindgen(js_name = renderNeighbourhood)]
     pub fn render_neighbourhood(&self) -> Result<String, JsValue> {
         Ok(

backend/src/map_model.rs

@@ -213,27 +213,35 @@ impl MapModel {
         self.after_edited();
     }
 
-    pub fn to_savefile(&self) -> GeoJson {
+    pub fn filters_to_gj(&self) -> FeatureCollection {
         let mut features = Vec::new();
-
-        // A point per modal filter
-        // (When we detect existing, maybe need to instead compact edits)
-        for (r, modal_filter) in &self.modal_filters {
+        for (r, filter) in &self.modal_filters {
             let pt = self
                 .get_r(*r)
                 .linestring
-                .line_interpolate_point(modal_filter.percent_along)
+                .line_interpolate_point(filter.percent_along)
                 .unwrap();
-            // TODO Maybe make the WASM API always do the mercator stuff
             let mut f = Feature::from(Geometry::from(&self.mercator.to_wgs84(&pt)));
-            f.set_property("kind", "modal_filter");
-            f.set_property("filter_kind", modal_filter.kind.to_string());
+            f.set_property("filter_kind", filter.kind.to_string());
+            f.set_property("road", r.0);
             features.push(f);
         }
+        FeatureCollection {
+            features,
+            bbox: None,
+            foreign_members: None,
+        }
+    }
 
-        features.extend(self.boundaries.values().cloned());
-
-        GeoJson::from(features)
+    pub fn to_savefile(&self) -> FeatureCollection {
+        let mut gj = self.filters_to_gj();
+        // TODO When we detect existing filters, maybe need to instead compact edits
+        for f in &mut gj.features {
+            f.set_property("kind", "modal_filter");
+            f.remove_property("road");
+        }
+        gj.features.extend(self.boundaries.values().cloned());
+        gj
     }
 
     pub fn load_savefile(&mut self, gj: FeatureCollection) -> Result<()> {

backend/src/neighbourhood.rs

@@ -2,8 +2,7 @@ use std::collections::{HashMap, HashSet};
 
 use anyhow::Result;
 use geo::{
-    BooleanOps, Contains, EuclideanDistance, EuclideanLength, Intersects, LineInterpolatePoint,
-    MultiLineString, Polygon,
+    BooleanOps, Contains, EuclideanDistance, EuclideanLength, Intersects, MultiLineString, Polygon,
 };
 use geojson::{Feature, FeatureCollection, Geometry};
 
@@ -115,19 +114,6 @@ impl Neighbourhood {
             features.push(f);
         }
 
-        for (r, filter) in &map.modal_filters {
-            let pt = map
-                .get_r(*r)
-                .linestring
-                .line_interpolate_point(filter.percent_along)
-                .unwrap();
-            let mut f = Feature::from(Geometry::from(&map.mercator.to_wgs84(&pt)));
-            f.set_property("kind", "modal_filter");
-            f.set_property("filter_kind", filter.kind.to_string());
-            f.set_property("road", r.0);
-            features.push(f);
-        }
-
         FeatureCollection {
             features,
             bbox: None,

web/src/DebugMode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { CircleLayer, LineLayer, Popup } from "svelte-maplibre";
+  import { CircleLayer, GeoJSON, LineLayer, Popup } from "svelte-maplibre";
   import { notNull, PropertiesTable } from "./common";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
@@ -28,11 +28,6 @@
           <PropertiesTable properties={notNull(data).properties} />
         </Popup>
       </div>
-      <div slot="circle-popup">
-        <Popup openOn="hover" let:data>
-          <PropertiesTable properties={notNull(data).properties} />
-        </Popup>
-      </div>
       <svelte:fragment slot="more-layers">
         <CircleLayer
           filter={["==", ["get", "kind"], "border_intersection"]}
@@ -58,5 +53,18 @@
         </LineLayer>
       </svelte:fragment>
     </RenderNeighbourhood>
+
+    <GeoJSON data={notNull($app).renderModalFilters()} generateId>
+      <CircleLayer
+        paint={{
+          "circle-radius": 15,
+          "circle-color": "black",
+        }}
+      >
+        <Popup openOn="hover" let:data>
+          <PropertiesTable properties={notNull(data).properties} />
+        </Popup>
+      </CircleLayer>
+    </GeoJSON>
   </div>
 </SplitComponent>

web/src/ModalFilterLayer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { CircleLayer, GeoJSON } from "svelte-maplibre";
+  import { app, mutationCounter } from "./stores";
+
+  // TODO Runes would make this so nicer. The > 0 part is a hack...
+  $: gj = $mutationCounter > 0 ? JSON.parse($app!.renderModalFilters()) : null;
+</script>
+
+<GeoJSON data={gj}>
+  <CircleLayer
+    paint={{
+      "circle-radius": 15,
+      "circle-color": "black",
+    }}
+  />
+</GeoJSON>

web/src/NetworkMode.svelte

@@ -3,6 +3,7 @@
   import { FillLayer, GeoJSON, hoverStateFilter, Popup } from "svelte-maplibre";
   import { isPolygon, notNull } from "./common";
   import ManageSavefiles from "./ManageSavefiles.svelte";
+  import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import SplitComponent from "./SplitComponent.svelte";
   import { app, mode } from "./stores";
 
@@ -88,6 +89,7 @@
           <p>{notNull(data).properties.name}</p>
         </Popup>
       </FillLayer>
+      <ModalFilterLayer />
     </GeoJSON>
   </div>
 </SplitComponent>

web/src/RenderNeighbourhood.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import type { Feature, FeatureCollection } from "geojson";
-  import { CircleLayer, FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
-  import { constructMatchExpression, isPolygon } from "./common";
+  import { FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
+  import { isPolygon } from "./common";
   import { showBasemap } from "./stores";
 
   export let gjInput: FeatureCollection;
   // When disabled, can't click lines or circles, no slots, no hoverCursor
   export let interactive = true;
   export let onClickLine = (f: Feature) => {};
-  export let onClickCircle = (f: Feature) => {};
 
   let gj: FeatureCollection;
   let maxShortcuts: number;
@@ -82,18 +81,5 @@
       <slot name="line-popup" />
     {/if}
   </LineLayer>
-
-  <CircleLayer
-    filter={["==", ["get", "kind"], "modal_filter"]}
-    paint={{
-      "circle-radius": 15,
-      "circle-color": "black",
-    }}
-    on:click={(e) => interactive && onClickCircle(e.detail.features[0])}
-  >
-    {#if interactive}
-      <slot name="circle-popup" />
-    {/if}
-  </CircleLayer>
   <slot name="more-layers" />
 </GeoJSON>

web/src/RouteMode.svelte

@@ -3,6 +3,7 @@
   import { onDestroy, onMount } from "svelte";
   import { GeoJSON, LineLayer, Marker } from "svelte-maplibre";
   import { constructMatchExpression, notNull } from "./common";
+  import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
   import { app, map, mode } from "./stores";
@@ -58,6 +59,7 @@
       gjInput={JSON.parse(notNull($app).renderNeighbourhood())}
       interactive={false}
     />
+    <ModalFilterLayer />
     <GeoJSON data={gj}>
       <LineLayer
         paint={{

web/src/ViewShortcutsMode.svelte

@@ -3,6 +3,7 @@
   import { onDestroy, onMount } from "svelte";
   import { GeoJSON, LineLayer, Popup } from "svelte-maplibre";
   import { notNull } from "./common";
+  import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
   import { app, map, mode } from "./stores";
@@ -127,5 +128,6 @@
         </GeoJSON>
       {/if}
     {/if}
+    <ModalFilterLayer />
   </div>
 </SplitComponent>

web/src/edit/NeighbourhoodMode.svelte

@@ -7,12 +7,12 @@
   } from "geojson";
   import type { MapMouseEvent } from "maplibre-gl";
   import { onDestroy } from "svelte";
-  import { Popup } from "svelte-maplibre";
+  import { CircleLayer, GeoJSON, Popup } from "svelte-maplibre";
   import { notNull } from "../common";
   import ManageSavefiles from "../ManageSavefiles.svelte";
   import RenderNeighbourhood from "../RenderNeighbourhood.svelte";
   import SplitComponent from "../SplitComponent.svelte";
-  import { app, map, mode } from "../stores";
+  import { app, map, mode, mutationCounter } from "../stores";
   import ChangeModalFilter from "./ChangeModalFilter.svelte";
   import FreehandLine from "./FreehandLine.svelte";
 
@@ -27,9 +27,10 @@
   let boundary: Feature<Polygon> | null;
 
   let gjInput: FeatureCollection;
-  rerender();
+  let modalFilterGj: FeatureCollection;
+  $: rerender($mutationCounter);
 
-  function rerender() {
+  function rerender(_x: number) {
     gjInput = JSON.parse($app!.renderNeighbourhood());
     boundary = gjInput.features.find(
       (f) => f.properties!.kind == "boundary"
@@ -39,6 +40,8 @@
     undoLength = gjInput.undo_length;
     // @ts-ignore These foreign members exist
     redoLength = gjInput.redo_length;
+
+    modalFilterGj = JSON.parse($app!.renderModalFilters());
   }
 
   $: if (addingFilter) {
@@ -51,7 +54,7 @@
   });
   function onClick(e: MapMouseEvent) {
     $app!.addModalFilter(e.lngLat, filterType);
-    rerender();
+    $mutationCounter++;
     stopAddingFilter();
   }
   function stopAddingFilter() {
@@ -60,10 +63,11 @@
     $map!.getCanvas().style.cursor = "inherit";
   }
 
-  function deleteFilter(f: Feature) {
+  function deleteFilter(e) {
+    let f = e.detail.features[0];
     if (f.properties!.kind == "modal_filter") {
       $app!.deleteModalFilter(f.properties!.road);
-      rerender();
+      $mutationCounter++;
     }
   }
 
@@ -80,11 +84,11 @@
   }
   function undo() {
     $app!.undo();
-    rerender();
+    $mutationCounter++;
   }
   function redo() {
     $app!.redo();
-    rerender();
+    $mutationCounter++;
   }
 
   function pickNewNeighbourhood() {
@@ -97,7 +101,7 @@
     let f = e.detail;
     if (f) {
       $app!.addManyModalFilters(f, filterType);
-      rerender();
+      $mutationCounter++;
     }
 
     addingMultipleFilters = false;
@@ -210,14 +214,24 @@
     <RenderNeighbourhood
       {gjInput}
       interactive={!addingFilter && !addingMultipleFilters}
-      onClickCircle={deleteFilter}
     >
       <div slot="line-popup">
         <Popup openOn="hover" let:data
           ><p>{notNull(data).properties.shortcuts} shortcuts</p></Popup
         >
       </div>
     </RenderNeighbourhood>
+    <GeoJSON data={modalFilterGj} generateId>
+      <CircleLayer
+        paint={{
+          "circle-radius": 15,
+          "circle-color": "black",
+        }}
+        on:click={deleteFilter}
+      >
+        <Popup openOn="hover">Click to delete</Popup>
+      </CircleLayer>
+    </GeoJSON>
     {#if addingMultipleFilters}
       <FreehandLine map={notNull($map)} on:done={gotFreehandLine} />
     {/if}

web/src/stores.ts

@@ -29,6 +29,9 @@ export type Mode =
     };
 
 export let app: Writable<LTN | null> = writable(null);
+// A way for different components to know when internal app state has changed
+// and they might need to rerender
+export let mutationCounter: Writable<number> = writable(1);
 export let mode: Writable<Mode> = writable({ mode: "title" });
 export let showBasemap: Writable<boolean> = writable(true);
 export let map: Writable<Map | null> = writable(null);