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

package/plugins/interact/src/hooks/{useMapItemList.js → useSpatialList.js}

@@ -5,8 +5,10 @@ import { scaleFactor } from '../../../../src/config/appConfig.js'
 import { buildLayerConfigMap } from '../utils/featureQueries.js'
 import { getGeometryCenter } from '../utils/spatial.js'
 
-const getFeatureId = (feature, config) =>
-  config ? (feature.properties?.[config.idProperty] ?? feature.id) : null
+// 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')
@@ -40,7 +42,7 @@ const collectVisibleMarkers = (markers, mapProvider, mapSize) => {
     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 }
+      const item = { id: marker.id, label: marker.label, isMarker: true }
       if (marker.coords) {
         Object.assign(item, projectToScreen(mapProvider, mapSize, marker.coords))
       }
@@ -55,14 +57,28 @@ const toFeatureItem = (feature, layerConfigMap, seenIds, mapProvider, mapSize) =
   if (!config?.labelProperty) {
     return null
   }
-  const id = getFeatureId(feature, config)
-  const stringId = id == null ? null : String(id)
+  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
-  const item = { id: stringId, label }
+  // 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).
@@ -88,23 +104,24 @@ const collectVisibleFeatures = (mapProvider, layers, mapSize) => {
   return items
 }
 
-const findFeatureById = (features, layerConfigMap, targetId) => {
-  for (const feature of features) {
-    const config = layerConfigMap[feature.layer?.id]
-    const rawId = getFeatureId(feature, config)
-    if (rawId != null && String(rawId) === String(targetId)) {
-      return { feature, config, rawId }
-    }
-  }
-  return null
-}
-
 /**
- * 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),
- * then emits MAP_SET_FEATURES so the listbox stays in sync with what the user can see.
+ * 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, eventBus }) {
+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 = []
@@ -114,7 +131,8 @@ function useItemListSync ({ markers, mapSize, interactionModes, layers, mapProvi
       if (interactionModes?.includes('selectFeature') && layers.length > 0) {
         items.push(...collectVisibleFeatures(mapProvider, layers, mapSize))
       }
-      eventBus.emit(EVENTS.MAP_SET_FEATURES, { items, multiselectable: multiSelect })
+      itemsRef.current = items
+      spatialListRegistry.notifyItemsChanged('interact')
     }
     handleMoveEnd()
     eventBus.on(EVENTS.MAP_MOVE_END, handleMoveEnd)
@@ -123,16 +141,37 @@ function useItemListSync ({ markers, mapSize, interactionModes, layers, mapProvi
       eventBus.off(EVENTS.MAP_MOVE_END, handleMoveEnd)
       eventBus.off(EVENTS.MAP_DATA_CHANGE, handleMoveEnd)
     }
-  }, [markers, mapSize, interactionModes, layers, mapProvider, multiSelect, eventBus])
+  }, [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_FEATURE and resolves the active item to its full feature/marker data,
+ * 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 ({ markers, interactionModes, layers, mapProvider, eventBus, dispatch, listboxActiveItemRef }) {
+function useActiveItemHandler ({ itemsRef, eventBus, dispatch, listboxActiveItemRef }) {
   useEffect(() => {
     const handle = ({ id }) => {
       if (id === null) {
@@ -140,36 +179,31 @@ function useActiveItemHandler ({ markers, interactionModes, layers, mapProvider,
         dispatch({ type: 'SET_LISTBOX_ACTIVE', payload: null })
         return
       }
-      const hasMarkerMatch = markers.items.some(m => m.id === id)
-      if (hasMarkerMatch) {
+      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
       }
-      if (interactionModes?.includes('selectFeature') && layers.length > 0) {
-        const layerIds = layers.map(layer => layer.layerId)
-        const layerConfigMap = buildLayerConfigMap(layers)
-        const features = mapProvider.getVisibleFeatures(layerIds)
-        const match = findFeatureById(features, layerConfigMap, id)
-        if (match) {
-          const payload = {
-            featureId: match.rawId,
-            layerId: match.config.layerId,
-            idProperty: match.config.idProperty,
-            geometry: match.feature.geometry
-          }
-          listboxActiveItemRef.current = { id, isMarker: false, ...payload, properties: match.feature.properties }
-          dispatch({ type: 'SET_LISTBOX_ACTIVE', payload })
-        }
+      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_FEATURE, handle)
-    return () => { eventBus.off(EVENTS.MAP_SET_ACTIVE_FEATURE, handle) }
-  }, [markers, interactionModes, layers, mapProvider, eventBus, dispatch, listboxActiveItemRef])
+    eventBus.on(EVENTS.MAP_SET_ACTIVE_ITEM, handle)
+    return () => { eventBus.off(EVENTS.MAP_SET_ACTIVE_ITEM, handle) }
+  }, [itemsRef, eventBus, dispatch, listboxActiveItemRef])
 }
 
 /**
- * Handles MAP_SELECT_FEATURE (Enter/Space keypress) by promoting the currently active
+ * 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.
  */
@@ -190,8 +224,8 @@ function useSelectItemHandler ({ eventBus, dispatch, listboxActiveItemRef, multi
         })
       }
     }
-    eventBus.on(EVENTS.MAP_SELECT_FEATURE, handleConfirm)
-    return () => { eventBus.off(EVENTS.MAP_SELECT_FEATURE, handleConfirm) }
+    eventBus.on(EVENTS.MAP_SELECT_ITEM, handleConfirm)
+    return () => { eventBus.off(EVENTS.MAP_SELECT_ITEM, handleConfirm) }
   }, [eventBus, dispatch, listboxActiveItemRef, multiSelect])
 }
 
@@ -203,14 +237,15 @@ function useSelectItemHandler ({ eventBus, dispatch, listboxActiveItemRef, multi
  * - 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 }} params
+ * @param {{ mapState: object, pluginState: object, services: object, mapProvider: object, spatialListRegistry: object }} params
  */
-export function useMapItemList ({ mapState, pluginState, services, mapProvider }) {
+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)
-  useItemListSync({ markers, mapSize, interactionModes, layers, mapProvider, multiSelect, eventBus })
-  useActiveItemHandler({ markers, interactionModes, layers, mapProvider, eventBus, dispatch, listboxActiveItemRef })
+  const itemsRef = useRef([])
+  useItemListSync({ markers, mapSize, interactionModes, layers, mapProvider, multiSelect, spatialListRegistry, eventBus, itemsRef })
+  useActiveItemHandler({ itemsRef, eventBus, dispatch, listboxActiveItemRef })
   useSelectItemHandler({ eventBus, dispatch, listboxActiveItemRef, multiSelect })
 }