Reset map viewport when returning to Choose project and opening a pro…

web/src/App.svelte

@@ -1,7 +1,3 @@
-<script context="module" lang="ts">
-  export type AppFocus = "global" | "cnt";
-</script>
-
 <script lang="ts">
   import onewayArrowUrl from "../assets/arrow.png?url";
   import logo from "../assets/logo.svg?url";
@@ -12,7 +8,7 @@
   import initLtn from "backend";
   import type { LngLatBoundsLike, Map, StyleSpecification } from "maplibre-gl";
   import { init as initRouteSnapper } from "route-snapper-ts";
-  import { onMount, setContext } from "svelte";
+  import { onMount } from "svelte";
   import {
     FillLayer,
     GeoJSON,
@@ -42,6 +38,7 @@
   import SetBoundaryMode from "./SetBoundaryMode.svelte";
   import Settings from "./Settings.svelte";
   import {
+    appFocus as appFocusStore,
     backend,
     currentProjectKey,
     map as mapStore,
@@ -55,6 +52,9 @@
   import TitleMode from "./title/TitleMode.svelte";
   import ViewShortcutsMode from "./ViewShortcutsMode.svelte";
 
+  export let appFocus: "global" | "cnt" = "global";
+  appFocusStore.set(appFocus);
+
   let wasmReady = false;
   onMount(async () => {
     await initLtn();
@@ -96,9 +96,6 @@
     mapDiv.appendChild($mapContents);
   }
 
-  export let appFocus: AppFocus = "global";
-  setContext("appFocus", appFocus);
-
   let initialBounds: LngLatBoundsLike | undefined = undefined;
   if (appFocus == "cnt") {
     initialBounds = [-8.943, 54.631, -0.901, 59.489];

web/src/AutoBoundariesMode.svelte

@@ -34,6 +34,7 @@
     currentProjectKey,
     editPerimeterRoads,
     mode,
+    returnToChooseProject,
   } from "./stores";
   import type { GeneratedBoundaryFeature } from "./wasm";
 
@@ -186,9 +187,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/DebugDemandMode.svelte

@@ -13,7 +13,7 @@
   import BackButton from "./BackButton.svelte";
   import { layerId, Link } from "./common";
   import { demandColorScale } from "./common/colors";
-  import { backend, mode } from "./stores";
+  import { backend, mode, returnToChooseProject } from "./stores";
   import type { ZoneDemandProps } from "./wasm";
 
   let gj = emptyGeojson() as FeatureCollection<MultiPolygon, ZoneDemandProps>;
@@ -81,9 +81,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/DebugIntersectionsMode.svelte

@@ -11,7 +11,7 @@
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import BackButton from "./BackButton.svelte";
   import { layerId, Link, PrevNext } from "./common";
-  import { backend, mode } from "./stores";
+  import { backend, mode, returnToChooseProject } from "./stores";
 
   let currentOsm: string | null = null;
   let movements = emptyGeojson();
@@ -29,9 +29,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/DebugNeighbourhoodMode.svelte

@@ -23,7 +23,7 @@
     RenderNeighbourhood,
   } from "./layers";
   import ModalFilterLayer from "./layers/ModalFilterLayer.svelte";
-  import { backend, mode } from "./stores";
+  import { backend, mode, returnToChooseProject } from "./stores";
 
   let intersection: DebugIntersection | null = null;
   type DebugIntersection = {
@@ -45,9 +45,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/ImpactDetailMode.svelte

@@ -5,7 +5,7 @@
   import { SplitComponent } from "svelte-utils/top_bar_layout";
   import { DotMarker, gjPosition, layerId, Link, PrevNext } from "./common";
   import { ModalFilterLayer } from "./layers";
-  import { backend, mode } from "./stores";
+  import { backend, mode, returnToChooseProject } from "./stores";
 
   export let road: Feature;
 
@@ -28,9 +28,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/ImpactOneDestinationMode.svelte

@@ -21,6 +21,7 @@
     backend,
     mode,
     one_destination,
+    returnToChooseProject,
     route_pt_a,
     route_pt_b,
   } from "./stores";
@@ -65,9 +66,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/PickNeighbourhoodMode.svelte

@@ -31,6 +31,7 @@
     currentProjectKey,
     editPerimeterRoads,
     mode,
+    returnToChooseProject,
   } from "./stores";
   import type { NeighbourhoodBoundaryFeature } from "./wasm";
 
@@ -163,9 +164,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           Pick neighbourhood

web/src/PredictImpactMode.svelte

@@ -6,7 +6,7 @@
   import BackButton from "./BackButton.svelte";
   import { layerId, Link } from "./common";
   import { ModalFilterLayer } from "./layers";
-  import { backend, mode } from "./stores";
+  import { backend, mode, returnToChooseProject } from "./stores";
 
   // Based partly on https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=5
   // The middle color white doesn't matter; the source data will filter out unchanged roads
@@ -27,9 +27,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/RouteMode.svelte

@@ -22,6 +22,7 @@
     backend,
     mainRoadPenalty,
     mode,
+    returnToChooseProject,
     route_pt_a,
     route_pt_b,
   } from "./stores";
@@ -43,9 +44,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/SetBoundaryMode.svelte

@@ -5,7 +5,14 @@
   import { gjPosition, Link } from "./common";
   import AreaControls from "./common/draw_area/AreaControls.svelte";
   import { calculateArea, waypoints } from "./common/draw_area/stores";
-  import { autosave, backend, editPerimeterRoads, map, mode } from "./stores";
+  import {
+    autosave,
+    backend,
+    editPerimeterRoads,
+    map,
+    mode,
+    returnToChooseProject,
+  } from "./stores";
 
   export let name: string;
   export let existing: Feature<Polygon, AreaProps> | null;
@@ -70,9 +77,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/ViewShortcutsMode.svelte

@@ -15,7 +15,7 @@
     OneWayLayer,
     RenderNeighbourhood,
   } from "./layers";
-  import { backend, mode } from "./stores";
+  import { backend, mode, returnToChooseProject } from "./stores";
   import type { AllShortcuts } from "./wasm";
 
   type State =
@@ -55,9 +55,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/edit/NeighbourhoodMode.svelte

@@ -35,6 +35,7 @@
     map,
     mode,
     mutationCounter,
+    returnToChooseProject,
     roadStyle,
   } from "../stores";
   import type {
@@ -249,9 +250,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>
           <Link on:click={() => ($mode = { mode: "pick-neighbourhood" })}>

web/src/stores.ts

@@ -1,5 +1,5 @@
 import type { Feature, Polygon } from "geojson";
-import { LngLat, type Map } from "maplibre-gl";
+import { LngLat, type LngLatBoundsLike, type Map } from "maplibre-gl";
 import { type AreaProps } from "route-snapper-ts";
 import { get, writable, type Writable } from "svelte/store";
 import type { Backend } from "./wasm";
@@ -65,6 +65,8 @@ export let currentProjectKey: Writable<string> = writable("");
 // False until user activates
 export let showAbout: Writable<boolean> = writable(false);
 
+export let appFocus: Writable<"global" | "cnt"> = writable("global");
+
 export let backend: Writable<Backend | 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));
@@ -97,3 +99,13 @@ export let useLocalVite: Writable<boolean> = writable(false);
 export function assetUrl(path: string): string {
   return get(useLocalVite) ? `/${path}` : `https://assets.od2net.org/${path}`;
 }
+
+export function returnToChooseProject() {
+  mode.set({ mode: "title", firstLoad: false });
+
+  let bounds = [-180, -90, 180, 90] as LngLatBoundsLike;
+  if (get(appFocus) == "cnt") {
+    bounds = [-8.943, 54.631, -0.901, 59.489];
+  }
+  get(map)?.fitBounds(bounds, { duration: 500 });
+}

web/src/title/NewProjectMode.svelte

@@ -12,7 +12,7 @@
     backend,
     currentProjectKey,
     map,
-    mode,
+    returnToChooseProject,
   } from "../stores";
   import { Backend } from "../wasm";
   import { afterProjectLoaded, loadFromLocalStorage } from "./loader";
@@ -74,9 +74,7 @@
     <nav aria-label="breadcrumb">
       <ul>
         <li>
-          <Link on:click={() => ($mode = { mode: "title", firstLoad: false })}>
-            Choose project
-          </Link>
+          <Link on:click={returnToChooseProject}>Choose project</Link>
         </li>
         <li>New project</li>
       </ul>

web/src/title/TitleMode.svelte

@@ -1,20 +1,17 @@
 <script lang="ts">
   import { Pencil, Trash2 } from "lucide-svelte";
-  import { getContext } from "svelte";
   import { Loading } from "svelte-utils";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import type { AppFocus } from "../App.svelte";
   import CntChooseArea from "../CntChooseArea.svelte";
   import { Link } from "../common";
   import { routeTool } from "../common/draw_area/stores";
-  import { backend, currentProjectKey, map, mode } from "../stores";
+  import { appFocus, backend, currentProjectKey, map, mode } from "../stores";
   import { loadFromLocalStorage } from "./loader";
 
   export let wasmReady: boolean;
   export let firstLoad: boolean;
 
   let loading = "";
-  let appFocus: AppFocus = getContext("appFocus");
 
   // When other modes reset here, they can't clear state without a race condition
   {
@@ -123,7 +120,7 @@
   </div>
   <div slot="sidebar">
     {#if $map && wasmReady}
-      {#if appFocus == "global"}
+      {#if $appFocus == "global"}
         <div>
           <Link on:click={() => ($mode = { mode: "new-project" })}>
             New project
@@ -166,7 +163,7 @@
           Load a project from a file
           <input bind:this={fileInput} on:change={loadFile} type="file" />
         </label>
-      {:else if appFocus == "cnt"}
+      {:else if $appFocus == "cnt"}
         <CntChooseArea {loadProject} bind:activityIndicatorText={loading} />
       {/if}
     {:else}

web/src/title/loader.ts

@@ -154,7 +154,7 @@ export function afterProjectLoaded() {
       writable(0),
     ),
   );
-  get(map)!.fitBounds(get(backend)!.getBounds(), { animate: false });
+  get(map)!.fitBounds(get(backend)!.getBounds(), { duration: 500 });
   route_pt_a.set(randomPoint());
   route_pt_b.set(randomPoint());
   one_destination.set(randomPoint());