Start refactoring scheme sketcher code, before moving to a library

src/lib/draw/EditGeometryMode.svelte

@@ -7,12 +7,10 @@
     polygonTool,
     routeTool,
   } from "lib/draw/stores";
+  import type { FeatureWithAnyProps } from "lib/draw/types";
   import { ButtonGroup, DefaultButton, SecondaryButton } from "govuk-svelte";
-  import type { FeatureWithProps } from "lib/maplibre";
-  import { interventionName } from "lib/sidebar/scheme_data";
-  import { schema } from "stores";
+  import { cfg } from "lib/draw/config";
   import { onDestroy, onMount } from "svelte";
-  import type { FeatureUnion } from "types";
   import PointControls from "./point/PointControls.svelte";
   import PolygonControls from "./polygon/PolygonControls.svelte";
   import RouteControls from "./route/RouteControls.svelte";
@@ -24,25 +22,23 @@
   let name = "";
   let controls = "";
 
-  // As a feature is being edited, store the latest version
-  let unsavedFeature: FeatureWithProps<Point | LineString | Polygon> | null =
-    null;
+  // As a feature is being edited, store the latest version. This type ignores
+  // the ID and specifics of the properties, but they're there.
+  let unsavedFeature: FeatureWithAnyProps | null = null;
 
   onMount(() => {
-    let maybeFeature: FeatureUnion | null = null;
+    let maybeFeature: FeatureWithAnyProps | null = null;
     gjSchemeCollection.update((gj) => {
       maybeFeature = gj.features.find((f) => f.id == id)!;
       // Hide it from the regular drawing while we're editing
       maybeFeature.properties.hide_while_editing = true;
       return gj;
     });
     let feature = maybeFeature!;
-    name = interventionName(feature);
+    name = cfg.interventionName(feature);
 
     if (feature.geometry.type == "LineString") {
-      $routeTool?.editExistingRoute(
-        feature as unknown as Feature<LineString, RouteProps>,
-      );
+      $routeTool?.editExistingRoute(feature as Feature<LineString, RouteProps>);
       $routeTool?.addEventListenerSuccess(onSuccess);
       $routeTool?.addEventListenerUpdated(onUpdate);
       $routeTool?.addEventListenerFailure(onFailure);
@@ -96,13 +92,14 @@
     });
   });
 
-  function onSuccess(feature: FeatureWithProps<Point | Polygon | LineString>) {
+  function onSuccess(feature: Feature<Point | Polygon | LineString>) {
+    feature.properties ??= {};
     // Let onDestroy apply the update
-    unsavedFeature = feature;
+    unsavedFeature = feature as FeatureWithAnyProps;
     mode.set({ mode: "edit-form", id });
   }
 
-  function onUpdate(feature: FeatureWithProps<Polygon | LineString>) {
+  function onUpdate(feature: FeatureWithAnyProps<Polygon | LineString>) {
     // Just remember the update; don't apply it yet
     unsavedFeature = feature;
   }
@@ -115,8 +112,8 @@
 
   // Copy geometry and properties from source to destination
   function updateFeature(
-    destination: FeatureUnion,
-    source: FeatureWithProps<Point | LineString | Polygon>,
+    destination: FeatureWithAnyProps,
+    source: FeatureWithAnyProps,
   ) {
     destination.geometry = source.geometry;
 
@@ -129,17 +126,7 @@
     if (source.properties.waypoints) {
       destination.properties.waypoints = source.properties.waypoints;
     }
-    // Only copy route_name if the user hasn't set it. It's not simple to
-    // distinguish the user manually editing the name from it being auto-filled
-    // previously, so be safe and don't overwrite anything. The user can always
-    // use the auto-fill button explicitly.
-    if (
-      source.properties.route_name &&
-      !destination.properties.name &&
-      $schema != "pipeline"
-    ) {
-      destination.properties.name = source.properties.route_name;
-    }
+    cfg.updateFeature(destination, source);
   }
 
   function finish() {

src/lib/draw/InterventionLayer.svelte

@@ -12,7 +12,7 @@
     isPolygon,
     layerId,
   } from "lib/maplibre";
-  import { interventionName } from "lib/sidebar/scheme_data";
+  import { cfg } from "lib/draw/config";
   import type {
     DataDrivenPropertyValueSpecification,
     ExpressionSpecification,
@@ -26,7 +26,8 @@
     Popup,
     type LayerClickInfo,
   } from "svelte-maplibre";
-  import type { FeatureUnion, SchemeCollection } from "types";
+  import type { SchemeCollection } from "types";
+  import type { FeatureWithAnyProps } from "lib/draw/types";
 
   $: gj = addLineStringEndpoints($gjSchemeCollection);
 
@@ -108,8 +109,8 @@
 
   function tooltip(features: Feature[] | null): string {
     if (features) {
-      let feature = features[0] as FeatureUnion;
-      let name = interventionName(feature);
+      let feature = features[0] as FeatureWithAnyProps;
+      let name = cfg.interventionName(feature);
       let scheme =
         $gjSchemeCollection.schemes[feature.properties.scheme_reference]
           .scheme_name ?? "Untitled scheme";

src/lib/draw/config.ts

@@ -0,0 +1,83 @@
+import type { FeatureUnion } from "types";
+import {
+  newFeatureId,
+  getArbitrarySchemeRef,
+  gjSchemeCollection,
+} from "lib/draw/stores";
+import type { FeatureWithAnyProps } from "lib/draw/types";
+import type { Feature, LineString, Polygon, Point } from "geojson";
+import { interventionName } from "lib/sidebar/scheme_data";
+import { schema } from "stores";
+import { get } from "svelte/store";
+
+// The draw code should be agnostic to the feature properties that differ by
+// schema. Start centralizing the logic here, so it's easy for other users to
+// override.
+
+// TODO As an alternate idea, users could implement a custom Svelte store with methods for doing these things
+
+export let cfg = {
+  interventionName: (f: FeatureWithAnyProps) => {
+    return interventionName(f as FeatureUnion);
+  },
+
+  newPointFeature: (f: Feature<Point>) => {
+    gjSchemeCollection.update((gj) => {
+      f.id = newFeatureId(gj);
+      f.properties ||= {};
+      f.properties.scheme_reference = getArbitrarySchemeRef(gj);
+      f.properties.intervention_type = "other";
+      // Typecast safe because we've established the invariants above
+      gj.features.push(f as FeatureUnion);
+      return gj;
+    });
+  },
+
+  newPolygonFeature: (f: Feature<Polygon>) => {
+    gjSchemeCollection.update((gj) => {
+      f.id = newFeatureId(gj);
+      f.properties ||= {};
+      f.properties.scheme_reference = getArbitrarySchemeRef(gj);
+      f.properties.intervention_type = "area";
+      f.properties.is_coverage_polygon = false;
+      // Typecast safe because we've established the invariants above
+      gj.features.push(f as FeatureUnion);
+      return gj;
+    });
+  },
+
+  newLineStringFeature: (f: Feature<LineString>) => {
+    gjSchemeCollection.update((gj) => {
+      f.id = newFeatureId(gj);
+      f.properties ||= {};
+      f.properties.scheme_reference = getArbitrarySchemeRef(gj);
+      f.properties.intervention_type = "route";
+      if (f.properties.route_name) {
+        if (get(schema) != "pipeline") {
+          f.properties.name = f.properties.route_name;
+        }
+        delete f.properties.route_name;
+      }
+      // Typecast safe because we've established the invariants above
+      gj.features.push(f as FeatureUnion);
+      return gj;
+    });
+  },
+
+  updateFeature: (
+    destination: FeatureWithAnyProps,
+    source: FeatureWithAnyProps,
+  ) => {
+    // Only copy route_name if the user hasn't set it. It's not simple to
+    // distinguish the user manually editing the name from it being auto-filled
+    // previously, so be safe and don't overwrite anything. The user can always
+    // use the auto-fill button explicitly.
+    if (
+      source.properties.route_name &&
+      !destination.properties.name &&
+      get(schema) != "pipeline"
+    ) {
+      destination.properties.name = source.properties.route_name;
+    }
+  },
+};

src/lib/draw/point/PointMode.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-  import type { Point } from "geojson";
-  import {
-    gjSchemeCollection,
-    mode,
-    newFeatureId,
-    pointTool,
-  } from "lib/draw/stores";
+  import type { Feature, Point } from "geojson";
+  import { mode, pointTool } from "lib/draw/stores";
   import { SecondaryButton } from "govuk-svelte";
-  import type { FeatureWithProps } from "lib/maplibre";
-  import { getArbitraryScheme } from "lib/sidebar/scheme_data";
   import { onDestroy, onMount } from "svelte";
-  import type { Feature } from "types";
   import PointControls from "./PointControls.svelte";
+  import { cfg } from "lib/draw/config";
 
   onMount(() => {
     $pointTool!.start();
@@ -23,16 +16,8 @@
     $pointTool!.clearEventListeners();
   });
 
-  function onSuccess(feature: FeatureWithProps<Point>) {
-    gjSchemeCollection.update((gj) => {
-      feature.id = newFeatureId(gj);
-      feature.properties.scheme_reference =
-        getArbitraryScheme(gj).scheme_reference;
-      feature.properties.intervention_type = "other";
-      gj.features.push(feature as Feature<Point>);
-      return gj;
-    });
-
+  function onSuccess(feature: Feature<Point>) {
+    cfg.newPointFeature(feature);
     mode.set({ mode: "edit-form", id: feature.id as number });
   }
 

src/lib/draw/point/point_tool.ts

@@ -1,18 +1,24 @@
-import type { Point } from "geojson";
-import { pointFeature, type FeatureWithProps } from "lib/maplibre";
+import type { Feature, Point } from "geojson";
+import { setPrecision } from "lib/draw/stores";
 import type { Map, MapMouseEvent } from "maplibre-gl";
 
-// Note this uses the geojson FeatureWithProps, not our specialization in types.ts
 export class PointTool {
   map: Map;
   active: boolean;
-  eventListenersSuccess: ((f: FeatureWithProps<Point>) => void)[];
+  eventListenersSuccess: ((f: Feature<Point>) => void)[];
   eventListenersFailure: (() => void)[];
-  cursor: FeatureWithProps<Point> | null;
+  cursor: Feature<Point> | null;
 
   onMouseMove = (e: MapMouseEvent) => {
     if (this.active) {
-      this.cursor = pointFeature(e.lngLat.toArray());
+      this.cursor = {
+        type: "Feature",
+        properties: {},
+        geometry: {
+          type: "Point",
+          coordinates: setPrecision(e.lngLat.toArray()),
+        },
+      };
     }
   };
 
@@ -62,7 +68,7 @@ export class PointTool {
     this.stop();
   }
 
-  addEventListenerSuccess(callback: (f: FeatureWithProps<Point>) => void) {
+  addEventListenerSuccess(callback: (f: Feature<Point>) => void) {
     this.eventListenersSuccess.push(callback);
   }
   addEventListenerFailure(callback: () => void) {

src/lib/draw/polygon/PolygonMode.svelte

@@ -1,17 +1,10 @@
 <script lang="ts">
-  import type { Polygon } from "geojson";
-  import {
-    gjSchemeCollection,
-    mode,
-    newFeatureId,
-    polygonTool,
-  } from "lib/draw/stores";
+  import type { Feature, Polygon } from "geojson";
+  import { mode, polygonTool } from "lib/draw/stores";
   import { ButtonGroup, DefaultButton, SecondaryButton } from "govuk-svelte";
-  import type { FeatureWithProps } from "lib/maplibre";
-  import { getArbitraryScheme } from "lib/sidebar/scheme_data";
   import { onDestroy, onMount } from "svelte";
-  import type { Feature } from "types";
   import PolygonControls from "./PolygonControls.svelte";
+  import { cfg } from "lib/draw/config";
 
   onMount(() => {
     $polygonTool!.startNew();
@@ -23,17 +16,8 @@
     $polygonTool!.clearEventListeners();
   });
 
-  function onSuccess(feature: FeatureWithProps<Polygon>) {
-    gjSchemeCollection.update((gj) => {
-      feature.id = newFeatureId(gj);
-      feature.properties.scheme_reference =
-        getArbitraryScheme(gj).scheme_reference;
-      feature.properties.intervention_type = "area";
-      feature.properties.is_coverage_polygon = false;
-      gj.features.push(feature as Feature<Polygon>);
-      return gj;
-    });
-
+  function onSuccess(feature: Feature<Polygon>) {
+    cfg.newPolygonFeature(feature);
     mode.set({ mode: "edit-form", id: feature.id as number });
   }
 

src/lib/draw/route/RouteMode.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">
-  import type { LineString, Polygon } from "geojson";
-  import {
-    gjSchemeCollection,
-    mode,
-    newFeatureId,
-    routeTool,
-  } from "lib/draw/stores";
+  import type { Feature, LineString, Polygon } from "geojson";
+  import { mode, routeTool } from "lib/draw/stores";
   import { ButtonGroup, DefaultButton, SecondaryButton } from "govuk-svelte";
-  import type { FeatureWithProps } from "lib/maplibre";
-  import { getArbitraryScheme } from "lib/sidebar/scheme_data";
-  import { schema } from "stores";
   import { onDestroy, onMount } from "svelte";
-  import type { Feature } from "types";
   import RouteControls from "./RouteControls.svelte";
+  import { cfg } from "lib/draw/config";
 
   onMount(() => {
     $routeTool!.startRoute();
@@ -24,22 +16,9 @@
     $routeTool!.clearEventListeners();
   });
 
-  function onSuccess(feature: FeatureWithProps<LineString | Polygon>) {
-    gjSchemeCollection.update((gj) => {
-      feature.id = newFeatureId(gj);
-      feature.properties.scheme_reference =
-        getArbitraryScheme(gj).scheme_reference;
-      feature.properties.intervention_type = "route";
-      if (feature.properties.route_name) {
-        if ($schema != "pipeline") {
-          feature.properties.name = feature.properties.route_name;
-        }
-        delete feature.properties.route_name;
-      }
-      gj.features.push(feature as Feature<LineString>);
-      return gj;
-    });
-
+  function onSuccess(feature: Feature<LineString | Polygon>) {
+    // We did startRoute, so we know it's a LineString
+    cfg.newLineStringFeature(feature as Feature<LineString>);
     mode.set({ mode: "edit-form", id: feature.id as number });
   }