Optionally show snappable nodes when drawing areas. #57

Author: dabreegster

web/src/common/snapper/RouteSnapperLayer.svelte

@@ -7,7 +7,7 @@
     isPoint,
     isPolygon,
   } from "svelte-utils/map";
-  import { routeToolGj } from "./stores";
+  import { routeToolGj, showAllNodes, showAllNodesGj } from "./stores";
 
   const circleRadiusPixels = 10;
 </script>
@@ -50,3 +50,19 @@
     }}
   />
 </GeoJSON>
+
+<GeoJSON data={$showAllNodesGj}>
+  <CircleLayer
+    {...layerId("route-debug-nodes")}
+    paint={{
+      "circle-opacity": 0,
+      "circle-radius": 5,
+      "circle-stroke-color": "black",
+      "circle-stroke-width": 1,
+    }}
+    layout={{
+      visibility: $showAllNodes ? "visible" : "none",
+    }}
+    minzoom={14}
+  />
+</GeoJSON>

web/src/common/snapper/SnapPolygonControls.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
+  import type { FeatureCollection } from "geojson";
   import { RouteTool } from "route-snapper-ts";
-  import { undoLength } from "./stores";
+  import { undoLength, showAllNodes, showAllNodesGj } from "./stores";
 
   export let route_tool: RouteTool;
+
+  function loadNodes(show: boolean) {
+    // TODO Different API for just the nodes
+    let gj: FeatureCollection = JSON.parse(route_tool.inner.debugRenderGraph());
+    gj.features = gj.features.filter((f) => f.geometry.type == "Point");
+    $showAllNodesGj = gj;
+  }
+  $: loadNodes($showAllNodes);
 </script>
 
 <button
@@ -17,6 +26,11 @@
   {/if}
 </button>
 
+<label>
+  <input type="checkbox" bind:checked={$showAllNodes} />
+  Show all snappable points
+</label>
+
 <ul>
   <li>
     <b>Click</b>

web/src/common/snapper/stores.ts

@@ -9,3 +9,8 @@ export const routeToolGj: Writable<GeoJSON> = writable({
 });
 export const snapMode: Writable<boolean> = writable(true);
 export const undoLength: Writable<number> = writable(0);
+export const showAllNodes: Writable<boolean> = writable(false);
+export const showAllNodesGj: Writable<GeoJSON> = writable({
+  type: "FeatureCollection",
+  features: [],
+});

web/src/common/zorder.ts

@@ -82,6 +82,7 @@ const layerZorder = [
   // MapTiler basemap
   "Building",
 
+  "route-debug-nodes",
   "route-points",
   "route-lines",
   "route-polygons",

web/src/title/loader.ts

@@ -4,7 +4,13 @@ import { LTN } from "backend";
 import type { Feature } from "geojson";
 import { overpassQueryForPolygon } from "svelte-utils/overpass";
 import { RouteTool } from "route-snapper-ts";
-import { routeToolGj, snapMode, undoLength } from "../common/snapper/stores";
+import {
+  routeToolGj,
+  snapMode,
+  undoLength,
+  showAllNodes,
+  showAllNodesGj,
+} from "../common/snapper/stores";
 import {
   app,
   projectName,
@@ -71,6 +77,8 @@ export function afterProjectLoaded() {
       undoLength,
     ),
   );
+  showAllNodes.set(false);
+  showAllNodesGj.set({ type: "FeatureCollection", features: [] });
   get(map)!.fitBounds(
     Array.from(get(app)!.getBounds()) as [number, number, number, number],
     { animate: false },