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

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

@@ -0,0 +1,246 @@
+import { createDrawPointMode } from './drawPointMode.js'
+import { wireInputEvents, applyCrossHairVisibility } from '../draw/drawInput.js'
+import { createFeatureStore } from '../core/featureStore.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+import { createFakeMap, createFakeManager, pointFeature } from '../__helpers__/harness.js'
+
+jest.mock('../draw/drawInput.js', () => ({
+  wireInputEvents: jest.fn(() => ({ destroy: jest.fn() })),
+  applyCrossHairVisibility: jest.fn()
+}))
+
+// Matches DrawMode.test.js's own convention: real OL interactions are used, but drawstart/
+// drawend/drawabort are dispatched as plain event objects directly (rather than exercised
+// through the real appendCoordinates/startDrawing_/finishDrawing internals, which need a
+// fully-featured OL map — getMap().getView().getProjection() — well beyond what the
+// lightweight fake map here provides or needs to).
+const setup = (options = {}) => {
+  const map = createFakeMap()
+  const manager = createFakeManager()
+  manager.store = createFeatureStore()
+  const emitted = () => manager.emit.mock.calls.map(([type, payload]) => ({ type, payload }))
+  const mode = createDrawPointMode({
+    map,
+    manager,
+    options: {
+      featureId: 'point-1',
+      properties: { symbol: 'pin' },
+      container: null,
+      crossHair: null,
+      snap: null,
+      mapProvider: { getCenter: () => [5, 5] },
+      ...options
+    }
+  })
+  const interaction = map.interactions[0]
+  const wireArgs = wireInputEvents.mock.calls.at(-1)[0]
+  return { map, manager, emitted, mode, interaction, wireArgs }
+}
+
+afterEach(() => jest.clearAllMocks())
+
+describe('createDrawPointMode', () => {
+  test('adds a Point-type Draw interaction to the map', () => {
+    const { interaction } = setup()
+    expect(interaction).toBeDefined()
+  })
+
+  test('suppresses OL\'s default sketch style — no blue cursor-following circle', () => {
+    const { interaction } = setup()
+    // OL stores the resolved style on the sketch overlay layer, not on the interaction
+    // itself — this is what OL actually calls per frame to render the sketch/hover point.
+    expect(interaction.overlay_.getStyle()()).toEqual([])
+  })
+
+  test('drawend commits the sketch under the requested id and fires CREATE', () => {
+    const { interaction, manager, emitted } = setup()
+    interaction.dispatchEvent({ type: 'drawend', feature: pointFeature([1, 2], 'ol-generated-id') })
+
+    const created = emitted().filter((e) => e.type === ADAPTER_EVENTS.CREATE)
+    expect(created).toHaveLength(1)
+    expect(created[0].payload.id).toBe('point-1') // re-id'd, not the OL-generated one
+    expect(created[0].payload.geometry.coordinates).toEqual([1, 2])
+    expect(created[0].payload.properties).toEqual({ symbol: 'pin' })
+    expect(manager.store.get('point-1')).toBeTruthy()
+  })
+
+  test('calls the adapter-injected resolvePointSymbol hook with the committed OL feature, after re-id', () => {
+    const resolvePointSymbol = jest.fn()
+    const { interaction } = setup({ resolvePointSymbol })
+    interaction.dispatchEvent({ type: 'drawend', feature: pointFeature([1, 2], 'ol-generated-id') })
+
+    expect(resolvePointSymbol).toHaveBeenCalledTimes(1)
+    const [olFeature] = resolvePointSymbol.mock.calls[0]
+    expect(olFeature.getId()).toBe('point-1')
+  })
+
+  test('does not throw when no resolvePointSymbol hook was supplied', () => {
+    const { interaction } = setup()
+    expect(() => interaction.dispatchEvent({ type: 'drawend', feature: pointFeature([1, 2], 'ol-generated-id') })).not.toThrow()
+  })
+
+  test('defaults properties to {} when none are supplied', () => {
+    const { interaction, manager, emitted } = setup({ properties: undefined })
+    interaction.dispatchEvent({ type: 'drawend', feature: pointFeature([1, 2], 'ol-generated-id') })
+    const created = emitted().filter((e) => e.type === ADAPTER_EVENTS.CREATE)
+    // OL's GeoJSON writer reports no properties as null (not {}) — the meaningful
+    // assertion is what setProperties() was actually called with, on the stored feature.
+    expect(created[0].payload.properties).toBeNull()
+    const { geometry, ...nonGeometryProps } = manager.store.getOL('point-1').getProperties()
+    expect(nonGeometryProps).toEqual({})
+  })
+
+  test('condition vetoes placement via onGeometryChange', () => {
+    const { interaction, manager, emitted } = setup()
+    manager._geometryValidator = () => ({ valid: false, reason: 'not allowed here' })
+    const condition = interaction.condition_
+    const allowed = condition({ coordinate: [1, 2], originalEvent: {} })
+    expect(allowed).toBe(false)
+    const blocked = emitted().filter((e) => e.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)
+    expect(blocked).toHaveLength(1)
+    expect(blocked[0].payload).toMatchObject({ reason: 'not allowed here', phase: 'place', mode: 'draw_point' })
+  })
+
+  test('condition allows an unvetoed placement', () => {
+    const { interaction } = setup()
+    const condition = interaction.condition_
+    expect(condition({ coordinate: [1, 2], originalEvent: {} })).toBe(true)
+  })
+
+  test('condition blocks modifier-key clicks', () => {
+    const { interaction } = setup()
+    const condition = interaction.condition_
+    expect(condition({ coordinate: [1, 2], originalEvent: { shiftKey: true } })).toBe(false)
+  })
+
+  test('drawabort emits CANCEL', () => {
+    const { interaction, emitted } = setup()
+    interaction.dispatchEvent({ type: 'drawabort' })
+    expect(emitted().some((e) => e.type === ADAPTER_EVENTS.CANCEL)).toBe(true)
+  })
+
+  describe('touch/keyboard placement (via the wired placeVertex callback)', () => {
+    // appendCoordinates()/finishDrawing() are OL-internal machinery already exercised by
+    // OL's own test suite — what this mode owns is calling them with the right (possibly
+    // snapped) coordinate, gated by the same placement veto the mouse path uses.
+    const spyOnCommit = (interaction) => ({
+      append: jest.spyOn(interaction, 'appendCoordinates').mockImplementation(() => {}),
+      finish: jest.spyOn(interaction, 'finishDrawing').mockImplementation(() => {})
+    })
+
+    test('places at the (possibly snapped) map centre and hides the indicator', () => {
+      const snap = { apply: jest.fn((c) => [c[0] + 1, c[1] + 1]), hideIndicator: jest.fn() }
+      const mapProvider = { getCenter: () => [5, 5] }
+      const { wireArgs, interaction } = setup({ snap, mapProvider, interfaceType: 'touch' })
+      const { append, finish } = spyOnCommit(interaction)
+
+      wireArgs.placeVertex()
+
+      expect(snap.apply).toHaveBeenCalledWith([5, 5])
+      expect(snap.hideIndicator).toHaveBeenCalled()
+      expect(append).toHaveBeenCalledWith([[6, 6]])
+      expect(finish).toHaveBeenCalled()
+    })
+
+    test('does not snap on mouse interface', () => {
+      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+      const { wireArgs, interaction } = setup({ snap, interfaceType: 'mouse' })
+      const { append } = spyOnCommit(interaction)
+      wireArgs.placeVertex()
+      expect(snap.apply).not.toHaveBeenCalled()
+      expect(append).toHaveBeenCalledWith([[5, 5]])
+    })
+
+    test('a vetoed crosshair placement never commits', () => {
+      const { wireArgs, manager, emitted, interaction } = setup()
+      const { append, finish } = spyOnCommit(interaction)
+      manager._geometryValidator = () => false
+      wireArgs.placeVertex()
+      expect(append).not.toHaveBeenCalled()
+      expect(finish).not.toHaveBeenCalled()
+      expect(emitted().filter((e) => e.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)).toHaveLength(1)
+    })
+
+    test('updateRubberbanding shows the snap indicator at the crosshair for touch/keyboard, not mouse', () => {
+      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+      const mapProvider = { getCenter: () => [7, 7] }
+      const { wireArgs } = setup({ snap, mapProvider, interfaceType: 'keyboard' })
+      wireArgs.updateRubberbanding()
+      expect(snap.apply).toHaveBeenCalledWith([7, 7])
+    })
+
+    test('updateRubberbanding does nothing on mouse interface', () => {
+      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+      const { wireArgs } = setup({ snap, interfaceType: 'mouse' })
+      wireArgs.updateRubberbanding()
+      expect(snap.apply).not.toHaveBeenCalled()
+    })
+
+    // Regression: without this, switching to touch/keyboard left the indicator hidden until
+    // the next pointermove/change:center — mirrors draw/drawInput.js's createDrawInput and
+    // the MapLibre adapter's onInterfaceTypeChange (which calls onMove(state) for the same
+    // reason).
+    test('switching interface type via the wired setInterfaceType immediately refreshes the snap indicator at the crosshair', () => {
+      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+      const mapProvider = { getCenter: () => [9, 9] }
+      const { wireArgs } = setup({ snap, mapProvider, interfaceType: 'mouse' })
+      wireArgs.setInterfaceType('touch')
+      expect(snap.apply).toHaveBeenCalledWith([9, 9])
+    })
+
+    test('switching interface type via the wired setInterfaceType does not query snap for mouse', () => {
+      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+      const { wireArgs } = setup({ snap, interfaceType: 'touch' })
+      wireArgs.setInterfaceType('mouse')
+      expect(snap.apply).not.toHaveBeenCalled()
+    })
+
+    test('clearLastCoord is a harmless no-op (points have no lastPlacedCoord bookkeeping)', () => {
+      const { wireArgs } = setup()
+      expect(() => wireArgs.clearLastCoord()).not.toThrow()
+    })
+  })
+
+  test('applies crosshair visibility for the initial interface type on setup', () => {
+    setup({ interfaceType: 'touch' })
+    expect(applyCrossHairVisibility).toHaveBeenCalledWith(null, 'touch')
+  })
+
+  describe('mode API', () => {
+    test('done/undo are no-ops — a single click has nothing pending or to undo', () => {
+      const { mode } = setup()
+      expect(() => mode.done()).not.toThrow()
+      expect(() => mode.undo()).not.toThrow()
+    })
+
+    test('cancel aborts the in-progress sketch', () => {
+      const { mode, interaction } = setup()
+      const abortSpy = jest.spyOn(interaction, 'abortDrawing').mockImplementation(() => {})
+      mode.cancel()
+      expect(abortSpy).toHaveBeenCalled()
+    })
+
+    test('setInterfaceType delegates to applyCrossHairVisibility', () => {
+      const { mode } = setup()
+      applyCrossHairVisibility.mockClear()
+      mode.setInterfaceType('touch')
+      expect(applyCrossHairVisibility).toHaveBeenCalledWith(null, 'touch')
+    })
+
+    test('setInterfaceType also refreshes the snap indicator at the crosshair for touch/keyboard', () => {
+      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+      const mapProvider = { getCenter: () => [3, 4] }
+      const { mode } = setup({ snap, mapProvider })
+      mode.setInterfaceType('keyboard')
+      expect(snap.apply).toHaveBeenCalledWith([3, 4])
+    })
+
+    test('destroy emits the final interface type, tears down input and removes the interaction', () => {
+      const { mode, map, interaction, emitted } = setup()
+      const removeSpy = jest.spyOn(map, 'removeInteraction')
+      mode.destroy()
+      expect(emitted().some((e) => e.type === ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE)).toBe(true)
+      expect(removeSpy).toHaveBeenCalledWith(interaction)
+    })
+  })
+})

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()
+    }
+  }
+}