@defra/interactive-map 0.0.37-alpha → 0.0.38-alpha

package/plugins/draw/src/adapters/maplibre/modes/drawMode/undoHandlers.js

@@ -0,0 +1,193 @@
+/**
+ * Undo handling for the shared draw mode: pushing draw_vertex operations, undoing the
+ * last placed vertex, reinitialising a feature, and the rubber-band update that follows.
+ * Part of createDrawMode.
+ */
+
+// Undo-stack and event wiring: pushing operations and reacting to undo triggers.
+const createUndoStackHandlers = ({ geometryType, getFeature }) => ({
+  /**
+   * Push an undo operation for the last added vertex
+   */
+  pushDrawUndo (state) {
+    const undoStack = this.map._undoStack
+    // Don't push during undo operations
+    if (!undoStack || this.map._undoInProgress) {
+      return
+    }
+    undoStack.push({
+      type: 'draw_vertex',
+      geometryType,
+      featureId: getFeature(state).id
+    })
+  },
+
+  /**
+   * Handle the draw.undo event (fired by the undo button via the adapter). Pops the
+   * undo stack itself so it works regardless of whether the caller passes an operation.
+   */
+  onUndo (state) {
+    const undoStack = this.map._undoStack
+    if (!undoStack || undoStack.length === 0) {
+      return
+    }
+    const operation = undoStack.pop()
+    if (operation?.type === 'draw_vertex') {
+      // Prevent click interference during undo
+      this.map._undoInProgress = true
+      setTimeout(() => { this.map._undoInProgress = false }, 100)
+      this.undoVertex(state)
+      // An undo commits a vertex removal, so it must re-validate like any other
+      // commit — otherwise the Done gate goes stale.
+      this.emitDrawValidation(state, 'commit-delete')
+    }
+  },
+
+  _handleUndoKeydown (state, e) {
+    const tag = document.activeElement?.tagName
+    if (tag === 'INPUT' || tag === 'TEXTAREA') {
+      return
+    }
+    e.preventDefault()
+    e.stopPropagation()
+    this.onUndo(state)
+  }
+})
+
+// Vertex-level undo: removing the last vertex and keeping the rubber band in sync.
+const createVertexUndoHandlers = ({ ParentMode, geometryType, getCoords, getFeature, RUBBER_BAND_OFFSET }) => ({
+  /**
+   * Undo the last added vertex during drawing
+   */
+  undoVertex (state) {
+    const feature = getFeature(state)
+    const coords = getCoords(feature)
+
+    if (coords.length < 2) {
+      return false
+    }
+
+    // Undoing last vertex requires reinitializing the feature
+    if (coords.length === 2) {
+      return this._reinitializeFeature(state, feature)
+    }
+
+    this._removeLastVertex(state, feature, coords)
+    return true
+  },
+
+  /**
+   * Remove the last committed vertex and update rubber band
+   */
+  _removeLastVertex (state, feature, coords) {
+    // Structure during drawing: [v1, v2, ..., vN, rubber_band]
+    const ring = geometryType === 'Polygon' ? feature.coordinates[0] : coords
+    ring.splice(-RUBBER_BAND_OFFSET, 1)
+
+    // Snap rubber band to new last vertex position. undoVertex only calls here with
+    // 3+ coords, so after the splice the ring always has a preceding vertex.
+    ring[ring.length - 1] = [...ring[ring.length - 2]]
+
+    // Keep parent mode's vertex counter in sync (min 1 for rubber band)
+    state.currentVertexPosition = Math.max(1, state.currentVertexPosition - 1)
+
+    this._ctx.store.render()
+    this._updateRubberBand(state, getCoords(feature))
+  },
+
+  /**
+   * Update rubber band position based on interface type
+   */
+  _updateRubberBand (state, coords) {
+    if (['touch', 'keyboard'].includes(state.interfaceType)) {
+      // Touch/keyboard: move to map center for add point to work
+      this._simulateMouse('mousemove', ParentMode.onMouseMove, state)
+      this._ctx.store.render()
+    } else {
+      // Mouse: keep rubber band at current position. After a vertex removal the
+      // rubber band index always resolves to a real coordinate.
+      const rubberBandIndex = geometryType === 'Polygon' ? coords.length - 2 : coords.length - 1
+      const rubberBandPos = coords[rubberBandIndex]
+      const lngLat = { lng: rubberBandPos[0], lat: rubberBandPos[1] }
+      const point = this.map.project(lngLat)
+      ParentMode.onMouseMove.call(this, state, {
+        lngLat,
+        point,
+        originalEvent: new MouseEvent('mousemove', { clientX: point.x, clientY: point.y })
+      })
+      this._ctx.store.render()
+      // Parity with _simulateMouse: an undo can add/remove a crossing, so the live
+      // invalid-stroke check must see the new displayed geometry immediately.
+      this.map.fire('draw.geometrychange', state.polygon || state.line)
+    }
+    this.dispatchVertexChange(coords)
+  }
+})
+
+// Reinitialising back to zero vertices: reinitialize Polygon in place, restart LineString.
+const createFeatureReinitHandlers = ({ ParentMode, featureProp, geometryType }) => ({
+  /**
+   * Reinitialize feature when undoing to 0 vertices
+   */
+  _reinitializeFeature (state, feature) {
+    const featureId = feature.id
+    this._ctx.store.delete([featureId])
+
+    // LineString: restart the draw mode with fresh state but same feature ID
+    if (geometryType === 'LineString') {
+      return this._restartLineStringDraw(state, featureId)
+    }
+
+    // Polygon: reinitialize in place
+    const center = this.map.getCenter()
+    const initialCoords = [[center.lng, center.lat], [center.lng, center.lat]]
+    const newFeature = this.newFeature({
+      type: 'Feature',
+      properties: state.properties || {},
+      geometry: {
+        type: geometryType,
+        coordinates: [initialCoords]
+      }
+    })
+    newFeature.id = featureId
+    this._ctx.store.add(newFeature)
+
+    state[featureProp] = newFeature
+    state.currentVertexPosition = 0
+
+    this._ctx.store.render()
+    this._simulateMouse('mousemove', ParentMode.onMouseMove, state)
+    this._ctx.store.render()
+
+    this.dispatchVertexChange(initialCoords)
+    return true
+  },
+
+  /**
+   * Restart the LineString draw mode with fresh state but the same feature ID
+   */
+  _restartLineStringDraw (state, featureId) {
+    const undoStack = this.map._undoStack
+    if (undoStack) {
+      undoStack.clear()
+    }
+    // Restart draw with same options (excludeFeatureIdFromSetup prevents "continue" mode)
+    this._ctx.api.changeMode('draw_line', {
+      featureId,
+      container: state.container,
+      interfaceType: state.interfaceType,
+      crossHair: state.crossHair,
+      vertexMarkerId: state.vertexMarkerId,
+      addVertexButtonId: state.addVertexButtonId,
+      getSnapEnabled: state.getSnapEnabled,
+      properties: state.properties
+    })
+    return true
+  }
+})
+
+export const createUndoHandlers = (deps) => ({
+  ...createUndoStackHandlers(deps),
+  ...createVertexUndoHandlers(deps),
+  ...createFeatureReinitHandlers(deps)
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/undoHandlers.test.js

@@ -0,0 +1,195 @@
+import { setup, clickAt, firedWith, DrawPolygonMode, DrawLineMode, CENTER } from './__helpers__/harness.js'
+
+describe('cmd/ctrl+z undo', () => {
+  const undoKey = (overrides = {}) => {
+    const e = new KeyboardEvent('keydown', { key: 'z', metaKey: true, ...overrides })
+    e.preventDefault = jest.fn()
+    e.stopPropagation = jest.fn()
+    return e
+  }
+
+  test('removes the last placed vertex without switching to keyboard interface', () => {
+    jest.useFakeTimers()
+    const { ctx, state, marker } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+
+    ctx.keydownHandler(undoKey())
+    expect(state.polygon.coordinates[0].map(([x]) => x)).toEqual([0, 10, 10])
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+    expect(state.interfaceType).toBe('mouse')
+    expect(marker.style.display).toBe('none')
+    expect(ctx.map._undoInProgress).toBe(true)
+    jest.advanceTimersByTime(100)
+    expect(ctx.map._undoInProgress).toBe(false)
+  })
+
+  test('mouse interface keeps the rubber band on the remaining last vertex', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+    ctx.keydownHandler(undoKey())
+    const ring = state.polygon.coordinates[0]
+    expect(ring[ring.length - 1]).toEqual(ring[ring.length - 2])
+  })
+
+  test('is ignored when typing in an input, when the stack is empty, or for other operations', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+
+    const input = document.createElement('input')
+    document.body.appendChild(input)
+    input.focus()
+    ctx.keydownHandler(undoKey())
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+    input.blur()
+
+    ctx.map._undoStack.clear()
+    ctx.keydownHandler(undoKey())
+    ctx.map._undoStack.push({ type: 'edit_vertex' })
+    ctx.keydownHandler(undoKey())
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+  })
+
+  test('cmd+shift+z is not treated as undo', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    ctx.keydownHandler(undoKey({ shiftKey: true }))
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+  })
+
+  test('ctrl+z (Windows/Linux) also undoes the last vertex', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+    ctx.keydownHandler(undoKey({ metaKey: false, ctrlKey: true }))
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+  })
+})
+
+describe('undo via draw.undo event and reinitialisation', () => {
+  test('draw.undo pops the stack and removes the last vertex; non-draw ops are ignored', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+    // A non-draw op on top of the stack is popped but not undone.
+    ctx.map._undoStack.push({ type: 'edit_vertex' })
+    ctx.map.fire('draw.undo')
+    expect(state.polygon.coordinates[0]).toHaveLength(4)
+    // The next op is a draw_vertex → the last vertex is removed.
+    ctx.map.fire('draw.undo')
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+  })
+
+  test('undo re-validates the committed shape (deferred, phase commit-delete)', () => {
+    jest.useFakeTimers()
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+    jest.runAllTimers()
+    ctx.map.fire.mockClear()
+    ctx.onUndo(state)
+    jest.runAllTimers()
+    expect(firedWith(ctx.map, 'draw.geometrychange').pop()).toEqual(expect.objectContaining({
+      phase: 'commit-delete',
+      feature: expect.any(Object)
+    }))
+    jest.useRealTimers()
+  })
+
+  test('keyboard interface moves the rubber band to center after undo', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+    ctx.undoVertex(state)
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([CENTER.lng, CENTER.lat])
+  })
+
+  test('undoVertex returns false with nothing placed', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    expect(ctx.undoVertex(state)).toBe(false)
+  })
+
+  test('undoing the only polygon vertex reinitialises the feature in place with the same id', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    const id = state.polygon.id
+    expect(ctx.undoVertex(state)).toBe(true)
+    expect(ctx._ctx.store.delete).toHaveBeenCalledWith([id])
+    expect(state.polygon.id).toBe(id)
+    expect(state.currentVertexPosition).toBe(0)
+    expect(firedWith(ctx.map, 'draw.vertexchange').pop()).toEqual({ numVertecies: 1 })
+  })
+
+  test('undoing the only line vertex restarts draw_line with the same feature id', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    ctx.doClick(state)
+    ctx.map._undoStack.push({ type: 'draw_vertex' })
+    expect(ctx.undoVertex(state)).toBe(true)
+    expect(ctx.map._undoStack.length).toBe(0)
+    expect(ctx._ctx.api.changeMode).toHaveBeenCalledWith('draw_line', expect.objectContaining({
+      featureId: state.line.id,
+      container: state.container,
+      properties: state.properties
+    }))
+  })
+
+  test('Escape (container keyUp) during keyboard drawing clears the undo stack and reinitialises', () => {
+    const { ctx, state, container } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    clickAt(ctx, state, 0, 0)
+    container.focus()
+    const id = state.polygon.id
+    ctx.onKeyUp(state, { key: 'Escape' })
+    expect(ctx.map._undoStack.length).toBe(0)
+    expect(state.polygon.id).toBe(id)
+  })
+
+  test('container keyUp defers to the parent mode when focus is elsewhere, and ignores focus inside the container', () => {
+    const { ctx, state, button, container } = setup(DrawPolygonMode)
+    ctx.onKeyUp(state, { key: 'Enter' }) // focus not on container → parent finishes on Enter
+    expect(ctx.changeMode).toHaveBeenCalledWith('simple_select', expect.anything())
+
+    button.focus()
+    ctx.changeMode.mockClear()
+    ctx.onKeyUp(state, { key: 'Enter' }) // focus on a child element → ignored
+    expect(ctx.changeMode).not.toHaveBeenCalled()
+
+    container.focus()
+    ctx.onKeyUp(state, { key: 'Escape' }) // non-keyboard Escape → handled by window keyup instead
+    expect(ctx._ctx.store.delete).not.toHaveBeenCalled()
+  })
+})
+
+describe('undo-stack and reinitialisation edge cases', () => {
+  test('placing a vertex with no undo stack does not throw and still places the vertex', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.map._undoStack = null
+    clickAt(ctx, state, 0, 0)
+    expect(state.polygon.coordinates[0][0]).toEqual([0, 0])
+  })
+
+  test('reinitialising a polygon without properties uses an empty properties object', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { properties: undefined })
+    clickAt(ctx, state, 0, 0)
+    expect(ctx.undoVertex(state)).toBe(true)
+    expect(state.polygon.properties).toEqual({})
+  })
+
+  test('restarting a line with no undo stack still changes mode', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    ctx.doClick(state)
+    ctx.map._undoStack = null
+    expect(ctx.undoVertex(state)).toBe(true)
+    expect(ctx._ctx.api.changeMode).toHaveBeenCalledWith('draw_line', expect.objectContaining({
+      featureId: state.line.id
+    }))
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/drawPolygonMode.js

@@ -0,0 +1,16 @@
+import MapboxDraw from '@mapbox/mapbox-gl-draw'
+import { isValidClick } from '../../../utils/spatial.js'
+import { createDrawMode } from './createDrawMode.js'
+
+// During drawing the ring is [v0...vN, rubber_band, v0_closing]; the last two are not placed vertices
+const RUBBER_BAND_AND_CLOSING = 2
+
+// Extend the built-in mode via the package's public API (MapboxDraw.modes) rather than a deep internal import
+export const DrawPolygonMode = createDrawMode(MapboxDraw.modes.draw_polygon, {
+  featureProp: 'polygon',
+  geometryType: 'Polygon',
+  getCoords: (feature) => feature.coordinates[0],
+  validateClick: (feature) => isValidClick(feature.coordinates),
+  // Display ring during drawing: [v0...vN, rubber_band, v0_closing]
+  getPlacedCoords: (geojson) => geojson.geometry.coordinates[0].slice(0, -RUBBER_BAND_AND_CLOSING)
+})

package/plugins/draw/src/adapters/maplibre/modes/drawPolygonMode.test.js

@@ -0,0 +1,27 @@
+import { setup, clickAt, DrawPolygonMode } from './drawMode/__helpers__/harness.js'
+
+const drawVertexMarkers = (ctx, state, geometry) => {
+  const display = jest.fn()
+  ctx.toDisplayFeatures(state, { type: 'Feature', properties: { id: state.polygon.id }, geometry }, display)
+  return display.mock.calls.map(([f]) => f)
+    .filter((f) => f.properties.meta === 'draw-vertex')
+    .map((m) => m.geometry.coordinates)
+}
+
+describe('DrawPolygonMode config', () => {
+  test('getCoords reads the polygon ring; validateClick (isValidClick) rejects a duplicate click', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    expect(state.polygon.coordinates[0].map(([x]) => x)).toEqual([0, 10, 10]) // v0, v1, rubber band
+    clickAt(ctx, state, 10, 0) // same spot → rejected by isValidClick
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+  })
+
+  test('getPlacedCoords marks every placed vertex, excluding the rubber band and closing point', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    // Display ring: [v0..vN, rubber_band, v0_closing] → placed = slice(0, -2)
+    const ring = [[0, 0], [10, 0], [10, 10], [5, 5], [0, 0]]
+    expect(drawVertexMarkers(ctx, state, { type: 'Polygon', coordinates: [ring] })).toEqual([[0, 0], [10, 0], [10, 10]])
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/__helpers__/harness.js

@@ -0,0 +1,107 @@
+import { EditVertexMode } from '../../editVertexMode.js'
+import { createUndoStack } from '../../../../../utils/undoStack.js'
+import PolygonFeature from '../../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/polygon.js'
+import LineStringFeature from '../../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/line_string.js'
+
+/**
+ * Shared test harness for the vertex-edit mode and its handler modules. Builds the real
+ * EditVertexMode (with the real DirectSelect parent and real mapbox-gl-draw feature
+ * classes) over test doubles for the map, store, api and DOM. Excluded from coverage.
+ */
+
+// Deterministic projection: lngLat <-> pixel is a x10 scale.
+const project = (p) => {
+  const [lng, lat] = Array.isArray(p) ? p : [p.lng, p.lat]
+  return { x: lng * 10, y: lat * 10 }
+}
+const unproject = ({ x, y }) => ({ lng: x / 10, lat: y / 10 })
+
+export const POLYGON = () => ({ type: 'Polygon', coordinates: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]] })
+export const LINE = () => ({ type: 'LineString', coordinates: [[0, 0], [10, 0], [10, 10]] })
+export const dragEvt = (lng, lat) => ({ originalEvent: { stopPropagation: jest.fn() }, lngLat: { lng, lat }, point: { x: lng * 10, y: lat * 10 } })
+export const svgTarget = (state) => ({ parentNode: state.touchVertexTarget })
+
+const contexts = []
+
+export const createHarness = (geometry = POLYGON(), setupOptions = {}) => {
+  const features = new Map()
+  const store = {
+    featureChanged: jest.fn(),
+    render: jest.fn(),
+    get: (id) => features.get(id)
+  }
+  const api = {
+    add: jest.fn((geojson) => {
+      const FeatureClass = geojson.geometry.type === 'Polygon' ? PolygonFeature : LineStringFeature
+      // Mirror Draw.add: re-create the feature so Polygon closing coords are normalised
+      features.set(geojson.id, new FeatureClass(_ctx, { ...geojson, id: geojson.id }))
+      return [geojson.id]
+    }),
+    changeMode: jest.fn(),
+    delete: jest.fn(),
+    trash: jest.fn()
+  }
+  const _ctx = { store, api, options: {} }
+
+  const FeatureClass = geometry.type === 'Polygon' ? PolygonFeature : LineStringFeature
+  const feature = new FeatureClass(_ctx, { type: 'Feature', id: 'feat-1', properties: {}, geometry })
+  features.set('feat-1', feature)
+
+  const listeners = {}
+  const map = {
+    _undoStack: createUndoStack(() => {}),
+    _snapInstance: null,
+    _lastEditFeatureId: null,
+    _drawEditContainer: null,
+    _editingFeatureId: null,
+    _drawCurrentMapStyle: { mapColorScheme: 'light' },
+    dragPan: { enable: jest.fn(), disable: jest.fn(), isEnabled: () => true },
+    doubleClickZoom: { enable: jest.fn(), disable: jest.fn() },
+    getSource: jest.fn(() => ({ setData: jest.fn() })),
+    getLayer: jest.fn(() => null),
+    setLayoutProperty: jest.fn(),
+    getCenter: () => ({ lng: 5, lat: 5 }),
+    project: jest.fn(project),
+    unproject: jest.fn(unproject),
+    fire: jest.fn(function (type, e) { (listeners[type] ?? []).forEach((h) => h(e)) }),
+    on: jest.fn((type, h) => { (listeners[type] ??= []).push(h) }),
+    off: jest.fn((type, h) => { listeners[type] = (listeners[type] ?? []).filter((x) => x !== h) })
+  }
+
+  const container = document.createElement('div')
+  container.tabIndex = 0
+  document.body.appendChild(container)
+
+  const ctx = {
+    map,
+    _ctx,
+    getFeature: (id) => features.get(id),
+    getSelected: jest.fn(() => [feature]),
+    setSelected: jest.fn(),
+    setSelectedCoordinates: jest.fn(),
+    clearSelectedCoordinates: jest.fn(),
+    setActionableState: jest.fn(),
+    updateUIClasses: jest.fn(),
+    fire: jest.fn()
+  }
+  Object.assign(ctx, EditVertexMode)
+
+  const options = {
+    container,
+    featureId: 'feat-1',
+    interfaceType: 'mouse',
+    deleteVertexButtonId: 'delete-vertex',
+    undoButtonId: 'undo-vertex',
+    isPanEnabled: true,
+    ...setupOptions
+  }
+  const state = ctx.onSetup(options)
+  contexts.push({ ctx, state })
+  return { ctx, state, feature, features, map, store, api, container, options }
+}
+
+afterEach(() => {
+  contexts.splice(0).forEach(({ ctx, state }) => { try { ctx.onStop(state) } catch { /* already stopped */ } })
+  document.body.innerHTML = ''
+  jest.useRealTimers()
+})

package/plugins/draw/src/adapters/maplibre/modes/editVertexMode/geometryHelpers.js

@@ -0,0 +1,139 @@
+/**
+ * Pure geometry helper functions for multi-ring/multi-part geometry support.
+ * These functions handle coordinate transformations between flat arrays and
+ * hierarchical GeoJSON structures for Polygon, MultiPolygon, LineString, and MultiLineString.
+ */
+
+/**
+ * Get flat coordinates array from feature for all geometry types.
+ * Flattens all rings/parts into a single array for unified vertex navigation.
+ *
+ * @param {Object} feature - GeoJSON geometry object
+ * @returns {Array<[number, number]>} Flat array of all coordinates
+ */
+export const getCoords = (feature) => {
+  if (!feature?.coordinates) {
+    return []
+  }
+  switch (feature.type) {
+    case 'LineString':
+      return feature.coordinates
+    case 'Polygon':
+      return feature.coordinates.flat(1)
+    case 'MultiLineString':
+      return feature.coordinates.flat(1)
+    case 'MultiPolygon':
+      return feature.coordinates.flat(2)
+    default:
+      return []
+  }
+}
+
+/**
+ * Get segment metadata for multi-ring/multi-part geometries.
+ * Each segment represents a ring (for Polygon) or part (for Multi*).
+ *
+ * @param {Object} feature - GeoJSON geometry object
+ * @returns {Array<{start: number, length: number, path: number[], closed: boolean}>}
+ *   Array of segment metadata objects where:
+ *   - start: Starting index in flat coordinates array
+ *   - length: Number of coordinates in this segment
+ *   - path: Hierarchical path indices to reach this segment in GeoJSON
+ *   - closed: Whether this segment is closed (true for Polygon rings)
+ */
+export const getRingSegments = (feature) => {
+  if (!feature?.coordinates) {
+    return []
+  }
+  const segments = []
+  let start = 0
+
+  switch (feature.type) {
+    case 'LineString':
+      segments.push({ start: 0, length: feature.coordinates.length, path: [], closed: false })
+      break
+    case 'Polygon':
+      feature.coordinates.forEach((ring, ringIdx) => {
+        segments.push({ start, length: ring.length, path: [ringIdx], closed: true })
+        start += ring.length
+      })
+      break
+    case 'MultiLineString':
+      feature.coordinates.forEach((line, lineIdx) => {
+        segments.push({ start, length: line.length, path: [lineIdx], closed: false })
+        start += line.length
+      })
+      break
+    case 'MultiPolygon':
+      feature.coordinates.forEach((polygon, polyIdx) => {
+        polygon.forEach((ring, ringIdx) => {
+          segments.push({ start, length: ring.length, path: [polyIdx, ringIdx], closed: true })
+          start += ring.length
+        })
+      })
+      break
+    default:
+      break
+  }
+
+  return segments
+}
+
+/**
+ * Find which segment a flat vertex index belongs to.
+ *
+ * @param {Array} segments - Array of segment metadata from getRingSegments
+ * @param {number} flatIdx - Flat vertex index
+ * @returns {{segment: Object, localIdx: number}|null}
+ *   Object with segment metadata and local index within that segment, or null if not found
+ */
+export const getSegmentForIndex = (segments, flatIdx) => {
+  for (const seg of segments) {
+    if (flatIdx >= seg.start && flatIdx < seg.start + seg.length) {
+      return { segment: seg, localIdx: flatIdx - seg.start }
+    }
+  }
+  return null
+}
+
+/**
+ * Get modifiable coordinate array at a specific hierarchical path.
+ * Returns a reference to the actual coordinate array in the GeoJSON structure.
+ *
+ * @param {Object} geojson - Full GeoJSON feature object
+ * @param {number[]} path - Hierarchical path indices (e.g., [0] for first ring, [1, 0] for second polygon's first ring)
+ * @returns {Array<[number, number]>} Reference to coordinate array at path
+ */
+export const getModifiableCoords = (geojson, path) => {
+  let coords = geojson.geometry.coordinates
+  for (const idx of path) {
+    coords = coords[idx]
+  }
+  return coords
+}
+
+/**
+ * Convert mapbox-gl-draw coord_path string to flat vertex index.
+ * coord_path format: "ringIdx.vertexIdx" for Polygon, "polyIdx.ringIdx.vertexIdx" for MultiPolygon, etc.
+ *
+ * @param {Object} feature - GeoJSON geometry object
+ * @param {string} coordPath - coord_path string from mapbox-gl-draw
+ * @returns {number} Flat vertex index in the unified coordinate array
+ */
+export const coordPathToFlatIndex = (feature, coordPath) => {
+  const parts = coordPath.split('.').map(Number)
+  const segments = getRingSegments(feature)
+
+  // Match coord_path to segment
+  for (const seg of segments) {
+    // Check if path matches (compare all but last element which is the local vertex index)
+    const pathMatches = seg.path.every((val, idx) => val === parts[idx])
+    if (pathMatches && parts.length === seg.path.length + 1) {
+      const localIdx = parts[parts.length - 1] // NOSONAR, .length greater borwser support
+      return seg.start + localIdx
+    }
+  }
+
+  // Fallback: just use the last number (works for simple geometries)
+  return parts[parts.length - 1] // NOSONAR, .length greater borwser support
+}