@defra/interactive-map 0.0.17-alpha → 0.0.18-alpha

package/plugins/interact/src/InteractInit.jsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react'
+import { EVENTS } from '../../../src/config/events.js'
 import { useInteractionHandlers } from './hooks/useInteractionHandlers.js'
 import { useHighlightSync } from './hooks/useHighlightSync.js'
+import { useHoverCursor } from './hooks/useHoverCursor.js'
 import { attachEvents } from './events.js'
 
 export const InteractInit = ({
@@ -12,8 +14,8 @@ export const InteractInit = ({
   pluginState
 }) => {
   const { interfaceType } = appState
-  const { dispatch, enabled, selectedFeatures, selectionBounds } = pluginState
-  const { events, eventBus, closeApp } = services
+  const { dispatch, enabled, selectedFeatures, selectionBounds, interactionModes, layers } = pluginState
+  const { eventBus, closeApp } = services
   const { crossHair, mapStyle } = mapState
 
   const isTouchOrKeyboard = ['touch', 'keyboard'].includes(interfaceType)
@@ -56,10 +58,17 @@ export const InteractInit = ({
     selectedFeatures,
     selectionBounds,
     dispatch,
-    events,
+    events: EVENTS,
     eventBus
   })
 
+  // Notify other components (e.g. Markers) whether interact is active
+  useEffect(() => {
+    eventBus.emit('interact:active', { active: enabled, interactionModes })
+  }, [enabled, interactionModes])
+
+  useHoverCursor(mapProvider, enabled, interactionModes, layers)
+
   // Toggle target marker visibility
   useEffect(() => {
     if (enabled && isTouchOrKeyboard) {
@@ -79,7 +88,7 @@ export const InteractInit = ({
       mapState,
       getPluginState: () => pluginStateRef.current,
       buttonConfig,
-      events,
+      events: EVENTS,
       eventBus,
       handleInteraction: (e) => handleInteractionRef.current(e),
       clickReadyRef,
@@ -87,7 +96,7 @@ export const InteractInit = ({
     })
 
     return cleanupEvents
-  }, [pluginState.enabled, buttonConfig, events, eventBus, closeApp])
+  }, [pluginState.enabled, buttonConfig, eventBus, closeApp])
 
   return null
 }

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

@@ -1,11 +1,14 @@
 import { act, render } from '@testing-library/react'
+import { EVENTS } from '../../../src/config/events.js'
 import { InteractInit } from './InteractInit.jsx'
 import { useInteractionHandlers } from './hooks/useInteractionHandlers.js'
 import { useHighlightSync } from './hooks/useHighlightSync.js'
+import { useHoverCursor } from './hooks/useHoverCursor.js'
 import { attachEvents } from './events.js'
 
 jest.mock('./hooks/useInteractionHandlers.js')
 jest.mock('./hooks/useHighlightSync.js')
+jest.mock('./hooks/useHoverCursor.js')
 jest.mock('./events.js')
 
 describe('InteractInit', () => {
@@ -19,15 +22,24 @@ describe('InteractInit', () => {
 
     useInteractionHandlers.mockReturnValue({ handleInteraction: handleInteractionMock })
     useHighlightSync.mockReturnValue(undefined)
+    useHoverCursor.mockReturnValue(undefined)
     attachEvents.mockReturnValue(cleanupMock)
 
     props = {
-      appState: { interfaceType: 'mouse' },
+      appState: { interfaceType: 'mouse', layoutRefs: { viewportRef: { current: null } } },
       mapState: { crossHair: { fixAtCenter: jest.fn(), hide: jest.fn() }, mapStyle: {} },
-      services: { events: {}, eventBus: {}, closeApp: jest.fn() },
+      services: { eventBus: { emit: jest.fn() }, closeApp: jest.fn() },
       buttonConfig: {},
-      mapProvider: {},
-      pluginState: { dispatch: jest.fn(), enabled: true, selectedFeatures: [], selectionBounds: {} }
+      mapProvider: { setHoverCursor: jest.fn() },
+      pluginState: {
+        dispatch: jest.fn(),
+        enabled: true,
+        selectedFeatures: [],
+        selectedMarkers: [],
+        selectionBounds: {},
+        interactionModes: ['selectFeature'],
+        layers: []
+      }
     }
   })
 
@@ -50,7 +62,7 @@ describe('InteractInit', () => {
       pluginState: props.pluginState,
       selectedFeatures: props.pluginState.selectedFeatures,
       dispatch: props.pluginState.dispatch,
-      events: props.services.events,
+      events: EVENTS,
       eventBus: props.services.eventBus
     }))
   })
@@ -75,7 +87,7 @@ describe('InteractInit', () => {
       handleInteraction: expect.any(Function),
       mapState: props.mapState,
       buttonConfig: props.buttonConfig,
-      events: props.services.events,
+      events: EVENTS,
       eventBus: props.services.eventBus,
       closeApp: props.services.closeApp
     }))
@@ -92,6 +104,14 @@ describe('InteractInit', () => {
     expect(cleanupMock).toHaveBeenCalled()
   })
 
+  it('emits interact:active with active state and interactionModes on enable', () => {
+    render(<InteractInit {...props} />)
+    expect(props.services.eventBus.emit).toHaveBeenCalledWith('interact:active', {
+      active: true,
+      interactionModes: props.pluginState.interactionModes
+    })
+  })
+
   it('enables click handling after a macrotask', () => {
     jest.useFakeTimers()
     render(<InteractInit {...props} />)

package/plugins/interact/src/api/enable.test.js

@@ -9,8 +9,8 @@ describe('enable', () => {
   })
 
   it('dispatches ENABLE with merged payload correctly', () => {
-    const pluginConfig = { markerColor: 'blue' }
-    const options = { interactionMode: 'select', markerColor: 'green', dataLayers: [{ layerId: 'test' }] }
+    const pluginConfig = { marker: { symbol: 'pin', backgroundColor: 'blue' } }
+    const options = { interactionModes: ['selectFeature'], marker: { symbol: 'circle', backgroundColor: 'green' }, layers: [{ layerId: 'test' }] }
 
     enable({ pluginState: { dispatch }, pluginConfig }, options)
 
@@ -18,16 +18,16 @@ describe('enable', () => {
     expect(dispatch).toHaveBeenCalledWith({
       type: 'ENABLE',
       payload: expect.objectContaining({
-        interactionMode: 'select', // options override DEFAULTS
-        multiSelect: DEFAULTS.multiSelect, // default preserved
-        markerColor: 'green', // options override pluginConfig
-        dataLayers: [{ layerId: 'test' }] // options passed
+        interactionModes: ['selectFeature'],
+        multiSelect: DEFAULTS.multiSelect,
+        marker: { symbol: 'circle', backgroundColor: 'green' },
+        layers: [{ layerId: 'test' }]
       })
     })
   })
 
   it('handles empty or undefined options', () => {
-    const pluginConfig = { markerColor: 'blue' }
+    const pluginConfig = { marker: { symbol: 'pin', backgroundColor: 'blue' } }
 
     enable({ pluginState: { dispatch }, pluginConfig }, {})
     expect(dispatch).toHaveBeenCalledTimes(1)

package/plugins/interact/src/defaults.js

@@ -1,11 +1,9 @@
 export const DEFAULTS = {
-  tolerance: 10, // Used for cross hair and click events
-  interactionMode: 'marker',
+  tolerance: 10,
+  interactionModes: ['selectMarker'],
   multiSelect: false,
   contiguous: false,
   deselectOnClickOutside: false,
-  markerColor: 'rgba(212,53,28,1)',
-  selectedStroke: 'rgba(212,53,28,1)',
-  selectedFill: 'rgba(255, 0, 0, 0.1)',
-  selectedStrokeWidth: 2
+  marker: {},
+  selectedStrokeWidth: 3
 }

package/plugins/interact/src/events.js

@@ -1,3 +1,10 @@
+const buildDonePayload = (coords, selectedFeatures, selectedMarkers, selectionBounds) => ({
+  ...(coords && { coords }),
+  ...(!coords && selectedFeatures && { selectedFeatures }),
+  ...(!coords && selectedMarkers?.length && { selectedMarkers }),
+  ...(!coords && selectionBounds && { selectionBounds })
+})
+
 // Helper for feature toggling logic
 const createFeatureHandler = (mapState, getPluginState) => (args, addToExisting) => {
   const pluginState = getPluginState()
@@ -48,17 +55,13 @@ export function attachEvents ({
     const pluginState = getPluginState()
     const marker = mapState.markers.getMarker('location')
     const { coords } = marker || {}
-    const { selectionBounds, selectedFeatures } = pluginState
+    const { selectionBounds, selectedFeatures, selectedMarkers } = pluginState
 
     if (getAppState().disabledButtons.has('selectDone')) {
       return
     }
 
-    eventBus.emit('interact:done', {
-      ...(coords && { coords }),
-      ...(!coords && selectedFeatures && { selectedFeatures }),
-      ...(!coords && selectionBounds && { selectionBounds })
-    })
+    eventBus.emit('interact:done', buildDonePayload(coords, selectedFeatures, selectedMarkers, selectionBounds))
 
     if (pluginState.closeOnAction ?? true) {
       closeApp()

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

@@ -172,14 +172,11 @@ describe('attachEvents', () => {
     Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
   })
 
-  it('selectDone handles emission when no marker/coords exist', () => {
+  it('selectDone emits selectedFeatures and selectionBounds when no marker/coords', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    // Ensure marker returns null (no coords)
     params.mapState.markers.getMarker.mockReturnValue(null)
-
-    // Set up features and bounds
     params.pluginState.selectedFeatures = [{ id: 'f1' }]
     params.pluginState.selectionBounds = { sw: [0, 0], ne: [1, 1] }
 
@@ -191,6 +188,33 @@ describe('attachEvents', () => {
     })
   })
 
+  it('selectDone includes selectedMarkers in payload when present', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    params.mapState.markers.getMarker.mockReturnValue(null)
+    params.pluginState.selectedMarkers = ['m1', 'm2']
+
+    params.buttonConfig.selectDone.onClick()
+
+    expect(params.eventBus.emit).toHaveBeenCalledWith('interact:done',
+      expect.objectContaining({ selectedMarkers: ['m1', 'm2'] })
+    )
+  })
+
+  it('selectDone omits selectedMarkers from payload when empty', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    params.mapState.markers.getMarker.mockReturnValue(null)
+    params.pluginState.selectedMarkers = []
+
+    params.buttonConfig.selectDone.onClick()
+
+    const payload = params.eventBus.emit.mock.calls.find(c => c[0] === 'interact:done')[1]
+    expect(payload).not.toHaveProperty('selectedMarkers')
+  })
+
   it('respects default closeOnAction when value is undefined (fallback to true)', () => {
     const params = createParams()
     // Explicitly set to undefined to trigger the ?? fallback

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

@@ -10,15 +10,15 @@ export const useHighlightSync = ({
   events,
   eventBus
 }) => {
-  const { dataLayers } = pluginState
+  const { layers } = pluginState
 
   // Memoize stylesMap so it only recalculates when style or layers change
   const stylesMap = useMemo(() => {
     if (!mapStyle) {
       return null
     }
-    return buildStylesMap(dataLayers, mapStyle)
-  }, [dataLayers, mapStyle])
+    return buildStylesMap(layers, mapStyle)
+  }, [layers, mapStyle])
 
   // Force re-application of all selected features
   const updateHighlightedFeatures = () => {

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

@@ -23,7 +23,7 @@ describe('useHighlightSync', () => {
       },
       mapStyle: { id: 'default-style' },
       pluginState: {
-        dataLayers: [{ layerId: 'layer1' }]
+        layers: [{ layerId: 'layer1' }]
       },
       selectedFeatures: [],
       dispatch: jest.fn(),
@@ -93,21 +93,21 @@ describe('useHighlightSync', () => {
     )
   })
 
-  it('rebuilds styles when dataLayers change', () => {
+  it('rebuilds styles when layers change', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1' }]
 
     const { rerender } = renderHook(
-      ({ dataLayers }) =>
+      ({ layers }) =>
         useHighlightSync({
           ...mockDeps,
-          pluginState: { dataLayers }
+          pluginState: { layers }
         }),
-      { initialProps: { dataLayers: [{ layerId: 'layer1' }] } }
+      { initialProps: { layers: [{ layerId: 'layer1' }] } }
     )
 
     buildStylesMap.mockClear()
 
-    rerender({ dataLayers: [{ layerId: 'layer1' }, { layerId: 'layer2' }] })
+    rerender({ layers: [{ layerId: 'layer1' }, { layerId: 'layer2' }] })
 
     expect(buildStylesMap).toHaveBeenCalled()
   })

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

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+
+export const useHoverCursor = (mapProvider, enabled, interactionModes, layers) => {
+  useEffect(() => {
+    const canSelect = enabled && interactionModes?.includes('selectFeature')
+    const layerIds = canSelect ? layers.map(l => l.layerId) : []
+    mapProvider.setHoverCursor?.(layerIds)
+    return () => mapProvider.setHoverCursor?.([])
+  }, [enabled, interactionModes, layers])
+}

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

@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react'
+import { useHoverCursor } from './useHoverCursor.js'
+
+const makeProvider = () => ({ setHoverCursor: jest.fn() })
+
+describe('useHoverCursor', () => {
+  const dataLayers = [{ layerId: 'layer-a' }, { layerId: 'layer-b' }]
+
+  it('calls setHoverCursor with layer IDs when enabled with selectFeature mode', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, true, ['selectFeature'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith(['layer-a', 'layer-b'])
+  })
+
+  it('calls setHoverCursor with layer IDs when selectFeature is combined with other interactionModes', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, true, ['selectMarker', 'selectFeature'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith(['layer-a', 'layer-b'])
+  })
+
+  it('calls setHoverCursor with empty array when disabled', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, false, ['selectFeature'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith([])
+  })
+
+  it('calls setHoverCursor with empty array when selectFeature is not in interactionModes', () => {
+    const mapProvider = makeProvider()
+    renderHook(() => useHoverCursor(mapProvider, true, ['selectMarker', 'placeMarker'], dataLayers))
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith([])
+  })
+
+  it('clears cursor on unmount', () => {
+    const mapProvider = makeProvider()
+    const { unmount } = renderHook(() => useHoverCursor(mapProvider, true, ['selectFeature'], dataLayers))
+    mapProvider.setHoverCursor.mockClear()
+    unmount()
+    expect(mapProvider.setHoverCursor).toHaveBeenCalledWith([])
+  })
+
+  it('does not throw when setHoverCursor is absent', () => {
+    expect(() => renderHook(() => useHoverCursor({}, true, ['selectFeature'], dataLayers))).not.toThrow()
+  })
+})

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

@@ -1,8 +1,42 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { isContiguousWithAny, canSplitFeatures, areAllContiguous } from '../utils/spatial.js'
 import { getFeaturesAtPoint, findMatchingFeature, buildLayerConfigMap } from '../utils/featureQueries.js'
+import { scaleFactor } from '../../../../src/config/appConfig.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).
+ *
+ * @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) {
+      continue
+    }
+    const parent = el.parentElement
+    const parentRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0 }
+    const { left, top, right, bottom } = el.getBoundingClientRect()
+    const scaledX = point.x * scale
+    const scaledY = point.y * scale
+    if (
+      scaledX >= left - parentRect.left && scaledX <= right - parentRect.left &&
+      scaledY >= top - parentRect.top && scaledY <= bottom - parentRect.top
+    ) {
+      return marker.id
+    }
+  }
+  return null
+}
 
-const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectionBounds) => {
+const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectedMarkers, selectionBounds) => {
   const lastEmittedSelectionChange = useRef(null)
 
   useEffect(() => {
@@ -14,105 +48,113 @@ const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectionBounds)
 
     // Skip if selection was already empty and remains empty
     const prev = lastEmittedSelectionChange.current
-    const wasEmpty = prev === null || prev.length === 0
-    if (wasEmpty && selectedFeatures.length === 0) {
+    const wasEmpty = prev === null || (prev.features.length === 0 && prev.markers.length === 0)
+    if (wasEmpty && selectedFeatures.length === 0 && selectedMarkers.length === 0) {
       return
     }
 
     eventBus.emit('interact:selectionchange', {
       selectedFeatures,
+      selectedMarkers,
       selectionBounds,
       canMerge: areAllContiguous(selectedFeatures),
       canSplit: canSplitFeatures(selectedFeatures)
     })
 
-    lastEmittedSelectionChange.current = selectedFeatures
-  }, [selectedFeatures, selectionBounds])
+    lastEmittedSelectionChange.current = { features: selectedFeatures, markers: selectedMarkers }
+  }, [selectedFeatures, selectedMarkers, selectionBounds])
 }
 
-export const useInteractionHandlers = ({
-  mapState,
-  pluginState,
-  services,
-  mapProvider
-}) => {
-  const { markers } = mapState
-  const { dispatch, dataLayers, interactionMode, multiSelect, contiguous, markerColor, tolerance, selectedFeatures, selectionBounds, deselectOnClickOutside } = pluginState
+/**
+ * Core interaction hook. Processes map clicks in fixed priority order:
+ * selectMarker → selectFeature → placeMarker (fallback).
+ *
+ * Which steps are active is controlled by `pluginState.interactionModes`. Steps not
+ * present in the array are skipped entirely — e.g. omitting `'selectMarker'` means
+ * marker hit-testing is never performed.
+ *
+ * @param {Object} deps
+ * @param {Object} deps.mapState - Map state including markers and mapSize
+ * @param {Object} deps.pluginState - Plugin state including interactionModes, layers, etc.
+ * @param {Object} deps.services - Services including eventBus
+ * @param {Object} deps.mapProvider - Map provider instance for feature queries
+ * @returns {{ handleInteraction: Function }}
+ */
+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 { eventBus } = services
-  const layerConfigMap = buildLayerConfigMap(dataLayers)
-
-  const handleInteraction = useCallback(({ point, coords }) => {
-    const allFeatures = getFeaturesAtPoint(mapProvider, point, { radius: tolerance })
-    const hasDataLayers = dataLayers.length > 0
-
-    if (pluginState?.debug) {
-      console.log(`--- Features at ${coords} ---`, allFeatures)
+  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
     }
+    dispatch({
+      type: 'TOGGLE_SELECTED_FEATURES',
+      payload: {
+        featureId,
+        multiSelect,
+        layerId: config.layerId,
+        idProperty: config.idProperty,
+        properties: feature.properties,
+        geometry: feature.geometry,
+        replaceAll: contiguous && !isNewContiguous
+      }
+    })
+  }, [markers, contiguous, selectedFeatures, dispatch, multiSelect])
 
-    const canMatch = hasDataLayers && (interactionMode === 'select' || interactionMode === 'auto')
-    const match = canMatch ? findMatchingFeature(allFeatures, layerConfigMap) : null
-
-    // 1. Handle Feature Match
-    if (match) {
-      processFeatureMatch(match)
+  const processFallback = useCallback(({ coords }) => {
+    const canPlace = interactionModes.includes('placeMarker')
+    if (!canPlace && !deselectOnClickOutside) {
       return
     }
-
-    // 2. Handle Marker Mode (Fallback)
-    const isMarkerMode = interactionMode === 'marker' || (interactionMode === 'auto' && hasDataLayers)
-    if (isMarkerMode) {
-      dispatch({ type: 'CLEAR_SELECTED_FEATURES' })
-      markers.add('location', coords, { color: markerColor })
+    dispatch({ type: 'CLEAR_SELECTED_FEATURES' })
+    if (canPlace) {
+      markers.add('location', coords, markerOptions)
       eventBus.emit('interact:markerchange', { coords })
-    } else if (deselectOnClickOutside) {
-      dispatch({ type: 'CLEAR_SELECTED_FEATURES' })
-    } else {
-      // No action
     }
+  }, [interactionModes, dispatch, markers, markerOptions, eventBus, deselectOnClickOutside])
 
-    // Internal helper to keep complexity low
-    function processFeatureMatch ({ feature, config }) {
-      markers.remove('location')
-      const isNewContiguous = contiguous && isContiguousWithAny(feature, selectedFeatures)
-      const featureId = feature.properties?.[config.idProperty] ?? feature.id
-
-      if (!featureId) {
+  const handleInteraction = useCallback(({ point, coords }) => {
+    if (interactionModes.includes('selectMarker')) {
+      const markerHit = findMarkerAtPoint(markers, point, scale)
+      if (markerHit) {
+        dispatch({ type: 'TOGGLE_SELECTED_MARKERS', payload: { markerId: markerHit, multiSelect } })
         return
       }
+    }
 
-      dispatch({
-        type: 'TOGGLE_SELECTED_FEATURES',
-        payload: {
-          featureId,
-          multiSelect,
-          layerId: config.layerId,
-          idProperty: config.idProperty,
-          properties: feature.properties,
-          geometry: feature.geometry,
-          replaceAll: contiguous && !isNewContiguous
-        }
-      })
+    if (interactionModes.includes('selectFeature') && layers.length > 0) {
+      const allFeatures = getFeaturesAtPoint(mapProvider, point, { radius: tolerance })
+      if (pluginState?.debug) {
+        console.log(`--- Features at ${coords} ---`, allFeatures)
+      }
+      const match = findMatchingFeature(allFeatures, layerConfigMap)
+      if (match) {
+        processFeatureMatch(match)
+        return
+      }
     }
+
+    processFallback({ coords })
   }, [
     mapProvider,
-    dataLayers,
-    interactionMode,
+    layers,
+    interactionModes,
     multiSelect,
-    eventBus,
     dispatch,
     markers,
-    contiguous,
-    selectedFeatures,
     layerConfigMap,
     pluginState?.debug,
     tolerance,
-    markerColor,
-    deselectOnClickOutside
+    processFeatureMatch,
+    processFallback,
+    scale
   ])
-
-  useSelectionChangeEmitter(eventBus, selectedFeatures, selectionBounds)
-
-  return {
-    handleInteraction
-  }
+  useSelectionChangeEmitter(eventBus, selectedFeatures, selectedMarkers, selectionBounds)
+  return { handleInteraction }
 }