Add vertex-snap mode: Shift+Option+drag snaps to vertices with highlights

app/components/mode_hints.tsx

@@ -4,7 +4,11 @@ import { useBreakpoint } from 'app/hooks/use_responsive';
 import { getIsMac, localizeKeybinding } from 'app/lib/utils';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
-import { hideHintsAtom, selectionAtom } from 'state/jotai';
+import {
+  hideHintsAtom,
+  selectedFeaturesAtom,
+  selectionAtom
+} from 'state/jotai';
 import { Mode, modeAtom } from 'state/mode';
 
 function ModeHint({
@@ -48,17 +52,26 @@ function ModeHint({
 export function ModeHints() {
   const mode = useAtomValue(modeAtom);
   const selection = useAtomValue(selectionAtom);
+  const selectedFeatures = useAtomValue(selectedFeaturesAtom);
   const show = useBreakpoint('lg');
   const isMac = getIsMac();
 
+  const selectedGeometryType = selectedFeatures[0]?.feature.geometry?.type;
+  const selectionHasVertices =
+    selectedGeometryType === 'LineString' ||
+    selectedGeometryType === 'MultiLineString' ||
+    selectedGeometryType === 'Polygon' ||
+    selectedGeometryType === 'MultiPolygon';
+
   if (!show) {
     return null;
   }
 
   const hold = (shift: boolean = false) => (
     <div className="text-xs">
-      Hold {localizeKeybinding('Option', isMac)} to snap to existing features.
-      {shift ? 'Hold Shift to snap to right angles.' : null}
+      Hold {localizeKeybinding('Option', isMac)} to snap to existing features,{' '}
+      {localizeKeybinding('Option', isMac)}+Shift to snap to vertices.
+      {shift ? ' Hold Shift to snap to right angles.' : null}
     </div>
   );
 
@@ -107,8 +120,12 @@ export function ModeHints() {
               <div>
                 Hold space bar & drag to move entire features. Hold option &
                 drag to rotate.
-                <br />
-                {hold()}
+                {selectionHasVertices ? (
+                  <>
+                    <br />
+                    {hold()}
+                  </>
+                ) : null}
               </div>
             </ModeHint>
           );

app/lib/__snapshots__/load_and_augment_style.test.ts.snap

@@ -585,6 +585,24 @@ exports[`loadAndAugmentStyle 1`] = `
       "source": "circle-drawing",
       "type": "circle",
     },
+    {
+      "id": "vertex-snap-circles",
+      "layout": {},
+      "paint": {
+        "circle-color": [
+          "coalesce",
+          [
+            "get",
+            "stroke",
+          ],
+          "#312E81",
+        ],
+        "circle-emissive-strength": 1,
+        "circle-radius": 3,
+      },
+      "source": "vertex-snap",
+      "type": "circle",
+    },
   ],
   "name": "Empty",
   "sources": {
@@ -613,6 +631,13 @@ exports[`loadAndAugmentStyle 1`] = `
       "tolerance": 0,
       "type": "geojson",
     },
+    "vertex-snap": {
+      "data": {
+        "features": [],
+        "type": "FeatureCollection",
+      },
+      "type": "geojson",
+    },
   },
   "sprite": "mapbox://sprites/mapbox/streets-v8",
   "version": 8,
@@ -1159,6 +1184,24 @@ exports[`makeLayers > categorical 2`] = `
     "source": "circle-drawing",
     "type": "circle",
   },
+  {
+    "id": "vertex-snap-circles",
+    "layout": {},
+    "paint": {
+      "circle-color": [
+        "coalesce",
+        [
+          "get",
+          "stroke",
+        ],
+        "#312E81",
+      ],
+      "circle-emissive-strength": 1,
+      "circle-radius": 3,
+    },
+    "source": "vertex-snap",
+    "type": "circle",
+  },
 ]
 `;
 
@@ -1716,6 +1759,24 @@ exports[`makeLayers > none 1`] = `
     "source": "circle-drawing",
     "type": "circle",
   },
+  {
+    "id": "vertex-snap-circles",
+    "layout": {},
+    "paint": {
+      "circle-color": [
+        "coalesce",
+        [
+          "get",
+          "stroke",
+        ],
+        "#312E81",
+      ],
+      "circle-emissive-strength": 1,
+      "circle-radius": 3,
+    },
+    "source": "vertex-snap",
+    "type": "circle",
+  },
 ]
 `;
 
@@ -2234,6 +2295,24 @@ exports[`makeLayers > ramp 1`] = `
     "source": "circle-drawing",
     "type": "circle",
   },
+  {
+    "id": "vertex-snap-circles",
+    "layout": {},
+    "paint": {
+      "circle-color": [
+        "coalesce",
+        [
+          "get",
+          "stroke",
+        ],
+        "#312E81",
+      ],
+      "circle-emissive-strength": 1,
+      "circle-radius": 3,
+    },
+    "source": "vertex-snap",
+    "type": "circle",
+  },
 ]
 `;
 
@@ -2797,6 +2876,24 @@ exports[`makeLayers > with preview property 1`] = `
     "source": "circle-drawing",
     "type": "circle",
   },
+  {
+    "id": "vertex-snap-circles",
+    "layout": {},
+    "paint": {
+      "circle-color": [
+        "coalesce",
+        [
+          "get",
+          "stroke",
+        ],
+        "#312E81",
+      ],
+      "circle-emissive-strength": 1,
+      "circle-radius": 3,
+    },
+    "source": "vertex-snap",
+    "type": "circle",
+  },
   {
     "filter": [
       "all",

app/lib/handlers/line.ts

@@ -1,17 +1,23 @@
 import { lockDirection, useAltHeld, useShiftHeld } from 'app/hooks/use_held';
 import { CURSOR_DEFAULT } from 'app/lib/constants';
-import * as utils from 'app/lib/map_component_utils';
 import { usePopMoment } from 'app/lib/persistence/shared';
 import replaceCoordinates from 'app/lib/replace_coordinates';
 import { captureException } from 'integrations/errors';
 import { useSetAtom } from 'jotai';
 import { useRef } from 'react';
 import { USelection } from 'state';
-import { cursorStyleAtom, Mode, modeAtom, selectionAtom } from 'state/jotai';
+import {
+  cursorStyleAtom,
+  ephemeralStateAtom,
+  Mode,
+  modeAtom,
+  selectionAtom
+} from 'state/jotai';
 import type { HandlerContext, IFeature, LineString, Position } from 'types';
 import {
   createOrUpdateFeature,
   getMapCoord,
+  getNearbyVertices,
   getSnappingCoordinates
 } from './utils';
 
@@ -28,6 +34,7 @@
   const setSelection = useSetAtom(selectionAtom);
   const setMode = useSetAtom(modeAtom);
   const setCursor = useSetAtom(cursorStyleAtom);
+  const setEphemeralState = useSetAtom(ephemeralStateAtom);
   const transact = rep.useTransact();
   const popMoment = usePopMoment();
   const usingTouchEvents = useRef<boolean>(false);
@@ -43,7 +50,21 @@
          * Drawing a new line: create the line and set the new
          * selection
          */
-        const lineString = utils.newLineStringFromClickEvent(e);
+        const verticesOnly = altHeld.current && shiftHeld.current;
+        const pos = altHeld.current
+          ? (getSnappingCoordinates(
+              e,
+              featureMap,
+              pmap,
+              idMap,
+              undefined,
+              verticesOnly
+            ) as Position)
+          : getMapCoord(e);
+        const lineString: LineString = {
+          type: 'LineString',
+          coordinates: [pos, pos]
+        };
 
         const putFeature = createOrUpdateFeature({
           mode,
@@ -100,7 +121,17 @@
      */
     move: (e) => {
       const { modeOptions } = mode;
-      if (selection.type !== 'single') return;
+      if (selection.type !== 'single') {
+        if (altHeld.current) {
+          setEphemeralState({
+            type: 'vertex-snap',
+            vertices: getNearbyVertices(e, featureMap, pmap, idMap)
+          });
+        } else {
+          setEphemeralState({ type: 'none' });
+        }
+        return;
+      }
 
       /**
        * Ignore mousemove events produced by the Apple Pencil.
@@ -116,12 +147,26 @@
 
       let nextCoord = getMapCoord(e) as Position;
       const lastCoord = feature.geometry.coordinates.at(-2);
-      if (shiftHeld.current && lastCoord) {
+      const verticesOnly = altHeld.current && shiftHeld.current;
+      if (shiftHeld.current && !altHeld.current && lastCoord) {
         nextCoord = lockDirection(lastCoord, nextCoord);
       }
 
       if (altHeld.current && lastCoord) {
-        nextCoord = getSnappingCoordinates(e, featureMap, pmap, idMap);
+        nextCoord = getSnappingCoordinates(
+          e,
+          featureMap,
+          pmap,
+          idMap,
+          selection.id,
+          verticesOnly
+        );
+        setEphemeralState({
+          type: 'vertex-snap',
+          vertices: getNearbyVertices(e, featureMap, pmap, idMap, selection.id)
+        });
+      } else {
+        setEphemeralState({ type: 'none' });
       }
 
       void transact({