@defra/interactive-map 0.0.43-alpha → 0.0.44-alpha

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

@@ -56,7 +56,7 @@ describe('createDrawPointMode', () => {
     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)
+    const created = emitted().filter((event) => event.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])
@@ -82,7 +82,7 @@ describe('createDrawPointMode', () => {
   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)
+    const created = emitted().filter((event) => event.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()
@@ -96,7 +96,7 @@ describe('createDrawPointMode', () => {
     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)
+    const blocked = emitted().filter((event) => event.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)
     expect(blocked).toHaveLength(1)
     expect(blocked[0].payload).toMatchObject({ reason: 'not allowed here', phase: 'place', mode: 'draw_point' })
   })
@@ -116,7 +116,7 @@ describe('createDrawPointMode', () => {
   test('drawabort emits CANCEL', () => {
     const { interaction, emitted } = setup()
     interaction.dispatchEvent({ type: 'drawabort' })
-    expect(emitted().some((e) => e.type === ADAPTER_EVENTS.CANCEL)).toBe(true)
+    expect(emitted().some((event) => event.type === ADAPTER_EVENTS.CANCEL)).toBe(true)
   })
 
   describe('touch/keyboard placement (via the wired placeVertex callback)', () => {
@@ -142,13 +142,13 @@ describe('createDrawPointMode', () => {
       expect(finish).toHaveBeenCalled()
     })
 
-    test('does not snap on mouse interface', () => {
-      const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
+    test('still snaps with interfaceType mouse — placeVertex is only ever reached via the crosshair path (Enter, the add-vertex button, or the crosshair\'s own click), never a real mouse click', () => {
+      const snap = { apply: jest.fn(() => [9, 9]), 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]])
+      expect(snap.apply).toHaveBeenCalledWith([5, 5])
+      expect(append).toHaveBeenCalledWith([[9, 9]])
     })
 
     test('a vetoed crosshair placement never commits', () => {
@@ -158,7 +158,7 @@ describe('createDrawPointMode', () => {
       wireArgs.placeVertex()
       expect(append).not.toHaveBeenCalled()
       expect(finish).not.toHaveBeenCalled()
-      expect(emitted().filter((e) => e.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)).toHaveLength(1)
+      expect(emitted().filter((event) => event.type === ADAPTER_EVENTS.PLACEMENT_BLOCKED)).toHaveLength(1)
     })
 
     test('updateRubberbanding shows the snap indicator at the crosshair for touch/keyboard, not mouse', () => {
@@ -169,11 +169,12 @@ describe('createDrawPointMode', () => {
       expect(snap.apply).toHaveBeenCalledWith([7, 7])
     })
 
-    test('updateRubberbanding does nothing on mouse interface', () => {
+    test('updateRubberbanding still refreshes the indicator regardless of interfaceType — the caller decides when it\'s worth calling this at all', () => {
       const snap = { apply: jest.fn(), hideIndicator: jest.fn() }
-      const { wireArgs } = setup({ snap, interfaceType: 'mouse' })
+      const mapProvider = { getCenter: () => [7, 7] }
+      const { wireArgs } = setup({ snap, mapProvider, interfaceType: 'mouse' })
       wireArgs.updateRubberbanding()
-      expect(snap.apply).not.toHaveBeenCalled()
+      expect(snap.apply).toHaveBeenCalledWith([7, 7])
     })
 
     // Regression: without this, switching to touch/keyboard left the indicator hidden until
@@ -239,7 +240,7 @@ describe('createDrawPointMode', () => {
       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(emitted().some((event) => event.type === ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE)).toBe(true)
       expect(removeSpy).toHaveBeenCalledWith(interaction)
     })
 

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

@@ -250,7 +250,7 @@ export const createEditPointMode = ({ map, manager, options }) => {
     // Matches MaplibreDrawAdapter.deleteVertex's existing no-op precedent.
     deleteVertex () {},
 
-    // MoveControls' D-pad, routed here via mapProvider.activeMoveTarget (events.js) — claimed
+    // MapControls' 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,
 

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

@@ -208,7 +208,7 @@ describe('mouse hit-testing respects the icon\'s own rendered pixels, not a fixe
   })
 })
 
-test('nudgeSelectedVertex (MoveControls D-pad) moves the point and is undoable', () => {
+test('nudgeSelectedVertex (MapControls D-pad) moves the point and is undoable', () => {
   const { manager, mode, coord } = setup()
   mode.nudgeSelectedVertex(1, 0, true)
   expect(coord()).not.toEqual([5, 5])
@@ -249,6 +249,22 @@ test('keyboard: Delete is a no-op — there is no delete-vertex action for a poi
   expect(coord()).toEqual([5, 5])
 })
 
+// A point is "always selected" (pointSelectionState.js's selectedVertexIndex never leaves 0),
+// so the shared keyboardHandler.js's Alt+<key> shadow guard (gated on selectedVertexIndex >= 0)
+// stays unconditionally true here — unlike edit_vertex, where it only applies once a vertex is
+// actually selected.
+test('keyboard: Alt+Enter/Alt+Arrow keyup are shadowed from the app-wide label shortcuts for the whole session', () => {
+  setup()
+  const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', altKey: true, cancelable: true, bubbles: true })
+  const arrowEvent = new KeyboardEvent('keyup', { key: 'ArrowRight', altKey: true, cancelable: true, bubbles: true })
+  const enterSpy = jest.spyOn(enterEvent, 'stopPropagation')
+  const arrowSpy = jest.spyOn(arrowEvent, 'stopPropagation')
+  window.dispatchEvent(enterEvent)
+  window.dispatchEvent(arrowEvent)
+  expect(enterSpy).toHaveBeenCalled()
+  expect(arrowSpy).toHaveBeenCalled()
+})
+
 test('keyboard: Cmd/Ctrl+Z undoes via the same op-popping logic as mode.undo()', () => {
   const { manager, coord } = setup()
   key('keydown', { key: 'ArrowRight' })

package/plugins/draw/src/events.js

@@ -36,8 +36,8 @@ const createGeometryInvalidEmitter = (eventBus, hints) => (payload) => {
   if (payload.reason && !isIncompleteShape(payload.reason)) { hints.show(payload.reason) }
 }
 
-// Claims MoveControls' D-pad for the currently selected vertex — see the generic
-// mapProvider.activeMoveTarget contract (MoveControls.jsx). Any plugin could use
+// Claims MapControls' D-pad for the currently selected vertex — see the generic
+// mapProvider.activeMoveTarget contract (MapControls.jsx). Any plugin could use
 // this slot; the draw plugin is just its first consumer.
 const buildVertexMoveTarget = (draw) => ({
   move: (dx, dy, isLargeStep) => draw.nudgeSelectedVertex(dx, dy, isLargeStep),
@@ -45,7 +45,7 @@ const buildVertexMoveTarget = (draw) => ({
 })
 
 // Vertex-selection handlers: sync pluginState.selectedVertexIndex, and claim/release
-// MoveControls' D-pad via buildVertexMoveTarget above.
+// MapControls' D-pad via buildVertexMoveTarget above.
 const createVertexSelectionHandlers = ({ draw, pluginState, mapProvider, eventBus }) => ({
   onVertexSelection: (e) => {
     pluginState.dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: e })
@@ -233,7 +233,7 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
   const resetState = () => {
     pluginState.dispatch({ type: 'SET_MODE', payload: null })
     pluginState.dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null } })
-    // Release MoveControls' D-pad back to panning the map whenever a draw/edit
+    // Release MapControls' D-pad back to panning the map whenever a draw/edit
     // session ends — a stale claim here would silently hijack it for good.
     mapProvider.activeMoveTarget = null
   }

package/plugins/draw/src/events.test.js

@@ -179,7 +179,7 @@ describe('draw event handlers', () => {
     expect(() => drawHandler(draw, 'cancel')()).not.toThrow()
   })
 
-  test('vertexselection dispatches, emits, and claims mapProvider.activeMoveTarget for MoveControls', () => {
+  test('vertexselection dispatches, emits, and claims mapProvider.activeMoveTarget for MapControls', () => {
     const { draw, dispatch, eventBus, mapProvider } = setup()
     drawHandler(draw, 'vertexselection')({ index: 2 })
     expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED_VERTEX_INDEX', payload: { index: 2 } })

package/plugins/draw/src/hooks/useSpatialList.js

@@ -0,0 +1,180 @@
+import { useEffect, useRef } from 'react'
+import { EVENTS } from '../../../../src/config/events.js'
+import { scaleFactor } from '../../../../src/config/appConfig.js'
+import { ADAPTER_EVENTS } from '../adapterEvents.js'
+
+const EDIT_VERTEX_MODE = 'edit_vertex'
+const DRAW_PROVIDER_ID = 'draw'
+
+// Mirrors interact's own projectToScreen (plugins/interact/src/hooks/useSpatialList.js) —
+// mapProvider.mapToScreen is the provider-agnostic projection every mapProvider implements,
+// not any adapter-internal pixel conversion.
+const projectToScreen = (mapProvider, mapSize, coord) => {
+  const { x, y } = mapProvider.mapToScreen(coord)
+  return { x: x * scaleFactor[mapSize], y: y * scaleFactor[mapSize] }
+}
+
+// ids stay flat vertices-then-midpoints indices — matches the mode's own selectedVertexIndex
+// convention on both adapters (see the adapters' getVertexItems() doc comments) and is what
+// selectVertex/insertVertexAtMidpoint expect, so it's unrelated to display order. The array
+// order below is interleaved for display only: Point 1, Insert 1-2, Point 2, ... The "between
+// N and M" label (and this interleave) only reads correctly for a single ring/part (the
+// common case); a shape with holes or multiple parts would need ring-aware numbering to stay
+// accurate, not done here.
+const buildVertexItems = (mapProvider, mapSize) => {
+  const { vertices, midpoints } = mapProvider.draw?.getVertexItems?.() ?? { vertices: [], midpoints: [] }
+  const toVertexItem = (coord, i) => ({
+    id: String(i),
+    label: `Point ${i + 1}`,
+    isMidpoint: false,
+    ...projectToScreen(mapProvider, mapSize, coord)
+  })
+  const toMidpointItem = (coord, i) => ({
+    id: String(vertices.length + i),
+    // Kept as short as possible — a voice user hears/reads this in full each time, and
+    // "Insert point between N and M" was long enough to lose.
+    label: `Insert ${i + 1}-${((i + 1) % vertices.length) + 1}`,
+    isMidpoint: true,
+    ...projectToScreen(mapProvider, mapSize, coord)
+  })
+  const items = []
+  vertices.forEach((coord, i) => {
+    items.push(toVertexItem(coord, i))
+    if (i < midpoints.length) {
+      items.push(toMidpointItem(midpoints[i], i))
+    }
+  })
+  return items
+}
+
+/**
+ * Rebuilds the vertex/midpoint item list whenever edit_vertex is entered/left, on every
+ * geometry change, and on every map move (pan/zoom moves each item's screen position even
+ * though the underlying geographic coordinate hasn't changed — same reason interact's own
+ * hook rebuilds on MAP_MOVE_END). Keeps the result in itemsRef for useConfirmHandler to
+ * resolve against later, and registers as an exclusive spatialListRegistry provider —
+ * claiming ownership while edit_vertex is active (interact's own items are excluded
+ * meanwhile, restored automatically once the claim is released) rather than contributing
+ * additively like interact does.
+ */
+function useVertexItemSync ({ pluginState, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus }) {
+  useEffect(() => {
+    const rebuild = () => {
+      itemsRef.current = pluginState.mode === EDIT_VERTEX_MODE ? buildVertexItems(mapProvider, mapSize) : []
+      spatialListRegistry.notifyItemsChanged(DRAW_PROVIDER_ID)
+    }
+    rebuild()
+    eventBus.on(EVENTS.MAP_MOVE_END, rebuild)
+    const { draw } = mapProvider
+    if (!draw) {
+      return () => eventBus.off(EVENTS.MAP_MOVE_END, rebuild)
+    }
+    draw.on(ADAPTER_EVENTS.UPDATE, rebuild)
+    return () => {
+      eventBus.off(EVENTS.MAP_MOVE_END, rebuild)
+      draw.off(ADAPTER_EVENTS.UPDATE, rebuild)
+    }
+  }, [pluginState.mode, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus])
+
+  // Registers once, for the lifetime of the hook — safe outside edit_vertex too, since an
+  // exclusive-capable provider only ever contributes while it holds the claim (see
+  // spatialListRegistry.js). Declared after the effect above for the same initial-recompute
+  // ordering reason interact's own hook documents.
+  useEffect(() => {
+    spatialListRegistry.registerItemProvider(DRAW_PROVIDER_ID, {
+      // focusable: false — Tab-only keyboard users already have a full path via the map's own
+      // arrow-key nudge/Alt+Arrow navigate, so this list exists purely for Voice Control and a
+      // screen reader's own virtual-cursor discovery + activation. See SpatialList.jsx's own
+      // comment on why forcing every item's tabIndex to -1 is deliberate here.
+      getItems: () => ({ items: itemsRef.current, multiselectable: false, label: 'Shape points', focusable: false }),
+      exclusive: true
+    })
+    return () => { spatialListRegistry.unregisterItemProvider(DRAW_PROVIDER_ID) }
+  }, [spatialListRegistry, itemsRef])
+
+  useEffect(() => {
+    if (pluginState.mode !== EDIT_VERTEX_MODE) {
+      return undefined
+    }
+    spatialListRegistry.claimExclusive(DRAW_PROVIDER_ID)
+    return () => spatialListRegistry.releaseExclusive(DRAW_PROVIDER_ID)
+  }, [pluginState.mode, spatialListRegistry])
+}
+
+/**
+ * Listens for MAP_SET_ACTIVE_ITEM and previews (non-destructively) whichever vertex or
+ * midpoint the listbox cursor is now on — every arrow-key move through the list, mirroring
+ * how mouse/touch/keyboard selection already behaves live elsewhere in edit_vertex. Unlike
+ * interact's real map features (which need an explicit Enter/Space confirm before anything
+ * happens), there's no separate "preview" step for a real vertex anywhere else in this mode —
+ * arrowing onto one already is the live selection. A midpoint is also just previewed here;
+ * confirming the actual insert is useConfirmHandler's job below.
+ */
+function useActiveVertexHandler ({ eventBus, mapProvider, pluginState, activeIdRef }) {
+  useEffect(() => {
+    const handle = ({ id }) => {
+      activeIdRef.current = id
+      if (id === null || pluginState.mode !== EDIT_VERTEX_MODE) {
+        return
+      }
+      mapProvider.draw?.selectVertex?.(Number(id))
+    }
+    eventBus.on(EVENTS.MAP_SET_ACTIVE_ITEM, handle)
+    return () => { eventBus.off(EVENTS.MAP_SET_ACTIVE_ITEM, handle) }
+  }, [eventBus, mapProvider, pluginState.mode, activeIdRef])
+}
+
+/**
+ * Handles MAP_SELECT_ITEM (Enter/Space, or a click/Voice-Control click — and, since none of
+ * these items are ever a real Tab stop, a screen reader's own virtual-cursor activation gesture
+ * too, which likewise fires as a click — all three arrive here identically). For a midpoint,
+ * this is the destructive step: commits a new vertex there (a real vertex is already the live
+ * selection the moment it's previewed, so confirming one doesn't change anything on the map).
+ * Either way, confirming announces what happened and hands keyboard focus back to the viewport
+ * — landing the user exactly where the pre-existing, untouched arrow-key nudge/Alt+Arrow flow
+ * already works, same as if they'd selected that point with a mouse click. This is deliberately
+ * unconditional (not just for midpoints) so every input path ends up in the same place.
+ */
+function useConfirmHandler ({ eventBus, mapProvider, pluginState, activeIdRef, itemsRef, viewportRef, announce }) {
+  useEffect(() => {
+    const handleConfirm = () => {
+      if (pluginState.mode !== EDIT_VERTEX_MODE || activeIdRef.current === null) {
+        return
+      }
+      const item = itemsRef.current.find(i => i.id === activeIdRef.current)
+      if (!item) {
+        return
+      }
+      if (item.isMidpoint) {
+        mapProvider.draw?.insertVertexAtMidpoint?.(Number(activeIdRef.current))
+        announce('New point inserted', 'action')
+      } else {
+        announce(`${item.label} selected`, 'action')
+      }
+      viewportRef.current?.focus()
+    }
+    eventBus.on(EVENTS.MAP_SELECT_ITEM, handleConfirm)
+    return () => { eventBus.off(EVENTS.MAP_SELECT_ITEM, handleConfirm) }
+  }, [eventBus, mapProvider, pluginState.mode, activeIdRef, itemsRef, viewportRef, announce])
+}
+
+/**
+ * Orchestrates the accessible (Voice Control / screen-reader-discoverable) vertex/midpoint
+ * targets for draw's edit_vertex mode. Mirrors plugins/interact/src/hooks/useSpatialList.js's
+ * structure (item-sync + active-item concerns), but claims the registry's exclusive slot
+ * instead of contributing additively, declares focusable: false (no real Tab stop — see
+ * useVertexItemSync's own comment on why), and splits "preview" (any listbox move, non-
+ * destructive) from "confirm" (inserts at a midpoint, then always hands focus back to the
+ * viewport) rather than interact's own "preview, then explicit confirm for everything" split.
+ *
+ * @param {{ mapState: object, pluginState: object, services: object, mapProvider: object, spatialListRegistry: object, viewportRef: React.RefObject }} params
+ */
+export function useSpatialList ({ mapState, pluginState, services, mapProvider, spatialListRegistry, viewportRef }) {
+  const { mapSize } = mapState
+  const { eventBus, announce } = services
+  const itemsRef = useRef([])
+  const activeIdRef = useRef(null)
+  useVertexItemSync({ pluginState, mapProvider, mapSize, spatialListRegistry, itemsRef, eventBus })
+  useActiveVertexHandler({ eventBus, mapProvider, pluginState, activeIdRef })
+  useConfirmHandler({ eventBus, mapProvider, pluginState, activeIdRef, itemsRef, viewportRef, announce })
+}