@defra/interactive-map 0.0.36-alpha → 0.0.38-alpha

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

@@ -0,0 +1,46 @@
+import {
+  getCoords, getRingSegments, getSegmentForIndex, getModifiableCoords, coordPathToFlatIndex
+} from './geometryHelpers.js'
+
+const POLYGON = () => ({ type: 'Polygon', coordinates: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]] })
+const LINE = () => ({ type: 'LineString', coordinates: [[0, 0], [10, 0], [10, 10]] })
+
+describe('geometryHelpers', () => {
+  test('getCoords flattens every geometry type and guards missing input', () => {
+    expect(getCoords(LINE())).toHaveLength(3)
+    expect(getCoords(POLYGON())).toHaveLength(5)
+    expect(getCoords({ type: 'MultiLineString', coordinates: [[[0, 0], [1, 1]], [[2, 2]]] })).toHaveLength(3)
+    expect(getCoords({ type: 'MultiPolygon', coordinates: [[[[0, 0], [1, 1]]], [[[2, 2]]]] })).toHaveLength(3)
+    expect(getCoords({ type: 'Point', coordinates: [0, 0] })).toEqual([])
+    expect(getCoords(null)).toEqual([])
+  })
+
+  test('getRingSegments describes each geometry type and guards missing input', () => {
+    expect(getRingSegments(LINE())).toEqual([{ start: 0, length: 3, path: [], closed: false }])
+    expect(getRingSegments(POLYGON())).toEqual([{ start: 0, length: 5, path: [0], closed: true }])
+    expect(getRingSegments({ type: 'MultiLineString', coordinates: [[[0, 0], [1, 1]], [[2, 2]]] }))
+      .toEqual([{ start: 0, length: 2, path: [0], closed: false }, { start: 2, length: 1, path: [1], closed: false }])
+    expect(getRingSegments({ type: 'MultiPolygon', coordinates: [[[[0, 0], [1, 1]]], [[[2, 2]]]] }))
+      .toEqual([{ start: 0, length: 2, path: [0, 0], closed: true }, { start: 2, length: 1, path: [1, 0], closed: true }])
+    expect(getRingSegments({ type: 'Point', coordinates: [0, 0] })).toEqual([])
+    expect(getRingSegments(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 })
+    expect(getSegmentForIndex(segments, 99)).toBeNull()
+  })
+
+  test('getModifiableCoords walks the hierarchical path', () => {
+    const geojson = { geometry: { type: 'MultiPolygon', coordinates: [[[[0, 0]]], [[[9, 9]]]] } }
+    expect(getModifiableCoords(geojson, [1, 0])).toEqual([[9, 9]])
+  })
+
+  test('coordPathToFlatIndex resolves matched paths and falls back to the last index', () => {
+    const poly = POLYGON()
+    expect(coordPathToFlatIndex(poly, '0.2')).toBe(2)
+    // Unmatched path falls back to the trailing number
+    expect(coordPathToFlatIndex(poly, '5.7')).toBe(7)
+  })
+})

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

@@ -0,0 +1,2 @@
+export const scalePoint = (point, scale) => ({ x: point.x * scale, y: point.y * scale })
+export const isOnSVG = (el) => el instanceof window.SVGElement || el.ownerSVGElement

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

@@ -0,0 +1,17 @@
+import { scalePoint, isOnSVG } from './helpers.js'
+
+describe('helpers', () => {
+  test('scalePoint multiplies both axes by the scale', () => {
+    expect(scalePoint({ x: 2, y: 3 }, 4)).toEqual({ x: 8, y: 12 })
+    expect(scalePoint({ x: 5, y: 5 }, 1)).toEqual({ x: 5, y: 5 })
+  })
+
+  test('isOnSVG detects SVG elements and their descendants, not plain DOM nodes', () => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+    svg.appendChild(circle)
+    expect(isOnSVG(svg)).toBeTruthy() // instanceof SVGElement
+    expect(isOnSVG(circle)).toBeTruthy() // nested SVG element
+    expect(isOnSVG(document.createElement('div'))).toBeFalsy()
+  })
+})

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

@@ -0,0 +1,151 @@
+import { getSnapInstance, clearSnapIndicator } from '../../utils/snapHelpers.js'
+import { getCoords } from './geometryHelpers.js'
+
+const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
+const ARROW_OFFSETS = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }
+const INTERACTIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT', 'A'])
+
+// Keyboard shortcuts are ignored while a form control outside the map viewport has
+// focus, but still work for elements inside the viewport (e.g. draw toolbar buttons).
+const isInteractiveElementFocused = (state) => {
+  const el = document.activeElement
+  if (!el || el === document.body) { return false }
+  if (state.container?.contains(el)) { return false }
+  return INTERACTIVE_TAGS.has(el.tagName) || el.isContentEditable || el.hasAttribute('tabindex')
+}
+
+const isUndoShortcut = (e) => e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey
+
+/**
+ * Keyboard interaction for the vertex-edit mode: arrow-key vertex movement/insertion,
+ * space-to-select, Escape, and Cmd/Ctrl+Z undo. Mixed into EditVertexMode.
+ */
+export const keyboardHandlers = {
+  onKeydown (state, e) {
+    if (isInteractiveElementFocused(state)) {
+      return
+    }
+
+    state.interfaceType = 'keyboard'
+    this.hideTouchVertexIndicator(state)
+
+    if (e.key === ' ') {
+      this.handleSpace(state, e)
+      return
+    }
+    if (ARROW_KEYS.has(e.key) && state.selectedVertexIndex >= 0) {
+      this.handleArrowKey(state, e)
+      return
+    }
+    if (e.key === 'Escape') {
+      this.changeMode(state, { isPanEnabled: true, selectedVertexIndex: -1, selectedVertexType: null })
+      return
+    }
+    if (isUndoShortcut(e)) {
+      this.handleUndoShortcut(state, e)
+    }
+  },
+
+  // Space always cancels the default; with no active selection it starts keyboard editing.
+  handleSpace (state, e) {
+    e.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)
+      return
+    }
+    this.moveVertexByKey(state, e)
+  },
+
+  // Space with no active selection: select the first vertex for keyboard editing.
+  startKeyboardSelection (state) {
+    const snap = getSnapInstance(this.map)
+    if (snap) {
+      clearSnapIndicator(snap, this.map)
+    }
+    if (!state.vertecies?.length) {
+      state.vertecies = this.getVerticies(state.featureId)
+      state.midpoints = this.getMidpoints(state.featureId)
+    }
+    if (!state.vertecies?.length) {
+      return
+    }
+    state.isPanEnabled = false
+    this.updateVertex(state)
+  },
+
+  // Arrow key with a selected vertex: insert (midpoint) or nudge the vertex, honouring snap.
+  moveVertexByKey (state, e) {
+    if (state.selectedVertexType === 'midpoint') {
+      this.insertVertex(state, e)
+      return
+    }
+
+    const feature = this.getFeature(state.featureId)
+    const currentCoord = feature && getCoords(feature)?.[state.selectedVertexIndex]
+    if (!currentCoord) {
+      return
+    }
+
+    // Save starting position for undo (only on first move of sequence)
+    if (!state._keyboardMoveStartPosition) {
+      state._keyboardMoveStartPosition = [...currentCoord]
+      state._keyboardMoveStartIndex = state.selectedVertexIndex
+    }
+
+    this.moveVertex(state, this._keyboardMoveTarget(state, e, currentCoord))
+  },
+
+  // Resolve the destination coordinate for a keyboard nudge, applying or breaking
+  // snap — delegates to the shared resolver (vertexOperations.js) also used by
+  // MoveControl's nudgeVertexByDelta, so both snap identically.
+  _keyboardMoveTarget (state, e, currentCoord) {
+    const [dx, dy] = ARROW_OFFSETS[e.key]
+    return this.resolveSnapTarget(state, dx, dy, currentCoord, () => this.getNewCoord(state, e))
+  },
+
+  // Cmd/Ctrl+Z: undo the last edit, unless the user is typing in a text field.
+  handleUndoShortcut (state, e) {
+    const tag = document.activeElement?.tagName
+    if (tag === 'INPUT' || tag === 'TEXTAREA') {
+      return
+    }
+    e.preventDefault()
+    e.stopPropagation()
+    this.handleUndo(state)
+  },
+
+  onKeyup (state, e) {
+    if (isInteractiveElementFocused(state)) {
+      return
+    }
+
+    state.interfaceType = 'keyboard'
+    if (ARROW_KEYS.has(e.key) && state.selectedVertexIndex >= 0) {
+      e.stopPropagation()
+
+      // Push undo for keyboard move sequence
+      if (state._keyboardMoveStartPosition && state._keyboardMoveStartIndex != null) {
+        this.pushUndo({
+          type: 'move_vertex',
+          featureId: state.featureId,
+          vertexIndex: state._keyboardMoveStartIndex,
+          previousPosition: state._keyboardMoveStartPosition
+        })
+        state._keyboardMoveStartPosition = null
+        state._keyboardMoveStartIndex = null
+      }
+    }
+    if (e.key === 'Delete') {
+      this.deleteVertex(state)
+    }
+  }
+}

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

@@ -0,0 +1,123 @@
+import { createHarness } from './__helpers__/harness.js'
+
+describe('keyboardHandlers', () => {
+  const keydown = (ctx, state, key, extra = {}) => ctx.onKeydown(state, { key, preventDefault: jest.fn(), stopPropagation: jest.fn(), ...extra })
+  const keyup = (ctx, state, key) => ctx.onKeyup(state, { key, stopPropagation: jest.fn() })
+
+  test('shortcuts are ignored outside the viewport (input, focusable non-input) and when the container is absent', () => {
+    const { ctx, state } = createHarness()
+    const input = document.createElement('input')
+    document.body.appendChild(input)
+    input.focus()
+    keydown(ctx, state, 'ArrowRight')
+    keyup(ctx, state, 'ArrowRight')
+    expect(state.interfaceType).not.toBe('keyboard')
+
+    const focusable = document.createElement('div')
+    focusable.tabIndex = 0
+    document.body.appendChild(focusable)
+    focusable.focus()
+    keydown(ctx, state, 'ArrowRight')
+    expect(state.interfaceType).not.toBe('keyboard')
+
+    input.focus()
+    const s = { ...state, container: undefined, interfaceType: 'mouse' }
+    keydown(ctx, s, 'ArrowRight')
+    expect(s.interfaceType).toBe('mouse')
+  })
+
+  test('space selects the first vertex, or does nothing when a vertex is selected or there are none', () => {
+    const { ctx, state, map } = createHarness()
+    map._snapInstance = { status: true, snapStatus: true, snapCoords: [1, 1] }
+    const updateSpy = jest.spyOn(ctx, 'updateVertex').mockImplementation(() => {})
+    keydown(ctx, state, ' ')
+    expect(state.isPanEnabled).toBe(false)
+    expect(updateSpy).toHaveBeenCalledTimes(1)
+
+    keydown(ctx, { ...state, selectedVertexIndex: 0 }, ' ') // already selected → just cancels default
+    expect(updateSpy).toHaveBeenCalledTimes(1)
+
+    map._snapInstance = null // no snap indicator to clear
+    const s = { ...state, featureId: 'missing', vertecies: [], selectedVertexIndex: -1, isPanEnabled: true }
+    keydown(ctx, s, ' ')
+    expect(s.isPanEnabled).toBe(true)
+  })
+
+  test('an arrow key moves the selected vertex, snapping when active and using the raw coord otherwise', () => {
+    const { ctx, state, map } = createHarness()
+    state.selectedVertexIndex = 1
+    keydown(ctx, state, 'ArrowRight')
+    expect(state._keyboardMoveStartIndex).toBe(1)
+
+    state.getSnapEnabled = () => true
+    map._snapInstance = { status: true, snapStatus: true, snapCoords: [7, 8], snapToClosestPoint: jest.fn() }
+    keydown(ctx, state, 'ArrowUp')
+    expect(state._isSnapped).toBe(true)
+    expect(state.vertecies[1]).toEqual([7, 8])
+
+    keydown(ctx, state, 'ArrowLeft') // snapped already → break out of the snap radius
+    expect(state._isSnapped).toBe(false)
+
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+    keydown(ctx, state, 'ArrowRight') // snap enabled but inactive → raw new coord
+    expect(state._isSnapped).toBe(false)
+  })
+
+  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')
+    expect(insertSpy).toHaveBeenCalled()
+
+    keydown(ctx, { ...state, featureId: 'missing', selectedVertexIndex: 0 }, 'ArrowRight')
+    keydown(ctx, { ...state, selectedVertexIndex: 99 }, 'ArrowRight')
+    expect(ctx.map._undoStack.length).toBe(0)
+  })
+
+  test('alt+arrow steps the selection, Escape clears it, and Cmd/Ctrl+Z undoes (ignoring shift and text fields)', () => {
+    const { ctx, state, api } = createHarness()
+    state.selectedVertexIndex = 0
+    const updateSpy = jest.spyOn(ctx, 'updateVertex').mockImplementation(() => {})
+    keydown(ctx, state, 'ArrowRight', { altKey: true })
+    expect(updateSpy).toHaveBeenCalledWith(state, 'ArrowRight')
+
+    keydown(ctx, state, 'Escape')
+    expect(api.changeMode).toHaveBeenCalledWith('edit_vertex', expect.objectContaining({ isPanEnabled: true }))
+
+    const undoSpy = jest.spyOn(ctx, 'handleUndo').mockImplementation(() => {})
+    keydown(ctx, state, 'z', { metaKey: true })
+    keydown(ctx, state, 'z', { ctrlKey: true })
+    expect(undoSpy).toHaveBeenCalledTimes(2)
+    keydown(ctx, state, 'z', { metaKey: true, shiftKey: true }) // shift → not undo
+    expect(undoSpy).toHaveBeenCalledTimes(2)
+
+    // Ignored while typing in a text field inside the viewport
+    const input = document.createElement('input')
+    state.container.appendChild(input)
+    input.focus()
+    keydown(ctx, state, 'z', { metaKey: true })
+    expect(undoSpy).toHaveBeenCalledTimes(2)
+  })
+
+  test('onKeyup pushes a move undo after a sequence, deletes on Delete, no-ops otherwise, and allows viewport focus', () => {
+    const { ctx, state, map } = createHarness()
+    state.selectedVertexIndex = 1
+    state._keyboardMoveStartPosition = [10, 0]
+    state._keyboardMoveStartIndex = 1
+    keyup(ctx, state, 'ArrowRight')
+    expect(map._undoStack.pop()).toMatchObject({ type: 'move_vertex', vertexIndex: 1 })
+
+    keyup(ctx, { ...state, selectedVertexIndex: 1 }, 'ArrowRight') // no active sequence → no undo
+    expect(map._undoStack.length).toBe(0)
+
+    const deleteSpy = jest.spyOn(ctx, 'deleteVertex').mockImplementation(() => {})
+    keyup(ctx, state, 'Delete')
+    expect(deleteSpy).toHaveBeenCalled()
+
+    const child = document.createElement('button') // focus inside the viewport is non-blocking
+    state.container.appendChild(child)
+    child.focus()
+    keyup(ctx, state, 'ArrowRight')
+    expect(state.interfaceType).toBe('keyboard')
+  })
+})

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

@@ -0,0 +1,161 @@
+import DirectSelect from '../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/modes/direct_select.js' // NOSONAR
+import {
+  getSnapInstance, isSnapEnabled, getSnapLngLat, triggerSnapAtPoint, clearSnapState
+} from '../../utils/snapHelpers.js'
+import { getCoords, coordPathToFlatIndex } from './geometryHelpers.js'
+
+const EVENT_VERTEX_SELECTION = 'draw.vertexselection'
+
+/**
+ * Mouse/pointer interaction for the vertex-edit mode: vertex/midpoint mouse-down,
+ * click-to-commit insertions, drag (with snapping) and mouse-up undo bookkeeping.
+ * Wraps the parent DirectSelect handlers. Mixed into EditVertexMode.
+ */
+export const pointerHandlers = {
+  onMouseDown (state, e) {
+    clearSnapState(getSnapInstance(this.map))
+    const meta = e.featureTarget?.properties.meta
+    const coordPath = e.featureTarget?.properties.coord_path
+
+    if (['vertex', 'midpoint'].includes(meta)) {
+      state.dragMoveLocation = e.lngLat
+      state.dragMoving = false
+      DirectSelect.onMouseDown.call(this, state, e)
+
+      // Update selection state for vertex clicks (so onSelectionChange has correct context)
+      if (meta === 'vertex' && coordPath) {
+        const feature = this.getFeature(state.featureId)
+        const vertexIndex = coordPathToFlatIndex(feature, coordPath)
+        state.selectedVertexIndex = vertexIndex
+        state.selectedVertexType = 'vertex'
+        state.coordPath = coordPath
+        const vertex = state.vertecies?.[vertexIndex]
+        if (vertex) {
+          state._moveStartPosition = [...vertex]
+          state._moveStartIndex = vertexIndex
+        }
+      }
+    }
+    if (meta === 'midpoint') {
+      // DirectSelect converts midpoint to vertex - track this as an insert
+      const feature = this.getFeature(state.featureId)
+      const insertedIndex = coordPathToFlatIndex(feature, coordPath)
+
+      // Track this insertion for undo (will be pushed on mouseUp if drag occurred)
+      state._insertedVertexIndex = insertedIndex
+      state._isInsertingVertex = true
+
+      state.selectedVertexIndex = this.getVertexIndexFromMidpoint(state, coordPath)
+      state.selectedVertexType = 'vertex'
+      state.coordPath = null // Clear coordPath for midpoints
+      this.map.fire(EVENT_VERTEX_SELECTION, { index: state.selectedVertexIndex, numVertecies: state.vertecies.length })
+    }
+  },
+
+  onClick (state, e) { // NOSONAR — complexity accumulated from object-level context; single guard clause, see feedback_mgl_click_vs_mouseup.md
+    if (state._isInsertingVertex && state._insertedVertexIndex != null) {
+      const insertedIndex = state._insertedVertexIndex
+      this.syncVertices(state)
+      this.pushUndo({ type: 'insert_vertex', featureId: state.featureId, vertexIndex: insertedIndex })
+      state.selectedVertexIndex = insertedIndex
+      state.selectedVertexType = 'vertex'
+      state._isInsertingVertex = false
+      state._insertedVertexIndex = null
+      this.map.fire(EVENT_VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
+      return
+    }
+    DirectSelect.onClick.call(this, state, e)
+  },
+
+  onMouseUp (state, e) {
+    clearSnapState(getSnapInstance(this.map))
+
+    const wasInsertion = state._isInsertingVertex && state._insertedVertexIndex != null
+    const vertexMoved = this._didVertexMove(state)
+
+    if (state.dragMoving || vertexMoved || wasInsertion) {
+      this.syncVertices(state)
+      if (wasInsertion) {
+        this._recordInsertionUndo(state)
+      } else if (vertexMoved) {
+        this._recordMoveUndo(state)
+      } else {
+        // dragMoving without an actual move or insertion: nothing to record
+      }
+    }
+
+    // Clean up move state
+    state._moveStartPosition = null
+    state._moveStartIndex = null
+
+    DirectSelect.onMouseUp.call(this, state, e)
+  },
+
+  // Did the selected vertex actually change position during this interaction?
+  // Reads the live feature (not the cached state.vertecies) for reliability.
+  _didVertexMove (state) {
+    if (!state._moveStartPosition || state._moveStartIndex == null) {
+      return false
+    }
+    const feature = this.getFeature(state.featureId)
+    const currentVertex = feature && getCoords(feature)?.[state._moveStartIndex]
+    if (!currentVertex) {
+      return false
+    }
+    return currentVertex[0] !== state._moveStartPosition[0] ||
+           currentVertex[1] !== state._moveStartPosition[1]
+  },
+
+  // Commit a midpoint-drag insertion: record undo, reselect the new vertex, broadcast the count.
+  _recordInsertionUndo (state) {
+    const insertedIndex = state._insertedVertexIndex
+    this.pushUndo({ type: 'insert_vertex', featureId: state.featureId, vertexIndex: insertedIndex })
+    // selectedVertexIndex pointed at the old midpoint-range index; use the real flat index
+    state.selectedVertexIndex = insertedIndex
+    state.selectedVertexType = 'vertex'
+    state._isInsertingVertex = false
+    state._insertedVertexIndex = null
+    // DirectSelect.onMouseUp fires draw.update but not draw.selectionchange, so broadcast the count here
+    this.map.fire(EVENT_VERTEX_SELECTION, { index: insertedIndex, numVertecies: state.vertecies.length })
+  },
+
+  _recordMoveUndo (state) {
+    this.pushUndo({
+      type: 'move_vertex',
+      featureId: state.featureId,
+      vertexIndex: state._moveStartIndex,
+      previousPosition: state._moveStartPosition
+    })
+  },
+
+  onDrag (state, e) {
+    if (state.interfaceType === 'touch') {
+      return
+    }
+
+    this.map.fire('draw.geometrychange', state.feature)
+
+    const snap = getSnapInstance(this.map)
+    if (snap) {
+      snap.snapStatus = false
+      snap.snapCoords = null
+    }
+
+    if (!isSnapEnabled(state) || !snap?.status) {
+      DirectSelect.onDrag.call(this, state, e)
+      return
+    }
+
+    if (!state.selectedCoordPaths?.length || !state.canDragMove) {
+      return
+    }
+
+    state.dragMoving = true
+    e.originalEvent.stopPropagation()
+    triggerSnapAtPoint(snap, this.map, e.point)
+
+    const finalLngLat = getSnapLngLat(snap) || e.lngLat
+    state.feature.updateCoordinate(state.selectedCoordPaths[0], finalLngLat.lng, finalLngLat.lat)
+    state.dragMoveLocation = e.lngLat
+  }
+}

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

@@ -0,0 +1,98 @@
+import { createHarness, dragEvt } from './__helpers__/harness.js'
+
+describe('pointerHandlers', () => {
+  test('onMouseDown selects a vertex and records the move start, ignoring empty/no-coord targets', () => {
+    const { ctx, state } = createHarness()
+    ctx.onMouseDown(state, { lngLat: { lng: 10, lat: 0 }, featureTarget: { properties: { meta: 'vertex', coord_path: '0.1' } } })
+    expect(state.selectedVertexIndex).toBe(1)
+    expect(state._moveStartIndex).toBe(1)
+
+    const h = createHarness()
+    h.ctx.onMouseDown(h.state, { lngLat: { lng: 0, lat: 0 }, featureTarget: undefined })
+    h.ctx.onMouseDown(h.state, { lngLat: { lng: 0, lat: 0 }, featureTarget: { properties: { meta: 'vertex', coord_path: '0.9' } } })
+    expect(h.state._moveStartIndex).toBeUndefined()
+  })
+
+  test('onMouseDown on a midpoint marks an insertion in progress', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onMouseDown(state, { lngLat: { lng: 5, lat: 0 }, featureTarget: { properties: { meta: 'midpoint', coord_path: '0.1', lng: 5, lat: 0 } } })
+    expect(state._isInsertingVertex).toBe(true)
+    expect(map.fire).toHaveBeenCalledWith('draw.vertexselection', expect.any(Object))
+  })
+
+  test('onClick commits an in-progress insertion, otherwise delegates to DirectSelect', () => {
+    const { ctx, state, api } = createHarness()
+    state._isInsertingVertex = true
+    state._insertedVertexIndex = 2
+    ctx.onClick(state, {})
+    expect(ctx.map._undoStack.pop()).toMatchObject({ type: 'insert_vertex', vertexIndex: 2 })
+    expect(state._isInsertingVertex).toBe(false)
+
+    ctx.onClick(state, { featureTarget: undefined }) // noTarget → clickNoTarget → changeMode
+    expect(api.changeMode).toHaveBeenCalledWith('edit_vertex', expect.objectContaining({ selectedVertexIndex: -1 }))
+  })
+
+  test('onMouseUp records a move undo, an insertion undo, or nothing', () => {
+    const { ctx, state, map } = createHarness()
+    // nothing
+    ctx.onMouseUp(state, {})
+    expect(map._undoStack.length).toBe(0)
+
+    // move
+    state._moveStartIndex = 1
+    state._moveStartPosition = [10, 0]
+    ctx.moveVertex({ ...state, selectedVertexIndex: 1 }, { lng: 3, lat: 3 })
+    ctx.onMouseUp(state, {})
+    expect(map._undoStack.pop()).toMatchObject({ type: 'move_vertex', vertexIndex: 1 })
+
+    // insertion
+    state.dragMoving = true
+    state._isInsertingVertex = true
+    state._insertedVertexIndex = 2
+    ctx.onMouseUp(state, {})
+    expect(map._undoStack.pop()).toMatchObject({ type: 'insert_vertex', vertexIndex: 2 })
+
+    // In-progress drag with no move/insertion records nothing; guards missing feature/stale index; detects a vertical-only move
+    const h = createHarness()
+    h.ctx.onMouseUp({ ...h.state, dragMoving: true }, {})
+    h.ctx.onMouseUp({ ...h.state, _moveStartPosition: [0, 0], _moveStartIndex: 0, featureId: 'missing' }, {})
+    h.ctx.onMouseUp({ ...h.state, _moveStartPosition: [0, 0], _moveStartIndex: 99 }, {})
+    expect(h.map._undoStack.length).toBe(0)
+    h.ctx.moveVertex({ ...h.state, selectedVertexIndex: 1 }, { lng: 10, lat: 5 }) // same lng, new lat
+    h.ctx.onMouseUp({ ...h.state, _moveStartPosition: [10, 0], _moveStartIndex: 1 }, {})
+    expect(h.map._undoStack.pop()).toMatchObject({ type: 'move_vertex', vertexIndex: 1 })
+  })
+
+  test('onDrag skips touch, delegates without snap, and snaps when enabled', () => {
+    const { ctx, state, map } = createHarness()
+    ctx.onDrag({ ...state, interfaceType: 'touch' }, { originalEvent: { stopPropagation: jest.fn() }, lngLat: { lng: 1, lat: 1 }, point: { x: 10, y: 10 } })
+
+    // no snap → DirectSelect.onDrag moves the vertex
+    Object.assign(state, { canDragMove: true, selectedCoordPaths: ['0.1'], dragMoveLocation: { lng: 0, lat: 0 } })
+    ctx.onDrag(state, { originalEvent: { stopPropagation: jest.fn() }, lngLat: { lng: 2, lat: 2 }, point: { x: 20, y: 20 } })
+    expect(map.fire).toHaveBeenCalledWith('draw.geometrychange', expect.anything())
+
+    // snap enabled
+    state.getSnapEnabled = () => true
+    map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+    ctx.onDrag(state, { originalEvent: { stopPropagation: jest.fn() }, lngLat: { lng: 3, lat: 3 }, point: { x: 30, y: 30 } })
+    expect(state.dragMoving).toBe(true)
+
+    // Snapping enabled but nothing selected → bail out
+    const nosel = createHarness()
+    nosel.map._snapInstance = { status: true, snapStatus: true, snapCoords: [1, 1] }
+    const ns = { ...nosel.state, getSnapEnabled: () => true, selectedCoordPaths: [], canDragMove: false }
+    nosel.ctx.onDrag(ns, dragEvt(1, 1))
+    expect(ns.dragMoving).not.toBe(true)
+
+    // Snapping active → snapped point; inactive → raw point
+    const snapped = createHarness()
+    snapped.map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn(() => { snapped.map._snapInstance.snapStatus = true; snapped.map._snapInstance.snapCoords = [7, 8] }) }
+    snapped.ctx.onDrag({ ...snapped.state, getSnapEnabled: () => true, selectedCoordPaths: ['0.1'], canDragMove: true }, dragEvt(2, 2))
+    expect(snapped.ctx.getFeature('feat-1').getCoordinate('0.1')).toEqual([7, 8])
+    const raw = createHarness()
+    raw.map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+    raw.ctx.onDrag({ ...raw.state, getSnapEnabled: () => true, selectedCoordPaths: ['0.1'], canDragMove: true }, dragEvt(3, 3))
+    expect(raw.ctx.getFeature('feat-1').getCoordinate('0.1')).toEqual([3, 3])
+  })
+})