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

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

@@ -0,0 +1,97 @@
+import { render } from '@testing-library/react'
+import { InteractInit } from './InteractInit.jsx'
+import { useInteractionHandlers } from './hooks/useInteractionHandlers.js'
+import { useHighlightSync } from './hooks/useHighlightSync.js'
+import { attachEvents } from './events.js'
+
+jest.mock('./hooks/useInteractionHandlers.js')
+jest.mock('./hooks/useHighlightSync.js')
+jest.mock('./events.js')
+
+describe('InteractInit', () => {
+  let props
+  let handleInteractionMock
+  let cleanupMock
+
+  beforeEach(() => {
+    handleInteractionMock = jest.fn()
+    cleanupMock = jest.fn()
+
+    useInteractionHandlers.mockReturnValue({ handleInteraction: handleInteractionMock })
+    useHighlightSync.mockReturnValue(undefined)
+    attachEvents.mockReturnValue(cleanupMock)
+
+    props = {
+      appState: { interfaceType: 'mouse' },
+      mapState: { crossHair: { fixAtCenter: jest.fn(), hide: jest.fn() }, mapStyle: {} },
+      services: { events: {}, eventBus: {}, closeApp: jest.fn() },
+      buttonConfig: {},
+      mapProvider: {},
+      pluginState: { dispatch: jest.fn(), enabled: true, selectedFeatures: [], selectionBounds: {} }
+    }
+  })
+
+  it('calls useInteractionHandlers with correct arguments', () => {
+    render(<InteractInit {...props} />)
+    expect(useInteractionHandlers).toHaveBeenCalledWith(expect.objectContaining({
+      appState: props.appState,
+      mapState: props.mapState,
+      pluginState: props.pluginState,
+      services: props.services,
+      mapProvider: props.mapProvider
+    }))
+  })
+
+  it('calls useHighlightSync with correct arguments', () => {
+    render(<InteractInit {...props} />)
+    expect(useHighlightSync).toHaveBeenCalledWith(expect.objectContaining({
+      mapProvider: props.mapProvider,
+      mapStyle: props.mapState.mapStyle,
+      pluginState: props.pluginState,
+      selectedFeatures: props.pluginState.selectedFeatures,
+      dispatch: props.pluginState.dispatch,
+      events: props.services.events,
+      eventBus: props.services.eventBus
+    }))
+  })
+
+  it('fixes or hides crossHair based on interfaceType and enabled', () => {
+    // enabled true + non-touch = hide
+    render(<InteractInit {...props} />)
+    expect(props.mapState.crossHair.hide).toHaveBeenCalled()
+    expect(props.mapState.crossHair.fixAtCenter).not.toHaveBeenCalled()
+
+    // touch interface
+    props.appState.interfaceType = 'touch'
+    render(<InteractInit {...props} />)
+    expect(props.mapState.crossHair.fixAtCenter).toHaveBeenCalled()
+  })
+
+  it('attaches events and returns cleanup', () => {
+    const { unmount } = render(<InteractInit {...props} />)
+    expect(attachEvents).toHaveBeenCalledWith(expect.objectContaining({
+      handleInteraction: handleInteractionMock,
+      appState: props.appState,
+      pluginState: props.pluginState,
+      mapState: props.mapState,
+      buttonConfig: props.buttonConfig,
+      events: props.services.events,
+      eventBus: props.services.eventBus,
+      closeApp: props.services.closeApp
+    }))
+
+    // simulate unmount
+    unmount()
+    expect(cleanupMock).toHaveBeenCalled()
+  })
+
+  it('does not attach events if plugin not enabled', () => {
+    const disabledProps = {
+      ...props,
+      pluginState: { ...props.pluginState, enabled: false } // fresh object
+    }
+    attachEvents.mockClear() // ensure previous calls don't interfere
+    render(<InteractInit {...disabledProps} />)
+    expect(attachEvents).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,18 @@
+import { clear } from './clear.js'
+
+describe('clear', () => {
+  it('clears selected features and removes location marker', () => {
+    const dispatch = jest.fn()
+    const remove = jest.fn()
+
+    clear({
+      pluginState: { dispatch },
+      mapState: { markers: { remove } }
+    })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'CLEAR_SELECTED_FEATURES'
+    })
+    expect(remove).toHaveBeenCalledWith('location')
+  })
+})

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

@@ -0,0 +1,12 @@
+import { disable } from './disable.js'
+
+describe('disable', () => {
+  it('dispatches DISABLE action once without payload', () => {
+    const dispatch = jest.fn()
+
+    disable({ pluginState: { dispatch } })
+
+    expect(dispatch).toHaveBeenCalledTimes(1)
+    expect(dispatch).toHaveBeenCalledWith({ type: 'DISABLE' })
+  })
+})

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

@@ -0,0 +1,48 @@
+import { enable } from './enable.js'
+import { DEFAULTS } from '../defaults.js'
+
+describe('enable', () => {
+  let dispatch
+
+  beforeEach(() => {
+    dispatch = jest.fn()
+  })
+
+  it('dispatches ENABLE with merged payload correctly', () => {
+    const pluginConfig = { markerColor: 'blue' }
+    const options = { interactionMode: 'select', markerColor: 'green', dataLayers: [{ layerId: 'test' }] }
+
+    enable({ pluginState: { dispatch }, pluginConfig }, options)
+
+    expect(dispatch).toHaveBeenCalledTimes(1)
+    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
+      })
+    })
+  })
+
+  it('handles empty or undefined options', () => {
+    const pluginConfig = { markerColor: 'blue' }
+
+    enable({ pluginState: { dispatch }, pluginConfig }, {})
+    expect(dispatch).toHaveBeenCalledTimes(1)
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'ENABLE',
+      payload: expect.objectContaining({ ...DEFAULTS, ...pluginConfig })
+    })
+
+    dispatch.mockClear()
+
+    enable({ pluginState: { dispatch }, pluginConfig }, undefined)
+    expect(dispatch).toHaveBeenCalledTimes(1)
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'ENABLE',
+      payload: expect.objectContaining({ ...DEFAULTS, ...pluginConfig })
+    })
+  })
+})

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

@@ -0,0 +1,33 @@
+import { selectFeature } from './selectFeature.js'
+
+describe('selectFeature', () => {
+  it('emits interact:selectFeature with correct payload', () => {
+    const emit = jest.fn()
+    const services = { eventBus: { emit } }
+
+    // Test with all params
+    selectFeature(
+      { services },
+      { featureId: 'f1', layerId: 'layer-abc', idProperty: 'objectId' }
+    )
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:selectFeature', {
+      featureId: 'f1',
+      layerId: 'layer-abc',
+      idProperty: 'objectId'
+    })
+
+    emit.mockClear()
+
+    // Test missing optional params
+    selectFeature({ services }, { featureId: 'f2' })
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:selectFeature', {
+      featureId: 'f2',
+      layerId: undefined,
+      idProperty: undefined
+    })
+  })
+})

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

@@ -0,0 +1,33 @@
+import { unselectFeature } from './unselectFeature.js'
+
+describe('unselectFeature', () => {
+  it('emits interact:unselectFeature with correct payload', () => {
+    const emit = jest.fn()
+    const services = { eventBus: { emit } }
+
+    // Test with all params
+    unselectFeature(
+      { services },
+      { featureId: 'f1', layerId: 'layer-abc', idProperty: 'objectId' }
+    )
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:unselectFeature', {
+      featureId: 'f1',
+      layerId: 'layer-abc',
+      idProperty: 'objectId'
+    })
+
+    emit.mockClear()
+
+    // Test missing optional params
+    unselectFeature({ services }, { featureId: 'f2' })
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:unselectFeature', {
+      featureId: 'f2',
+      layerId: undefined,
+      idProperty: undefined
+    })
+  })
+})

package/plugins/interact/src/defaults.js

@@ -1,6 +1,7 @@
 export const DEFAULTS = {
   interactionMode: 'marker',
   multiSelect: false,
+  contiguous: false,
   markerColor: 'rgba(212,53,28,1)',
   selectedStroke: 'rgba(212,53,28,1)',
   selectedFill: 'rgba(255, 0, 0, 0.1)',

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

@@ -0,0 +1,151 @@
+import { attachEvents } from './events.js'
+
+describe('attachEvents', () => {
+  let createParams, cleanup
+
+  beforeEach(() => {
+    // factory function to create fresh params for each test
+    createParams = () => ({
+      appState: { layoutRefs: { viewportRef: { current: document.body } }, disabledButtons: new Set() },
+      mapState: {
+        markers: { remove: jest.fn(), getMarker: jest.fn(() => null) },
+        crossHair: { getDetail: jest.fn(() => ({ point: { x: 0, y: 0 }, coords: [0,0] })) }
+      },
+      pluginState: { dispatch: jest.fn(), selectionBounds: null, selectedFeatures: [], closeOnAction: true, multiSelect: false },
+      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?.())
+
+  it('keyboard Enter triggers only on viewport', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const keydown = new KeyboardEvent('keydown', { key: 'Enter' })
+    Object.defineProperty(keydown, 'target', { value: document.body })
+    document.dispatchEvent(keydown)
+
+    const keyup = new KeyboardEvent('keyup', { key: 'Enter' })
+    Object.defineProperty(keyup, 'target', { value: document.body })
+    document.dispatchEvent(keyup)
+
+    expect(params.handleInteraction).toHaveBeenCalled()
+  })
+
+  it('ignores Enter outside viewport or other keys', () => {
+    const params = createParams()
+    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)
+    let ku = new KeyboardEvent('keyup', { key: 'Enter' })
+    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)
+    ku = new KeyboardEvent('keyup', { key: 'Space' })
+    Object.defineProperty(ku, 'target', { value: document.body })
+    document.dispatchEvent(ku)
+
+    expect(params.handleInteraction).not.toHaveBeenCalled()
+  })
+
+  it('map click triggers interaction', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const handler = params.eventBus.on.mock.calls.find(c => c[0]==='map:click')[1]
+    const clickData = { point:{x:1,y:2}, coords:[3,4] }
+    handler(clickData)
+
+    expect(params.handleInteraction).toHaveBeenCalledWith(clickData)
+  })
+
+  it('selectAtTarget triggers crosshair interaction', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const crossDetail = { point:{x:1,y:2}, coords:[3,4] }
+    params.mapState.crossHair.getDetail.mockReturnValue(crossDetail)
+
+    params.buttonConfig.selectAtTarget.onClick()
+    expect(params.handleInteraction).toHaveBeenCalledWith(crossDetail)
+  })
+
+  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.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', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    // closeOnAction = true
+    params.buttonConfig.selectCancel.onClick()
+    expect(params.closeApp).toHaveBeenCalled()
+
+    // cover closeOnAction = false
+    cleanup()
+    const params2 = createParams()
+    cleanup = attachEvents(params2)
+    params2.pluginState.closeOnAction = false
+    params2.buttonConfig.selectCancel.onClick()
+    expect(params2.closeApp).not.toHaveBeenCalled()
+  })
+
+  it('does not emit or closeApp if selectDone button is disabled', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    params.appState.disabledButtons.add('selectDone')
+    params.buttonConfig.selectDone.onClick()
+
+    expect(params.eventBus.emit).not.toHaveBeenCalled()
+    expect(params.closeApp).not.toHaveBeenCalled()
+  })
+
+  it('programmatic select/unselect dispatches and removes location', () => {
+    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)
+  })
+
+  it('cleanup removes all handlers', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+    cleanup()
+    Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
+  })
+})

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

@@ -0,0 +1,212 @@
+import { renderHook, act } from '@testing-library/react'
+import { useHighlightSync } from './useHighlightSync.js'
+import { buildStylesMap } from '../utils/buildStylesMap.js'
+
+jest.mock('../utils/buildStylesMap.js', () => ({
+  buildStylesMap: jest.fn(() => ({ layer1: { stroke: 'red', fill: 'blue' } }))
+}))
+
+describe('useHighlightSync', () => {
+  let mockDeps
+  let capturedEventHandler
+
+  const render = (overrides = {}) =>
+    renderHook(() => useHighlightSync({ ...mockDeps, ...overrides }))
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    capturedEventHandler = null
+
+    mockDeps = {
+      mapProvider: {
+        updateHighlightedFeatures: jest.fn(() => ({ sw: [0, 0], ne: [1, 1] }))
+      },
+      mapStyle: { id: 'default-style' },
+      pluginState: {
+        dataLayers: [{ layerId: 'layer1' }]
+      },
+      selectedFeatures: [],
+      dispatch: jest.fn(),
+      events: { MAP_DATA_CHANGE: 'map:datachange' },
+      eventBus: {
+        on: jest.fn((event, handler) => {
+          if (event === 'map:datachange') {
+            capturedEventHandler = handler
+          }
+        }),
+        off: jest.fn()
+      }
+    }
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Highlighting                                                       */
+  /* ------------------------------------------------------------------ */
+
+  it('updates map highlights and dispatches bounds', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      mockDeps.selectedFeatures,
+      expect.any(Object)
+    )
+
+    expect(mockDeps.dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SELECTED_BOUNDS',
+      payload: { sw: [0, 0], ne: [1, 1] }
+    })
+  })
+
+  it('dispatches null bounds when provider returns null', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+    mockDeps.mapProvider.updateHighlightedFeatures.mockReturnValue(null)
+
+    render()
+
+    expect(mockDeps.dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SELECTED_BOUNDS',
+      payload: null
+    })
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Styles memoization                                                 */
+  /* ------------------------------------------------------------------ */
+
+  it('rebuilds styles when mapStyle changes', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    const { rerender } = renderHook(
+      ({ mapStyle }) => useHighlightSync({ ...mockDeps, mapStyle }),
+      { initialProps: { mapStyle: { id: 'light' } } }
+    )
+
+    buildStylesMap.mockClear()
+
+    rerender({ mapStyle: { id: 'satellite' } })
+
+    expect(buildStylesMap).toHaveBeenCalledWith(
+      expect.anything(),
+      { id: 'satellite' }
+    )
+  })
+
+  it('rebuilds styles when dataLayers change', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    const { rerender } = renderHook(
+      ({ dataLayers }) =>
+        useHighlightSync({
+          ...mockDeps,
+          pluginState: { dataLayers }
+        }),
+      { initialProps: { dataLayers: [{ layerId: 'layer1' }] } }
+    )
+
+    buildStylesMap.mockClear()
+
+    rerender({ dataLayers: [{ layerId: 'layer1' }, { layerId: 'layer2' }] })
+
+    expect(buildStylesMap).toHaveBeenCalled()
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Map data change events                                             */
+  /* ------------------------------------------------------------------ */
+
+  it('refreshes highlights on MAP_DATA_CHANGE', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    act(() => capturedEventHandler())
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalled()
+  })
+
+  it('unsubscribes on unmount', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    const { unmount } = render()
+
+    unmount()
+
+    expect(mockDeps.eventBus.off).toHaveBeenCalledWith(
+      'map:datachange',
+      expect.any(Function)
+    )
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Guards                                                            */
+  /* ------------------------------------------------------------------ */
+
+  it('does nothing when mapProvider is null', () => {
+    mockDeps.mapProvider = null
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    render()
+
+    expect(mockDeps.dispatch).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when selectedFeatures is null', () => {
+    mockDeps.selectedFeatures = null
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when mapStyle is null', () => {
+    mockDeps.mapStyle = null
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).not.toHaveBeenCalled()
+    expect(buildStylesMap).not.toHaveBeenCalled()
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Selection updates                                                  */
+  /* ------------------------------------------------------------------ */
+
+  it('updates highlights when selection changes', () => {
+    const { rerender } = renderHook(
+      ({ selectedFeatures }) =>
+        useHighlightSync({ ...mockDeps, selectedFeatures }),
+      { initialProps: { selectedFeatures: [{ featureId: 'F1' }] } }
+    )
+
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    rerender({ selectedFeatures: [{ featureId: 'F1' }, { featureId: 'F2' }] })
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      [{ featureId: 'F1' }, { featureId: 'F2' }],
+      expect.anything()
+    )
+  })
+
+  it('clears highlights when selection becomes empty', () => {
+    const { rerender } = renderHook(
+      ({ selectedFeatures }) =>
+        useHighlightSync({ ...mockDeps, selectedFeatures }),
+      { initialProps: { selectedFeatures: [{ featureId: 'F1' }] } }
+    )
+
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    rerender({ selectedFeatures: [] })
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      [],
+      expect.anything()
+    )
+  })
+})

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

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
+import booleanDisjoint from '@turf/boolean-disjoint'
+import { toTurfGeometry } from '../utils/turfHelpers.js'
 import { getFeaturesAtPoint, findMatchingFeature, buildLayerConfigMap } from '../utils/featureQueries.js'
 
 export const useInteractionHandlers = ({
@@ -8,7 +10,7 @@ export const useInteractionHandlers = ({
   mapProvider,
 }) => {
   const { markers } = mapState
-  const { dispatch, dataLayers, interactionMode, multiSelect, markerColor, selectedFeatures, selectionBounds } = pluginState
+  const { dispatch, dataLayers, interactionMode, multiSelect, contiguous, markerColor, selectedFeatures, selectionBounds } = pluginState
   const { eventBus } = services
   const lastEmittedSelectionChange = useRef(null)
   const layerConfigMap = buildLayerConfigMap(dataLayers)
@@ -17,15 +19,19 @@ export const useInteractionHandlers = ({
     const allFeatures = getFeaturesAtPoint(mapProvider, point)
     const hasDataLayers = dataLayers.length > 0
 
-    const match = hasDataLayers &&
-      (interactionMode === 'select' || interactionMode === 'auto')
-        ? findMatchingFeature(allFeatures, layerConfigMap)
-        : null
+    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)))
+      }
+
       const featureId = feature.properties?.[config.idProperty]
 
       if (featureId) {
@@ -37,7 +43,8 @@ export const useInteractionHandlers = ({
             layerId: config.layerId,
             idProperty: config.idProperty,
             properties: feature.properties,
-            geometry: feature.geometry
+            geometry: feature.geometry,
+            replaceAll: contiguous && !isNewFeatureContiguous
           },
         })
       }