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

package/plugins/beta/draw-ml/src/manifest.js

@@ -24,51 +24,74 @@ export const manifest = {
   InitComponent: DrawInit,
 
   buttons: [{
-    id: 'drawDone',
-    label: ({ pluginState }) => pluginState.action ? pluginState.action.charAt(0).toUpperCase() + pluginState.action.slice(1) : 'Done',
-    hiddenWhen: ({ appState, pluginState }) => !pluginState.mode || appState.interfaceType !== 'mouse' && pluginState.mode !== 'edit_vertex',
-    enableWhen: ({ pluginState }) => pluginState.action ? pluginState.actionValid : !!pluginState.tempFeature,
-    ...createButtonSlots(true),
-    variant: 'primary',
-  },{
     id: 'drawAddPoint',
     label: 'Add point',
     variant: 'primary',
     hiddenWhen: ({ appState, pluginState }) => !['draw_polygon', 'draw_line'].includes(pluginState.mode) || appState.interfaceType === 'mouse',
     ...createButtonSlots(true)
   },{
-    id: 'drawUndo',
-    label: 'Undo',
-    iconId: 'undo',
-    variant: 'tertiary',
+    id: 'drawDone',
+    label: 'Done',
+    variant: 'primary',
     hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
-    enableWhen: ({ pluginState }) => pluginState.undoStackLength > 0,
-    ...createButtonSlots(false)
-  },{
-    id: 'drawFinish',
-    label: 'Finish shape',
-    iconId: 'check',
-    variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line'].includes(pluginState.mode),
     enableWhen: ({ pluginState }) => pluginState.numVertecies >= (pluginState.mode === 'draw_polygon' ? 3 : 2),
-    ...createButtonSlots(false)
-  },{
-    id: 'drawDeletePoint',
-    label: 'Delete point',
-    iconId: 'close',
-    variant: 'tertiary',
-    enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertecies > (pluginState.tempFeature?.geometry?.type === 'Polygon' ? 3 : 2),
-    hiddenWhen: ({ pluginState }) => !(['simple_select', 'edit_vertex'].includes(pluginState.mode)),
-    ...createButtonSlots(false)
+    ...createButtonSlots(true)
   },{
-    id: 'drawSnap',
-    label: 'Snap to line',
-    iconId: 'magnet',
+    id: 'drawMenu',
+    label: 'Menu',
+    iconId: 'menu',
     variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => !pluginState.mode || !pluginState.hasSnapLayers,
-    pressedWhen: ({ pluginState }) => !!pluginState.snap,
-    ...createButtonSlots(false)
-  },{
+    hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+    menuItems: [{
+      id: 'drawUndo',
+      label: 'Undo',
+      iconId: 'undo',
+      hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+      enableWhen: ({ pluginState }) => pluginState.undoStackLength > 0,
+    },{
+      id: 'drawSnap',
+      label: 'Snap to feature',
+      iconId: 'magnet',
+      hiddenWhen: ({ pluginState }) => !pluginState.mode || !pluginState.hasSnapLayers,
+      pressedWhen: ({ pluginState }) => !!pluginState.snap,
+    },{
+      id: 'drawDeletePoint',
+      label: 'Delete point',
+      iconId: 'trash',
+      enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertecies > (pluginState.tempFeature?.geometry?.type === 'Polygon' ? 3 : 2),
+      hiddenWhen: ({ pluginState }) => !(['simple_select', 'edit_vertex'].includes(pluginState.mode)),
+    }],
+    ...createButtonSlots(true)
+  },
+  // {
+  //   id: 'drawUndo',
+  //   label: 'Undo',
+  //   iconId: 'undo',
+  //   variant: 'tertiary',
+  //   hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+  //   enableWhen: ({ pluginState }) => pluginState.undoStackLength > 0,
+  //   excludeWhen: () => true,
+  //   ...createButtonSlots(false)
+  // },{
+  //   id: 'drawDeletePoint',
+  //   label: 'Delete point',
+  //   iconId: 'trash',
+  //   variant: 'tertiary',
+  //   enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertecies > (pluginState.tempFeature?.geometry?.type === 'Polygon' ? 3 : 2),
+  //   hiddenWhen: ({ pluginState }) => !(['simple_select', 'edit_vertex'].includes(pluginState.mode)),
+  //   excludeWhen: () => true,
+  //   ...createButtonSlots(false)
+  // },{
+  //   id: 'drawSnap',
+  //   label: 'Snap to line',
+  //   iconId: 'magnet',
+  //   variant: 'tertiary',
+  //   hiddenWhen: ({ pluginState }) => !pluginState.mode || !pluginState.hasSnapLayers,
+  //   pressedWhen: ({ pluginState }) => !!pluginState.snap,
+  //   excludeWhen: () => true,
+  //   ...createButtonSlots(false)
+  // },
+  {
     id: 'drawCancel',
     label: 'Cancel',
     variant: 'tertiary',
@@ -84,14 +107,17 @@ export const manifest = {
   }],
 
   icons: [{
-    id: 'check',
-    svgContent: '<path d="M20 6 9 17l-5-5"/>'
+    id: 'menu',
+    svgContent: '<circle cx="12" cy="12" r="10"/><path d="m16 10-4 4-4-4"/>'
   },{
     id: 'undo',
-    svgContent: '<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>'
+    svgContent: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>'
   },{
     id: 'magnet',
     svgContent: '<path d="m12 15 4 4"/><path d="M2.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.029-6.029a1 1 0 1 1 3 3l-6.029 6.029a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.365-6.367A1 1 0 0 0 8.716 4.282z"/><path d="m5 8 4 4"/>'
+  },{
+    id: 'trash',
+    svgContent: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>'
   }],
 
   api: {

package/plugins/beta/draw-ml/src/mapboxSnap.js

@@ -112,9 +112,9 @@ function applyMapboxSnapPatches(colors) {
     return r
   }
 
-  // Skip when disabled, clean up internal arrays to prevent memory accumulation
+  // Skip when disabled or zooming, clean up internal arrays to prevent memory accumulation
   proto.snapToClosestPoint = function(e) {
-    if (!this.status) {
+    if (!this.status || this.map?._isZooming) {
       return
     }
     try {
@@ -140,6 +140,8 @@ function applyMapboxSnapPatches(colors) {
 function pollUntil(checkFn, onSuccess) {
   (function poll() {
     const result = checkFn()
+    // null signals to stop polling, falsy continues polling
+    if (result === null) return
     result ? onSuccess(result) : requestAnimationFrame(poll)
   })()
 }
@@ -267,7 +269,7 @@ export function initMapLibreSnap(map, draw, snapOptions = {}) {
   // Handle style changes - re-patch source and ensure snap layer exists
   map.on('style.load', () => {
     pollUntil(
-      () => map.getSource('mapbox-gl-draw-hot'),
+      () => map._removed ? null : map.getSource('mapbox-gl-draw-hot'),
       (source) => {
         patchSourceData(source)
 
@@ -295,24 +297,26 @@ export function initMapLibreSnap(map, draw, snapOptions = {}) {
     )
   })
 
-  // Hide snap indicator during zoom
+  // Suppress snap processing during zoom (indicator freezes in place)
   map.on('zoomstart', () => {
-    if (map.getLayer(SNAP_HELPER_LAYER)) {
-      map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'none')
-    }
+    map._isZooming = true
   })
 
   map.on('zoomend', () => {
-    // Only show indicator if snap is enabled
-    const snap = map._snapInstance
-    if (map.getLayer(SNAP_HELPER_LAYER) && snap?.status) {
-      map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'visible')
+    map._isZooming = false
+    // Force hide then re-show to reset indicator at new zoom level (Safari fix)
+    if (map.getLayer(SNAP_HELPER_LAYER)) {
+      map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'none')
+      const snap = map._snapInstance
+      if (snap?.status) {
+        map.setLayoutProperty(SNAP_HELPER_LAYER, 'visibility', 'visible')
+      }
     }
   })
 
   // Initial setup - poll until draw source exists
   pollUntil(
-    () => map.getSource('mapbox-gl-draw-hot'),
+    () => map._removed ? null : map.getSource('mapbox-gl-draw-hot'),
     createSnap
   )
 }

package/plugins/beta/draw-ml/src/modes/createDrawMode.js

@@ -226,7 +226,8 @@ export const createDrawMode = (ParentMode, config) => {
           interfaceType: state.interfaceType,
           vertexMarkerId: state.vertexMarkerId,
           addVertexButtonId: state.addVertexButtonId,
-          getSnapEnabled: state.getSnapEnabled
+          getSnapEnabled: state.getSnapEnabled,
+          properties: state.properties
         })
         return true
       }
@@ -236,7 +237,7 @@ export const createDrawMode = (ParentMode, config) => {
       const initialCoords = [[center.lng, center.lat], [center.lng, center.lat]]
       const newFeature = this.newFeature({
         type: 'Feature',
-        properties: {},
+        properties: state.properties || {},
         geometry: {
           type: geometryType,
           coordinates: [initialCoords]
@@ -343,7 +344,7 @@ export const createDrawMode = (ParentMode, config) => {
       const feature = e.features[0]
       draw.delete(feature.id)
       feature.id = state.featureId
-      draw.add(feature)
+      draw.add(feature, { userProperties: true })
     },
 
     onVertexButtonClick(state, e) {

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