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

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

@@ -35,8 +35,7 @@ export const EditVertexMode = {
       scale: options.scale ?? 1
     })
 
-    // Clear undo stack only on initial entry to edit mode for a feature
-    // Only clear if we're starting a new editing session (not already editing)
+    // Clear the undo stack only when starting a new editing session for this feature.
     if (this.map._lastEditFeatureId !== state.featureId) {
       this.map._undoStack?.clear()
       this.map._lastEditFeatureId = state.featureId
@@ -46,7 +45,7 @@ export const EditVertexMode = {
     const feature = this.getFeature(state.featureId)
     state.featureType = feature?.type
 
-    state.vertecies = this.getVerticies(state.featureId)
+    state.vertices = this.getVertices(state.featureId)
     state.midpoints = this.getMidpoints(state.featureId)
     this.setupEventListeners(state)
 
@@ -59,7 +58,7 @@ export const EditVertexMode = {
 
     // Show touch target if entering with a selected vertex on touch interface
     if (state.interfaceType === 'touch' && state.selectedVertexIndex >= 0 && state.selectedVertexType === 'vertex') {
-      const vertex = state.vertecies[state.selectedVertexIndex]
+      const vertex = state.vertices[state.selectedVertexIndex]
       if (vertex) {
         setTimeout(() => {
           this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
@@ -78,12 +77,16 @@ export const EditVertexMode = {
     const handlers = this.handlers = buildEditModeHandlers(this, state, {
       nudge: this.onNudgeVertex,
       selectionchange: this.onSelectionChange,
-      update: this.onUpdate
+      update: this.onUpdate,
+      selectvertex: this.onSelectVertex,
+      insertvertexatmidpoint: this.onInsertVertexAtMidpoint
     })
 
     bindEditModeListeners(state, this.map, handlers)
     this.map.on('draw.selectionchange', handlers.selectionchange)
     this.map.on('draw.update', handlers.update)
+    this.map.on(CUSTOM_DRAW_EVENTS.SELECT_VERTEX, handlers.selectvertex)
+    this.map.on(CUSTOM_DRAW_EVENTS.INSERT_VERTEX_AT_MIDPOINT, handlers.insertvertexatmidpoint)
   },
 
   applyVertexSelection (state, options) {
@@ -92,7 +95,7 @@ export const EditVertexMode = {
       this.clearSelectedCoordinates()
       state.feature.changed()
       this._ctx.store.render()
-      this.updateMidpoint(state.midpoints[options.selectedVertexIndex - state.vertecies.length])
+      this.updateMidpoint(state.midpoints[options.selectedVertexIndex - state.vertices.length])
       return
     }
     if (options.selectedVertexIndex === -1) {
@@ -104,13 +107,12 @@ export const EditVertexMode = {
   },
 
   onSelectionChange (state, event) {
-    // Refresh vertex list so numVertecies reflects the latest geometry (e.g. after midpoint insertion)
+    // Refresh vertex list so numVertices reflects the latest geometry (e.g. after midpoint insertion)
     this.syncVertices(state)
 
     const vertexCoord = event.points[event.points.length - 1]?.geometry.coordinates
 
-    // Only update selectedVertexIndex from event if not keyboard mode AND event has valid vertex
-    // For keyboard mode or when we have coordPath, trust the existing selectedVertexIndex
+    // For keyboard mode or when coordPath is set, trust the existing selectedVertexIndex.
     if (state.interfaceType !== 'keyboard' && vertexCoord && !state.coordPath) {
       // No coordPath available - need to search for vertex by coordinates
       const geom = event.features[0]?.geometry
@@ -123,11 +125,11 @@ export const EditVertexMode = {
 
     this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, {
       index: state.selectedVertexType === 'vertex' ? state.selectedVertexIndex : -1,
-      numVertecies: state.vertecies.length
+      numVertices: state.vertices.length
     })
 
     // Use vertex from event if available, otherwise fall back to state
-    const vertex = vertexCoord || (state.selectedVertexIndex >= 0 ? state.vertecies[state.selectedVertexIndex] : null)
+    const vertex = vertexCoord || (state.selectedVertexIndex >= 0 ? state.vertices[state.selectedVertexIndex] : null)
     this.updateTouchVertexTarget(state, vertex ? scalePoint(this.map.project(vertex), state.scale) : null)
   },
 
@@ -137,13 +139,13 @@ export const EditVertexMode = {
 
   onInterfaceTypeChange (state, event) {
     state.interfaceType = event.interfaceType
-    const vertex = state.selectedVertexIndex >= 0 ? state.vertecies[state.selectedVertexIndex] : null
+    const vertex = state.selectedVertexIndex >= 0 ? state.vertices[state.selectedVertexIndex] : null
     this.updateTouchVertexTarget(state, vertex ? scalePoint(this.map.project(vertex), state.scale) : null)
   },
 
   onUpdate (state) {
-    const prev = new Set(state.vertecies.map(coordinate => JSON.stringify(coordinate)))
-    if (prev.size === state.vertecies.length) {
+    const prev = new Set(state.vertices.map(coordinate => JSON.stringify(coordinate)))
+    if (prev.size === state.vertices.length) {
       return
     }
     // Duplicate coordinates exist (e.g. a self-touching ring). Comparing the list
@@ -153,26 +155,48 @@ export const EditVertexMode = {
   },
 
   onMove (state) {
-    const vertex = state.vertecies[state.selectedVertexIndex]
+    const vertex = state.vertices[state.selectedVertexIndex]
     if (vertex) {
       this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
     }
   },
 
-  // Inbound signal from MaplibreDrawAdapter.nudgeSelectedVertex — bridges into the
-  // running mode the same way onInterfaceTypeChange does, since the adapter has no
-  // direct reference to this mode's live state. Unlike OL (where setState's shared
-  // onUpdate hook repositions the touch target for any vertex move), moveVertex
-  // here has no equivalent hook, so the reposition has to happen explicitly —
-  // same as onMove/onSelectionChange/onInterfaceTypeChange already do.
+  // Inbound signal from MaplibreDrawAdapter.nudgeSelectedVertex — bridges into the running
+  // mode since the adapter has no direct reference to its live state.
   onNudgeVertex (state, event) {
     this.nudgeVertexByDelta(state, event.dx, event.dy, event.isLargeStep)
-    const vertex = state.vertecies[state.selectedVertexIndex]
+    const vertex = state.vertices[state.selectedVertexIndex]
     if (vertex) {
       this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
     }
   },
 
+  // Inbound signal from MaplibreDrawAdapter.selectVertex — previews a vertex/midpoint by flat
+  // index (no geometry change) for the spatial listbox's roving move.
+  onSelectVertex (state, event) {
+    if (!state.vertices?.length) { // lazy-populate guard, same as startKeyboardSelection
+      state.vertices = this.getVertices(state.featureId)
+      state.midpoints = this.getMidpoints(state.featureId)
+    }
+    const type = event.index < state.vertices.length ? 'vertex' : 'midpoint'
+    this.changeMode(state, {
+      selectedVertexIndex: event.index,
+      selectedVertexType: type,
+      ...(type === 'vertex' && { coordPath: this.getCoordPath(state, event.index) })
+    })
+  },
+
+  // Inbound signal from MaplibreDrawAdapter.insertVertexAtMidpoint — commits a new vertex at
+  // midpoint `event.index` for the spatial listbox's confirm, landing exactly on the midpoint
+  // (no offset), same as touchHandlers.js's onTap does for a midpoint tap.
+  onInsertVertexAtMidpoint (state, event) {
+    if (!state.vertices?.length) {
+      state.vertices = this.getVertices(state.featureId)
+      state.midpoints = this.getMidpoints(state.featureId)
+    }
+    this.insertVertex({ ...state, selectedVertexIndex: event.index, selectedVertexType: 'midpoint' })
+  },
+
   onButtonClick (state, event) {
     if (event.target.closest(`#${state.deleteVertexButtonId}`) && state.selectedVertexType === 'vertex') {
       this.deleteVertex(state)
@@ -200,6 +224,8 @@ export const EditVertexMode = {
     const handlers = this.handlers
     this.map.off('draw.selectionchange', handlers.selectionchange)
     this.map.off('draw.update', handlers.update)
+    this.map.off(CUSTOM_DRAW_EVENTS.SELECT_VERTEX, handlers.selectvertex)
+    this.map.off(CUSTOM_DRAW_EVENTS.INSERT_VERTEX_AT_MIDPOINT, handlers.insertvertexatmidpoint)
     unbindEditModeListeners(state, this.map, handlers)
     this.hideTouchVertexIndicator(state)
   }

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

@@ -1,4 +1,5 @@
 import { createHarness, POLYGON } from './editVertexMode/__helpers__/harness.js'
+import { CUSTOM_DRAW_EVENTS } from '../drawEvents.js'
 
 /**
  * Tests for EditVertexMode's own methods: setup/teardown lifecycle, selection/scale/update
@@ -12,7 +13,7 @@ describe('onSetup / onStop lifecycle', () => {
     const { ctx, state, map } = createHarness()
     expect(state.featureId).toBe('feat-1')
     // Real PolygonFeature stores rings without the duplicate closing coordinate
-    expect(state.vertecies).toHaveLength(4)
+    expect(state.vertices).toHaveLength(4)
     expect(state.midpoints).toHaveLength(4)
     expect(map._lastEditFeatureId).toBe('feat-1')
     expect(map._drawEditContainer).toBe(state.container)
@@ -73,7 +74,7 @@ describe('selection, scale and update events', () => {
     const geom = ctx.getFeature('feat-1').toGeoJSON().geometry
     ctx.onSelectionChange(state, { points: [{ geometry: { coordinates: [10, 0] } }], features: [{ geometry: geom }] })
     expect(state.selectedVertexIndex).toBe(1)
-    expect(map.fire).toHaveBeenCalledWith('draw.vertexselection', expect.objectContaining({ numVertecies: 4 }))
+    expect(map.fire).toHaveBeenCalledWith('draw.vertexselection', expect.objectContaining({ numVertices: 4 }))
 
     state.coordPath = '0.2'
     state.selectedVertexIndex = 2
@@ -101,14 +102,14 @@ describe('selection, scale and update events', () => {
     ctx.onInterfaceTypeChange({ ...state, selectedVertexIndex: -1 }, { interfaceType: 'mouse' })
   })
 
-  test('draw.nudgevertex moves the selected vertex and repositions the touch target — the inbound bridge for MoveControls.mapProvider.activeMoveTarget', () => {
+  test('draw.nudgevertex moves the selected vertex and repositions the touch target — the inbound bridge for MapControls.mapProvider.activeMoveTarget', () => {
     jest.useFakeTimers()
     const { state, map } = createHarness(POLYGON(), { interfaceType: 'touch', selectedVertexIndex: 0, selectedVertexType: 'vertex' })
     jest.runAllTimers() // flush onSetup's deferred initial touch-target positioning
-    const before = [...state.vertecies[0]]
+    const before = [...state.vertices[0]]
     const targetBefore = { top: state.touchVertexTarget.style.top, left: state.touchVertexTarget.style.left }
     map.fire('draw.nudgevertex', { dx: 1, dy: 0, isLargeStep: true })
-    expect(state.vertecies[0]).not.toEqual(before)
+    expect(state.vertices[0]).not.toEqual(before)
     expect({ top: state.touchVertexTarget.style.top, left: state.touchVertexTarget.style.left }).not.toEqual(targetBefore)
   })
 
@@ -120,7 +121,7 @@ describe('selection, scale and update events', () => {
   test('onUpdate re-selects a changed vertex only when the vertex count is ambiguous', () => {
     const { ctx, state } = createHarness()
     ctx.onUpdate(state) // unique coords → no change
-    state.vertecies = [[0, 0], [0, 0], [1, 1]]
+    state.vertices = [[0, 0], [0, 0], [1, 1]]
     ctx.onUpdate(state)
     expect(state.selectedVertexIndex).toBe(-1)
   })
@@ -158,3 +159,70 @@ describe('move, button and changeMode routing', () => {
     expect(api.changeMode).not.toHaveBeenCalled()
   })
 })
+
+// onSelectVertex/onInsertVertexAtMidpoint bridge MaplibreDrawAdapter.selectVertex/
+// insertVertexAtMidpoint into the running mode (see drawEvents.js's SELECT_VERTEX/
+// INSERT_VERTEX_AT_MIDPOINT) for the shared spatial listbox.
+describe('onSelectVertex / onInsertVertexAtMidpoint (spatial listbox bridge)', () => {
+  test('registers the select-vertex/insert-vertex-at-midpoint listeners on setup', () => {
+    const { map } = createHarness()
+    expect(map.on).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.SELECT_VERTEX, expect.any(Function))
+    expect(map.on).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.INSERT_VERTEX_AT_MIDPOINT, expect.any(Function))
+  })
+
+  test('onSelectVertex moves the cursor to a real vertex, including its coordPath', () => {
+    const { ctx, state } = createHarness()
+    const changeModeSpy = jest.spyOn(ctx, 'changeMode')
+    ctx.onSelectVertex(state, { index: 2 })
+    expect(changeModeSpy).toHaveBeenCalledWith(state, {
+      selectedVertexIndex: 2,
+      selectedVertexType: 'vertex',
+      coordPath: expect.any(String)
+    })
+  })
+
+  test('onSelectVertex moves the cursor to a midpoint, without a coordPath', () => {
+    const { ctx, state } = createHarness()
+    const changeModeSpy = jest.spyOn(ctx, 'changeMode')
+    const midpointIndex = state.vertices.length
+    ctx.onSelectVertex(state, { index: midpointIndex })
+    expect(changeModeSpy).toHaveBeenCalledWith(state, {
+      selectedVertexIndex: midpointIndex,
+      selectedVertexType: 'midpoint'
+    })
+  })
+
+  test('onSelectVertex lazily (re)populates vertices/midpoints when not already cached', () => {
+    const { ctx, state } = createHarness()
+    state.vertices = []
+    state.midpoints = []
+    const changeModeSpy = jest.spyOn(ctx, 'changeMode')
+    ctx.onSelectVertex(state, { index: 0 })
+    expect(state.vertices.length).toBeGreaterThan(0)
+    expect(changeModeSpy).toHaveBeenCalled()
+  })
+
+  test('onInsertVertexAtMidpoint commits a new vertex exactly at the midpoint — no directional offset', () => {
+    const { ctx, state } = createHarness()
+    const midpointFlatIndex = state.vertices.length // first midpoint, between vertex 0 and 1
+    const expectedCoord = state.midpoints[0]
+    ctx.onInsertVertexAtMidpoint(state, { index: midpointFlatIndex })
+    const updated = ctx.getVertices(state.featureId)
+    expect(updated).toHaveLength(state.vertices.length + 1)
+    expect(updated[1]).toEqual(expectedCoord)
+  })
+
+  test('onInsertVertexAtMidpoint lazily (re)populates vertices/midpoints when not already cached', () => {
+    const { ctx, state } = createHarness()
+    state.vertices = []
+    state.midpoints = []
+    expect(() => ctx.onInsertVertexAtMidpoint(state, { index: 4 })).not.toThrow()
+  })
+
+  test('unregisters the select-vertex/insert-vertex-at-midpoint listeners on stop', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onStop(state)
+    expect(map.off).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.SELECT_VERTEX, expect.any(Function))
+    expect(map.off).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.INSERT_VERTEX_AT_MIDPOINT, expect.any(Function))
+  })
+})

package/plugins/draw/src/adapters/maplibre/utils/snapMovement.js

@@ -20,7 +20,7 @@ export const sharedSnapMovement = {
   },
 
   // Explicit-delta counterpart to getOffset, driven by a unit direction vector and
-  // MoveControls' own Precision toggle rather than a KeyboardEvent — used by
+  // MapControls' own Precision toggle rather than a KeyboardEvent — used by
   // nudgeVertexByDelta/nudgePointByDelta.
   getOffsetByDelta (coord, dx, dy, isLargeStep) {
     const pt = this.map.project(coord)
@@ -30,7 +30,7 @@ export const sharedSnapMovement = {
 
   // Resolves the destination coordinate for a nudge by (dx, dy) unit direction, applying
   // snap or breaking out of an already-active one — shared by the keyboard arrow-key path
-  // and MoveControls' explicit-delta path so both snap identically. dx/dy are only needed
+  // and MapControls' explicit-delta path so both snap identically. dx/dy are only needed
   // for the snap-escape offset; getCandidate computes the raw, un-snapped destination the
   // caller would otherwise have used.
   resolveSnapTarget (state, dx, dy, currentCoord, getCandidate) {

package/plugins/draw/src/adapters/openlayers/OLDrawAdapter.js

@@ -26,6 +26,7 @@ const DRAW_OUTLINE_STYLE_LAYER = 'stroke-inactive.cold'
  *   setInterfaceType(type)
  *   done() / cancel() / undo() / deleteVertex()
  *   nudgeSelectedVertex(dx, dy, isLargeStep)
+ *   getVertexItems() / selectVertex(index) / insertVertexAtMidpoint(index)
  *   get(id) / add(feature) / setStyle(id, properties) / delete(id) / deleteAll()
  *   setSnapEnabled(bool) / setSnapLayers(layers) / isSnapEnabled()
  *   setFeatureProperty(id, property, value) / setDrawingPreviewProperty(property, value)
@@ -77,6 +78,11 @@ export class OLDrawAdapter {
   deleteVertex () { this._manager.deleteVertex() }
   nudgeSelectedVertex (dx, dy, isLargeStep) { this._manager.nudgeSelectedVertex(dx, dy, isLargeStep) }
 
+  // Read-only vertex/midpoint coordinates for the shared spatial listbox.
+  getVertexItems () { return this._manager.getVertexItems() }
+  selectVertex (index) { this._manager.selectVertex(index) }
+  insertVertexAtMidpoint (index) { this._manager.insertVertexAtMidpoint(index) }
+
   // Record the current geometry validity so the draw mode can block finish gestures
   // (double-click / click-to-close) while the in-progress shape is invalid.
   setGeometryValid (valid) { this._manager._geometryValid = valid }

package/plugins/draw/src/adapters/openlayers/OLDrawAdapter.test.js

@@ -17,6 +17,9 @@ const fakeManager = () => ({
   undo: jest.fn(),
   deleteVertex: jest.fn(),
   nudgeSelectedVertex: jest.fn(),
+  getVertexItems: jest.fn(() => ({ vertices: [[0, 0]], midpoints: [] })),
+  selectVertex: jest.fn(),
+  insertVertexAtMidpoint: jest.fn(),
   setInvalid: jest.fn(),
   setDrawingPreviewProperty: jest.fn(),
   get: jest.fn(() => 'feature'),
@@ -136,6 +139,12 @@ test('remaining calls delegate straight through; setFeatureProperty is a deliber
   expect(manager.undo).toHaveBeenCalled()
   expect(manager.deleteVertex).toHaveBeenCalled()
   expect(manager.nudgeSelectedVertex).toHaveBeenCalledWith(1, 0, true)
+
+  expect(adapter.getVertexItems()).toEqual({ vertices: [[0, 0]], midpoints: [] })
+  adapter.selectVertex(2)
+  adapter.insertVertexAtMidpoint(3)
+  expect(manager.selectVertex).toHaveBeenCalledWith(2)
+  expect(manager.insertVertexAtMidpoint).toHaveBeenCalledWith(3)
 })
 
 // A directly-added Point skips draw_point's own icon-resolving drawend handler.

package/plugins/draw/src/adapters/openlayers/core/OLDrawManager.js

@@ -82,8 +82,8 @@ export class OLDrawManager {
     // Array.from, not [...handlers] — see the comment in utils/eventBus.js:
     // under a loose-mode Babel build (Docusaurus's docs site), spreading a Set
     // compiles to [].concat(handlers), which doesn't flatten it — it appends
-    // the whole Set as one non-function element, and h(...) throws.
-    if (handlers) { Array.from(handlers).forEach(h => h(detail)) }
+    // the whole Set as one non-function element, and handler(...) throws.
+    if (handlers) { Array.from(handlers).forEach(handler => handler(detail)) }
   }
 
   // --- Mode machine ---
@@ -146,6 +146,19 @@ export class OLDrawManager {
     this._modeInstance?.nudgeSelectedVertex?.(dx, dy, isLargeStep)
   }
 
+  // Read-only vertex/midpoint coordinates for the shared spatial listbox.
+  getVertexItems () {
+    return this._modeInstance?.getVertexItems?.() ?? { vertices: [], midpoints: [] }
+  }
+
+  selectVertex (index) {
+    this._modeInstance?.selectVertex?.(index)
+  }
+
+  insertVertexAtMidpoint (index) {
+    this._modeInstance?.insertVertexAtMidpoint?.(index)
+  }
+
   // Show/hide the dashed invalid stroke on the active draw sketch or edit feature.
   setInvalid (invalid) {
     this._modeInstance?.setInvalid?.(invalid)

package/plugins/draw/src/adapters/openlayers/core/OLDrawManager.test.js

@@ -14,7 +14,19 @@ jest.mock('../draw/DrawMode.js', () => ({
   createDrawMode: jest.fn(() => ({ destroy: jest.fn(), done: jest.fn(), cancel: jest.fn(), undo: jest.fn(), deleteVertex: jest.fn(), nudgeSelectedVertex: jest.fn(), setInterfaceType: jest.fn(), setInvalid: jest.fn(), setDrawingPreviewProperty: jest.fn() }))
 }))
 jest.mock('../edit/EditMode.js', () => ({
-  createEditMode: jest.fn(() => ({ destroy: jest.fn(), done: jest.fn(), cancel: jest.fn(), undo: jest.fn(), deleteVertex: jest.fn(), nudgeSelectedVertex: jest.fn(), setInterfaceType: jest.fn(), setInvalid: jest.fn() }))
+  createEditMode: jest.fn(() => ({
+    destroy: jest.fn(),
+    done: jest.fn(),
+    cancel: jest.fn(),
+    undo: jest.fn(),
+    deleteVertex: jest.fn(),
+    nudgeSelectedVertex: jest.fn(),
+    setInterfaceType: jest.fn(),
+    setInvalid: jest.fn(),
+    getVertexItems: jest.fn(() => ({ vertices: [[0, 0]], midpoints: [] })),
+    selectVertex: jest.fn(),
+    insertVertexAtMidpoint: jest.fn()
+  }))
 }))
 jest.mock('../point/editPointMode.js', () => ({
   createEditPointMode: jest.fn(() => ({ destroy: jest.fn(), done: jest.fn(), cancel: jest.fn(), undo: jest.fn(), deleteVertex: jest.fn(), nudgeSelectedVertex: jest.fn(), setInterfaceType: jest.fn(), setInvalid: jest.fn() }))
@@ -109,6 +121,8 @@ describe('mode machine', () => {
     const { manager } = setup()
     manager.done(); manager.undo(); manager.deleteVertex(); manager.nudgeSelectedVertex(1, 0, true); manager.setInterfaceType('touch'); manager.setInvalid(true) // no mode — no throw
     manager.setDrawingPreviewProperty('splitter', 'valid') // no mode — no throw
+    expect(manager.getVertexItems()).toEqual({ vertices: [], midpoints: [] }) // no mode — safe default
+    manager.selectVertex(1); manager.insertVertexAtMidpoint(1) // no mode — no throw
 
     await manager.changeMode('draw_polygon')
     const instance = createDrawMode.mock.results[0].value
@@ -135,6 +149,18 @@ describe('mode machine', () => {
     expect(instance.cancel).toHaveBeenCalled()
     expect(manager.getMode()).toBe('disabled')
   })
+
+  test('getVertexItems/selectVertex/insertVertexAtMidpoint delegate to the edit_vertex mode instance', async () => {
+    const { manager } = setup()
+    await manager.changeMode('edit_vertex', { featureId: 'f1' })
+    const instance = createEditMode.mock.results[0].value
+
+    expect(manager.getVertexItems()).toEqual({ vertices: [[0, 0]], midpoints: [] })
+    manager.selectVertex(2)
+    manager.insertVertexAtMidpoint(3)
+    expect(instance.selectVertex).toHaveBeenCalledWith(2)
+    expect(instance.insertVertexAtMidpoint).toHaveBeenCalledWith(3)
+  })
 })
 
 test('undo stack changes are published on the adapter bus; off unsubscribes', () => {

package/plugins/draw/src/adapters/openlayers/draw/DrawMode.test.js

@@ -275,7 +275,7 @@ describe('drawing lifecycle', () => {
     expect(changed).toHaveBeenCalled()
   })
 
-  test('setInterfaceType forwards to the draw input (e.g. DrawInit syncing MoveControls-driven interface changes mid-session)', () => {
+  test('setInterfaceType forwards to the draw input (e.g. DrawInit syncing MapControls-driven interface changes mid-session)', () => {
     const { mode, input } = setup('Polygon')
     mode.setInterfaceType('touch')
     expect(input.setInterfaceType).toHaveBeenCalledWith('touch')

package/plugins/draw/src/adapters/openlayers/draw/drawInput.js

@@ -1,4 +1,5 @@
 import { createVertexPlacement } from './vertexPlacement.js'
+import { stopIfGlobalAltKey } from '../../../../../../src/utils/globalAltShortcuts.js'
 
 const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
 
@@ -23,40 +24,47 @@ export const wireInputEvents = ({
   getInterfaceType, setInterfaceType, clearLastCoord,
   updateRubberbanding, placeVertex
 }) => {
+  // Normally gated to touch/keyboard — a real mouse cursor drives the candidate via its own
+  // pointermove instead. But Voice Control's simulated clicks report pointerType 'mouse' (so
+  // interfaceType never leaves 'mouse') and produce no pointermove at all, so panning via
+  // MapControls while interfaceType is 'mouse' would otherwise leave the candidate stale.
+  // olView.getAnimating() is also true for MapControls' own panBy/zoomIn/zoomOut (both use
+  // view.animate) but not for a live mouse drag (which sets the center directly, no
+  // animation) — the same fallback signal used below in onMapRender.
   const onCenterChange = () => {
-    if (getInterfaceType() !== 'mouse') {
+    if (getInterfaceType() !== 'mouse' || olView?.getAnimating()) {
       updateRubberbanding()
     }
   }
   olView?.on('change:center', onCenterChange)
 
-  const onKeydown = (e) => {
+  const onKeydown = (event) => {
     if (!container.contains(document.activeElement)) {
       return
     }
-    if (ARROW_KEYS.has(e.key)) {
+    if (ARROW_KEYS.has(event.key)) {
       setInterfaceType('keyboard')
       return
     }
-    if (e.key === 'Enter') {
-      e.preventDefault()
+    if (event.key === 'Enter') {
+      event.preventDefault()
       setInterfaceType('keyboard')
       placeVertex()
     }
-    if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault()
+    if (event.key === 'z' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
       onUndo?.()
     }
   }
 
-  const onButtonClick = (e) => {
-    if (addVertexButtonId && e.target.closest(`#${addVertexButtonId}`)) {
+  const onButtonClick = (event) => {
+    if (addVertexButtonId && event.target.closest(`#${addVertexButtonId}`)) {
       placeVertex()
     }
   }
 
-  const onPointerdown = (e) => {
-    if (e.pointerType !== 'touch') {
+  const onPointerdown = (event) => {
+    if (event.pointerType !== 'touch') {
       setInterfaceType('mouse')
       clearLastCoord()
     }
@@ -78,6 +86,9 @@ export const wireInputEvents = ({
   container.addEventListener('pointerdown', onPointerdown)
   container.addEventListener('touchstart', onTouchstart, { passive: true })
   container.addEventListener('pointermove', onPointerMove)
+  // Capture phase, separate from onKeydown above — shadows global Alt+<key> shortcuts
+  // (src/utils/globalAltShortcuts.js) unconditionally while drawing.
+  globalThis.addEventListener('keyup', stopIfGlobalAltKey, { capture: true })
 
   return {
     destroy () {
@@ -87,6 +98,7 @@ export const wireInputEvents = ({
       container.removeEventListener('pointerdown', onPointerdown)
       container.removeEventListener('touchstart', onTouchstart)
       container.removeEventListener('pointermove', onPointerMove)
+      globalThis.removeEventListener('keyup', stopIfGlobalAltKey, { capture: true })
     }
   }
 }
@@ -108,8 +120,7 @@ export const createDrawInput = ({ drawInteraction, options }) => {
     mapProvider,
     snap,
     canFinish,
-    canPlace,
-    getInterfaceType
+    canPlace
   })
 
   const map = drawInteraction.getMap()
@@ -121,7 +132,7 @@ export const createDrawInput = ({ drawInteraction, options }) => {
     olView,
     onUndo,
     getInterfaceType,
-    setInterfaceType: (t) => { interfaceType = t; applyCrossHairVisibility(crossHair, t) },
+    setInterfaceType: (type) => { interfaceType = type; applyCrossHairVisibility(crossHair, type) },
     clearLastCoord: placement.clearLastCoord,
     updateRubberbanding: placement.updateRubberbanding,
     placeVertex: placement.placeVertex
@@ -138,9 +149,12 @@ export const createDrawInput = ({ drawInteraction, options }) => {
     crossHair.activate = placement.placeVertex
   }
 
-  // change:center fires once when a keyboard pan animation starts; postrender tracks each frame.
+  // change:center fires once when an animated pan starts; postrender tracks each frame.
+  // getAnimating() alone (not also gated on interfaceType, unlike onCenterChange above) is
+  // enough here: it's already only true for an animated move, which is what needs a
+  // per-frame follow-up regardless of what interfaceType happens to be.
   const onMapRender = () => {
-    if (interfaceType !== 'mouse' && olView?.getAnimating()) {
+    if (olView?.getAnimating()) {
       placement.updateRubberbanding()
     }
   }
@@ -149,7 +163,7 @@ export const createDrawInput = ({ drawInteraction, options }) => {
   return {
     getInterfaceType,
     // Called when the global interface type changes without any pointer/touch/key
-    // event landing on the map container (e.g. panning via MoveControls after
+    // event landing on the map container (e.g. panning via MapControls after
     // switching to touch) — refresh the rubber band immediately rather than
     // waiting for the next incidental change:center/postrender event.
     setInterfaceType (type) {

package/plugins/draw/src/adapters/openlayers/draw/drawInput.test.js

@@ -56,6 +56,41 @@ test('arrow keys switch to the keyboard interface without placing', () => {
   expect(placement.placeVertex).not.toHaveBeenCalled()
 })
 
+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()
+    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()
+    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()
+    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 destroy — Alt+Enter bubbles normally again', () => {
+    const { input } = setup()
+    input.destroy()
+    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()
+  })
+})
+
 test('ctrl/cmd+z triggers undo', () => {
   const { container, onUndo } = setup()
   container.focus()
@@ -111,7 +146,26 @@ test('pointer moves and map pans update the rubber band except for the mouse int
   expect(mouse.placement.updateRubberbanding).not.toHaveBeenCalled()
 })
 
-test('setInterfaceType updates the interface and refreshes the rubber band immediately for non-mouse types, e.g. switching to touch and panning via MoveControls mid-session', () => {
+// Voice Control's simulated clicks report pointerType 'mouse' (interfaceType never leaves
+// 'mouse') and produce no real pointermove, so panning via MapControls needs its own
+// fallback: getAnimating() is true for MapControls' own panBy/zoomIn/zoomOut (both animate
+// the view) but not for a live mouse drag (which sets the center directly), so it's a safe
+// signal to also track even while interfaceType is 'mouse'.
+test('a programmatic move (e.g. MapControls panBy) still updates the rubber band while interfaceType is mouse', () => {
+  const { view, placement } = setup('mouse')
+  view.getAnimating.mockReturnValue(true)
+  view.emit('change:center')
+  expect(placement.updateRubberbanding).toHaveBeenCalledTimes(1)
+})
+
+test('postrender tracks an animated move for the mouse interface too, same as keyboard', () => {
+  const { map, view, placement } = setup('mouse')
+  view.getAnimating.mockReturnValue(true)
+  map.emit('postrender')
+  expect(placement.updateRubberbanding).toHaveBeenCalledTimes(1)
+})
+
+test('setInterfaceType updates the interface and refreshes the rubber band immediately for non-mouse types, e.g. switching to touch and panning via MapControls mid-session', () => {
   const { input, placement } = setup('mouse')
   input.setInterfaceType('touch')
   expect(input.getInterfaceType()).toBe('touch')