Remove AttributeMode, and rename stuff

Incomplete, do not merge!

src/lib/draw/GeometryMode.svelte → src/lib/draw/EditMode.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-  import { onDestroy } from "svelte";
   import type { LineString, Polygon } from "geojson";
   import { MapMouseEvent } from "maplibre-gl";
+  import { onDestroy } from "svelte";
   import { bbox } from "../../maplibre_helpers";
-  import { currentMode, gjScheme, map, mapHover, formOpen, openFromSidebar } from "../../stores";
-  import type { Mode, Feature, FeatureUnion } from "../../types";
+  import {
+    currentMode,
+    formOpen,
+    gjScheme,
+    map,
+    mapHover,
+    openFromSidebar,
+  } from "../../stores";
+  import type { Feature, FeatureUnion, Mode } from "../../types";
   import type { EventHandler } from "./event_handler";
   import type { PointTool } from "./point/point_tool";
   import PointControls from "./point/PointControls.svelte";
@@ -14,7 +21,7 @@
   import RouteControls from "./route/RouteControls.svelte";
   import SnapPolygonControls from "./snap_polygon/SnapPolygonControls.svelte";
 
-  const thisMode = "edit-geometry";
+  const thisMode = "edit";
 
   export let pointTool: PointTool;
   export let polygonTool: PolygonTool;

src/lib/draw/HoverLayer.svelte

@@ -53,9 +53,9 @@
     radius: 1.5 * circleRadius,
   });
 
-  // When a form is open, ignore regular map and sidebar interactions
+  // When a form is open, don't show anything
   $: {
-    let id = $formOpen || $mapHover || $sidebarHover;
+    let id = $formOpen ? null : $mapHover || $sidebarHover;
     if (id != null) {
       ($map.getSource(source) as GeoJSONSource).setData(
         $gjScheme.features.find((f) => f.id == id)!

src/lib/draw/StreetViewMode.svelte

@@ -66,7 +66,7 @@
 
   eventHandler.documentHandlers.keydown = (e: KeyboardEvent) => {
     if (e.key == "Escape") {
-      changeMode("edit-attribute");
+      changeMode("edit");
       e.preventDefault();
     }
   };

src/lib/draw/Toolbox.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { onDestroy } from "svelte";
   import { get } from "svelte/store";
-  import editAttributesIcon from "../../../assets/edit_attributes.svg";
-  import editGeometryIcon from "../../../assets/edit_geometry.svg";
+  import editIcon from "../../../assets/edit.svg";
   import pointIcon from "../../../assets/point.svg";
   import polygonFreehandIcon from "../../../assets/polygon_freehand.svg";
   import polygonSnappedIcon from "../../../assets/polygon_snapped.svg";
@@ -11,9 +10,8 @@
   import streetViewIcon from "../../../assets/street_view.svg";
   import { currentMode, map } from "../../stores";
   import type { Mode, Schema } from "../../types";
-  import AttributeMode from "./AttributeMode.svelte";
+  import EditMode from "./EditMode.svelte";
   import { DocumentEvents, EventHandler, MapEvents } from "./event_handler";
-  import GeometryMode from "./GeometryMode.svelte";
   import { PointTool } from "./point/point_tool";
   import PointMode from "./point/PointMode.svelte";
   import { PolygonTool } from "./polygon/polygon_tool";
@@ -27,16 +25,15 @@
 
   export let routeSnapperUrl: string;
   export let schema: Schema;
-  // Plumbed up from RouteMode, so we can pass it down to GeometryMode
+  // Plumbed up from RouteMode, so we can pass it down to EditMode
   // TODO Create this here too?
   let routeTool: RouteTool;
 
   // Create and manage these here, then pass down to modes as needed.
   let pointTool = new PointTool($map);
   let polygonTool = new PolygonTool($map);
 
-  let attributeMode: AttributeMode;
-  let geometryMode: GeometryMode;
+  let editMode: EditMode;
   let routeMode: RouteMode;
   let pointMode: PointMode;
   let polygonMode: PolygonMode;
@@ -45,8 +42,7 @@
   let streetViewMode: StreetViewMode;
 
   const eventHandlers: { [mode in Mode]: EventHandler } = {
-    "edit-attribute": new EventHandler(),
-    "edit-geometry": new EventHandler(),
+    edit: new EventHandler(),
     route: new EventHandler(),
     point: new EventHandler(),
     "free-polygon": new EventHandler(),
@@ -70,8 +66,7 @@
   // This must be used; don't manually change mode
   function changeMode(newMode: Mode) {
     let modes = {
-      "edit-attribute": attributeMode,
-      "edit-geometry": geometryMode,
+      edit: editMode,
       route: routeMode,
       point: pointMode,
       "free-polygon": polygonMode,
@@ -114,32 +109,19 @@
 <div class="toolbox">
   <div>
     <SelectToolButton
-      thisMode="edit-attribute"
-      label="Edit attributes"
-      icon={editAttributesIcon}
-      {changeMode}
-    />
-    <AttributeMode
-      bind:this={attributeMode}
-      {changeMode}
-      eventHandler={eventHandlers["edit-attribute"]}
-    />
-  </div>
-  <div>
-    <SelectToolButton
-      thisMode="edit-geometry"
-      label="Edit geometry"
-      icon={editGeometryIcon}
+      thisMode="edit"
+      label="Edit"
+      icon={editIcon}
       {changeMode}
     />
     {#if routeTool}
-      <GeometryMode
-        bind:this={geometryMode}
+      <EditMode
+        bind:this={editMode}
         {pointTool}
         {polygonTool}
         {routeTool}
-        eventHandler={eventHandlers["edit-geometry"]}
-{changeMode}
+        eventHandler={eventHandlers["edit"]}
+        {changeMode}
       />
     {/if}
   </div>

src/lib/draw/point/PointMode.svelte

@@ -34,14 +34,14 @@
         return gj;
       });
 
-      changeMode("edit-attribute");
+      changeMode("edit");
       formOpen.set(feature.id as number);
     }
   });
 
   pointTool.addEventListenerFailure(() => {
     if ($currentMode == thisMode) {
-      changeMode("edit-attribute");
+      changeMode("edit");
     }
   });
 </script>

src/lib/draw/polygon/PolygonMode.svelte

@@ -34,14 +34,14 @@
         return gj;
       });
 
-      changeMode("edit-attribute");
+      changeMode("edit");
       formOpen.set(feature.id as number);
     }
   });
 
   polygonTool.addEventListenerFailure(() => {
     if ($currentMode == thisMode) {
-      changeMode("edit-attribute");
+      changeMode("edit");
     }
   });
 </script>

src/lib/draw/route/RouteMode.svelte

@@ -24,11 +24,11 @@
   export let routeTool: RouteTool;
   export let eventHandler: EventHandler;
 
-  // These're for drawing a new route, NOT for editing an existing.
-  // GeometryMode manages the latter.
+  // These're for drawing a new route, NOT for editing an existing. EditMode
+  // manages the latter.
   export function start() {
-    // When we enter this mode by clicking the button from edit-geometry, we
-    // call routeTool.stop(). Re-activate it if so.
+    // When we enter this mode by clicking the button from EditMode, we call
+    // routeTool.stop(). Re-activate it if so.
     if (!routeTool.isActive()) {
       routeTool.setHandlers(eventHandler);
       routeTool.startRoute();
@@ -53,7 +53,7 @@
 
     routeTool.addEventListenerFailure(() => {
       if ($currentMode == thisMode) {
-        changeMode("edit-attribute");
+        changeMode("edit");
       }
     });
 
@@ -66,7 +66,7 @@
           return gj;
         });
 
-        changeMode("edit-attribute");
+        changeMode("edit");
         formOpen.set(feature.id as number);
       }
     });

src/lib/draw/route/SplitRouteMode.svelte

@@ -96,7 +96,7 @@
   eventHandler.mapHandlers.click = () => {
     if (snappedIndex == null) {
       // We clicked the map, stop the tool
-      changeMode("edit-attribute");
+      changeMode("edit");
     } else {
       // TODO Can we avoid using ! everywhere here?
       let result = lineSplit(
@@ -146,7 +146,7 @@
   // The escape key isn't registered at all for keypress, so use keydown
   eventHandler.documentHandlers.keydown = (e: KeyboardEvent) => {
     if (e.key == "Escape") {
-      changeMode("edit-attribute");
+      changeMode("edit");
       e.preventDefault();
     }
   };

src/lib/draw/snap_polygon/SnapPolygonMode.svelte

@@ -35,14 +35,14 @@
         return gj;
       });
 
-      changeMode("edit-attribute");
+      changeMode("edit");
       formOpen.set(feature.id as number);
     }
   });
 
   routeTool.addEventListenerFailure(() => {
     if ($currentMode == thisMode) {
-      changeMode("edit-attribute");
+      changeMode("edit");
     }
   });
 </script>

src/lib/sidebar/EntireScheme.svelte

@@ -198,8 +198,7 @@
   />
   {#if $isAToolInUse}
     <p class="reminder">
-      Finish drawing on the map and/or select "Edit attributes" to use these
-      options.
+      Finish drawing on the map and/or select "Edit" to use these options.
     </p>
   {/if}
 </div>

src/lib/sidebar/Instructions.svelte

@@ -5,19 +5,14 @@
 </script>
 
 <Modal title="Instructions" bind:open>
-  <h2>Drawing objects on the map</h2>
+  <h2>Drawing objects on the map and filling out data</h2>
   <p>
     Use the tools on right to sketch new objects on the map. Each tool has
     instructions that appear when you click on its icon.
   </p>
   <p>
-    Modify existing objects on the map using <b>Edit geometry</b> and clicking something.
-  </p>
-
-  <h2>Filling out data</h2>
-  <p>
-    <b>Edit attributes</b> mode allows selecting and adding attributes to objects
-    that appear on the left.
+    Modify existing objects using <b>Edit</b> and clicking something on the map or
+    in the list.
   </p>
 
   <h2>Saving files</h2>

src/stores.ts

@@ -37,7 +37,7 @@ export const userSettings: Writable<UserSettings> = writable(
 userSettings.subscribe((value) =>
   window.localStorage.setItem("userSettings", JSON.stringify(value))
 );
-export const currentMode: Writable<Mode> = writable("edit-attribute");
+export const currentMode: Writable<Mode> = writable("edit");
 // This is used to represent whether a tool is in use for the purpose of disabling buttons such as clear all
 export const isAToolInUse: Writable<boolean> = writable(false);
 

src/types.ts

@@ -72,8 +72,7 @@ export function isStreetViewImagery(x: string): x is "google" | "bing" {
 }
 
 export type Mode =
-  | "edit-attribute"
-  | "edit-geometry"
+  | "edit"
   | "route"
   | "point"
   | "free-polygon"