@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

package/plugins/draw/src/adapters/openlayers/point/editPointMode.js

@@ -0,0 +1,267 @@
+import { createPointSelectionState } from './pointSelectionState.js'
+import { deriveModifyOp } from '../edit/modifyInteraction.js'
+import { createPointDragInteraction } from './pointDragInteraction.js'
+import { PIXEL_TOLERANCE } from '../edit/vertexHitTest.js'
+import { createTouchHandler } from '../edit/touchHandler.js'
+import { createKeyboardHandler } from '../edit/keyboardHandler.js'
+import { movePoint, applyPointUndo } from './pointOps.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'
+// Shared phase name with edit_vertex's own move_vertex op — a moved point re-validates the
+// same way (validation/rules.js has no Point-specific rule, so this only ever gates a
+// consumer's own onGeometryChange callback).
+const MOVE_VERTEX = 'commit-move'
+
+// A symbol icon renders far bigger than buildModifyCondition's fixed-radius hit-test (tuned
+// for a plain vertex dot), so this hit-tests the icon's own rendered pixels instead. No touch
+// check — pointDragInteraction.js's handleDownEvent already gates on that before calling this.
+const buildPointModifyCondition = ({ map, olFeature }) => (mapBrowserEvent) => {
+  const pixel = map.getEventPixel(mapBrowserEvent.originalEvent)
+  return !!map.forEachFeatureAtPixel(pixel, (feature) => feature === olFeature, { hitTolerance: PIXEL_TOLERANCE })
+}
+
+/**
+ * Live invalid-stroke wiring for edit_point — unlike edit/EditMode.js's wireLiveStroke, this
+ * must NOT call olFeature.setStyle(...): a Stroke/Fill style renders nothing for a Point (see
+ * core/styles.js's own placeholder-style comment) and would make the icon vanish. There is
+ * also no dashed-stroke visual for a point to begin with (validation/rules.js has no
+ * Point-specific rule — see the module doc above), so onChange only relays the verdict to
+ * gate the Done button, never touching the feature's style.
+ */
+const wirePointLiveValidity = ({ manager, olFeature }) => {
+  const liveStroke = createLiveStroke({
+    onChange: (invalid, reason) => {
+      manager.emit(ADAPTER_EVENTS.VALIDITY_CHANGE, { valid: !invalid, reason })
+    }
+  })
+  const updateLiveValidity = () => {
+    const coordinates = olFeature.getGeometry().getCoordinates()
+    liveStroke.update({
+      feature: { type: 'Feature', geometry: { type: 'Point', coordinates } },
+      context: { mode: 'edit_point' },
+      numVertices: 1,
+      onGeometryChange: manager._geometryValidator
+    })
+  }
+  olFeature.getGeometry().on('change', updateLiveValidity)
+  return {
+    liveStroke,
+    destroy () {
+      olFeature.getGeometry().un('change', updateLiveValidity)
+      liveStroke.destroy()
+    }
+  }
+}
+
+const wireTouchHandler = ({ map, container, manager, snap, undoStack, selection }) => {
+  const { getState, setState, syncGeom, emitGeometryValidation } = selection
+
+  const touchHandler = createTouchHandler({
+    map,
+    container,
+    getState,
+    setState,
+    colors: manager.colors,
+    snap,
+    moveCoord: movePoint,
+    onVertexMoved ({ vertexIndex, previousCoord }) {
+      undoStack.push({ type: 'move_vertex', vertexIndex, previousCoord })
+      syncGeom()
+      emitGeometryValidation(MOVE_VERTEX, vertexIndex)
+    },
+    // A stray tap never relocates the point — only the offset-target drag and the D-pad do
+    // (mirrors the ML adapter's editPointMode/touchHandlers.js onTap no-op).
+    onTap () {}
+  })
+
+  selection.setHooks({
+    onUpdate () {
+      if (getState().interfaceType === TOUCH_INTERFACE) {
+        touchHandler.updateTargetPosition()
+      }
+    }
+  })
+
+  return touchHandler
+}
+
+// Undo the last move — shared by the keyboard's Cmd/Ctrl+Z shortcut and the mode API's own
+// undo() (Undo button/menu action), so both apply the exact same op-popping logic.
+const createUndoAction = ({ olFeature, undoStack, selection }) => () => {
+  const op = undoStack.pop()
+  if (!op) {
+    return
+  }
+  applyPointUndo(olFeature, op)
+  selection.syncGeom()
+  // An undo commits the inverse change, so it must re-validate like any other commit —
+  // otherwise the Done gate could go stale. Always vertexIndex 0 — a point has only one.
+  selection.emitGeometryValidation(MOVE_VERTEX, 0)
+}
+
+const wireKeyboardHandler = ({ map, container, snap, undoStack, selection, touchHandler, doUndo }) => {
+  const { getState, setState, syncGeom, emitGeometryValidation } = selection
+
+  return createKeyboardHandler({
+    map,
+    getState,
+    setState,
+    snap,
+    moveCoord: movePoint,
+    onVertexMoved ({ vertexIndex, previousCoord }) {
+      undoStack.push({ type: 'move_vertex', vertexIndex, previousCoord })
+      syncGeom()
+      emitGeometryValidation(MOVE_VERTEX, vertexIndex)
+    },
+    // No midpoint concept for a point, so this is never actually reached — required by
+    // createKeyboardHandler's interface all the same. Not reachable through this module's
+    // public surface either, so there's no meaningful way to exercise it from a test.
+    /* istanbul ignore next */
+    onInserted () {},
+    // No delete-vertex action for a point — deleteVertex() below is a documented no-op.
+    onDeleted () {},
+    onUndo: doUndo,
+    onKeyboardActive () {
+      if (getState().interfaceType === 'keyboard') {
+        return
+      }
+      getState().interfaceType = 'keyboard'
+      touchHandler.hide()
+      container.focus({ preventScroll: true })
+    }
+  })
+}
+
+// Style hot-swap on map style change + touch-target reposition on map resize — mirrors
+// edit/EditMode.js's wireMapSync, minus the vertex/midpoint handle layers a point has none of.
+const wireMapSync = ({ map, manager, selection, touchHandler, live }) => {
+  const { state } = selection
+
+  const onStylesChanged = () => {
+    live.liveStroke.refresh()
+    touchHandler.updateColors(manager.colors)
+  }
+  manager.on(STYLES_CHANGED_EVENT, onStylesChanged)
+
+  const onMapSizeChange = () => {
+    if (state.interfaceType !== TOUCH_INTERFACE) {
+      return
+    }
+    map.once('postrender', () => touchHandler.updateTargetPosition())
+  }
+  map.on('change:size', onMapSizeChange)
+
+  return {
+    destroy () {
+      manager.off(STYLES_CHANGED_EVENT, onStylesChanged)
+      map.un('change:size', onMapSizeChange)
+    }
+  }
+}
+
+/**
+ * @returns {{ setInterfaceType, done, setInvalid, cancel, undo, deleteVertex, nudgeSelectedVertex, destroy } | null}
+ */
+export const createEditPointMode = ({ map, manager, options }) => {
+  const { featureId, container, interfaceType, snap } = options
+  const { store, undoStack } = manager
+
+  const olFeature = store.getOL(featureId)
+  if (!olFeature) {
+    return null
+  }
+
+  // edit_vertex's first interaction is always a click that selects a vertex, which as a side
+  // effect moves focus onto the map — satisfying keyboardHandler.js's isInteractiveElementFocused
+  // guard. A point is already selected from the moment this mode starts, so a keyboard-only
+  // session can go straight to arrow keys with no click in between; claim focus explicitly so
+  // that guard reads correctly from the first keypress (mirrors the ML adapter's own fix).
+  container?.focus({ preventScroll: true })
+
+  const originalFeatureStyle = olFeature.getStyle()
+  // Keeps showing the same "selected" (black ring) icon variant the interact plugin's own
+  // highlight uses, for the whole edit session — a style FUNCTION, not a one-off Style
+  // instance, so it re-reads manager.styles fresh on every render and survives a style
+  // hot-swap without needing to be re-applied. See core/styles.js's selectedPointStyleFor.
+  olFeature.setStyle(() => manager.styles.selectedPointStyleFor(olFeature))
+
+  const selection = createPointSelectionState({ manager, store, olFeature, interfaceType })
+  const { getState, setState } = selection
+
+  const pointDrag = createPointDragInteraction({
+    map,
+    olFeature,
+    getState,
+    condition: buildPointModifyCondition({ map, olFeature }),
+    snap,
+    onModifyEnd (prevCoords) {
+      selection.syncGeom()
+      const op = prevCoords && deriveModifyOp(prevCoords, getState().vertices)
+      if (!op) {
+        return
+      }
+      undoStack.push(op)
+      selection.emitGeometryValidation(MOVE_VERTEX, op.vertexIndex)
+    }
+  })
+
+  const doUndo = createUndoAction({ olFeature, undoStack, selection })
+  const live = wirePointLiveValidity({ manager, olFeature })
+  const touchHandler = wireTouchHandler({ map, container, manager, snap, undoStack, selection })
+  const keyboardHandler = wireKeyboardHandler({ map, container, snap, undoStack, selection, touchHandler, doUndo })
+  const mapSync = wireMapSync({ map, manager, selection, touchHandler, live })
+
+  return {
+    setInterfaceType (type) {
+      const state = getState()
+      if (type === state.interfaceType) {
+        return
+      }
+      setState({ 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 — see wirePointLiveValidity's own comment on why this never
+    // touches the feature's style.
+    setInvalid (invalid) {
+      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: doUndo,
+
+    // Intentionally a no-op — deleting a Point's one coordinate isn't a "delete vertex"
+    // action the way it is for a ring; whole-feature deletion is deleteFeature()'s job.
+    // Matches MaplibreDrawAdapter.deleteVertex's existing no-op precedent.
+    deleteVertex () {},
+
+    // MoveControls' D-pad, routed here via mapProvider.activeMoveTarget (events.js) — claimed
+    // once at construction (pointSelectionState's VERTEX_SELECTION) and held for the session.
+    nudgeSelectedVertex: keyboardHandler.nudgeByDelta,
+
+    destroy () {
+      live.destroy()
+      olFeature.setStyle(originalFeatureStyle)
+      selection.destroy()
+      mapSync.destroy()
+      pointDrag.destroy()
+      touchHandler.destroy()
+      keyboardHandler.destroy()
+    }
+  }
+}

package/plugins/draw/src/adapters/openlayers/point/editPointMode.test.js

@@ -0,0 +1,327 @@
+import { createEditPointMode } from './editPointMode.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'
+
+const setup = (coordinates = [5, 5], snap = null) => {
+  const map = createFakeMap()
+  const manager = createFakeManager()
+  manager.store = createFeatureStore()
+  manager.store.add({ type: 'Feature', id: 'f1', properties: {}, geometry: { type: 'Point', coordinates } })
+  const container = createContainer()
+  map.getViewport().appendChild(container)
+  const mode = createEditPointMode({
+    map,
+    manager,
+    options: { featureId: 'f1', container, interfaceType: 'mouse', snap }
+  })
+  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, coord: () => olFeature.getGeometry().getCoordinates(), 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(createEditPointMode({ map, manager, options: { featureId: 'nope', container: createContainer() } })).toBeNull()
+})
+
+test('entering edit mode claims the D-pad exactly once, never emitting VERTEX_CHANGE', () => {
+  const { manager } = setup()
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, { index: 0, numVertices: 1 })
+  expect(manager.emit).not.toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_CHANGE, expect.anything())
+})
+
+test('sets the feature style once at construction, to the selected-icon override — nothing else re-touches it', () => {
+  const { olFeature, container, manager } = setup()
+  expect(olFeature.getStyle()).toEqual(expect.any(Function))
+  olFeature.getStyle()()
+  expect(manager.styles.selectedPointStyleFor).toHaveBeenCalledWith(olFeature)
+
+  const setStyleSpy = jest.spyOn(olFeature, 'setStyle')
+  olFeature.getGeometry().setCoordinates([9, 9])
+  key('keydown', { key: 'ArrowRight' })
+  key('keyup', { key: 'ArrowRight' })
+  container.dispatchEvent(domEvent('touchstart', { touches: [{ clientX: 9, clientY: 9 }] }))
+  expect(setStyleSpy).not.toHaveBeenCalled()
+})
+
+test('destroy restores the feature\'s pre-edit style', () => {
+  const { mode, olFeature } = setup()
+  const selectedStyleFn = olFeature.getStyle()
+  mode.destroy()
+  expect(olFeature.getStyle()).toBeNull() // unset before entering edit_point → falls back to the layer style
+  expect(olFeature.getStyle()).not.toBe(selectedStyleFn)
+})
+
+test('validity flips (user callback only — a Point has no built-in HARD_RULES violation) gate the Done button', () => {
+  jest.useFakeTimers()
+  const { manager, olFeature } = setup()
+  manager._geometryValidator = jest.fn(() => ({ valid: false, reason: 'outside region' }))
+  olFeature.getGeometry().setCoordinates([9, 9])
+  jest.runAllTimers()
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VALIDITY_CHANGE,
+    expect.objectContaining({ valid: false, reason: 'outside region' }))
+  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('setInvalid routes through the live-stroke controller without touching the feature style', () => {
+  const { mode, olFeature } = setup()
+  const setStyleSpy = jest.spyOn(olFeature, 'setStyle')
+  mode.setInvalid(true)
+  mode.setInvalid(false)
+  expect(setStyleSpy).not.toHaveBeenCalled()
+})
+
+test('deleteVertex is a documented no-op — whole-feature deletion is deleteFeature\'s job', () => {
+  const { mode, coord } = setup()
+  const before = coord()
+  expect(() => mode.deleteVertex()).not.toThrow()
+  expect(coord()).toEqual(before)
+})
+
+test('a mouse drag pushes a move_vertex op derived from the before/after coordinate', () => {
+  const { map, manager, olFeature } = setup()
+  const interaction = map.interactions[0]
+  map.forEachFeatureAtPixel = jest.fn((pixel, cb) => cb(olFeature))
+  const down = { originalEvent: {}, pixel: [5, 5] }
+  expect(interaction.handleDownEvent(down)).toBe(true)
+  interaction.handleDragEvent({ pixel: [9, 9] })
+  interaction.handleUpEvent()
+  expect(manager.undoStack.pop()).toEqual({ type: 'move_vertex', vertexIndex: 0, previousCoord: [5, 5] })
+
+  expect(interaction.handleDownEvent(down)).toBe(true)
+  interaction.handleUpEvent() // no drag in between — no coordinate change, nothing pushed
+  expect(manager.undoStack.length).toBe(0)
+})
+
+// OL only calls handleDragEvent/handleUpEvent between a handleDownEvent that returned true and
+// the matching release, but both guard against being invoked outside that sequence regardless.
+test('handleDragEvent and handleUpEvent are no-ops without a preceding successful handleDownEvent', () => {
+  const { map, manager, olFeature, coord } = setup()
+  const interaction = map.interactions[0]
+
+  interaction.handleDragEvent({ pixel: [9, 9] }) // no down event — no grab offset captured yet
+  expect(coord()).toEqual([5, 5])
+
+  expect(() => interaction.handleUpEvent()).not.toThrow()
+  expect(manager.undoStack.length).toBe(0) // no start coordinate — nothing to derive an op from
+  expect(olFeature.getGeometry().getCoordinates()).toEqual([5, 5])
+})
+
+// The mouse click can land anywhere on the icon, not just on top of its anchor coordinate —
+// dragging must move the point by the same delta as the pointer, not snap the anchor under it
+// (unlike OL's own Modify, which always sets the dragged coordinate to the pointer position).
+test('a mouse drag preserves the click\'s offset from the anchor instead of snapping to the pointer', () => {
+  const { map, olFeature } = setup([5, 5])
+  const interaction = map.interactions[0]
+  map.forEachFeatureAtPixel = jest.fn((pixel, cb) => cb(olFeature))
+  // Click 3 map-units up-left of the anchor (e.g. near the top of a pin icon).
+  interaction.handleDownEvent({ originalEvent: {}, pixel: [2, 2] })
+  interaction.handleDragEvent({ pixel: [2, 2] }) // no pointer movement yet
+  expect(olFeature.getGeometry().getCoordinates()).toEqual([5, 5]) // anchor did NOT jump to [2, 2]
+
+  interaction.handleDragEvent({ pixel: [12, 2] }) // pointer moves 10 units right
+  expect(olFeature.getGeometry().getCoordinates()).toEqual([15, 5]) // anchor moves the same 10 units
+})
+
+// snap/snapInteraction.js's OL Interaction rewrites mapBrowserEvent.coordinate to the nearest
+// candidate near the raw POINTER position — right for Modify, wrong here, since it would snap
+// to whatever's near the cursor rather than near the icon's own anchor. This asserts snap.apply
+// gets called with the offset-corrected anchor candidate, not the raw event coordinate.
+test('a mouse drag snaps the icon\'s own offset-corrected position, not the raw pointer', () => {
+  const snap = { apply: jest.fn((coord) => [coord[0] + 100, coord[1] + 100]), hideIndicator: jest.fn() }
+  const { map, olFeature } = setup([5, 5], snap)
+  const interaction = map.interactions[0]
+  map.forEachFeatureAtPixel = jest.fn((pixel, cb) => cb(olFeature))
+
+  // Click 3 map-units up-left of the anchor, then drag 10 units right.
+  interaction.handleDownEvent({ originalEvent: {}, pixel: [2, 2] })
+  // mapBrowserEvent.coordinate deliberately left stale/wrong here — a real snapInteraction may
+  // have already rewritten it to something near the cursor before this interaction runs, and
+  // the fix must ignore it in favour of .pixel.
+  interaction.handleDragEvent({ pixel: [12, 2], coordinate: [999, 999] })
+
+  expect(snap.apply).toHaveBeenCalledWith([15, 5]) // the icon's own candidate position, not [999, 999]
+  expect(olFeature.getGeometry().getCoordinates()).toEqual([115, 105]) // snap.apply's result is applied
+
+  // The indicator must stay showing after the drag ends — snap.apply()'s own last call already
+  // left it correctly reflecting the snapped position (matches the ML adapter, which never
+  // hides its own indicator on release either).
+  interaction.handleUpEvent()
+  expect(snap.hideIndicator).not.toHaveBeenCalled()
+})
+
+// A symbol icon renders far bigger than PIXEL_TOLERANCE (tuned for a plain ~6px vertex dot)
+// covers, so the mouse hit-test uses OL's own forEachFeatureAtPixel against the icon's real
+// rendered pixels instead of a fixed-radius distance check.
+describe('mouse hit-testing respects the icon\'s own rendered pixels, not a fixed radius', () => {
+  test('engages when forEachFeatureAtPixel hits this exact feature', () => {
+    const { map, olFeature } = setup()
+    map.forEachFeatureAtPixel = jest.fn((pixel, cb) => cb(olFeature))
+    const interaction = map.interactions[0]
+    expect(interaction.handleDownEvent({ originalEvent: { clientX: 5, clientY: 5 }, pixel: [5, 5] })).toBe(true)
+    expect(map.forEachFeatureAtPixel).toHaveBeenCalledWith([5, 5], expect.any(Function), { hitTolerance: expect.any(Number) })
+  })
+
+  test('does not engage when forEachFeatureAtPixel finds nothing', () => {
+    const { map } = setup()
+    map.forEachFeatureAtPixel = jest.fn(() => undefined)
+    const interaction = map.interactions[0]
+    expect(interaction.handleDownEvent({ originalEvent: { clientX: 5, clientY: 5 }, pixel: [5, 5] })).toBe(false)
+  })
+
+  test('does not engage for a different feature under the pixel', () => {
+    const { map } = setup()
+    const otherFeature = {}
+    map.forEachFeatureAtPixel = jest.fn((pixel, cb) => cb(otherFeature))
+    const interaction = map.interactions[0]
+    expect(interaction.handleDownEvent({ originalEvent: { clientX: 5, clientY: 5 }, pixel: [5, 5] })).toBe(false)
+  })
+
+  test('bails for touch without even querying', () => {
+    const { map, mode } = setup()
+    mode.setInterfaceType('touch')
+    map.forEachFeatureAtPixel = jest.fn()
+    const interaction = map.interactions[0]
+    expect(interaction.handleDownEvent({ originalEvent: { clientX: 5, clientY: 5 }, pixel: [5, 5] })).toBe(false)
+    expect(map.forEachFeatureAtPixel).not.toHaveBeenCalled()
+  })
+})
+
+test('nudgeSelectedVertex (MoveControls D-pad) moves the point and is undoable', () => {
+  const { manager, mode, coord } = setup()
+  mode.nudgeSelectedVertex(1, 0, true)
+  expect(coord()).not.toEqual([5, 5])
+  expect(manager.undoStack.length).toBe(1)
+
+  mode.undo()
+  expect(coord()).toEqual([5, 5])
+  mode.undo() // empty stack — no-op
+})
+
+test('undo re-validates with the commit-move phase', () => {
+  jest.useFakeTimers()
+  const { manager, mode } = setup()
+  mode.nudgeSelectedVertex(1, 0, true)
+  jest.runAllTimers()
+  manager.emit.mockClear()
+  mode.undo()
+  jest.runAllTimers()
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.GEOMETRY_CHANGE, expect.objectContaining({
+    phase: 'commit-move',
+    vertexIndex: 0,
+    feature: expect.any(Object)
+  }))
+  jest.useRealTimers()
+})
+
+test('keyboard: arrows nudge the point and commit one undo op on keyup', () => {
+  const { manager, coord } = setup()
+  key('keydown', { key: 'ArrowRight' })
+  key('keyup', { key: 'ArrowRight' })
+  expect(coord()).not.toEqual([5, 5])
+  expect(manager.undoStack.pop()).toEqual({ type: 'move_vertex', vertexIndex: 0, previousCoord: [5, 5] })
+})
+
+test('keyboard: Delete is a no-op — there is no delete-vertex action for a point', () => {
+  const { coord } = setup()
+  key('keyup', { key: 'Delete' })
+  expect(coord()).toEqual([5, 5])
+})
+
+test('keyboard: Cmd/Ctrl+Z undoes via the same op-popping logic as mode.undo()', () => {
+  const { manager, coord } = setup()
+  key('keydown', { key: 'ArrowRight' })
+  key('keyup', { key: 'ArrowRight' })
+  expect(manager.undoStack.length).toBe(1)
+  key('keydown', { key: 'z', metaKey: true })
+  expect(coord()).toEqual([5, 5])
+  expect(manager.undoStack.length).toBe(0)
+})
+
+test('keyboard: Escape and Space are inert — the point cannot be deselected, and there is nothing else to select', () => {
+  const { manager, coord } = setup()
+  manager.emit.mockClear()
+  key('keydown', { key: 'Escape' })
+  key('keydown', { key: ' ' })
+  expect(manager.emit).not.toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_SELECTION, expect.anything())
+  key('keydown', { key: 'ArrowRight' })
+  key('keyup', { key: 'ArrowRight' })
+  expect(coord()).not.toEqual([5, 5]) // arrows still work after Escape/Space
+})
+
+test('touch: dragging the offset target moves the point and records one move op', () => {
+  const { container, manager, mode, tapAt, coord } = setup()
+  tapAt(5, 5)
+  mode.setInterfaceType('touch')
+  const grip = container.querySelector('[data-im-draw-touch-target] circle')
+  grip.dispatchEvent(domEvent('touchstart', { touches: [{ clientX: 5, clientY: 5 }] }))
+  grip.dispatchEvent(domEvent('touchmove', { touches: [{ clientX: 20, clientY: 15 }] }))
+  grip.dispatchEvent(domEvent('touchend', { changedTouches: [{ clientX: 20, clientY: 15 }] }))
+  expect(coord()).toEqual([20, 15])
+  expect(manager.undoStack.pop()).toEqual({ type: 'move_vertex', vertexIndex: 0, previousCoord: [5, 5] })
+})
+
+test('touch: a tap never relocates the point — only the offset-target drag and the D-pad do', () => {
+  const { manager, tapAt, coord } = setup()
+  manager.undoStack.clear()
+  tapAt(5, 5)
+  expect(coord()).toEqual([5, 5])
+  expect(manager.undoStack.length).toBe(0)
+})
+
+test('setInterfaceType shows/hides the touch target, and is a no-op for the same type', () => {
+  const { container, mode } = setup()
+  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('style changes refresh the touch target colours, without touching the feature style', () => {
+  const { manager, olFeature } = setup()
+  const setStyleSpy = jest.spyOn(olFeature, 'setStyle')
+  const newStyles = { ...manager.styles }
+  manager.styles = newStyles
+  manager.emit(STYLES_CHANGED_EVENT, newStyles)
+  expect(setStyleSpy).not.toHaveBeenCalled()
+})
+
+test('map resize repositions the touch target after the next render — touch only', () => {
+  const { map, mode } = setup()
+  map.emit('change:size') // mouse interface — ignored
+  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 the point drag interaction and listeners', () => {
+  const { map, mode } = setup()
+  const interactionsBefore = map.interactions.length
+  mode.destroy()
+  expect(map.removeInteraction).toHaveBeenCalled()
+  expect(map.interactions.length).toBeLessThan(interactionsBefore)
+})

package/plugins/draw/src/adapters/openlayers/point/pointDragInteraction.js

@@ -0,0 +1,71 @@
+import PointerInteraction from 'ol/interaction/Pointer.js'
+
+/**
+ * Mouse/pointer drag for edit_point — a hand-rolled `ol/interaction/Pointer` rather than
+ * edit/modifyInteraction.js's OL `Modify` wrapper. `Modify` snaps the dragged coordinate
+ * straight to the pointer, which is fine for a small vertex dot but jumps a symbol icon under
+ * the cursor the moment you click anywhere off its anchor — this instead holds a fixed
+ * click-to-anchor offset for the whole drag, so the icon moves exactly as far as the pointer
+ * does. Snap is applied to that offset-corrected candidate (read from .pixel, since
+ * snap/snapInteraction.js may already have rewritten .coordinate to something near the raw
+ * pointer) rather than the raw pointer itself, for the same reason.
+ *
+ * @param {{ map, olFeature, getState, condition, snap, onModifyEnd }} options
+ * @param {(mapBrowserEvent) => boolean} options.condition - gates drag start, e.g.
+ *   buildPointModifyCondition's forEachFeatureAtPixel icon hit-test.
+ * @param {{ apply } | null} [options.snap] - snap/snapManager.js's controller, or
+ *   null/undefined when no snap layers are configured.
+ * @param {(prevCoords: number[][]) => void} options.onModifyEnd - called once at drag end with
+ *   the single-coordinate vertices array as it stood at drag start — same shape
+ *   edit/modifyInteraction.js's onModifyEnd gets, so callers can share its deriveModifyOp.
+ * @returns {{ destroy: () => void }}
+ */
+export const createPointDragInteraction = ({ map, olFeature, getState, condition, snap, onModifyEnd }) => {
+  let grabOffset = null // [dx, dy] map-coordinate offset (anchor − pointer), held for the drag
+  let startCoord = null
+
+  // .pixel is never rewritten by snap/snapInteraction.js (unlike .coordinate), so it's the
+  // reliable way to get the true pointer position.
+  const pointerCoord = (mapBrowserEvent) => map.getCoordinateFromPixel(mapBrowserEvent.pixel)
+
+  const handleDownEvent = (mapBrowserEvent) => {
+    if (getState().interfaceType === 'touch' || !condition(mapBrowserEvent)) {
+      return false
+    }
+    const coord = olFeature.getGeometry().getCoordinates()
+    const pointer = pointerCoord(mapBrowserEvent)
+    grabOffset = [coord[0] - pointer[0], coord[1] - pointer[1]]
+    startCoord = [...coord]
+    return true
+  }
+
+  const handleDragEvent = (mapBrowserEvent) => {
+    if (!grabOffset) {
+      return
+    }
+    const pointer = pointerCoord(mapBrowserEvent)
+    const rawCoord = [pointer[0] + grabOffset[0], pointer[1] + grabOffset[1]]
+    const newCoord = snap ? snap.apply(rawCoord) : rawCoord
+    olFeature.getGeometry().setCoordinates(newCoord)
+  }
+
+  const handleUpEvent = () => {
+    grabOffset = null
+    // Not hiding the snap indicator here — handleDragEvent's own snap.apply() already left it
+    // showing correctly, and it should stay that way after the drag ends.
+    if (startCoord) {
+      onModifyEnd([startCoord])
+    }
+    startCoord = null
+    return false // ends the drag sequence — never chains into another
+  }
+
+  const interaction = new PointerInteraction({ handleDownEvent, handleDragEvent, handleUpEvent })
+  map.addInteraction(interaction)
+
+  return {
+    destroy () {
+      map.removeInteraction(interaction)
+    }
+  }
+}