@defra/interactive-map 0.0.43-alpha → 0.0.44-alpha

package/plugins/draw/src/adapters/maplibre/modes/drawMode/clickHandlers.test.js

@@ -10,7 +10,7 @@ describe('mouse clicks (polygon)', () => {
     expect(state.polygon.coordinates[0]).toHaveLength(3)
     expect(state.polygon.coordinates[0][0]).toEqual([0, 0])
     expect(state.polygon.coordinates[0][1]).toEqual([10, 0])
-    expect(firedWith(ctx.map, 'draw.vertexchange').pop()).toEqual({ numVertecies: 2 })
+    expect(firedWith(ctx.map, 'draw.vertexchange').pop()).toEqual({ numVertices: 2 })
     expect(ctx.map._undoStack.length).toBe(2)
   })
 
@@ -132,6 +132,16 @@ describe('add-vertex button and doClick', () => {
     expect(ctx.map._undoStack.length).toBe(1)
   })
 
+  // Regression: lifecycle.js's shared crosshair.activate wiring calls this._placeAtCrossHair
+  // for every create mode — drawPointMode.js defines its own, but polygon/line only had
+  // doClick under a different name, so "Click Target" (Voice Control) silently no-opped.
+  test('_placeAtCrossHair aliases doClick — Voice Control\'s "Click Target" places a vertex too', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    ctx._placeAtCrossHair(state)
+    expect(state.polygon.coordinates[0][0]).toEqual([CENTER.lng, CENTER.lat])
+    expect(ctx.map._undoStack.length).toBe(1)
+  })
+
   test('does not finish a line via doClick while the geometry is invalid', () => {
     const { ctx, state } = setup(DrawLineMode)
     clickAt(ctx, state, 0, 0)

package/plugins/draw/src/adapters/maplibre/modes/drawMode/lifecycle.js

@@ -1,3 +1,5 @@
+import { stopIfGlobalAltKey } from '../../../../../../../src/utils/globalAltShortcuts.js'
+
 /**
  * Setup / teardown for the shared draw mode: binds the window/container/map event
  * handlers on entry and removes them on exit. Part of createDrawMode.
@@ -61,6 +63,10 @@ export const createLifecycle = ({ ParentMode, featureProp, excludeFeatureIdFromS
     this._listeners = [
       [window, 'keydown', this.keydownHandler],
       [window, 'keyup', this.keyupHandler],
+      // Capture phase (unlike keyupHandler above) so it runs before the event ever bubbles to
+      // useKeyboardShortcuts.js's app-wide listener — shadows global Alt+<key> shortcuts
+      // (src/utils/globalAltShortcuts.js) unconditionally while drawing.
+      [window, 'keyup', stopIfGlobalAltKey, { capture: true }],
       [window, 'click', this.vertexButtonClickHandler],
       [container, 'blur', this.blurHandler],
       [container, 'pointermove', this.pointermoveHandler],
@@ -71,14 +77,14 @@ export const createLifecycle = ({ ParentMode, featureProp, excludeFeatureIdFromS
       [map, 'draw.undo', this.undoHandler],
       [map, 'draw.interfacetypechange', this.interfaceTypeChangeHandler]
     ]
-    this._listeners.forEach(([t, e, h]) => t.addEventListener ? t.addEventListener(e, h) : t.on(e, h))
+    this._listeners.forEach(([target, eventName, handler, opts]) => target.addEventListener ? target.addEventListener(eventName, handler, opts) : target.on(eventName, handler))
 
     return state
   },
 
   onStop (state) {
     ParentMode.onStop.call(this, state)
-    this._listeners.forEach(([t, e, h]) => t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
+    this._listeners.forEach(([target, eventName, handler, opts]) => target.removeEventListener ? target.removeEventListener(eventName, handler, opts) : target.off(eventName, handler))
     // Don't leave a stale closure over this mode's state on the shared crossHair object once
     // it's gone — the next owner (e.g. interact re-enabling) assigns its own before this one
     // could ever be invoked again, but this avoids relying on that ordering.

package/plugins/draw/src/adapters/maplibre/modes/drawMode/lifecycle.test.js

@@ -50,6 +50,41 @@ describe('setup and crosshair', () => {
   })
 })
 
+describe('global Alt+<key> shortcut shadowing', () => {
+  test('Alt+Enter keyup stops propagation while drawing — never reaches the app-wide "highlight label at center" shortcut', () => {
+    setup(DrawPolygonMode)
+    const event = new KeyboardEvent('keyup', { key: 'Enter', altKey: true, cancelable: true, bubbles: true })
+    const stopSpy = jest.spyOn(event, 'stopPropagation')
+    window.dispatchEvent(event)
+    expect(stopSpy).toHaveBeenCalled()
+  })
+
+  test('Alt+Arrow keyup stops propagation too — never reaches the app-wide "highlight next label" shortcut', () => {
+    setup(DrawPolygonMode)
+    const event = new KeyboardEvent('keyup', { key: 'ArrowRight', altKey: true, cancelable: true, bubbles: true })
+    const stopSpy = jest.spyOn(event, 'stopPropagation')
+    window.dispatchEvent(event)
+    expect(stopSpy).toHaveBeenCalled()
+  })
+
+  test('a plain Enter keyup (no Alt) is left alone', () => {
+    setup(DrawPolygonMode)
+    const event = new KeyboardEvent('keyup', { key: 'Enter', altKey: false, cancelable: true, bubbles: true })
+    const stopSpy = jest.spyOn(event, 'stopPropagation')
+    window.dispatchEvent(event)
+    expect(stopSpy).not.toHaveBeenCalled()
+  })
+
+  test('the shadow listener is removed on onStop — Alt+Enter bubbles normally again', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.onStop(state)
+    const event = new KeyboardEvent('keyup', { key: 'Enter', altKey: true, cancelable: true, bubbles: true })
+    const stopSpy = jest.spyOn(event, 'stopPropagation')
+    window.dispatchEvent(event)
+    expect(stopSpy).not.toHaveBeenCalled()
+  })
+})
+
 describe('onStop', () => {
   test('mouse session: removes listeners, hides the crosshair and reports the final interface type', () => {
     const { ctx, state, marker, container } = setup(DrawPolygonMode, { interfaceType: 'mouse' })

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

@@ -7,17 +7,17 @@ import {
  * switching, rubber-band movement (with snapping) and blur. Part of createDrawMode.
  */
 export const createPointerHandlers = ({ ParentMode, getFeature, getCoords }) => ({
-  onTouchStart (state, e) {
+  onTouchStart (state, event) {
     this._setInterface(state, 'touch')
-    this.onMove(state, e)
+    this.onMove(state, event)
   },
 
-  onTouchEnd (state, e) {
+  onTouchEnd (state, event) {
     this._setInterface(state, 'touch')
-    this.onMove(state, e)
+    this.onMove(state, event)
   },
 
-  // The global interface type (e.g. switching to touch and panning via MoveControls)
+  // The global interface type (e.g. switching to touch and panning via MapControls)
   // can change mid-session without any touch/pointer/key event ever landing on the
   // map container, so this can't rely on onTouchStart/onPointerdown alone — refresh
   // the rubber band immediately rather than waiting for the next incidental 'move'.
@@ -25,37 +25,47 @@ export const createPointerHandlers = ({ ParentMode, getFeature, getCoords }) =>
   // draw_polygon/draw_line starts), so this must only show the crosshair for
   // touch/keyboard — same as onSetup/onMove — not unconditionally like touch's own
   // onTouchStart/onTouchEnd, or a mouse-driven session would flash it on every entry.
-  onInterfaceTypeChange (state, e) {
-    this._setInterface(state, e.interfaceType, ['touch', 'keyboard'].includes(e.interfaceType))
+  onInterfaceTypeChange (state, event) {
+    this._setInterface(state, event.interfaceType, ['touch', 'keyboard'].includes(event.interfaceType))
     this.onMove(state)
   },
 
-  onBlur (state, e) {
-    if (e.target !== state.container) {
+  onBlur (state, event) {
+    if (event.target !== state.container) {
       this._hideCrossHair(state)
     }
   },
 
-  onMouseMove (state, e) {
+  onMouseMove (state, event) {
     if (isSnapEnabled(state)) {
       const snap = getSnapInstance(this.map)
-      triggerSnapAtPoint(snap, this.map, e.point)
+      triggerSnapAtPoint(snap, this.map, event.point)
 
       const snappedLngLat = getSnapLngLat(snap)
       if (snappedLngLat) {
-        e = { ...e, lngLat: snappedLngLat }
+        event = { ...event, lngLat: snappedLngLat }
       }
     }
 
-    ParentMode.onMouseMove.call(this, state, e)
+    ParentMode.onMouseMove.call(this, state, event)
 
     // Fired after the parent updates the rubber band so the payload (and the live
     // invalid-stroke check driven by it) reflects the current cursor position.
     this.map.fire('draw.geometrychange', state.polygon || state.line)
   },
 
-  onMove (state) {
-    if (['touch', 'keyboard'].includes(state.interfaceType)) {
+  // The crosshair/rubber-band candidate normally only tracks the map centre for
+  // touch/keyboard interfaceType, since a real mouse cursor already drives it via
+  // onMouseMove. But Voice Control's simulated clicks report pointerType 'mouse' (so
+  // interfaceType never leaves 'mouse') and produce no mousemove at all — panning via
+  // MapControls while interfaceType is 'mouse' would otherwise leave the candidate
+  // stale. `map.on('move', ...)` fires this with the real MapLibre move event, whose
+  // `originalEvent` is only set for a live mouse/touch/wheel interaction (dragPan,
+  // scrollZoom, ...) — absent for a programmatic move like MapControls' panBy, which
+  // is exactly the case that needs this fallback.
+  onMove (state, event) {
+    const isProgrammaticMapMove = event?.type === 'move' && !event.originalEvent
+    if (['touch', 'keyboard'].includes(state.interfaceType) || isProgrammaticMapMove) {
       if (isSnapEnabled(state)) {
         triggerSnapAtCenter(getSnapInstance(this.map), this.map)
       }
@@ -85,14 +95,14 @@ export const createPointerHandlers = ({ ParentMode, getFeature, getCoords }) =>
     }
   },
 
-  onPointerdown (state, e) {
-    if (e.pointerType !== 'touch') {
+  onPointerdown (state, event) {
+    if (event.pointerType !== 'touch') {
       this._setInterface(state, 'mouse', false)
     }
   },
 
-  onPointermove (state, e) {
-    if (e.pointerType !== 'touch') {
+  onPointermove (state, event) {
+    if (event.pointerType !== 'touch') {
       this._hideCrossHair(state)
     }
   },

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

@@ -33,7 +33,7 @@ describe('touch and pointer interface', () => {
     clickAt(ctx, state, 0, 0)
     ctx.map.fire.mockClear()
     ctx.pointerupHandler({})
-    expect(firedWith(ctx.map, 'draw.vertexchange')).toEqual([{ numVertecies: 1 }])
+    expect(firedWith(ctx.map, 'draw.vertexchange')).toEqual([{ numVertices: 1 }])
   })
 
   test('blur away from the container hides the crosshair; blur on the container does not', () => {
@@ -44,7 +44,7 @@ describe('touch and pointer interface', () => {
     expect(marker.style.display).toBe('none')
   })
 
-  test('draw.interfacetypechange (e.g. switching to touch and panning via MoveControls mid-session) updates the interface and refreshes the rubber band immediately', () => {
+  test('draw.interfacetypechange (e.g. switching to touch and panning via MapControls mid-session) updates the interface and refreshes the rubber band immediately', () => {
     const { ctx, state } = setup(DrawPolygonMode)
     clickAt(ctx, state, 0, 0)
     ctx.map.fire('draw.interfacetypechange', { interfaceType: 'touch' })
@@ -116,6 +116,21 @@ describe('rubber band and snapping while moving', () => {
     expect(state.polygon.coordinates[0]).toEqual(before)
   })
 
+  test('a programmatic map move (e.g. MapControls panBy while Voice Control keeps interfaceType mouse) still tracks the rubber band to center', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    ctx.map.fire('move', { type: 'move' }) // no originalEvent — matches a programmatic move, unlike a real drag/scroll
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([CENTER.lng, CENTER.lat])
+  })
+
+  test('a real mouse-driven map move (dragPan/scrollZoom) still leaves the rubber band alone', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    const before = [...state.polygon.coordinates[0].map((c) => [...c])]
+    ctx.map.fire('move', { type: 'move', originalEvent: new MouseEvent('mousemove') })
+    expect(state.polygon.coordinates[0]).toEqual(before)
+  })
+
   test('map move in keyboard line mode with snap fires geometrychange with state.line', () => {
     const { ctx, state } = setup(DrawLineMode, { interfaceType: 'keyboard', getSnapEnabled: () => true })
     clickAt(ctx, state, 0, 0)

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

@@ -126,7 +126,7 @@ describe('undo via draw.undo event and reinitialisation', () => {
     expect(ctx._ctx.store.delete).toHaveBeenCalledWith([id])
     expect(state.polygon.id).toBe(id)
     expect(state.currentVertexPosition).toBe(0)
-    expect(firedWith(ctx.map, 'draw.vertexchange').pop()).toEqual({ numVertecies: 1 })
+    expect(firedWith(ctx.map, 'draw.vertexchange').pop()).toEqual({ numVertices: 1 })
   })
 
   test('undoing the only line vertex restarts draw_line with the same feature id', () => {

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

@@ -62,8 +62,8 @@ const pointHandlers = {
   // after the re-id (not before) so it writes to the feature under its final id — the
   // resolver itself is injected by the adapter via changeMode's options so this mode has
   // no direct dependency on symbolRegistry/mapProvider.
-  onCreate (state, e) {
-    const feature = e.features[0]
+  onCreate (state, event) {
+    const feature = event.features[0]
     this._ctx.api.delete(feature.id)
     feature.id = state.featureId
     this._ctx.api.add(feature, { userProperties: true })
@@ -78,52 +78,58 @@ const pointHandlers = {
   // update (nothing to rubber-band for a single coordinate). Bound to MapLibre's own 'move'
   // event by createLifecycle, so this fires continuously while panning; also called
   // explicitly below wherever the interface type switches to touch/keyboard, so the
-  // indicator appears immediately rather than waiting for the first pan.
-  onMove (state) {
-    if (['touch', 'keyboard'].includes(state.interfaceType) && isSnapEnabled(state)) {
+  // indicator appears immediately rather than waiting for the first pan. Also runs for a
+  // programmatic move with interfaceType still 'mouse' — Voice Control's simulated clicks
+  // (e.g. on MapControls) report pointerType 'mouse' and produce no mousemove, so without
+  // this the indicator would never refresh while panning that way; a real map 'move' event's
+  // `originalEvent` is only set for a live mouse/touch/wheel interaction, not a programmatic
+  // one like MapControls' panBy.
+  onMove (state, event) {
+    const isProgrammaticMapMove = event?.type === 'move' && !event.originalEvent
+    if ((['touch', 'keyboard'].includes(state.interfaceType) || isProgrammaticMapMove) && isSnapEnabled(state)) {
       triggerSnapAtCenter(getSnapInstance(this.map), this.map)
     }
   },
 
-  onBlur (state, e) {
-    if (e.target !== state.container) { this._hideCrossHair(state) }
+  onBlur (state, event) {
+    if (event.target !== state.container) { this._hideCrossHair(state) }
   },
 
-  onPointerdown (state, e) {
-    if (e.pointerType !== 'touch') { this._setInterface(state, 'mouse', false) }
+  onPointerdown (state, event) {
+    if (event.pointerType !== 'touch') { this._setInterface(state, 'mouse', false) }
   },
 
-  onPointermove (state, e) {
-    if (e.pointerType !== 'touch') { this._hideCrossHair(state) }
+  onPointermove (state, event) {
+    if (event.pointerType !== 'touch') { this._hideCrossHair(state) }
   },
 
   onTouchStart (state) { this._setInterface(state, 'touch'); this.onMove(state) },
   onTouchEnd (state) { this._setInterface(state, 'touch'); this.onMove(state) },
 
-  onInterfaceTypeChange (state, e) {
-    this._setInterface(state, e.interfaceType, ['touch', 'keyboard'].includes(e.interfaceType))
+  onInterfaceTypeChange (state, event) {
+    this._setInterface(state, event.interfaceType, ['touch', 'keyboard'].includes(event.interfaceType))
     this.onMove(state)
   },
 
   // Continuously track a snap candidate under the real cursor (mouse only — touch/keyboard
   // placement tracks the crosshair instead, triggered once at commit time in _placeAtCrossHair).
-  onMouseMove (state, e) {
+  onMouseMove (state, event) {
     if (isSnapEnabled(state)) {
-      triggerSnapAtPoint(getSnapInstance(this.map), this.map, e.point)
+      triggerSnapAtPoint(getSnapInstance(this.map), this.map, event.point)
     }
   },
 
-  onVertexButtonClick (state, e) {
-    if (state.addVertexButtonId && !this.map._undoInProgress && e.target.closest(`#${state.addVertexButtonId}`)) {
+  onVertexButtonClick (state, event) {
+    if (state.addVertexButtonId && !this.map._undoInProgress && event.target.closest(`#${state.addVertexButtonId}`)) {
       this._placeAtCrossHair(state)
     }
   },
 
-  onKeydown (state, e) {
+  onKeydown (state, event) {
     if (document.activeElement !== state.container) { return }
-    if (e.key === 'Escape') { e.preventDefault(); return }
-    if (e.key === 'Enter') { state.isActive = true }
-    if (!INTERFACE_KEYS.has(e.key)) { return }
+    if (event.key === 'Escape') { event.preventDefault(); return }
+    if (event.key === 'Enter') { state.isActive = true }
+    if (!INTERFACE_KEYS.has(event.key)) { return }
     this._setInterface(state, 'keyboard')
     this.onMove(state)
   },
@@ -132,26 +138,26 @@ const pointHandlers = {
   // Escape a pending placement without ever focusing the map, and keyboard users placing via
   // crosshair can commit with Enter. A point has no partial ring to reinitialize the way
   // line/polygon's Escape does, so Escape always routes to draw.cancel, keyboard-focused or not.
-  onKeyup (state, e) {
-    if (e.key === 'Escape') {
+  onKeyup (state, event) {
+    if (event.key === 'Escape') {
       this.map.fire('draw.cancel')
       return
     }
     if (document.activeElement !== state.container) { return }
-    if (!INTERFACE_KEYS.has(e.key)) { return }
+    if (!INTERFACE_KEYS.has(event.key)) { return }
     this._setInterface(state, 'keyboard')
     this.onMove(state)
-    if (e.key === 'Enter' && state.isActive) { this._placeAtCrossHair(state) }
+    if (event.key === 'Enter' && state.isActive) { this._placeAtCrossHair(state) }
   },
 
-  onClick (state, e) {
-    if (e.originalEvent.button > 0 || e.originalEvent.target !== this.map.getCanvas()) { return }
+  onClick (state, event) {
+    if (event.originalEvent.button > 0 || event.originalEvent.target !== this.map.getCanvas()) { return }
     const snap = getSnapInstance(this.map)
     const snapped = isSnapEnabled(state) && isSnapActive(snap) ? getSnapLngLat(snap) : null
-    this._commit(state, snapped || e.lngLat)
+    this._commit(state, snapped || event.lngLat)
   },
 
-  onTap (state, e) { this.onClick(state, e) },
+  onTap (state, event) { this.onClick(state, event) },
 
   // Touch "Add point" button and keyboard Enter both place at the crosshair (map centre),
   // snapping to a candidate under it if one exists. Deliberately bypasses onClick — its

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

@@ -16,15 +16,15 @@ const createMap = () => {
     getCenter: () => ({ ...CENTER }),
     project: jest.fn(() => ({ x: 50, y: 50 })),
     unproject: jest.fn(() => ({ ...CENTER })),
-    fire: jest.fn(function (type, e) { (listeners[type] ?? []).forEach((h) => h(e)) }),
-    on: jest.fn((type, h) => { (listeners[type] ??= []).push(h) }),
-    off: jest.fn((type, h) => { listeners[type] = (listeners[type] ?? []).filter((x) => x !== h) })
+    fire: jest.fn(function (type, event) { (listeners[type] ?? []).forEach((handler) => handler(event)) }),
+    on: jest.fn((type, handler) => { (listeners[type] ??= []).push(handler) }),
+    off: jest.fn((type, handler) => { listeners[type] = (listeners[type] ?? []).filter((x) => x !== handler) })
   }
 }
 
 const contexts = []
-const removeListeners = (ctx) => ctx._listeners?.forEach(([t, e, h]) =>
-  t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
+const removeListeners = (ctx) => ctx._listeners?.forEach(([target, eventName, handler]) =>
+  target.removeEventListener ? target.removeEventListener(eventName, handler) : target.off(eventName, handler))
 
 const createModeContext = () => {
   const map = createMap()
@@ -90,7 +90,7 @@ const clickEvent = (ctx, lng, lat, overrides = {}) => ({
   originalEvent: { button: 0, target: ctx.map.getCanvas(), ...overrides }
 })
 
-const firedWith = (map, type) => map.fire.mock.calls.filter(([t]) => t === type).map(([, e]) => e)
+const firedWith = (map, type) => map.fire.mock.calls.filter(([eventType]) => eventType === type).map(([, event]) => event)
 
 afterEach(() => {
   contexts.splice(0).forEach(removeListeners)
@@ -436,6 +436,24 @@ describe('DrawPointMode', () => {
       expect(snap.snapToClosestPoint).not.toHaveBeenCalled()
     })
 
+    // Voice Control's simulated clicks report pointerType 'mouse' (interfaceType never
+    // leaves 'mouse') and produce no mousemove, so panning via MapControls needs its own
+    // fallback: a real map 'move' event with no originalEvent (a programmatic move, unlike a
+    // live mouse drag/scroll) still refreshes the indicator even with interfaceType 'mouse'.
+    it('a programmatic map move still refreshes the indicator while interfaceType is mouse', () => {
+      const { ctx, state } = setup()
+      const snap = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+      ctx.map._snapInstance = snap
+      state.getSnapEnabled = () => true
+
+      ctx.onMove(state, { type: 'move' })
+      expect(snap.snapToClosestPoint).toHaveBeenCalledWith({ point: expect.any(Object), lngLat: CENTER, _explicit: true })
+
+      snap.snapToClosestPoint.mockClear()
+      ctx.onMove(state, { type: 'move', originalEvent: new MouseEvent('mousemove') })
+      expect(snap.snapToClosestPoint).not.toHaveBeenCalled()
+    })
+
     it('switching to touch or keyboard shows the snap indicator immediately, not just on the first pan', () => {
       const snap = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
 

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

@@ -1,4 +1,5 @@
 import { ARROW_KEYS, ARROW_OFFSETS, isInteractiveElementFocused, isUndoShortcut, sharedKeyboardHandlers } from '../../utils/keyboardShortcuts.js'
+import { stopIfGlobalAltKey } from '../../../../../../../src/utils/globalAltShortcuts.js'
 
 /**
  * Keyboard interaction for the point-edit mode: arrow-key/Shift+arrow nudge and Cmd/Ctrl+Z
@@ -10,7 +11,7 @@ import { ARROW_KEYS, ARROW_OFFSETS, isInteractiveElementFocused, isUndoShortcut,
 export const keyboardHandlers = {
   ...sharedKeyboardHandlers,
 
-  onKeydown (state, e) {
+  onKeydown (state, event) {
     if (isInteractiveElementFocused(state)) {
       return
     }
@@ -18,30 +19,30 @@ export const keyboardHandlers = {
     state.interfaceType = 'keyboard'
     this.hideTouchPointIndicator(state)
 
-    if (e.key === ' ') {
+    if (event.key === ' ') {
       // Prevent the page from scrolling; there's nothing to select, the point already is.
-      e.preventDefault()
+      event.preventDefault()
       return
     }
-    if (ARROW_KEYS.has(e.key)) {
-      this.handleArrowKey(state, e)
+    if (ARROW_KEYS.has(event.key)) {
+      this.handleArrowKey(state, event)
       return
     }
-    if (isUndoShortcut(e)) {
-      this.handleUndoShortcut(state, e)
+    if (isUndoShortcut(event)) {
+      this.handleUndoShortcut(state, event)
     }
   },
 
   // A plain or Shift+arrow nudges the point (Shift's finer-step-vs-coarse-step distinction
   // lives in pointOperations.js's getOffset). Alt+arrow is left unhandled — nothing to
   // navigate to with a single coordinate.
-  handleArrowKey (state, e) {
-    e.preventDefault()
-    e.stopPropagation()
-    this.movePointByKey(state, e)
+  handleArrowKey (state, event) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.movePointByKey(state, event)
   },
 
-  movePointByKey (state, e) {
+  movePointByKey (state, event) {
     const currentCoord = this.getPointCoord(state)
     if (!currentCoord) {
       return
@@ -52,25 +53,26 @@ export const keyboardHandlers = {
       state._keyboardMoveStartPosition = [...currentCoord]
     }
 
-    this.movePoint(state, this._keyboardMoveTarget(state, e, currentCoord))
+    this.movePoint(state, this._keyboardMoveTarget(state, event, currentCoord))
   },
 
   // Resolve the destination coordinate for a keyboard nudge, applying or breaking snap —
-  // delegates to the shared resolver (utils/snapMovement.js) also used by MoveControls'
+  // delegates to the shared resolver (utils/snapMovement.js) also used by MapControls'
   // nudgePointByDelta, 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))
+  _keyboardMoveTarget (state, event, currentCoord) {
+    const [dx, dy] = ARROW_OFFSETS[event.key]
+    return this.resolveSnapTarget(state, dx, dy, currentCoord, () => this.getNewCoord(state, event))
   },
 
-  onKeyup (state, e) {
+  onKeyup (state, event) {
     if (isInteractiveElementFocused(state)) {
       return
     }
 
     state.interfaceType = 'keyboard'
-    if (ARROW_KEYS.has(e.key)) {
-      e.stopPropagation()
+    stopIfGlobalAltKey(event)
+    if (ARROW_KEYS.has(event.key)) {
+      event.stopPropagation()
 
       // Push undo for the whole held-key move sequence as one step
       if (state._keyboardMoveStartPosition) {

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

@@ -39,7 +39,7 @@ export const pointOperations = {
   },
 
   // 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
+  // MapControls' 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) {

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

@@ -89,10 +89,10 @@ export const EditPointMode = {
     // 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
+    // numVertices (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 })
+    this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: 0, numVertices: 1 })
 
     return state
   },

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

@@ -33,9 +33,9 @@ describe('onSetup / onStop lifecycle', () => {
 
   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
+    // numVertices (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).toHaveBeenCalledWith('draw.vertexselection', { index: 0, numVertices: 1 })
     expect(map.fire).not.toHaveBeenCalledWith('draw.vertexchange', expect.anything())
   })
 
@@ -124,7 +124,7 @@ describe('scale, move and interface-type events', () => {
     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', () => {
+  test('draw.nudgevertex moves the point and repositions the touch target — the inbound bridge for MapControls.mapProvider.activeMoveTarget', () => {
     jest.useFakeTimers()
     const { state, map } = createHarness(undefined, { interfaceType: 'touch' })
     jest.runAllTimers() // flush onSetup's deferred initial touch-target positioning

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

@@ -29,6 +29,37 @@ export const getCoords = (feature) => {
   }
 }
 
+/**
+ * Get the midpoint coordinate between every pair of adjacent vertices, one per segment
+ * boundary — closed rings (Polygon) also include the last→first midpoint, open lines
+ * (LineString) don't wrap around. Pure function of the geometry alone (no live mode state),
+ * so both the live mode (vertexQueries.js's getMidpoints) and read-only consumers (e.g. the
+ * adapter's getVertexItems) share one implementation.
+ *
+ * @param {Object} feature - GeoJSON geometry object
+ * @returns {Array<[number, number]>} Flat array of midpoint coordinates, same ordering/segment
+ *   boundaries as getCoords/getRingSegments
+ */
+export const getMidpointCoords = (feature) => {
+  const coords = getCoords(feature)
+  const segments = getRingSegments(feature)
+  if (!coords.length || !segments.length) {
+    return []
+  }
+  const midpoints = []
+  for (const seg of segments) {
+    const count = seg.closed ? seg.length : seg.length - 1
+    for (let i = 0; i < count; i++) {
+      const idx = seg.start + i
+      const nextIdx = seg.start + ((i + 1) % seg.length)
+      const [x1, y1] = coords[idx]
+      const [x2, y2] = coords[nextIdx]
+      midpoints.push([(x1 + x2) / 2, (y1 + y2) / 2])
+    }
+  }
+  return midpoints
+}
+
 /**
  * Get segment metadata for multi-ring/multi-part geometries.
  * Each segment represents a ring (for Polygon) or part (for Multi*).

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

@@ -1,5 +1,5 @@
 import {
-  getCoords, getRingSegments, getSegmentForIndex, getModifiableCoords, coordPathToFlatIndex
+  getCoords, getMidpointCoords, getRingSegments, getSegmentForIndex, getModifiableCoords, coordPathToFlatIndex
 } from './geometryHelpers.js'
 
 const POLYGON = () => ({ type: 'Polygon', coordinates: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]] })
@@ -26,6 +26,13 @@ describe('geometryHelpers', () => {
     expect(getRingSegments(null)).toEqual([])
   })
 
+  test('getMidpointCoords finds the midpoint between each adjacent pair — no wrap for an open line, wrapping last→first for a closed ring', () => {
+    expect(getMidpointCoords(LINE())).toEqual([[5, 0], [10, 5]])
+    expect(getMidpointCoords(POLYGON())).toHaveLength(5) // closed ring: wraps, including the duplicate closing point
+    expect(getMidpointCoords({ type: 'Point', coordinates: [0, 0] })).toEqual([])
+    expect(getMidpointCoords(null)).toEqual([])
+  })
+
   test('getSegmentForIndex finds the owning segment or returns null', () => {
     const segments = getRingSegments(POLYGON())
     expect(getSegmentForIndex(segments, 2)).toEqual({ segment: segments[0], localIdx: 2 })