Add neighbourhoods from the auto-splits

Author: dabreegster

web/src/AutoBoundariesMode.svelte

@@ -5,12 +5,41 @@
     GeoJSON,
     LineLayer,
     hoverStateFilter,
+    type LayerClickInfo,
   } from "svelte-maplibre";
   import { Link, layerId } from "./common";
-  import { notNull } from "svelte-utils";
   import { isLine } from "svelte-utils/map";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { app, mode } from "./stores";
+  import { app, mode, autosave } from "./stores";
+
+  let gj = JSON.parse($app!.renderAutoBoundaries());
+
+  function add(e: CustomEvent<LayerClickInfo>) {
+    let name = window.prompt("What do you want to name the neighbourhood?");
+    if (!name) {
+      return;
+    }
+    try {
+      // TODO Waypoints will be missing; editing will not work
+      let feature = {
+        type: "Feature",
+        properties: {},
+        // Trust generateId to make IDs in order
+        geometry: gj.features[e.detail.features[0].id!].geometry,
+      };
+      $app!.setNeighbourhoodBoundary(name, feature);
+      autosave();
+      $app!.setCurrentNeighbourhood(name);
+      $mode = {
+        mode: "neighbourhood",
+      };
+    } catch (err) {
+      console.log(err);
+      window.alert(
+        "Known georust bug hit, sorry. You may need to just refresh the page now.",
+      );
+    }
+  }
 </script>
 
 <SplitComponent>
@@ -27,24 +56,31 @@
             Pick neighbourhood
           </Link>
         </li>
-        <li>Generated boundaries (experiment)</li>
+        <li>Use an auto-generated boundary</li>
       </ul>
     </nav>
   </div>
 
   <div slot="sidebar">
     <BackButton on:click={() => ($mode = { mode: "network" })} />
+    <p>
+      Click an area to use it as a neighbourhood. These are generated by finding
+      roads, railways, and water thatform severances. There are many bugs; this
+      is experimental.
+    </p>
   </div>
 
   <div slot="map">
-    <GeoJSON data={JSON.parse(notNull($app).renderAutoBoundaries())} generateId>
+    <GeoJSON data={gj} generateId>
       <FillLayer
         {...layerId("auto-boundaries-areas")}
         manageHoverState
         paint={{
           "fill-color": hoverStateFilter("cyan", "red"),
           "fill-opacity": 0.3,
         }}
+        on:click={add}
+        hoverCursor="pointer"
       />
 
       <LineLayer

web/src/NetworkMode.svelte

@@ -86,11 +86,6 @@
             Route
           </Link>
         </li>
-        <li>
-          <Link on:click={() => ($mode = { mode: "auto-boundaries" })}>
-            Auto boundaries
-          </Link>
-        </li>
       </ul>
     </nav>
   </div>
@@ -109,7 +104,13 @@
       </p>
     </details>
 
-    <Link on:click={newBoundary}>Draw a new boundary</Link>
+    <div><Link on:click={newBoundary}>Draw a new boundary</Link></div>
+    <div>
+      <Link on:click={() => ($mode = { mode: "auto-boundaries" })}>
+        Use an auto-generated boundary
+      </Link>
+    </div>
+
     <ul>
       {#each boundaryNames as name}
         <li>