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

package/plugins/interact/src/InteractInit.jsx

@@ -1,7 +1,10 @@
 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'
+import { isSelectMarkerOnly } from './utils/interactionModes.js'
 
 export const InteractInit = ({
   appState,
@@ -12,11 +15,12 @@ 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)
+  const selectMarkerOnly = isSelectMarkerOnly(interactionModes)
 
   // Core interaction logic (click > select/marker)
   const { handleInteraction } = useInteractionHandlers({
@@ -56,18 +60,25 @@ 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) {
+    if (enabled && isTouchOrKeyboard && !(interfaceType === 'touch' && selectMarkerOnly)) {
       crossHair.fixAtCenter()
     } else {
       crossHair.hide()
     }
-  }, [enabled, interfaceType])
+  }, [enabled, interfaceType, interactionModes])
 
   useEffect(() => {
     if (!pluginState.enabled) {
@@ -79,15 +90,15 @@ export const InteractInit = ({
       mapState,
       getPluginState: () => pluginStateRef.current,
       buttonConfig,
-      events,
+      events: EVENTS,
       eventBus,
-      handleInteraction: (e) => handleInteractionRef.current(e),
+      handleInteraction: (event) => handleInteractionRef.current(event),
       clickReadyRef,
       closeApp
     })
 
     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/clear.js

@@ -1,5 +1,5 @@
 /**
- * Programatically clear selected features and removes the location marker.
+ * Programmatically clear all selected features and markers, and remove the location marker.
  *
  * @param {Object} params
  * @param {{ dispatch: Function }} params.pluginState

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/api/selectMarker.js

@@ -0,0 +1,14 @@
+/**
+ * Programmatically select a marker. Dispatches directly to the reducer so it
+ * works immediately without waiting for React to re-render after `enable()`.
+ *
+ * @param {Object} params
+ * @param {{ dispatch: Function, multiSelect: boolean }} params.pluginState
+ * @param {string} markerId - The ID of the marker to select
+ */
+export const selectMarker = ({ pluginState }, markerId) => {
+  pluginState.dispatch({
+    type: 'SELECT_MARKER',
+    payload: { markerId, multiSelect: pluginState.multiSelect }
+  })
+}

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

@@ -0,0 +1,25 @@
+import { selectMarker } from './selectMarker.js'
+
+describe('selectMarker', () => {
+  it('dispatches SELECT_MARKER with markerId and multiSelect from pluginState', () => {
+    const dispatch = jest.fn()
+
+    selectMarker({ pluginState: { dispatch, multiSelect: false } }, 'm1')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SELECT_MARKER',
+      payload: { markerId: 'm1', multiSelect: false }
+    })
+  })
+
+  it('passes multiSelect: true when pluginState.multiSelect is true', () => {
+    const dispatch = jest.fn()
+
+    selectMarker({ pluginState: { dispatch, multiSelect: true } }, 'm1')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SELECT_MARKER',
+      payload: { markerId: 'm1', multiSelect: true }
+    })
+  })
+})

package/plugins/interact/src/api/unselectMarker.js

@@ -0,0 +1,14 @@
+/**
+ * Programmatically unselect a marker. Dispatches directly to the reducer so it
+ * works immediately without waiting for React to re-render after `enable()`.
+ *
+ * @param {Object} params
+ * @param {{ dispatch: Function }} params.pluginState
+ * @param {string} markerId - The ID of the marker to unselect
+ */
+export const unselectMarker = ({ pluginState }, markerId) => {
+  pluginState.dispatch({
+    type: 'UNSELECT_MARKER',
+    payload: { markerId }
+  })
+}

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

@@ -0,0 +1,14 @@
+import { unselectMarker } from './unselectMarker.js'
+
+describe('unselectMarker', () => {
+  it('dispatches UNSELECT_MARKER with markerId', () => {
+    const dispatch = jest.fn()
+
+    unselectMarker({ pluginState: { dispatch } }, 'm1')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UNSELECT_MARKER',
+      payload: { markerId: 'm1' }
+    })
+  })
+})

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()
@@ -12,6 +19,18 @@ const createFeatureHandler = (mapState, getPluginState) => (args, addToExisting)
   })
 }
 
+const createKeyboardHandlers = (viewportRef, onSelectAtTarget) => {
+  let enterOnViewport = false
+  const handleKeydown = (event) => { enterOnViewport = event.key === 'Enter' && viewportRef.current === event.target }
+  const handleKeyup = (event) => {
+    if (event.key === 'Enter' && enterOnViewport) {
+      event.preventDefault()
+      onSelectAtTarget()
+    }
+  }
+  return { handleKeydown, handleKeyup }
+}
+
 export function attachEvents ({
   getAppState,
   mapState,
@@ -24,59 +43,31 @@ export function attachEvents ({
   closeApp
 }) {
   const { selectDone, selectAtTarget, selectCancel } = buttonConfig
-  const { viewportRef } = getAppState().layoutRefs
-
-  // Keyboard Logic
-  let enterOnViewport = false
-  const handleKeydown = (e) => { enterOnViewport = e.key === 'Enter' && viewportRef.current === e.target }
-  const handleKeyup = (e) => {
-    if (e.key === 'Enter' && enterOnViewport) {
-      e.preventDefault()
-      handleSelectAtTarget()
-    }
-  }
 
-  // Interaction Handlers
-  const handleMapClick = (e) => {
-    if (clickReadyRef.current) {
-      handleInteraction(e)
-    }
-  }
   const handleSelectAtTarget = () => handleInteraction(mapState.crossHair.getDetail())
+  const handleMapClick = (mapEvent) => { if (clickReadyRef.current) { handleInteraction(mapEvent) } }
+
+  const { handleKeydown, handleKeyup } = createKeyboardHandlers(getAppState().layoutRefs.viewportRef, handleSelectAtTarget)
 
   const handleSelectDone = () => {
     const pluginState = getPluginState()
     const marker = mapState.markers.getMarker('location')
     const { coords } = marker || {}
-    const { selectionBounds, selectedFeatures } = pluginState
-
-    if (getAppState().disabledButtons.has('selectDone')) {
-      return
-    }
-
-    eventBus.emit('interact:done', {
-      ...(coords && { coords }),
-      ...(!coords && selectedFeatures && { selectedFeatures }),
-      ...(!coords && selectionBounds && { selectionBounds })
-    })
-
-    if (pluginState.closeOnAction ?? true) {
-      closeApp()
-    }
+    const { selectionBounds, selectedFeatures, selectedMarkers } = pluginState
+    if (getAppState().disabledButtons.has('selectDone')) { return }
+    eventBus.emit('interact:done', buildDonePayload(coords, selectedFeatures, selectedMarkers, selectionBounds))
+    if (pluginState.closeOnAction ?? true) { closeApp() }
   }
 
   const handleSelectCancel = () => {
     eventBus.emit('interact:cancel')
-    if (getPluginState().closeOnAction ?? true) {
-      closeApp()
-    }
+    if (getPluginState().closeOnAction ?? true) { closeApp() }
   }
 
   const toggleFeature = createFeatureHandler(mapState, getPluginState)
   const handleSelect = (args) => toggleFeature(args, true)
   const handleUnselect = (args) => toggleFeature(args, false)
 
-  // Attach Listeners
   document.addEventListener('keydown', handleKeydown)
   document.addEventListener('keyup', handleKeyup)
   eventBus.on(events.MAP_CLICK, handleMapClick)