@defra/interactive-map 0.0.4-alpha → 0.0.5-alpha

package/plugins/interact/src/events.js

@@ -1,3 +1,16 @@
+// Helper for feature toggling logic
+const createFeatureHandler = (mapState, pluginState) => (args, addToExisting) => {
+  mapState.markers.remove('location')
+  pluginState.dispatch({
+    type: 'TOGGLE_SELECTED_FEATURES',
+    payload: {
+      multiSelect: pluginState.multiSelect,
+      addToExisting,
+      ...args
+    }
+  })
+}
+
 export function attachEvents ({
   appState,
   mapState,
@@ -8,41 +21,24 @@ export function attachEvents ({
   handleInteraction,
   closeApp
 }) {
-  const {
-    selectDone,
-    selectAtTarget,
-    selectCancel
-  } = buttonConfig
-
+  const { selectDone, selectAtTarget, selectCancel } = buttonConfig
   const { viewportRef } = appState.layoutRefs
 
+  // Keyboard Logic
   let enterOnViewport = false
-  const handleKeydown = (e) => {
-    enterOnViewport = e.key === 'Enter' && viewportRef.current === e.target
-  }
-  document.addEventListener('keydown', handleKeydown)
-
+  const handleKeydown = (e) => { enterOnViewport = e.key === 'Enter' && viewportRef.current === e.target }
   const handleKeyup = (e) => {
-    if (e.key !== 'Enter' || !enterOnViewport) {
-      return
+    if (e.key === 'Enter' && enterOnViewport) {
+      e.preventDefault()
+      handleSelectAtTarget()
     }
-    e.preventDefault()
-    handleSelectAtTarget()
   }
-  document.addEventListener('keyup', handleKeyup)
 
-  // Allow tapping on touch devices as well as accurate placement
-  const handleMapClick = (e) => {
-    handleInteraction(e)
-  }
-  eventBus.on(events.MAP_CLICK, handleMapClick)
+  // Interaction Handlers
+  const handleMapClick = (e) => handleInteraction(e)
+  const handleSelectAtTarget = () => handleInteraction(mapState.crossHair.getDetail())
 
-  const handleSelectAtTarget = () => {
-    handleInteraction(mapState.crossHair.getDetail())
-  }
-  selectAtTarget.onClick = handleSelectAtTarget
-  
-  const handleSelectDone = (e) => {
+  const handleSelectDone = () => {
     const marker = mapState.markers.getMarker('location')
     const { coords } = marker || {}
     const { selectionBounds, selectedFeatures } = pluginState
@@ -57,43 +53,32 @@ export function attachEvents ({
       ...(!coords && selectionBounds && { selectionBounds })
     })
 
-    if (!(pluginState.closeOnAction ?? true)) {
-      return
+    if (pluginState.closeOnAction ?? true) {
+      closeApp()
     }
-
-    closeApp()
   }
-  selectDone.onClick = handleSelectDone
 
   const handleSelectCancel = () => {
     eventBus.emit('interact:cancel')
-
-    if (!(pluginState.closeOnAction ?? true)) {
-      return
+    if (pluginState.closeOnAction ?? true) {
+      closeApp()
     }
-
-    closeApp()
   }
-  selectCancel.onClick = handleSelectCancel
 
-  const handleToggleFeature = (args, addToExisting) => {
-    mapState.markers.remove('location')
+  const toggleFeature = createFeatureHandler(mapState, pluginState)
+  const handleSelect = (args) => toggleFeature(args, true)
+  const handleUnselect = (args) => toggleFeature(args, false)
 
-    pluginState.dispatch({
-      type: 'TOGGLE_SELECTED_FEATURES',
-      payload: {
-        multiSelect: pluginState.multiSelect,
-        addToExisting,
-        ...args
-      }
-    })
-  }
-  const handleSelect = (args) => handleToggleFeature(args, true)
-  const handleUnselect = (args) => handleToggleFeature(args, false)
+  // Attach Listeners
+  document.addEventListener('keydown', handleKeydown)
+  document.addEventListener('keyup', handleKeyup)
+  eventBus.on(events.MAP_CLICK, handleMapClick)
   eventBus.on('interact:selectFeature', handleSelect)
   eventBus.on('interact:unselectFeature', handleUnselect)
+  selectAtTarget.onClick = handleSelectAtTarget
+  selectDone.onClick = handleSelectDone
+  selectCancel.onClick = handleSelectCancel
 
-  // Return cleanup function
   return () => {
     selectDone.onClick = null
     selectAtTarget.onClick = null

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

@@ -148,4 +148,39 @@ describe('attachEvents', () => {
     cleanup()
     Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
   })
+
+  it('selectDone handles emission when no marker/coords exist', () => {
+    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()
+
+    expect(params.eventBus.emit).toHaveBeenCalledWith('interact:done', {
+      selectedFeatures: [{ id: 'f1' }],
+      selectionBounds: { sw: [0, 0], ne: [1, 1] }
+    })
+  })
+
+  it('respects default closeOnAction when value is undefined (fallback to true)', () => {
+    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)
+  })
 })

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

@@ -32,7 +32,7 @@ export const useHighlightSync = ({
 
   useEffect(() => {
     if (!mapProvider || !selectedFeatures || !stylesMap) {
-      return
+      return undefined // Explicit return to match the cleanup function return below
     }
 
     // Update updateHighlightedFeatures on interaction

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

@@ -1,8 +1,35 @@
 import { useCallback, useEffect, useRef } from 'react'
-import booleanDisjoint from '@turf/boolean-disjoint'
-import { toTurfGeometry } from '../utils/turfHelpers.js'
+import { isContiguousWithAny, canSplitFeatures, areAllContiguous } from '../utils/spatial.js'
 import { getFeaturesAtPoint, findMatchingFeature, buildLayerConfigMap } from '../utils/featureQueries.js'
 
+const useSelectionChangeEmitter = (eventBus, selectedFeatures, selectionBounds) => {
+  const lastEmittedSelectionChange = useRef(null)
+
+  useEffect(() => {
+    // Skip if features exist but bounds not yet calculated
+    const awaitingBounds = selectedFeatures.length > 0 && !selectionBounds
+    if (awaitingBounds) {
+      return
+    }
+
+    // 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) {
+      return
+    }
+
+    eventBus.emit('interact:selectionchange', {
+      selectedFeatures,
+      selectionBounds,
+      canMerge: areAllContiguous(selectedFeatures),
+      canSplit: canSplitFeatures(selectedFeatures)
+    })
+
+    lastEmittedSelectionChange.current = selectedFeatures
+  }, [selectedFeatures, selectionBounds])
+}
+
 export const useInteractionHandlers = ({
   mapState,
   pluginState,
@@ -10,70 +37,75 @@ export const useInteractionHandlers = ({
   mapProvider,
 }) => {
   const { markers } = mapState
-  const { dispatch, dataLayers, interactionMode, multiSelect, contiguous, markerColor, selectedFeatures, selectionBounds } = pluginState
+  const { dispatch, dataLayers, interactionMode, multiSelect, contiguous, markerColor, tolerance, selectedFeatures, selectionBounds } = pluginState
   const { eventBus } = services
-  const lastEmittedSelectionChange = useRef(null)
   const layerConfigMap = buildLayerConfigMap(dataLayers)
 
   const handleInteraction = useCallback(({ point, coords }) => {
-    const allFeatures = getFeaturesAtPoint(mapProvider, point)
+    const allFeatures = getFeaturesAtPoint(mapProvider, point, { radius: tolerance })
     const hasDataLayers = dataLayers.length > 0
 
-    const canMatchFeature = hasDataLayers && (interactionMode === 'select' || interactionMode === 'auto')
-    const match = canMatchFeature ? findMatchingFeature(allFeatures, layerConfigMap) : null
-
-    if (match) {
-      markers.remove('location')
-      const { feature, config } = match
-
-      // Using Turf not booleanDisjoint to test if the new feature is contiguous
-      let isNewFeatureContiguous = false
-      if (contiguous) {
-        isNewFeatureContiguous = selectedFeatures.some(sf => !booleanDisjoint(toTurfGeometry(sf), toTurfGeometry(feature)))
-      }
+    if (pluginState?.debug) {
+      console.log(`--- Features at ${coords} ---`, allFeatures)
+    }
 
-      const featureId = feature.properties?.[config.idProperty]
-
-      if (featureId) {
-        dispatch({
-          type: 'TOGGLE_SELECTED_FEATURES',
-          payload: {
-            featureId,
-            multiSelect,
-            layerId: config.layerId,
-            idProperty: config.idProperty,
-            properties: feature.properties,
-            geometry: feature.geometry,
-            replaceAll: contiguous && !isNewFeatureContiguous
-          },
-        })
-      }
+    const canMatch = hasDataLayers && (interactionMode === 'select' || interactionMode === 'auto')
+    const match = canMatch ? findMatchingFeature(allFeatures, layerConfigMap) : null
 
+    // 1. Handle Feature Match
+    if (match) {
+      processFeatureMatch(match)
       return
     }
 
-    // Marker mode
-    if (interactionMode === 'marker' || (interactionMode === 'auto' && hasDataLayers)) {
+    // 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 })
-
       eventBus.emit('interact:markerchange', { coords })
     }
-  }, [mapProvider, dataLayers, interactionMode, multiSelect, eventBus, dispatch, markers])
 
-  // Emit event when selectedFeatures change
-  useEffect(() => {
-    if (!selectionBounds || selectedFeatures === lastEmittedSelectionChange.current) {
-      return
-    }
+    // 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
 
-    eventBus.emit('interact:selectionchange', {
-      selectedFeatures,
-      selectionBounds
-    })
+      if (!featureId) {
+        return
+      }
 
-    lastEmittedSelectionChange.current = selectedFeatures
-  }, [selectedFeatures, selectionBounds])
+      dispatch({
+        type: 'TOGGLE_SELECTED_FEATURES',
+        payload: {
+          featureId,
+          multiSelect,
+          layerId: config.layerId,
+          idProperty: config.idProperty,
+          properties: feature.properties,
+          geometry: feature.geometry,
+          replaceAll: contiguous && !isNewContiguous
+        }
+      })
+    }
+  }, [
+    mapProvider,
+    dataLayers,
+    interactionMode,
+    multiSelect,
+    eventBus,
+    dispatch,
+    markers,
+    contiguous,
+    selectedFeatures,
+    layerConfigMap,
+    pluginState?.debug,
+    tolerance,
+    markerColor
+  ])
+
+  useSelectionChangeEmitter(eventBus, selectedFeatures, selectionBounds)
 
   return {
     handleInteraction

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

@@ -1,15 +1,16 @@
 import { renderHook, act } from '@testing-library/react'
 import { useInteractionHandlers } from './useInteractionHandlers.js'
 import * as featureQueries from '../utils/featureQueries.js'
-import booleanDisjoint from '@turf/boolean-disjoint'
+import { isContiguousWithAny } from '../utils/spatial.js'
 
 /* ------------------------------------------------------------------ */
 /* Mocks                                                              */
 /* ------------------------------------------------------------------ */
 
-jest.mock('@turf/boolean-disjoint', () => jest.fn())
-jest.mock('../utils/turfHelpers.js', () => ({
-  toTurfGeometry: jest.fn(g => g)
+jest.mock('../utils/spatial.js', () => ({
+  isContiguousWithAny: jest.fn(),
+  canSplitFeatures: jest.fn(() => false),
+  areAllContiguous: jest.fn(() => false)
 }))
 jest.mock('../utils/featureQueries.js', () => ({
   getFeaturesAtPoint: jest.fn(),
@@ -172,7 +173,7 @@ it('passes multiSelect flag through to dispatch', () => {
 
 describe('contiguous selection', () => {
   it('does NOT replace selection when feature is contiguous', () => {
-    booleanDisjoint.mockReturnValue(false) // overlapping
+    isContiguousWithAny.mockReturnValue(true) // contiguous
 
     const { result, deps } = setup({
       contiguous: true,
@@ -191,7 +192,7 @@ describe('contiguous selection', () => {
   })
 
   it('replaces selection when feature is NOT contiguous', () => {
-    booleanDisjoint.mockReturnValue(true) // disjoint
+    isContiguousWithAny.mockReturnValue(false) // disjoint
 
     const { result, deps } = setup({
       contiguous: true,
@@ -214,7 +215,7 @@ describe('contiguous selection', () => {
 
     click(result)
 
-    expect(booleanDisjoint).not.toHaveBeenCalled()
+    expect(isContiguousWithAny).not.toHaveBeenCalled()
   })
 })
 
@@ -255,6 +256,61 @@ it('emits selectionchange once when bounds exist', () => {
 
   expect(deps.services.eventBus.emit).toHaveBeenCalledWith(
     'interact:selectionchange',
-    deps.pluginState
+    expect.objectContaining({
+      selectedFeatures: deps.pluginState.selectedFeatures,
+      selectionBounds: deps.pluginState.selectionBounds,
+      canMerge: false,
+      canSplit: false
+    })
+  )
+})
+
+it('skips emission when selection remains empty after being cleared', () => {
+  const eventBus = { emit: jest.fn() }
+  
+  // 1. First render with a feature (prev is null, emission happens)
+  const { rerender } = renderHook(
+    ({ features }) => useInteractionHandlers({
+      mapState: { markers: {} },
+      pluginState: { selectedFeatures: features, selectionBounds: { b: 1 } },
+      services: { eventBus },
+      mapProvider: {}
+    }),
+    { initialProps: { features: [{ id: 'f1' }] } }
+  )
+  
+  expect(eventBus.emit).toHaveBeenCalledTimes(1)
+  eventBus.emit.mockClear()
+
+  // 2. Rerender with empty selection (prev is now [{id: 'f1'}], emission happens)
+  rerender({ features: [] })
+  expect(eventBus.emit).toHaveBeenCalledTimes(1)
+  eventBus.emit.mockClear()
+
+  // 3. Rerender with empty selection AGAIN 
+  // This triggers: prev !== null AND prev.length === 0
+  rerender({ features: [] })
+  
+  // Should skip emission because wasEmpty is true (via prev.length === 0) 
+  // and current features.length is 0
+  expect(eventBus.emit).not.toHaveBeenCalled()
+})
+
+/* ------------------------------------------------------------------ */
+/* Debug mode                                                         */
+/* ------------------------------------------------------------------ */
+
+it('logs features when debug mode is enabled', () => {
+  const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {})
+
+  const { result } = setup({ debug: true })
+
+  click(result)
+
+  expect(logSpy).toHaveBeenCalledWith(
+    expect.stringContaining('--- Features at'),
+    expect.any(Array)
   )
+
+  logSpy.mockRestore()
 })

package/plugins/interact/src/interact.scss

@@ -21,4 +21,10 @@
 .im-o-app--mobile .im-c-mark-location .im-c-map-button {
     flex: 1 1 auto;
     min-width: fit-content;
+}
+
+// Position touch select button
+.im-c-button-wrapper--select-at-target {
+    position: absolute;
+    bottom: calc(100% + var(--primary-gap));
 }

package/plugins/interact/src/reducer.js

@@ -21,7 +21,9 @@ const enable = (state, payload) => {
 const disable = (state) => {
   return {
     ...state,
-    enabled: false
+    enabled: false,
+    selectedFeatures: [],
+    selectionBounds: null
   }
 }
 
@@ -31,44 +33,40 @@ const disable = (state) => {
  */
 const toggleSelectedFeatures = (state, payload) => {
   const { featureId, multiSelect, layerId, idProperty, addToExisting = true, replaceAll = false, properties, geometry } = payload
-  const selected = Array.isArray(state.selectedFeatures) ? [...state.selectedFeatures] : []
-
-  const existingIndex = selected.findIndex(
+  const currentSelected = Array.isArray(state.selectedFeatures) ? state.selectedFeatures : []
+  
+  const existingIndex = currentSelected.findIndex(
     f => f.featureId === featureId && f.layerId === layerId
   )
 
-  // Handle explicit unselect
+  // 1. Handle explicit unselect
   if (addToExisting === false) {
-    if (existingIndex !== -1) {
-      selected.splice(existingIndex, 1) // remove the feature
-    }
-    return { ...state, selectedFeatures: selected }
+    const filtered = currentSelected.filter((_, i) => i !== existingIndex)
+    return { ...state, selectedFeatures: filtered, selectionBounds: null }
   }
 
-  // Replace all selected features if flag is true
-  if (replaceAll) {
-    return {
-      ...state,
-      selectedFeatures: [{ featureId, layerId, idProperty, properties, geometry }]
-    }
-  }
+  // Define the feature object once to avoid repetition
+  const featureObj = { featureId, layerId, idProperty, properties, geometry }
+  let nextSelected
 
-  // Multi-select mode (add to selection)
-  if (multiSelect) {
+  // 2. Determine New State 
+  // We combine 'replaceAll' and 'single-select' because they share the same logic
+  if (multiSelect && !replaceAll) {
+    const selectedCopy = [...currentSelected]
     if (existingIndex === -1) {
-      selected.push({ featureId, layerId, idProperty, properties, geometry })
+      selectedCopy.push(featureObj)
     } else {
-      // optional: could also remove existing on toggle
-      selected.splice(existingIndex, 1)
+      selectedCopy.splice(existingIndex, 1)
     }
-    return { ...state, selectedFeatures: selected }
+    nextSelected = selectedCopy
+  } else {
+    // Both 'replaceAll' and single-select mode logic:
+    // If same feature is already the only one, toggle off; otherwise return just this feature.
+    const isSameSingle = existingIndex !== -1 && currentSelected.length === 1
+    nextSelected = isSameSingle ? [] : [featureObj]
   }
 
-  // Single-select mode
-  const isSameSingle = existingIndex !== -1 && selected.length === 1
-  const newSelected = isSameSingle ? [] : [{ featureId, layerId, idProperty, properties, geometry }]
-
-  return { ...state, selectedFeatures: newSelected }
+  return { ...state, selectedFeatures: nextSelected, selectionBounds: null }
 }
 
 // Update bounds (called from useEffect after map provider calculates them)

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

@@ -28,13 +28,15 @@ describe('ENABLE/DISABLE actions', () => {
     expect(result).not.toBe(state)
   })
 
-  it('DISABLE sets enabled to false but preserves other state', () => {
-    const state = { ...initialState, enabled: true, dataLayers: [1], markerColor: 'red' }
+  it('DISABLE sets enabled to false, clears selection, and preserves other state', () => {
+    const state = { ...initialState, enabled: true, dataLayers: [1], markerColor: 'red', selectedFeatures: [{ featureId: 'f1' }], selectionBounds: [0, 0, 1, 1] }
     const result = actions.DISABLE(state)
 
     expect(result.enabled).toBe(false)
     expect(result.dataLayers).toEqual([1])
     expect(result.markerColor).toBe('red')
+    expect(result.selectedFeatures).toEqual([])
+    expect(result.selectionBounds).toBeNull()
     expect(result).not.toBe(state)
   })
 })
@@ -50,7 +52,7 @@ describe('TOGGLE_SELECTED_FEATURES action', () => {
   })
 
   it('handles single-select, multi-select, add/remove, and replaceAll', () => {
-    let state = { ...initialState }
+    let state = { ...initialState, selectionBounds: { sw: [0, 0], ne: [1, 1] } }
 
     // Single-select: add
     state = actions.TOGGLE_SELECTED_FEATURES(state, createFeature('f1'))
@@ -60,22 +62,33 @@ describe('TOGGLE_SELECTED_FEATURES action', () => {
     state = actions.TOGGLE_SELECTED_FEATURES(state, createFeature('f2'))
     expect(state.selectedFeatures[0].featureId).toBe('f2')
 
-    // Toggle off same
+    // Toggle off same - clears bounds
     state = actions.TOGGLE_SELECTED_FEATURES(state, createFeature('f2'))
     expect(state.selectedFeatures).toHaveLength(0)
+    expect(state.selectionBounds).toBeNull()
 
     // Multi-select: add multiple
+    state = { ...state, selectionBounds: { sw: [0, 0], ne: [1, 1] } }
     state = actions.TOGGLE_SELECTED_FEATURES(state, { ...createFeature('f1'), multiSelect: true })
     state = actions.TOGGLE_SELECTED_FEATURES(state, { ...createFeature('f2'), multiSelect: true })
     expect(state.selectedFeatures.map(f => f.featureId)).toEqual(['f1', 'f2'])
 
-    // Multi-select: remove
+    // Multi-select: remove (not last) - clears bounds for recalculation
     state = actions.TOGGLE_SELECTED_FEATURES(state, { ...createFeature('f1'), multiSelect: true })
     expect(state.selectedFeatures.map(f => f.featureId)).toEqual(['f2'])
+    expect(state.selectionBounds).toBeNull()
+
+    // Multi-select: remove last - clears bounds
+    state = actions.TOGGLE_SELECTED_FEATURES(state, { ...createFeature('f2'), multiSelect: true })
+    expect(state.selectedFeatures).toHaveLength(0)
+    expect(state.selectionBounds).toBeNull()
 
-    // addToExisting false removes only the feature
+    // addToExisting false removes feature - clears bounds when empty
+    state = { ...state, selectionBounds: { sw: [0, 0], ne: [1, 1] } }
+    state = actions.TOGGLE_SELECTED_FEATURES(state, { ...createFeature('f2'), multiSelect: true })
     state = actions.TOGGLE_SELECTED_FEATURES(state, { ...createFeature('f2'), addToExisting: false })
     expect(state.selectedFeatures).toHaveLength(0)
+    expect(state.selectionBounds).toBeNull()
 
     // replaceAll replaces everything
     state = actions.TOGGLE_SELECTED_FEATURES(state, { ...createFeature('f3'), replaceAll: true })

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

@@ -6,9 +6,9 @@ export const buildLayerConfigMap = dataLayers => {
   return map
 }
 
-export const getFeaturesAtPoint = (mapProvider, point) => {
+export const getFeaturesAtPoint = (mapProvider, point, options) => {
   try {
-    return mapProvider?.getFeaturesAtPoint(point) || []
+    return mapProvider?.getFeaturesAtPoint(point, options) || []
   } catch (err) {
     console.warn('Feature query failed:', err)
     return []