@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/keyboardHandlers.test.js

@@ -0,0 +1,83 @@
+import { createHarness } from './__helpers__/harness.js'
+
+describe('keyboardHandlers', () => {
+  const keydown = (ctx, state, key, extra = {}) => ctx.onKeydown(state, { key, preventDefault: jest.fn(), stopPropagation: jest.fn(), ...extra })
+  const keyup = (ctx, state, key) => ctx.onKeyup(state, { key, stopPropagation: jest.fn() })
+
+  // isInteractiveElementFocused's own branches are covered by utils/keyboardShortcuts.test.js
+  // — this just checks onKeydown/onKeyup actually consult it.
+  test('shortcuts are ignored while a form control outside the viewport has focus', () => {
+    const { ctx, state } = createHarness()
+    const input = document.createElement('input')
+    document.body.appendChild(input)
+    input.focus()
+    keydown(ctx, state, 'ArrowRight')
+    keyup(ctx, state, 'ArrowRight')
+    expect(state.interfaceType).not.toBe('keyboard')
+  })
+
+  test('space prevents the page scrolling — there is nothing to select, the point already is', () => {
+    const { ctx, state } = createHarness()
+    const e = { key: ' ', preventDefault: jest.fn(), stopPropagation: jest.fn() }
+    ctx.onKeydown(state, e)
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(state.interfaceType).toBe('keyboard')
+  })
+
+  // resolveSnapTarget's own snap/break-out-of-snap branches are covered by
+  // utils/snapMovement.test.js — this just checks onKeydown wires an arrow key through to it,
+  // records the starting position for undo on the first move, and leaves it fixed for the
+  // rest of a held-key sequence.
+  test('an arrow key moves the point and starts a keyboard-move undo sequence', () => {
+    const { ctx, state } = createHarness()
+    keydown(ctx, state, 'ArrowRight')
+    expect(state._keyboardMoveStartPosition).toEqual([5, 5])
+    expect(state.feature.coordinates).not.toEqual([5, 5])
+
+    keydown(ctx, state, 'ArrowRight') // still held → start position isn't reset
+    expect(state._keyboardMoveStartPosition).toEqual([5, 5])
+  })
+
+  test('arrow key guards a missing feature', () => {
+    const { ctx, state, map } = createHarness()
+    keydown(ctx, { ...state, featureId: 'missing' }, 'ArrowRight')
+    expect(map._undoStack).toHaveLength(0)
+  })
+
+  // isUndoShortcut/handleUndoShortcut's own edge cases (shift, wrong key, text-field focus)
+  // are covered by utils/keyboardShortcuts.test.js — this just checks onKeydown wires
+  // Cmd/Ctrl+Z through to handleUndo, and that Alt+arrow and Escape are left unbound here.
+  test('Cmd/Ctrl+Z undoes; Alt+arrow and Escape are left unbound', () => {
+    const { ctx, state } = createHarness()
+    const moveSpy = jest.spyOn(ctx, 'movePointByKey').mockImplementation(() => {})
+    keydown(ctx, state, 'ArrowRight', { altKey: true })
+    expect(moveSpy).toHaveBeenCalled() // Alt is not special-cased — nothing to navigate to
+
+    keydown(ctx, state, 'Escape')
+    expect(state.interfaceType).toBe('keyboard') // Escape does nothing but set the interface type
+
+    const undoSpy = jest.spyOn(ctx, 'handleUndo').mockImplementation(() => {})
+    keydown(ctx, state, 'z', { metaKey: true })
+    expect(undoSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('onKeyup pushes a move undo after a held-arrow sequence, no-ops otherwise, and allows viewport focus', () => {
+    const { ctx, state, map } = createHarness()
+    state._keyboardMoveStartPosition = [10, 0]
+    keyup(ctx, state, 'ArrowRight')
+    expect(map._undoStack.pop()).toMatchObject({ type: 'move_point', vertexIndex: 0, previousPosition: [10, 0] })
+
+    keyup(ctx, state, 'ArrowRight') // no active sequence → no undo
+    expect(map._undoStack).toHaveLength(0)
+
+    const child = document.createElement('button') // focus inside the viewport is non-blocking
+    state.container.appendChild(child)
+    child.focus()
+    keyup(ctx, state, 'ArrowRight')
+    expect(state.interfaceType).toBe('keyboard')
+
+    // A non-arrow key just tracks the interface type, nothing else
+    keyup(ctx, state, 'z')
+    expect(map._undoStack).toHaveLength(0)
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/pointOperations.js

@@ -0,0 +1,55 @@
+import { sharedSnapMovement } from '../../utils/snapMovement.js'
+
+// A Point has a single coordinate, always selected — no ring/segment/index bookkeeping the
+// way editVertexMode's vertexOperations.js needs. getOffset/getOffsetByDelta/resolveSnapTarget
+// come from the shared mixin (utils/snapMovement.js) — they're already pure single-coordinate
+// math with no ring dependency; movePoint/nudgePointByDelta replace moveVertex/
+// nudgeVertexByDelta with the direct Point.prototype.updateCoordinate('', lng, lat) mutation
+// mapbox-gl-draw's own Point feature model already provides, instead of the toGeoJSON-mutate-
+// api.add() ring round-trip.
+export const pointOperations = {
+  ...sharedSnapMovement,
+
+  // The feature's own current coordinate — mapbox-gl-draw's Point model stores it flat as
+  // `.coordinates`, no getCoords()/index lookup needed the way a ring feature requires.
+  getPointCoord (state) {
+    return this.getFeature(state.featureId)?.coordinates
+  },
+
+  getNewCoord (state, e) {
+    return this.getOffset(this.getPointCoord(state), e)
+  },
+
+  // Point.prototype.updateCoordinate ignores its first (path) argument when called with
+  // three arguments — mapbox-gl-draw's own Point model has nothing path-shaped to address —
+  // and mutates + calls changed() in place, so unlike moveVertex there's no
+  // toGeoJSON-mutate-api.add() round-trip needed for the data itself. But that round-trip's
+  // api.add() call is also mapbox-gl-draw's own render trigger — updateCoordinate's changed()
+  // only marks the feature dirty and fires an internal event, it never repaints (see
+  // store.js's featureChanged/render). Mouse drag/click get a repaint for free regardless,
+  // since mapbox-gl-draw's own dispatch (lib/mode_handler.js) auto-renders after every
+  // onDrag/onClick/onMouseUp it calls — but keyboard, touch and the D-pad all move a point
+  // through our own custom addEventListener-bound handlers, entirely outside that dispatch,
+  // so without this explicit call the coordinate was updating with nothing on screen ever
+  // reflecting it.
+  movePoint (state, coord) {
+    state.feature.updateCoordinate('', coord.lng, coord.lat)
+    this._ctx.store.render()
+    this.map.fire('draw.geometrychange', state.feature)
+  },
+
+  // Moves the point by an explicit (dx, dy) unit direction — the entry point for
+  // MoveControls' D-pad (see mapProvider.activeMoveTarget in events.js). Each call is one
+  // complete, undoable action (no held-key sequencing — a button click has no "held" state
+  // the way arrow keys do), honouring snap via the shared resolveSnapTarget above.
+  nudgePointByDelta (state, dx, dy, isLargeStep) {
+    const currentCoord = this.getPointCoord(state)
+    if (!currentCoord) {
+      return
+    }
+    const previousPosition = [...currentCoord]
+    const target = this.resolveSnapTarget(state, dx, dy, currentCoord, () => this.getOffsetByDelta(currentCoord, dx, dy, isLargeStep))
+    this.movePoint(state, target)
+    this.pushUndo({ type: 'move_point', featureId: state.featureId, vertexIndex: 0, previousPosition })
+  }
+}

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/pointOperations.test.js

@@ -0,0 +1,62 @@
+import { createHarness } from './__helpers__/harness.js'
+
+// getOffset/getOffsetByDelta/resolveSnapTarget are the shared mixin from
+// utils/snapMovement.js — their own behaviour is covered by utils/snapMovement.test.js.
+// This file only tests what's specific to a single-coordinate Point.
+describe('pointOperations', () => {
+  test('getPointCoord reads the feature\'s own coordinate, no path/index lookup needed', () => {
+    const { ctx, state } = createHarness()
+    expect(ctx.getPointCoord(state)).toEqual([5, 5])
+    expect(ctx.getPointCoord({ ...state, featureId: 'missing' })).toBeUndefined()
+  })
+
+  test('getNewCoord offsets the point\'s current coordinate', () => {
+    const { ctx, state } = createHarness()
+    expect(ctx.getNewCoord(state, { key: 'ArrowRight', shiftKey: false })).toHaveProperty('lng')
+  })
+
+  test('movePoint mutates the coordinate directly via updateCoordinate and fires geometrychange', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.movePoint(state, { lng: 1, lat: 2 })
+    expect(state.feature.coordinates).toEqual([1, 2])
+    expect(map.fire).toHaveBeenCalledWith('draw.geometrychange', state.feature)
+  })
+
+  // Regression: updateCoordinate's own changed() call only marks the feature dirty and fires
+  // an internal event — it never repaints (store.js's featureChanged/render). Mouse drag/click
+  // get a repaint for free via mapbox-gl-draw's own dispatch (lib/mode_handler.js auto-renders
+  // after every onDrag/onClick/onMouseUp it calls), but keyboard, touch and the D-pad all move
+  // a point through our own addEventListener-bound handlers, entirely outside that dispatch —
+  // without this, the coordinate updated with nothing on screen ever reflecting it.
+  test('movePoint explicitly triggers a render — keyboard/touch/D-pad have no other path to one', () => {
+    const { ctx, state } = createHarness()
+    ctx.movePoint(state, { lng: 1, lat: 2 })
+    expect(ctx._ctx.store.render).toHaveBeenCalled()
+  })
+
+  test('nudgePointByDelta moves the point and pushes a single undo entry', () => {
+    const { ctx, state, map } = createHarness()
+    const before = [...state.feature.coordinates]
+    ctx.nudgePointByDelta(state, 1, 0, true)
+    expect(state.feature.coordinates).not.toEqual(before)
+    expect(map._undoStack.pop()).toMatchObject({ type: 'move_point', vertexIndex: 0, previousPosition: before })
+  })
+
+  test('nudgePointByDelta no-ops when the feature is missing', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.nudgePointByDelta({ ...state, featureId: 'missing' }, 1, 0, true)
+    expect(map._undoStack).toHaveLength(0)
+  })
+
+  // resolveSnapTarget's own snap/break-out-of-snap branches are covered by
+  // utils/snapMovement.test.js — this just checks nudgePointByDelta wires a snap hit through
+  // to the moved coordinate.
+  test('nudgePointByDelta honours an active snap', () => {
+    const { ctx, state, map } = createHarness()
+    state.getSnapEnabled = () => true
+    map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
+    ctx.nudgePointByDelta(state, 0, -1, true)
+    expect(state._isSnapped).toBe(true)
+    expect(state.feature.coordinates).toEqual([7, 8])
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/pointerHandlers.js

@@ -0,0 +1,138 @@
+import DirectSelect from '../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/direct_select.js' // NOSONAR
+import { isActiveFeature } from '../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/lib/common_selectors.js' // NOSONAR
+import {
+  getSnapInstance, isSnapEnabled, getSnapLngLat, triggerSnapAtPoint, clearSnapState, setAutoSnapSuspended
+} from '../../utils/snapHelpers.js'
+import { validatePlacement } from '../../../../validation/validateGeometry.js'
+
+const MODE = 'edit_point'
+
+// A point has no ring/rubber-band to build a candidate from — just the coordinate about to
+// be moved to. Mirrors drawPointMode.js's own canPlace, which mirrors validateGeometry.js's
+// attemptPlacement — that helper hardcodes Polygon/LineString via MODE_BY_GEOMETRY, so a
+// Point candidate is built and validated directly instead.
+const canPlaceAt = (map, coord) => {
+  const candidate = { type: 'Feature', geometry: { type: 'Point', coordinates: coord }, properties: {} }
+  const { valid, reason } = validatePlacement(
+    candidate,
+    { mode: MODE, vertexIndex: 0 },
+    { onGeometryChange: map._drawGeometryValidator }
+  )
+  if (!valid) {
+    map.fire('draw.placementblocked', { feature: candidate, reason: reason ?? null, phase: 'place', mode: MODE, vertexIndex: 0 })
+  }
+  return valid
+}
+
+/**
+ * Mouse/pointer interaction for the point-edit mode: drag (with snapping), click-elsewhere
+ * to relocate, and mouse-up undo bookkeeping. Wraps the parent DirectSelect handlers — with
+ * state.selectedCoordPaths built as [] (see editPointMode.js), DirectSelect's own onMouseDown
+ * (== onTouchStart, left unoverridden here — only touchHandlers.js's touch stubs neutralise
+ * the touch half) already routes a click on the point to onFeature/startDragging and its own
+ * onDrag/dragFeature already moves it via a whole-feature delta — this only adds the
+ * undo/snap/relocate behaviour stock DirectSelect has no concept of. Mixed into EditPointMode.
+ */
+export const pointerHandlers = {
+  onFeature (state, e) {
+    if (!state.dragMoving) {
+      state._moveStartPosition = [...state.feature.coordinates]
+      // Fixed lng/lat offset between the click and the anchor, captured once — onDrag adds it
+      // to the pointer's current position on every move so a click away from the anchor keeps
+      // its grab point for the whole drag.
+      state._grabOffset = [state.feature.coordinates[0] - e.lngLat.lng, state.feature.coordinates[1] - e.lngLat.lat]
+      // Silence the snap library's own auto-query for the drag — see setAutoSnapSuspended.
+      setAutoSnapSuspended(getSnapInstance(this.map), true)
+    }
+    DirectSelect.onFeature.call(this, state, e)
+  },
+
+  // Click-elsewhere relocates the point — the WCAG 2.5.7 single-pointer alternative to
+  // dragging. Clicking the point itself is a no-op (unlike DirectSelect.clickActiveFeature,
+  // which would clear the selection — the point stays selected for the whole edit session).
+  onClick (state, e) {
+    if (isActiveFeature(e)) {
+      return
+    }
+    if (!canPlaceAt(this.map, [e.lngLat.lng, e.lngLat.lat])) {
+      return
+    }
+
+    const previousPosition = [...state.feature.coordinates]
+    const snap = getSnapInstance(this.map)
+    let target = e.lngLat
+    if (isSnapEnabled(state) && snap) {
+      triggerSnapAtPoint(snap, this.map, e.point)
+      target = getSnapLngLat(snap) || e.lngLat
+    }
+    this.movePoint(state, target)
+    this.pushUndo({ type: 'move_point', featureId: state.featureId, vertexIndex: 0, previousPosition })
+  },
+
+  onMouseUp (state, e) {
+    const snap = getSnapInstance(this.map)
+    clearSnapState(snap)
+    setAutoSnapSuspended(snap, false)
+    if (this._didPointMove(state)) {
+      this.pushUndo({ type: 'move_point', featureId: state.featureId, vertexIndex: 0, previousPosition: state._moveStartPosition })
+    }
+    state._moveStartPosition = null
+    DirectSelect.onMouseUp.call(this, state, e)
+  },
+
+  // Did the point actually change position during this interaction? Reads the live
+  // feature coordinate directly — a Point has no ring index to look up.
+  _didPointMove (state) {
+    if (!state._moveStartPosition) {
+      return false
+    }
+    const current = state.feature.coordinates
+    return current[0] !== state._moveStartPosition[0] || current[1] !== state._moveStartPosition[1]
+  },
+
+  onDrag (state, e) {
+    if (state.interfaceType === 'touch') {
+      return
+    }
+
+    this.map.fire('draw.geometrychange', state.feature)
+
+    const snap = getSnapInstance(this.map)
+    if (snap) {
+      snap.snapStatus = false
+      snap.snapCoords = null
+    }
+
+    if (!isSnapEnabled(state) || !snap?.status) {
+      // selectedCoordPaths is [] for a point (see editPointMode.js) — DirectSelect.onDrag's
+      // own selectedCoordPaths.length > 0 check routes this to dragFeature, its built-in
+      // whole-feature delta move, which already handles a Point feature correctly.
+      DirectSelect.onDrag.call(this, state, e)
+      return
+    }
+
+    if (!state.canDragMove) {
+      return
+    }
+
+    state.dragMoving = true
+    e.originalEvent.stopPropagation()
+
+    // Candidate = pointer's current absolute position + the fixed grab offset — not an
+    // incremental delta, which would compound onto an already-snapped position and leave the
+    // pin stuck on the same target no matter how far the mouse then moves.
+    const candidateLngLat = {
+      lng: e.lngLat.lng + state._grabOffset[0],
+      lat: e.lngLat.lat + state._grabOffset[1]
+    }
+    triggerSnapAtPoint(snap, this.map, this.map.project([candidateLngLat.lng, candidateLngLat.lat]))
+
+    const finalLngLat = getSnapLngLat(snap) || candidateLngLat
+    state.feature.updateCoordinate('', finalLngLat.lng, finalLngLat.lat)
+    state.dragMoveLocation = e.lngLat
+  },
+
+  // Whole-feature deletion is deleteFeature()'s job, not this mode's — deleting a Point's
+  // one coordinate isn't a "delete vertex" operation the way it is for a ring.
+  onTrash () {}
+}

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/pointerHandlers.test.js

@@ -0,0 +1,197 @@
+import { createHarness, dragEvt } from './__helpers__/harness.js'
+
+const activeFeatureTarget = { properties: { active: 'true', meta: 'feature' } }
+
+describe('pointerHandlers', () => {
+  test('onFeature snapshots the move start and starts dragging via stock DirectSelect (selectedCoordPaths: [])', () => {
+    const { ctx, state } = createHarness()
+    ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 5, lat: 5 } })
+    expect(state._moveStartPosition).toEqual([5, 5])
+    expect(state.canDragMove).toBe(true)
+    expect(state.dragMoveLocation).toEqual({ lng: 5, lat: 5 })
+  })
+
+  // Feature anchor is [5, 5] (createHarness's default) — clicking at [2, 2] is 3 units away,
+  // e.g. near the top of a pin icon rather than its tip.
+  test('onFeature captures the click\'s fixed offset from the anchor', () => {
+    const { ctx, state } = createHarness()
+    ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 2, lat: 2 } })
+    expect(state._grabOffset).toEqual([3, 3])
+  })
+
+  test('onFeature does not re-snapshot mid-drag', () => {
+    const { ctx, state } = createHarness()
+    state.dragMoving = true
+    state._moveStartPosition = [1, 1]
+    state._grabOffset = [0, 0]
+    ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 9, lat: 9 } })
+    expect(state._moveStartPosition).toEqual([1, 1])
+    expect(state._grabOffset).toEqual([0, 0])
+  })
+
+  // Silencing the snap library's own raw-cursor auto-query for the whole drag is what keeps
+  // the indicator and the dragged feature from falling out of sync — see
+  // snapHelpers.js's setAutoSnapSuspended for the full mechanism.
+  test('onFeature suspends the snap library\'s own auto-query at drag start; onMouseUp resumes it', () => {
+    const { ctx, state, map } = createHarness()
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+
+    ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 5, lat: 5 } })
+    expect(map._snapInstance._autoSnapSuspended).toBe(true)
+
+    ctx.onMouseUp(state, {})
+    expect(map._snapInstance._autoSnapSuspended).toBe(false)
+  })
+
+  test('onFeature suspending auto-snap is a harmless no-op when there is no snap instance', () => {
+    const { ctx, state } = createHarness()
+    expect(() => ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 5, lat: 5 } })).not.toThrow()
+  })
+
+  test('onClick on the active feature is a no-op — the point stays selected for the whole session', () => {
+    const { ctx, state, map } = createHarness()
+    const before = [...state.feature.coordinates]
+    ctx.onClick(state, { featureTarget: activeFeatureTarget })
+    expect(state.feature.coordinates).toEqual(before)
+    expect(map._undoStack).toHaveLength(0)
+  })
+
+  test('onClick elsewhere relocates the point (WCAG 2.5.7 single-pointer alternative to drag), pushing an undo entry', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onClick(state, { featureTarget: undefined, lngLat: { lng: 9, lat: 9 }, point: { x: 90, y: 90 } })
+    expect(state.feature.coordinates).toEqual([9, 9])
+    expect(map._undoStack.pop()).toMatchObject({ type: 'move_point', vertexIndex: 0, previousPosition: [5, 5] })
+  })
+
+  test('onClick honours snap when enabled and active, falling back to the raw target when inactive', () => {
+    const { ctx, state, map } = createHarness()
+    state.getSnapEnabled = () => true
+    map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
+    ctx.onClick(state, { featureTarget: undefined, lngLat: { lng: 9, lat: 9 }, point: { x: 90, y: 90 } })
+    expect(state.feature.coordinates).toEqual([7, 8])
+
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+    ctx.onClick(state, { featureTarget: undefined, lngLat: { lng: 3, lat: 3 }, point: { x: 30, y: 30 } })
+    expect(state.feature.coordinates).toEqual([3, 3])
+  })
+
+  test('onClick is vetoed by a rejecting geometry validator, firing draw.placementblocked with a fallback null reason, and leaving the point untouched', () => {
+    const { ctx, state, map } = createHarness()
+    map._drawGeometryValidator = () => false // no {reason} shape
+    ctx.onClick(state, { featureTarget: undefined, lngLat: { lng: 9, lat: 9 }, point: { x: 90, y: 90 } })
+    expect(state.feature.coordinates).toEqual([5, 5])
+    expect(map.fire).toHaveBeenCalledWith('draw.placementblocked', expect.objectContaining({ reason: null }))
+    expect(map._undoStack).toHaveLength(0)
+  })
+
+  test('onMouseUp clears snap state, records a move undo only if the point actually moved, and delegates to stock DirectSelect', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onMouseUp(state, {}) // no prior snapshot → nothing recorded
+    expect(map._undoStack).toHaveLength(0)
+
+    state._moveStartPosition = [5, 5]
+    ctx.movePoint(state, { lng: 9, lat: 9 })
+    ctx.onMouseUp(state, {})
+    expect(map._undoStack.pop()).toMatchObject({ type: 'move_point', vertexIndex: 0, previousPosition: [5, 5] })
+    expect(state._moveStartPosition).toBeNull()
+
+    // Snapshot present but the point never actually moved → no undo entry
+    state._moveStartPosition = [9, 9]
+    ctx.onMouseUp(state, {})
+    expect(map._undoStack).toHaveLength(0)
+  })
+
+  test('onDrag skips touch, delegates without snap, and snaps when enabled', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onDrag({ ...state, interfaceType: 'touch' }, dragEvt(1, 1))
+    expect(state.feature.coordinates).toEqual([5, 5]) // untouched — bailed early for touch
+
+    // no snap → stock DirectSelect.onDrag/dragFeature moves the point via moveFeatures
+    Object.assign(state, { canDragMove: true, dragMoveLocation: { lng: 0, lat: 0 } })
+    ctx.onDrag(state, dragEvt(2, 2))
+    expect(map.fire).toHaveBeenCalledWith('draw.geometrychange', expect.anything())
+    expect(state.feature.coordinates).toEqual([7, 7])
+
+    // snap enabled but inactive → resolves via dragging still (canDragMove true)
+    state.getSnapEnabled = () => true
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+    Object.assign(state, { dragMoveLocation: { lng: 2, lat: 2 }, _grabOffset: [0, 0] })
+    ctx.onDrag(state, dragEvt(3, 3))
+    expect(state.dragMoving).toBe(true)
+  })
+
+  test('onDrag with snap active writes the snapped coordinate directly', () => {
+    const { ctx, state, map } = createHarness() // feature anchor at [5, 5]
+    state.getSnapEnabled = () => true
+    ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 0, lat: 0 } }) // grab offset [5,5]
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn(() => { map._snapInstance.snapStatus = true; map._snapInstance.snapCoords = [7, 8] }) }
+    ctx.onDrag(state, dragEvt(2, 2)) // candidate = [2,2] + grab offset [5,5] = [7,7], queried and snapped
+    expect(state.feature.coordinates).toEqual([7, 8])
+  })
+
+  // Regression: the candidate used to be built by accumulating the pointer's frame-to-frame
+  // delta onto the feature's own (possibly already-snapped) coordinate — so once a snap moved
+  // the feature onto a target, the next frame's small pointer movement produced a candidate
+  // still within that same target's radius and got pulled straight back onto it, reading as
+  // permanently stuck regardless of how far the mouse then moved. The candidate must instead
+  // always be the pointer's current absolute position plus the fixed grab offset from drag
+  // start, independent of wherever a previous frame's snap left the feature.
+  test('onDrag recovers on the next frame instead of staying stuck at a target it just snapped to', () => {
+    const { ctx, state, map } = createHarness() // feature anchor at [5, 5]
+    ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 0, lat: 0 } }) // grab offset [5,5]
+    state.getSnapEnabled = () => true
+    map._snapInstance = {
+      status: true,
+      snapStatus: false,
+      snapCoords: null,
+      snapToClosestPoint: jest.fn(() => { map._snapInstance.snapStatus = true; map._snapInstance.snapCoords = [7, 8] })
+    }
+
+    // Frame 1: pointer at [2,2] → candidate [7,7], found and snapped onto the target [7,8].
+    ctx.onDrag(state, dragEvt(2, 2))
+    expect(state.feature.coordinates).toEqual([7, 8])
+
+    // Frame 2: pointer moves on by just one unit, to [3,2]. The fresh candidate must be built
+    // from the pointer's own absolute position ([3,2] + [5,5] = [8,7]), not from last frame's
+    // already-snapped [7,8] plus this frame's tiny delta (which would still read as sitting on
+    // the target).
+    map._snapInstance.snapToClosestPoint = jest.fn(() => { map._snapInstance.snapStatus = false; map._snapInstance.snapCoords = null })
+    ctx.onDrag(state, dragEvt(3, 2))
+    expect(map.project).toHaveBeenCalledWith([8, 7])
+    expect(state.feature.coordinates).toEqual([8, 7])
+  })
+
+  // The click that starts a drag can land anywhere on the icon, not just on top of its anchor
+  // coordinate — the anchor must move by the same delta as the pointer and snap must be queried
+  // at that offset-corrected candidate, not at the raw pointer (which would snap to whatever's
+  // near the cursor and jump the anchor under it the moment a candidate is found). Mirrors the
+  // OL adapter's point/pointDragInteraction.js regression test for the identical bug.
+  test('onDrag preserves the click\'s offset from the anchor and queries snap at the anchor\'s own candidate, not the raw pointer', () => {
+    const { ctx, state, map } = createHarness() // feature anchor at [5, 5]
+    // Mousedown at [2, 2] — 3 units away from the anchor, e.g. near the top of a pin icon.
+    ctx.onFeature(state, { featureTarget: activeFeatureTarget, lngLat: { lng: 2, lat: 2 } })
+    state.getSnapEnabled = () => true
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+
+    // Pointer moves from [2,2] to [4,2] — a (+2, 0) delta — no snap candidate found.
+    ctx.onDrag(state, dragEvt(4, 2))
+    expect(state.feature.coordinates).toEqual([7, 5]) // anchor [5,5] + the pointer's own delta
+    expect(map.project).toHaveBeenCalledWith([7, 5]) // queried at the anchor's candidate…
+    expect(map.project).not.toHaveBeenCalledWith([4, 2]) // …never at the raw pointer position
+  })
+
+  test('onDrag with snap enabled but not canDragMove bails out', () => {
+    const { ctx, state } = createHarness()
+    state.getSnapEnabled = () => true
+    state.canDragMove = false
+    ctx.map._snapInstance = { status: true, snapStatus: true, snapCoords: [1, 1], snapToClosestPoint: jest.fn() }
+    ctx.onDrag(state, dragEvt(2, 2))
+    expect(state.feature.coordinates).toEqual([5, 5])
+  })
+
+  test('onTrash is a no-op — whole-feature deletion is deleteFeature\'s job, not this mode\'s', () => {
+    const { ctx, state } = createHarness()
+    expect(() => ctx.onTrash(state)).not.toThrow()
+    expect(state.feature.coordinates).toEqual([5, 5])
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/touchHandlers.js

@@ -0,0 +1,92 @@
+import { getSnapInstance, clearSnapState } from '../../utils/snapHelpers.js'
+import { isOnSVG, scalePoint } from '../editVertexMode/helpers.js'
+import { createTouchTarget } from '../../../../utils/touchTarget.js'
+// Reused, not redefined — mapboxDraw.js's style-reload path already imports this same symbol
+// and keys off map._drawEditContainer, which edit_point also sets, so the recolour-on-
+// style-change path works for the point's touch target with zero changes elsewhere.
+import { applyTouchVertexColors } from '../editVertexMode/touchHandlers.js'
+import { getTouchPoint, computeTouchDragAnchors, resolveTouchDragCoord } from '../../utils/touchDragMath.js'
+
+// The offset-drag delta math here (utils/touchDragMath.js) is shared with editVertexMode/
+// touchHandlers.js's onTouchstart/onTouchmove — it's already single-coordinate, not
+// ring-specific — just sourced from the point's own coordinate instead of a vertex list
+// index. onTap does NOT relocate the point (a stray tap during a pan-ish gesture shouldn't
+// silently move it — the offset target drag and the D-pad are touch's two ways to move it).
+export const touchHandlers = {
+  addTouchPointTarget (state) {
+    state.touchPointTarget = createTouchTarget(state.container)
+    applyTouchVertexColors(state.touchPointTarget, this.map._drawCurrentMapStyle, this.map._drawPluginConfig)
+  },
+
+  updateTouchPointTarget (state, point) {
+    if (point && state.interfaceType === 'touch') {
+      Object.assign(state.touchPointTarget.style, { display: 'block', top: `${point.y}px`, left: `${point.x}px` })
+    } else {
+      state.touchPointTarget.style.display = 'none'
+    }
+  },
+
+  hideTouchPointIndicator (state) {
+    state.touchPointTarget.style.display = 'none'
+  },
+
+  // Point is always selected, so — unlike editVertexMode's onPointerevent — there's nothing
+  // to deselect on a non-touch pointermove; just track the interface type.
+  onPointerevent (state, e) {
+    state.interfaceType = e.pointerType === 'touch' ? 'touch' : 'mouse'
+    state.isPanEnabled = true
+  },
+
+  // Empty stubs required by DirectSelect
+  onTouchStart () {},
+  onTouchMove () {},
+  onTouchEnd () {},
+
+  onTouchend (state) {
+    clearSnapState(getSnapInstance(this.map))
+    if (state._touchMoved && state._moveStartPosition) {
+      this.pushUndo({ type: 'move_point', featureId: state.featureId, vertexIndex: 0, previousPosition: state._moveStartPosition })
+    }
+    state._moveStartPosition = null
+    state._touchMoved = false
+
+    // Re-sync the target to the point's actual final coordinate. Mid-drag it tracks the raw
+    // finger 1:1 from its touchstart-time offset (see onTouchmove) — a mid-drag snap moves the
+    // point without moving the target by the same amount, leaving them out of alignment. Left
+    // uncorrected, the next onTouchstart's delta math re-anchors off that drifted position,
+    // compounding a little further with every snapped drag.
+    if (state.feature) {
+      this.updateTouchPointTarget(state, scalePoint(this.map.project(state.feature.coordinates), state.scale))
+    }
+  },
+
+  // Touch tap on the point does nothing — relocating it is the offset target drag or the
+  // D-pad's job, not a raw tap.
+  onTap () {},
+
+  onTouchstart (state, e) {
+    clearSnapState(getSnapInstance(this.map))
+    const vertex = this.getPointCoord(state)
+    if (!vertex || !isOnSVG(e.target.parentNode)) {
+      return
+    }
+
+    state._moveStartPosition = [...vertex]
+    state._touchMoved = false
+
+    const touch = getTouchPoint(e)
+    Object.assign(state, computeTouchDragAnchors(this.map, state.touchPointTarget, touch, vertex, state.scale))
+  },
+
+  onTouchmove (state, e) {
+    if (!isOnSVG(e.target.parentNode)) {
+      return
+    }
+
+    state._touchMoved = true
+
+    const touch = getTouchPoint(e)
+    this.movePoint(state, resolveTouchDragCoord(this.map, state, touch))
+    this.updateTouchPointTarget(state, { x: touch.x - state.deltaTarget.x, y: touch.y - state.deltaTarget.y })
+  }
+}