Start the skeleton route mode, but actually, just do some refactoring

first
a-b-street · Jan 5, 2024 · ae32dac · ae32dac
1 parent 48a0f4b
commit ae32dac
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 50 deletions.
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -7,12 +7,19 @@
   import MapLoader from "./MapLoader.svelte";
   import NeighbourhoodMode from "./NeighbourhoodMode.svelte";
   import NetworkMode from "./NetworkMode.svelte";
+  import RouteMode from "./RouteMode.svelte";
   import SetBoundaryMode from "./SetBoundaryMode.svelte";
-  import { app, mapContents, mode, sidebarContents } from "./stores";
+  import {
+    app,
+    mapContents,
+    map as mapStore,
+    mode,
+    showBasemap,
+    sidebarContents,
+  } from "./stores";
   import ViewShortcutsMode from "./ViewShortcutsMode.svelte";
 
-  let showBasemap = false;
-  $: mapStyle = showBasemap
+  $: mapStyle = $showBasemap
     ? "https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
     : {
         version: 8 as const,
@@ -22,10 +29,13 @@
 
   let route_tool: RouteTool | undefined = undefined;
   let map: Map;
+  $: if (map) {
+    mapStore.set(map);
+  }
 
   function zoomToFit() {
     // TODO wasteful
-    map.fitBounds(bbox(JSON.parse($app!.render())), { animate: false });
+    $mapStore!.fitBounds(bbox(JSON.parse($app!.render())), { animate: false });
   }
 
   function gotApp(_x: LTN | null) {
@@ -37,7 +47,7 @@
     $mode = {
       mode: "network",
     };
-    route_tool = new RouteTool(map, $app.toRouteSnapper());
+    route_tool = new RouteTool($mapStore!, $app.toRouteSnapper());
   }
   $: gotApp($app);
 
@@ -55,15 +65,15 @@
 
 <Layout>
   <div slot="left">
-    {#if map}
-      <MapLoader {map} />
+    {#if $mapStore}
+      <MapLoader />
       {#if $app}
         <div><button on:click={zoomToFit}>Zoom to fit</button></div>
       {/if}
     {/if}
     <div>
       <label
-        ><input type="checkbox" bind:checked={showBasemap} />Show basemap</label
+        ><input type="checkbox" bind:checked={$showBasemap} />Show basemap</label
       >
     </div>
     <hr />
@@ -85,9 +95,11 @@
         {:else if $mode.mode == "set-boundary"}
           <SetBoundaryMode {route_tool} existing={$mode.existing} />
         {:else if $mode.mode == "neighbourhood"}
-          <NeighbourhoodMode {map} {showBasemap} />
+          <NeighbourhoodMode />
         {:else if $mode.mode == "view-shortcuts"}
-          <ViewShortcutsMode prevMode={$mode.prevMode} {map} {showBasemap} />
+          <ViewShortcutsMode />
+        {:else if $mode.mode == "route"}
+          <RouteMode />
         {/if}
       {/if}
     </MapLibre>

diff --git a/web/src/MapLoader.svelte b/web/src/MapLoader.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
   import init, { LTN } from "backend";
-  import type { Map } from "maplibre-gl";
   import init2 from "route-snapper";
   import { onMount } from "svelte";
   import { Loading, OverpassSelector } from "./common";
   import ManageSavefiles from "./ManageSavefiles.svelte";
-  import { app } from "./stores";
-
-  export let map: Map;
+  import { app, map } from "./stores";
 
   let example = "";
   let msg: string | null = null;
@@ -113,7 +110,7 @@
   </div>
 
   <OverpassSelector
-    {map}
+    map={$map}
     on:gotXml={gotXml}
     on:loading={(e) => (msg = e.detail)}
     on:error={(e) => window.alert(e.detail)}

diff --git a/web/src/NeighbourhoodMode.svelte b/web/src/NeighbourhoodMode.svelte
@@ -5,20 +5,17 @@
     LineString,
     Polygon,
   } from "geojson";
-  import type { Map, MapMouseEvent } from "maplibre-gl";
+  import type { MapMouseEvent } from "maplibre-gl";
   import { onDestroy } from "svelte";
   import { Popup } from "svelte-maplibre";
   import { PropertiesTable } from "./common";
   import FreehandLine from "./FreehandLine.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
-  import { app, mode } from "./stores";
+  import { app, map, mode } from "./stores";
 
   // Caller is responsible for doing app.setNeighbourhood
 
-  export let map: Map;
-  export let showBasemap: boolean;
-
   let addingFilter = false;
   let addingMultipleFilters = false;
   let undoLength = 0;
@@ -41,9 +38,9 @@
   }
 
   $: if (addingFilter) {
-    map.on("click", onClick);
+    $map!.on("click", onClick);
     // TODO Still doesn't last long
-    map.getCanvas().style.cursor = "crosshair";
+    $map!.getCanvas().style.cursor = "crosshair";
   }
   onDestroy(() => {
     stopAddingFilter();
@@ -56,8 +53,8 @@
   }
   function stopAddingFilter() {
     addingFilter = false;
-    map.off("click", onClick);
-    map.getCanvas().style.cursor = "inherit";
+    $map!.off("click", onClick);
+    $map!.getCanvas().style.cursor = "inherit";
   }
 
   function deleteFilter(f: Feature) {
@@ -84,7 +81,7 @@
     render($app!.redo());
   }
 
-  function reset() {
+  function pickNewNeighbourhood() {
     $mode = {
       mode: "network",
     };
@@ -104,7 +101,9 @@
 
 <SplitComponent>
   <div slot="sidebar">
-    <div><button on:click={reset}>Reset</button></div>
+    <div>
+      <button on:click={pickNewNeighbourhood}>Pick new neighbourghood</button>
+    </div>
     <div>
       <button
         on:click={() => ($mode = { mode: "set-boundary", existing: boundary })}
@@ -124,11 +123,13 @@
       >
     </div>
     <div>
-      <button
-        on:click={() => ($mode = { mode: "view-shortcuts", prevMode: $mode })}
+      <button on:click={() => ($mode = { mode: "view-shortcuts" })}
         >View shortcuts</button
       >
     </div>
+    <div>
+      <button on:click={() => ($mode = { mode: "route" })}>Route</button>
+    </div>
 
     <div>
       <button disabled={undoLength == 0} on:click={undo}>
@@ -151,8 +152,7 @@
   <div slot="map">
     <RenderNeighbourhood
       {gjInput}
-      {showBasemap}
-      interactive={!addingFilter}
+      interactive={!addingFilter && !addingMultipleFilters}
       onClickLine={(f) => window.open(f.properties.way, "_blank")}
       onClickCircle={deleteFilter}
     >
@@ -168,7 +168,7 @@
       </div>
     </RenderNeighbourhood>
     {#if addingMultipleFilters}
-      <FreehandLine {map} on:done={gotFreehandLine} />
+      <FreehandLine map={$map} on:done={gotFreehandLine} />
     {/if}
   </div>
 </SplitComponent>
diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
@@ -13,17 +13,17 @@
     isPoint,
     isPolygon,
   } from "./common";
+  import { showBasemap } from "./stores";
 
   export let gjInput: FeatureCollection;
-  export let showBasemap: boolean;
   // When disabled, can't click lines or circles, no slots, no hoverCursor
   export let interactive = true;
   export let onClickLine = (f: Feature) => {};
   export let onClickCircle = (f: Feature) => {};
 
   let gj: FeatureCollection;
   let maxShortcuts: number;
-  $: render(gjInput, showBasemap);
+  $: render(gjInput, $showBasemap);
 
   function render(x: FeatureCollection, y: boolean) {
     // A qualitative palette from colorbrewer2.org, skipping the red hue (used
@@ -61,7 +61,7 @@
 
 <GeoJSON data={gj} generateId>
   <FillLayer
-    beforeId={showBasemap ? "Building" : undefined}
+    beforeId={$showBasemap ? "Building" : undefined}
     filter={isPolygon}
     manageHoverState
     paint={{

diff --git a/web/src/RouteMode.svelte b/web/src/RouteMode.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { FeatureCollection } from "geojson";
+  import { onDestroy, onMount } from "svelte";
+  import { GeoJSON, LineLayer } from "svelte-maplibre";
+  import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
+  import SplitComponent from "./SplitComponent.svelte";
+  import { app, map, mode } from "./stores";
+
+  onMount(() => {
+    $map?.keyboard.disable();
+  });
+  onDestroy(() => {
+    $map?.keyboard.enable();
+  });
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key == "Escape") {
+      e.stopPropagation();
+      back();
+    }
+  }
+
+  function back() {
+    $mode = { mode: "neighbourhood" };
+  }
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<SplitComponent>
+  <div slot="sidebar">
+    <div><button on:click={back}>Back to editing</button></div>
+
+    <p>Drag markers for a route</p>
+  </div>
+
+  <div slot="map">
+    <RenderNeighbourhood
+      gjInput={JSON.parse($app.renderNeighbourhood())}
+      interactive={false}
+    />
+  </div>
+</SplitComponent>
diff --git a/web/src/SetBoundaryMode.svelte b/web/src/SetBoundaryMode.svelte
@@ -15,11 +15,19 @@
   }
 
   route_tool.addEventListenerSuccess((feature) => {
-    $app!.setNeighbourhood(feature);
-    $mode = {
-      mode: "neighbourhood",
-    };
-    route_tool.clearEventListeners();
+    try {
+      $app!.setNeighbourhood(feature);
+      $mode = {
+        mode: "neighbourhood",
+      };
+      route_tool.clearEventListeners();
+    } catch (err) {
+      window.alert("Known georust bug hit, sorry");
+      $mode = {
+        mode: "network",
+      };
+      route_tool.clearEventListeners();
+    }
   });
   route_tool.addEventListenerFailure(() => {
     $mode = {

diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
   import type { FeatureCollection } from "geojson";
-  import type { Map } from "maplibre-gl";
   import { onDestroy, onMount } from "svelte";
   import { GeoJSON, LineLayer, Popup } from "svelte-maplibre";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
-  import { app, mode, type Mode } from "./stores";
-
-  export let prevMode: Mode;
-  export let map: Map;
-  export let showBasemap: boolean;
+  import { app, map, mode } from "./stores";
 
   type State =
     | {
@@ -39,10 +34,10 @@
   }
 
   onMount(() => {
-    map.keyboard.disable();
+    $map?.keyboard.disable();
   });
   onDestroy(() => {
-    map.keyboard.enable();
+    $map?.keyboard.enable();
   });
 
   function onKeyDown(e: KeyboardEvent) {
@@ -67,7 +62,7 @@
   }
 
   function back() {
-    $mode = prevMode;
+    $mode = { mode: "neighbourhood" };
   }
 </script>
 
@@ -102,7 +97,6 @@
     {#if state.state == "neutral"}
       <RenderNeighbourhood
         gjInput={JSON.parse($app.renderNeighbourhood())}
-        {showBasemap}
         onClickLine={(f) => choseRoad(f.properties.id)}
       >
         <div slot="line-popup">

diff --git a/web/src/stores.ts b/web/src/stores.ts
@@ -1,5 +1,6 @@
 import { LTN } from "backend";
 import type { Feature, Polygon } from "geojson";
+import type { Map } from "maplibre-gl";
 import { writable, type Writable } from "svelte/store";
 
 export type Mode =
@@ -15,11 +16,15 @@ export type Mode =
     }
   | {
       mode: "view-shortcuts";
-      prevMode: Mode;
+    }
+  | {
+      mode: "route";
     };
 
 export let app: Writable<LTN | null> = writable(null);
 export let mode: Writable<Mode> = writable({ mode: "network" });
+export let showBasemap: Writable<boolean> = writable(false);
+export let map: Writable<Map | null> = writable(null);
 
 export let sidebarContents: Writable<HTMLDivElement | null> = writable(null);
 export let mapContents: Writable<HTMLDivElement | null> = writable(null);