When adding a modal filter, get rid of the old popup and click behavior

a-b-street · Jan 5, 2024 · 48a0f4b · 48a0f4b
1 parent 3dfe396
commit 48a0f4b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/web/src/NeighbourhoodMode.svelte b/web/src/NeighbourhoodMode.svelte
@@ -42,6 +42,7 @@
 
   $: if (addingFilter) {
     map.on("click", onClick);
+    // TODO Still doesn't last long
     map.getCanvas().style.cursor = "crosshair";
   }
   onDestroy(() => {
@@ -151,6 +152,7 @@
     <RenderNeighbourhood
       {gjInput}
       {showBasemap}
+      interactive={!addingFilter}
       onClickLine={(f) => window.open(f.properties.way, "_blank")}
       onClickCircle={deleteFilter}
     >

diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
@@ -16,6 +16,8 @@
 
   export let gjInput: FeatureCollection;
   export let showBasemap: boolean;
+  // 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) => {};
 
@@ -89,10 +91,12 @@
         "red"
       ),
     }}
-    on:click={(e) => onClickLine(e.detail.features[0])}
-    hoverCursor="pointer"
+    on:click={(e) => interactive && onClickLine(e.detail.features[0])}
+    hoverCursor={interactive ? "pointer" : null}
   >
-    <slot name="line-popup" />
+    {#if interactive}
+      <slot name="line-popup" />
+    {/if}
   </LineLayer>
 
   <CircleLayer
@@ -108,8 +112,10 @@
         "red"
       ),
     }}
-    on:click={(e) => onClickCircle(e.detail.features[0])}
+    on:click={(e) => interactive && onClickCircle(e.detail.features[0])}
   >
-    <slot name="circle-popup" />
+    {#if interactive}
+      <slot name="circle-popup" />
+    {/if}
   </CircleLayer>
 </GeoJSON>