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

package/plugins/draw/src/adapters/openlayers/edit/selectionState.test.js

@@ -0,0 +1,109 @@
+import { createSelectionState } from './selectionState.js'
+import { createFakeManager, polygonFeature } from '../__helpers__/harness.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+
+const RING = [[0, 0], [10, 0], [10, 10], [0, 0]]
+
+const setup = (interfaceType) => {
+  const manager = createFakeManager()
+  const olFeature = polygonFeature(RING)
+  const layers = {
+    vertexLayer: { update: jest.fn(), setSelected: jest.fn() },
+    midpointLayer: { update: jest.fn(), setSelected: jest.fn(), getCoords: jest.fn(() => [[5, 0], [10, 5], [5, 5]]) },
+    activeLayer: { update: jest.fn() }
+  }
+  const map = { render: jest.fn() }
+  const store = { toGeoJSON: jest.fn(() => ({ id: 'f1' })) }
+  const selection = createSelectionState({ map, manager, store, olFeature, interfaceType, layers })
+  return { manager, olFeature, layers, map, store, selection }
+}
+
+test('defaults to mouse interface when none is given', () => {
+  expect(setup().selection.state.interfaceType).toBe('mouse')
+  expect(setup('touch').selection.state.interfaceType).toBe('touch')
+})
+
+test('selecting a vertex highlights it, clears midpoint selection and reports the selection', () => {
+  const { selection, layers, manager } = setup()
+  selection.state.vertices = [[0, 0], [10, 0], [10, 10]]
+  selection.setState({ selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+  expect(layers.vertexLayer.setSelected).toHaveBeenCalledWith(1)
+  expect(layers.midpointLayer.setSelected).toHaveBeenCalledWith(-1)
+  expect(layers.activeLayer.update).toHaveBeenCalledWith(selection.state)
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, { index: 1, numVertices: 3 })
+})
+
+test('selecting a midpoint highlights it by local index and reports index -1', () => {
+  const { selection, layers, manager } = setup()
+  selection.state.vertices = [[0, 0], [10, 0], [10, 10]]
+  selection.setState({ selectedVertexIndex: 4, selectedVertexType: 'midpoint' })
+  expect(layers.midpointLayer.setSelected).toHaveBeenCalledWith(1)
+  expect(layers.vertexLayer.setSelected).toHaveBeenCalledWith(-1)
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, { index: -1, numVertices: 3 })
+})
+
+test('deselecting fires the onDeselect hook', () => {
+  const { selection } = setup()
+  const onDeselect = jest.fn()
+  selection.setHooks({ onDeselect })
+  selection.setState({ selectedVertexIndex: -1, selectedVertexType: null })
+  expect(onDeselect).toHaveBeenCalled()
+})
+
+test('a vertices update refreshes the handle layers, midpoints and the map', () => {
+  const { selection, layers, map } = setup()
+  const onUpdate = jest.fn()
+  selection.setHooks({ onUpdate })
+  selection.setState({ vertices: [[0, 0], [10, 0], [10, 10]] })
+  expect(layers.vertexLayer.update).toHaveBeenCalledWith({ type: 'Polygon', coordinates: [RING] })
+  expect(selection.state.midpoints).toEqual([[5, 0], [10, 5], [5, 5]])
+  expect(onUpdate).toHaveBeenCalled()
+  expect(map.render).toHaveBeenCalled()
+})
+
+test('syncGeom derives state from the geometry and emits vertexchange + update', () => {
+  const { selection, manager, store } = setup()
+  selection.syncGeom()
+  expect(selection.state.vertices).toEqual([[0, 0], [10, 0], [10, 10]])
+  expect(selection.state.midpoints).toHaveLength(3)
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_CHANGE, { numVertices: 3 })
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.UPDATE, store.toGeoJSON())
+})
+
+test('emitGeometryValidation emits a deferred commit-level geometrychange with the change phase', () => {
+  jest.useFakeTimers()
+  const { selection, manager, store } = setup()
+  manager.emit.mockClear()
+
+  selection.emitGeometryValidation('commit-move', 2)
+  // Deferred a tick to avoid re-entrancy — nothing emitted synchronously.
+  expect(manager.emit).not.toHaveBeenCalledWith(ADAPTER_EVENTS.GEOMETRY_CHANGE, expect.anything())
+
+  jest.runAllTimers()
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.GEOMETRY_CHANGE, {
+    feature: store.toGeoJSON(),
+    phase: 'commit-move',
+    vertexIndex: 2
+  })
+  jest.useRealTimers()
+})
+
+test('emitGeometryValidation is a no-op without a change phase', () => {
+  jest.useFakeTimers()
+  const { selection, manager } = setup()
+  manager.emit.mockClear()
+  selection.emitGeometryValidation(undefined, 0)
+  jest.runAllTimers()
+  expect(manager.emit).not.toHaveBeenCalledWith(ADAPTER_EVENTS.GEOMETRY_CHANGE, expect.anything())
+  jest.useRealTimers()
+})
+
+test('geometry changes refresh the layers until destroy unbinds the listener', () => {
+  const { selection, olFeature, layers } = setup()
+  olFeature.getGeometry().setCoordinates([[[0, 0], [20, 0], [20, 20], [0, 0]]])
+  expect(selection.state.vertices).toEqual([[0, 0], [20, 0], [20, 20]])
+  const calls = layers.vertexLayer.update.mock.calls.length
+  selection.destroy()
+  olFeature.getGeometry().setCoordinates([[[0, 0], [30, 0], [30, 30], [0, 0]]])
+  expect(layers.vertexLayer.update.mock.calls.length).toBe(calls)
+})

package/plugins/draw/src/adapters/openlayers/edit/touchHandler.js

@@ -0,0 +1,184 @@
+import { coordToPixel, pixelToCoord } from '../utils/olCoords.js'
+import { createTouchTarget, applyTouchTargetColors, showTouchTarget, hideTouchTarget, isOnTouchTarget } from '../utils/touchTarget.js'
+import { moveVertex } from './vertexOps.js'
+import { findNearest } from './vertexHitTest.js'
+
+const TAP_MOVE_THRESHOLD = 10
+const TAP_TIME_THRESHOLD = 400
+const TOUCH_TOLERANCE = 24
+
+const handleTouchStart = (e, { map, targetEl, cssToOl, getState, drag }) => {
+  const touch = e.touches[0]
+  const onTarget = isOnTouchTarget(e.target)
+  drag.tapStart = { x: touch.clientX, y: touch.clientY, time: Date.now(), onTarget }
+  if (!onTarget) {
+    return
+  }
+  const { selectedVertexIndex, vertices } = getState()
+  const vertex = vertices[selectedVertexIndex]
+  if (!vertex) {
+    return
+  }
+  const tOl = map.getEventPixel({ clientX: touch.clientX, clientY: touch.clientY })
+  const vertexPx = coordToPixel(map, vertex)
+  const style = getComputedStyle(targetEl)
+  const svgOlPx = cssToOl({ x: Number.parseFloat(style.left), y: Number.parseFloat(style.top) })
+  drag.dragStartCoord = [...vertex]
+  drag.dragStartIndex = selectedVertexIndex
+  drag.vertexTouchDelta = { x: tOl[0] - vertexPx.x, y: tOl[1] - vertexPx.y }
+  drag.targetTouchDelta = { x: tOl[0] - svgOlPx.x, y: tOl[1] - svgOlPx.y }
+  e.preventDefault()
+}
+
+const handleTouchMove = (e, { map, targetEl, olToCSS, getState, setState, snap, drag }) => {
+  if (!isOnTouchTarget(e.target) || drag.dragStartIndex == null) {
+    return
+  }
+  e.preventDefault()
+  const tOl = map.getEventPixel({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY })
+  const rawCoord = pixelToCoord(map, { x: tOl[0] - drag.vertexTouchDelta.x, y: tOl[1] - drag.vertexTouchDelta.y })
+  const newCoord = snap ? snap.apply(rawCoord) : rawCoord
+  snap?.hideIndicator()
+  const { olFeature, vertices } = getState()
+  if (!olFeature) {
+    return
+  }
+  moveVertex(olFeature, drag.dragStartIndex, newCoord)
+  setState({ vertices: vertices.map((c, i) => i === drag.dragStartIndex ? newCoord : c) })
+  showTouchTarget(targetEl, olToCSS({ x: tOl[0] - drag.targetTouchDelta.x, y: tOl[1] - drag.targetTouchDelta.y }))
+}
+
+const handleTap = (e, { map, getState, onTap, drag }) => {
+  if (!drag.tapStart || drag.tapStart.onTarget || e.changedTouches.length === 0) {
+    return
+  }
+  const t = e.changedTouches[0]
+  const dt = Date.now() - drag.tapStart.time
+  if (Math.hypot(t.clientX - drag.tapStart.x, t.clientY - drag.tapStart.y) < TAP_MOVE_THRESHOLD && dt < TAP_TIME_THRESHOLD) {
+    const tOl = map.getEventPixel({ clientX: t.clientX, clientY: t.clientY })
+    const tapState = getState()
+    onTap?.(findNearest(map, tapState.vertices, tapState.midpoints, { x: tOl[0], y: tOl[1] }, TOUCH_TOLERANCE))
+    e.preventDefault()
+  }
+}
+
+const handleTouchEnd = (e, ctx) => {
+  const { getState, onVertexMoved, snap, drag } = ctx
+  if (drag.dragStartIndex == null) {
+    handleTap(e, ctx)
+    drag.tapStart = null
+    return
+  }
+  drag.tapStart = null
+  const { vertices } = getState()
+  if (vertices[drag.dragStartIndex] && drag.dragStartCoord) {
+    onVertexMoved({ vertexIndex: drag.dragStartIndex, previousCoord: drag.dragStartCoord })
+  }
+  snap?.hideIndicator()
+  drag.dragStartCoord = null; drag.dragStartIndex = null; drag.vertexTouchDelta = null; drag.targetTouchDelta = null
+  e.preventDefault()
+}
+
+const wireTouchEvents = (deps) => {
+  const { container } = deps
+  const drag = {
+    dragStartCoord: null,
+    dragStartIndex: null,
+    vertexTouchDelta: null,
+    targetTouchDelta: null,
+    tapStart: null
+  }
+  const ctx = { ...deps, drag }
+
+  const onTouchstart = (e) => handleTouchStart(e, ctx)
+  const onTouchmove = (e) => handleTouchMove(e, ctx)
+  const onTouchend = (e) => handleTouchEnd(e, ctx)
+
+  container.addEventListener('touchstart', onTouchstart, { passive: false })
+  container.addEventListener('touchmove', onTouchmove, { passive: false })
+  container.addEventListener('touchend', onTouchend, { passive: false })
+
+  return {
+    isDragging: () => drag.dragStartIndex != null,
+    destroy () {
+      container.removeEventListener('touchstart', onTouchstart)
+      container.removeEventListener('touchmove', onTouchmove)
+      container.removeEventListener('touchend', onTouchend)
+    }
+  }
+}
+
+/**
+ * Touch vertex drag handler for edit mode.
+ * Shows an SVG offset target below the finger so the vertex can be repositioned
+ * without finger occlusion. Tap on a vertex or midpoint selects it via onTap.
+ *
+ * @param {{ map, container, getState, setState, onVertexMoved, onTap, colors }} options
+ * @returns {{ updateTargetPosition, updateColors, hide, destroy }}
+ */
+export const createTouchHandler = ({ map, container, getState, setState, onVertexMoved, onTap, colors, snap }) => {
+  const targetEl = createTouchTarget(container)
+  applyTouchTargetColors(targetEl, colors)
+
+  // OL pixel space is relative to ol-viewport at its pre-scale CSS size.
+  // Container CSS space is larger when a CSS transform scales up ol-viewport
+  // (e.g. scale(1.5) at medium map size makes OL pixels 1.5× smaller than CSS pixels).
+  const cssTx = { scale: 1, ox: 0, oy: 0 }
+  const olToCSS = (p) => ({ x: p.x * cssTx.scale + cssTx.ox, y: p.y * cssTx.scale + cssTx.oy })
+  const cssToOl = (p) => ({ x: (p.x - cssTx.ox) / cssTx.scale, y: (p.y - cssTx.oy) / cssTx.scale })
+
+  const syncCssTx = () => {
+    const vpEl = map.getViewport()
+    const vpRect = vpEl.getBoundingClientRect()
+    const cRect = container.getBoundingClientRect()
+    const vpScale = vpEl.offsetWidth > 0 ? vpRect.width / vpEl.offsetWidth : 1
+    const cScale = container.offsetWidth > 0 ? cRect.width / container.offsetWidth : 1
+    Object.assign(cssTx, {
+      scale: vpScale / cScale,
+      ox: (vpRect.left - cRect.left) / cScale,
+      oy: (vpRect.top - cRect.top) / cScale
+    })
+  }
+
+  const touchEvents = wireTouchEvents({ container, map, targetEl, olToCSS, cssToOl, getState, setState, onVertexMoved, onTap, snap })
+
+  const updateTargetPosition = () => {
+    const { selectedVertexIndex, vertices, interfaceType } = getState()
+    if (selectedVertexIndex < 0 || !vertices[selectedVertexIndex] || interfaceType !== 'touch') {
+      hideTouchTarget(targetEl)
+      return
+    }
+    const px = coordToPixel(map, vertices[selectedVertexIndex])
+    if (!px) {
+      hideTouchTarget(targetEl)
+      return
+    }
+    showTouchTarget(targetEl, olToCSS(px))
+  }
+
+  // Reposition on every render — keeps target anchored during pinch-zoom and pan.
+  // Skipped during drag since touchmove handles position directly.
+  const onPostrender = () => {
+    const { selectedVertexIndex, interfaceType } = getState()
+    if (selectedVertexIndex >= 0 && !touchEvents.isDragging() && interfaceType === 'touch') {
+      updateTargetPosition()
+    }
+  }
+  map.on('postrender', onPostrender)
+
+  const onSizeChange = () => { syncCssTx(); map.once('postrender', updateTargetPosition) }
+  map.on('change:size', onSizeChange)
+  syncCssTx()
+
+  return {
+    updateTargetPosition,
+    updateColors (newColors) { applyTouchTargetColors(targetEl, newColors) },
+    hide () { hideTouchTarget(targetEl) },
+    destroy () {
+      map.un('change:size', onSizeChange)
+      map.un('postrender', onPostrender)
+      touchEvents.destroy()
+      hideTouchTarget(targetEl)
+    }
+  }
+}

package/plugins/draw/src/adapters/openlayers/edit/touchHandler.test.js

@@ -0,0 +1,133 @@
+import { createTouchHandler } from './touchHandler.js'
+import { createFakeMap, createContainer, polygonFeature, domEvent } from '../__helpers__/harness.js'
+
+const RING = [[0, 0], [100, 0], [100, 100], [0, 100], [0, 0]]
+
+// Guard-path tests only — the happy touch-drag and tap flows are covered through EditMode
+const setup = (stateOverrides = {}, { snap = null } = {}) => {
+  const map = createFakeMap()
+  const container = createContainer()
+  const state = {
+    olFeature: polygonFeature(RING),
+    selectedVertexIndex: 1,
+    selectedVertexType: 'vertex',
+    vertices: [[0, 0], [100, 0], [100, 100], [0, 100]],
+    midpoints: [],
+    interfaceType: 'touch',
+    ...stateOverrides
+  }
+  const setState = jest.fn((updates) => Object.assign(state, updates))
+  const onVertexMoved = jest.fn()
+  const onTap = jest.fn()
+  const handler = createTouchHandler({ map, container, getState: () => state, setState, onVertexMoved, onTap, colors: {}, snap })
+  const grip = container.querySelector('[data-im-draw-touch-target] circle')
+  const touch = (type, x, y) => grip.dispatchEvent(domEvent(type, {
+    touches: [{ clientX: x, clientY: y }],
+    changedTouches: [{ clientX: x, clientY: y }]
+  }))
+  return { map, container, state, handler, onVertexMoved, onTap, touch, grip }
+}
+
+afterEach(() => { document.body.innerHTML = '' })
+
+test('touching the target with nothing selected starts neither a drag nor a tap', () => {
+  const { state, handler, touch, onVertexMoved, onTap } = setup({ selectedVertexIndex: -1 })
+  touch('touchstart', 100, 0)
+  touch('touchmove', 120, 10)
+  touch('touchend', 120, 10)
+  expect(onVertexMoved).not.toHaveBeenCalled()
+  expect(onTap).not.toHaveBeenCalled() // target touches never count as taps
+  expect(state.olFeature.getGeometry().getCoordinates()[0]).toEqual(RING)
+  handler.destroy()
+})
+
+test('a stray touchmove without an active drag is ignored', () => {
+  const { state, handler, touch } = setup()
+  touch('touchmove', 120, 10)
+  expect(state.olFeature.getGeometry().getCoordinates()[0]).toEqual(RING)
+  handler.destroy()
+})
+
+test('a drag halts safely if the feature disappears mid-gesture', () => {
+  const { state, handler, touch } = setup()
+  handler.updateTargetPosition() // target visible over vertex 1
+  touch('touchstart', 100, 0)
+  const feature = state.olFeature
+  state.olFeature = null
+  touch('touchmove', 120, 10)
+  expect(feature.getGeometry().getCoordinates()[0]).toEqual(RING)
+  handler.destroy()
+})
+
+test('the offset target hides when its vertex cannot be projected', () => {
+  const { map, container, handler } = setup()
+  handler.updateTargetPosition()
+  const target = container.querySelector('[data-im-draw-touch-target]')
+  expect(target.style.display).toBe('block')
+  map.getPixelFromCoordinate = () => null // e.g. mid view transition
+  handler.updateTargetPosition()
+  expect(target.style.display).toBe('none')
+  handler.destroy()
+})
+
+test('a drag applies snapping to the moved coordinate when a snap manager is active', () => {
+  const snap = { apply: jest.fn((c) => [c[0] + 5, c[1]]), hideIndicator: jest.fn() }
+  const { state, handler, touch } = setup({}, { snap })
+  handler.updateTargetPosition()
+  touch('touchstart', 100, 0)
+  touch('touchmove', 120, 10)
+  expect(snap.apply).toHaveBeenCalled()
+  expect(snap.hideIndicator).toHaveBeenCalled()
+  expect(state.vertices[1]).toEqual([125, 10]) // dragged to [120,10] then snapped +5 on x
+  handler.destroy()
+})
+
+test('a touch that drifts too far before lifting is not treated as a tap', () => {
+  const { container, handler, onTap } = setup({ selectedVertexIndex: -1 })
+  container.dispatchEvent(domEvent('touchstart', { touches: [{ clientX: 10, clientY: 10 }] }))
+  container.dispatchEvent(domEvent('touchend', { changedTouches: [{ clientX: 60, clientY: 60 }] })) // moved past the tap threshold
+  expect(onTap).not.toHaveBeenCalled()
+  handler.destroy()
+})
+
+test('a drag that ends after its vertex has vanished commits nothing', () => {
+  const { state, handler, touch, onVertexMoved } = setup()
+  handler.updateTargetPosition()
+  touch('touchstart', 100, 0)
+  touch('touchmove', 120, 10)
+  state.vertices = [] // the vertex is gone by the time the finger lifts
+  touch('touchend', 120, 10)
+  expect(onVertexMoved).not.toHaveBeenCalled()
+  handler.destroy()
+})
+
+test('a postrender with nothing selected leaves the target hidden', () => {
+  const { map, container, handler } = setup({ selectedVertexIndex: -1 })
+  const target = container.querySelector('[data-im-draw-touch-target]')
+  map.emit('postrender')
+  expect(target.style.display).toBe('none')
+  handler.destroy()
+})
+
+test('the CSS transform reflects a scaled viewport when element widths are measurable', () => {
+  const map = createFakeMap()
+  const container = createContainer()
+  const vp = map.getViewport()
+  Object.defineProperty(vp, 'offsetWidth', { value: 200, configurable: true })
+  Object.defineProperty(container, 'offsetWidth', { value: 100, configurable: true })
+  vp.getBoundingClientRect = () => ({ width: 300, height: 300, left: 0, top: 0 })
+  container.getBoundingClientRect = () => ({ width: 100, height: 100, left: 0, top: 0 })
+  const state = {
+    olFeature: polygonFeature(RING),
+    selectedVertexIndex: 1,
+    selectedVertexType: 'vertex',
+    vertices: [[0, 0], [100, 0], [100, 100], [0, 100]],
+    midpoints: [],
+    interfaceType: 'touch'
+  }
+  const handler = createTouchHandler({ map, container, getState: () => state, setState: jest.fn(), onVertexMoved: jest.fn(), onTap: jest.fn(), colors: {}, snap: null })
+  handler.updateTargetPosition() // vertex [100,0] -> pixel {100,0} -> scale 1.5 -> css left 150px
+  const target = container.querySelector('[data-im-draw-touch-target]')
+  expect(target.style.left).toBe('150px')
+  handler.destroy()
+})

package/plugins/draw/src/adapters/openlayers/edit/undoOps.js

@@ -0,0 +1,94 @@
+import {
+  getRingSegments,
+  getSegmentForIndex,
+  getModifiableCoords
+} from '../utils/geometryHelpers.js'
+
+/**
+ * Undo handlers for edit mode.
+ * Each operation receives the OL feature and the saved op payload,
+ * mutates the geometry, and returns the vertex index to re-select (or -1).
+ */
+
+export const undoMoveVertex = (olFeature, op) => {
+  const { vertexIndex, previousCoord } = op
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+  const result = getSegmentForIndex(segments, vertexIndex)
+  if (!result) {
+    return -1
+  }
+
+  const ring = getModifiableCoords(geojsonGeom, result.segment.path)
+  ring[result.localIdx] = [...previousCoord]
+  if (result.segment.closed && result.localIdx === 0) {
+    ring[ring.length - 1] = [...previousCoord]
+  }
+  geom.setCoordinates(geojsonGeom.coordinates)
+  return vertexIndex
+}
+
+export const undoInsertVertex = (olFeature, op) => {
+  const { vertexIndex } = op
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+  const result = getSegmentForIndex(segments, vertexIndex)
+  if (result) {
+    const ring = getModifiableCoords(geojsonGeom, result.segment.path)
+    ring.splice(result.localIdx, 1)
+    if (result.segment.closed) {
+      ring[ring.length - 1] = [...ring[0]]
+    }
+    geom.setCoordinates(geojsonGeom.coordinates)
+  }
+  // Undoing an insert removes the vertex, so there is never one to re-select
+  return -1
+}
+
+export const undoDeleteVertex = (olFeature, op) => {
+  const { vertexIndex, deletedCoord } = op
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+
+  let result = getSegmentForIndex(segments, vertexIndex)
+  // Vertex might be at a segment boundary after deletion shifted indices
+  if (!result) {
+    for (const seg of segments) {
+      if (vertexIndex === seg.start + seg.length) {
+        result = { segment: seg, localIdx: seg.length }
+        break
+      }
+    }
+  }
+  if (!result) {
+    return -1
+  }
+
+  const ring = getModifiableCoords(geojsonGeom, result.segment.path)
+  ring.splice(result.localIdx, 0, [...deletedCoord])
+  if (result.segment.closed) {
+    ring[ring.length - 1] = [...ring[0]]
+  }
+  geom.setCoordinates(geojsonGeom.coordinates)
+  return vertexIndex
+}
+
+/**
+ * Dispatch the correct undo handler based on operation type.
+ * @returns {number} vertex index to re-select after undo, or -1 for none
+ */
+export const applyUndo = (olFeature, op) => {
+  switch (op.type) {
+    case 'move_vertex':
+      return undoMoveVertex(olFeature, op)
+    case 'insert_vertex':
+      return undoInsertVertex(olFeature, op)
+    case 'delete_vertex':
+      return undoDeleteVertex(olFeature, op)
+    default:
+      return -1
+  }
+}

package/plugins/draw/src/adapters/openlayers/edit/undoOps.test.js

@@ -0,0 +1,64 @@
+import { applyUndo, undoMoveVertex, undoInsertVertex, undoDeleteVertex } from './undoOps.js'
+import { polygonFeature, lineFeature } from '../__helpers__/harness.js'
+
+const SQUARE = [[0, 0], [100, 0], [100, 100], [0, 100], [0, 0]]
+const ring = (feature) => feature.getGeometry().getCoordinates()[0]
+
+describe('undoMoveVertex', () => {
+  test('restores the previous coordinate, syncing the closing coord for ring vertex 0', () => {
+    const feature = polygonFeature(SQUARE)
+    expect(undoMoveVertex(feature, { vertexIndex: 0, previousCoord: [5, 5] })).toBe(0)
+    expect(ring(feature)[0]).toEqual([5, 5])
+    expect(ring(feature).at(-1)).toEqual([5, 5])
+  })
+
+  test('returns -1 for an index outside the geometry', () => {
+    expect(undoMoveVertex(polygonFeature(SQUARE), { vertexIndex: 99, previousCoord: [0, 0] })).toBe(-1)
+  })
+})
+
+describe('undoInsertVertex', () => {
+  test('removes the inserted vertex and keeps the ring closed', () => {
+    const feature = polygonFeature([[0, 0], [50, 0], [100, 0], [100, 100], [0, 100], [0, 0]])
+    expect(undoInsertVertex(feature, { vertexIndex: 1 })).toBe(-1)
+    expect(ring(feature)).toEqual(SQUARE)
+  })
+
+  test('returns -1 for an index outside the geometry', () => {
+    expect(undoInsertVertex(polygonFeature(SQUARE), { vertexIndex: 99 })).toBe(-1)
+  })
+
+  test('removes the inserted vertex from an open line without a closing-coordinate sync', () => {
+    const feature = lineFeature([[0, 0], [50, 0], [100, 0]])
+    expect(undoInsertVertex(feature, { vertexIndex: 1 })).toBe(-1)
+    expect(feature.getGeometry().getCoordinates()).toEqual([[0, 0], [100, 0]])
+  })
+})
+
+describe('undoDeleteVertex', () => {
+  test('re-inserts the deleted coordinate and re-selects it', () => {
+    const feature = polygonFeature([[0, 0], [100, 0], [0, 100], [0, 0]]) // square minus [100,100]
+    expect(undoDeleteVertex(feature, { vertexIndex: 2, deletedCoord: [100, 100] })).toBe(2)
+    expect(ring(feature)).toEqual([[0, 0], [100, 0], [100, 100], [0, 100], [0, 0]])
+  })
+
+  test('re-inserts at a segment boundary (the deleted vertex was the last of its part)', () => {
+    const feature = lineFeature([[0, 0], [10, 0]]) // [20,0] was deleted from the end
+    expect(undoDeleteVertex(feature, { vertexIndex: 2, deletedCoord: [20, 0] })).toBe(2)
+    expect(feature.getGeometry().getCoordinates()).toEqual([[0, 0], [10, 0], [20, 0]])
+  })
+
+  test('returns -1 when the index fits no segment at all', () => {
+    expect(undoDeleteVertex(lineFeature([[0, 0], [10, 0]]), { vertexIndex: 99, deletedCoord: [0, 0] })).toBe(-1)
+  })
+})
+
+describe('applyUndo dispatch', () => {
+  test('routes each operation type and ignores unknown ones', () => {
+    const feature = polygonFeature(SQUARE)
+    expect(applyUndo(feature, { type: 'move_vertex', vertexIndex: 1, previousCoord: [90, 0] })).toBe(1)
+    expect(applyUndo(feature, { type: 'delete_vertex', vertexIndex: 1, deletedCoord: [95, 0] })).toBe(1)
+    expect(applyUndo(feature, { type: 'insert_vertex', vertexIndex: 1 })).toBe(-1)
+    expect(applyUndo(feature, { type: 'resize' })).toBe(-1)
+  })
+})

package/plugins/draw/src/adapters/openlayers/edit/vertexHitTest.js

@@ -0,0 +1,74 @@
+import { coordToPixel, pixelDist } from '../utils/olCoords.js'
+
+// Also used as the Modify interaction's pixelTolerance so pointer hit
+// detection and OL's drag activation agree on what "on a handle" means
+export const PIXEL_TOLERANCE = 12
+
+/**
+ * Find the nearest vertex to a screen pixel within tolerance.
+ *
+ * @param {import('ol/Map').default} map
+ * @param {number[][]} vertices - flat coordinate array [[e,n], ...]
+ * @param {{ x: number, y: number }} pixel
+ * @param {number} [tolerance]
+ * @returns {{ index: number, type: 'vertex' } | null}
+ */
+export const findNearestVertex = (map, vertices, pixel, tolerance = PIXEL_TOLERANCE) => {
+  let bestIdx = -1
+  let bestDist = tolerance
+
+  vertices.forEach((coord, i) => {
+    const px = coordToPixel(map, coord)
+    if (!px) {
+      return
+    }
+    const d = pixelDist(px, pixel)
+    if (d < bestDist) {
+      bestDist = d
+      bestIdx = i
+    }
+  })
+
+  return bestIdx >= 0 ? { index: bestIdx, type: 'vertex' } : null
+}
+
+/**
+ * Find the nearest midpoint to a screen pixel within tolerance.
+ *
+ * @param {import('ol/Map').default} map
+ * @param {number[][]} midpoints - midpoint coordinate array
+ * @param {{ x: number, y: number }} pixel
+ * @param {number} vertexCount - number of actual vertices (midpoint index offset)
+ * @param {number} [tolerance]
+ * @returns {{ index: number, type: 'midpoint' } | null}
+ */
+export const findNearestMidpoint = (map, midpoints, pixel, vertexCount, tolerance = PIXEL_TOLERANCE) => {
+  let bestIdx = -1
+  let bestDist = tolerance
+
+  midpoints.forEach((coord, i) => {
+    const px = coordToPixel(map, coord)
+    if (!px) {
+      return
+    }
+    const d = pixelDist(px, pixel)
+    if (d < bestDist) {
+      bestDist = d
+      bestIdx = i
+    }
+  })
+
+  return bestIdx >= 0 ? { index: vertexCount + bestIdx, type: 'midpoint' } : null
+}
+
+/**
+ * Find the nearest vertex or midpoint to a pixel.
+ * Vertices take priority when equidistant.
+ *
+ * @param {number} [tolerance]
+ * @returns {{ index: number, type: 'vertex'|'midpoint' } | null}
+ */
+export const findNearest = (map, vertices, midpoints, pixel, tolerance = PIXEL_TOLERANCE) => {
+  return findNearestVertex(map, vertices, pixel, tolerance) ??
+    findNearestMidpoint(map, midpoints, pixel, vertices.length, tolerance)
+}

package/plugins/draw/src/adapters/openlayers/edit/vertexHitTest.test.js

@@ -0,0 +1,28 @@
+import { findNearest, findNearestVertex, findNearestMidpoint } from './vertexHitTest.js'
+import { createFakeMap } from '../__helpers__/harness.js'
+
+const map = createFakeMap()
+const vertices = [[0, 0], [100, 0]]
+const midpoints = [[50, 0]]
+
+test('finds the nearest vertex within the pixel tolerance', () => {
+  expect(findNearestVertex(map, vertices, { x: 98, y: 5 })).toEqual({ index: 1, type: 'vertex' })
+  expect(findNearestVertex(map, vertices, { x: 50, y: 50 })).toBeNull()
+})
+
+test('midpoint hits are offset by the vertex count', () => {
+  expect(findNearestMidpoint(map, midpoints, { x: 51, y: 2 }, 2)).toEqual({ index: 2, type: 'midpoint' })
+  expect(findNearestMidpoint(map, midpoints, { x: 200, y: 0 }, 2)).toBeNull()
+})
+
+test('vertices take priority over midpoints; nothing in range gives null', () => {
+  expect(findNearest(map, [[50, 4]], midpoints, { x: 50, y: 2 })).toEqual({ index: 0, type: 'vertex' })
+  expect(findNearest(map, vertices, midpoints, { x: 51, y: 2 })).toEqual({ index: 2, type: 'midpoint' })
+  expect(findNearest(map, vertices, midpoints, { x: 500, y: 500 })).toBeNull()
+})
+
+test('coordinates that cannot be projected are skipped', () => {
+  const blindMap = { getPixelFromCoordinate: () => null }
+  expect(findNearestVertex(blindMap, vertices, { x: 0, y: 0 })).toBeNull()
+  expect(findNearestMidpoint(blindMap, midpoints, { x: 50, y: 0 }, 2)).toBeNull()
+})