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

package/plugins/beta/draw-ml/src/modes/editVertex/geometryHelpers.js

@@ -0,0 +1,135 @@
+/**
+ * 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]
+      return seg.start + localIdx
+    }
+  }
+
+  // Fallback: just use the last number (works for simple geometries)
+  return parts[parts.length - 1]
+}

package/plugins/beta/draw-ml/src/modes/editVertex/helpers.js

@@ -0,0 +1,2 @@
+export const scalePoint = (point, scale) => ({ x: point.x * scale, y: point.y * scale })
+export const isOnSVG = (el) => el instanceof window.SVGElement || el.ownerSVGElement

package/plugins/beta/draw-ml/src/modes/editVertex/touchHandlers.js

@@ -0,0 +1,134 @@
+import {
+  getSnapInstance, isSnapEnabled, triggerSnapAtPoint, getSnapLngLat,
+  clearSnapState, clearSnapIndicator
+} from '../../utils/snapHelpers.js'
+import { coordPathToFlatIndex } from './geometryHelpers.js'
+import { isOnSVG } from './helpers.js'
+
+const touchVertexTarget = `
+  <svg width='48' height='48' viewBox='0 0 48 48' fill-rule='evenodd' style='display:none;position:absolute;top:50%;left:50%;margin:24px 0 0 -24px' class='touch-vertex-target' data-touch-vertex-target>
+    <circle cx='24' cy='24' r='24' fill='currentColor'/>
+    <path d="M37.543 25H34a1 1 0 1 1 0-2h3.629l-.836-.837a1 1 0 0 1 1.414-1.414l2.5 2.501A1 1 0 0 1 41 24a1 1 0 0 1-.487.858l-2.306 2.306a1 1 0 0 1-1.414-1.414l.75-.75zM23 10.414l-.793.793a1 1 0 0 1-1.414-1.414l2.5-2.5C23.481 7.105 23.734 7 24 7s.519.105.707.293l2.5 2.5a1 1 0 0 1-1.414 1.414L25 10.414V14a1 1 0 1 1-2 0v-3.586zM7 24a1 1 0 0 1 .293-.75l2.5-2.501a1 1 0 0 1 1.414 1.414l-.836.837H14a1 1 0 1 1 0 2h-3.543l.75.75a1 1 0 0 1-1.414 1.414l-2.306-2.306A1 1 0 0 1 7 24zm16.293 16.707l-2.5-2.5a1 1 0 0 1 1.414-1.414l.793.793V34a1 1 0 1 1 2 0v3.586l.793-.793a1 1 0 0 1 1.414 1.414l-2.5 2.5c-.188.188-.441.293-.707.293s-.519-.105-.707-.293zM24 20c2.208 0 4 1.792 4 4s-1.792 4-4 4-4-1.792-4-4 1.792-4 4-4z" fill="#fff"/>
+  </svg>
+`
+
+export const touchHandlers = {
+  addTouchVertexTarget(state) {
+    let el = state.container.querySelector('[data-touch-vertex-target]')
+    if (!el) {
+      state.container.insertAdjacentHTML('beforeend', touchVertexTarget)
+      el = state.container.querySelector('[data-touch-vertex-target]')
+    }
+    state.touchVertexTarget = el
+  },
+
+  updateTouchVertexTarget(state, point) {
+    if (point && state.interfaceType === 'touch' && state.selectedVertexIndex >= 0) {
+      Object.assign(state.touchVertexTarget.style, { display: 'block', top: `${point.y}px`, left: `${point.x}px` })
+    } else {
+      state.touchVertexTarget.style.display = 'none'
+    }
+  },
+
+  hideTouchVertexIndicator(state) {
+    state.touchVertexTarget.style.display = 'none'
+  },
+
+  onPointerevent(state, e) {
+    state.interfaceType = e.pointerType === 'touch' ? 'touch' : 'pointer'
+    state.isPanEnabled = true
+    if (e.pointerType === 'touch' && e.type === 'pointermove' && !isOnSVG(e.target.parentNode) && !state._ignorePointermoveDeselect) {
+      this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null, coordPath: null })
+    }
+  },
+
+  // Empty stubs required by DirectSelect
+  onTouchStart() {},
+  onTouchMove() {},
+  onTouchEnd() {},
+
+  onTouchend(state) {
+    clearSnapState(getSnapInstance(this.map))
+    if (state?.featureId) {
+      this.syncVertices(state)
+
+      // Push undo for the move if touch actually moved
+      if (state._touchMoved && state._moveStartPosition && state._moveStartIndex !== undefined) {
+        this.pushUndo({
+          type: 'move_vertex',
+          featureId: state.featureId,
+          vertexIndex: state._moveStartIndex,
+          previousPosition: state._moveStartPosition
+        })
+      }
+      state._moveStartPosition = null
+      state._moveStartIndex = undefined
+      state._touchMoved = false
+    }
+  },
+
+  onTap(state, e) {
+    // Hide snap indicator on any tap
+    const snap = getSnapInstance(this.map)
+    if (snap) {
+      clearSnapIndicator(snap, this.map)
+    }
+
+    const meta = e.featureTarget?.properties.meta
+    const coordPath = e.featureTarget?.properties.coord_path
+
+    if (meta === 'vertex') {
+      const feature = this.getFeature(state.featureId)
+      const idx = coordPathToFlatIndex(feature, coordPath)
+      this.changeMode(state, {
+        selectedVertexIndex: idx,
+        selectedVertexType: 'vertex',
+        coordPath
+      })
+    } else if (meta === 'midpoint') {
+      this.insertVertex({ ...state, selectedVertexIndex: this.getVertexIndexFromMidpoint(state, coordPath), selectedVertexType: 'midpoint' })
+    } else {
+      this.clickNoTarget(state)
+    }
+  },
+
+  onTouchstart(state, e) {
+    clearSnapState(getSnapInstance(this.map))
+    const vertex = state.vertecies?.[state.selectedVertexIndex]
+    if (!vertex || !isOnSVG(e.target.parentNode)) {
+      return
+    }
+
+    // Save starting position for undo
+    state._moveStartPosition = [...vertex]
+    state._moveStartIndex = state.selectedVertexIndex
+    state._touchMoved = false
+
+    const touch = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+    const style = window.getComputedStyle(state.touchVertexTarget)
+    state.deltaTarget = { x: touch.x - Number.parseFloat(style.left), y: touch.y - Number.parseFloat(style.top) }
+    const vertexPt = this.map.project(vertex)
+    state.deltaVertex = { x: (touch.x / state.scale) - vertexPt.x, y: (touch.y / state.scale) - vertexPt.y }
+  },
+
+  onTouchmove(state, e) {
+    if (state.selectedVertexIndex < 0 || !isOnSVG(e.target.parentNode)) {
+      return
+    }
+
+    state._touchMoved = true
+
+    const touch = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+    const screenPt = { x: (touch.x / state.scale) - state.deltaVertex.x, y: (touch.y / state.scale) - state.deltaVertex.y }
+
+    let finalCoord = this.map.unproject(screenPt)
+    if (isSnapEnabled(state)) {
+      const snap = getSnapInstance(this.map)
+      triggerSnapAtPoint(snap, this.map, screenPt)
+      finalCoord = getSnapLngLat(snap) || finalCoord
+    }
+
+    this.moveVertex(state, finalCoord)
+    this.updateTouchVertexTarget(state, { x: touch.x - state.deltaTarget.x, y: touch.y - state.deltaTarget.y })
+  }
+}

package/plugins/beta/draw-ml/src/modes/editVertex/undoHandlers.js

@@ -0,0 +1,133 @@
+import {
+  getRingSegments,
+  getSegmentForIndex,
+  getModifiableCoords
+} from './geometryHelpers.js'
+import { scalePoint } from './helpers.js'
+
+export const undoHandlers = {
+  // Fire geometry change event (for external listeners)
+  fireGeometryChange(state) {
+    const feature = this.getFeature(state.featureId)
+    if (feature) {
+      this.map.fire('draw.update', {
+        features: [feature.toGeoJSON()],
+        action: 'change_coordinates'
+      })
+    }
+  },
+
+  // Undo support
+  pushUndo(operation) {
+    const undoStack = this.map._undoStack
+    if (!undoStack) {
+      return
+    }
+    undoStack.push(operation)
+  },
+
+  handleUndo(state) {
+    const undoStack = this.map._undoStack
+    if (!undoStack || undoStack.length === 0) {
+      return
+    }
+
+    const op = undoStack.pop()
+
+    if (op.type === 'move_vertex') {
+      this.undoMoveVertex(state, op)
+    } else if (op.type === 'insert_vertex') {
+      this.undoInsertVertex(state, op)
+    } else if (op.type === 'delete_vertex') {
+      this.undoDeleteVertex(state, op)
+    }
+  },
+
+  undoMoveVertex(state, op) {
+    const { vertexIndex, previousPosition, featureId } = op
+    const feature = this.getFeature(featureId)
+    if (!feature) return
+
+    const geojson = feature.toGeoJSON()
+    const segments = getRingSegments(feature)
+    const result = getSegmentForIndex(segments, vertexIndex)
+    if (!result) return
+
+    const coords = getModifiableCoords(geojson, result.segment.path)
+    coords[result.localIdx] = previousPosition
+    this._applyUndoAndSync(state, geojson, featureId)
+
+    // Update touch vertex target position
+    const vertex = state.vertecies[state.selectedVertexIndex]
+    if (vertex) {
+      this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
+    }
+  },
+
+  undoInsertVertex(state, op) {
+    const { vertexIndex, featureId } = op
+    const feature = this.getFeature(featureId)
+    if (!feature) return
+
+    const geojson = feature.toGeoJSON()
+    const segments = getRingSegments(feature)
+    const result = getSegmentForIndex(segments, vertexIndex)
+    if (!result) return
+
+    const coords = getModifiableCoords(geojson, result.segment.path)
+    coords.splice(result.localIdx, 1)
+    this._applyUndoAndSync(state, geojson, featureId)
+
+    // Clear DirectSelect's coordinate selection
+    this.clearSelectedCoordinates()
+    this.hideTouchVertexIndicator(state)
+    this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null })
+  },
+
+  undoDeleteVertex(state, op) {
+    const { vertexIndex, position, featureId } = op
+    const feature = this.getFeature(featureId)
+    if (!feature) {
+      return
+    }
+
+    const geojson = feature.toGeoJSON()
+    const segments = getRingSegments(feature)
+
+    // Try to find segment containing vertexIndex
+    let result = getSegmentForIndex(segments, vertexIndex)
+
+    // If not found, vertex might be at segment boundary
+    if (!result) {
+      for (const seg of segments) {
+        if (vertexIndex === seg.start + seg.length) {
+          result = { segment: seg, localIdx: seg.length }
+          break
+        }
+      }
+    }
+
+    if (!result) {
+      return
+    }
+
+    const coords = getModifiableCoords(geojson, result.segment.path)
+    coords.splice(result.localIdx, 0, position)
+    this._applyUndoAndSync(state, geojson, featureId)
+
+    // Update touch vertex target to restored vertex position
+    const vertex = state.vertecies[vertexIndex]
+    if (vertex) {
+      this.updateTouchVertexTarget(state, scalePoint(this.map.project(vertex), state.scale))
+    }
+    this.changeMode(state, { selectedVertexIndex: vertexIndex, selectedVertexType: 'vertex', coordPath: this.getCoordPath(state, vertexIndex) })
+  },
+
+  _applyUndoAndSync(state, geojson, featureId) {
+    this._ctx.api.add(geojson)
+    state.vertecies = this.getVerticies(featureId)
+    state.midpoints = this.getMidpoints(featureId)
+    this._ctx.store.render()
+    this.fireGeometryChange(state)
+  }
+}

package/plugins/beta/draw-ml/src/modes/editVertex/vertexOperations.js

@@ -0,0 +1,141 @@
+import {
+  getCoords,
+  getRingSegments,
+  getSegmentForIndex,
+  getModifiableCoords
+} from './geometryHelpers.js'
+
+const ARROW_OFFSETS = { ArrowUp: [0, -1], ArrowDown: [0, 1], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }
+const NUDGE = 1, STEP = 5
+
+export const vertexOperations = {
+  updateMidpoint(coordinates) {
+    setTimeout(() => {
+      this.map.getSource('mapbox-gl-draw-hot').setData({
+        type: 'Feature',
+        properties: { meta: 'midpoint', active: 'true', id: 'active-midpoint' },
+        geometry: { type: 'Point', coordinates }
+      })
+    }, 0)
+  },
+
+  updateVertex(state, direction) {
+    const [idx, type] = this.getVertexOrMidpoint(state, direction)
+    if (idx < 0 || !type) {
+      return
+    }
+    this.changeMode(state, { selectedVertexIndex: idx, selectedVertexType: type, ...(type === 'vertex' && { coordPath: this.getCoordPath(state, idx) }) })
+  },
+
+  getOffset(coord, e) {
+    const pt = this.map.project(coord)
+    const offset = e?.shiftKey ? NUDGE : STEP
+    const [dx, dy] = e ? ARROW_OFFSETS[e.key].map(v => v * offset) : [0, 0]
+    return this.map.unproject({ x: pt.x + dx, y: pt.y + dy })
+  },
+
+  getNewCoord(state, e) {
+    return this.getOffset(getCoords(this.getFeature(state.featureId))[state.selectedVertexIndex], e)
+  },
+
+  insertVertex(state, e) {
+    const midIdx = state.selectedVertexIndex - state.vertecies.length
+    const newCoord = this.getOffset(state.midpoints[midIdx], e)
+    const feature = this.getFeature(state.featureId)
+    const geojson = feature.toGeoJSON()
+
+    // Find which segment this midpoint belongs to and calculate insertion position
+    const segments = getRingSegments(feature)
+    let globalInsertIdx = midIdx + 1
+    let insertSegment = null
+    let localInsertIdx = 0
+
+    // Map midpoint index to segment and local position
+    let midpointCounter = 0
+    for (const seg of segments) {
+      // Must match getMidpoints calculation
+      const segMidpoints = seg.closed ? seg.length : seg.length - 1
+      if (midIdx < midpointCounter + segMidpoints) {
+        insertSegment = seg
+        localInsertIdx = (midIdx - midpointCounter) + 1
+        globalInsertIdx = seg.start + localInsertIdx
+        break
+      }
+      midpointCounter += segMidpoints
+    }
+
+    if (!insertSegment) return
+
+    const coords = getModifiableCoords(geojson, insertSegment.path)
+    coords.splice(localInsertIdx, 0, [newCoord.lng, newCoord.lat])
+    this._ctx.api.add(geojson)
+
+    this.pushUndo({ type: 'insert_vertex', featureId: state.featureId, vertexIndex: globalInsertIdx })
+    this.changeMode(state, { selectedVertexIndex: globalInsertIdx, selectedVertexType: 'vertex', coordPath: this.getCoordPath(state, globalInsertIdx) })
+  },
+
+  moveVertex(state, coord, options = {}) {
+    if (options.checkSnap && state.enableSnap !== false) {
+      const snap = this.map._snapInstance
+      if (snap?.snapStatus && snap.snapCoords?.length >= 2) {
+        coord = { lng: snap.snapCoords[0], lat: snap.snapCoords[1] }
+      }
+    }
+
+    const feature = this.getFeature(state.featureId)
+    const geojson = feature.toGeoJSON()
+    const segments = getRingSegments(feature)
+    const result = getSegmentForIndex(segments, state.selectedVertexIndex)
+    if (!result) return
+
+    const coords = getModifiableCoords(geojson, result.segment.path)
+    coords[result.localIdx] = [coord.lng, coord.lat]
+    this._ctx.api.add(geojson)
+    state.vertecies = this.getVerticies(state.featureId)
+
+    this.map.fire('draw.geometrychange', state.feature)
+  },
+
+  deleteVertex(state) {
+    const feature = this.getFeature(state.featureId)
+    if (!feature) {
+      return
+    }
+
+    const segments = getRingSegments(feature)
+    const result = getSegmentForIndex(segments, state.selectedVertexIndex)
+    if (!result) {
+      return
+    }
+
+    const { segment } = result
+    // Minimum vertices per segment: 3 for closed rings (mapbox-gl-draw's internal representation), 2 for lines
+    const minVertices = segment.closed ? 3 : 2
+    if (segment.length <= minVertices) {
+      return
+    }
+
+    // Save position for undo before deletion
+    const deletedPosition = [...state.vertecies[state.selectedVertexIndex]]
+    const deletedIndex = state.selectedVertexIndex
+
+    this._ctx.api.trash()
+
+    // Clear DirectSelect's coordinate selection to prevent visual artifacts
+    this.clearSelectedCoordinates()
+    // Force feature re-render to clear vertex highlights
+    feature.changed()
+    this._ctx.store.render()
+
+    // Push undo operation
+    this.pushUndo({
+      type: 'delete_vertex',
+      featureId: state.featureId,
+      vertexIndex: deletedIndex,
+      position: deletedPosition
+    })
+
+    // Clear selection after delete
+    this.changeMode(state, { selectedVertexIndex: -1, selectedVertexType: null })
+  }
+}

package/plugins/beta/draw-ml/src/modes/editVertex/vertexQueries.js

@@ -0,0 +1,121 @@
+import {
+  getCoords,
+  getRingSegments,
+  getSegmentForIndex
+} from './geometryHelpers.js'
+import { spatialNavigate } from '../../utils/spatial.js'
+
+export const vertexQueries = {
+  findVertexIndex(coords, targetCoord, currentIdx) {
+    // Search for vertex, preferring matches near currentIdx to handle duplicate coords (e.g., closing vertices)
+    const matches = []
+    coords.forEach((c, i) => {
+      if (c[0] === targetCoord[0] && c[1] === targetCoord[1]) {
+        matches.push(i)
+      }
+    })
+
+    if (matches.length === 0) return -1
+    if (matches.length === 1) return matches[0]
+
+    // Multiple matches - pick closest to current selection
+    if (currentIdx >= 0) {
+      return matches.reduce((best, idx) =>
+        Math.abs(idx - currentIdx) < Math.abs(best - currentIdx) ? idx : best
+      )
+    }
+    return matches[0]
+  },
+
+  getCoordPath(state, idx) {
+    const feature = this.getFeature(state.featureId)
+    if (!feature) return '0'
+
+    const segments = getRingSegments(feature)
+    const result = getSegmentForIndex(segments, idx)
+    if (!result) return '0'
+
+    const { segment, localIdx } = result
+    return [...segment.path, localIdx].join('.')
+  },
+
+  syncVertices(state) {
+    state.vertecies = this.getVerticies(state.featureId)
+    state.midpoints = this.getMidpoints(state.featureId)
+  },
+
+  getVerticies(featureId) {
+    return getCoords(this.getFeature(featureId)) || []
+  },
+
+  getMidpoints(featureId) {
+    const feature = this.getFeature(featureId)
+    const coords = getCoords(feature)
+    const segments = getRingSegments(feature)
+    if (!coords?.length || !segments.length) {
+      return []
+    }
+
+    const midpoints = []
+    // Create midpoints within each segment, respecting boundaries
+    for (const seg of segments) {
+      // For closed rings, create midpoint between every vertex including last→first
+      // For open lines, create midpoints only between consecutive vertices (no wrap-around)
+      const count = seg.closed ? seg.length : seg.length - 1
+      for (let i = 0; i < count; i++) {
+        const idx = seg.start + i
+        const nextIdx = seg.start + ((i + 1) % seg.length)
+        const [x1, y1] = coords[idx]
+        const [x2, y2] = coords[nextIdx]
+        midpoints.push([(x1 + x2) / 2, (y1 + y2) / 2])
+      }
+    }
+    return midpoints
+  },
+
+  getVertexOrMidpoint(state, direction) {
+    // Ensure vertices and midpoints are populated
+    if (!state.vertecies?.length) {
+      state.vertecies = this.getVerticies(state.featureId)
+      state.midpoints = this.getMidpoints(state.featureId)
+    }
+    if (!state.vertecies?.length) {
+      return [-1, null]
+    }
+    const project = (p) => p ? Object.values(this.map.project(p)) : null
+    const pixels = [...state.vertecies.map(project), ...state.midpoints.map(project)].filter(Boolean)
+    if (!pixels.length) {
+      return [-1, null]
+    }
+    const start = pixels[state.selectedVertexIndex] || Object.values(this.map.project(this.map.getCenter()))
+    const idx = spatialNavigate(start, pixels, direction)
+    return [idx, idx < state.vertecies.length ? 'vertex' : 'midpoint']
+  },
+
+  getVertexIndexFromMidpoint(state, coordPath) {
+    const feature = this.getFeature(state.featureId)
+    const segments = getRingSegments(feature)
+    const parts = coordPath.split('.').map(Number)
+
+    // Find which segment this coord_path belongs to
+    let midpointOffset = 0
+    for (const seg of segments) {
+      const pathMatches = seg.path.every((val, idx) => val === parts[idx])
+      if (pathMatches && parts.length === seg.path.length + 1) {
+        // In DirectSelect, midpoint coord_path represents the insertion index
+        // The midpoint between vertex N and N+1 has coord_path ending in N+1
+        // So our flat midpoint index is one less than the coord_path index
+        const insertionIdx = parts[parts.length - 1]
+        const localMidpointIdx = insertionIdx > 0 ? insertionIdx - 1 : seg.length - 2
+        // Midpoints are indexed after all vertices
+        return state.vertecies.length + midpointOffset + localMidpointIdx
+      }
+      // Count midpoints in this segment (must match getMidpoints calculation)
+      const segMidpoints = seg.closed ? seg.length : seg.length - 1
+      midpointOffset += segMidpoints
+    }
+
+    // Fallback
+    return state.vertecies.length
+  }
+}