Add controls to feature form

src/lib/draw/EditMode.svelte

@@ -17,6 +17,7 @@
   import AreaControls from "./area/AreaControls.svelte";
   import type { AreaProps, RouteProps } from "route-snapper-ts";
   import type { Writable } from "svelte/store";
+  import { finishCurrentFeature } from "./stores";
 
   export let cfg: Config<F, S>;
   export let gjSchemes: Writable<Schemes<F, S>>;
@@ -60,6 +61,7 @@
         });
       }
       controls = "route";
+      finishCurrentFeature.set(finishRoute);
     } else if (feature.geometry.type == "Polygon") {
       if (feature.properties.waypoints) {
         // Transform into the correct format
@@ -82,14 +84,17 @@
         $areaWaypoints = $areaWaypoints;
       }
       controls = "area";
+      finishCurrentFeature.set(finishArea);
     } else if (feature.geometry.type == "Point") {
       $pointPosition = JSON.parse(JSON.stringify(feature.geometry.coordinates));
       controls = "point";
+      finishCurrentFeature.set(finish);
     }
   });
   onDestroy(() => {
     $pointPosition = null;
-
+    finishCurrentFeature.set(() => {});
+    
     $routeTool?.stop();
     $routeTool?.clearEventListeners();
 

src/lib/draw/NewFeatureForm.svelte

@@ -2,8 +2,9 @@
   import { type Config } from "$lib/config";
   import { onDestroy } from "svelte";
   import type { Schemes } from "$lib/draw/types";
-  import type { Writable } from "svelte/store";
-  import { featureProps } from "./stores";
+  import { get, type Writable } from "svelte/store";
+  import { featureProps, finishCurrentFeature, mode } from "./stores";
+  import { DefaultButton, SecondaryButton } from "govuk-svelte";
 
   export let cfg: Config<F, S>;
   export let gjSchemes: Writable<Schemes<F, S>>;
@@ -19,6 +20,22 @@
 
 <h2>New intervention</h2>
 
+<DefaultButton
+  on:click={() => {
+    $finishCurrentFeature();
+  }}
+>
+  Finish
+</DefaultButton>
+
+<SecondaryButton
+  on:click={() => {
+    mode.set({ mode: "list" });
+  }}
+>
+  Cancel
+</SecondaryButton>
+
 <svelte:component
   this={cfg.editFeatureForm}
   {cfg}

src/lib/draw/area/AreaMode.svelte

@@ -8,18 +8,24 @@
     routeTool,
   } from "$lib/draw/stores";
   import { DefaultButton, SecondaryButton } from "govuk-svelte";
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import AreaControls from "./AreaControls.svelte";
   import { type Config } from "$lib/config";
   import type { FeatureWithID, Schemes } from "$lib/draw/types";
   import type { Writable } from "svelte/store";
   import { waypoints, calculateArea } from "./stores";
+  import { finishCurrentFeature } from "$lib/draw/stores";
 
   export let cfg: Config<F, S>;
   export let gjSchemes: Writable<Schemes<F, S>>;
 
   onMount(() => {
     $waypoints = [];
+    finishCurrentFeature.set(finish);
+  });
+
+  onDestroy(() => {
+    finishCurrentFeature.set(() => {});
   });
 
   function onSuccess(feature: Feature<LineString | Polygon>) {

src/lib/draw/point/PointMode.svelte

@@ -13,6 +13,7 @@
   import { map, type Config } from "$lib/config";
   import type { FeatureWithID, Schemes } from "$lib/draw/types";
   import type { Writable } from "svelte/store";
+  import { finishCurrentFeature } from "$lib/draw/stores";
 
   export let cfg: Config<F, S>;
   export let gjSchemes: Writable<Schemes<F, S>>;
@@ -21,9 +22,12 @@
     if ($map) {
       $map.getCanvas().style.cursor = "crosshair";
     }
+    finishCurrentFeature.set(onSuccess);
   });
+
   onDestroy(() => {
     $pointPosition = null;
+    finishCurrentFeature.set(() => {});
     if ($map) {
       $map.getCanvas().style.cursor = "inherit";
     }

src/lib/draw/route/RouteMode.svelte

@@ -7,19 +7,24 @@
     featureProps,
     routeTool,
   } from "$lib/draw/stores";
-  import { DefaultButton, SecondaryButton } from "govuk-svelte";
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import RouteControls from "./RouteControls.svelte";
   import { type Config } from "$lib/config";
   import type { FeatureWithID, Schemes } from "$lib/draw/types";
   import type { Writable } from "svelte/store";
   import { waypoints } from "./stores";
+  import { finishCurrentFeature } from "../stores";
 
   export let cfg: Config<F, S>;
   export let gjSchemes: Writable<Schemes<F, S>>;
 
   onMount(() => {
     $waypoints = [];
+    finishCurrentFeature.set(finish);
+  });
+
+  onDestroy(() => {
+    finishCurrentFeature.set(() => {});
   });
 
   function onSuccess(feature: Feature<LineString | Polygon>) {

src/lib/draw/stores.ts

@@ -31,6 +31,9 @@ export const mode: Writable<Mode> = writable({ mode: "list" });
 // the generic parameter isn't known here.
 export const featureProps: Writable<FeatureProps<any>> = writable({});
 
+// Used to share the function currently required to finish drawing a feature
+export const finishCurrentFeature: Writable<Function> = writable(() => {});
+
 // All feature IDs must:
 //
 // - be unique

src/lib/sidebar/EditFeatureForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="F, S">
-  import { deleteIntervention, mode, featureProps } from "$lib/draw/stores";
-  import { ErrorMessage, WarningButton } from "govuk-svelte";
+  import { deleteIntervention, mode, featureProps, finishCurrentFeature } from "$lib/draw/stores";
+  import { ErrorMessage, DefaultButton, SecondaryButton, WarningButton } from "govuk-svelte";
   import { type Config } from "$lib/config";
   import type { FeatureWithID, Schemes } from "$lib/draw/types";
   import type { Writable } from "svelte/store";
@@ -32,6 +32,18 @@
 
 <h2>Editing {cfg.interventionName(feature)}</h2>
 
+<DefaultButton on:click={() => {$finishCurrentFeature()}}>
+  Finish
+</DefaultButton>
+
+<SecondaryButton
+  on:click={() => {
+    mode.set({ mode: "list" });
+  }}
+>
+  Cancel
+</SecondaryButton>
+
 <WarningButton on:click={() => deleteIntervention(gjSchemes, id)}>
   Delete
 </WarningButton>