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

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

@@ -0,0 +1,80 @@
+import { deriveModifyOp, buildModifyCondition, createModifyInteraction } from './modifyInteraction.js'
+import { createFakeMap, polygonFeature } from '../__helpers__/harness.js'
+
+const RING = [[0, 0], [10, 0], [10, 10], [0, 0]]
+
+describe('deriveModifyOp', () => {
+  const prev = [[0, 0], [10, 0], [10, 10]]
+
+  test('a moved vertex becomes a move_vertex op with its previous coordinate', () => {
+    expect(deriveModifyOp(prev, [[0, 0], [12, 2], [10, 10]]))
+      .toEqual({ type: 'move_vertex', vertexIndex: 1, previousCoord: [10, 0] })
+  })
+
+  test('a grown array becomes an insert_vertex op at the first differing index', () => {
+    expect(deriveModifyOp(prev, [[0, 0], [5, 5], [10, 0], [10, 10]]))
+      .toEqual({ type: 'insert_vertex', vertexIndex: 1 })
+    expect(deriveModifyOp(prev, [...prev, [9, 9]]))
+      .toEqual({ type: 'insert_vertex', vertexIndex: 3 })
+  })
+
+  test('no coordinate change or a shrunk array yields no op', () => {
+    expect(deriveModifyOp(prev, prev.map(c => [...c]))).toBeNull()
+    expect(deriveModifyOp(prev, prev.slice(0, 2))).toBeNull()
+  })
+})
+
+describe('buildModifyCondition', () => {
+  const event = (x, y) => ({ originalEvent: { clientX: x, clientY: y } })
+  const conditionFor = (interfaceType) => buildModifyCondition({
+    map: createFakeMap(),
+    getState: () => ({ interfaceType, vertices: [[10, 10]], midpoints: [[50, 50]] })
+  })
+
+  test('activates on a vertex or midpoint handle but not on empty map', () => {
+    const condition = conditionFor('mouse')
+    expect(condition(event(11, 11))).toBe(true)
+    expect(condition(event(51, 49))).toBe(true)
+    expect(condition(event(200, 200))).toBe(false)
+  })
+
+  test('never activates for the touch interface', () => {
+    expect(conditionFor('touch')(event(11, 11))).toBe(false)
+  })
+})
+
+describe('createModifyInteraction', () => {
+  const setup = (interfaceType = 'mouse') => {
+    const map = createFakeMap()
+    const state = { interfaceType, vertices: [[0, 0], [10, 0]], midpoints: [] }
+    const onModifyEnd = jest.fn()
+    const modify = createModifyInteraction({ map, olFeature: polygonFeature(RING), getState: () => state, onModifyEnd })
+    return { map, state, onModifyEnd, modify, interaction: map.interactions[0] }
+  }
+
+  test('reports a completed drag with the vertices snapshotted at drag start', () => {
+    const { state, onModifyEnd, interaction } = setup()
+    interaction.dispatchEvent({ type: 'modifystart' })
+    state.vertices = [[5, 5], [10, 0]] // drag mutates state via geometry change
+    interaction.dispatchEvent({ type: 'modifyend' })
+    expect(onModifyEnd).toHaveBeenCalledWith([[0, 0], [10, 0]])
+  })
+
+  test('touch drags are ignored entirely', () => {
+    const { onModifyEnd, interaction } = setup('touch')
+    interaction.dispatchEvent({ type: 'modifystart' })
+    interaction.dispatchEvent({ type: 'modifyend' })
+    expect(onModifyEnd).not.toHaveBeenCalled()
+  })
+
+  test('vertex handles are rendered by the vertex layer, not by Modify itself', () => {
+    const { interaction } = setup()
+    expect(interaction.getOverlay().getStyleFunction()()).toEqual([])
+  })
+
+  test('destroy removes the interaction from the map', () => {
+    const { map, modify, interaction } = setup()
+    modify.destroy()
+    expect(map.removeInteraction).toHaveBeenCalledWith(interaction)
+  })
+})

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

@@ -0,0 +1,118 @@
+import { nudgeCoord } from '../utils/olCoords.js'
+import { moveVertex, insertAtMidpoint } from './vertexOps.js'
+import { KEYBOARD } from '../defaults.js'
+
+const SNAP_PROGRESS_RATIO = 0.5
+
+/**
+ * Returns snappedCoord, but escapes snap if it prevents sufficient progress in the
+ * nudge direction. Covers vertex-stuck (snap holds position) and edge-hugging
+ * (vertex slides along edge).
+ */
+export const resolveSnappedCoord = (snap, map, current, nudgedCoord, snappedCoord, dx, dy) => {
+  if (!snap) {
+    return snappedCoord
+  }
+  const nudgeVec = [nudgedCoord[0] - current[0], nudgedCoord[1] - current[1]]
+  const actualVec = [snappedCoord[0] - current[0], snappedCoord[1] - current[1]]
+  const nudgeLenSq = nudgeVec[0] ** 2 + nudgeVec[1] ** 2
+  const dot = actualVec[0] * nudgeVec[0] + actualVec[1] * nudgeVec[1]
+  if (nudgeLenSq > 0 && dot / nudgeLenSq < SNAP_PROGRESS_RATIO) {
+    const escapePx = snap.snapRadius + 1
+    return nudgeCoord(map, current, dx === 0 ? 0 : Math.sign(dx) * escapePx, dy === 0 ? 0 : Math.sign(dy) * escapePx)
+  }
+  return snappedCoord
+}
+
+/**
+ * Arrow-key vertex nudging for edit mode.
+ *
+ * `keyMove` tracks the coordinate at the start of a nudge sequence so a single
+ * move_vertex undo op can be pushed on keyup (see keyboardHandler).
+ *
+ * @returns {{ nudge: (e: KeyboardEvent) => void, keyMove: { start, index }, nudgeByDelta: (dx: number, dy: number, isLargeStep: boolean) => void }}
+ */
+export const wireNudge = ({ map, snap, getState, setState, onInserted, onVertexMoved }) => {
+  const keyMove = { start: null, index: null }
+
+  // Shared core: moves the selected vertex by an already pixel-scaled delta,
+  // applying snap. Returns the previous coordinate (for undo) and vertex index,
+  // or null if there's no valid vertex selection to move.
+  const moveSelectedVertexBy = (dx, dy) => {
+    const { selectedVertexIndex, vertices, olFeature } = getState()
+    if (!olFeature || selectedVertexIndex < 0 || !vertices[selectedVertexIndex]) {
+      return null
+    }
+    const current = vertices[selectedVertexIndex]
+    const nudgedCoord = nudgeCoord(map, current, dx, dy)
+    const snappedCoord = snap ? snap.apply(nudgedCoord) : nudgedCoord
+    snap?.hideIndicator()
+    const newCoord = resolveSnappedCoord(snap, map, current, nudgedCoord, snappedCoord, dx, dy)
+    moveVertex(olFeature, selectedVertexIndex, newCoord)
+    setState({ vertices: vertices.map((c, i) => i === selectedVertexIndex ? newCoord : c) })
+    return { previousCoord: current, vertexIndex: selectedVertexIndex }
+  }
+
+  // Insert the midpoint as a vertex then move it — midpoints stay as midpoints until actually moved.
+  const nudgeMidpoint = (olFeature, midpoints, selectedVertexIndex, vertices, dx, dy) => {
+    const result = insertAtMidpoint(olFeature, midpoints, selectedVertexIndex, vertices.length)
+    if (!result) {
+      return
+    }
+    onInserted({ insertedIndex: result.insertedIndex }) // pushes insert_vertex undo + syncGeom
+    const updatedVertices = getState().vertices
+    const insertedCoord = updatedVertices[result.insertedIndex]
+    if (!insertedCoord) {
+      return
+    }
+    keyMove.start = [...insertedCoord]
+    keyMove.index = result.insertedIndex
+    const nudgedCoord = nudgeCoord(map, insertedCoord, dx, dy)
+    const movedCoord = snap ? snap.apply(nudgedCoord) : nudgedCoord
+    moveVertex(olFeature, result.insertedIndex, movedCoord)
+    setState({
+      selectedVertexIndex: result.insertedIndex,
+      selectedVertexType: 'vertex',
+      vertices: updatedVertices.map((c, i) => i === result.insertedIndex ? movedCoord : c)
+    })
+  }
+
+  const nudge = (e) => {
+    const { selectedVertexIndex, selectedVertexType, vertices, midpoints, olFeature } = getState()
+    if (!olFeature) {
+      return
+    }
+    const step = e.shiftKey ? KEYBOARD.nudgeAmount : KEYBOARD.stepAmount
+    const offsets = { ArrowUp: [0, -step], ArrowDown: [0, step], ArrowLeft: [-step, 0], ArrowRight: [step, 0] }
+    const [dx, dy] = offsets[e.key]
+    if (selectedVertexType === 'midpoint') {
+      nudgeMidpoint(olFeature, midpoints, selectedVertexIndex, vertices, dx, dy)
+      return
+    }
+    if (selectedVertexIndex < 0 || !vertices[selectedVertexIndex]) {
+      return
+    }
+    if (!keyMove.start) {
+      keyMove.start = [...vertices[selectedVertexIndex]]
+      keyMove.index = selectedVertexIndex
+    }
+    moveSelectedVertexBy(dx, dy)
+  }
+
+  // Explicit-delta counterpart to nudge(e) — the entry point for MoveControl's
+  // D-pad (see mapProvider.activeMoveTarget in events.js). Unlike nudge(e)'s
+  // held-key sequencing (undo pushed on keyup via keyMove, so repeated keydowns
+  // while held batch into one undo step), each call here is one complete,
+  // undoable action — a button click has no "held" state to batch. Midpoints
+  // aren't handled here: MoveControl only claims the D-pad once a real vertex is
+  // selected (see buildVertexMoveTarget in events.js).
+  const nudgeByDelta = (dx, dy, isLargeStep) => {
+    const step = isLargeStep ? KEYBOARD.stepAmount : KEYBOARD.nudgeAmount
+    const result = moveSelectedVertexBy(dx * step, dy * step)
+    if (result) {
+      onVertexMoved({ vertexIndex: result.vertexIndex, previousCoord: result.previousCoord })
+    }
+  }
+
+  return { nudge, keyMove, nudgeByDelta }
+}

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

@@ -0,0 +1,165 @@
+import { wireNudge, resolveSnappedCoord } from './nudge.js'
+import { getCoords } from '../utils/geometryHelpers.js'
+import { createFakeMap, polygonFeature } from '../__helpers__/harness.js'
+
+const RING = [[0, 0], [10, 0], [10, 10], [0, 0]]
+
+const setup = ({ snap = null } = {}) => {
+  const map = createFakeMap()
+  const olFeature = polygonFeature(RING)
+  const state = {
+    olFeature,
+    selectedVertexIndex: -1,
+    selectedVertexType: null,
+    vertices: [[0, 0], [10, 0], [10, 10]],
+    midpoints: [[5, 0], [10, 5], [5, 5]]
+  }
+  const setState = jest.fn((updates) => Object.assign(state, updates))
+  const onInserted = jest.fn(() => {
+    // EditMode's onInserted runs syncGeom, refreshing vertices from the geometry
+    state.vertices = getCoords({ type: 'Polygon', coordinates: olFeature.getGeometry().getCoordinates() })
+  })
+  const onVertexMoved = jest.fn()
+  const { nudge, keyMove, nudgeByDelta } = wireNudge({ map, snap, getState: () => state, setState, onInserted, onVertexMoved })
+  return { olFeature, state, setState, onInserted, onVertexMoved, nudge, keyMove, nudgeByDelta }
+}
+
+const ring = (olFeature) => olFeature.getGeometry().getCoordinates()[0]
+
+describe('nudging a vertex', () => {
+  test('a plain arrow moves the selected vertex by the step amount, shift by the fine amount', () => {
+    const { state, nudge, olFeature } = setup()
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudge({ key: 'ArrowRight', shiftKey: false })
+    expect(ring(olFeature)[1]).toEqual([15, 0])
+    nudge({ key: 'ArrowDown', shiftKey: true })
+    expect(ring(olFeature)[1]).toEqual([15, 1])
+  })
+
+  test('the start coordinate is captured once for the whole nudge sequence (single undo op)', () => {
+    const { state, nudge, keyMove } = setup()
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudge({ key: 'ArrowRight' })
+    nudge({ key: 'ArrowRight' })
+    expect(keyMove).toEqual({ start: [10, 0], index: 1 })
+  })
+
+  test('does nothing without a feature or a valid selection', () => {
+    const { state, nudge, setState } = setup()
+    nudge({ key: 'ArrowRight' }) // nothing selected
+    state.olFeature = null
+    nudge({ key: 'ArrowRight' })
+    expect(setState).not.toHaveBeenCalled()
+  })
+})
+
+describe('nudgeByDelta (MoveControl D-pad)', () => {
+  test('moves the selected vertex by an explicit direction, scaled by isLargeStep, and reports the move for undo', () => {
+    const { state, nudgeByDelta, olFeature, onVertexMoved } = setup()
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudgeByDelta(1, 0, true)
+    expect(ring(olFeature)[1]).toEqual([15, 0])
+    expect(onVertexMoved).toHaveBeenCalledWith({ vertexIndex: 1, previousCoord: [10, 0] })
+
+    onVertexMoved.mockClear()
+    nudgeByDelta(0, 1, false)
+    expect(ring(olFeature)[1]).toEqual([15, 1])
+    expect(onVertexMoved).toHaveBeenCalledWith({ vertexIndex: 1, previousCoord: [15, 0] })
+  })
+
+  test('each call is its own undo-able action, unlike nudge(e)\'s held-key batching', () => {
+    const { state, nudgeByDelta, onVertexMoved } = setup()
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudgeByDelta(1, 0, true)
+    nudgeByDelta(1, 0, true)
+    expect(onVertexMoved).toHaveBeenCalledTimes(2)
+  })
+
+  test('does nothing without a feature or a valid vertex selection, and never touches midpoints', () => {
+    const { state, nudgeByDelta, onVertexMoved } = setup()
+    nudgeByDelta(1, 0, true) // nothing selected
+    Object.assign(state, { selectedVertexIndex: 4, selectedVertexType: 'midpoint' })
+    nudgeByDelta(1, 0, true) // midpoint selected — MoveControl only claims a real vertex
+    state.olFeature = null
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudgeByDelta(1, 0, true)
+    expect(onVertexMoved).not.toHaveBeenCalled()
+  })
+})
+
+describe('nudging a midpoint', () => {
+  test('inserts the midpoint as a vertex, then moves and selects it', () => {
+    const { state, nudge, onInserted, olFeature, setState } = setup()
+    Object.assign(state, { selectedVertexIndex: 4, selectedVertexType: 'midpoint' }) // midpoint [10, 5]
+    nudge({ key: 'ArrowRight', shiftKey: false })
+    expect(onInserted).toHaveBeenCalledWith({ insertedIndex: 2 })
+    expect(ring(olFeature)[2]).toEqual([15, 5])
+    expect(setState).toHaveBeenLastCalledWith(expect.objectContaining({
+      selectedVertexIndex: 2, selectedVertexType: 'vertex'
+    }))
+  })
+
+  test('an invalid midpoint index is a no-op', () => {
+    const { state, nudge, onInserted } = setup()
+    Object.assign(state, { selectedVertexIndex: 99, selectedVertexType: 'midpoint' })
+    nudge({ key: 'ArrowRight' })
+    expect(onInserted).not.toHaveBeenCalled()
+  })
+
+  test('snaps the inserted-then-moved coordinate when a snap manager is active', () => {
+    const snap = { apply: jest.fn((c) => [c[0] + 2, c[1]]), hideIndicator: jest.fn(), snapRadius: 12 }
+    const { state, nudge, olFeature } = setup({ snap })
+    Object.assign(state, { selectedVertexIndex: 4, selectedVertexType: 'midpoint' }) // midpoint [10, 5]
+    nudge({ key: 'ArrowRight', shiftKey: false })
+    expect(snap.apply).toHaveBeenCalled()
+    expect(ring(olFeature)[2]).toEqual([17, 5]) // inserted [10,5] nudged +5 -> [15,5], snapped +2 -> [17,5]
+  })
+
+  test('stops safely if the inserted vertex is not reflected in state', () => {
+    const { state, nudge, onInserted, setState } = setup()
+    onInserted.mockImplementation(() => {}) // consumer failed to sync vertices
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'midpoint', vertices: [] })
+    nudge({ key: 'ArrowRight' }) // insert succeeds but the inserted coord is missing from state
+    expect(onInserted).toHaveBeenCalled()
+    expect(setState).not.toHaveBeenCalled()
+  })
+})
+
+describe('snapping while nudging', () => {
+  const snapReturning = (impl) => ({ apply: jest.fn(impl), hideIndicator: jest.fn(), snapRadius: 12 })
+
+  test('the snapped coordinate is used when it makes progress in the nudge direction', () => {
+    const snap = snapReturning((c) => [c[0] + 1, c[1]])
+    const { state, nudge, olFeature } = setup({ snap })
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudge({ key: 'ArrowRight' })
+    expect(ring(olFeature)[1]).toEqual([16, 0])
+    expect(snap.hideIndicator).toHaveBeenCalled()
+  })
+
+  test('escapes the snap radius when snapping blocks the nudge', () => {
+    const snap = snapReturning(() => [10, 0]) // snap holds the vertex in place
+    const { state, nudge, olFeature } = setup({ snap })
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudge({ key: 'ArrowRight' })
+    expect(ring(olFeature)[1]).toEqual([23, 0]) // snapRadius + 1 past the original position
+  })
+})
+
+describe('resolveSnappedCoord', () => {
+  test('returns the snapped coordinate without a snap manager or when progress is sufficient', () => {
+    const map = createFakeMap()
+    expect(resolveSnappedCoord(null, map, [0, 0], [5, 0], [4, 0], 5, 0)).toEqual([4, 0])
+    expect(resolveSnappedCoord({ snapRadius: 12 }, map, [0, 0], [5, 0], [4, 0], 5, 0)).toEqual([4, 0])
+  })
+
+  test('escapes along both axes of a diagonal nudge when blocked', () => {
+    const map = createFakeMap()
+    expect(resolveSnappedCoord({ snapRadius: 12 }, map, [0, 0], [5, 5], [0, 0], 5, 5)).toEqual([13, 13])
+  })
+
+  test('escapes only the vertical axis when the horizontal delta is zero', () => {
+    const map = createFakeMap()
+    expect(resolveSnappedCoord({ snapRadius: 12 }, map, [0, 0], [0, 5], [0, 0], 0, 5)).toEqual([0, 13])
+  })
+})

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

@@ -0,0 +1,79 @@
+import { findNearest } from './vertexHitTest.js'
+
+/**
+ * Pointer/mouse selection handlers for edit mode, plus the global
+ * delete-vertex button listener.
+ *
+ * Interface-type flips here mutate state directly (not via setState) because
+ * switching device must not touch the current selection.
+ *
+ * @returns {{ destroy: () => void }}
+ */
+export const createPointerHandlers = ({ map, container, getState, setState, touchHandler, deleteVertexButtonId, onDeleteVertex }) => {
+  const hitAt = (e) => {
+    const { vertices, midpoints } = getState()
+    const olPixel = map.getEventPixel(e)
+    return findNearest(map, vertices, midpoints, { x: olPixel[0], y: olPixel[1] })
+  }
+
+  const onPointerdown = (e) => {
+    const state = getState()
+    if (e.pointerType === 'touch') {
+      state.interfaceType = 'touch'
+      touchHandler.updateTargetPosition()
+      return
+    }
+    state.interfaceType = 'mouse'
+    const hit = hitAt(e)
+    if (hit?.type === 'vertex') {
+      setState({ selectedVertexIndex: hit.index, selectedVertexType: 'vertex' })
+    }
+  }
+
+  // click fires after OL Modify finishes, so state.vertices reflects any insertions/moves
+  const onContainerClick = (e) => {
+    if (getState().interfaceType === 'touch') {
+      return
+    }
+    const hit = hitAt(e)
+    if (hit?.type === 'vertex') {
+      setState({ selectedVertexIndex: hit.index, selectedVertexType: 'vertex' })
+    } else if (hit?.type === 'midpoint') {
+      // modifyend already selected the inserted vertex — nothing to do here
+    } else {
+      setState({ selectedVertexIndex: -1, selectedVertexType: null })
+    }
+  }
+
+  // Switch to pointer mode and hide the touch target as soon as the mouse moves
+  const onPointerMove = (e) => {
+    const state = getState()
+    if (e.pointerType !== 'mouse' || state.interfaceType === 'mouse') {
+      return
+    }
+    state.interfaceType = 'mouse'
+    touchHandler.hide()
+  }
+
+  const onButtonClick = (e) => {
+    if (deleteVertexButtonId && e.target.closest(`#${deleteVertexButtonId}`)) {
+      onDeleteVertex()
+    }
+  }
+
+  container.addEventListener('pointerdown', onPointerdown)
+  container.addEventListener('pointerenter', onPointerMove)
+  container.addEventListener('pointermove', onPointerMove)
+  container.addEventListener('click', onContainerClick)
+  globalThis.addEventListener('click', onButtonClick)
+
+  return {
+    destroy () {
+      container.removeEventListener('pointerdown', onPointerdown)
+      container.removeEventListener('pointerenter', onPointerMove)
+      container.removeEventListener('pointermove', onPointerMove)
+      container.removeEventListener('click', onContainerClick)
+      globalThis.removeEventListener('click', onButtonClick)
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+import { createPointerHandlers } from './pointerHandlers.js'
+import { createFakeMap, createContainer, domEvent } from '../__helpers__/harness.js'
+
+const setup = (interfaceType = 'mouse') => {
+  const map = createFakeMap()
+  const container = createContainer()
+  const button = document.createElement('button')
+  button.id = 'delete-vertex'
+  document.body.appendChild(button)
+  const state = { interfaceType, vertices: [[10, 10]], midpoints: [[50, 50]] }
+  const setState = jest.fn((updates) => Object.assign(state, updates))
+  const touchHandler = { updateTargetPosition: jest.fn(), hide: jest.fn() }
+  const onDeleteVertex = jest.fn()
+  const handlers = createPointerHandlers({
+    map, container, getState: () => state, setState, touchHandler, deleteVertexButtonId: 'delete-vertex', onDeleteVertex
+  })
+  return { container, button, state, setState, touchHandler, onDeleteVertex, handlers }
+}
+
+afterEach(() => { document.body.innerHTML = '' })
+
+const pointer = (type, pointerType, x = 0, y = 0) => domEvent(type, { pointerType, clientX: x, clientY: y })
+
+test('touch pointerdown switches to touch interface and repositions the touch target', () => {
+  const { container, state, touchHandler, setState } = setup()
+  container.dispatchEvent(pointer('pointerdown', 'touch'))
+  expect(state.interfaceType).toBe('touch')
+  expect(touchHandler.updateTargetPosition).toHaveBeenCalled()
+  expect(setState).not.toHaveBeenCalled() // device switch must not touch the selection
+})
+
+test('mouse pointerdown selects a vertex under the pointer, but nothing elsewhere', () => {
+  const { container, state, setState } = setup('touch')
+  container.dispatchEvent(pointer('pointerdown', 'mouse', 11, 11))
+  expect(state.interfaceType).toBe('mouse')
+  expect(setState).toHaveBeenCalledWith({ selectedVertexIndex: 0, selectedVertexType: 'vertex' })
+  setState.mockClear()
+  container.dispatchEvent(pointer('pointerdown', 'mouse', 200, 200))
+  expect(setState).not.toHaveBeenCalled()
+})
+
+test('click selects a vertex, deselects on empty map, leaves midpoints to Modify, and ignores touch', () => {
+  const { container, state, setState } = setup()
+  container.dispatchEvent(pointer('click', 'mouse', 11, 11))
+  expect(setState).toHaveBeenCalledWith({ selectedVertexIndex: 0, selectedVertexType: 'vertex' })
+  container.dispatchEvent(pointer('click', 'mouse', 51, 49))
+  expect(setState).toHaveBeenCalledTimes(1) // midpoint click: modifyend already handled selection
+  container.dispatchEvent(pointer('click', 'mouse', 200, 200))
+  expect(setState).toHaveBeenLastCalledWith({ selectedVertexIndex: -1, selectedVertexType: null })
+
+  state.interfaceType = 'touch'
+  setState.mockClear()
+  container.dispatchEvent(pointer('click', 'mouse', 11, 11))
+  expect(setState).not.toHaveBeenCalled()
+})
+
+test('mouse movement switches the interface back to mouse and hides the touch target once', () => {
+  const { container, state, touchHandler } = setup('touch')
+  container.dispatchEvent(pointer('pointermove', 'pen'))
+  expect(state.interfaceType).toBe('touch')
+  container.dispatchEvent(pointer('pointermove', 'mouse'))
+  expect(state.interfaceType).toBe('mouse')
+  container.dispatchEvent(pointer('pointermove', 'mouse'))
+  expect(touchHandler.hide).toHaveBeenCalledTimes(1)
+})
+
+test('the delete-vertex button triggers deletion; other clicks and destroy() do not', () => {
+  const { button, container, onDeleteVertex, handlers } = setup()
+  button.dispatchEvent(domEvent('click', {}))
+  expect(onDeleteVertex).toHaveBeenCalledTimes(1)
+  document.body.dispatchEvent(domEvent('click', {}))
+  expect(onDeleteVertex).toHaveBeenCalledTimes(1)
+
+  handlers.destroy()
+  button.dispatchEvent(domEvent('click', {}))
+  container.dispatchEvent(pointer('pointerdown', 'touch'))
+  expect(onDeleteVertex).toHaveBeenCalledTimes(1)
+})

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

@@ -0,0 +1,116 @@
+import { getCoords, getMidpoints } from '../utils/geometryHelpers.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+
+// Deferred commit-level geometrychange emitter (feature + change phase + vertex index)
+// consumed by the validation layer. Deferred a tick so that a rejection's revert runs
+// after the current mutation's undo bookkeeping has settled.
+const createGeometryValidationEmitter = (manager, store, olFeature) => (phase, vertexIndex) => {
+  if (!phase) { return }
+  setTimeout(() => {
+    manager.emit(ADAPTER_EVENTS.GEOMETRY_CHANGE, { feature: store.toGeoJSON(olFeature), phase, vertexIndex })
+  }, 0)
+}
+
+// Reflect the current selection onto the handle layers and emit VERTEX_SELECTION.
+const applySelectionChange = (state, { vertexLayer, midpointLayer, activeLayer, manager, hooks }) => {
+  vertexLayer.setSelected(state.selectedVertexType === 'vertex' ? state.selectedVertexIndex : -1)
+  midpointLayer.setSelected(
+    state.selectedVertexType === 'midpoint' ? state.selectedVertexIndex - state.vertices.length : -1
+  )
+  if (state.selectedVertexIndex < 0) {
+    hooks.onDeselect?.()
+  }
+  activeLayer.update(state)
+  manager.emit(ADAPTER_EVENTS.VERTEX_SELECTION, {
+    index: state.selectedVertexType === 'vertex' ? state.selectedVertexIndex : -1,
+    numVertices: state.vertices.length
+  })
+}
+
+/**
+ * Mutable edit-mode state shared by the Modify interaction, pointer, touch and
+ * keyboard handlers, plus the setState/sync helpers that keep the handle
+ * layers, the active-selection overlay and the adapter events in step with it.
+ *
+ * Hooks (`onDeselect`, `onUpdate`) are bound late via `setHooks` because the
+ * touch handler both consumes this state and needs to react to its changes.
+ *
+ * @returns {{ state, getState, setState, syncGeom, updateLayersFromGeom, setHooks, destroy }}
+ */
+export const createSelectionState = ({ map, manager, store, olFeature, interfaceType, layers }) => {
+  const { vertexLayer, midpointLayer, activeLayer } = layers
+
+  const state = {
+    olFeature,
+    selectedVertexIndex: -1,
+    selectedVertexType: null,
+    vertices: [],
+    midpoints: [],
+    interfaceType: interfaceType ?? 'mouse'
+  }
+
+  const hooks = { onDeselect: null, onUpdate: null }
+  const setHooks = ({ onDeselect, onUpdate }) => Object.assign(hooks, { onDeselect, onUpdate })
+
+  const plainGeom = () => {
+    const geom = olFeature.getGeometry()
+    return { type: geom.getType(), coordinates: geom.getCoordinates() }
+  }
+
+  const applySelectionChangeLocal = () => applySelectionChange(state, { vertexLayer, midpointLayer, activeLayer, manager, hooks })
+
+  const applyVertexChange = () => {
+    const geom = plainGeom()
+    midpointLayer.update(geom)
+    vertexLayer.update(geom)
+    state.midpoints = midpointLayer.getCoords()
+    activeLayer.update(state)
+    hooks.onUpdate?.()
+    map.render()
+  }
+
+  const setState = (updates) => {
+    Object.assign(state, updates)
+    if (updates.selectedVertexIndex !== undefined) {
+      applySelectionChangeLocal()
+    }
+    if (updates.vertices !== undefined) {
+      applyVertexChange()
+    }
+  }
+
+  // Lightweight per-frame update during drag — refreshes layers without emitting events
+  const updateLayersFromGeom = () => {
+    const geom = plainGeom()
+    state.vertices = getCoords(geom)
+    state.midpoints = getMidpoints(geom)
+    midpointLayer.update(geom)
+    vertexLayer.update(geom)
+    activeLayer.update(state)
+  }
+
+  const syncGeom = () => {
+    updateLayersFromGeom()
+    manager.emit(ADAPTER_EVENTS.VERTEX_CHANGE, { numVertices: state.vertices.length })
+    manager.emit(ADAPTER_EVENTS.UPDATE, store.toGeoJSON(olFeature))
+  }
+
+  const emitGeometryValidation = createGeometryValidationEmitter(manager, store, olFeature)
+
+  // Keep overlay layers in sync on every geometry change (e.g. during pointer drag)
+  const onGeometryChange = () => updateLayersFromGeom()
+  olFeature.getGeometry().on('change', onGeometryChange)
+
+  return {
+    state,
+    getState: () => state,
+    setState,
+    syncGeom,
+    emitGeometryValidation,
+    updateLayersFromGeom,
+    setHooks,
+    destroy () {
+      olFeature.getGeometry().un('change', onGeometryChange)
+    }
+  }
+}