Use route mode from network mode. #11

Author: dabreegster

web/src/App.svelte

@@ -122,7 +122,7 @@
         {:else if $mode.mode == "view-shortcuts"}
           <ViewShortcutsMode />
         {:else if $mode.mode == "route"}
-          <RouteMode />
+          <RouteMode prevMode={$mode.prevMode} />
         {:else if $mode.mode == "debug"}
           <DebugMode />
         {:else if $mode.mode == "debug-gj"}

web/src/NetworkMode.svelte

@@ -62,6 +62,11 @@
         <button on:click={() => deleteNeighbourhood(name)}>X</button>
       </div>
     {/each}
+    <div>
+      <button on:click={() => ($mode = { mode: "route", prevMode: "network" })}
+        >Route</button
+      >
+    </div>
     <div>
       <button on:click={() => ($mode = { mode: "debug-gj" })}
         >Debug route snapper</button

web/src/RouteMode.svelte

@@ -8,6 +8,8 @@
   import SplitComponent from "./SplitComponent.svelte";
   import { app, map, mode } from "./stores";
 
+  export let prevMode: "network" | "neighbourhood";
+
   let pt_a: LngLat = randomPoint();
   let pt_b: LngLat = randomPoint();
 
@@ -37,15 +39,15 @@
   }
 
   function back() {
-    $mode = { mode: "neighbourhood" };
+    $mode = { mode: prevMode };
   }
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
 <SplitComponent>
   <div slot="sidebar">
-    <div><button on:click={back}>Back to editing</button></div>
+    <div><button on:click={back}>Back</button></div>
 
     <p>Drag markers for a route</p>
     <p>
@@ -55,10 +57,12 @@
   </div>
 
   <div slot="map">
-    <RenderNeighbourhood
-      gjInput={JSON.parse(notNull($app).renderNeighbourhood())}
-      interactive={false}
-    />
+    {#if prevMode == "neighbourhood"}
+      <RenderNeighbourhood
+        gjInput={JSON.parse(notNull($app).renderNeighbourhood())}
+        interactive={false}
+      />
+    {/if}
     <ModalFilterLayer />
     <GeoJSON data={gj}>
       <LineLayer

web/src/edit/NeighbourhoodMode.svelte

@@ -192,7 +192,10 @@
       >
     </div>
     <div>
-      <button on:click={() => ($mode = { mode: "route" })}>Route</button>
+      <button
+        on:click={() => ($mode = { mode: "route", prevMode: "neighbourhood" })}
+        >Route</button
+      >
     </div>
     <div>
       <button on:click={() => ($mode = { mode: "debug" })}>Debug</button>

web/src/stores.ts

@@ -24,6 +24,7 @@ export type Mode =
     }
   | {
       mode: "route";
+      prevMode: "network" | "neighbourhood";
     }
   | {
       mode: "debug";