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

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

@@ -1,6 +1,7 @@
 import { getSnapInstance, clearSnapIndicator } from '../../utils/snapHelpers.js'
 import { ARROW_KEYS, ARROW_OFFSETS, isInteractiveElementFocused, isUndoShortcut, sharedKeyboardHandlers } from '../../utils/keyboardShortcuts.js'
 import { getCoords } from './geometryHelpers.js'
+import { stopIfGlobalAltKey } from '../../../../../../../src/utils/globalAltShortcuts.js'
 
 /**
  * Keyboard interaction for the vertex-edit mode: arrow-key vertex movement/insertion,
@@ -9,7 +10,7 @@ import { getCoords } from './geometryHelpers.js'
 export const keyboardHandlers = {
   ...sharedKeyboardHandlers,
 
-  onKeydown (state, e) {
+  onKeydown (state, event) {
     if (isInteractiveElementFocused(state)) {
       return
     }
@@ -17,40 +18,40 @@ export const keyboardHandlers = {
     state.interfaceType = 'keyboard'
     this.hideTouchVertexIndicator(state)
 
-    if (e.key === ' ') {
-      this.handleSpace(state, e)
+    if (event.key === ' ') {
+      this.handleSpace(state, event)
       return
     }
-    if (ARROW_KEYS.has(e.key) && state.selectedVertexIndex >= 0) {
-      this.handleArrowKey(state, e)
+    if (ARROW_KEYS.has(event.key) && state.selectedVertexIndex >= 0) {
+      this.handleArrowKey(state, event)
       return
     }
-    if (e.key === 'Escape') {
+    if (event.key === 'Escape') {
       this.changeMode(state, { isPanEnabled: true, selectedVertexIndex: -1, selectedVertexType: null })
       return
     }
-    if (isUndoShortcut(e)) {
-      this.handleUndoShortcut(state, e)
+    if (isUndoShortcut(event)) {
+      this.handleUndoShortcut(state, event)
     }
   },
 
   // Space always cancels the default; with no active selection it starts keyboard editing.
-  handleSpace (state, e) {
-    e.preventDefault()
+  handleSpace (state, event) {
+    event.preventDefault()
     if (state.selectedVertexIndex < 0) {
       this.startKeyboardSelection(state)
     }
   },
 
   // Alt+arrow steps to the next vertex/midpoint; a plain arrow nudges the selected vertex.
-  handleArrowKey (state, e) {
-    e.preventDefault()
-    e.stopPropagation()
-    if (e.altKey) {
-      this.updateVertex(state, e.key)
+  handleArrowKey (state, event) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (event.altKey) {
+      this.updateVertex(state, event.key)
       return
     }
-    this.moveVertexByKey(state, e)
+    this.moveVertexByKey(state, event)
   },
 
   // Space with no active selection: select the first vertex for keyboard editing.
@@ -59,11 +60,11 @@ export const keyboardHandlers = {
     if (snap) {
       clearSnapIndicator(snap, this.map)
     }
-    if (!state.vertecies?.length) {
-      state.vertecies = this.getVerticies(state.featureId)
+    if (!state.vertices?.length) {
+      state.vertices = this.getVertices(state.featureId)
       state.midpoints = this.getMidpoints(state.featureId)
     }
-    if (!state.vertecies?.length) {
+    if (!state.vertices?.length) {
       return
     }
     state.isPanEnabled = false
@@ -71,9 +72,9 @@ export const keyboardHandlers = {
   },
 
   // Arrow key with a selected vertex: insert (midpoint) or nudge the vertex, honouring snap.
-  moveVertexByKey (state, e) {
+  moveVertexByKey (state, event) {
     if (state.selectedVertexType === 'midpoint') {
-      this.insertVertex(state, e)
+      this.insertVertex(state, event)
       return
     }
 
@@ -89,25 +90,32 @@ export const keyboardHandlers = {
       state._keyboardMoveStartIndex = state.selectedVertexIndex
     }
 
-    this.moveVertex(state, this._keyboardMoveTarget(state, e, currentCoord))
+    this.moveVertex(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' 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))
+  // MapControls' nudgeVertexByDelta, so both snap identically.
+  _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) && state.selectedVertexIndex >= 0) {
-      e.stopPropagation()
+    // Only shadow while a vertex/midpoint is actually selected — that's the same condition
+    // gating this mode's own local Alt+Arrow handling below (and there's no local Enter
+    // meaning here at all, selected or not), so with nothing selected there's no local
+    // conflict to protect and the global map-label shortcuts should keep working.
+    if (state.selectedVertexIndex >= 0) {
+      stopIfGlobalAltKey(event)
+    }
+    if (ARROW_KEYS.has(event.key) && state.selectedVertexIndex >= 0) {
+      event.stopPropagation()
 
       // Push undo for keyboard move sequence
       if (state._keyboardMoveStartPosition && state._keyboardMoveStartIndex != null) {
@@ -121,7 +129,7 @@ export const keyboardHandlers = {
         state._keyboardMoveStartIndex = null
       }
     }
-    if (e.key === 'Delete') {
+    if (event.key === 'Delete') {
       this.deleteVertex(state)
     }
   }

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

@@ -4,6 +4,23 @@ 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() })
 
+  // stopIfGlobalAltKey's own branches are covered by src/utils/globalAltShortcuts.test.js —
+  // this just checks onKeyup only calls it once a vertex/midpoint is actually selected, same
+  // condition its own local Alt+Arrow handling already requires; with nothing selected there's
+  // no local meaning to protect, so the app-wide map-label shortcuts should keep working.
+  test('shadows Alt+Enter/Alt+Arrow from the app-wide label shortcuts only while something is selected', () => {
+    const { ctx, state } = createHarness()
+    const altEnter = (extra) => ({ key: 'Enter', altKey: true, stopPropagation: jest.fn(), ...extra })
+
+    const whileSelected = altEnter()
+    ctx.onKeyup({ ...state, selectedVertexIndex: 0 }, whileSelected)
+    expect(whileSelected.stopPropagation).toHaveBeenCalled()
+
+    const whileUnselected = altEnter()
+    ctx.onKeyup({ ...state, selectedVertexIndex: -1 }, whileUnselected)
+    expect(whileUnselected.stopPropagation).not.toHaveBeenCalled()
+  })
+
   // 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', () => {
@@ -28,7 +45,7 @@ describe('keyboardHandlers', () => {
     expect(updateSpy).toHaveBeenCalledTimes(1)
 
     map._snapInstance = null // no snap indicator to clear
-    const s = { ...state, featureId: 'missing', vertecies: [], selectedVertexIndex: -1, isPanEnabled: true }
+    const s = { ...state, featureId: 'missing', vertices: [], selectedVertexIndex: -1, isPanEnabled: true }
     keydown(ctx, s, ' ')
     expect(s.isPanEnabled).toBe(true)
   })
@@ -43,7 +60,7 @@ describe('keyboardHandlers', () => {
     keydown(ctx, state, 'ArrowRight')
     expect(state._keyboardMoveStartIndex).toBe(1)
     expect(state._keyboardMoveStartPosition).toEqual([10, 0])
-    expect(state.vertecies[1]).not.toEqual([10, 0])
+    expect(state.vertices[1]).not.toEqual([10, 0])
 
     // Still held → start position isn't reset to the intermediate (already-moved) position
     keydown(ctx, state, 'ArrowRight')
@@ -53,7 +70,7 @@ describe('keyboardHandlers', () => {
   test('an arrow key on a midpoint inserts a vertex; guards a missing feature or out-of-range vertex', () => {
     const { ctx, state } = createHarness()
     const insertSpy = jest.spyOn(ctx, 'insertVertex').mockImplementation(() => {})
-    keydown(ctx, { ...state, selectedVertexIndex: state.vertecies.length, selectedVertexType: 'midpoint' }, 'ArrowRight')
+    keydown(ctx, { ...state, selectedVertexIndex: state.vertices.length, selectedVertexType: 'midpoint' }, 'ArrowRight')
     expect(insertSpy).toHaveBeenCalled()
 
     keydown(ctx, { ...state, featureId: 'missing', selectedVertexIndex: 0 }, 'ArrowRight')

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

@@ -28,7 +28,7 @@ export const pointerHandlers = {
         state.selectedVertexIndex = vertexIndex
         state.selectedVertexType = 'vertex'
         state.coordPath = coordPath
-        const vertex = state.vertecies?.[vertexIndex]
+        const vertex = state.vertices?.[vertexIndex]
         if (vertex) {
           state._moveStartPosition = [...vertex]
           state._moveStartIndex = vertexIndex
@@ -47,7 +47,7 @@ export const pointerHandlers = {
       state.selectedVertexIndex = this.getVertexIndexFromMidpoint(state, coordPath)
       state.selectedVertexType = 'vertex'
       state.coordPath = null // Clear coordPath for midpoints
-      this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: state.selectedVertexIndex, numVertecies: state.vertecies.length })
+      this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: state.selectedVertexIndex, numVertices: state.vertices.length })
     }
   },
 
@@ -60,7 +60,7 @@ export const pointerHandlers = {
       state.selectedVertexType = 'vertex'
       state._isInsertingVertex = false
       state._insertedVertexIndex = null
-      this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
+      this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: insertedIndex, numVertices: state.vertices.length })
       return
     }
     DirectSelect.onClick.call(this, state, e)
@@ -91,7 +91,7 @@ export const pointerHandlers = {
   },
 
   // Did the selected vertex actually change position during this interaction?
-  // Reads the live feature (not the cached state.vertecies) for reliability.
+  // Reads the live feature (not the cached state.vertices) for reliability.
   _didVertexMove (state) {
     if (!state._moveStartPosition || state._moveStartIndex == null) {
       return false
@@ -115,7 +115,7 @@ export const pointerHandlers = {
     state._isInsertingVertex = false
     state._insertedVertexIndex = null
     // DirectSelect.onMouseUp fires draw.update but not draw.selectionchange, so broadcast the count here
-    this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
+    this.map.fire(CUSTOM_DRAW_EVENTS.VERTEX_SELECTION, { index: insertedIndex, numVertices: state.vertices.length })
   },
 
   _recordMoveUndo (state) {

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

@@ -66,7 +66,7 @@ export const touchHandlers = {
       // alignment. Left uncorrected, the next onTouchstart's delta math re-anchors off that
       // drifted position, compounding a little further with every snapped drag (same fix as
       // editPointMode's own onTouchend, for the same reason).
-      const vertex = state.vertecies[state.selectedVertexIndex]
+      const vertex = state.vertices[state.selectedVertexIndex]
       if (vertex) {
         this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
       }
@@ -101,7 +101,7 @@ export const touchHandlers = {
   onTouchstart (state, e) {
     clearSnapState(getSnapInstance(this.map))
     // Always get fresh vertex data in case coordinates changed during previous edits
-    const freshVertices = this.getVerticies(state.featureId)
+    const freshVertices = this.getVertices(state.featureId)
     const vertex = freshVertices?.[state.selectedVertexIndex]
     if (!vertex || !isOnSVG(e.target.parentNode)) {
       return

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

@@ -96,14 +96,14 @@ describe('touchHandlers', () => {
     ctx.onTouchstart(state, { target: svgTarget(state), touches: [{ clientX: 20, clientY: 20 }] })
 
     ctx.onTouchmove(state, { target: { parentNode: document.createElement('div') }, touches: [{ clientX: 5, clientY: 5 }] })
-    expect(state.vertecies[1]).toEqual([10, 0]) // off-target move ignored
+    expect(state.vertices[1]).toEqual([10, 0]) // off-target move ignored
     ctx.onTouchmove(state, { target: svgTarget(state), touches: [{ clientX: 30, clientY: 40 }] })
     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: 50, clientY: 60 }] })
-    expect(state.vertecies[1]).toEqual([7, 8])
+    expect(state.vertices[1]).toEqual([7, 8])
   })
 
   test('onTap clears the snap indicator, then selects a vertex, inserts on a midpoint, or clears with no target', () => {

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

@@ -64,7 +64,7 @@ export const undoHandlers = {
     this._applyUndoAndSync(state, geojson, featureId)
 
     // Update touch vertex target position
-    const vertex = state.vertecies[state.selectedVertexIndex]
+    const vertex = state.vertices[state.selectedVertexIndex]
     if (vertex) {
       this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
     }
@@ -122,13 +122,13 @@ export const undoHandlers = {
     this._applyUndoAndSync(state, geojson, featureId)
 
     // Re-insertion always lands the vertex back at vertexIndex, so it is guaranteed present
-    this.updateTouchVertexTarget(state, scalePoint(this.map.project(state.vertecies[vertexIndex]), state.scale))
+    this.updateTouchVertexTarget(state, scalePoint(this.map.project(state.vertices[vertexIndex]), state.scale))
     this.changeMode(state, { selectedVertexIndex: vertexIndex, selectedVertexType: 'vertex', coordPath: this.getCoordPath(state, vertexIndex) })
   },
 
   _applyUndoAndSync (state, geojson, featureId) {
     this._ctx.api.add(geojson)
-    state.vertecies = this.getVerticies(featureId)
+    state.vertices = this.getVertices(featureId)
     state.midpoints = this.getMidpoints(featureId)
     this._ctx.store.render()
     this.fireGeometryChange(state)

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

@@ -55,23 +55,23 @@ describe('undoHandlers', () => {
     ctx.undoMoveVertex(state, { vertexIndex: 99, previousPosition: [0, 0], featureId: 'feat-1' })
     state.selectedVertexIndex = 0
     ctx.undoMoveVertex(state, { vertexIndex: 0, previousPosition: [3, 4], featureId: 'feat-1' })
-    expect(ctx.getVerticies('feat-1')[0]).toEqual([3, 4])
+    expect(ctx.getVertices('feat-1')[0]).toEqual([3, 4])
 
     // Skips the touch target update when the selected vertex is gone
     ctx.undoMoveVertex({ ...state, selectedVertexIndex: 99 }, { vertexIndex: 0, previousPosition: [1, 1], featureId: 'feat-1' })
-    expect(ctx.getVerticies('feat-1')[0]).toEqual([1, 1])
+    expect(ctx.getVertices('feat-1')[0]).toEqual([1, 1])
   })
 
   test('undoInsertVertex removes the inserted vertex and clears the selection', () => {
     const { ctx, state, api } = createHarness()
     ctx.undoInsertVertex(state, { vertexIndex: 1, featureId: 'feat-1' })
-    expect(ctx.getVerticies('feat-1')).toHaveLength(3)
+    expect(ctx.getVertices('feat-1')).toHaveLength(3)
     expect(api.changeMode).toHaveBeenCalledWith('edit_vertex', expect.objectContaining({ selectedVertexIndex: -1 }))
 
     // Guards a missing feature and an out-of-range index
     ctx.undoInsertVertex({ ...state, featureId: 'missing' }, { vertexIndex: 0, featureId: 'missing' })
     ctx.undoInsertVertex(state, { vertexIndex: 999, featureId: 'feat-1' })
-    expect(ctx.getVerticies('feat-1')).toHaveLength(3)
+    expect(ctx.getVertices('feat-1')).toHaveLength(3)
   })
 
   test('undoDeleteVertex re-inserts, handling boundary, fallback and missing feature', () => {
@@ -79,13 +79,13 @@ describe('undoHandlers', () => {
     ctx.undoDeleteVertex({ ...state, featureId: 'missing' }, { vertexIndex: 0, position: [1, 1], featureId: 'missing' })
     // Fallback: index far beyond any segment boundary → no result → no-op
     ctx.undoDeleteVertex(state, { vertexIndex: 999, position: [1, 1], featureId: 'feat-1' })
-    expect(ctx.getVerticies('feat-1')).toHaveLength(4)
+    expect(ctx.getVertices('feat-1')).toHaveLength(4)
     // Success: re-insert at index 1
     ctx.undoDeleteVertex(state, { vertexIndex: 1, position: [1, 1], featureId: 'feat-1' })
-    expect(ctx.getVerticies('feat-1')).toHaveLength(5)
+    expect(ctx.getVertices('feat-1')).toHaveLength(5)
     // Boundary: index === segment.start + segment.length
     const seg = getRingSegments(ctx.getFeature('feat-1'))[0]
     ctx.undoDeleteVertex(state, { vertexIndex: seg.start + seg.length, position: [2, 2], featureId: 'feat-1' })
-    expect(ctx.getVerticies('feat-1')).toHaveLength(6)
+    expect(ctx.getVertices('feat-1')).toHaveLength(6)
   })
 })

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

@@ -33,7 +33,7 @@ export const vertexOperations = {
   },
 
   // Moves the selected vertex by an explicit (dx, dy) unit direction — the entry
-  // point for MoveControls' D-pad (see mapProvider.activeMoveTarget in events.js),
+  // point for MapControls' D-pad (see mapProvider.activeMoveTarget in events.js),
   // as opposed to moveVertexByKey's KeyboardEvent-driven path. Each call is treated
   // as one complete, undoable action (no held-key sequencing, since a button click
   // has no "held" state to batch the way arrow keys do) — but still honours snap
@@ -55,7 +55,7 @@ export const vertexOperations = {
   },
 
   insertVertex (state, e) {
-    const midIdx = state.selectedVertexIndex - state.vertecies.length
+    const midIdx = state.selectedVertexIndex - state.vertices.length
     const newCoord = this.getOffset(state.midpoints[midIdx], e)
     const feature = this.getFeature(state.featureId)
     const geojson = feature.toGeoJSON()
@@ -107,7 +107,7 @@ export const vertexOperations = {
     const coords = getModifiableCoords(geojson, result.segment.path)
     coords[result.localIdx] = [coord.lng, coord.lat]
     this._ctx.api.add(geojson)
-    state.vertecies = this.getVerticies(state.featureId)
+    state.vertices = this.getVertices(state.featureId)
 
     this.map.fire('draw.geometrychange', state.feature)
   },
@@ -134,7 +134,7 @@ export const vertexOperations = {
     }
 
     // Save position for undo before deletion
-    const deletedPosition = [...state.vertecies[state.selectedVertexIndex]]
+    const deletedPosition = [...state.vertices[state.selectedVertexIndex]]
     const deletedIndex = state.selectedVertexIndex
 
     // Remove the coordinate directly rather than via this._ctx.api.trash(), which routes through

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

@@ -21,7 +21,7 @@ describe('vertexOperations', () => {
     }))
 
     api.changeMode.mockClear()
-    ctx.updateVertex({ featureId: 'missing', vertecies: [], selectedVertexIndex: -1 }, 'ArrowRight')
+    ctx.updateVertex({ featureId: 'missing', vertices: [], selectedVertexIndex: -1 }, 'ArrowRight')
     expect(api.changeMode).not.toHaveBeenCalled()
 
     // A vertex target carries a coordPath; a midpoint target does not
@@ -43,9 +43,9 @@ describe('vertexOperations', () => {
     const { ctx, state, map } = createHarness()
     state.selectedVertexIndex = 0
     state.selectedVertexType = 'vertex'
-    const before = [...state.vertecies[0]]
+    const before = [...state.vertices[0]]
     ctx.nudgeVertexByDelta(state, 1, 0, true)
-    expect(state.vertecies[0]).not.toEqual(before)
+    expect(state.vertices[0]).not.toEqual(before)
     expect(map._undoStack.pop()).toMatchObject({ type: 'move_vertex', vertexIndex: 0, previousPosition: before })
 
     map._undoStack.clear()
@@ -60,7 +60,7 @@ describe('vertexOperations', () => {
 
   // resolveSnapTarget's own snap/break-out-of-snap branches are covered by
   // utils/snapMovement.test.js — this just checks nudgeVertexByDelta wires a snap hit
-  // through to the moved vertex, same as keyboard nudging (regression: MoveControls
+  // through to the moved vertex, same as keyboard nudging (regression: MapControls
   // bypassed snap entirely before resolveSnapTarget was shared).
   test('nudgeVertexByDelta honours an active snap', () => {
     const { ctx, state, map } = createHarness()
@@ -70,12 +70,12 @@ describe('vertexOperations', () => {
     map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
     ctx.nudgeVertexByDelta(state, 0, -1, true)
     expect(state._isSnapped).toBe(true)
-    expect(state.vertecies[1]).toEqual([7, 8])
+    expect(state.vertices[1]).toEqual([7, 8])
   })
 
   test('insertVertex splits a midpoint into a new vertex, records undo and selects it', () => {
     const { ctx, state, api } = createHarness()
-    ctx.insertVertex({ ...state, selectedVertexIndex: state.vertecies.length, selectedVertexType: 'midpoint' }, { key: 'ArrowRight', shiftKey: false })
+    ctx.insertVertex({ ...state, selectedVertexIndex: state.vertices.length, selectedVertexType: 'midpoint' }, { key: 'ArrowRight', shiftKey: false })
     expect(api.add).toHaveBeenCalled()
     expect(state.map ?? ctx.map._undoStack.length).toBeGreaterThan(0)
     expect(api.changeMode).toHaveBeenCalledWith('edit_vertex', expect.objectContaining({
@@ -84,14 +84,14 @@ describe('vertexOperations', () => {
 
     // Also works for an open line segment
     const line = createHarness(LINE())
-    line.ctx.insertVertex({ ...line.state, selectedVertexIndex: line.state.vertecies.length, selectedVertexType: 'midpoint' }, { key: 'ArrowRight', shiftKey: false })
+    line.ctx.insertVertex({ ...line.state, selectedVertexIndex: line.state.vertices.length, selectedVertexType: 'midpoint' }, { key: 'ArrowRight', shiftKey: false })
     expect(line.api.add).toHaveBeenCalled()
   })
 
   test('insertVertex bails out when the midpoint maps to no segment', () => {
     const { ctx, state, api } = createHarness()
     // midIdx beyond the segment's midpoint count, but with a defined midpoint coord
-    const badState = { ...state, selectedVertexIndex: state.vertecies.length + 4, midpoints: [...state.midpoints, [5, 5]] }
+    const badState = { ...state, selectedVertexIndex: state.vertices.length + 4, midpoints: [...state.midpoints, [5, 5]] }
     api.add.mockClear()
     ctx.insertVertex(badState, { key: 'ArrowRight', shiftKey: false })
     expect(api.add).not.toHaveBeenCalled()
@@ -101,20 +101,20 @@ describe('vertexOperations', () => {
     const { ctx, state, map } = createHarness()
     state.selectedVertexIndex = 0
     ctx.moveVertex(state, { lng: 1, lat: 2 })
-    expect(state.vertecies[0]).toEqual([1, 2])
+    expect(state.vertices[0]).toEqual([1, 2])
 
     map._snapInstance = { snapStatus: true, snapCoords: [7, 8] }
     ctx.moveVertex(state, { lng: 1, lat: 2 }, { checkSnap: true })
-    expect(state.vertecies[0]).toEqual([7, 8])
+    expect(state.vertices[0]).toEqual([7, 8])
 
-    const before = [...state.vertecies]
+    const before = [...state.vertices]
     ctx.moveVertex({ ...state, selectedVertexIndex: 99 }, { lng: 3, lat: 3 })
-    expect(ctx.getVerticies('feat-1')).toEqual(before)
+    expect(ctx.getVertices('feat-1')).toEqual(before)
 
     // checkSnap requested but no active snap → coordinate used as-is
     const h = createHarness()
     h.ctx.moveVertex({ ...h.state, selectedVertexIndex: 0 }, { lng: 1, lat: 2 }, { checkSnap: true })
-    expect(h.ctx.getVerticies('feat-1')[0]).toEqual([1, 2])
+    expect(h.ctx.getVertices('feat-1')[0]).toEqual([1, 2])
   })
 
   test('deleteVertex removes a vertex, or no-ops for missing feature / bad index / minimum size', () => {
@@ -137,6 +137,6 @@ describe('vertexOperations', () => {
     const line = createHarness(LINE())
     line.state.selectedVertexIndex = 1
     line.ctx.deleteVertex(line.state)
-    expect(line.ctx.getVerticies('feat-1')).toHaveLength(2)
+    expect(line.ctx.getVertices('feat-1')).toHaveLength(2)
   })
 })

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

@@ -1,9 +1,10 @@
 import {
   getCoords,
+  getMidpointCoords,
   getRingSegments,
   getSegmentForIndex
 } from './geometryHelpers.js'
-import { spatialNavigate } from '../../../../utils/spatial.js'
+import { spatialNavigate } from '../../../../../../../src/utils/spatialNavigate.js'
 
 export const vertexQueries = {
   findVertexIndex (coords, targetCoord, currentIdx) {
@@ -40,56 +41,35 @@ export const vertexQueries = {
   },
 
   syncVertices (state) {
-    state.vertecies = this.getVerticies(state.featureId)
+    state.vertices = this.getVertices(state.featureId)
     state.midpoints = this.getMidpoints(state.featureId)
   },
 
-  getVerticies (featureId) {
+  getVertices (featureId) {
     return getCoords(this.getFeature(featureId))
   },
 
   getMidpoints (featureId) {
-    const feature = this.getFeature(featureId)
-    const coords = getCoords(feature)
-    const segments = getRingSegments(feature)
-    if (!coords?.length || !segments.length) {
-      return []
-    }
-
-    const midpoints = []
-    // Create midpoints within each segment, respecting boundaries
-    for (const seg of segments) {
-      // For closed rings, create midpoint between every vertex including last→first
-      // For open lines, create midpoints only between consecutive vertices (no wrap-around)
-      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
+    return getMidpointCoords(this.getFeature(featureId))
   },
 
   getVertexOrMidpoint (state, direction) {
     // Ensure vertices and midpoints are populated
-    if (!state.vertecies?.length) {
-      state.vertecies = this.getVerticies(state.featureId)
+    if (!state.vertices?.length) {
+      state.vertices = this.getVertices(state.featureId)
       state.midpoints = this.getMidpoints(state.featureId)
     }
-    if (!state.vertecies?.length) {
+    if (!state.vertices?.length) {
       return [-1, null]
     }
     const project = (p) => p ? Object.values(this.map.project(p)) : null
-    const pixels = [...state.vertecies.map(project), ...state.midpoints.map(project)].filter(Boolean)
+    const pixels = [...state.vertices.map(project), ...state.midpoints.map(project)].filter(Boolean)
     if (!pixels.length) {
       return [-1, null]
     }
     const start = pixels[state.selectedVertexIndex] || Object.values(this.map.project(this.map.getCenter()))
     const idx = spatialNavigate(start, pixels, direction)
-    return [idx, idx < state.vertecies.length ? 'vertex' : 'midpoint']
+    return [idx, idx < state.vertices.length ? 'vertex' : 'midpoint']
   },
 
   getVertexIndexFromMidpoint (state, coordPath) {
@@ -108,7 +88,7 @@ export const vertexQueries = {
         const insertionIdx = parts[parts.length - 1]
         const localMidpointIdx = insertionIdx > 0 ? insertionIdx - 1 : seg.length - 2
         // Midpoints are indexed after all vertices
-        return state.vertecies.length + midpointOffset + localMidpointIdx
+        return state.vertices.length + midpointOffset + localMidpointIdx
       }
       // Count midpoints in this segment (must match getMidpoints calculation)
       const segMidpoints = seg.closed ? seg.length : seg.length - 1
@@ -116,6 +96,6 @@ export const vertexQueries = {
     }
 
     // Fallback
-    return state.vertecies.length
+    return state.vertices.length
   }
 }

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

@@ -17,9 +17,9 @@ describe('vertexQueries', () => {
     expect(ctx.getCoordPath({ featureId: 'missing' }, 0)).toBe('0')
   })
 
-  test('getVerticies / getMidpoints for closed rings, open lines and missing features', () => {
+  test('getVertices / getMidpoints for closed rings, open lines and missing features', () => {
     const { ctx } = createHarness()
-    expect(ctx.getVerticies('feat-1')).toHaveLength(4)
+    expect(ctx.getVertices('feat-1')).toHaveLength(4)
     expect(ctx.getMidpoints('feat-1')).toHaveLength(4)
     expect(ctx.getMidpoints('missing')).toEqual([])
     const line = createHarness(LINE())
@@ -28,29 +28,29 @@ describe('vertexQueries', () => {
 
   test('syncVertices refreshes the cached vertex and midpoint lists', () => {
     const { ctx, state } = createHarness()
-    state.vertecies = []
+    state.vertices = []
     state.midpoints = []
     ctx.syncVertices(state)
-    expect(state.vertecies).toHaveLength(4)
+    expect(state.vertices).toHaveLength(4)
     expect(state.midpoints).toHaveLength(4)
   })
 
   test('getVertexOrMidpoint repopulates empty lists, navigates, and guards empty features', () => {
     const { ctx, state } = createHarness()
-    state.vertecies = []
+    state.vertices = []
     state.selectedVertexIndex = 0
     const [idx, type] = ctx.getVertexOrMidpoint(state, 'ArrowRight')
     expect(idx).toBeGreaterThanOrEqual(0)
     expect(['vertex', 'midpoint']).toContain(type)
 
-    expect(ctx.getVertexOrMidpoint({ featureId: 'missing', vertecies: [] }, 'ArrowRight')).toEqual([-1, null])
-    expect(ctx.getVertexOrMidpoint({ ...state, vertecies: [null], midpoints: [], selectedVertexIndex: 0 }, 'ArrowRight')).toEqual([-1, null])
+    expect(ctx.getVertexOrMidpoint({ featureId: 'missing', vertices: [] }, 'ArrowRight')).toEqual([-1, null])
+    expect(ctx.getVertexOrMidpoint({ ...state, vertices: [null], midpoints: [], selectedVertexIndex: 0 }, 'ArrowRight')).toEqual([-1, null])
 
     // Falls back to the map centre when the current index has no pixel, and can resolve a vertex target
     const fresh = createHarness()
     expect(fresh.ctx.getVertexOrMidpoint({ ...fresh.state, selectedVertexIndex: -1 }, 'ArrowRight')[0]).toBeGreaterThanOrEqual(0)
     const types = new Set()
-    for (let s = 0; s < fresh.state.vertecies.length + fresh.state.midpoints.length; s++) {
+    for (let s = 0; s < fresh.state.vertices.length + fresh.state.midpoints.length; s++) {
       for (const d of ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']) {
         types.add(fresh.ctx.getVertexOrMidpoint({ ...fresh.state, selectedVertexIndex: s }, d)[1])
       }
@@ -66,8 +66,8 @@ describe('vertexQueries', () => {
 
     // Counts earlier segments for multi-part geometry (closed and open)
     features.set('multipoly', { type: 'MultiPolygon', coordinates: [[[[0, 0], [1, 0], [1, 1], [0, 0]]], [[[5, 5], [6, 5], [6, 6], [5, 5]]]] })
-    expect(ctx.getVertexIndexFromMidpoint({ ...state, featureId: 'multipoly', vertecies: new Array(8).fill([0, 0]) }, '1.0.1')).toBeGreaterThan(8)
+    expect(ctx.getVertexIndexFromMidpoint({ ...state, featureId: 'multipoly', vertices: new Array(8).fill([0, 0]) }, '1.0.1')).toBeGreaterThan(8)
     features.set('multiline', { type: 'MultiLineString', coordinates: [[[0, 0], [1, 1]], [[5, 5], [6, 6]]] })
-    expect(ctx.getVertexIndexFromMidpoint({ ...state, featureId: 'multiline', vertecies: new Array(4).fill([0, 0]) }, '1.1')).toBeGreaterThan(4)
+    expect(ctx.getVertexIndexFromMidpoint({ ...state, featureId: 'multiline', vertices: new Array(4).fill([0, 0]) }, '1.1')).toBeGreaterThan(4)
   })
 })