Use same interaction for editing filters and one-ways. #27

a-b-street · Apr 19, 2024 · cf62b9a · cf62b9a
1 parent ab56d6f
commit cf62b9a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 30 deletions.
diff --git a/web/src/DebugMode.svelte b/web/src/DebugMode.svelte
@@ -39,7 +39,7 @@
     <RenderNeighbourhood
       gjInput={JSON.parse(notNull($app).renderNeighbourhood())}
       interactive
-      onClickLine={(f) => window.open(notNull(f.properties).way, "_blank")}
+      onClickLine={(f, _) => window.open(notNull(f.properties).way, "_blank")}
     >
       <div slot="line-popup">
         <Popup openOn="hover" let:props>

diff --git a/web/src/ModalFilterLayer.svelte b/web/src/ModalFilterLayer.svelte
@@ -5,6 +5,8 @@
 
   // TODO Runes would make this so nicer. The > 0 part is a hack...
   $: gj = $mutationCounter > 0 ? JSON.parse($app!.renderModalFilters()) : null;
+
+  // TODO Maybe need eventsIfTopMost to delete, when cursor is also on line
 </script>
 
 <GeoJSON data={gj} generateId>

diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
@@ -9,19 +9,36 @@
     LineLayer,
   } from "svelte-maplibre";
   import { setCellColors } from "./cells";
+  import type { LngLat } from "maplibre-gl";
   import { layerId } from "./common";
 
   export let gjInput: RenderNeighbourhoodOutput;
   // When disabled, can't click lines or filters, no slots, no hoverCursor
   export let interactive = true;
-  export let onClickLine = (f: Feature) => {};
+  export let onClickLine = (f: Feature, pt: LngLat) => {};
 
   $: gj = setCellColors(gjInput);
   $: maxShortcuts = Math.max(
     ...gjInput.features.map((f) =>
       f.properties.kind == "interior_road" ? f.properties.shortcuts : 0,
     ),
   );
+
+  $: lineColor = hoverStateFilter(
+    // @ts-expect-error TODO Fix upstream types
+    [
+      "interpolate-hcl",
+      ["linear"],
+      ["get", "shortcuts"],
+      0,
+      "white",
+      1,
+      "#F19A93",
+      maxShortcuts,
+      "#A32015",
+    ],
+    "blue",
+  );
 </script>
 
 <GeoJSON data={gj} generateId>
@@ -39,23 +56,11 @@
     filter={["==", ["get", "kind"], "interior_road"]}
     paint={{
       "line-width": 10,
-      "line-color": hoverStateFilter(
-        [
-          "interpolate-hcl",
-          ["linear"],
-          ["get", "shortcuts"],
-          0,
-          "white",
-          1,
-          "#F19A93",
-          maxShortcuts,
-          "#A32015",
-        ],
-        "blue",
-      ),
+      "line-color": lineColor,
       "line-opacity": hoverStateFilter(1.0, 0.5),
     }}
-    on:click={(e) => interactive && onClickLine(e.detail.features[0])}
+    on:click={(e) =>
+      interactive && onClickLine(e.detail.features[0], e.detail.event.lngLat)}
     manageHoverState={interactive}
     hoverCursor={interactive ? "pointer" : undefined}
   >

diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
@@ -4,6 +4,7 @@
   import type { Feature, FeatureCollection } from "geojson";
   import { onDestroy, onMount } from "svelte";
   import { FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
+  import type { LngLat } from "maplibre-gl";
   import { layerId, notNull, Popup, Link } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
@@ -22,7 +23,7 @@
       };
   let state: State = { state: "neutral" };
 
-  function choseRoad(roadGj: Feature) {
+  function choseRoad(roadGj: Feature, _: LngLat) {
     let gj = JSON.parse($app!.getShortcutsCrossingRoad(roadGj.properties!.id));
     if (gj.features.length == 0) {
       window.alert("No shortcuts here");

diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { RenderNeighbourhoodOutput } from "../wasm";
   import type { Feature, LineString, Polygon } from "geojson";
-  import type { MapMouseEvent } from "maplibre-gl";
+  import type { LngLat } from "maplibre-gl";
   import { onDestroy } from "svelte";
   import { type LayerClickInfo } from "svelte-maplibre";
   import { notNull, Popup, Link } from "../common";
@@ -43,9 +43,7 @@
       f.properties.kind == "cell" && f.properties.cell_color == "disconnected",
   ).length;
 
-  $map!.on("click", onClick);
   onDestroy(() => {
-    $map!.off("click", onClick);
     $map!.doubleClickZoom.enable();
   });
 
@@ -60,15 +58,11 @@
     autosave();
   }
 
-  function onClick(e: MapMouseEvent) {
+  function onClickLine(f: Feature, pt: LngLat) {
     if (action == "filter") {
-      $app!.addModalFilter(e.lngLat, $filterType);
+      $app!.addModalFilter(pt, $filterType);
       $mutationCounter++;
-    }
-  }
-
-  function onClickLine(f: Feature) {
-    if (action == "oneway") {
+    } else if (action == "oneway") {
       $app!.toggleDirection(f.properties!.road);
       $mutationCounter++;
     }
@@ -254,15 +248,17 @@
   <div slot="map">
     <RenderNeighbourhood
       {gjInput}
-      interactive={action == "oneway"}
+      interactive={action == "filter" || action == "oneway"}
       {onClickLine}
     >
       <div slot="line-popup">
         <Popup openOn="hover" let:props>
           <p>
             {props.shortcuts} shortcuts through {props.name ?? "unnamed road"}
           </p>
-          {#if action == "oneway"}
+          {#if action == "filter"}
+            <p>Click to add modal filter</p>
+          {:else}
             <p>Click to change direction</p>
           {/if}
         </Popup>