Add vertex snap support when drawing lines and polygons

- Fix line.ts snapping to exclude the feature being drawn (missing excludeFeatureId)
- Add vertex-snap visual feedback (highlight circles) during drawing for both line and polygon modes
- Alt+Shift during drawing now snaps to vertices only (matching edit mode behavior) instead of conflicting with direction locking
- Update mode hints to document Option+Shift vertex snapping and only show snap hint for features with vertices

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Author: chriswhong

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/handlers/line.ts

@@ -7,11 +7,18 @@ 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 +35,7 @@ export function useLineHandlers({
   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);
@@ -116,12 +124,26 @@ export function useLineHandlers({
 
       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({

app/lib/handlers/polygon.ts

@@ -10,11 +10,18 @@ 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, Polygon } from 'types';
 import {
   createOrUpdateFeature,
   getMapCoord,
+  getNearbyVertices,
   getSnappingCoordinates
 } from './utils';
 
@@ -31,6 +38,7 @@ export function usePolygonHandlers({
   const setSelection = useSetAtom(selectionAtom);
   const setMode = useSetAtom(modeAtom);
   const setCursor = useSetAtom(cursorStyleAtom);
+  const setEphemeralState = useSetAtom(ephemeralStateAtom);
   const popMoment = usePopMoment();
   const transact = rep.useTransact();
   /**
@@ -116,7 +124,8 @@ export function usePolygonHandlers({
       }
 
       const lastCoord = feature.geometry.coordinates[0].at(-3);
-      if (shiftHeld.current && lastCoord) {
+      const verticesOnly = altHeld.current && shiftHeld.current;
+      if (shiftHeld.current && !altHeld.current && lastCoord) {
         nextCoord = lockDirection(lastCoord, nextCoord);
       }
 
@@ -126,7 +135,8 @@ export function usePolygonHandlers({
           featureMap,
           pmap,
           idMap,
-          selection.id
+          selection.id,
+          verticesOnly
         ) as Pos2;
       }
 
@@ -167,7 +177,8 @@ export function usePolygonHandlers({
       const feature = wrappedFeature.feature as IFeature<Polygon>;
 
       const lastCoord = feature.geometry.coordinates[0].at(-3);
-      if (shiftHeld.current && lastCoord) {
+      const verticesOnly = altHeld.current && shiftHeld.current;
+      if (shiftHeld.current && !altHeld.current && lastCoord) {
         nextCoord = lockDirection(lastCoord, nextCoord);
       }
 
@@ -177,8 +188,15 @@ export function usePolygonHandlers({
           featureMap,
           pmap,
           idMap,
-          selection.id
+          selection.id,
+          verticesOnly
         ) as Pos2;
+        setEphemeralState({
+          type: 'vertex-snap',
+          vertices: getNearbyVertices(e, featureMap, pmap, idMap, selection.id)
+        });
+      } else {
+        setEphemeralState({ type: 'none' });
       }
 
       const newRing = feature.geometry.coordinates[0].slice();