@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

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

@@ -0,0 +1,101 @@
+import { createHarness, svgTarget } from './__helpers__/harness.js'
+
+describe('touchHandlers', () => {
+  test('addTouchPointTarget resolves colours from map._drawPluginConfig', () => {
+    const { ctx, state, map } = createHarness()
+    map._drawPluginConfig = { editVertex: '#custom' }
+    ctx.addTouchPointTarget(state)
+    expect(state.touchPointTarget.style.getPropertyValue('--draw-primary')).toBe('#custom')
+  })
+
+  test('updateTouchPointTarget shows the target for a touch selection and hides it otherwise', () => {
+    const { ctx, state } = createHarness()
+    state.interfaceType = 'touch'
+    ctx.updateTouchPointTarget(state, { x: 12, y: 34 })
+    expect(state.touchPointTarget.style.display).toBe('block')
+    ctx.updateTouchPointTarget(state, null)
+    expect(state.touchPointTarget.style.display).toBe('none')
+  })
+
+  test('hideTouchPointIndicator hides the target', () => {
+    const { ctx, state } = createHarness()
+    state.touchPointTarget.style.display = 'block'
+    ctx.hideTouchPointIndicator(state)
+    expect(state.touchPointTarget.style.display).toBe('none')
+  })
+
+  test('onPointerevent only tracks the interface type — the point is always selected, so there is nothing to deselect', () => {
+    const { ctx, state, api } = createHarness()
+    ctx.onPointerevent(state, { pointerType: 'mouse' })
+    expect(state.interfaceType).toBe('mouse')
+    expect(api.changeMode).not.toHaveBeenCalled()
+
+    ctx.onPointerevent(state, { pointerType: 'touch' })
+    expect(state.interfaceType).toBe('touch')
+    expect(api.changeMode).not.toHaveBeenCalled()
+  })
+
+  test('onTap is a deliberate no-op — a stray tap never relocates the point', () => {
+    const { ctx, state, map } = createHarness()
+    const before = [...state.feature.coordinates]
+    expect(() => ctx.onTap(state, { featureTarget: undefined })).not.toThrow()
+    expect(state.feature.coordinates).toEqual(before)
+    expect(map.fire).not.toHaveBeenCalledWith('draw.geometrychange', expect.anything())
+  })
+
+  test('onTouchend records a move undo only when a touch move occurred', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onTouchend({}) // no state → no throw
+    ctx.onTouchend({ ...state, _touchMoved: false }) // no move → no undo
+    expect(map._undoStack).toHaveLength(0)
+    state._touchMoved = true
+    state._moveStartPosition = [0, 0]
+    ctx.onTouchend(state)
+    expect(map._undoStack.pop()).toMatchObject({ type: 'move_point', vertexIndex: 0, previousPosition: [0, 0] })
+    expect(state._moveStartPosition).toBeNull()
+  })
+
+  // Regression: mid-drag the target tracks the raw finger 1:1 from its touchstart-time offset
+  // (see onTouchmove), so a mid-drag snap — which moves the point without moving the target by
+  // the same amount — leaves the two out of alignment. Re-syncing on touchend to the point's
+  // actual final coordinate stops that drift from compounding on the next drag's delta math.
+  test('onTouchend re-syncs the target to the point\'s actual final coordinate', () => {
+    const { ctx, state } = createHarness()
+    state.interfaceType = 'touch'
+    state.feature.coordinates = [9, 9]
+    ctx.onTouchend(state)
+    expect(state.touchPointTarget.style.display).toBe('block')
+    expect(state.touchPointTarget.style.left).toBe(`${9 * 10}px`) // harness project(): coord * 10
+    expect(state.touchPointTarget.style.top).toBe(`${9 * 10}px`)
+  })
+
+  test('onTouchstart captures move start state, ignoring taps off the point/target', () => {
+    const { ctx, state } = createHarness()
+    ctx.onTouchstart(state, { target: { parentNode: document.createElement('div') }, touches: [{ clientX: 1, clientY: 1 }] })
+    expect(state._moveStartPosition).toBeUndefined()
+
+    ctx.onTouchstart(state, { target: svgTarget(state), touches: [{ clientX: 20, clientY: 20 }] })
+    expect(state._moveStartPosition).toEqual([5, 5])
+    expect(state._touchMoved).toBe(false)
+  })
+
+  // resolveTouchDragCoord's own snap/fallback branches are covered by
+  // utils/touchDragMath.test.js — this checks onTouchmove ignores off-target moves and wires
+  // an active snap through to the point's coordinate.
+  test('onTouchmove moves the point, honouring snap, and ignores non-target moves', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onTouchstart(state, { target: svgTarget(state), touches: [{ clientX: 50, clientY: 50 }] })
+
+    ctx.onTouchmove(state, { target: { parentNode: document.createElement('div') }, touches: [{ clientX: 5, clientY: 5 }] })
+    expect(state.feature.coordinates).toEqual([5, 5]) // off-target move ignored
+
+    ctx.onTouchmove(state, { target: svgTarget(state), touches: [{ clientX: 60, clientY: 70 }] })
+    expect(state.feature.coordinates).not.toEqual([5, 5])
+    expect(state._touchMoved).toBe(true)
+
+    state.getSnapEnabled = () => true
+    map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
+    ctx.onTouchmove(state, { target: svgTarget(state), touches: [{ clientX: 80, clientY: 90 }] })
+    expect(state.feature.coordinates).toEqual([7, 8])
+  })
+})

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

@@ -0,0 +1,46 @@
+import { scalePoint } from '../editVertexMode/helpers.js'
+import { sharedUndoHandlers } from '../../utils/geometryValidation.js'
+
+// Map an undo-stack op type onto the geometry-change `phase` consumed by validation. Read off
+// `this` by the shared pushUndo mixin (utils/geometryValidation.js) — see that file's comment.
+const UNDO_OP_PHASE = { move_point: 'commit-move' }
+
+// Undoing a move commits the inverse move, so it re-validates with the same phase.
+const UNDO_INVERSE_PHASE = { move_point: 'commit-move' }
+
+// Same dispatch-by-op-type pattern as editVertexMode/undoHandlers.js, but with a single op
+// type — there's no insert/delete concept for a Point's one coordinate — so undoMovePoint
+// writes the coordinate directly, with no getRingSegments/getSegmentForIndex/
+// getModifiableCoords lookup needed at all.
+export const undoHandlers = {
+  ...sharedUndoHandlers,
+  UNDO_OP_PHASE,
+  UNDO_INVERSE_PHASE,
+
+  handleUndo (state) {
+    const undoStack = this.map._undoStack
+    if (!undoStack || undoStack.length === 0) {
+      return
+    }
+
+    const op = undoStack.pop()
+
+    if (op.type === 'move_point') {
+      this.undoMovePoint(state, op)
+    }
+    // An undo commits the inverse change, so it must re-validate like any other
+    // commit — otherwise the invalid stroke and the Done gate go stale.
+    this.emitGeometryValidation(UNDO_INVERSE_PHASE[op.type], op.vertexIndex, op.featureId)
+  },
+
+  undoMovePoint (state, op) {
+    const { previousPosition, featureId } = op
+    const feature = this.getFeature(featureId)
+    if (!feature) { return }
+
+    feature.updateCoordinate('', previousPosition[0], previousPosition[1])
+    this._ctx.store.render()
+    this.fireGeometryChange(state)
+    this.updateTouchPointTarget(state, scalePoint(this.map.project(previousPosition), state.scale))
+  }
+}

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

@@ -0,0 +1,42 @@
+import { createHarness } from './__helpers__/harness.js'
+
+// fireGeometryChange/emitGeometryValidation/pushUndo are the shared mixin from
+// utils/geometryValidation.js — their own behaviour is covered by
+// utils/geometryValidation.test.js. This file only tests what's specific to editPointMode:
+// pushUndo's UNDO_OP_PHASE wiring for 'move_point', handleUndo's single-op-type dispatch,
+// and undoMovePoint itself.
+describe('undoHandlers', () => {
+  test('pushUndo maps move_point to the commit-move phase', () => {
+    jest.useFakeTimers()
+    const { ctx, map } = createHarness()
+    map.fire.mockClear()
+    ctx.pushUndo({ type: 'move_point', featureId: 'feat-1', vertexIndex: 0 })
+    jest.runAllTimers()
+    expect(map.fire).toHaveBeenCalledWith('draw.geometrychange', expect.objectContaining({ phase: 'commit-move' }))
+    jest.useRealTimers()
+  })
+
+  test('handleUndo ignores an empty stack and dispatches the single move_point op type', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.handleUndo(state) // empty → no throw
+    const spy = jest.spyOn(ctx, 'undoMovePoint').mockImplementation(() => {})
+    map._undoStack.push({ type: 'move_point', featureId: 'feat-1', vertexIndex: 0, previousPosition: [0, 0] })
+    ctx.handleUndo(state)
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    map._undoStack.push({ type: 'unknown' })
+    expect(() => ctx.handleUndo(state)).not.toThrow()
+  })
+
+  // handleUndo's own call to emitGeometryValidation with the inverse phase isn't
+  // re-asserted here — for a Point, UNDO_OP_PHASE and UNDO_INVERSE_PHASE are the same
+  // single-entry map, so it would just re-confirm the 'commit-move' phase already checked
+  // above via pushUndo. (editVertexMode's equivalent op/inverse maps genuinely differ —
+  // see its own undoHandlers.test.js.)
+  test('undoMovePoint restores the previous position directly, guarding a missing feature', () => {
+    const { ctx, state } = createHarness()
+    ctx.undoMovePoint({ ...state, featureId: 'missing' }, { previousPosition: [0, 0], featureId: 'missing' })
+    ctx.undoMovePoint(state, { previousPosition: [3, 4], featureId: 'feat-1' })
+    expect(ctx.getFeature('feat-1').coordinates).toEqual([3, 4])
+  })
+})

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

@@ -0,0 +1,151 @@
+import MapboxDraw from '@mapbox/mapbox-gl-draw'
+import doubleClickZoom from '../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/lib/double_click_zoom.js' // NOSONAR
+import { CUSTOM_DRAW_EVENTS } from '../drawEvents.js'
+import { scalePoint } from './editVertexMode/helpers.js'
+import { bindEditModeListeners, unbindEditModeListeners, clearActiveSnapIndicator, buildEditModeHandlers } from '../utils/editModeEvents.js'
+import { undoHandlers } from './editPointMode/undoHandlers.js'
+import { touchHandlers } from './editPointMode/touchHandlers.js'
+import { pointOperations } from './editPointMode/pointOperations.js'
+import { keyboardHandlers } from './editPointMode/keyboardHandlers.js'
+import { pointerHandlers } from './editPointMode/pointerHandlers.js'
+
+/**
+ * Relocating an already-placed single-coordinate feature. Composed the same way
+ * editVertexMode.js is, but cannot inherit DirectSelect.onSetup (throws a TypeError on a
+ * Point — see this file's own onSetup) or its ring-shaped toDisplayFeatures/changeMode —
+ * the point has one coordinate, always selected, with no vertex list to navigate.
+ */
+export const EditPointMode = {
+  ...MapboxDraw.modes.direct_select,
+  ...undoHandlers,
+  ...touchHandlers,
+  ...pointOperations,
+  ...keyboardHandlers,
+  ...pointerHandlers,
+
+  onSetup (options) {
+    const featureId = options.featureId
+    const feature = this.getFeature(featureId)
+
+    if (!feature) {
+      throw new Error('You must provide a featureId to enter edit_point mode')
+    }
+
+    const state = {
+      featureId,
+      feature,
+      dragMoveLocation: null,
+      dragMoving: false,
+      canDragMove: false,
+      // Empty, not [''] — this is what lets DirectSelect's own onFeature/onDrag/dragFeature
+      // machinery move a Point via its stock whole-feature-delta path unmodified.
+      selectedCoordPaths: []
+    }
+
+    this.setSelectedCoordinates([])
+    this.setSelected(featureId)
+    doubleClickZoom.disable(this)
+    this.setActionableState({ trash: false })
+
+    Object.assign(state, {
+      container: options.container,
+      interfaceType: options.interfaceType,
+      undoButtonId: options.undoButtonId,
+      isPanEnabled: options.isPanEnabled,
+      getSnapEnabled: options.getSnapEnabled,
+      scale: options.scale ?? 1
+    })
+
+    // Clear undo stack only on initial entry to edit mode for a feature (same convention
+    // as edit_vertex, so switching Undo between features never applies a stale op).
+    if (this.map._lastEditFeatureId !== state.featureId) {
+      this.map._undoStack?.clear()
+      this.map._lastEditFeatureId = state.featureId
+    }
+
+    this.setupEventListeners(state)
+    this.map._drawEditContainer = options.container
+    this.addTouchPointTarget(state)
+
+    // edit_vertex's first interaction is always a click/tap that selects a vertex — which,
+    // as a side effect, moves focus onto the map viewport, satisfying keyboardHandlers.js's
+    // isInteractiveElementFocused guard (it only blocks shortcuts when focus is OUTSIDE
+    // state.container). A point is already selected from the moment this mode starts, so a
+    // keyboard-only session can go straight to arrow keys with no click in between — meaning
+    // focus may still be sitting on whatever button opened this mode. Claim it explicitly so
+    // that guard reads correctly from the first keypress, not just after an incidental click.
+    state.container?.focus({ preventScroll: true })
+
+    clearActiveSnapIndicator(this.map)
+
+    // Show the touch target if entering on a touch interface.
+    if (state.interfaceType === 'touch') {
+      setTimeout(() => {
+        this.updateTouchPointTarget(state, scalePoint(this.map.project(state.feature.coordinates), state.scale))
+      }, 0)
+    }
+
+    // Claim the D-pad once for the whole session. Unlike edit_vertex (which re-fires this on
+    // every vertex selection change), a point never emits draw.vertexchange — that event
+    // unconditionally releases mapProvider.activeMoveTarget, so it must never fire here.
+    // attachEvents' resetState() (events.js) is the release point, on Done/Cancel/edit-finish.
+    // numVertecies (misspelled) — MaplibreDrawAdapter.js's vertexselection handler only reads
+    // that exact key when normalising to the adapter contract's numVertices; firing the
+    // correctly-spelled key here would get silently clobbered to undefined instead.
+    this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: 0, numVertecies: 1 })
+
+    return state
+  },
+
+  setupEventListeners (state) {
+    const handlers = this.handlers = buildEditModeHandlers(this, state, { nudge: this.onNudgePoint })
+    bindEditModeListeners(state, this.map, handlers)
+  },
+
+  // active isn't cosmetic here — mapbox-gl-draw's own isActiveFeature()/isInactiveFeature()
+  // selectors (used by DirectSelect.onMouseDown to route mousedown into onFeature/
+  // startDragging, and by this mode's own onClick to tell "click the point" apart from
+  // "click elsewhere") key off it, and Feature.prototype.internal() defaults it to 'false'.
+  // Without setting it here, mousedown never starts a drag and every click — including on
+  // the point itself — falls through to onClick's relocate branch. Deliberately does not
+  // call createSupplementaryPoints, which would draw a plain vertex disc over the icon.
+  toDisplayFeatures (state, geojson, push) {
+    geojson.properties.active = state.featureId === geojson.properties.id ? 'true' : 'false'
+    push(geojson)
+  },
+
+  onScaleChange (state, event) {
+    state.scale = event.scale
+  },
+
+  onInterfaceTypeChange (state, event) {
+    state.interfaceType = event.interfaceType
+    this.updateTouchPointTarget(state, scalePoint(this.map.project(state.feature.coordinates), state.scale))
+  },
+
+  onMove (state) {
+    this.updateTouchPointTarget(state, scalePoint(this.map.project(state.feature.coordinates), state.scale))
+  },
+
+  // Inbound signal from MaplibreDrawAdapter.nudgeSelectedVertex — the D-pad entry point for
+  // all three interface types (see mapProvider.activeMoveTarget in events.js). Repositions
+  // the touch target the same way onMove/onInterfaceTypeChange do, since nudgePointByDelta
+  // has no equivalent hook of its own.
+  onNudgePoint (state, event) {
+    this.nudgePointByDelta(state, event.dx, event.dy, event.isLargeStep)
+    this.updateTouchPointTarget(state, scalePoint(this.map.project(state.feature.coordinates), state.scale))
+  },
+
+  onButtonClick (state, event) {
+    if (event.target.closest(`#${state.undoButtonId}`)) {
+      this.handleUndo(state)
+    }
+  },
+
+  onStop (state) {
+    this.map._drawEditContainer = null
+    this.map._editingFeatureId = null
+    unbindEditModeListeners(state, this.map, this.handlers)
+    this.hideTouchPointIndicator(state)
+  }
+}

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

@@ -0,0 +1,156 @@
+import { createHarness } from './editPointMode/__helpers__/harness.js'
+import { isActiveFeature } from '../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/lib/common_selectors.js' // NOSONAR
+
+/**
+ * Tests for EditPointMode's own methods: setup/teardown lifecycle, scale/move/interface-type
+ * events, and toDisplayFeatures/button routing. The keyboard, pointer, touch, undo and
+ * point-operation handlers are covered in their own colocated test files under editPointMode/.
+ */
+
+describe('onSetup / onStop lifecycle', () => {
+  test('builds state without throwing on a Point (DirectSelect.onSetup itself throws a TypeError here)', () => {
+    const { state, map } = createHarness()
+    expect(state.featureId).toBe('feat-1')
+    expect(state.selectedCoordPaths).toEqual([])
+    expect(state.feature.coordinates).toEqual([5, 5])
+    expect(map._lastEditFeatureId).toBe('feat-1')
+    expect(map._drawEditContainer).toBe(state.container)
+  })
+
+  // Regression: a keyboard-only session has no click/tap to move focus onto the map first
+  // (the point is already selected from the moment this mode starts) — without claiming
+  // focus explicitly, keyboardHandlers.js's isInteractiveElementFocused guard would block
+  // every arrow key until an unrelated click happened to land on the viewport.
+  test('claims focus on the container so a keyboard-only session works without a prior click', () => {
+    const { state } = createHarness()
+    expect(document.activeElement).toBe(state.container)
+  })
+
+  test('throws when no feature is found for the given featureId', () => {
+    const { ctx, options } = createHarness()
+    expect(() => ctx.onSetup({ ...options, featureId: 'missing' })).toThrow()
+  })
+
+  test('claims the D-pad exactly once at setup, never followed by draw.vertexchange', () => {
+    const { map } = createHarness()
+    // numVertecies (misspelled) — MaplibreDrawAdapter.js's vertexselection handler only reads
+    // that exact key when normalising to the adapter contract's numVertices.
+    expect(map.fire).toHaveBeenCalledWith('draw.vertexselection', { index: 0, numVertecies: 1 })
+    expect(map.fire).not.toHaveBeenCalledWith('draw.vertexchange', expect.anything())
+  })
+
+  // Shared listener wiring (scalechange, nudge, pointer/touch/keyboard) is covered by
+  // editModeEvents.test.js — this only asserts what's specific to edit_point: no ring-only
+  // vertex/update events.
+  test("does not register the ring-only vertex/update events — those are edit_vertex's alone", () => {
+    const { map } = createHarness()
+    expect(map.on).not.toHaveBeenCalledWith('draw.selectionchange', expect.any(Function))
+    expect(map.on).not.toHaveBeenCalledWith('draw.update', expect.any(Function))
+  })
+
+  test('does not clear the undo stack when re-entering the same feature', () => {
+    const { ctx, map, options } = createHarness()
+    map._undoStack.push({ type: 'move_point' })
+    // map._lastEditFeatureId is already 'feat-1' from the first setup
+    ctx.onSetup(options)
+    expect(map._undoStack).toHaveLength(1)
+  })
+
+  // Listener teardown itself is covered by editModeEvents.test.js.
+  test('onStop clears the editing container; DirectSelect touch stubs are inert', () => {
+    const { ctx, state, map } = createHarness()
+    expect(() => { ctx.onTouchStart(); ctx.onTouchMove(); ctx.onTouchEnd() }).not.toThrow()
+    ctx.onStop(state)
+    expect(map._drawEditContainer).toBeNull()
+  })
+
+  test('clears an active snap indicator and positions the touch target when entering on touch', () => {
+    jest.useFakeTimers()
+    const { ctx, map, options } = createHarness()
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null }
+    map.getLayer.mockClear()
+
+    const state = ctx.onSetup({ ...options, interfaceType: 'touch' })
+    expect(map.getLayer).toHaveBeenCalledWith('snap-helper-circle')
+    jest.runAllTimers()
+    expect(state.touchPointTarget.style.display).toBe('block')
+    jest.useRealTimers()
+  })
+})
+
+describe('toDisplayFeatures', () => {
+  test('flags the edited feature active (isActiveFeature() depends on it — see the mode\'s own comment) and pushes every feature, without supplementary points', () => {
+    const { ctx, state } = createHarness()
+    const pushed = []
+    const push = (f) => pushed.push(f)
+
+    ctx.toDisplayFeatures(state, { properties: { id: 'feat-1' } }, push)
+    ctx.toDisplayFeatures(state, { properties: { id: 'other' } }, push)
+
+    expect(pushed).toEqual([
+      { properties: { id: 'feat-1', active: 'true' } },
+      { properties: { id: 'other', active: 'false' } }
+    ])
+  })
+
+  // Regression: mapbox-gl-draw's own isActiveFeature() selector (which DirectSelect.onMouseDown
+  // uses to route a mousedown into onFeature/startDragging, and which this mode's own onClick
+  // uses to tell "click the point" apart from "click elsewhere") requires active === 'true' on
+  // the rendered feature — asserting against the real selector, not a hand-built fixture,
+  // catches a regression here that unit tests using a hand-built featureTarget would miss.
+  test('the pushed feature is recognised by the real isActiveFeature() selector', () => {
+    const { ctx, state } = createHarness()
+    const pushed = []
+    // meta: 'feature' mirrors what mapbox-gl-draw's own Feature.prototype.internal() sets on
+    // every stored feature's rendered GeoJSON — toDisplayFeatures only ever adds `active`.
+    ctx.toDisplayFeatures(state, { properties: { id: state.featureId, meta: 'feature' } }, (f) => pushed.push(f))
+    expect(isActiveFeature({ featureTarget: pushed[0] })).toBe(true)
+  })
+})
+
+describe('scale, move and interface-type events', () => {
+  test('onScaleChange and onInterfaceTypeChange update state and reposition the touch target', () => {
+    const { ctx, state } = createHarness()
+    ctx.onScaleChange(state, { scale: 2 })
+    expect(state.scale).toBe(2)
+    ctx.onInterfaceTypeChange(state, { interfaceType: 'touch' })
+    expect(state.interfaceType).toBe('touch')
+  })
+
+  test('onMove keeps the touch target aligned with the point', () => {
+    const { ctx, state } = createHarness()
+    state.interfaceType = 'touch'
+    ctx.onMove(state)
+    expect(state.touchPointTarget.style.display).toBe('block')
+  })
+
+  test('draw.nudgevertex moves the point and repositions the touch target — the inbound bridge for MoveControls.mapProvider.activeMoveTarget', () => {
+    jest.useFakeTimers()
+    const { state, map } = createHarness(undefined, { interfaceType: 'touch' })
+    jest.runAllTimers() // flush onSetup's deferred initial touch-target positioning
+    const before = [...state.feature.coordinates]
+    const targetBefore = { top: state.touchPointTarget.style.top, left: state.touchPointTarget.style.left }
+    map.fire('draw.nudgevertex', { dx: 1, dy: 0, isLargeStep: true })
+    expect(state.feature.coordinates).not.toEqual(before)
+    expect({ top: state.touchPointTarget.style.top, left: state.touchPointTarget.style.left }).not.toEqual(targetBefore)
+    jest.useRealTimers()
+  })
+})
+
+describe('button routing', () => {
+  test('onButtonClick only wires the undo control — there is no delete-vertex button in this mode', () => {
+    const { ctx, state, container } = createHarness()
+    const undo = document.createElement('button')
+    undo.id = 'undo-vertex'
+    container.append(undo)
+    const undoSpy = jest.spyOn(ctx, 'handleUndo').mockImplementation(() => {})
+
+    ctx.onButtonClick(state, { target: undo })
+    expect(undoSpy).toHaveBeenCalled()
+
+    const other = document.createElement('button')
+    container.append(other)
+    ctx.onButtonClick(state, { target: other })
+    expect(undoSpy).toHaveBeenCalledTimes(1)
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/keyboardHandlers.js

@@ -1,26 +1,14 @@
 import { getSnapInstance, clearSnapIndicator } from '../../utils/snapHelpers.js'
+import { ARROW_KEYS, ARROW_OFFSETS, isInteractiveElementFocused, isUndoShortcut, sharedKeyboardHandlers } from '../../utils/keyboardShortcuts.js'
 import { getCoords } from './geometryHelpers.js'
 
-const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
-const ARROW_OFFSETS = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }
-const INTERACTIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT', 'A'])
-
-// Keyboard shortcuts are ignored while a form control outside the map viewport has
-// focus, but still work for elements inside the viewport (e.g. draw toolbar buttons).
-const isInteractiveElementFocused = (state) => {
-  const el = document.activeElement
-  if (!el || el === document.body) { return false }
-  if (state.container?.contains(el)) { return false }
-  return INTERACTIVE_TAGS.has(el.tagName) || el.isContentEditable || el.hasAttribute('tabindex')
-}
-
-const isUndoShortcut = (e) => e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey
-
 /**
  * Keyboard interaction for the vertex-edit mode: arrow-key vertex movement/insertion,
  * space-to-select, Escape, and Cmd/Ctrl+Z undo. Mixed into EditVertexMode.
  */
 export const keyboardHandlers = {
+  ...sharedKeyboardHandlers,
+
   onKeydown (state, e) {
     if (isInteractiveElementFocused(state)) {
       return
@@ -105,24 +93,13 @@ export const keyboardHandlers = {
   },
 
   // Resolve the destination coordinate for a keyboard nudge, applying or breaking
-  // snap — delegates to the shared resolver (vertexOperations.js) also used by
+  // snap — delegates to the shared resolver (utils/snapMovement.js) also used by
   // MoveControls' nudgeVertexByDelta, so both snap identically.
   _keyboardMoveTarget (state, e, currentCoord) {
     const [dx, dy] = ARROW_OFFSETS[e.key]
     return this.resolveSnapTarget(state, dx, dy, currentCoord, () => this.getNewCoord(state, e))
   },
 
-  // Cmd/Ctrl+Z: undo the last edit, unless the user is typing in a text field.
-  handleUndoShortcut (state, e) {
-    const tag = document.activeElement?.tagName
-    if (tag === 'INPUT' || tag === 'TEXTAREA') {
-      return
-    }
-    e.preventDefault()
-    e.stopPropagation()
-    this.handleUndo(state)
-  },
-
   onKeyup (state, e) {
     if (isInteractiveElementFocused(state)) {
       return

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

@@ -4,7 +4,9 @@ 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() })
 
-  test('shortcuts are ignored outside the viewport (input, focusable non-input) and when the container is absent', () => {
+  // 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)
@@ -12,18 +14,6 @@ describe('keyboardHandlers', () => {
     keydown(ctx, state, 'ArrowRight')
     keyup(ctx, state, 'ArrowRight')
     expect(state.interfaceType).not.toBe('keyboard')
-
-    const focusable = document.createElement('div')
-    focusable.tabIndex = 0
-    document.body.appendChild(focusable)
-    focusable.focus()
-    keydown(ctx, state, 'ArrowRight')
-    expect(state.interfaceType).not.toBe('keyboard')
-
-    input.focus()
-    const s = { ...state, container: undefined, interfaceType: 'mouse' }
-    keydown(ctx, s, 'ArrowRight')
-    expect(s.interfaceType).toBe('mouse')
   })
 
   test('space selects the first vertex, or does nothing when a vertex is selected or there are none', () => {
@@ -43,24 +33,21 @@ describe('keyboardHandlers', () => {
     expect(s.isPanEnabled).toBe(true)
   })
 
-  test('an arrow key moves the selected vertex, snapping when active and using the raw coord otherwise', () => {
-    const { ctx, state, map } = createHarness()
+  // 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/index for undo on the first move, and leaves it fixed for
+  // the rest of a held-key sequence.
+  test('an arrow key moves the selected vertex and starts a keyboard-move undo sequence', () => {
+    const { ctx, state } = createHarness()
     state.selectedVertexIndex = 1
     keydown(ctx, state, 'ArrowRight')
     expect(state._keyboardMoveStartIndex).toBe(1)
+    expect(state._keyboardMoveStartPosition).toEqual([10, 0])
+    expect(state.vertecies[1]).not.toEqual([10, 0])
 
-    state.getSnapEnabled = () => true
-    map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
-    keydown(ctx, state, 'ArrowUp')
-    expect(state._isSnapped).toBe(true)
-    expect(state.vertecies[1]).toEqual([7, 8])
-
-    keydown(ctx, state, 'ArrowLeft') // snapped already → break out of the snap radius
-    expect(state._isSnapped).toBe(false)
-
-    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
-    keydown(ctx, state, 'ArrowRight') // snap enabled but inactive → raw new coord
-    expect(state._isSnapped).toBe(false)
+    // Still held → start position isn't reset to the intermediate (already-moved) position
+    keydown(ctx, state, 'ArrowRight')
+    expect(state._keyboardMoveStartPosition).toEqual([10, 0])
   })
 
   test('an arrow key on a midpoint inserts a vertex; guards a missing feature or out-of-range vertex', () => {
@@ -74,7 +61,10 @@ describe('keyboardHandlers', () => {
     expect(ctx.map._undoStack.length).toBe(0)
   })
 
-  test('alt+arrow steps the selection, Escape clears it, and Cmd/Ctrl+Z undoes (ignoring shift and text fields)', () => {
+  // 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 the alt+arrow/Escape behaviour that's specific here.
+  test('alt+arrow steps the selection, Escape clears it, and Cmd/Ctrl+Z undoes', () => {
     const { ctx, state, api } = createHarness()
     state.selectedVertexIndex = 0
     const updateSpy = jest.spyOn(ctx, 'updateVertex').mockImplementation(() => {})
@@ -84,19 +74,14 @@ describe('keyboardHandlers', () => {
     keydown(ctx, state, 'Escape')
     expect(api.changeMode).toHaveBeenCalledWith('edit_vertex', expect.objectContaining({ isPanEnabled: true }))
 
-    const undoSpy = jest.spyOn(ctx, 'handleUndo').mockImplementation(() => {})
-    keydown(ctx, state, 'z', { metaKey: true })
-    keydown(ctx, state, 'z', { ctrlKey: true })
-    expect(undoSpy).toHaveBeenCalledTimes(2)
-    keydown(ctx, state, 'z', { metaKey: true, shiftKey: true }) // shift → not undo
-    expect(undoSpy).toHaveBeenCalledTimes(2)
+    // An unhandled key (not space/arrow/Escape/undo) falls all the way through harmlessly —
+    // unlike editPointMode, Escape returns early here, so this is the only path that reaches
+    // isUndoShortcut with a falsy result.
+    expect(() => keydown(ctx, state, 'x')).not.toThrow()
 
-    // Ignored while typing in a text field inside the viewport
-    const input = document.createElement('input')
-    state.container.appendChild(input)
-    input.focus()
+    const undoSpy = jest.spyOn(ctx, 'handleUndo').mockImplementation(() => {})
     keydown(ctx, state, 'z', { metaKey: true })
-    expect(undoSpy).toHaveBeenCalledTimes(2)
+    expect(undoSpy).toHaveBeenCalledTimes(1)
   })
 
   test('onKeyup pushes a move undo after a sequence, deletes on Delete, no-ops otherwise, and allows viewport focus', () => {