Remember route endpoints

(Introducing some TS errors that can't be ignored, urgh)
a-b-street · May 31, 2024 · 3ae2107 · 3ae2107
1 parent dba0517
commit 3ae2107
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 50 deletions.
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -25,6 +25,8 @@
     maptilerApiKey,
     isLoaded,
     showAbout,
+    routeA,
+    routeB,
   } from "./stores";
   import TitleMode from "./title/TitleMode.svelte";
   import workerWrapper from "./worker?worker";
@@ -65,12 +67,27 @@
   async function gotModel(ready: boolean) {
     if (ready) {
       console.log("New map model loaded");
+
+      let bbox = await $backend!.getBounds();
+      $routeA = {
+        lng: lerp(0.4, bbox[0], bbox[2]),
+        lat: lerp(0.4, bbox[1], bbox[3]),
+      };
+      $routeB = {
+        lng: lerp(0.6, bbox[0], bbox[2]),
+        lat: lerp(0.6, bbox[1], bbox[3]),
+      };
+
       await zoomToFit();
       $mode = { kind: "isochrone" };
     }
   }
   $: gotModel($isLoaded);
 
+  function lerp(pct: number, a: number, b: number): number {
+    return a + pct * (b - a);
+  }
+
   let topDiv: HTMLSpanElement;
   let sidebarDiv: HTMLDivElement;
   let mapDiv: HTMLDivElement;

diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -16,70 +16,50 @@
     type TravelMode,
     startTime,
     useHeuristic,
+    routeA,
+    routeB,
   } from "./stores";
   import { Popup, constructMatchExpression } from "svelte-utils/map";
   import { notNull, PropertiesTable } from "svelte-utils";
-  import { onMount } from "svelte";
   import type { FeatureCollection } from "geojson";
 
-  let start: { lng: number; lat: number } | null = null;
-  let end: { lng: number; lat: number } | null = null;
-  onMount(async () => {
-    // TODO Maybe need to do this when the file changes
-    let bbox = await $backend!.getBounds();
-    start = {
-      lng: lerp(0.4, bbox[0], bbox[2]),
-      lat: lerp(0.4, bbox[1], bbox[3]),
-    };
-    end = {
-      lng: lerp(0.6, bbox[0], bbox[2]),
-      lat: lerp(0.6, bbox[1], bbox[3]),
-    };
-  });
-
   let gj: FeatureCollection | null = null;
   let err = "";
 
   async function updateRoute(
-    _x: { lng: number; lat: number } | null,
-    _y: { lng: number; lat: number } | null,
+    start: { lng: number; lat: number },
+    end: { lng: number; lat: number },
     mode: TravelMode,
     _z: boolean,
     _t: string,
   ) {
-    if (start && end) {
-      try {
-        gj = await $backend!.route({
-          start,
-          end: [end.lng, end.lat],
-          mode,
-          debugSearch: false,
-          useHeuristic: $useHeuristic,
-          startTime: $startTime,
-        });
-        err = "";
-      } catch (error: any) {
-        gj = null;
-        err = error.toString();
-      }
+    try {
+      gj = await $backend!.route({
+        start,
+        end: [end.lng, end.lat],
+        mode,
+        debugSearch: false,
+        useHeuristic: $useHeuristic,
+        startTime: $startTime,
+      });
+      err = "";
+    } catch (error: any) {
+      gj = null;
+      err = error.toString();
     }
   }
-  $: updateRoute(start, end, $travelMode, $useHeuristic, $startTime);
+  $: updateRoute($routeA!, $routeB!, $travelMode, $useHeuristic, $startTime);
 
   function onRightClick(e: CustomEvent<MapMouseEvent>) {
     // Move the first marker, for convenience
-    start = e.detail.lngLat;
-  }
-
-  function lerp(pct: number, a: number, b: number): number {
-    return a + pct * (b - a);
+    $routeA = e.detail.lngLat;
   }
 
   async function debugRoute() {
     try {
       let debugGj = await $backend!.route({
-        start: start!,
-        end: [end!.lng, end!.lat],
+        start: $routeA!,
+        end: [$routeB!.lng, $routeB!.lat],
         mode: $travelMode,
         debugSearch: true,
         useHeuristic: $useHeuristic,
@@ -88,8 +68,8 @@
       $mode = {
         kind: "debug-route",
         debugGj,
-        start: start!,
-        end: end!,
+        start: $routeA!,
+        end: $routeB!,
         routeGj: gj!,
       };
     } catch (error: any) {
@@ -155,12 +135,8 @@
   <div slot="map">
     <MapEvents on:contextmenu={onRightClick} />
 
-    {#if start}
-      <Marker bind:lngLat={start} draggable><span class="dot">A</span></Marker>
-    {/if}
-    {#if end}
-      <Marker bind:lngLat={end} draggable><span class="dot">B</span></Marker>
-    {/if}
+    <Marker bind:lngLat={$routeA} draggable><span class="dot">A</span></Marker>
+    <Marker bind:lngLat={$routeB} draggable><span class="dot">B</span></Marker>
 
     {#if gj}
       <GeoJSON data={gj} generateId>

diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -33,7 +33,12 @@ export function filterForMode(travelMode: TravelMode): ExpressionSpecification {
 
 export let travelMode: Writable<TravelMode> = writable("foot");
 export let startTime: Writable<string> = writable("07:00");
+
 // Only used in RouteMode
+export let routeA: Writable<{ lng: number; lat: number } | null> =
+  writable(null);
+export let routeB: Writable<{ lng: number; lat: number } | null> =
+  writable(null);
 export let useHeuristic = writable(true);
 
 // TODO Does this need to be a store?

diff --git a/web/src/title/TitleMode.svelte b/web/src/title/TitleMode.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
   import { PolygonToolLayer } from "maplibre-draw-polygon";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { map, backend, isLoaded } from "../stores";
+  import { map, backend, isLoaded, routeA, routeB } from "../stores";
   import MapLoader from "./MapLoader.svelte";
   import { onMount } from "svelte";
 
   // When other modes reset here, they can't clear without a race condition
   onMount(async () => {
     $isLoaded = false;
     await $backend!.unset();
+    $routeA = null;
+    $routeB = null;
   });
 </script>