Stop showing debug stuff in neighbourhood mode, and bring in modal improvements from Snape

Author: dabreegster

web/src/DebugMode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Popup } from "svelte-maplibre";
+  import { CircleLayer, Popup } from "svelte-maplibre";
   import { notNull, PropertiesTable } from "./common";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
@@ -33,6 +33,19 @@
           <PropertiesTable properties={notNull(data).properties} />
         </Popup>
       </div>
+      <svelte:fragment slot="more-layers">
+        <CircleLayer
+          filter={["==", ["get", "kind"], "border_intersection"]}
+          paint={{
+            "circle-radius": 15,
+            "circle-color": "green",
+          }}
+        >
+          <Popup openOn="hover" let:data>
+            <PropertiesTable properties={notNull(data).properties} />
+          </Popup>
+        </CircleLayer>
+      </svelte:fragment>
     </RenderNeighbourhood>
   </div>
 </SplitComponent>

web/src/RenderNeighbourhood.svelte

@@ -105,22 +105,16 @@
   </LineLayer>
 
   <CircleLayer
-    filter={isPoint}
+    filter={["==", ["get", "kind"], "modal_filter"]}
     paint={{
       "circle-radius": 15,
-      "circle-color": constructMatchExpression(
-        ["get", "kind"],
-        {
-          border_intersection: "green",
-          modal_filter: "black",
-        },
-        "red"
-      ),
+      "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/common/Modal.svelte

@@ -1,9 +1,27 @@
 <script lang="ts">
   // It starts open
   // on:close is forwarded
-  let dialog;
+  let dialog: HTMLDialogElement;
+
+  function onClick(e: MouseEvent) {
+    if (dialog.open) {
+      // Anything inside the modal counts as the <div> or something inside that
+      if (e.target == dialog) {
+        dialog.close();
+      }
+    }
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key == "Escape" || e.key == "Enter") {
+      e.stopPropagation();
+      dialog.close();
+    }
+  }
 </script>
 
+<svelte:window on:click={onClick} on:keydown={onKeyDown} />
+
 <dialog open on:close bind:this={dialog}>
   <div>
     <slot {dialog} />
@@ -28,5 +46,6 @@
     width: 80%;
     height: 80%;
     background: white;
+    overflow: scroll;
   }
 </style>