@defra/interactive-map 0.0.37-alpha → 0.0.39-alpha

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

@@ -0,0 +1,55 @@
+import VectorSource from 'ol/source/Vector.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+
+// Above the vertex (102) and midpoint (101) handle layers
+const ACTIVE_LAYER_Z_INDEX = 103
+
+/**
+ * Overlay layer rendering the currently selected vertex or midpoint handle.
+ * The vertex/midpoint layers hide their own circle at the selected index and
+ * this layer draws the highlighted version on top.
+ *
+ * @param {import('ol/Map').default} map
+ * @param {() => object} getStyles - returns the manager's current style set
+ *   (read at render time so style hot-swaps apply without rewiring)
+ * @returns {{ update: (state) => void, remove: () => void }}
+ */
+export const createActiveVertexLayer = (map, getStyles) => {
+  const source = new VectorSource()
+  const layer = new VectorLayer({ source, zIndex: ACTIVE_LAYER_Z_INDEX })
+  map.addLayer(layer)
+
+  const selectedCoordAndStyle = ({ selectedVertexIndex, selectedVertexType, vertices, midpoints }) => {
+    const styles = getStyles()
+    if (selectedVertexType === 'vertex') {
+      return { coord: vertices[selectedVertexIndex], style: styles.selectedVertexStyle }
+    }
+    if (selectedVertexType === 'midpoint') {
+      return { coord: midpoints[selectedVertexIndex - vertices.length], style: styles.selectedMidpointStyle }
+    }
+    return { coord: null, style: null }
+  }
+
+  return {
+    update (state) {
+      source.clear()
+      if (state.selectedVertexIndex < 0) {
+        return
+      }
+      const { coord, style } = selectedCoordAndStyle(state)
+      if (!coord) {
+        return
+      }
+      const feature = new Feature({ geometry: new Point(coord) })
+      feature.setStyle(style)
+      source.addFeature(feature)
+    },
+
+    remove () {
+      source.clear()
+      map.removeLayer(layer)
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+import { createActiveVertexLayer } from './activeVertexLayer.js'
+import { createFakeMap, createFakeManager } from '../__helpers__/harness.js'
+
+const setup = () => {
+  const map = createFakeMap()
+  const manager = createFakeManager()
+  const activeLayer = createActiveVertexLayer(map, () => manager.styles)
+  const source = map.layers[0].getSource()
+  const stateWith = (overrides) => ({
+    selectedVertexIndex: -1,
+    selectedVertexType: null,
+    vertices: [[0, 0], [10, 0], [10, 10]],
+    midpoints: [[5, 0], [10, 5], [5, 5]],
+    ...overrides
+  })
+  return { map, manager, activeLayer, source, stateWith }
+}
+
+test('renders the selected vertex with the selected-vertex style', () => {
+  const { activeLayer, source, manager, stateWith } = setup()
+  activeLayer.update(stateWith({ selectedVertexIndex: 1, selectedVertexType: 'vertex' }))
+  const features = source.getFeatures()
+  expect(features).toHaveLength(1)
+  expect(features[0].getGeometry().getCoordinates()).toEqual([10, 0])
+  expect(features[0].getStyle()).toBe(manager.styles.selectedVertexStyle)
+})
+
+test('renders a selected midpoint by its local index with the midpoint style', () => {
+  const { activeLayer, source, manager, stateWith } = setup()
+  activeLayer.update(stateWith({ selectedVertexIndex: 4, selectedVertexType: 'midpoint' }))
+  const features = source.getFeatures()
+  expect(features[0].getGeometry().getCoordinates()).toEqual([10, 5])
+  expect(features[0].getStyle()).toBe(manager.styles.selectedMidpointStyle)
+})
+
+test('renders nothing without a selection, for an unknown type, or for a missing coordinate', () => {
+  const { activeLayer, source, stateWith } = setup()
+  activeLayer.update(stateWith({ selectedVertexIndex: 1, selectedVertexType: 'vertex' }))
+  activeLayer.update(stateWith({}))
+  expect(source.getFeatures()).toHaveLength(0)
+  activeLayer.update(stateWith({ selectedVertexIndex: 0, selectedVertexType: 'segment' }))
+  expect(source.getFeatures()).toHaveLength(0)
+  activeLayer.update(stateWith({ selectedVertexIndex: 99, selectedVertexType: 'vertex' }))
+  expect(source.getFeatures()).toHaveLength(0)
+})
+
+test('remove clears the source and detaches the layer', () => {
+  const { map, activeLayer, source, stateWith } = setup()
+  activeLayer.update(stateWith({ selectedVertexIndex: 0, selectedVertexType: 'vertex' }))
+  activeLayer.remove()
+  expect(source.getFeatures()).toHaveLength(0)
+  expect(map.removeLayer).toHaveBeenCalled()
+})

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

@@ -0,0 +1,157 @@
+import { coordToPixel } from '../utils/olCoords.js'
+import { spatialNavigate } from '../../../utils/spatial.js'
+import { wireNudge } from './nudge.js'
+
+const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
+const INTERACTIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT', 'A'])
+
+const selectNearest = (map, getState, setState) => {
+  const { vertices, midpoints } = getState()
+  if (!vertices.length) {
+    return
+  }
+  const centerPx = coordToPixel(map, map.getView().getCenter())
+  if (!centerPx) {
+    return
+  }
+  const allPixels = [
+    ...vertices.map(c => coordToPixel(map, c)),
+    ...midpoints.map(c => coordToPixel(map, c))
+  ].filter(Boolean).map(p => [p.x, p.y])
+  const idx = spatialNavigate([centerPx.x, centerPx.y], allPixels, undefined)
+  setState({ selectedVertexIndex: idx, selectedVertexType: idx < vertices.length ? 'vertex' : 'midpoint' })
+}
+
+const navigateTo = (direction, map, getState, setState) => {
+  const { selectedVertexIndex, vertices, midpoints } = getState()
+  if (!vertices.length) {
+    return
+  }
+  const allCoords = [...vertices, ...midpoints]
+  const allPixels = allCoords.map(c => coordToPixel(map, c)).filter(Boolean).map(p => [p.x, p.y])
+  const startPx = selectedVertexIndex >= 0
+    ? allPixels[selectedVertexIndex]
+    : (() => {
+        const c = coordToPixel(map, map.getView().getCenter())
+        return c ? [c.x, c.y] : null
+      })()
+  if (!startPx) {
+    return
+  }
+  const idx = spatialNavigate(startPx, allPixels, direction)
+  setState({ selectedVertexIndex: idx, selectedVertexType: idx < vertices.length ? 'vertex' : 'midpoint' })
+}
+
+const isInteractiveElementFocused = (appViewport) => {
+  const el = document.activeElement
+  if (!el || el === document.body) {
+    return false
+  }
+  if (appViewport.contains(el)) {
+    return false
+  }
+  return INTERACTIVE_TAGS.has(el.tagName) || el.isContentEditable || el.hasAttribute('tabindex')
+}
+
+const buildKeydownHandler = ({ map, getState, setState, nudge, keyMove, onUndo, onKeyboardActive, isFocused }) => {
+  const handleArrowKey = (e) => {
+    if (e.altKey) {
+      e.preventDefault()
+      e.stopPropagation()
+      navigateTo(e.key, map, getState, setState)
+    } else if (getState().selectedVertexIndex >= 0) {
+      e.preventDefault()
+      e.stopPropagation()
+      nudge(e)
+    } else {
+      // No action: arrow with no selection and no alt modifier
+    }
+  }
+
+  const handleKey = (e) => {
+    onKeyboardActive?.()
+    if (e.key === ' ') {
+      e.preventDefault()
+      if (getState().selectedVertexIndex < 0) {
+        selectNearest(map, getState, setState)
+      }
+    } else if (ARROW_KEYS.has(e.key)) {
+      handleArrowKey(e)
+    } else if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
+      const tag = document.activeElement?.tagName
+      if (!INTERACTIVE_TAGS.has(tag)) {
+        e.preventDefault()
+        e.stopPropagation()
+        onUndo()
+      }
+    } else {
+      // No action
+    }
+  }
+
+  return (e) => {
+    if (isFocused()) {
+      return
+    }
+    if (e.key === 'Escape' && getState().selectedVertexIndex >= 0) {
+      e.preventDefault()
+      keyMove.start = null
+      keyMove.index = null
+      setState({ selectedVertexIndex: -1, selectedVertexType: null })
+    } else {
+      handleKey(e)
+    }
+  }
+}
+
+const buildKeyupHandler = ({ snap, keyMove, onVertexMoved, onDeleted, isFocused }) => (e) => {
+  if (isFocused()) {
+    return
+  }
+  if (ARROW_KEYS.has(e.key) && keyMove.start && keyMove.index != null) {
+    snap?.hideIndicator()
+    onVertexMoved({ vertexIndex: keyMove.index, previousCoord: keyMove.start })
+    keyMove.start = null
+    keyMove.index = null
+  }
+  if (e.key === 'Delete') {
+    onDeleted()
+  }
+}
+
+/**
+ * Keyboard handler for edit mode.
+ *
+ * Space       — select nearest vertex or midpoint to crosshair (only when nothing selected)
+ * Alt+Arrow   — navigate to next vertex/midpoint in that direction (requires selection)
+ * Arrow       — move selected vertex; if midpoint selected, inserts it as a vertex and moves it
+ * Shift+Arrow — same but fine nudge (1px vs 5px)
+ * Delete      — delete selected vertex (no-op on midpoints)
+ * Ctrl/Cmd+Z  — undo
+ *
+ * Midpoints remain midpoints until moved — navigating to a midpoint (Space/Alt+Arrow) does not
+ * convert it. Only pressing a plain/Shift arrow converts it.
+ *
+ * @param {{ map, getState, setState, snap, onVertexMoved, onInserted, onDeleted, onUndo, onKeyboardActive }} options
+ * @returns {{ nudgeByDelta: (dx: number, dy: number, isLargeStep: boolean) => void, destroy: () => void }}
+ */
+export const createKeyboardHandler = (options) => {
+  const { map, snap, getState, setState, onVertexMoved, onInserted, onDeleted, onUndo, onKeyboardActive } = options
+  const { nudge, keyMove, nudgeByDelta } = wireNudge({ map, snap, getState, setState, onInserted, onVertexMoved })
+  const appViewport = map.getViewport().closest('[role="application"]') ?? map.getViewport()
+  const isFocused = () => isInteractiveElementFocused(appViewport)
+
+  const onKeydown = buildKeydownHandler({ map, getState, setState, nudge, keyMove, onUndo, onKeyboardActive, isFocused })
+  const onKeyup = buildKeyupHandler({ snap, keyMove, onVertexMoved, onDeleted, isFocused })
+
+  globalThis.addEventListener('keydown', onKeydown, { capture: true })
+  globalThis.addEventListener('keyup', onKeyup, { capture: true })
+
+  return {
+    nudgeByDelta,
+    destroy () {
+      globalThis.removeEventListener('keydown', onKeydown, { capture: true })
+      globalThis.removeEventListener('keyup', onKeyup, { capture: true })
+    }
+  }
+}

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

@@ -0,0 +1,195 @@
+import { createKeyboardHandler } from './keyboardHandler.js'
+import { createFakeMap, polygonFeature } from '../__helpers__/harness.js'
+
+const RING = [[0, 0], [100, 0], [100, 100], [0, 0]]
+
+const setup = () => {
+  const map = createFakeMap({ center: [98, 98] }) // crosshair near vertex [100, 100]
+  const state = {
+    olFeature: polygonFeature(RING),
+    selectedVertexIndex: -1,
+    selectedVertexType: null,
+    vertices: [[0, 0], [100, 0], [100, 100]],
+    midpoints: [[50, 0], [100, 50], [50, 50]]
+  }
+  const setState = jest.fn((updates) => Object.assign(state, updates))
+  const callbacks = {
+    onVertexMoved: jest.fn(),
+    onInserted: jest.fn(),
+    onDeleted: jest.fn(),
+    onUndo: jest.fn(),
+    onKeyboardActive: jest.fn()
+  }
+  const handler = createKeyboardHandler({ map, getState: () => state, setState, snap: null, ...callbacks })
+  liveHandlers.push(handler)
+  return { map, state, setState, handler, ...callbacks }
+}
+
+const liveHandlers = []
+afterEach(() => {
+  liveHandlers.splice(0).forEach((h) => h.destroy())
+  document.body.innerHTML = ''
+})
+
+const key = (type, props) => window.dispatchEvent(new KeyboardEvent(type, { cancelable: true, ...props }))
+
+test('nudgeByDelta (exposed for MoveControl) moves the selected vertex and reports it via onVertexMoved', () => {
+  const { state, handler, onVertexMoved } = setup()
+  Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+  handler.nudgeByDelta(1, 0, true)
+  expect(state.vertices[1]).not.toEqual([100, 0])
+  expect(onVertexMoved).toHaveBeenCalledWith(expect.objectContaining({ vertexIndex: 1 }))
+})
+
+test('Space selects the vertex or midpoint nearest the crosshair, only when nothing is selected', () => {
+  const { state, setState, onKeyboardActive } = setup()
+  key('keydown', { key: ' ' })
+  expect(state.selectedVertexIndex).toBe(2) // [100, 100] is nearest [98, 98]
+  expect(state.selectedVertexType).toBe('vertex')
+  expect(onKeyboardActive).toHaveBeenCalled()
+  setState.mockClear()
+  key('keydown', { key: ' ' })
+  expect(setState).not.toHaveBeenCalled()
+})
+
+test('Space selects a midpoint when it is the handle nearest the crosshair', () => {
+  const map = createFakeMap({ center: [100, 48] }) // crosshair beside midpoint [100, 50]
+  const state = {
+    olFeature: polygonFeature(RING),
+    selectedVertexIndex: -1,
+    selectedVertexType: null,
+    vertices: [[0, 0], [100, 0], [100, 100]],
+    midpoints: [[50, 0], [100, 50], [50, 50]]
+  }
+  const setState = jest.fn((updates) => Object.assign(state, updates))
+  const handler = createKeyboardHandler({
+    map,
+    getState: () => state,
+    setState,
+    snap: null,
+    onVertexMoved: jest.fn(),
+    onInserted: jest.fn(),
+    onDeleted: jest.fn(),
+    onUndo: jest.fn(),
+    onKeyboardActive: jest.fn()
+  })
+  liveHandlers.push(handler)
+  key('keydown', { key: ' ' })
+  expect(state.selectedVertexIndex).toBe(4) // midpoint [100, 50]
+  expect(state.selectedVertexType).toBe('midpoint')
+})
+
+test('Alt+Arrow navigates the selection to the nearest handle in that direction', () => {
+  const { state } = setup()
+  Object.assign(state, { selectedVertexIndex: 2, selectedVertexType: 'vertex' })
+  key('keydown', { key: 'ArrowUp', altKey: true })
+  expect(state.selectedVertexIndex).toBe(4) // midpoint [100, 50] is nearest above [100, 100]
+  expect(state.selectedVertexType).toBe('midpoint')
+})
+
+test('Alt+Arrow with nothing selected navigates relative to the crosshair', () => {
+  const { state } = setup()
+  key('keydown', { key: 'ArrowUp', altKey: true }) // no selection → start from crosshair [98, 98]
+  expect(state.selectedVertexIndex).toBe(4) // midpoint [100, 50] above the crosshair
+  expect(state.selectedVertexType).toBe('midpoint')
+})
+
+test('Alt+Arrow can land the selection on a vertex', () => {
+  const { state } = setup()
+  Object.assign(state, { selectedVertexIndex: 4, selectedVertexType: 'midpoint' }) // midpoint [100, 50]
+  key('keydown', { key: 'ArrowUp', altKey: true })
+  expect(state.selectedVertexIndex).toBe(1) // vertex [100, 0] directly above
+  expect(state.selectedVertexType).toBe('vertex')
+})
+
+test('a plain arrow nudges the selected vertex, and keyup commits a single move op', () => {
+  const { state, onVertexMoved } = setup()
+  Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+  key('keydown', { key: 'ArrowRight' })
+  key('keydown', { key: 'ArrowRight' })
+  expect(state.vertices[1]).toEqual([110, 0])
+
+  key('keyup', { key: 'ArrowRight' })
+  expect(onVertexMoved).toHaveBeenCalledWith({ vertexIndex: 1, previousCoord: [100, 0] })
+  key('keyup', { key: 'ArrowRight' }) // no pending move — not committed twice
+  expect(onVertexMoved).toHaveBeenCalledTimes(1)
+})
+
+test('arrows without a selection do nothing', () => {
+  const { setState } = setup()
+  key('keydown', { key: 'ArrowRight' })
+  expect(setState).not.toHaveBeenCalled()
+})
+
+test('Escape clears the selection and any pending nudge', () => {
+  const { state, setState, onVertexMoved } = setup()
+  Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+  key('keydown', { key: 'ArrowRight' })
+  key('keydown', { key: 'Escape' })
+  expect(setState).toHaveBeenLastCalledWith({ selectedVertexIndex: -1, selectedVertexType: null })
+  key('keyup', { key: 'ArrowRight' })
+  expect(onVertexMoved).not.toHaveBeenCalled()
+})
+
+test('Delete deletes, ctrl/cmd+z undoes — but not while typing in an input inside the viewport', () => {
+  const { map, onDeleted, onUndo } = setup()
+  key('keyup', { key: 'Delete' })
+  expect(onDeleted).toHaveBeenCalled()
+  key('keydown', { key: 'z', ctrlKey: true })
+  expect(onUndo).toHaveBeenCalledTimes(1)
+
+  const input = document.createElement('input')
+  map.getViewport().appendChild(input)
+  input.focus()
+  key('keydown', { key: 'z', ctrlKey: true })
+  expect(onUndo).toHaveBeenCalledTimes(1)
+})
+
+test('keys are ignored while an interactive element outside the viewport has focus', () => {
+  const { onDeleted, onKeyboardActive } = setup()
+  const button = document.createElement('button')
+  document.body.appendChild(button)
+  button.focus()
+  key('keyup', { key: 'Delete' })
+  key('keydown', { key: ' ' })
+  expect(onDeleted).not.toHaveBeenCalled()
+  expect(onKeyboardActive).not.toHaveBeenCalled()
+})
+
+test('keys are ignored while a tabindex-focusable non-interactive element outside the viewport has focus', () => {
+  const { onDeleted } = setup()
+  const div = document.createElement('div')
+  div.tabIndex = 0 // focusable via tabindex, not one of the interactive tags
+  document.body.appendChild(div)
+  div.focus()
+  key('keyup', { key: 'Delete' })
+  expect(onDeleted).not.toHaveBeenCalled()
+})
+
+test('unhandled keys do nothing', () => {
+  const { setState } = setup()
+  key('keydown', { key: 'a' })
+  expect(setState).not.toHaveBeenCalled()
+})
+
+test('destroy removes the window listeners', () => {
+  const { handler, onDeleted } = setup()
+  handler.destroy()
+  key('keyup', { key: 'Delete' })
+  expect(onDeleted).not.toHaveBeenCalled()
+})
+
+test('selection and navigation are no-ops without handles or without projectable pixels', () => {
+  const { state, setState } = setup()
+  state.vertices = []
+  key('keydown', { key: ' ' })
+  key('keydown', { key: 'ArrowUp', altKey: true })
+  expect(setState).not.toHaveBeenCalled()
+
+  const { state: s2, setState: set2, map } = setup()
+  map.getPixelFromCoordinate = () => null // e.g. mid view transition
+  key('keydown', { key: ' ' })
+  key('keydown', { key: 'ArrowUp', altKey: true }) // no selection → start px unprojectable
+  expect(set2).not.toHaveBeenCalled()
+  expect(s2.selectedVertexIndex).toBe(-1)
+})

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

@@ -0,0 +1,57 @@
+import VectorSource from 'ol/source/Vector.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import { getMidpoints } from '../utils/geometryHelpers.js'
+
+/**
+ * Manages a dedicated overlay layer for midpoint handles in edit mode.
+ * Midpoints are always visible (unlike OL Modify's native midpoints which
+ * only appear when the pointer is near a segment). The selected midpoint is
+ * rendered by the separate active-selection layer in EditMode (zIndex 103).
+ */
+export const createMidpointLayer = (map, midpointStyle) => {
+  let currentStyle = midpointStyle
+  let selectedIndex = -1
+  const source = new VectorSource()
+  const layer = new VectorLayer({
+    source,
+    style: (feature) => feature.get('midpointIndex') === selectedIndex ? null : [currentStyle],
+    zIndex: 101
+  })
+  map.addLayer(layer)
+
+  return {
+    update (geom) {
+      source.clear()
+      const midpoints = getMidpoints(geom)
+      const features = midpoints.map((coord, i) => {
+        const f = new Feature({ geometry: new Point(coord) })
+        f.set('midpointIndex', i)
+        return f
+      })
+      source.addFeatures(features)
+    },
+
+    setSelected (index) {
+      selectedIndex = index
+      source.changed()
+    },
+
+    updateStyle (newMidpointStyle) {
+      currentStyle = newMidpointStyle
+      source.changed()
+    },
+
+    getCoords () {
+      return source.getFeatures()
+        .sort((a, b) => a.get('midpointIndex') - b.get('midpointIndex'))
+        .map(f => f.getGeometry().getCoordinates())
+    },
+
+    remove () {
+      source.clear()
+      map.removeLayer(layer)
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import Style from 'ol/style/Style.js'
+import { createMidpointLayer } from './midpointLayer.js'
+import { createFakeMap } from '../__helpers__/harness.js'
+
+const GEOM = { type: 'Polygon', coordinates: [[[0, 0], [10, 0], [10, 10], [0, 0]]] }
+
+const setup = () => {
+  const map = createFakeMap()
+  const style = new Style({})
+  const handles = createMidpointLayer(map, style)
+  const layer = map.layers[0]
+  return { map, style, handles, layer, source: layer.getSource() }
+}
+
+test('update renders one handle per segment midpoint, retrievable in index order', () => {
+  const { handles, source } = setup()
+  handles.update(GEOM)
+  expect(source.getFeatures()).toHaveLength(3)
+  expect(handles.getCoords()).toEqual([[5, 0], [10, 5], [5, 5]])
+})
+
+test('the selected midpoint is hidden here and styles hot-swap', () => {
+  const { handles, layer, style, source } = setup()
+  handles.update(GEOM)
+  handles.setSelected(0)
+  const styleFn = layer.getStyle()
+  const featureAt = (i) => source.getFeatures().find(f => f.get('midpointIndex') === i)
+  expect(styleFn(featureAt(0))).toBeNull()
+  expect(styleFn(featureAt(1))).toEqual([style])
+
+  const newStyle = new Style({})
+  handles.updateStyle(newStyle)
+  expect(styleFn(featureAt(1))).toEqual([newStyle])
+})
+
+test('remove clears and detaches the layer', () => {
+  const { map, handles, source } = setup()
+  handles.update(GEOM)
+  handles.remove()
+  expect(source.getFeatures()).toHaveLength(0)
+  expect(map.layers).toHaveLength(0)
+})

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

@@ -0,0 +1,83 @@
+import Modify from 'ol/interaction/Modify.js'
+import Collection from 'ol/Collection.js'
+import { findNearest, PIXEL_TOLERANCE } from './vertexHitTest.js'
+
+/**
+ * Derive the undo operation from the vertex arrays before and after an OL
+ * Modify drag. A grown array means a midpoint drag inserted a vertex; an
+ * equal-length array with a changed coordinate means a vertex move.
+ *
+ * @param {number[][]} prevCoords - vertices snapshotted at modifystart
+ * @param {number[][]} newCoords - vertices after modifyend
+ * @returns {{ type: string, vertexIndex: number, previousCoord?: number[] } | null}
+ */
+export const deriveModifyOp = (prevCoords, newCoords) => {
+  if (newCoords.length > prevCoords.length) {
+    const insertedIdx = newCoords.findIndex((c, i) => c[0] !== prevCoords[i]?.[0])
+    return { type: 'insert_vertex', vertexIndex: Math.max(0, insertedIdx) }
+  }
+  if (newCoords.length === prevCoords.length) {
+    const movedIdx = newCoords.findIndex((c, i) => c[0] !== prevCoords[i][0] || c[1] !== prevCoords[i][1])
+    if (movedIdx >= 0) {
+      return { type: 'move_vertex', vertexIndex: movedIdx, previousCoord: prevCoords[movedIdx] }
+    }
+  }
+  return null
+}
+
+// Only activate Modify when clicking on a vertex/midpoint handle, never for the
+// touch interface (touchHandler covers touch drags via the SVG offset target)
+export const buildModifyCondition = ({ map, getState }) => (mapBrowserEvent) => {
+  const { interfaceType, vertices, midpoints } = getState()
+  if (interfaceType === 'touch') {
+    return false
+  }
+  const olPixel = map.getEventPixel(mapBrowserEvent.originalEvent)
+  return findNearest(map, vertices, midpoints, { x: olPixel[0], y: olPixel[1] }) !== null
+}
+
+/**
+ * OL Modify interaction wiring for edit mode.
+ *
+ * Modify handles pointer vertex dragging and midpoint insertion natively; this
+ * wrapper restricts it to clicks on a handle (buildModifyCondition) and reports
+ * each completed drag via `onModifyEnd(prevCoords)` with the vertices
+ * snapshotted at drag start.
+ *
+ * @returns {{ destroy: () => void }}
+ */
+export const createModifyInteraction = ({ map, olFeature, getState, onModifyEnd }) => {
+  const condition = buildModifyCondition({ map, getState })
+
+  const modifyInteraction = new Modify({
+    features: new Collection([olFeature]),
+    style: () => [], // vertex circles rendered by vertexLayer instead
+    pixelTolerance: PIXEL_TOLERANCE,
+    condition
+  })
+  map.addInteraction(modifyInteraction)
+
+  let startCoords = null
+
+  modifyInteraction.on('modifystart', () => {
+    if (getState().interfaceType === 'touch') {
+      return
+    }
+    startCoords = getState().vertices.map(c => [...c])
+  })
+
+  modifyInteraction.on('modifyend', () => {
+    if (getState().interfaceType === 'touch') {
+      return
+    }
+    const prevCoords = startCoords
+    startCoords = null
+    onModifyEnd(prevCoords)
+  })
+
+  return {
+    destroy () {
+      map.removeInteraction(modifyInteraction)
+    }
+  }
+}