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

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

@@ -45,6 +45,38 @@ describe('attachEvents — keyboard', () => {
     expect(params.handleInteraction).toHaveBeenCalled()
   })
 
+  it('ignores Alt+Enter (a different shortcut, e.g. highlightLabelAtCenter) on viewport', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const keydown = new KeyboardEvent('keydown', { key: 'Enter', altKey: true })
+    Object.defineProperty(keydown, 'target', { value: document.body })
+    document.dispatchEvent(keydown)
+
+    const keyup = new KeyboardEvent('keyup', { key: 'Enter', altKey: true })
+    Object.defineProperty(keyup, 'target', { value: document.body })
+    document.dispatchEvent(keyup)
+
+    expect(params.handleInteraction).not.toHaveBeenCalled()
+  })
+
+  it('ignores other modified Enter combinations (Ctrl/Meta/Shift+Enter) on viewport', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    ;['ctrlKey', 'metaKey', 'shiftKey'].forEach((modifier) => {
+      const keydown = new KeyboardEvent('keydown', { key: 'Enter', [modifier]: true })
+      Object.defineProperty(keydown, 'target', { value: document.body })
+      document.dispatchEvent(keydown)
+
+      const keyup = new KeyboardEvent('keyup', { key: 'Enter', [modifier]: true })
+      Object.defineProperty(keyup, 'target', { value: document.body })
+      document.dispatchEvent(keyup)
+    })
+
+    expect(params.handleInteraction).not.toHaveBeenCalled()
+  })
+
   it('ignores Enter outside viewport or other keys', () => {
     const params = createParams()
     cleanup = attachEvents(params)

package/plugins/interact/src/hooks/useAttachEvents.js

@@ -42,4 +42,24 @@ export function useAttachEvents ({ pluginState, appState, mapState, buttonConfig
 
     return cleanupEvents
   }, [pluginState.enabled, buttonConfig, eventBus])
+
+  // crossHair is dispatch-managed state (mapReducer.js's UPDATE_CROSS_HAIR spreads into a NEW
+  // object every time — see updateCrossHair in mapActionsMap.js, which fires constantly, e.g.
+  // on every fixAtCenter()/hide()), so a `.activate` assignment made only once (inside the
+  // effect above, whose deps don't include it) would silently end up on a stale, discarded
+  // object the moment the next dispatch replaces it — exactly what CrossHair.jsx's onClick
+  // would then find nothing on. Keyed on mapState.crossHair itself, separate from the effect
+  // above, so this re-wires onto the current object every time it's replaced, not just once.
+  useEffect(() => {
+    if (!pluginState.enabled) {
+      return undefined
+    }
+    const activate = () => handleInteractionRef.current(mapState.crossHair.getDetail())
+    mapState.crossHair.activate = activate
+    return () => {
+      if (mapState.crossHair.activate === activate) {
+        mapState.crossHair.activate = null
+      }
+    }
+  }, [pluginState.enabled, mapState.crossHair])
 }

package/plugins/interact/src/hooks/useAttachEvents.test.js

@@ -18,7 +18,7 @@ beforeEach(() => {
   props = {
     pluginState: { enabled: true },
     appState: { interfaceType: 'mouse' },
-    mapState: { mapStyle: {} },
+    mapState: { mapStyle: {}, crossHair: { getDetail: jest.fn(() => ({ point: {}, coords: [] })) } },
     buttonConfig: {},
     eventBus: { emit: jest.fn() },
     handleInteraction: handleInteractionMock
@@ -63,4 +63,47 @@ describe('useAttachEvents', () => {
     renderHook(() => useAttachEvents({ ...props, pluginState: { enabled: false } }))
     expect(attachEvents).not.toHaveBeenCalled()
   })
+
+  describe('crossHair.activate — re-wired whenever mapState.crossHair is replaced', () => {
+    it('wires crossHair.activate on mount, calling handleInteraction with the live getDetail() result', () => {
+      renderHook(() => useAttachEvents(props))
+      expect(typeof props.mapState.crossHair.activate).toBe('function')
+
+      props.mapState.crossHair.activate()
+      expect(handleInteractionMock).toHaveBeenCalledWith({ point: {}, coords: [] })
+    })
+
+    it('re-wires onto a new crossHair object — mapReducer.js replaces it wholesale on every UPDATE_CROSS_HAIR dispatch', () => {
+      const { rerender } = renderHook((p) => useAttachEvents(p), { initialProps: props })
+      const staleCrossHair = props.mapState.crossHair
+
+      const nextProps = { ...props, mapState: { ...props.mapState, crossHair: { getDetail: jest.fn(() => ({ point: {}, coords: [] })) } } }
+      rerender(nextProps)
+
+      expect(staleCrossHair.activate).toBeNull() // guarded cleanup nulled the old one
+      expect(typeof nextProps.mapState.crossHair.activate).toBe('function')
+    })
+
+    it('nulls activate on unmount, guarded — leaves a newer owner alone', () => {
+      const { unmount } = renderHook(() => useAttachEvents(props))
+      const ownActivate = props.mapState.crossHair.activate
+      expect(typeof ownActivate).toBe('function')
+
+      unmount()
+      expect(props.mapState.crossHair.activate).toBeNull()
+    })
+
+    it('does not wire crossHair.activate when the plugin is not enabled', () => {
+      renderHook(() => useAttachEvents({ ...props, pluginState: { enabled: false } }))
+      expect(props.mapState.crossHair.activate).toBeUndefined()
+    })
+
+    it('leaves a newer owner\'s crossHair.activate alone on unmount — guarded, not unconditional', () => {
+      const { unmount } = renderHook(() => useAttachEvents(props))
+      const laterOwnersActivate = () => {}
+      props.mapState.crossHair.activate = laterOwnersActivate
+      unmount()
+      expect(props.mapState.crossHair.activate).toBe(laterOwnersActivate)
+    })
+  })
 })

package/plugins/interact/src/hooks/useCrossHairVisibility.js

@@ -8,7 +8,7 @@ export function useCrossHairVisibility ({ crossHair, enabled, selectMarkerOnly,
   const crossHairRef = useRef(crossHair)
   crossHairRef.current = crossHair
   const listboxFocusRef = useRef(false)
-  // True while focus is inside an element (marked `data-map-keyboard-scope`) that actually routes cursor keys to the map, e.g. the viewport or MoveControl's D-pad.
+  // True while focus is inside an element (marked `data-map-keyboard-scope`) that actually routes cursor keys to the map, e.g. the viewport or MapControl's D-pad.
   const mapKeyboardScopedRef = useRef(false)
   const interfaceTypeRef = useRef(appState.interfaceType)
   interfaceTypeRef.current = appState.interfaceType
@@ -17,16 +17,21 @@ export function useCrossHairVisibility ({ crossHair, enabled, selectMarkerOnly,
     const type = interfaceTypeRef.current
     const keyboardCanOperateMap = type === 'keyboard' && mapKeyboardScopedRef.current
     const touchCanOperateMap = type === 'touch' && !selectMarkerOnlyRef.current && !listboxFocusRef.current
-    if (enabledRef.current && (keyboardCanOperateMap || touchCanOperateMap)) {
+    // MapControls being open is an explicit "I can't drag/pinch this map" signal from the
+    // user — same audience this crosshair already exists for — so it counts as its own reason
+    // to show it, independent of the currently-inferred interface type (which, for a Voice
+    // Control user, will never register as anything but the default 'mouse').
+    const mapControlsOpen = appState.expandedButtons?.has('mapControls')
+    if (enabledRef.current && (keyboardCanOperateMap || touchCanOperateMap || mapControlsOpen)) {
       crossHairRef.current.fixAtCenter()
     } else {
       crossHairRef.current.hide()
     }
-  }, [])
+  }, [appState.expandedButtons])
 
   useEffect(() => {
     updateCrossHair()
-  }, [enabled, selectMarkerOnly, appState.interfaceType, updateCrossHair])
+  }, [enabled, selectMarkerOnly, appState.interfaceType, appState.expandedButtons, updateCrossHair])
 
   useEffect(() => {
     const container = appState.layoutRefs?.appContainerRef?.current

package/plugins/interact/src/hooks/useCrossHairVisibility.test.js

@@ -73,13 +73,13 @@ describe('useCrossHairVisibility', () => {
     expect(crossHair.hide).toHaveBeenCalledTimes(2)
   })
 
-  it('shows the crosshair for a control (e.g. MoveControl) that forwards arrow keys to the map without moving DOM focus onto the viewport', () => {
+  it('shows the crosshair for a control (e.g. MapControl) that forwards arrow keys to the map without moving DOM focus onto the viewport', () => {
     const container = appState.layoutRefs.appContainerRef.current
-    const moveControlButton = document.createElement('button')
-    const moveControlScope = document.createElement('div')
-    moveControlScope.setAttribute('data-map-keyboard-scope', '')
-    moveControlScope.appendChild(moveControlButton)
-    container.appendChild(moveControlScope)
+    const mapControlButton = document.createElement('button')
+    const mapControlScope = document.createElement('div')
+    mapControlScope.setAttribute('data-map-keyboard-scope', '')
+    mapControlScope.appendChild(mapControlButton)
+    container.appendChild(mapControlScope)
     appState.interfaceType = 'keyboard'
 
     renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
@@ -87,7 +87,7 @@ describe('useCrossHairVisibility', () => {
 
     // Focus lands on a direction button nested inside the scoped control, not
     // on the scope element itself — closest() must still pick it up.
-    act(() => moveControlButton.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    act(() => mapControlButton.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
     expect(crossHair.fixAtCenter).toHaveBeenCalled()
   })
 

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

@@ -0,0 +1,251 @@
+import { useEffect, useRef } from 'react'
+import { EVENTS } from '../../../../src/config/events.js'
+import { isStandaloneLabel } from '../../../../src/utils/symbolUtils.js'
+import { scaleFactor } from '../../../../src/config/appConfig.js'
+import { buildLayerConfigMap } from '../utils/featureQueries.js'
+import { getGeometryCenter } from '../utils/spatial.js'
+
+// Only called after toFeatureItem's own `config?.labelProperty` guard, so config is always
+// truthy here — no defensive null-config branch needed (that was only for findFeatureById's own
+// direct-lookup path, since removed along with the mapProvider.getVisibleFeatures re-query it did).
+const getFeatureId = (feature, config) => feature.properties?.[config.idProperty] ?? feature.id
+
+const isInViewport = (el) => {
+  const container = el.closest('.im-c-viewport__markers')
+  if (!container) {
+    return false
+  }
+  const containerRect = container.getBoundingClientRect()
+  const { left, right, top, bottom } = el.getBoundingClientRect()
+  return right > containerRect.left && left < containerRect.right &&
+    bottom > containerRect.top && top < containerRect.bottom
+}
+
+// Screen position for a [lng, lat] point, scaled for the current mapSize — same correction
+// useMarkersAPI.js's projectCoords applies (the map canvas itself is rendered at a different
+// resolution per mapSize; nothing to do with CSS transforms). mapProvider.mapToScreen is a
+// provider-agnostic method (implemented by every provider, including OpenLayers/Esri), so this
+// helper works unchanged once OpenLayers' getVisibleFeatures stops being a stub.
+const projectToScreen = (mapProvider, mapSize, coords) => {
+  const { x, y } = mapProvider.mapToScreen(coords)
+  return { x: x * scaleFactor[mapSize], y: y * scaleFactor[mapSize] }
+}
+
+// x/y are the marker's own screen position — computed fresh here rather than read off
+// marker.x/marker.y, which only reflect where the marker was when added/last updated, not the
+// current pan position. Used to position the corresponding accessible list item so touch/voice
+// AT overlays (e.g. macOS Voice Control's "Show Numbers") land on the actual feature instead of
+// stacking at the top-left of the viewport.
+const collectVisibleMarkers = (markers, mapProvider, mapSize) => {
+  const items = []
+  for (const marker of markers.items) {
+    if (!marker.label) { continue }
+    const el = markers.markerRefs?.get(marker.id)
+    if (!isStandaloneLabel(marker) && el && isInViewport(el)) {
+      const item = { id: marker.id, label: marker.label, isMarker: true }
+      if (marker.coords) {
+        Object.assign(item, projectToScreen(mapProvider, mapSize, marker.coords))
+      }
+      items.push(item)
+    }
+  }
+  return items
+}
+
+const toFeatureItem = (feature, layerConfigMap, seenIds, mapProvider, mapSize) => {
+  const config = layerConfigMap[feature.layer?.id]
+  if (!config?.labelProperty) {
+    return null
+  }
+  const rawId = getFeatureId(feature, config)
+  const stringId = rawId == null ? null : String(rawId)
+  if (stringId == null || seenIds.has(stringId)) {
+    return null
+  }
+  seenIds.add(stringId)
+  const label = feature.properties?.[config.labelProperty] ?? stringId
+  // Keeps the full resolved shape (raw id, layer config, geometry, properties) alongside the
+  // listbox-facing id/label — not just for building the item, but so useActiveItemHandler below
+  // can resolve "what is this" from this same object later, without re-querying the map engine.
+  // Only id/label/x/y ever reach MAP_SET_SPATIAL_LIST itself (see toPublicItem) — the rest stays
+  // internal, in itemsRef.
+  const item = {
+    id: stringId,
+    label,
+    isMarker: false,
+    featureId: rawId,
+    layerId: config.layerId,
+    idProperty: config.idProperty,
+    geometry: feature.geometry,
+    properties: feature.properties
+  }
+  // Bbox-centre of the feature's geometry (polygon or line) — see getGeometryCenter's own doc
+  // for why a bbox centre rather than a true centroid. null when the feature carries no usable
+  // geometry (e.g. OpenLayers' getVisibleFeatures, currently a stub returning [] — see PR notes).
+  const center = getGeometryCenter(feature)
+  if (center) {
+    Object.assign(item, projectToScreen(mapProvider, mapSize, center))
+  }
+  return item
+}
+
+const collectVisibleFeatures = (mapProvider, layers, mapSize) => {
+  const items = []
+  const seenIds = new Set()
+  const layerIds = layers.map(layer => layer.layerId)
+  const layerConfigMap = buildLayerConfigMap(layers)
+  const features = mapProvider.getVisibleFeatures(layerIds)
+  for (const feature of features) {
+    const item = toFeatureItem(feature, layerConfigMap, seenIds, mapProvider, mapSize)
+    if (item) {
+      items.push(item)
+    }
+  }
+  return items
+}
+
+/**
+ * Rebuilds the keyboard-navigable item list whenever the map moves or data changes. Collects
+ * visible markers (by DOM visibility) and visible features (by viewport query), keeps the
+ * result in itemsRef for useActiveItemHandler to resolve against later, and tells
+ * spatialListRegistry its items have changed so the shared listbox stays in sync with what's
+ * visible. SpatialList.jsx/useSpatialListItems.js only ever render id/label/x/y from each item — the
+ * rest (isMarker, geometry, properties, layer config) rides along unused there, but is what
+ * lets useActiveItemHandler resolve "what is this" from the same object later, with nothing to
+ * re-derive and no separate lean/rich shape to keep in sync.
+ *
+ * interact no longer emits MAP_SET_SPATIAL_LIST directly — spatialListRegistry owns that (see its
+ * own doc comment for why: a single "whoever emits last wins" event doesn't scale once more
+ * than one plugin, e.g. draw mid-edit, needs to contribute to or take over the same list).
+ */
+function useItemListSync ({ markers, mapSize, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef }) {
+  const multiSelectRef = useRef(multiSelect)
+  multiSelectRef.current = multiSelect // always-current for the provider's getItems below, same convention as itemsRef
+
+  useEffect(() => {
+    const handleMoveEnd = () => {
+      const items = []
+      if (interactionModes?.includes('selectMarker')) {
+        items.push(...collectVisibleMarkers(markers, mapProvider, mapSize))
+      }
+      if (interactionModes?.includes('selectFeature') && layers.length > 0) {
+        items.push(...collectVisibleFeatures(mapProvider, layers, mapSize))
+      }
+      itemsRef.current = items
+      spatialListRegistry.notifyItemsChanged('interact')
+    }
+    handleMoveEnd()
+    eventBus.on(EVENTS.MAP_MOVE_END, handleMoveEnd)
+    eventBus.on(EVENTS.MAP_DATA_CHANGE, handleMoveEnd)
+    return () => {
+      eventBus.off(EVENTS.MAP_MOVE_END, handleMoveEnd)
+      eventBus.off(EVENTS.MAP_DATA_CHANGE, handleMoveEnd)
+    }
+  }, [markers, mapSize, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef])
+
+  // Registers once, for the lifetime of the hook — getItems reads itemsRef/multiSelectRef
+  // fresh on every call, so there's never a need to re-register just because a prop changed;
+  // the effect above already pushes fresh data out via notifyItemsChanged. Declared after
+  // that effect so this registration's own immediate recompute (inside the registry) already
+  // sees whatever the effect above just computed on this same mount, rather than momentarily
+  // registering with empty items and correcting a moment later.
+  useEffect(() => {
+    spatialListRegistry.registerItemProvider('interact', {
+      getItems: () => ({ items: itemsRef.current, multiselectable: multiSelectRef.current, label: 'Map features' })
+    })
+    return () => { spatialListRegistry.unregisterItemProvider('interact') }
+  }, [spatialListRegistry, itemsRef])
+}
+
+/**
+ * Listens for MAP_SET_ACTIVE_ITEM and resolves the active item to its full feature/marker data,
+ * storing it in both a ref (for synchronous access) and plugin state (for highlight rendering).
+ * Shows the keyboard cursor ring without firing interact:selectionchange — committing the item
+ * to the real selection only happens when the user presses Enter/Space.
+ *
+ * Resolves purely by looking the id up in itemsRef (the same list useItemListSync just built) —
+ * deliberately not a fresh mapProvider.getVisibleFeatures() query. This fires on every roving-
+ * tabindex move (every arrow-key press while browsing the list), so re-querying the map engine
+ * here — as an earlier version of this hook did — meant every keystroke re-ran the same query
+ * useItemListSync had just run moments before, plus a second linear scan through the result, to
+ * re-derive data already computed once and discarded. A stale/out-of-range id (e.g. the map
+ * panned since the list was built) simply resolves to nothing, same as before.
+ */
+function useActiveItemHandler ({ itemsRef, eventBus, dispatch, listboxActiveItemRef }) {
+  useEffect(() => {
+    const handle = ({ id }) => {
+      if (id === null) {
+        listboxActiveItemRef.current = null
+        dispatch({ type: 'SET_LISTBOX_ACTIVE', payload: null })
+        return
+      }
+      const item = itemsRef.current.find(i => i.id === id)
+      if (!item) {
+        return
+      }
+      if (item.isMarker) {
+        listboxActiveItemRef.current = { id, isMarker: true }
+        dispatch({ type: 'SET_LISTBOX_ACTIVE', payload: null })
+        return
+      }
+      const payload = {
+        featureId: item.featureId,
+        layerId: item.layerId,
+        idProperty: item.idProperty,
+        geometry: item.geometry
+      }
+      listboxActiveItemRef.current = { id, isMarker: false, ...payload, properties: item.properties }
+      dispatch({ type: 'SET_LISTBOX_ACTIVE', payload })
+    }
+    eventBus.on(EVENTS.MAP_SET_ACTIVE_ITEM, handle)
+    return () => { eventBus.off(EVENTS.MAP_SET_ACTIVE_ITEM, handle) }
+  }, [itemsRef, eventBus, dispatch, listboxActiveItemRef])
+}
+
+/**
+ * Handles MAP_SELECT_ITEM (Enter/Space keypress) by promoting the currently active
+ * listbox item to a confirmed selection, dispatching TOGGLE_SELECTED_FEATURES or
+ * TOGGLE_SELECTED_MARKERS and triggering interact:selectionchange downstream.
+ */
+function useSelectItemHandler ({ eventBus, dispatch, listboxActiveItemRef, multiSelect }) {
+  useEffect(() => {
+    const handleConfirm = () => {
+      const item = listboxActiveItemRef.current
+      if (!item) {
+        return
+      }
+      if (item.isMarker) {
+        dispatch({ type: 'TOGGLE_SELECTED_MARKERS', payload: { markerId: item.id, multiSelect } })
+      } else {
+        const { featureId, layerId, idProperty, geometry, properties } = item
+        dispatch({
+          type: 'TOGGLE_SELECTED_FEATURES',
+          payload: { featureId, layerId, idProperty, geometry, properties, multiSelect, replaceAll: !multiSelect }
+        })
+      }
+    }
+    eventBus.on(EVENTS.MAP_SELECT_ITEM, handleConfirm)
+    return () => { eventBus.off(EVENTS.MAP_SELECT_ITEM, handleConfirm) }
+  }, [eventBus, dispatch, listboxActiveItemRef, multiSelect])
+}
+
+/**
+ * Orchestrates the keyboard-accessible listbox for the interact plugin.
+ *
+ * Composes three concerns:
+ * - Item list sync — keeps the listbox populated with currently visible markers and features
+ * - Active item resolution — translates a listbox cursor position into full feature/marker data
+ * - Selection confirmation — commits the active item to the selection on Enter/Space
+ *
+ * @param {{ mapState: object, pluginState: object, services: object, mapProvider: object, spatialListRegistry: object }} params
+ */
+export function useSpatialList ({ mapState, pluginState, services, mapProvider, spatialListRegistry }) {
+  const { markers, mapSize } = mapState
+  const { dispatch, interactionModes, layers, multiSelect } = pluginState
+  const { eventBus } = services
+  const listboxActiveItemRef = useRef(null)
+  const itemsRef = useRef([])
+  useItemListSync({ markers, mapSize, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef })
+  useActiveItemHandler({ itemsRef, eventBus, dispatch, listboxActiveItemRef })
+  useSelectItemHandler({ eventBus, dispatch, listboxActiveItemRef, multiSelect })
+}