Don't reload route snapper when loading a savefile

Author: dabreegster

web/src/App.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import initLtn, { LTN } from "backend";
+  import initLtn from "backend";
   import type { Map } from "maplibre-gl";
   import initRouteSnapper from "route-snapper";
   import { onMount } from "svelte";
   import { FillLayer, GeoJSON, MapLibre } from "svelte-maplibre";
   import { Layout } from "./common";
-  import { RouteTool } from "./common/snapper/route_tool";
   import DebugMode from "./DebugMode.svelte";
   import NeighbourhoodMode from "./edit/NeighbourhoodMode.svelte";
   import NetworkMode from "./NetworkMode.svelte";
@@ -42,29 +41,13 @@
     mapStore.set(map);
   }
 
-  // TODO Move stuff like this out...
-  let route_tool: RouteTool | undefined = undefined;
   function zoomToFit() {
     $mapStore!.fitBounds(
       Array.from($app!.getBounds()) as [number, number, number, number],
       { animate: false }
     );
   }
 
-  // TODO Can we make the title screen mode do this?
-  function gotApp(_x: LTN | null) {
-    if (!$app) {
-      return;
-    }
-    console.log("New map model loaded");
-    zoomToFit();
-    $mode = {
-      mode: "network",
-    };
-    route_tool = new RouteTool($mapStore!, $app.toRouteSnapper());
-  }
-  $: gotApp($app);
-
   let sidebarDiv: HTMLDivElement;
   let mapDiv: HTMLDivElement;
   $: if (sidebarDiv && $sidebarContents) {
@@ -114,11 +97,7 @@
         {#if $mode.mode == "network"}
           <NetworkMode />
         {:else if $mode.mode == "set-boundary"}
-          <SetBoundaryMode
-            {route_tool}
-            name={$mode.name}
-            existing={$mode.existing}
-          />
+          <SetBoundaryMode name={$mode.name} existing={$mode.existing} />
         {:else if $mode.mode == "neighbourhood"}
           <NeighbourhoodMode />
         {:else if $mode.mode == "view-shortcuts"}

web/src/NetworkMode.svelte

@@ -16,6 +16,7 @@
   function resetTitle() {
     $mode = { mode: "title" };
     $app = null;
+    // TODO If we were being paranoid, route_tool as well
   }
 
   function pickNeighbourhood(name: string) {

web/src/SetBoundaryMode.svelte

@@ -1,55 +1,54 @@
 <script lang="ts">
   import type { Feature, Polygon } from "geojson";
-  import { RouteTool } from "./common/snapper/route_tool";
+  import { notNull } from "./common";
   import RouteSnapperLayer from "./common/snapper/RouteSnapperLayer.svelte";
   import SnapPolygonControls from "./common/snapper/SnapPolygonControls.svelte";
   import SplitComponent from "./SplitComponent.svelte";
-  import { app, mode } from "./stores";
+  import { app, mode, route_tool } from "./stores";
 
-  export let route_tool: RouteTool;
   export let name: string;
   export let existing: Feature<Polygon> | null;
 
   if (existing) {
-    route_tool.editExistingArea(existing);
+    $route_tool!.editExistingArea(existing);
   } else {
-    route_tool.startArea();
+    $route_tool!.startArea();
   }
 
   function onFailure() {
     $mode = {
       mode: "network",
     };
-    route_tool.clearEventListeners();
+    $route_tool!.clearEventListeners();
   }
 
-  route_tool.addEventListenerSuccess((feature) => {
+  $route_tool!.addEventListenerSuccess((feature) => {
     try {
       $app!.setNeighbourhoodBoundary(name, feature);
       $app!.setCurrentNeighbourhood(name);
       $mode = {
         mode: "neighbourhood",
       };
-      route_tool.clearEventListeners();
+      $route_tool!.clearEventListeners();
     } catch (err) {
       window.alert(
         "Known georust bug hit, sorry. You may need to just refresh the page now."
       );
       onFailure();
     }
   });
-  route_tool.addEventListenerFailure(onFailure);
+  $route_tool!.addEventListenerFailure(onFailure);
 </script>
 
 <SplitComponent>
   <div slot="sidebar">
     <h1>Draw your neighbourhood boundary for {name}</h1>
     <p>TODO: maybe move the instructions from the previous screen to here...</p>
 
-    <SnapPolygonControls {route_tool} />
+    <SnapPolygonControls route_tool={notNull($route_tool)} />
 
     <div>
-      <button on:click={() => route_tool.finish()}>Finish</button>
+      <button on:click={() => notNull($route_tool).finish()}>Finish</button>
       <button on:click={onFailure}>Cancel</button>
     </div>
   </div>

web/src/stores.ts

@@ -2,6 +2,7 @@ import { LTN } from "backend";
 import type { Feature, Polygon } from "geojson";
 import type { Map } from "maplibre-gl";
 import { writable, type Writable } from "svelte/store";
+import { RouteTool } from "./common/snapper/route_tool";
 
 export type Mode =
   | {
@@ -35,6 +36,7 @@ export let mutationCounter: Writable<number> = writable(1);
 export let mode: Writable<Mode> = writable({ mode: "title" });
 export let showBasemap: Writable<boolean> = writable(true);
 export let map: Writable<Map | null> = writable(null);
+export let route_tool: Writable<RouteTool | null> = writable(null);
 
 export let example: Writable<string> = writable("");
 

web/src/title/MapLoader.svelte

@@ -2,7 +2,8 @@
   import { LTN } from "backend";
   import { onMount } from "svelte";
   import { Loading, OverpassSelector } from "../common";
-  import { app, example, map } from "../stores";
+  import { RouteTool } from "../common/snapper/route_tool";
+  import { app, example, map, mode, route_tool } from "../stores";
 
   let msg: string | null = null;
   let useLocalVite = false;
@@ -35,6 +36,15 @@
     console.time("load");
     $app = new LTN(new Uint8Array(buffer));
     console.timeEnd("load");
+
+    $mode = {
+      mode: "network",
+    };
+    $route_tool = new RouteTool($map!, $app.toRouteSnapper());
+    $map!.fitBounds(
+      Array.from($app.getBounds()) as [number, number, number, number],
+      { animate: false }
+    );
   }
 
   function gotXml(e: CustomEvent<string>) {