Clear state when switching areas in the web apps

web/src/common/import/ImportControls.svelte

@@ -8,6 +8,7 @@
     boundaryGj as boundaryGjStore,
     map,
     network as networkStore,
+    importCounter,
   } from "../store";
   import { bbox, downloadGeneratedFile } from "../utils";
   import Osm2streetsSettings from "./Osm2streetsSettings.svelte";
@@ -79,6 +80,7 @@
         network,
       };
 
+      $importCounter++;
       networkStore.set(imported.network);
       boundaryGjStore.set(imported.boundaryGj);
     } catch (err: any) {
@@ -117,6 +119,7 @@
 
   function resetToNone(e: CustomEvent<void>) {
     imported = { kind: "nothing" };
+    $importCounter++;
     networkStore.set(null);
     boundaryGjStore.set(null);
   }

web/src/common/store.ts

@@ -6,9 +6,13 @@ import type { FeatureWithProps } from "./utils";
 
 // These are all global singleton values, available anywhere in the code. When
 // they're non-null, then they're loaded and ready to use.
-
 export const map: Writable<Map | null> = writable(null);
 export const network: Writable<JsStreetNetwork | null> = writable(null);
+
+// A way for different components to know when a new area has been imported.
+// Modifying the current network doesn't count.
+export let importCounter: Writable<number> = writable(1);
+
 export const boundaryGj: Writable<Feature<Polygon> | null> = writable(null);
 
 export const hoveredLane: Writable<FeatureWithProps<Polygon> | null> =

web/src/lane-editor/AllEdits.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
-  import { network } from "../common";
+  import { network, importCounter } from "../common";
   import { downloadGeneratedFile } from "../common/utils";
 
   let editedWays: Set<bigint> = new Set();
 
+  // Drop edits when changing areas
+  $: if ($importCounter > 0) {
+    editedWays = new Set();
+  }
+
   export function handleEditedWay(e: CustomEvent<bigint>) {
     editedWays.add(e.detail);
     editedWays = editedWays;
@@ -14,13 +19,8 @@
     contents += `<create/>\n`;
     contents += `<modify>\n`;
     for (let id of editedWays) {
-      try {
-        contents += $network!.wayToXml(id);
-        contents += "\n";
-      } catch (err) {
-        // TODO Not sure why this happens, but just skip this edit
-        console.error(err);
-      }
+      contents += $network!.wayToXml(id);
+      contents += "\n";
     }
     contents += `</modify>\n`;
     contents += `</osmChange>`;
@@ -30,4 +30,6 @@
 </script>
 
 <div>{editedWays.size} ways edited</div>
-<button type="button" on:click={downloadOsc}>Download .osc</button>
+<button type="button" on:click={downloadOsc} disabled={editedWays.size == 0}
+  >Download .osc</button
+>

web/src/street-explorer/stores.ts

@@ -1,5 +1,12 @@
 import type { FeatureCollection } from "geojson";
 import { writable, type Writable } from "svelte/store";
 import { emptyGeojson } from "../common/utils";
+import { network } from "../common";
 
 export const blockGj: Writable<FeatureCollection> = writable(emptyGeojson());
+
+// TODO Need to unsubscribe
+// Unset when the network changes
+network.subscribe((value) => {
+  blockGj.set(emptyGeojson());
+});