@defra/interactive-map 0.0.18-alpha → 0.0.20-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,135 +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 emits selectedFeatures and selectionBounds when no marker/coords', () => {
+  it('selectCancel emits cancel and respects closeOnAction', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    params.mapState.markers.getMarker.mockReturnValue(null)
-    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('selectDone includes selectedMarkers in payload when present', () => {
+  it('respects default closeOnAction when value is nullish', () => {
     const params = createParams()
+    params.pluginState.closeOnAction = null
     cleanup = attachEvents(params)
 
-    params.mapState.markers.getMarker.mockReturnValue(null)
-    params.pluginState.selectedMarkers = ['m1', 'm2']
-
     params.buttonConfig.selectDone.onClick()
+    expect(params.closeApp).toHaveBeenCalledTimes(1)
 
-    expect(params.eventBus.emit).toHaveBeenCalledWith('interact:done',
-      expect.objectContaining({ selectedMarkers: ['m1', 'm2'] })
-    )
+    params.closeApp.mockClear()
+    params.buttonConfig.selectCancel.onClick()
+    expect(params.closeApp).toHaveBeenCalledTimes(1)
   })
+})
 
-  it('selectDone omits selectedMarkers from payload when empty', () => {
+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)
 
-    params.mapState.markers.getMarker.mockReturnValue(null)
-    params.pluginState.selectedMarkers = []
+    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]
 
-    params.buttonConfig.selectDone.onClick()
+    selectHandler({ featureId: 'F1' })
+    unselectHandler({ featureId: 'F2' })
 
-    const payload = params.eventBus.emit.mock.calls.find(c => c[0] === 'interact:done')[1]
-    expect(payload).not.toHaveProperty('selectedMarkers')
+    expect(params.pluginState.dispatch).toHaveBeenCalledTimes(2)
+    expect(params.mapState.markers.remove).toHaveBeenCalledTimes(2)
   })
+})
 
-  it('respects default closeOnAction when value is undefined (fallback to true)', () => {
+describe('attachEvents — cleanup', () => {
+  it('removes all handlers and nulls button onClick callbacks', () => {
+    jest.useFakeTimers()
     const params = createParams()
-    // Explicitly set to undefined to trigger the ?? fallback
-    params.pluginState.closeOnAction = undefined
-    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)
+    const cleanup = attachEvents(params)
+    cleanup()
+    Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
+    jest.useRealTimers()
   })
 })

package/plugins/interact/src/manifest.js

@@ -1,11 +1,14 @@
 // /plugins/interact/manifest.js
 import { InteractInit } from './InteractInit.jsx'
+import { isSelectMarkerOnly } from './utils/interactionModes.js'
 import { initialState, actions } from './reducer.js'
 import { enable } from './api/enable.js'
 import { disable } from './api/disable.js'
 import { clear } from './api/clear.js'
 import { selectFeature } from './api/selectFeature.js'
 import { unselectFeature } from './api/unselectFeature.js'
+import { selectMarker } from './api/selectMarker.js'
+import { unselectMarker } from './api/unselectMarker.js'
 
 export const manifest = {
   InitComponent: InteractInit,
@@ -36,7 +39,10 @@ export const manifest = {
     id: 'selectAtTarget',
     label: 'Select',
     variant: 'primary',
-    hiddenWhen: ({ appState, pluginState }) => !pluginState.enabled || appState.interfaceType !== 'touch',
+    // Hidden for touch when selectMarker is the only mode — markers have a sufficient tap target
+    // and the Select button is only needed alongside the crosshair. Mirrors the crosshair logic in InteractInit.
+    hiddenWhen: ({ appState, pluginState }) =>
+      !pluginState.enabled || appState.interfaceType !== 'touch' || isSelectMarkerOnly(pluginState.interactionModes),
     mobile: {
       slot: 'actions'
     },
@@ -83,6 +89,8 @@ export const manifest = {
     disable,
     clear,
     selectFeature,
-    unselectFeature
+    unselectFeature,
+    selectMarker,
+    unselectMarker
   }
 }

package/plugins/interact/src/reducer.js

@@ -107,13 +107,48 @@ const clearSelectedFeatures = (state) => {
   }
 }
 
+/**
+ * Explicitly select a marker. Has no effect if already selected.
+ * In single-select mode, clears selectedFeatures and replaces the selection.
+ * In multi-select mode, adds to the existing selection.
+ */
+const selectMarker = (state, { markerId, multiSelect }) => {
+  const current = state.selectedMarkers
+  if (current.includes(markerId)) {
+    return state
+  }
+  const nextMarkers = multiSelect ? [...current, markerId] : [markerId]
+  return {
+    ...state,
+    selectedFeatures: multiSelect ? state.selectedFeatures : [],
+    selectionBounds: null,
+    selectedMarkers: nextMarkers
+  }
+}
+
+/**
+ * Explicitly unselect a marker. Has no effect if not selected.
+ */
+const unselectMarker = (state, { markerId }) => {
+  const current = state.selectedMarkers
+  if (!current.includes(markerId)) {
+    return state
+  }
+  return {
+    ...state,
+    selectedMarkers: current.filter(id => id !== markerId)
+  }
+}
+
 const actions = {
   ENABLE: enable,
   DISABLE: disable,
   TOGGLE_SELECTED_FEATURES: toggleSelectedFeatures,
   TOGGLE_SELECTED_MARKERS: toggleSelectedMarkers,
   UPDATE_SELECTED_BOUNDS: updateSelectedBounds,
-  CLEAR_SELECTED_FEATURES: clearSelectedFeatures
+  CLEAR_SELECTED_FEATURES: clearSelectedFeatures,
+  SELECT_MARKER: selectMarker,
+  UNSELECT_MARKER: unselectMarker
 }
 
 export {

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

@@ -189,6 +189,43 @@ describe('CLEAR_SELECTED_FEATURES action', () => {
   })
 })
 
+describe('SELECT_MARKER action', () => {
+  it('adds a marker in single-select mode, clearing selectedFeatures', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: [] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm1', multiSelect: false })
+    expect(result.selectedMarkers).toEqual(['m1'])
+    expect(result.selectedFeatures).toEqual([])
+    expect(result.selectionBounds).toBeNull()
+  })
+
+  it('adds a marker in multi-select mode without clearing selectedFeatures', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: ['m1'] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm2', multiSelect: true })
+    expect(result.selectedMarkers).toEqual(['m1', 'm2'])
+    expect(result.selectedFeatures).toEqual([{ featureId: 'f1' }])
+  })
+
+  it('is idempotent — does not change state if marker already selected', () => {
+    const state = { ...initialState, selectedMarkers: ['m1'] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm1', multiSelect: false })
+    expect(result).toBe(state)
+  })
+})
+
+describe('UNSELECT_MARKER action', () => {
+  it('removes a selected marker', () => {
+    const state = { ...initialState, selectedMarkers: ['m1', 'm2'] }
+    const result = actions.UNSELECT_MARKER(state, { markerId: 'm1' })
+    expect(result.selectedMarkers).toEqual(['m2'])
+  })
+
+  it('is idempotent — does not change state if marker not selected', () => {
+    const state = { ...initialState, selectedMarkers: ['m2'] }
+    const result = actions.UNSELECT_MARKER(state, { markerId: 'm1' })
+    expect(result).toBe(state)
+  })
+})
+
 describe('actions object', () => {
   it('exports all action handlers as functions', () => {
     expect(Object.keys(actions)).toEqual([
@@ -197,7 +234,9 @@ describe('actions object', () => {
       'TOGGLE_SELECTED_FEATURES',
       'TOGGLE_SELECTED_MARKERS',
       'UPDATE_SELECTED_BOUNDS',
-      'CLEAR_SELECTED_FEATURES'
+      'CLEAR_SELECTED_FEATURES',
+      'SELECT_MARKER',
+      'UNSELECT_MARKER'
     ])
     Object.values(actions).forEach(fn => expect(typeof fn).toBe('function'))
   })

package/plugins/interact/src/utils/interactionModes.js

@@ -0,0 +1,12 @@
+/**
+ * Returns true when selectMarker is the only active interaction mode.
+ *
+ * Used to suppress the crosshair and Select action button for touch users —
+ * markers have a sufficient tap target so neither is needed. Any other mode
+ * combination (e.g. placeMarker, selectFeature) requires the crosshair for touch.
+ *
+ * @param {string[] | null} interactionModes
+ * @returns {boolean}
+ */
+export const isSelectMarkerOnly = (interactionModes) =>
+  interactionModes?.length === 1 && interactionModes.includes('selectMarker')