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

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

@@ -1,40 +1,38 @@
 import { attachEvents } from './events.js'
 
-describe('attachEvents', () => {
-  let createParams, cleanup
-
-  beforeEach(() => {
-    jest.useFakeTimers()
-    // factory function to create fresh params for each test
-    createParams = () => {
-      const appState = { layoutRefs: { viewportRef: { current: document.body } }, disabledButtons: new Set() }
-      const pluginState = { dispatch: jest.fn(), selectionBounds: null, selectedFeatures: [], closeOnAction: true, multiSelect: false }
-      const clickReadyRef = { current: false }
-      return {
-        appState,
-        pluginState,
-        clickReadyRef,
-        getAppState: () => appState,
-        getPluginState: () => pluginState,
-        mapState: {
-          markers: { remove: jest.fn(), getMarker: jest.fn(() => null) },
-          crossHair: { getDetail: jest.fn(() => ({ point: { x: 0, y: 0 }, coords: [0, 0] })) }
-        },
-        buttonConfig: { selectDone: {}, selectAtTarget: {}, selectCancel: {} },
-        events: { MAP_CLICK: 'map:click' },
-        eventBus: { on: jest.fn(), off: jest.fn(), emit: jest.fn() },
-        handleInteraction: jest.fn(),
-        closeApp: jest.fn()
-      }
-    }
-  })
-
-  afterEach(() => {
-    cleanup?.()
-    jest.useRealTimers()
-  })
-
-  it('keyboard Enter triggers only on viewport', () => {
+const MOCK_POINT = { x: 1, y: 2 }
+const MOCK_COORDS = [1, 2]
+const INTERACT_DONE = 'interact:done'
+
+const createParams = () => {
+  const appState = { layoutRefs: { viewportRef: { current: document.body } }, disabledButtons: new Set() }
+  const pluginState = { dispatch: jest.fn(), selectionBounds: null, selectedFeatures: [], selectedMarkers: [], closeOnAction: true, multiSelect: false }
+  const clickReadyRef = { current: false }
+  return {
+    appState,
+    pluginState,
+    clickReadyRef,
+    getAppState: () => appState,
+    getPluginState: () => pluginState,
+    mapState: {
+      markers: { remove: jest.fn(), getMarker: jest.fn(() => null) },
+      crossHair: { getDetail: jest.fn(() => ({ point: { x: 0, y: 0 }, coords: [0, 0] })) }
+    },
+    buttonConfig: { selectDone: {}, selectAtTarget: {}, selectCancel: {} },
+    events: { MAP_CLICK: 'map:click' },
+    eventBus: { on: jest.fn(), off: jest.fn(), emit: jest.fn() },
+    handleInteraction: jest.fn(),
+    closeApp: jest.fn()
+  }
+}
+
+describe('attachEvents — keyboard', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
+
+  it('Enter on viewport triggers interaction', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
@@ -54,7 +52,6 @@ describe('attachEvents', () => {
     cleanup = attachEvents(params)
     const input = document.createElement('input')
 
-    // Enter outside viewport
     let kd = new KeyboardEvent('keydown', { key: 'Enter' })
     Object.defineProperty(kd, 'target', { value: input })
     document.dispatchEvent(kd)
@@ -62,7 +59,6 @@ describe('attachEvents', () => {
     Object.defineProperty(ku, 'target', { value: input })
     document.dispatchEvent(ku)
 
-    // other key
     kd = new KeyboardEvent('keydown', { key: 'Space' })
     Object.defineProperty(kd, 'target', { value: document.body })
     document.dispatchEvent(kd)
@@ -72,6 +68,13 @@ describe('attachEvents', () => {
 
     expect(params.handleInteraction).not.toHaveBeenCalled()
   })
+})
+
+describe('attachEvents — click handling', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
 
   it('map click triggers interaction when clickReadyRef is true', () => {
     const params = createParams()
@@ -79,18 +82,17 @@ describe('attachEvents', () => {
     cleanup = attachEvents(params)
 
     const handler = params.eventBus.on.mock.calls.find(c => c[0] === 'map:click')[1]
-    handler({ point: { x: 1, y: 2 }, coords: [3, 4] })
+    handler({ point: MOCK_POINT, coords: MOCK_COORDS })
 
-    expect(params.handleInteraction).toHaveBeenCalledWith({ point: { x: 1, y: 2 }, coords: [3, 4] })
+    expect(params.handleInteraction).toHaveBeenCalledWith({ point: MOCK_POINT, coords: MOCK_COORDS })
   })
 
   it('map click is suppressed when clickReadyRef is false', () => {
     const params = createParams()
-    params.clickReadyRef.current = false
     cleanup = attachEvents(params)
 
     const handler = params.eventBus.on.mock.calls.find(c => c[0] === 'map:click')[1]
-    handler({ point: { x: 1, y: 2 }, coords: [3, 4] })
+    handler({ point: MOCK_POINT, coords: MOCK_COORDS })
 
     expect(params.handleInteraction).not.toHaveBeenCalled()
   })
@@ -99,111 +101,138 @@ describe('attachEvents', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    const crossDetail = { point: { x: 1, y: 2 }, coords: [3, 4] }
+    const crossDetail = { point: MOCK_POINT, coords: MOCK_COORDS }
     params.mapState.crossHair.getDetail.mockReturnValue(crossDetail)
 
     params.buttonConfig.selectAtTarget.onClick()
     expect(params.handleInteraction).toHaveBeenCalledWith(crossDetail)
   })
+})
+
+describe('attachEvents — button actions', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
 
   it('selectDone emits correct payload and respects closeOnAction', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    // closeOnAction = true (already covered)
-    params.mapState.markers.getMarker.mockReturnValue({ coords: [1, 2] })
+    params.mapState.markers.getMarker.mockReturnValue({ coords: MOCK_COORDS })
     params.buttonConfig.selectDone.onClick()
     expect(params.closeApp).toHaveBeenCalled()
 
-    // cover closeOnAction = false
     params.closeApp.mockClear()
     params.pluginState.closeOnAction = false
-    params.mapState.markers.getMarker.mockReturnValue({ coords: [3, 4] })
     params.buttonConfig.selectDone.onClick()
     expect(params.closeApp).not.toHaveBeenCalled()
   })
 
-  it('selectCancel emits cancel and respects closeOnAction', () => {
+  it('selectDone emits selectedFeatures and selectionBounds when no marker', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    // closeOnAction = true
-    params.buttonConfig.selectCancel.onClick()
-    expect(params.closeApp).toHaveBeenCalled()
+    params.pluginState.selectedFeatures = [{ id: 'f1' }]
+    params.pluginState.selectionBounds = { sw: [0, 0], ne: [1, 1] }
+    params.buttonConfig.selectDone.onClick()
 
-    // cover closeOnAction = false
-    cleanup()
-    const params2 = createParams()
-    cleanup = attachEvents(params2)
-    params2.pluginState.closeOnAction = false
-    params2.buttonConfig.selectCancel.onClick()
-    expect(params2.closeApp).not.toHaveBeenCalled()
+    expect(params.eventBus.emit).toHaveBeenCalledWith(INTERACT_DONE, {
+      selectedFeatures: [{ id: 'f1' }],
+      selectionBounds: { sw: [0, 0], ne: [1, 1] }
+    })
   })
 
-  it('does not emit or closeApp if selectDone button is disabled', () => {
+  it('selectDone includes selectedMarkers in payload when present', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    params.appState.disabledButtons.add('selectDone')
+    params.pluginState.selectedMarkers = ['m1', 'm2']
     params.buttonConfig.selectDone.onClick()
 
-    expect(params.eventBus.emit).not.toHaveBeenCalled()
-    expect(params.closeApp).not.toHaveBeenCalled()
+    expect(params.eventBus.emit).toHaveBeenCalledWith(INTERACT_DONE,
+      expect.objectContaining({ selectedMarkers: ['m1', 'm2'] })
+    )
   })
 
-  it('programmatic select/unselect dispatches and removes location', () => {
+  it('selectDone omits selectedMarkers from payload when empty', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    const selectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:selectFeature')[1]
-    const unselectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:unselectFeature')[1]
-
-    selectHandler({ featureId: 'F1' })
-    unselectHandler({ featureId: 'F2' })
+    params.buttonConfig.selectDone.onClick()
 
-    expect(params.pluginState.dispatch).toHaveBeenCalledTimes(2)
-    expect(params.mapState.markers.remove).toHaveBeenCalledTimes(2)
+    const payload = params.eventBus.emit.mock.calls.find(c => c[0] === INTERACT_DONE)[1]
+    expect(payload).not.toHaveProperty('selectedMarkers')
   })
 
-  it('cleanup removes all handlers', () => {
+  it('does not emit or closeApp if selectDone button is disabled', () => {
     const params = createParams()
     cleanup = attachEvents(params)
-    cleanup()
-    Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
+
+    params.appState.disabledButtons.add('selectDone')
+    params.buttonConfig.selectDone.onClick()
+
+    expect(params.eventBus.emit).not.toHaveBeenCalled()
+    expect(params.closeApp).not.toHaveBeenCalled()
   })
 
-  it('selectDone handles emission when no marker/coords exist', () => {
+  it('selectCancel emits cancel and respects closeOnAction', () => {
     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] }
-
-    params.buttonConfig.selectDone.onClick()
+    params.buttonConfig.selectCancel.onClick()
+    expect(params.closeApp).toHaveBeenCalled()
 
-    expect(params.eventBus.emit).toHaveBeenCalledWith('interact:done', {
-      selectedFeatures: [{ id: 'f1' }],
-      selectionBounds: { sw: [0, 0], ne: [1, 1] }
-    })
+    cleanup()
+    const params2 = createParams()
+    cleanup = attachEvents(params2)
+    params2.pluginState.closeOnAction = false
+    params2.buttonConfig.selectCancel.onClick()
+    expect(params2.closeApp).not.toHaveBeenCalled()
   })
 
-  it('respects default closeOnAction when value is undefined (fallback to true)', () => {
+  it('respects default closeOnAction when value is nullish', () => {
     const params = createParams()
-    // Explicitly set to undefined to trigger the ?? fallback
-    params.pluginState.closeOnAction = undefined
+    params.pluginState.closeOnAction = null
     cleanup = attachEvents(params)
 
-    // Test for selectDone
     params.buttonConfig.selectDone.onClick()
     expect(params.closeApp).toHaveBeenCalledTimes(1)
 
-    // Test for selectCancel
     params.closeApp.mockClear()
     params.buttonConfig.selectCancel.onClick()
     expect(params.closeApp).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('attachEvents — programmatic selection', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
+
+  it('selectFeature and unselectFeature dispatch and remove location marker', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const selectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:selectFeature')[1]
+    const unselectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:unselectFeature')[1]
+
+    selectHandler({ featureId: 'F1' })
+    unselectHandler({ featureId: 'F2' })
+
+    expect(params.pluginState.dispatch).toHaveBeenCalledTimes(2)
+    expect(params.mapState.markers.remove).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('attachEvents — cleanup', () => {
+  it('removes all handlers and nulls button onClick callbacks', () => {
+    jest.useFakeTimers()
+    const params = createParams()
+    const cleanup = attachEvents(params)
+    cleanup()
+    Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
+    jest.useRealTimers()
+  })
+})

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 }
 }