New polygon snap tool

package.json

@@ -34,7 +34,7 @@
     "@turf/nearest-point-on-line": "^6.5.0",
     "@types/geojson": "^7946.0.10",
     "maplibre-gl": "^2.4.0",
-    "route-snapper": "^0.1.12",
+    "route-snapper": "^0.1.13",
     "svelte": "^3.54.0"
   }
 }

src/lib/draw/GeometryMode.svelte

@@ -9,6 +9,7 @@
   import type { Feature, FeatureUnion } from "../../types";
   import PointControls from "./point/PointControls.svelte";
   import PolygonControls from "./polygon/PolygonControls.svelte";
+  import SnapPolygonControls from "./snap_polygon/SnapPolygonControls.svelte";
   import RouteControls from "./route/RouteControls.svelte";
 
   const thisMode = "edit-geometry";
@@ -20,7 +21,12 @@
 
   // An optional ID of what we're currently editing in this mode
   let currentlyEditing: number | null = null;
-  let currentlyEditingControls: "point" | "polygon" | "route" | null = null;
+  let currentlyEditingControls:
+    | "point"
+    | "free-polygon"
+    | "snap-polygon"
+    | "route"
+    | null = null;
 
   export function start() {}
   export function stop() {
@@ -55,7 +61,7 @@
   });
 
   // Handle successful edits
-  routeTool.addEventListenerSuccess((editedRoute) => {
+  routeTool.addEventListenerSuccessRoute((editedRoute) => {
     if (mode == thisMode) {
       gjScheme.update((gj) => {
         let feature = gj.features.find((f) => f.id == currentlyEditing)!;
@@ -73,6 +79,23 @@
       currentlyEditingControls = null;
     }
   });
+  routeTool.addEventListenerSuccessArea((editedArea) => {
+    if (mode == thisMode) {
+      gjScheme.update((gj) => {
+        let feature = gj.features.find((f) => f.id == currentlyEditing)!;
+        // Keep the ID and any properties. Just copy over stuff from routeSnapper.
+        // TODO We're depending on implementation details here and knowing what to copy...
+        feature.properties.waypoints = editedArea.properties.waypoints;
+        delete feature.properties.hide_while_editing;
+        feature.geometry = editedArea.geometry;
+        return gj;
+      });
+
+      // Stay in this mode
+      currentlyEditing = null;
+      currentlyEditingControls = null;
+    }
+  });
   for (let tool of [pointTool, polygonTool]) {
     tool.addEventListenerSuccess((feature) => {
       if (mode == thisMode) {
@@ -159,11 +182,16 @@
     currentlyEditing = id;
 
     if (feature.geometry.type == "LineString") {
-      routeTool.editExisting(feature as Feature<LineString>);
+      routeTool.editExistingRoute(feature as Feature<LineString>);
       currentlyEditingControls = "route";
     } else if (feature.geometry.type == "Polygon") {
-      polygonTool.editExisting(feature as Feature<Polygon>);
-      currentlyEditingControls = "polygon";
+      if (feature.properties.waypoints) {
+        routeTool.editExistingArea(feature as Feature<Polygon>);
+        currentlyEditingControls = "snap-polygon";
+      } else {
+        polygonTool.editExisting(feature as Feature<Polygon>);
+        currentlyEditingControls = "free-polygon";
+      }
     } else if (feature.geometry.type == "Point") {
       // No need to pass in the existing feature.geometry; it's the same as
       // where the cursor is anyway
@@ -176,8 +204,10 @@
 {#if mode == thisMode}
   {#if currentlyEditingControls == "point"}
     <PointControls {pointTool} editingExisting={true} />
-  {:else if currentlyEditingControls == "polygon"}
+  {:else if currentlyEditingControls == "free-polygon"}
     <PolygonControls {polygonTool} />
+  {:else if currentlyEditingControls == "snap-polygon"}
+    <SnapPolygonControls {routeTool} />
   {:else if currentlyEditingControls == "route"}
     <RouteControls {routeTool} />
   {:else}

src/lib/draw/Toolbox.svelte

@@ -11,16 +11,16 @@
   import RouteMode from "./route/RouteMode.svelte";
   import PointMode from "./point/PointMode.svelte";
   import PolygonMode from "./polygon/PolygonMode.svelte";
+  import SnapPolygonMode from "./snap_polygon/SnapPolygonMode.svelte";
   import SplitRouteMode from "./route/SplitRouteMode.svelte";
 
   export let routeUrl: string;
   export let planningMode: boolean;
   // Plumbed up from RouteMode, so we can pass it down to GeometryMode
-  // TODO Reconsider
+  // TODO Create this here too?
   let routeTool: RouteTool;
 
   // Create and manage these here, then pass down to modes as needed.
-  // TODO Teardown too
   let pointTool = new PointTool($map);
   let polygonTool = new PolygonTool($map);
 
@@ -30,6 +30,7 @@
   let routeMode: RouteMode;
   let pointMode: PointMode;
   let polygonMode: PolygonMode;
+  let snapPolygonMode: SnapPolygonMode;
   let splitRouteMode: SplitRouteMode;
 
   // This must be used; don't manually change mode
@@ -39,7 +40,8 @@
       "edit-geometry": geometryMode,
       route: routeMode,
       point: pointMode,
-      polygon: polygonMode,
+      "free-polygon": polygonMode,
+      "snap-polygon": snapPolygonMode,
       "split-route": splitRouteMode,
     };
 
@@ -57,6 +59,7 @@
   onDestroy(() => {
     pointTool?.tearDown();
     polygonTool?.tearDown();
+    routeTool?.tearDown();
   });
 </script>
 
@@ -98,11 +101,26 @@
   <div>
     <button
       type="button"
-      on:click={() => changeMode("polygon")}
-      disabled={mode == "polygon"}>New polygon</button
+      on:click={() => changeMode("free-polygon")}
+      disabled={mode == "free-polygon"}>New polygon (freehand)</button
     >
     <PolygonMode bind:this={polygonMode} {mode} {changeMode} {polygonTool} />
   </div>
+  <div>
+    <button
+      type="button"
+      on:click={() => changeMode("snap-polygon")}
+      disabled={mode == "snap-polygon"}>New polygon (snapped)</button
+    >
+    {#if routeTool}
+      <SnapPolygonMode
+        bind:this={snapPolygonMode}
+        {mode}
+        {changeMode}
+        {routeTool}
+      />
+    {/if}
+  </div>
   <div>
     {#if !planningMode}
       <button

src/lib/draw/polygon/PolygonMode.svelte

@@ -6,7 +6,7 @@
   import { gjScheme, newFeatureId, formOpen } from "../../../stores";
   import PolygonControls from "./PolygonControls.svelte";
 
-  const thisMode = "polygon";
+  const thisMode = "free-polygon";
 
   export let mode: string;
   export let changeMode: (m: Mode) => void;

src/lib/draw/route/RouteControls.svelte

@@ -6,7 +6,7 @@
 
   // TODO Save this in the route
   let avoidDoublingBack = false;
-  $: routeTool.setConfig({
+  $: routeTool.setRouteConfig({
     avoid_doubling_back: avoidDoublingBack,
   });
 

src/lib/draw/route/RouteMode.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Mode } from "../types";
-  import { onMount, onDestroy } from "svelte";
+  import { onMount } from "svelte";
   import init from "route-snapper";
   import { fetchWithProgress } from "route-snapper/lib.js";
   import { RouteTool } from "./route_tool";
@@ -24,7 +24,7 @@
     // When we enter this mode by clicking the button from edit-geometry, we
     // call routeTool.stop(). Re-activate it if so.
     if (!routeTool.isActive()) {
-      routeTool.start();
+      routeTool.startRoute();
     }
   }
   export function stop() {
@@ -49,7 +49,7 @@
         changeMode("edit-attribute");
       }
     });
-    routeTool.addEventListenerSuccess((feature) => {
+    routeTool.addEventListenerSuccessRoute((feature) => {
       if (mode == thisMode) {
         gjScheme.update((gj) => {
           feature.id = newFeatureId(gj);
@@ -63,10 +63,6 @@
       }
     });
   });
-
-  onDestroy(() => {
-    routeTool?.tearDown();
-  });
 </script>
 
 {#if !routeTool}