Split sidebar neighbourhood code

a-b-street · Dec 21, 2023 · ceb02e4 · ceb02e4
1 parent 4ca4650
commit ceb02e4
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 57 deletions.
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -9,6 +9,7 @@
   import RouteSnapperLayer from "./common/RouteSnapperLayer.svelte";
   import MapLoader from "./MapLoader.svelte";
   import NeighbourhoodLayer from "./NeighbourhoodLayer.svelte";
+  import NeighbourhoodMode from "./NeighbourhoodMode.svelte";
   import NetworkLayer from "./NetworkLayer.svelte";
 
   let offlineMode = true;
@@ -302,40 +303,8 @@
       rerender: 0,
     };
   }
-
-  function reset() {
-    mode = {
-      mode: "network",
-    };
-  }
-
-  // TODO Ideally all of this can live in the same component as the map, so we
-  // don't have to plumb stuff around and trigger events back and forth
-  function onKeyDown(e: KeyboardEvent) {
-    if (mode.mode == "neighbourhood") {
-      if (e.key == "a" && !mode.addingFilter) {
-        mode.addingFilter = true;
-      }
-      if (e.key == "z" && e.ctrlKey) {
-        undo();
-      }
-      if (e.key == "y" && e.ctrlKey) {
-        redo();
-      }
-    }
-  }
-  function undo() {
-    app.undo();
-    mode.rerender++;
-  }
-  function redo() {
-    app.redo();
-    mode.rerender++;
-  }
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-
 <Layout>
   <div slot="left">
     {#if map}
@@ -349,31 +318,7 @@
     {:else if mode.mode == "set-boundary"}
       <p>Draw the boundary...</p>
     {:else if mode.mode == "neighbourhood"}
-      <div><button on:click={reset}>Reset</button></div>
-      <div><button on:click={setBoundaryMode}>Edit boundary</button></div>
-      <div>
-        <button
-          on:click={() => (mode.addingFilter = true)}
-          disabled={mode.addingFilter}>Add a modal filter</button
-        >
-      </div>
-
-      <div>
-        <button disabled={mode.undoLength == 0} on:click={undo}>
-          {#if mode.undoLength == 0}
-            Undo
-          {:else}
-            Undo ({mode.undoLength})
-          {/if}
-        </button>
-        <button disabled={mode.redoLength == 0} on:click={redo}>
-          {#if mode.redoLength == 0}
-            Redo
-          {:else}
-            Redo ({mode.redoLength})
-          {/if}
-        </button>
-      </div>
+      <NeighbourhoodMode bind:mode {app} {setBoundaryMode} />
     {/if}
   </div>
   <div slot="main" style="position:relative; width: 100%; height: 100vh;">

diff --git a/web/src/NeighbourhoodMode.svelte b/web/src/NeighbourhoodMode.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  export let mode: Mode;
+  export let app: LTN;
+  export let setBoundaryMode;
+
+  // TODO Ideally all of this can live in the same component as the map, so we
+  // don't have to plumb stuff around and trigger events back and forth
+  function onKeyDown(e: KeyboardEvent) {
+    if (mode.mode == "neighbourhood") {
+      if (e.key == "a" && !mode.addingFilter) {
+        mode.addingFilter = true;
+      }
+      if (e.key == "z" && e.ctrlKey) {
+        undo();
+      }
+      if (e.key == "y" && e.ctrlKey) {
+        redo();
+      }
+    }
+  }
+  function undo() {
+    app.undo();
+    mode.rerender++;
+  }
+  function redo() {
+    app.redo();
+    mode.rerender++;
+  }
+
+  function reset() {
+    mode = {
+      mode: "network",
+    };
+  }
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<div><button on:click={reset}>Reset</button></div>
+<div><button on:click={setBoundaryMode}>Edit boundary</button></div>
+<div>
+  <button
+    on:click={() => (mode.addingFilter = true)}
+    disabled={mode.addingFilter}>Add a modal filter</button
+  >
+</div>
+
+<div>
+  <button disabled={mode.undoLength == 0} on:click={undo}>
+    {#if mode.undoLength == 0}
+      Undo
+    {:else}
+      Undo ({mode.undoLength})
+    {/if}
+  </button>
+  <button disabled={mode.redoLength == 0} on:click={redo}>
+    {#if mode.redoLength == 0}
+      Redo
+    {:else}
+      Redo ({mode.redoLength})
+    {/if}
+  </button>
+</div>