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

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
+  }
+}