Remember route endpoints. #11

Author: dabreegster

web/src/RouteMode.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
-  import { LngLat } from "maplibre-gl";
   import { onDestroy, onMount } from "svelte";
   import { GeoJSON, LineLayer, Marker } from "svelte-maplibre";
   import { constructMatchExpression, notNull } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
-  import { app, map, mode } from "./stores";
+  import { app, map, mode, route_pt_a, route_pt_b } from "./stores";
 
   export let prevMode: "network" | "neighbourhood";
 
-  let pt_a: LngLat = randomPoint();
-  let pt_b: LngLat = randomPoint();
-
   $: gj = JSON.parse(
-    $app!.compareRoute(pt_a.lng, pt_a.lat, pt_b.lng, pt_b.lat),
+    $app!.compareRoute(
+      $route_pt_a.lng,
+      $route_pt_a.lat,
+      $route_pt_b.lng,
+      $route_pt_b.lat,
+    ),
   );
 
   onMount(() => {
@@ -24,13 +25,6 @@
     $map?.keyboard.enable();
   });
 
-  function randomPoint(): LngLat {
-    let bounds = $app!.getBounds();
-    let lng = bounds[0] + Math.random() * (bounds[2] - bounds[0]);
-    let lat = bounds[1] + Math.random() * (bounds[3] - bounds[1]);
-    return new LngLat(lng, lat);
-  }
-
   function onKeyDown(e: KeyboardEvent) {
     if (e.key == "Escape") {
       e.stopPropagation();
@@ -79,8 +73,12 @@
         }}
       />
     </GeoJSON>
-    <Marker bind:lngLat={pt_a} draggable><span class="dot">A</span></Marker>
-    <Marker bind:lngLat={pt_b} draggable><span class="dot">B</span></Marker>
+    <Marker bind:lngLat={$route_pt_a} draggable
+      ><span class="dot">A</span></Marker
+    >
+    <Marker bind:lngLat={$route_pt_b} draggable
+      ><span class="dot">B</span></Marker
+    >
   </div>
 </SplitComponent>
 

web/src/stores.ts

@@ -1,6 +1,6 @@
 import { LTN } from "backend";
 import type { Feature, Polygon } from "geojson";
-import type { Map } from "maplibre-gl";
+import { LngLat, type Map } from "maplibre-gl";
 import { writable, type Writable } from "svelte/store";
 import { RouteTool } from "./common/snapper/route_tool";
 
@@ -33,17 +33,20 @@ export type Mode =
       mode: "debug-gj";
     };
 
-export let app: Writable<LTN | null> = writable(null);
-// A way for different components to know when internal app state has changed
-// and they might need to rerender
-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 showBasemap: Writable<boolean> = writable(true);
 
 export let example: Writable<string> = writable("");
 export let showAbout: Writable<boolean> = writable(true);
 
 export let sidebarContents: Writable<HTMLDivElement | null> = writable(null);
 export let mapContents: Writable<HTMLDivElement | null> = writable(null);
+
+export let app: Writable<LTN | null> = writable(null);
+export let route_tool: Writable<RouteTool | null> = writable(null);
+export let route_pt_a: Writable<LngLat> = writable(new LngLat(0, 0));
+export let route_pt_b: Writable<LngLat> = writable(new LngLat(0, 0));
+// A way for different components to know when internal app state has changed
+// and they might need to rerender
+export let mutationCounter: Writable<number> = writable(1);
+export let mode: Writable<Mode> = writable({ mode: "title" });

web/src/title/MapLoader.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
+  import { LngLat } from "maplibre-gl";
   import { LTN } from "backend";
   import { onMount } from "svelte";
   import { Loading, OverpassSelector } from "../common";
   import { RouteTool } from "../common/snapper/route_tool";
-  import { app, example, map, mode, route_tool } from "../stores";
+  import {
+    app,
+    example,
+    map,
+    mode,
+    route_tool,
+    route_pt_a,
+    route_pt_b,
+  } from "../stores";
 
   let msg: string | null = null;
   let useLocalVite = false;
@@ -59,6 +68,8 @@
       Array.from($app.getBounds()) as [number, number, number, number],
       { animate: false },
     );
+    $route_pt_a = randomPoint();
+    $route_pt_b = randomPoint();
   }
 
   function gotXml(e: CustomEvent<string>) {
@@ -92,6 +103,13 @@
     }
     msg = null;
   }
+
+  function randomPoint(): LngLat {
+    let bounds = $app!.getBounds();
+    let lng = bounds[0] + Math.random() * (bounds[2] - bounds[0]);
+    let lat = bounds[1] + Math.random() * (bounds[3] - bounds[1]);
+    return new LngLat(lng, lat);
+  }
 </script>
 
 <Loading {msg} />