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

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

@@ -0,0 +1,385 @@
+import { createMidpointLayer } from './midpointLayer.js'
+import { createVertexLayer } from './vertexLayer.js'
+import { createActiveVertexLayer } from './activeVertexLayer.js'
+import { createSelectionState } from './selectionState.js'
+import { createModifyInteraction, deriveModifyOp } from './modifyInteraction.js'
+import { createPointerHandlers } from './pointerHandlers.js'
+import { createTouchHandler } from './touchHandler.js'
+import { createKeyboardHandler } from './keyboardHandler.js'
+import { deleteVertex, insertAtMidpoint } from './vertexOps.js'
+import { applyUndo } from './undoOps.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+import { STYLES_CHANGED_EVENT } from '../core/internalEvents.js'
+import { createLiveStroke } from '../../../validation/liveStroke.js'
+
+const TOUCH_INTERFACE = 'touch'
+const VERTEX_TYPE = 'vertex'
+const MOVE_VERTEX = 'commit-move'
+const INSERT_VERTEX = 'commit-insert'
+const DELETE_VERTEX = 'commit-delete'
+
+// Map an undo-op type onto the geometry-change `phase` consumed by validation.
+const OP_PHASE = {
+  move_vertex: MOVE_VERTEX,
+  insert_vertex: INSERT_VERTEX,
+  delete_vertex: DELETE_VERTEX
+}
+
+// Undoing an op commits the inverse change (undo of a delete re-inserts, etc.),
+// so its re-validation reports the inverse phase.
+const UNDO_INVERSE_PHASE = {
+  move_vertex: MOVE_VERTEX,
+  insert_vertex: DELETE_VERTEX,
+  delete_vertex: INSERT_VERTEX
+}
+
+// Live invalid-stroke wiring: re-validate the displayed geometry on every geometry
+// change (Modify drag, touch drag, keyboard nudge) via the shared controller —
+// default rules synchronously, user callback throttled. All committed vertices are
+// "placed", so the polygon count drops only OL's closing duplicate.
+//
+// The style is set ONCE to a function backed by `invalid`, rather than calling
+// Feature#setStyle() on every flip: setStyle() fires a feature-level 'change'
+// event, which OL's Modify interaction also listens for (to detect out-of-band
+// edits and rebuild its internal drag/segment index) — guarded only while Modify
+// itself is synchronously mutating the geometry. The built-in rules' flip stays
+// inside that guarded window, but the user-callback flip is deliberately
+// throttled to the next animation frame (liveStroke.js), landing outside it —
+// so calling setStyle() there makes Modify treat its own flip as an external
+// edit and rebuild mid-drag, killing the in-progress drag. A style function +
+// map.render() repaints without ever touching the feature, so Modify's listener
+// never fires from our own bookkeeping.
+const wireLiveStroke = ({ map, manager, olFeature }) => {
+  let invalid = false
+  olFeature.setStyle(() => (invalid ? manager.styles.editFeatureStyleInvalid : manager.styles.editFeatureStyle))
+  const liveStroke = createLiveStroke({
+    onChange: (next, reason) => {
+      invalid = next
+      map.render()
+      // In edit mode the displayed shape is exactly what Done finishes, so live
+      // validity flips also gate the Done button (events.js dispatches them).
+      manager.emit(ADAPTER_EVENTS.VALIDITY_CHANGE, { valid: !next, reason })
+    }
+  })
+  const updateLiveValidity = () => {
+    const geom = olFeature.getGeometry()
+    const type = geom.getType()
+    const coordinates = geom.getCoordinates()
+    const numVertices = type === 'Polygon'
+      ? Math.max(0, (coordinates[0]?.length ?? 1) - 1)
+      : coordinates.length
+    liveStroke.update({
+      feature: { type: 'Feature', geometry: { type, coordinates } },
+      context: { mode: 'edit_vertex' },
+      numVertices,
+      onGeometryChange: manager._geometryValidator
+    })
+  }
+  olFeature.getGeometry().on('change', updateLiveValidity)
+  return {
+    liveStroke,
+    destroy () {
+      olFeature.getGeometry().un('change', updateLiveValidity)
+      liveStroke.destroy()
+    }
+  }
+}
+
+/**
+ * Edit vertex mode — handles edit_vertex.
+ *
+ * createEditMode composes the OL pieces along their natural seams:
+ *   - selectionState: shared mutable state + layer/event sync
+ *   - modifyInteraction: OL Modify (pointer drag / midpoint insert) + undo-op derivation
+ *   - pointerHandlers: mouse selection + delete-vertex button
+ *   - touchHandler / keyboardHandler: touch drag and keyboard nudge input
+ */
+
+// Delete-selected-vertex and undo operations, shared by pointer, touch and keyboard input
+const createVertexActions = ({ olFeature, undoStack, selection, getTouchHandler }) => {
+  const { state, setState, syncGeom, emitGeometryValidation } = selection
+
+  const doDeleteVertex = () => {
+    if (state.selectedVertexType !== VERTEX_TYPE || state.selectedVertexIndex < 0) {
+      return
+    }
+    const result = deleteVertex(olFeature, state.selectedVertexIndex)
+    if (!result) {
+      return
+    }
+    undoStack.push({ type: 'delete_vertex', vertexIndex: result.deletedIndex, deletedCoord: result.deletedCoord })
+    syncGeom()
+    emitGeometryValidation(DELETE_VERTEX, result.deletedIndex)
+    setState({ selectedVertexIndex: -1, selectedVertexType: null })
+  }
+
+  const doUndo = () => {
+    const op = undoStack.pop()
+    if (!op) {
+      return
+    }
+    const previousIndex = state.selectedVertexIndex
+    const restoredIndex = applyUndo(olFeature, op)
+    syncGeom()
+    // An undo commits the inverse change, so it must re-validate like any other
+    // commit — otherwise the invalid stroke and the Done gate go stale.
+    emitGeometryValidation(UNDO_INVERSE_PHASE[op.type], restoredIndex)
+    // Only re-select if a vertex was already active — undo must not create a new selection
+    const newIndex = previousIndex >= 0 ? restoredIndex : -1
+    setState({
+      selectedVertexIndex: newIndex,
+      selectedVertexType: newIndex >= 0 ? VERTEX_TYPE : null
+    })
+    if (previousIndex >= 0 && newIndex >= 0 && state.interfaceType === TOUCH_INTERFACE) {
+      getTouchHandler().updateTargetPosition()
+    }
+  }
+
+  return { doDeleteVertex, doUndo }
+}
+
+const wireTouchHandler = ({ map, container, manager, snap, olFeature, undoStack, selection }) => {
+  const { state, getState, setState, syncGeom, emitGeometryValidation } = selection
+  const selectVertex = (index) => setState({ selectedVertexIndex: index, selectedVertexType: VERTEX_TYPE })
+
+  const touchHandler = createTouchHandler({
+    map,
+    container,
+    getState,
+    setState,
+    colors: manager.colors,
+    snap,
+    onVertexMoved ({ vertexIndex, previousCoord }) {
+      undoStack.push({ type: 'move_vertex', vertexIndex, previousCoord })
+      syncGeom()
+      emitGeometryValidation(MOVE_VERTEX, vertexIndex)
+      selectVertex(vertexIndex)
+      touchHandler.updateTargetPosition()
+    },
+    onTap (hit) {
+      if (!hit) {
+        setState({ selectedVertexIndex: -1, selectedVertexType: null })
+        return
+      }
+      if (hit.type === VERTEX_TYPE) {
+        selectVertex(hit.index)
+        touchHandler.updateTargetPosition()
+        return
+      }
+      // Only vertex and midpoint hits reach here, and the vertex case returned above
+      const result = insertAtMidpoint(olFeature, state.midpoints, hit.index, state.vertices.length)
+      if (!result) {
+        return
+      }
+      undoStack.push({ type: 'insert_vertex', vertexIndex: result.insertedIndex })
+      syncGeom()
+      emitGeometryValidation(INSERT_VERTEX, result.insertedIndex)
+      selectVertex(result.insertedIndex)
+      touchHandler.updateTargetPosition()
+    }
+  })
+
+  selection.setHooks({
+    onDeselect: () => touchHandler.hide(),
+    onUpdate () {
+      if (state.interfaceType === TOUCH_INTERFACE) {
+        touchHandler.updateTargetPosition()
+      }
+    }
+  })
+
+  return touchHandler
+}
+
+const wireKeyboardHandler = ({ map, container, snap, undoStack, selection, touchHandler, actions }) => {
+  const { state, getState, setState, syncGeom, emitGeometryValidation } = selection
+
+  return createKeyboardHandler({
+    map,
+    getState,
+    setState,
+    snap,
+    onVertexMoved ({ vertexIndex, previousCoord }) {
+      undoStack.push({ type: 'move_vertex', vertexIndex, previousCoord })
+      syncGeom()
+      emitGeometryValidation(MOVE_VERTEX, vertexIndex)
+      setState({ selectedVertexIndex: vertexIndex, selectedVertexType: VERTEX_TYPE })
+    },
+    onInserted ({ insertedIndex }) {
+      undoStack.push({ type: 'insert_vertex', vertexIndex: insertedIndex })
+      syncGeom()
+      emitGeometryValidation(INSERT_VERTEX, insertedIndex)
+    },
+    onDeleted: actions.doDeleteVertex,
+    onUndo: actions.doUndo,
+    onKeyboardActive () {
+      if (state.interfaceType === 'keyboard') {
+        return
+      }
+      state.interfaceType = 'keyboard'
+      touchHandler.hide()
+      container.focus({ preventScroll: true })
+    }
+  })
+}
+
+// Style hot-swap on map style change + touch-target reposition on map resize
+const wireMapSync = ({ map, manager, layers, selection, touchHandler, live }) => {
+  const { state } = selection
+
+  const onStylesChanged = (styles) => {
+    // Re-assert through the live-stroke controller so an invalid (dashed) shape
+    // stays dashed across a map style change.
+    live.liveStroke.refresh()
+    layers.vertexLayer.updateStyle(styles.vertexStyle)
+    layers.midpointLayer.updateStyle(styles.midpointStyle)
+    layers.activeLayer.update(state)
+    touchHandler.updateColors(manager.colors)
+  }
+  manager.on(STYLES_CHANGED_EVENT, onStylesChanged)
+
+  // Reposition the touch target after OL re-renders with the new size.
+  // change:size fires before the render, so we wait for postrender to get
+  // correct pixel coords from getPixelFromCoordinate.
+  const onMapSizeChange = () => {
+    if (state.interfaceType !== TOUCH_INTERFACE || state.selectedVertexIndex < 0) {
+      return
+    }
+    map.once('postrender', () => touchHandler.updateTargetPosition())
+  }
+  map.on('change:size', onMapSizeChange)
+
+  return {
+    destroy () {
+      manager.off(STYLES_CHANGED_EVENT, onStylesChanged)
+      map.un('change:size', onMapSizeChange)
+    }
+  }
+}
+
+// The mode interface consumed by OLDrawManager
+const buildModeApi = ({ manager, store, olFeature, originalFeatureStyle, selection, actions, parts }) => {
+  const { state } = selection
+  const { touchHandler } = parts
+
+  return {
+    setInterfaceType (type) {
+      if (type === state.interfaceType) {
+        return
+      }
+      state.interfaceType = type
+      if (type === TOUCH_INTERFACE) {
+        touchHandler.updateTargetPosition()
+      } else {
+        touchHandler.hide()
+      }
+    },
+
+    done () {
+      manager.emit(ADAPTER_EVENTS.EDIT_FINISH, store.toGeoJSON(olFeature))
+    },
+
+    // Committed-verdict write (events.js): routed through the live-stroke
+    // controller so its cached state stays in sync with the rendered style.
+    setInvalid (invalid) {
+      parts.live.liveStroke.set(invalid)
+    },
+
+    // Nothing to restore here: the pre-edit feature is kept as tempFeature in the
+    // reducer and events.js re-adds it on cancel
+    cancel () {},
+
+    undo: actions.doUndo,
+    deleteVertex: actions.doDeleteVertex,
+    // MoveControl's D-pad, routed here via mapProvider.activeMoveTarget (see
+    // events.js) once a vertex is selected.
+    nudgeSelectedVertex: parts.keyboardHandler.nudgeByDelta,
+
+    destroy () {
+      parts.live.destroy()
+      olFeature.setStyle(originalFeatureStyle)
+      selection.destroy()
+      parts.mapSync.destroy()
+      parts.pointerHandlers.destroy()
+      parts.modify.destroy()
+      parts.layers.activeLayer.remove()
+      parts.layers.midpointLayer.remove()
+      parts.layers.vertexLayer.remove()
+      touchHandler.destroy()
+      parts.keyboardHandler.destroy()
+    }
+  }
+}
+
+/**
+ * @returns {{ setInterfaceType, done, cancel, undo, deleteVertex, nudgeSelectedVertex, destroy } | null}
+ */
+export const createEditMode = ({ map, manager, options }) => {
+  const { featureId, container, interfaceType, deleteVertexButtonId, snap } = options
+  const { store, undoStack } = manager
+
+  const olFeature = store.getOL(featureId)
+  if (!olFeature) {
+    return null
+  }
+
+  const originalFeatureStyle = olFeature.getStyle()
+
+  const midpointLayer = createMidpointLayer(map, manager.styles.midpointStyle)
+  const vertexLayer = createVertexLayer(map, manager.styles.vertexStyle)
+  const activeLayer = createActiveVertexLayer(map, () => manager.styles)
+
+  const selection = createSelectionState({
+    map,
+    manager,
+    store,
+    olFeature,
+    interfaceType,
+    layers: { vertexLayer, midpointLayer, activeLayer }
+  })
+  const { state, getState, setState, syncGeom, emitGeometryValidation } = selection
+
+  const modify = createModifyInteraction({
+    map,
+    olFeature,
+    getState,
+    onModifyEnd (prevCoords) {
+      syncGeom()
+      const op = prevCoords && deriveModifyOp(prevCoords, state.vertices)
+      if (!op) {
+        return
+      }
+      undoStack.push(op)
+      emitGeometryValidation(OP_PHASE[op.type], op.vertexIndex)
+      setState({ selectedVertexIndex: op.vertexIndex, selectedVertexType: VERTEX_TYPE })
+    }
+  })
+
+  syncGeom() // initial populate
+
+  const layers = { vertexLayer, midpointLayer, activeLayer }
+  const live = wireLiveStroke({ map, manager, olFeature })
+  const touchHandler = wireTouchHandler({ map, container, manager, snap, olFeature, undoStack, selection })
+  const actions = createVertexActions({ olFeature, undoStack, selection, getTouchHandler: () => touchHandler })
+  const keyboardHandler = wireKeyboardHandler({ map, container, snap, undoStack, selection, touchHandler, actions })
+  const pointerHandlers = createPointerHandlers({
+    map,
+    container,
+    getState,
+    setState,
+    touchHandler,
+    deleteVertexButtonId,
+    onDeleteVertex: actions.doDeleteVertex
+  })
+  const mapSync = wireMapSync({ map, manager, layers, selection, touchHandler, live })
+
+  return buildModeApi({
+    manager,
+    store,
+    olFeature,
+    originalFeatureStyle,
+    selection,
+    actions,
+    parts: { touchHandler, keyboardHandler, pointerHandlers, modify, mapSync, layers, live }
+  })
+}

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

@@ -0,0 +1,303 @@
+import { createEditMode } from './EditMode.js'
+import { createFeatureStore } from '../core/featureStore.js'
+import { STYLES_CHANGED_EVENT } from '../core/internalEvents.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+import { createFakeMap, createFakeManager, createContainer, domEvent } from '../__helpers__/harness.js'
+import Style from 'ol/style/Style.js'
+import Polygon from 'ol/geom/Polygon.js'
+
+const RING = [[0, 0], [100, 0], [100, 100], [0, 100], [0, 0]] // square: 4 vertices, deletable
+
+// The feature style is a live function (see wireLiveStroke in EditMode.js — avoids
+// Feature#setStyle() on every flip, which would break an in-progress Modify drag),
+// not a static Style instance, so tests must invoke it to read the current style.
+const currentStyle = (olFeature) => olFeature.getStyle()()
+
+const setup = (ring = RING) => {
+  const map = createFakeMap()
+  const manager = createFakeManager()
+  manager.store = createFeatureStore()
+  manager.store.add({ type: 'Feature', id: 'f1', properties: {}, geometry: { type: 'Polygon', coordinates: [ring] } })
+  const container = createContainer()
+  map.getViewport().appendChild(container) // keyboard handler treats focus inside the viewport as map focus
+  const mode = createEditMode({
+    map,
+    manager,
+    options: { featureId: 'f1', container, interfaceType: 'mouse', deleteVertexButtonId: 'del-v', snap: null }
+  })
+  liveModes.push(mode)
+  const olFeature = manager.store.getOL('f1')
+  const tapAt = (x, y) => {
+    container.dispatchEvent(domEvent('touchstart', { touches: [{ clientX: x, clientY: y }] }))
+    container.dispatchEvent(domEvent('touchend', { changedTouches: [{ clientX: x, clientY: y }] }))
+  }
+  return { map, manager, container, mode, olFeature, ring: () => olFeature.getGeometry().getCoordinates()[0], tapAt }
+}
+
+const liveModes = []
+afterEach(() => {
+  liveModes.splice(0).forEach((m) => m?.destroy())
+  document.body.innerHTML = ''
+})
+
+const key = (type, props) => window.dispatchEvent(new KeyboardEvent(type, { cancelable: true, ...props }))
+
+test('returns null for an unknown feature id', () => {
+  const { map, manager } = setup()
+  expect(createEditMode({ map, manager, options: { featureId: 'nope', container: createContainer() } })).toBeNull()
+})
+
+test('entering edit mode swaps the feature style and reports the initial vertex state', () => {
+  const { manager, olFeature } = setup()
+  expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyle)
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_CHANGE, { numVertices: 4 })
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.UPDATE, expect.objectContaining({ id: 'f1' }))
+})
+
+test('setInvalid swaps between the solid and dashed edit styles', () => {
+  const { manager, mode, olFeature } = setup()
+  mode.setInvalid(true)
+  expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyleInvalid)
+  mode.setInvalid(false)
+  expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyle)
+})
+
+test('a mid-drag crossing turns the stroke dashed live, and back when it clears', () => {
+  const { manager, olFeature } = setup()
+  // Geometry mutation (as during a Modify/touch drag) — no commit yet.
+  olFeature.getGeometry().setCoordinates([[[0, 0], [100, 100], [100, 0], [0, 100], [0, 0]]])
+  expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyleInvalid)
+  olFeature.getGeometry().setCoordinates([[[0, 0], [100, 0], [100, 100], [0, 100], [0, 0]]])
+  expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyle)
+})
+
+test('a validity flip repaints the map without touching the feature — Modify tracks its own drag via feature #change, which setStyle() would trip', () => {
+  const { map, olFeature } = setup()
+  const renderCallsBefore = map.render.mock.calls.length
+  olFeature.getGeometry().setCoordinates([[[0, 0], [100, 100], [100, 0], [0, 100], [0, 0]]])
+  expect(map.render.mock.calls.length).toBeGreaterThan(renderCallsBefore)
+})
+
+test('validity flips while editing also gate the Done button', () => {
+  const { manager, olFeature } = setup()
+  olFeature.getGeometry().setCoordinates([[[0, 0], [100, 100], [100, 0], [0, 100], [0, 0]]])
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VALIDITY_CHANGE,
+    expect.objectContaining({ valid: false, reason: expect.any(String) }))
+  olFeature.getGeometry().setCoordinates([[[0, 0], [100, 0], [100, 100], [0, 100], [0, 0]]])
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VALIDITY_CHANGE,
+    expect.objectContaining({ valid: true }))
+})
+
+test('the user callback runs throttled during an edit drag', () => {
+  jest.useFakeTimers()
+  const { manager, olFeature } = setup()
+  manager._geometryValidator = jest.fn(() => ({ valid: false, reason: 'outside region' }))
+  olFeature.getGeometry().setCoordinates([[[0, 0], [110, 0], [100, 100], [0, 100], [0, 0]]])
+  olFeature.getGeometry().setCoordinates([[[0, 0], [120, 0], [100, 100], [0, 100], [0, 0]]])
+  expect(manager._geometryValidator).not.toHaveBeenCalled() // deferred to the frame
+  jest.runAllTimers()
+  expect(manager._geometryValidator).toHaveBeenCalledTimes(1) // trailing edge only
+  expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyleInvalid)
+  jest.useRealTimers()
+})
+
+test('done() emits the edited feature; cancel() is a no-op', () => {
+  const { manager, mode } = setup()
+  mode.done()
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.EDIT_FINISH, expect.objectContaining({ id: 'f1' }))
+  expect(mode.cancel()).toBeUndefined()
+})
+
+test('select via pointer, delete the vertex, then undo restores it', () => {
+  const { container, manager, mode, ring } = setup()
+  container.dispatchEvent(domEvent('pointerdown', { pointerType: 'mouse', clientX: 100, clientY: 0 }))
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, expect.objectContaining({ index: 1 }))
+
+  mode.deleteVertex()
+  expect(ring()).toHaveLength(4) // one vertex fewer (closed ring keeps closing coord)
+  expect(manager.undoStack.length).toBe(1)
+
+  mode.undo()
+  expect(ring()).toHaveLength(5)
+  expect(ring()[1]).toEqual([100, 0])
+  mode.undo() // empty stack — no-op
+})
+
+test('nudgeSelectedVertex (MoveControl D-pad) moves the selected vertex and is undoable', () => {
+  const { container, manager, mode, ring } = setup()
+  container.dispatchEvent(domEvent('pointerdown', { pointerType: 'mouse', clientX: 100, clientY: 0 }))
+  mode.nudgeSelectedVertex(1, 0, true)
+  expect(ring()[1]).not.toEqual([100, 0])
+  expect(manager.undoStack.length).toBe(1)
+
+  mode.undo()
+  expect(ring()[1]).toEqual([100, 0])
+})
+
+test('undo re-validates with the inverse change phase (undo of a delete re-inserts)', () => {
+  jest.useFakeTimers()
+  const { container, manager, mode } = setup()
+  container.dispatchEvent(domEvent('pointerdown', { pointerType: 'mouse', clientX: 100, clientY: 0 }))
+  mode.deleteVertex()
+  jest.runAllTimers()
+  manager.emit.mockClear()
+  mode.undo()
+  jest.runAllTimers()
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.GEOMETRY_CHANGE, expect.objectContaining({
+    phase: 'commit-insert',
+    vertexIndex: 1,
+    feature: expect.any(Object)
+  }))
+  jest.useRealTimers()
+})
+
+test('a Modify drag pushes a move op derived from the before/after vertices', () => {
+  const { map, manager, olFeature } = setup()
+  const interaction = map.interactions[0]
+  interaction.dispatchEvent({ type: 'modifystart' })
+  olFeature.getGeometry().setCoordinates([[[0, 0], [120, 5], [100, 100], [0, 100], [0, 0]]])
+  interaction.dispatchEvent({ type: 'modifyend' })
+  expect(manager.undoStack.pop()).toEqual({ type: 'move_vertex', vertexIndex: 1, previousCoord: [100, 0] })
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, expect.objectContaining({ index: 1 }))
+
+  interaction.dispatchEvent({ type: 'modifystart' })
+  interaction.dispatchEvent({ type: 'modifyend' }) // no coordinate change — nothing pushed
+  expect(manager.undoStack.length).toBe(0)
+})
+
+test('deleting needs a selected vertex and respects the minimum ring size', () => {
+  const { mode, manager } = setup()
+  mode.deleteVertex() // nothing selected
+  expect(manager.undoStack.length).toBe(0)
+
+  const triangle = setup([[0, 0], [100, 0], [100, 100], [0, 0]])
+  triangle.container.dispatchEvent(domEvent('pointerdown', { pointerType: 'mouse', clientX: 100, clientY: 0 }))
+  triangle.mode.deleteVertex() // 3 vertices is the minimum for a ring
+  expect(triangle.ring()).toHaveLength(4)
+  expect(triangle.manager.undoStack.length).toBe(0)
+})
+
+test('keyboard: arrows nudge the selected vertex and commit one undo op on keyup', () => {
+  const { container, manager, ring } = setup()
+  container.dispatchEvent(domEvent('pointerdown', { pointerType: 'mouse', clientX: 100, clientY: 0 }))
+  key('keydown', { key: 'ArrowRight' })
+  key('keyup', { key: 'ArrowRight' })
+  expect(ring()[1]).toEqual([105, 0])
+  expect(manager.undoStack.pop()).toEqual({ type: 'move_vertex', vertexIndex: 1, previousCoord: [100, 0] })
+})
+
+test('keyboard: Space selects the midpoint nearest the crosshair; nudging inserts it as a vertex', () => {
+  const { manager, ring } = setup()
+  key('keydown', { key: ' ' }) // nearest handle to center [50,50] is the midpoint [50,0]... all midpoints are at 50
+  key('keydown', { key: 'ArrowRight' })
+  key('keyup', { key: 'ArrowRight' })
+  expect(ring()).toHaveLength(6)
+  expect(ring()[1]).toEqual([55, 0]) // inserted at the midpoint, nudged one step right
+  expect(manager.undoStack.pop()).toEqual({ type: 'move_vertex', vertexIndex: 1, previousCoord: [50, 0] })
+  expect(manager.undoStack.pop()).toEqual({ type: 'insert_vertex', vertexIndex: 1 })
+})
+
+test('touch: dragging the offset target moves the vertex and records one move op', () => {
+  const { container, manager, mode, tapAt, ring } = setup()
+  tapAt(100, 0)
+  mode.setInterfaceType('touch')
+  // The finger lands on the SVG's inner circle, not the SVG element itself
+  const grip = container.querySelector('[data-im-draw-touch-target] circle')
+  grip.dispatchEvent(domEvent('touchstart', { touches: [{ clientX: 100, clientY: 0 }] }))
+  grip.dispatchEvent(domEvent('touchmove', { touches: [{ clientX: 120, clientY: 10 }] }))
+  grip.dispatchEvent(domEvent('touchend', { changedTouches: [{ clientX: 120, clientY: 10 }] }))
+  expect(ring()[1]).toEqual([120, 10])
+  expect(manager.undoStack.pop()).toEqual({ type: 'move_vertex', vertexIndex: 1, previousCoord: [100, 0] })
+})
+
+test('touch: tapping a midpoint inserts a vertex there and selects it', () => {
+  const { manager, tapAt, ring } = setup()
+  tapAt(50, 0) // midpoint between [0,0] and [100,0]
+  expect(ring()).toHaveLength(6)
+  expect(ring()[1]).toEqual([50, 0])
+  expect(manager.undoStack.pop()).toEqual({ type: 'insert_vertex', vertexIndex: 1 })
+})
+
+test('touch: tapping a stale midpoint the geometry can no longer place is a no-op', () => {
+  const { manager, olFeature, ring, tapAt } = setup()
+  // Desync state from geometry: swap in a smaller geometry object so the
+  // selection-state change listener (bound to the previous geometry) never
+  // fires. state.midpoints still describes the 4-vertex square (4 midpoints),
+  // while the live geometry is a 3-vertex triangle that has only 3 midpoints.
+  olFeature.setGeometry(new Polygon([[[0, 0], [100, 0], [100, 100], [0, 0]]]))
+  tapAt(0, 50) // the stale square's left-edge midpoint (index 3) — the triangle can't place it
+  expect(manager.undoStack.length).toBe(0)
+  expect(ring()).toHaveLength(4) // triangle geometry left untouched
+})
+
+test('undo in touch mode repositions the offset target on the restored vertex', () => {
+  const { container, manager, mode, tapAt } = setup()
+  tapAt(100, 0)
+  key('keydown', { key: 'ArrowRight' }) // keyboard nudge (switches interface to keyboard)
+  key('keyup', { key: 'ArrowRight' })
+  mode.setInterfaceType('touch')
+  mode.undo()
+  const target = container.querySelector('[data-im-draw-touch-target]')
+  expect(target.style.display).toBe('block')
+  expect(manager.undoStack.length).toBe(0)
+})
+
+test('touch tap selects a vertex and interface switching shows/hides the touch target', () => {
+  const { container, manager, mode, tapAt } = setup()
+  tapAt(100, 0)
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, expect.objectContaining({ index: 1 }))
+
+  const target = container.querySelector('[data-im-draw-touch-target]')
+  mode.setInterfaceType('touch')
+  expect(target.style.display).toBe('block')
+  mode.setInterfaceType('touch') // same type — no change
+  mode.setInterfaceType('mouse')
+  expect(target.style.display).toBe('none')
+})
+
+test('a tap on empty map deselects', () => {
+  const { manager, tapAt } = setup()
+  tapAt(100, 0)
+  tapAt(500, 500)
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, expect.objectContaining({ index: -1 }))
+})
+
+test('style changes re-style the feature and handles', () => {
+  const { manager, olFeature } = setup()
+  // The real manager swaps manager.styles before emitting (see setMapStyle).
+  const newStyles = { ...manager.styles, editFeatureStyle: new Style({}) }
+  manager.styles = newStyles
+  manager.emit(STYLES_CHANGED_EVENT, newStyles)
+  expect(currentStyle(olFeature)).toBe(newStyles.editFeatureStyle)
+})
+
+test('a style change while the shape is invalid keeps the dashed stroke', () => {
+  const { manager, olFeature } = setup()
+  olFeature.getGeometry().setCoordinates([[[0, 0], [100, 100], [100, 0], [0, 100], [0, 0]]]) // dashed
+  const newStyles = {
+    ...manager.styles,
+    editFeatureStyle: new Style({}),
+    editFeatureStyleInvalid: new Style({})
+  }
+  manager.styles = newStyles
+  manager.emit(STYLES_CHANGED_EVENT, newStyles)
+  expect(currentStyle(olFeature)).toBe(newStyles.editFeatureStyleInvalid)
+})
+
+test('map resize repositions the touch target after the next render — touch with a selection only', () => {
+  const { map, mode, tapAt } = setup()
+  map.emit('change:size') // mouse interface — EditMode's own resize hook ignores it
+  tapAt(100, 0)
+  mode.setInterfaceType('touch')
+  map.emit('change:size')
+  map.emit('postrender') // once-listener fires; must not throw
+  expect(map.once).toHaveBeenCalledWith('postrender', expect.any(Function))
+})
+
+test('destroy removes interactions, layers and listeners, and restores the feature style', () => {
+  const { map, mode, olFeature } = setup()
+  mode.destroy()
+  expect(map.interactions).toHaveLength(0)
+  expect(map.layers).toHaveLength(0)
+  expect(olFeature.getStyle()).toBeNull()
+})