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

package/plugins/draw/src/adapters/maplibre/modes/drawPointMode.test.js

@@ -0,0 +1,457 @@
+import { DrawPointMode } from './drawPointMode.js'
+import { createUndoStack } from '../../../utils/undoStack.js'
+import PointFeature from '../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/point.js'
+
+const CENTER = { lng: 5, lat: 5 }
+
+const createMap = () => {
+  const canvas = document.createElement('canvas')
+  const listeners = {}
+  return {
+    _undoInProgress: false,
+    _undoStack: null,
+    _snapInstance: null,
+    _drawGeometryValidator: undefined,
+    getCanvas: () => canvas,
+    getCenter: () => ({ ...CENTER }),
+    project: jest.fn(() => ({ x: 50, y: 50 })),
+    unproject: jest.fn(() => ({ ...CENTER })),
+    fire: jest.fn(function (type, e) { (listeners[type] ?? []).forEach((h) => h(e)) }),
+    on: jest.fn((type, h) => { (listeners[type] ??= []).push(h) }),
+    off: jest.fn((type, h) => { listeners[type] = (listeners[type] ?? []).filter((x) => x !== h) })
+  }
+}
+
+const contexts = []
+const removeListeners = (ctx) => ctx._listeners?.forEach(([t, e, h]) =>
+  t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
+
+const createModeContext = () => {
+  const map = createMap()
+  const features = new Map()
+  const store = {
+    add: jest.fn((f) => features.set(f.id, f)),
+    delete: jest.fn((ids) => ids.forEach((id) => features.delete(id))),
+    render: jest.fn(),
+    featureChanged: jest.fn(),
+    getInitialConfigValue: jest.fn(() => true)
+  }
+  const api = { changeMode: jest.fn(), add: jest.fn(), delete: jest.fn() }
+  const ctx = {
+    map,
+    _ctx: { store, api, options: { userProperties: true } },
+    addFeature: (f) => store.add(f),
+    getFeature: (id) => features.get(id),
+    deleteFeature: jest.fn((ids) => ids.forEach((id) => features.delete(id))),
+    clearSelectedFeatures: jest.fn(),
+    updateUIClasses: jest.fn(),
+    activateUIButton: jest.fn(),
+    setActionableState: jest.fn(),
+    changeMode: jest.fn()
+  }
+  ctx.newFeature = (geojson) => new PointFeature(ctx._ctx, geojson)
+  Object.assign(ctx, DrawPointMode)
+  contexts.push(ctx)
+  return ctx
+}
+
+const createContainer = () => {
+  const container = document.createElement('div')
+  container.tabIndex = 0
+  const button = document.createElement('button')
+  button.id = 'add-point'
+  container.appendChild(button)
+  document.body.appendChild(container)
+  return { container, button }
+}
+
+const createCrossHair = () => ({ show: jest.fn(), hide: jest.fn() })
+
+const setup = (options = {}) => {
+  const ctx = createModeContext()
+  const dom = createContainer()
+  ctx.map._undoStack = createUndoStack(() => {})
+  const crossHair = createCrossHair()
+  const state = ctx.onSetup({
+    container: dom.container,
+    addVertexButtonId: 'add-point',
+    interfaceType: 'mouse',
+    crossHair,
+    featureId: 'point-1',
+    properties: { label: 'a point' },
+    ...options
+  })
+  return { ctx, state, crossHair, ...dom }
+}
+
+const clickEvent = (ctx, lng, lat, overrides = {}) => ({
+  lngLat: { lng, lat },
+  point: { x: lng, y: lat },
+  originalEvent: { button: 0, target: ctx.map.getCanvas(), ...overrides }
+})
+
+const firedWith = (map, type) => map.fire.mock.calls.filter(([t]) => t === type).map(([, e]) => e)
+
+afterEach(() => {
+  contexts.splice(0).forEach(removeListeners)
+  document.body.innerHTML = ''
+})
+
+describe('DrawPointMode', () => {
+  describe('onSetup', () => {
+    it('creates an empty in-progress point feature and applies caller properties', () => {
+      const { state } = setup({ properties: { label: 'field' } })
+      expect(state.point.type).toBe('Point')
+      expect(state.point.coordinates).toEqual([])
+      expect(state.point.properties).toEqual({ label: 'field' })
+    })
+
+    it('shows the crosshair for touch/keyboard interface types', () => {
+      const { crossHair } = setup({ interfaceType: 'touch' })
+      expect(crossHair.show).toHaveBeenCalled()
+    })
+
+    it('hides the crosshair for mouse', () => {
+      const { crossHair } = setup({ interfaceType: 'mouse' })
+      expect(crossHair.hide).toHaveBeenCalled()
+    })
+
+    it('falls back to a DOM vertexMarker element when no crossHair is supplied', () => {
+      const ctx = createModeContext()
+      const dom = createContainer()
+      const marker = document.createElement('div')
+      marker.id = 'vertex-marker'
+      dom.container.appendChild(marker)
+      ctx.map._undoStack = createUndoStack(() => {})
+
+      const state = ctx.onSetup({
+        container: dom.container,
+        vertexMarkerId: 'vertex-marker',
+        interfaceType: 'touch', // shown on setup
+        featureId: 'point-1',
+        properties: {}
+      })
+      expect(marker.style.display).toBe('block')
+
+      ctx.onPointermove(state, { pointerType: 'mouse' }) // hidden
+      expect(marker.style.display).toBe('none')
+    })
+  })
+
+  describe('onClick (mouse)', () => {
+    it('commits the coordinate, re-ids the feature to the caller featureId, and fires draw.create', () => {
+      const { ctx, state } = setup()
+      ctx.onClick(state, clickEvent(ctx, 1, 2))
+      expect(state.point.coordinates).toEqual([1, 2])
+      const created = firedWith(ctx.map, 'draw.create')
+      expect(created).toHaveLength(1)
+      expect(created[0].features[0].geometry.coordinates).toEqual([1, 2])
+      // Re-id happens via the internal draw.create listener registered in onSetup
+      expect(ctx._ctx.api.delete).toHaveBeenCalled()
+      expect(ctx._ctx.api.add).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'point-1' }),
+        { userProperties: true }
+      )
+    })
+
+    it('calls the adapter-injected resolvePointSymbol hook with the final featureId, after re-id', () => {
+      const resolvePointSymbol = jest.fn()
+      const { ctx, state } = setup({ resolvePointSymbol, properties: { symbol: 'pin' } })
+      ctx.onClick(state, clickEvent(ctx, 1, 2))
+      expect(resolvePointSymbol).toHaveBeenCalledWith('point-1', { symbol: 'pin' })
+    })
+
+    it('does not throw when no resolvePointSymbol hook was supplied', () => {
+      const { ctx, state } = setup()
+      expect(() => ctx.onClick(state, clickEvent(ctx, 1, 2))).not.toThrow()
+    })
+
+    it('ignores non-primary-button clicks', () => {
+      const { ctx, state } = setup()
+      ctx.onClick(state, clickEvent(ctx, 1, 2, { button: 1 }))
+      expect(state.point.coordinates).toEqual([])
+      expect(firedWith(ctx.map, 'draw.create')).toHaveLength(0)
+    })
+
+    it('ignores clicks whose target is not the map canvas', () => {
+      const { ctx, state } = setup()
+      ctx.onClick(state, clickEvent(ctx, 1, 2, { target: document.createElement('div') }))
+      expect(state.point.coordinates).toEqual([])
+    })
+
+    it('vetoes placement via onGeometryChange and never commits', () => {
+      const { ctx, state } = setup()
+      ctx.map._drawGeometryValidator = () => ({ valid: false, reason: 'not allowed here' })
+      ctx.onClick(state, clickEvent(ctx, 1, 2))
+      expect(state.point.coordinates).toEqual([])
+      const blocked = firedWith(ctx.map, 'draw.placementblocked')
+      expect(blocked).toHaveLength(1)
+      expect(blocked[0]).toMatchObject({ reason: 'not allowed here', phase: 'place', mode: 'draw_point' })
+      expect(firedWith(ctx.map, 'draw.create')).toHaveLength(0)
+    })
+
+    it('defaults the blocked reason to null when the veto gives none', () => {
+      const { ctx, state } = setup()
+      ctx.map._drawGeometryValidator = () => false // no {reason} shape
+      ctx.onClick(state, clickEvent(ctx, 1, 2))
+      const blocked = firedWith(ctx.map, 'draw.placementblocked')
+      expect(blocked[0].reason).toBeNull()
+    })
+  })
+
+  describe('onTap', () => {
+    it('behaves the same as onClick', () => {
+      const { ctx, state } = setup()
+      ctx.onTap(state, clickEvent(ctx, 3, 4))
+      expect(state.point.coordinates).toEqual([3, 4])
+    })
+  })
+
+  describe('crosshair / keyboard placement', () => {
+    it('Enter commits at the map centre once keyboard interaction has started', () => {
+      const { ctx, state, container } = setup({ interfaceType: 'keyboard' })
+      container.focus()
+      ctx.onKeydown(state, { key: 'Enter' })
+      ctx.onKeyup(state, { key: 'Enter' })
+      expect(state.point.coordinates).toEqual([CENTER.lng, CENTER.lat])
+      expect(firedWith(ctx.map, 'draw.create')).toHaveLength(1)
+    })
+
+    it('does not commit on Enter before onKeydown has marked the session active', () => {
+      const { ctx, state, container } = setup({ interfaceType: 'keyboard' })
+      container.focus()
+      ctx.onKeyup(state, { key: 'Enter' })
+      expect(state.point.coordinates).toEqual([])
+    })
+
+    it('onKeydown ignores keys while the container is not focused', () => {
+      const { ctx, state } = setup({ interfaceType: 'mouse' })
+      expect(() => ctx.onKeydown(state, { key: 'Enter' })).not.toThrow()
+      expect(state.isActive).toBeFalsy()
+      expect(state.interfaceType).toBe('mouse') // never switched to keyboard
+    })
+
+    it('onKeydown Escape is a no-op there (handled window-level in onKeyup instead)', () => {
+      const { ctx, state, container } = setup({ interfaceType: 'mouse' })
+      container.focus()
+      const preventDefault = jest.fn()
+      ctx.onKeydown(state, { key: 'Escape', preventDefault })
+      expect(preventDefault).toHaveBeenCalled()
+      expect(state.interfaceType).toBe('mouse')
+    })
+
+    it('onKeydown ignores non-interface keys', () => {
+      const { ctx, state, container } = setup({ interfaceType: 'mouse' })
+      container.focus()
+      ctx.onKeydown(state, { key: 'a' })
+      expect(state.interfaceType).toBe('mouse')
+    })
+
+    it('onKeyup ignores non-Escape keys while the container is not focused', () => {
+      const { ctx, state } = setup({ interfaceType: 'mouse' })
+      expect(() => ctx.onKeyup(state, { key: 'Enter' })).not.toThrow()
+      expect(state.interfaceType).toBe('mouse')
+    })
+
+    it('onKeyup ignores non-interface keys', () => {
+      const { ctx, state, container } = setup({ interfaceType: 'mouse' })
+      container.focus()
+      ctx.onKeyup(state, { key: 'a' })
+      expect(state.interfaceType).toBe('mouse')
+    })
+
+    it('the "Add point" button commits at the map centre', () => {
+      const { ctx, state, button } = setup()
+      ctx.onVertexButtonClick(state, { target: button })
+      expect(state.point.coordinates).toEqual([CENTER.lng, CENTER.lat])
+      expect(firedWith(ctx.map, 'draw.create')).toHaveLength(1)
+    })
+
+    it('a click on an unrelated element does not commit', () => {
+      const { ctx, state } = setup()
+      ctx.onVertexButtonClick(state, { target: document.createElement('div') })
+      expect(state.point.coordinates).toEqual([])
+    })
+  })
+
+  describe('Escape', () => {
+    it('fires draw.cancel regardless of interface type', () => {
+      const { ctx, state } = setup({ interfaceType: 'mouse' })
+      ctx.onKeyup(state, { key: 'Escape' })
+      expect(firedWith(ctx.map, 'draw.cancel')).toHaveLength(1)
+    })
+
+    it('does not throw via the neutralised built-in capital onKeyUp', () => {
+      const { ctx, state } = setup()
+      expect(() => ctx.onKeyUp(state, { key: 'Enter' })).not.toThrow()
+      expect(state.point.coordinates).toEqual([])
+    })
+  })
+
+  describe('no-op handlers required by createLifecycle\'s bind contract', () => {
+    it('onUndo and onPointerup are harmless no-ops — nothing to undo/report before a single-click commit', () => {
+      const { ctx, state } = setup()
+      expect(() => ctx.onUndo(state)).not.toThrow()
+      expect(() => ctx.onPointerup(state)).not.toThrow()
+    })
+  })
+
+  describe('onStop', () => {
+    it('deletes an uncommitted point', () => {
+      const { ctx, state } = setup()
+      ctx.onStop(state)
+      expect(ctx.deleteFeature).toHaveBeenCalledWith([state.point.id], { silent: true })
+    })
+
+    it('keeps a committed point', () => {
+      const { ctx, state } = setup()
+      ctx.onClick(state, clickEvent(ctx, 1, 2))
+      ctx.deleteFeature.mockClear()
+      ctx.onStop(state)
+      expect(ctx.deleteFeature).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('interface type tracking', () => {
+    it('touch start shows the crosshair', () => {
+      const { ctx, state, crossHair } = setup({ interfaceType: 'mouse' })
+      crossHair.show.mockClear()
+      ctx.onTouchStart(state)
+      expect(state.interfaceType).toBe('touch')
+      expect(crossHair.show).toHaveBeenCalled()
+    })
+
+    it('a non-touch pointerdown switches interface type to mouse without forcing the crosshair visible', () => {
+      const { ctx, state, crossHair } = setup({ interfaceType: 'touch' })
+      crossHair.show.mockClear()
+      ctx.onPointerdown(state, { pointerType: 'mouse' })
+      expect(state.interfaceType).toBe('mouse')
+      expect(crossHair.show).not.toHaveBeenCalled()
+    })
+
+    it('a touch pointerdown leaves the interface type alone', () => {
+      const { ctx, state } = setup({ interfaceType: 'touch' })
+      ctx.onPointerdown(state, { pointerType: 'touch' })
+      expect(state.interfaceType).toBe('touch')
+    })
+
+    it('a non-touch pointermove hides the crosshair', () => {
+      const { ctx, state, crossHair } = setup({ interfaceType: 'touch' })
+      ctx.onPointermove(state, { pointerType: 'mouse' })
+      expect(crossHair.hide).toHaveBeenCalled()
+    })
+
+    it('a touch pointermove does not hide the crosshair', () => {
+      const { ctx, state, crossHair } = setup({ interfaceType: 'touch' })
+      ctx.onPointermove(state, { pointerType: 'touch' })
+      expect(crossHair.hide).not.toHaveBeenCalled()
+    })
+
+    it('touch end shows the crosshair', () => {
+      const { ctx, state, crossHair } = setup({ interfaceType: 'mouse' })
+      crossHair.show.mockClear()
+      ctx.onTouchEnd(state)
+      expect(state.interfaceType).toBe('touch')
+      expect(crossHair.show).toHaveBeenCalled()
+    })
+
+    it('onInterfaceTypeChange only shows the crosshair for touch/keyboard', () => {
+      const { ctx, state, crossHair } = setup({ interfaceType: 'touch' })
+      crossHair.show.mockClear()
+      ctx.onInterfaceTypeChange(state, { interfaceType: 'mouse' })
+      expect(state.interfaceType).toBe('mouse')
+      expect(crossHair.show).not.toHaveBeenCalled()
+
+      ctx.onInterfaceTypeChange(state, { interfaceType: 'keyboard' })
+      expect(state.interfaceType).toBe('keyboard')
+      expect(crossHair.show).toHaveBeenCalled()
+    })
+
+    it('blur outside the container hides the crosshair', () => {
+      const { ctx, state, crossHair } = setup({ interfaceType: 'touch' })
+      ctx.onBlur(state, { target: document.createElement('div') })
+      expect(crossHair.hide).toHaveBeenCalled()
+    })
+
+    it('blur landing on the container itself does not hide the crosshair', () => {
+      const { ctx, state, crossHair, container } = setup({ interfaceType: 'touch' })
+      crossHair.hide.mockClear()
+      ctx.onBlur(state, { target: container })
+      expect(crossHair.hide).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('snap', () => {
+    it('onMouseMove triggers a snap check at the pointer when snapping is enabled', () => {
+      const { ctx, state } = setup()
+      const snap = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+      ctx.map._snapInstance = snap
+      state.getSnapEnabled = () => true
+      ctx.onMouseMove(state, { point: { x: 7, y: 8 } })
+      expect(snap.snapToClosestPoint).toHaveBeenCalledWith({ point: { x: 7, y: 8 }, lngLat: CENTER, _explicit: true })
+    })
+
+    it('onMouseMove does nothing while snapping is disabled', () => {
+      const { ctx, state } = setup()
+      const snap = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+      ctx.map._snapInstance = snap
+      state.getSnapEnabled = () => false
+      ctx.onMouseMove(state, { point: { x: 7, y: 8 } })
+      expect(snap.snapToClosestPoint).not.toHaveBeenCalled()
+    })
+
+    it('a real click commits the snapped coordinate when a snap candidate is active', () => {
+      const { ctx, state } = setup()
+      ctx.map._snapInstance = { status: true, snapStatus: true, snapCoords: [9, 9], snapToClosestPoint: jest.fn() }
+      state.getSnapEnabled = () => true
+      ctx.onClick(state, clickEvent(ctx, 1, 2))
+      expect(state.point.coordinates).toEqual([9, 9])
+    })
+
+    it('crosshair placement snaps to a candidate found at the map centre', () => {
+      const { ctx, state, button } = setup()
+      const snap = { status: true, snapStatus: true, snapCoords: [9, 9], snapToClosestPoint: jest.fn() }
+      ctx.map._snapInstance = snap
+      state.getSnapEnabled = () => true
+      ctx.onVertexButtonClick(state, { target: button })
+      expect(snap.snapToClosestPoint).toHaveBeenCalled()
+      expect(state.point.coordinates).toEqual([9, 9])
+    })
+
+    // Regression coverage: onMove used to be a no-op, so touch/keyboard users never saw a
+    // live snap-target indicator while panning — it only ever checked at the moment of
+    // commit, with nothing shown beforehand.
+    it('onMove keeps the snap indicator live at the crosshair while panning, touch/keyboard only', () => {
+      const { ctx, state } = setup({ interfaceType: 'touch' })
+      const snap = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+      ctx.map._snapInstance = snap
+      state.getSnapEnabled = () => true
+
+      ctx.onMove(state)
+      expect(snap.snapToClosestPoint).toHaveBeenCalledWith({ point: expect.any(Object), lngLat: CENTER, _explicit: true })
+
+      snap.snapToClosestPoint.mockClear()
+      state.interfaceType = 'mouse'
+      ctx.onMove(state)
+      expect(snap.snapToClosestPoint).not.toHaveBeenCalled()
+    })
+
+    it('switching to touch or keyboard shows the snap indicator immediately, not just on the first pan', () => {
+      const snap = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+
+      const touch = setup({ interfaceType: 'mouse' })
+      touch.ctx.map._snapInstance = snap
+      touch.state.getSnapEnabled = () => true
+      touch.ctx.onTouchStart(touch.state)
+      expect(snap.snapToClosestPoint).toHaveBeenCalled()
+
+      snap.snapToClosestPoint.mockClear()
+      const keyboard = setup({ interfaceType: 'mouse' })
+      keyboard.ctx.map._snapInstance = snap
+      keyboard.state.getSnapEnabled = () => true
+      keyboard.container.focus()
+      keyboard.ctx.onKeydown(keyboard.state, { key: 'ArrowUp' })
+      expect(snap.snapToClosestPoint).toHaveBeenCalled()
+    })
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/__helpers__/harness.js

@@ -0,0 +1,102 @@
+import { EditPointMode } from '../../editPointMode.js'
+import { createUndoStack } from '../../../../../utils/undoStack.js'
+import PointFeature from '../../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/point.js'
+
+/**
+ * Shared test harness for the point-edit mode and its handler modules. Builds the real
+ * EditPointMode (with the real DirectSelect parent methods it spreads in and a real
+ * mapbox-gl-draw Point feature class) over test doubles for the map, store, api and DOM.
+ * Mirrors editVertexMode/__helpers__/harness.js. Excluded from coverage.
+ */
+
+// Deterministic projection: lngLat <-> pixel is a x10 scale.
+const project = (p) => {
+  const [lng, lat] = Array.isArray(p) ? p : [p.lng, p.lat]
+  return { x: lng * 10, y: lat * 10 }
+}
+const unproject = ({ x, y }) => ({ lng: x / 10, lat: y / 10 })
+
+export const POINT = () => ({ type: 'Point', coordinates: [5, 5] })
+export const dragEvt = (lng, lat) => ({ originalEvent: { stopPropagation: jest.fn() }, lngLat: { lng, lat }, point: { x: lng * 10, y: lat * 10 } })
+export const svgTarget = (state) => ({ parentNode: state.touchPointTarget })
+
+const contexts = []
+
+export const createHarness = (geometry = POINT(), setupOptions = {}) => {
+  const features = new Map()
+  const store = {
+    featureChanged: jest.fn(),
+    render: jest.fn(),
+    get: (id) => features.get(id)
+  }
+  const api = {
+    add: jest.fn((geojson) => {
+      features.set(geojson.id, new PointFeature(_ctx, { ...geojson, id: geojson.id }))
+      return [geojson.id]
+    }),
+    changeMode: jest.fn(),
+    delete: jest.fn(),
+    trash: jest.fn()
+  }
+  const _ctx = { store, api, options: {} }
+
+  const feature = new PointFeature(_ctx, { type: 'Feature', id: 'feat-1', properties: {}, geometry })
+  features.set('feat-1', feature)
+
+  const listeners = {}
+  const map = {
+    _undoStack: createUndoStack(() => {}),
+    _snapInstance: null,
+    _lastEditFeatureId: null,
+    _drawEditContainer: null,
+    _editingFeatureId: null,
+    _drawCurrentMapStyle: { mapColorScheme: 'light' },
+    dragPan: { enable: jest.fn(), disable: jest.fn(), isEnabled: () => true },
+    doubleClickZoom: { enable: jest.fn(), disable: jest.fn() },
+    getSource: jest.fn(() => ({ setData: jest.fn() })),
+    getLayer: jest.fn(() => null),
+    setLayoutProperty: jest.fn(),
+    getCenter: () => ({ lng: 5, lat: 5 }),
+    project: jest.fn(project),
+    unproject: jest.fn(unproject),
+    fire: jest.fn(function (type, e) { (listeners[type] ?? []).forEach((h) => h(e)) }),
+    on: jest.fn((type, h) => { (listeners[type] ??= []).push(h) }),
+    off: jest.fn((type, h) => { listeners[type] = (listeners[type] ?? []).filter((x) => x !== h) })
+  }
+
+  const container = document.createElement('div')
+  container.tabIndex = 0
+  document.body.appendChild(container)
+
+  const ctx = {
+    map,
+    _ctx,
+    getFeature: (id) => features.get(id),
+    getSelected: jest.fn(() => [feature]),
+    setSelected: jest.fn(),
+    setSelectedCoordinates: jest.fn(),
+    clearSelectedCoordinates: jest.fn(),
+    setActionableState: jest.fn(),
+    updateUIClasses: jest.fn(),
+    fire: jest.fn()
+  }
+  Object.assign(ctx, EditPointMode)
+
+  const options = {
+    container,
+    featureId: 'feat-1',
+    interfaceType: 'mouse',
+    undoButtonId: 'undo-vertex',
+    isPanEnabled: true,
+    ...setupOptions
+  }
+  const state = ctx.onSetup(options)
+  contexts.push({ ctx, state })
+  return { ctx, state, feature, features, map, store, api, container, options }
+}
+
+afterEach(() => {
+  contexts.splice(0).forEach(({ ctx, state }) => { try { ctx.onStop(state) } catch { /* already stopped */ } })
+  document.body.innerHTML = ''
+  jest.useRealTimers()
+})

package/plugins/draw/src/adapters/maplibre/modes/editPointMode/keyboardHandlers.js

@@ -0,0 +1,82 @@
+import { ARROW_KEYS, ARROW_OFFSETS, isInteractiveElementFocused, isUndoShortcut, sharedKeyboardHandlers } from '../../utils/keyboardShortcuts.js'
+
+/**
+ * Keyboard interaction for the point-edit mode: arrow-key/Shift+arrow nudge and Cmd/Ctrl+Z
+ * undo. Mixed into EditPointMode. Unlike editVertexMode: the point is always selected (no
+ * Space-to-select step, no Alt+arrow navigation — nothing to navigate to with one
+ * coordinate), and Escape is deliberately left unbound here — deselecting would strand the
+ * user with no way back except the Cancel button.
+ */
+export const keyboardHandlers = {
+  ...sharedKeyboardHandlers,
+
+  onKeydown (state, e) {
+    if (isInteractiveElementFocused(state)) {
+      return
+    }
+
+    state.interfaceType = 'keyboard'
+    this.hideTouchPointIndicator(state)
+
+    if (e.key === ' ') {
+      // Prevent the page from scrolling; there's nothing to select, the point already is.
+      e.preventDefault()
+      return
+    }
+    if (ARROW_KEYS.has(e.key)) {
+      this.handleArrowKey(state, e)
+      return
+    }
+    if (isUndoShortcut(e)) {
+      this.handleUndoShortcut(state, e)
+    }
+  },
+
+  // A plain or Shift+arrow nudges the point (Shift's finer-step-vs-coarse-step distinction
+  // lives in pointOperations.js's getOffset). Alt+arrow is left unhandled — nothing to
+  // navigate to with a single coordinate.
+  handleArrowKey (state, e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.movePointByKey(state, e)
+  },
+
+  movePointByKey (state, e) {
+    const currentCoord = this.getPointCoord(state)
+    if (!currentCoord) {
+      return
+    }
+
+    // Save starting position for undo (only on first move of a held-key sequence)
+    if (!state._keyboardMoveStartPosition) {
+      state._keyboardMoveStartPosition = [...currentCoord]
+    }
+
+    this.movePoint(state, this._keyboardMoveTarget(state, e, currentCoord))
+  },
+
+  // Resolve the destination coordinate for a keyboard nudge, applying or breaking snap —
+  // delegates to the shared resolver (utils/snapMovement.js) also used by MoveControls'
+  // nudgePointByDelta, so both snap identically.
+  _keyboardMoveTarget (state, e, currentCoord) {
+    const [dx, dy] = ARROW_OFFSETS[e.key]
+    return this.resolveSnapTarget(state, dx, dy, currentCoord, () => this.getNewCoord(state, e))
+  },
+
+  onKeyup (state, e) {
+    if (isInteractiveElementFocused(state)) {
+      return
+    }
+
+    state.interfaceType = 'keyboard'
+    if (ARROW_KEYS.has(e.key)) {
+      e.stopPropagation()
+
+      // Push undo for the whole held-key move sequence as one step
+      if (state._keyboardMoveStartPosition) {
+        this.pushUndo({ type: 'move_point', featureId: state.featureId, vertexIndex: 0, previousPosition: state._keyboardMoveStartPosition })
+        state._keyboardMoveStartPosition = null
+      }
+    }
+  }
+}