@defra/interactive-map 0.0.22-alpha → 0.0.23-alpha

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

@@ -6,43 +6,51 @@ jest.mock('../utils/buildStylesMap.js', () => ({
   buildStylesMap: jest.fn(() => ({ layer1: { stroke: 'red', fill: 'blue' } }))
 }))
 
-describe('useHighlightSync', () => {
-  let mockDeps
-  let capturedEventHandler
-
-  const render = (overrides = {}) =>
-    renderHook(() => useHighlightSync({ ...mockDeps, ...overrides }))
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-    capturedEventHandler = null
-
-    mockDeps = {
-      mapProvider: {
-        updateHighlightedFeatures: jest.fn(() => ({ sw: [0, 0], ne: [1, 1] }))
-      },
-      mapStyle: { id: 'default-style' },
-      pluginState: {
-        layers: [{ layerId: 'layer1' }]
-      },
-      selectedFeatures: [],
-      dispatch: jest.fn(),
-      events: { MAP_DATA_CHANGE: 'map:datachange' },
-      eventBus: {
-        on: jest.fn((event, handler) => {
-          if (event === 'map:datachange') {
-            capturedEventHandler = handler
-          }
-        }),
-        off: jest.fn()
-      }
+const STYLE_CHANGE = 'map:stylechange'
+const DATA_CHANGE = 'map:datachange'
+
+let mockDeps
+let capturedStyleChangeHandler
+let capturedDataChangeHandler
+
+const render = (overrides = {}) =>
+  renderHook(() => useHighlightSync({ ...mockDeps, ...overrides }))
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  capturedStyleChangeHandler = null
+  capturedDataChangeHandler = null
+
+  mockDeps = {
+    mapProvider: {
+      updateHighlightedFeatures: jest.fn(() => ({ sw: [0, 0], ne: [1, 1] }))
+    },
+    mapStyle: { id: 'default-style' },
+    pluginState: {
+      layers: [{ layerId: 'layer1' }]
+    },
+    selectedFeatures: [],
+    dispatch: jest.fn(),
+    events: { MAP_STYLE_CHANGE: STYLE_CHANGE, MAP_DATA_CHANGE: DATA_CHANGE },
+    eventBus: {
+      on: jest.fn((event, handler) => {
+        if (event === STYLE_CHANGE) {
+          capturedStyleChangeHandler = handler
+        }
+      }),
+      once: jest.fn((event, handler) => {
+        if (event === DATA_CHANGE) {
+          capturedDataChangeHandler = handler
+        }
+      }),
+      off: jest.fn()
     }
-  })
+  }
+})
 
-  /* ------------------------------------------------------------------ */
-  /* Highlighting                                                       */
-  /* ------------------------------------------------------------------ */
+// ─── useHighlightSync — highlighting ─────────────────────────────────────────
 
+describe('useHighlightSync — highlighting', () => {
   it('updates map highlights and dispatches bounds', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
 
@@ -50,9 +58,9 @@ describe('useHighlightSync', () => {
 
     expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
       mockDeps.selectedFeatures,
+      [],
       expect.any(Object)
     )
-
     expect(mockDeps.dispatch).toHaveBeenCalledWith({
       type: 'UPDATE_SELECTED_BOUNDS',
       payload: { sw: [0, 0], ne: [1, 1] }
@@ -70,11 +78,11 @@ describe('useHighlightSync', () => {
       payload: null
     })
   })
+})
 
-  /* ------------------------------------------------------------------ */
-  /* Styles memoization                                                 */
-  /* ------------------------------------------------------------------ */
+// ─── useHighlightSync — styles memoization ───────────────────────────────────
 
+describe('useHighlightSync — styles memoization', () => {
   it('rebuilds styles when mapStyle changes', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1' }]
 
@@ -84,46 +92,37 @@ describe('useHighlightSync', () => {
     )
 
     buildStylesMap.mockClear()
-
     rerender({ mapStyle: { id: 'satellite' } })
 
-    expect(buildStylesMap).toHaveBeenCalledWith(
-      expect.anything(),
-      { id: 'satellite' }
-    )
+    expect(buildStylesMap).toHaveBeenCalledWith(expect.anything(), { id: 'satellite' })
   })
 
   it('rebuilds styles when layers change', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1' }]
 
     const { rerender } = renderHook(
-      ({ layers }) =>
-        useHighlightSync({
-          ...mockDeps,
-          pluginState: { layers }
-        }),
+      ({ layers }) => useHighlightSync({ ...mockDeps, pluginState: { layers } }),
       { initialProps: { layers: [{ layerId: 'layer1' }] } }
     )
 
     buildStylesMap.mockClear()
-
     rerender({ layers: [{ layerId: 'layer1' }, { layerId: 'layer2' }] })
 
     expect(buildStylesMap).toHaveBeenCalled()
   })
+})
 
-  /* ------------------------------------------------------------------ */
-  /* Map data change events                                             */
-  /* ------------------------------------------------------------------ */
+// ─── useHighlightSync — style-change event ───────────────────────────────────
 
-  it('refreshes highlights on MAP_DATA_CHANGE', () => {
+describe('useHighlightSync — style-change event', () => {
+  it('refreshes highlights after MAP_STYLE_CHANGE then MAP_DATA_CHANGE', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
 
     render()
-
     mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
 
-    act(() => capturedEventHandler())
+    act(() => capturedStyleChangeHandler())
+    act(() => capturedDataChangeHandler())
 
     expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalled()
   })
@@ -132,19 +131,15 @@ describe('useHighlightSync', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
 
     const { unmount } = render()
-
     unmount()
 
-    expect(mockDeps.eventBus.off).toHaveBeenCalledWith(
-      'map:datachange',
-      expect.any(Function)
-    )
+    expect(mockDeps.eventBus.off).toHaveBeenCalledWith(STYLE_CHANGE, expect.any(Function))
   })
+})
 
-  /* ------------------------------------------------------------------ */
-  /* Guards                                                            */
-  /* ------------------------------------------------------------------ */
+// ─── useHighlightSync — guards ───────────────────────────────────────────────
 
+describe('useHighlightSync — guards', () => {
   it('does nothing when mapProvider is null', () => {
     mockDeps.mapProvider = null
     mockDeps.selectedFeatures = [{ featureId: 'F1' }]
@@ -154,14 +149,6 @@ describe('useHighlightSync', () => {
     expect(mockDeps.dispatch).not.toHaveBeenCalled()
   })
 
-  it('does nothing when selectedFeatures is null', () => {
-    mockDeps.selectedFeatures = null
-
-    render()
-
-    expect(mockDeps.mapProvider.updateHighlightedFeatures).not.toHaveBeenCalled()
-  })
-
   it('does nothing when mapStyle is null', () => {
     mockDeps.mapStyle = null
     mockDeps.selectedFeatures = [{ featureId: 'F1' }]
@@ -171,41 +158,101 @@ describe('useHighlightSync', () => {
     expect(mockDeps.mapProvider.updateHighlightedFeatures).not.toHaveBeenCalled()
     expect(buildStylesMap).not.toHaveBeenCalled()
   })
+})
 
-  /* ------------------------------------------------------------------ */
-  /* Selection updates                                                  */
-  /* ------------------------------------------------------------------ */
+// ─── useHighlightSync — selection updates ────────────────────────────────────
 
+describe('useHighlightSync — selection updates', () => {
   it('updates highlights when selection changes', () => {
     const { rerender } = renderHook(
-      ({ selectedFeatures }) =>
-        useHighlightSync({ ...mockDeps, selectedFeatures }),
+      ({ selectedFeatures }) => useHighlightSync({ ...mockDeps, selectedFeatures }),
       { initialProps: { selectedFeatures: [{ featureId: 'F1' }] } }
     )
 
     mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
-
     rerender({ selectedFeatures: [{ featureId: 'F1' }, { featureId: 'F2' }] })
 
     expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
       [{ featureId: 'F1' }, { featureId: 'F2' }],
+      [],
       expect.anything()
     )
   })
 
   it('clears highlights when selection becomes empty', () => {
     const { rerender } = renderHook(
-      ({ selectedFeatures }) =>
-        useHighlightSync({ ...mockDeps, selectedFeatures }),
+      ({ selectedFeatures }) => useHighlightSync({ ...mockDeps, selectedFeatures }),
       { initialProps: { selectedFeatures: [{ featureId: 'F1' }] } }
     )
 
     mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
-
     rerender({ selectedFeatures: [] })
 
     expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
       [],
+      [],
+      expect.anything()
+    )
+  })
+})
+
+// ─── useHighlightSync — listboxActiveItem ────────────────────────────────────
+
+describe('useHighlightSync — listboxActiveItem', () => {
+  it('passes listboxActiveItem as activeFeatures (second arg)', () => {
+    mockDeps.pluginState = {
+      layers: [{ layerId: 'layer1' }],
+      listboxActiveItem: { featureId: 'A1', layerId: 'layer1', idProperty: 'id', geometry: { type: 'Point' } }
+    }
+    mockDeps.selectedFeatures = []
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      [],
+      [{ featureId: 'A1', layerId: 'layer1', idProperty: 'id', geometry: { type: 'Point' } }],
+      expect.anything()
+    )
+  })
+
+  it('passes selectedFeatures and listboxActiveItem as separate arguments', () => {
+    mockDeps.pluginState = {
+      layers: [{ layerId: 'layer1' }],
+      listboxActiveItem: { featureId: 'A1', layerId: 'layer1', idProperty: 'id', geometry: { type: 'Point' } }
+    }
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      [{ featureId: 'F1', layerId: 'layer1' }],
+      [{ featureId: 'A1', layerId: 'layer1', idProperty: 'id', geometry: { type: 'Point' } }],
+      expect.anything()
+    )
+  })
+
+  it('re-highlights when listboxActiveItem changes', () => {
+    const { rerender } = renderHook(
+      ({ pluginState }) => useHighlightSync({ ...mockDeps, pluginState }),
+      {
+        initialProps: {
+          pluginState: { layers: [{ layerId: 'layer1' }], listboxActiveItem: null }
+        }
+      }
+    )
+
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    rerender({
+      pluginState: {
+        layers: [{ layerId: 'layer1' }],
+        listboxActiveItem: { featureId: 'A1', layerId: 'layer1', idProperty: 'id', geometry: { type: 'Point' } }
+      }
+    })
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      [],
+      [{ featureId: 'A1', layerId: 'layer1', idProperty: 'id', geometry: { type: 'Point' } }],
       expect.anything()
     )
   })

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

@@ -1,28 +1,30 @@
 import { useCallback, useEffect, useRef } from 'react'
-import { isContiguousWithAny, canSplitFeatures, areAllContiguous } from '../utils/spatial.js'
+import { areAllContiguous } from '../utils/spatial.js'
 import { getFeaturesAtPoint, findMatchingFeature, buildLayerConfigMap } from '../utils/featureQueries.js'
 import { scaleFactor } from '../../../../src/config/appConfig.js'
+import { isStandaloneLabel } from '../../../../src/utils/symbolUtils.js'
 
 /**
  * Returns the id of the first DOM marker whose visual bounds contain the given point.
  *
  * MAP_CLICK point is container-relative; getBoundingClientRect is viewport-relative.
- * We convert by subtracting the parent element's top-left (markers share a parent with
- * the map container, so parentElement.getBoundingClientRect() gives the offset).
+ * We convert by subtracting the markers container's top-left (.im-c-viewport__markers has
+ * inset:0 over the same area as the map canvas, giving the correct offset).
  *
  * @param {Object} markers - markers object from mapState (has .items and .markerRefs)
  * @param {{ x: number, y: number }} point - container-relative pixel coordinates
  * @param {number} scale - scaleFactor for the current mapSize (e.g. 1.5 for medium)
  * @returns {string|null}
  */
+
 const findMarkerAtPoint = (markers, point, scale) => {
   for (const marker of markers.items) {
     const el = markers.markerRefs?.get(marker.id)
-    if (!el) {
+    if (!el || isStandaloneLabel(marker)) {
       continue
     }
-    const parent = el.parentElement
-    const parentRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0 }
+    const container = el.closest('.im-c-viewport__markers') || el.parentElement
+    const parentRect = container ? container.getBoundingClientRect() : { left: 0, top: 0 }
     const { left, top, right, bottom } = el.getBoundingClientRect()
     const scaledX = point.x * scale
     const scaledY = point.y * scale
@@ -57,8 +59,7 @@ const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectedMarkers,
       selectedFeatures,
       selectedMarkers,
       selectionBounds,
-      canMerge: areAllContiguous(selectedFeatures),
-      canSplit: canSplitFeatures(selectedFeatures)
+      contiguous: areAllContiguous(selectedFeatures)
     })
 
     lastEmittedSelectionChange.current = { features: selectedFeatures, markers: selectedMarkers }
@@ -82,13 +83,12 @@ const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectedMarkers,
  */
 export const useInteractionHandlers = ({ mapState, pluginState, services, mapProvider }) => {
   const { markers, mapSize } = mapState
-  const { dispatch, layers, interactionModes, multiSelect, contiguous, marker: markerOptions, tolerance, selectedFeatures, selectedMarkers, selectionBounds, deselectOnClickOutside } = pluginState
+  const { dispatch, layers, interactionModes, multiSelect, marker: markerOptions, tolerance, selectedFeatures, selectedMarkers, selectionBounds, deselectOnClickOutside } = pluginState
   const { eventBus } = services
   const layerConfigMap = buildLayerConfigMap(layers)
   const scale = scaleFactor[mapSize] ?? 1
   const processFeatureMatch = useCallback(({ feature, config }) => {
     markers.remove('location')
-    const isNewContiguous = contiguous && isContiguousWithAny(feature, selectedFeatures)
     const featureId = feature.properties?.[config.idProperty] ?? feature.id
     if (featureId == null) {
       return
@@ -101,11 +101,10 @@ export const useInteractionHandlers = ({ mapState, pluginState, services, mapPro
         layerId: config.layerId,
         idProperty: config.idProperty,
         properties: feature.properties,
-        geometry: feature.geometry,
-        replaceAll: contiguous && !isNewContiguous
+        geometry: feature.geometry
       }
     })
-  }, [markers, contiguous, selectedFeatures, dispatch, multiSelect])
+  }, [markers, dispatch, multiSelect])
 
   const processFallback = useCallback(({ coords }) => {
     const canPlace = interactionModes.includes('placeMarker')
@@ -120,6 +119,11 @@ export const useInteractionHandlers = ({ mapState, pluginState, services, mapPro
   }, [interactionModes, dispatch, markers, markerOptions, eventBus, deselectOnClickOutside])
 
   const handleInteraction = useCallback(({ point, coords }) => {
+    const debugFeatures = pluginState?.debug ? getFeaturesAtPoint(mapProvider, point, { radius: tolerance }) : null
+    if (debugFeatures) {
+      console.log(`--- Features at ${coords} ---`, debugFeatures) // NOSONAR
+    }
+
     if (interactionModes.includes('selectMarker')) {
       const markerHit = findMarkerAtPoint(markers, point, scale)
       if (markerHit) {
@@ -129,10 +133,7 @@ export const useInteractionHandlers = ({ mapState, pluginState, services, mapPro
     }
 
     if (interactionModes.includes('selectFeature') && layers.length > 0) {
-      const allFeatures = getFeaturesAtPoint(mapProvider, point, { radius: tolerance })
-      if (pluginState?.debug) {
-        console.log(`--- Features at ${coords} ---`, allFeatures)
-      }
+      const allFeatures = debugFeatures ?? getFeaturesAtPoint(mapProvider, point, { radius: tolerance })
       const match = findMatchingFeature(allFeatures, layerConfigMap)
       if (match) {
         processFeatureMatch(match)

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

@@ -1,15 +1,11 @@
 import { renderHook, act } from '@testing-library/react'
 import { useInteractionHandlers } from './useInteractionHandlers.js'
 import * as featureQueries from '../utils/featureQueries.js'
-import { isContiguousWithAny } from '../utils/spatial.js'
-
 /* ------------------------------------------------------------------ */
 /* Mocks                                                              */
 /* ------------------------------------------------------------------ */
 
 jest.mock('../utils/spatial.js', () => ({
-  isContiguousWithAny: jest.fn(),
-  canSplitFeatures: jest.fn(() => false),
   areAllContiguous: jest.fn(() => false)
 }))
 jest.mock('../utils/featureQueries.js', () => ({
@@ -32,6 +28,7 @@ const click = result =>
 
 const makeMarkerEl = (rect) => ({
   getBoundingClientRect: () => rect,
+  closest: () => ({ getBoundingClientRect: () => ({ left: 0, top: 0 }) }),
   parentElement: {
     getBoundingClientRect: () => ({ left: 0, top: 0 })
   }
@@ -47,7 +44,6 @@ const setup = (pluginOverrides = {}, markerItems = [], markerRefs = new Map()) =
       layers: [{ layerId: 'parcels', idProperty: 'parcelId' }],
       interactionModes: ['selectMarker', 'selectFeature'],
       multiSelect: false,
-      contiguous: false,
       marker: { symbol: 'pin', backgroundColor: 'red' },
       selectedFeatures: [],
       selectedMarkers: [],
@@ -127,10 +123,11 @@ describe('DOM marker hit detection', () => {
     )
   })
 
-  it('uses zero offset when marker element has no parentElement', () => {
-    // parentElement is null — fallback parentRect { left: 0, top: 0 } should be used
+  it('uses zero offset when marker element has no features container or parentElement', () => {
+    // closest and parentElement both null — fallback parentRect { left: 0, top: 0 } should be used
     const markerEl = {
       getBoundingClientRect: () => ({ left: 5, top: 15, right: 15, bottom: 25 }),
+      closest: () => null,
       parentElement: null
     }
     const markerRefs = new Map([['marker-1', markerEl]])
@@ -255,58 +252,6 @@ it('passes multiSelect flag through to dispatch', () => {
   )
 })
 
-/* ------------------------------------------------------------------ */
-/* Contiguous selection (FULL COVERAGE)                               */
-/* ------------------------------------------------------------------ */
-
-describe('contiguous selection', () => {
-  it('does NOT replace selection when feature is contiguous', () => {
-    isContiguousWithAny.mockReturnValue(true) // contiguous
-
-    const { result, deps } = setup({
-      contiguous: true,
-      selectedFeatures: [{ geometry: { type: 'Polygon' } }]
-    })
-
-    click(result)
-
-    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
-      expect.objectContaining({
-        payload: expect.objectContaining({
-          replaceAll: false
-        })
-      })
-    )
-  })
-
-  it('replaces selection when feature is NOT contiguous', () => {
-    isContiguousWithAny.mockReturnValue(false) // disjoint
-
-    const { result, deps } = setup({
-      contiguous: true,
-      selectedFeatures: [{ geometry: { type: 'Polygon' } }]
-    })
-
-    click(result)
-
-    expect(deps.pluginState.dispatch).toHaveBeenCalledWith(
-      expect.objectContaining({
-        payload: expect.objectContaining({
-          replaceAll: true
-        })
-      })
-    )
-  })
-
-  it('does not compute contiguity when contiguous is false', () => {
-    const { result } = setup({ contiguous: false })
-
-    click(result)
-
-    expect(isContiguousWithAny).not.toHaveBeenCalled()
-  })
-})
-
 /* ------------------------------------------------------------------ */
 /* deselectOnClickOutside                                             */
 /* ------------------------------------------------------------------ */
@@ -382,6 +327,23 @@ it('does not check markers when selectMarker is not in interactionModes', () =>
 /* Selection change event                                             */
 /* ------------------------------------------------------------------ */
 
+it('does not emit selectionchange when features are selected but bounds not yet calculated', () => {
+  const deps = {
+    mapState: { markers: { add: jest.fn(), remove: jest.fn(), items: [], markerRefs: new Map() } },
+    pluginState: {
+      selectedFeatures: [{ featureId: 'F1' }],
+      selectedMarkers: [],
+      selectionBounds: null
+    },
+    services: { eventBus: { emit: jest.fn() } },
+    mapProvider: {}
+  }
+
+  renderHook(() => useInteractionHandlers(deps))
+
+  expect(deps.services.eventBus.emit).not.toHaveBeenCalled()
+})
+
 it('emits selectionchange once when bounds exist', () => {
   const deps = {
     mapState: { markers: { add: jest.fn(), remove: jest.fn(), items: [], markerRefs: new Map() } },
@@ -402,8 +364,7 @@ it('emits selectionchange once when bounds exist', () => {
       selectedFeatures: deps.pluginState.selectedFeatures,
       selectedMarkers: [],
       selectionBounds: deps.pluginState.selectionBounds,
-      canMerge: false,
-      canSplit: false
+      contiguous: false
     })
   )
 })