@defra/interactive-map 0.0.43-alpha → 0.0.44-alpha

package/plugins/draw/src/adapters/maplibre/MaplibreDrawAdapter.js

@@ -6,17 +6,28 @@ import { ADAPTER_EVENTS } from '../../adapterEvents.js'
 import { createLiveStroke } from '../../validation/liveStroke.js'
 import { createLiveDrawChecks } from '../../validation/liveDrawChecks.js'
 import { resolvePointSymbol, hasSymbolStyle } from './pointSymbolImages.js'
+import { getCoords, getMidpointCoords } from './modes/editVertexMode/geometryHelpers.js'
 
 const polygonFeature = (coordinates) => ({ type: 'Feature', geometry: { type: 'Polygon', coordinates } })
 const lineFeature = (coordinates) => ({ type: 'Feature', geometry: { type: 'LineString', coordinates } })
 const pointFeature = (coordinates) => ({ type: 'Feature', geometry: { type: 'Point', coordinates } })
 
-// The displayed feature + placed-vertex count for the live stroke check. MapLibre's
-// fire() copies the payload onto an Event whose `type` is the event name, so the
-// geometry type is clobbered — it comes from the draw mode, or (in edit, where the
-// mode covers both shapes) from the coordinate nesting: a polygon's coordinates are
-// rings (one level deeper than a line's). Draw-mode coordinates carry a trailing
-// rubber-band point; edit-mode coordinates are all committed vertices.
+// mapbox-gl-draw's public get() returns closed rings (first coord repeated as last), but the
+// running mode's own internal indexing has that duplicate stripped — getVertexItems() below
+// reads via the public API, so it must correct for this or indexes drift across rings/parts.
+const dedupeClosedRings = (geometry) => {
+  if (geometry.type === 'Polygon') {
+    return { ...geometry, coordinates: geometry.coordinates.map(ring => ring.slice(0, -1)) }
+  }
+  if (geometry.type === 'MultiPolygon') {
+    return { ...geometry, coordinates: geometry.coordinates.map(poly => poly.map(ring => ring.slice(0, -1))) }
+  }
+  return geometry
+}
+
+// The displayed feature + vertex count for the live stroke check. MapLibre's fire() clobbers
+// the payload's own geometry type, so it's inferred instead from the mode, or (in edit mode,
+// which covers both shapes) from the coordinate nesting.
 export const displayedShape = (mode, coordinates) => {
   if (mode === 'draw_polygon') {
     return { feature: polygonFeature(coordinates), numVertices: (coordinates[0]?.length ?? 1) - 1 }
@@ -25,10 +36,7 @@ export const displayedShape = (mode, coordinates) => {
     return { feature: lineFeature(coordinates), numVertices: (coordinates?.length ?? 1) - 1 }
   }
   if (mode === 'edit_vertex') {
-    // Read the outer ring once — Array.isArray(ring?.[0]) already proves `ring` itself is
-    // non-nullish whenever it's true, so the polygon branch can use it directly with no
-    // second optional-chaining/fallback (which `coordinates[0]` re-read a second time,
-    // unreachably, used to need).
+    // Array.isArray(ring?.[0]) already proves ring is non-nullish, so the polygon branch below reuses it directly.
     const ring = coordinates[0]
     return Array.isArray(ring?.[0])
       ? { feature: polygonFeature(coordinates), numVertices: ring.length }
@@ -53,6 +61,7 @@ export const displayedShape = (mode, coordinates) => {
  *   setInterfaceType(type)
  *   done() / cancel() / undo() / deleteVertex()
  *   nudgeSelectedVertex(dx, dy, isLargeStep)
+ *   getVertexItems() / selectVertex(index) / insertVertexAtMidpoint(index)
  *   get(id) / add(feature) / setStyle(id, properties) / delete(id) / deleteAll()
  *   setSnapEnabled(bool) / setSnapLayers(layers) / isSnapEnabled()
  *   setFeatureProperty(id, property, value) / setDrawingPreviewProperty(property, value)
@@ -65,10 +74,8 @@ export class MaplibreDrawAdapter {
     this._map = mapProvider.map
     this._bus = createEventBus()
     this._editingFeatureId = null
-    // Assigned once per feature, on creation only — see styles.js's SORT_KEY_PROP. Drives
-    // fill/line/symbol-sort-key so a later-drawn feature reliably paints above an earlier one
-    // within the same shared layer, instead of the order being incidental to mapbox-gl-draw's
-    // internal cold/hot bucket placement.
+    // Assigned once per feature, on creation only (see styles.js's SORT_KEY_PROP) — drives
+    // paint order so a later-drawn feature reliably layers above an earlier one.
     this._sortKeyCounter = 0
 
     const { draw, remove } = createMapboxDraw({
@@ -83,12 +90,9 @@ export class MaplibreDrawAdapter {
     this._draw = draw
     this._cleanupDraw = remove
 
-    // Single owner of the dashed-stroke state: live rubber-band / drag moves feed
-    // update() (default rules sync, user callback throttled) and committed verdicts
-    // (events.js) land via setInvalid → set(), so the cached state always mirrors
-    // the rendered layers. onChange does the actual layer toggle; in edit mode the
-    // displayed shape is exactly what Done finishes, so validity flips also gate
-    // the Done button (events.js dispatches them).
+    // Single owner of the dashed-stroke state — live moves feed update(), committed verdicts
+    // land via setInvalid(). onChange does the actual layer toggle, and in edit mode also
+    // gates the Done button (the displayed shape is exactly what Done finishes).
     this._liveStroke = createLiveStroke({
       onChange: (invalid, reason) => {
         this._applyStrokeInvalid(invalid)
@@ -99,13 +103,10 @@ export class MaplibreDrawAdapter {
       }
     })
 
-    // Draw-mode-only: computes both the stroke/Done verdict and the Add-point
-    // verdict from a SINGLE throttled call to the user's callback per rubber-band
-    // move (see liveDrawChecks.js for why), and is flip-guarded itself. The
-    // stroke verdict still routes through _liveStroke.set() — that instance is
-    // also driven independently by edit mode and must stay the single source of
-    // truth for the rendered stroke across mode switches. The Add-point verdict
-    // has no such cross-mode instance to stay in sync with, so it emits directly.
+    // Draw-mode-only: computes both the stroke/Done verdict and the Add-point verdict from one
+    // throttled user callback (see liveDrawChecks.js). The stroke verdict still routes through
+    // _liveStroke.set() to stay the single source of truth across mode switches; Add-point has
+    // no such shared instance, so it emits directly.
     this._liveDrawChecks = createLiveDrawChecks({
       onStrokeChange: (invalid, reason) => this._liveStroke.set(invalid, reason),
       onPlaceChange: (vetoed, reason) => this._bus.emit(ADAPTER_EVENTS.CAN_PLACE_CHANGE, { canPlace: !vetoed, reason })
@@ -114,42 +115,34 @@ export class MaplibreDrawAdapter {
     // Normalise ML map events → the shared adapter event contract (adapterEvents.js).
     // The OL adapter emits the same contract directly from OLDrawManager.
     this._mapHandlers = {
-      create: (e) => {
-        const feature = e.features[0]
-        // Every draw mode's own 'draw.create' listener (registered later, at that mode's
-        // onSetup, so it runs after this one in the same synchronous dispatch) re-ids a
-        // freshly-drawn feature to its caller-requested id via a delete+re-add (see
-        // drawPointMode.js's onCreate / drawMode/clickHandlers.js's reidCreatedFeature) —
-        // mutating this SAME `feature` object's `id` in place. Deferring a tick lets that
-        // re-id finish first, so `feature.id` is already final by the time this runs, and
-        // setFeatureProperty targets the feature that's actually still in the store.
+      create: (event) => {
+        const feature = event.features[0]
+        // Deferred a tick so the mode's own re-id (delete+re-add to the caller-requested id —
+        // see drawPointMode.js's onCreate) finishes first, or this targets a stale feature id.
         setTimeout(() => {
           this._draw.setFeatureProperty(feature.id, 'sortKey', this._nextSortKey())
           this._bus.emit(ADAPTER_EVENTS.CREATE, this._draw.get(feature.id))
         }, 0)
       },
-      editfinish: (e) => this._bus.emit(ADAPTER_EVENTS.EDIT_FINISH, e.features[0]),
+      editfinish: (event) => this._bus.emit(ADAPTER_EVENTS.EDIT_FINISH, event.features[0]),
       cancel: () => this._bus.emit(ADAPTER_EVENTS.CANCEL),
-      // Normalise typo: the ML modes fire numVertecies, the contract uses numVertices
-      vertexselection: (e) => this._bus.emit(ADAPTER_EVENTS.VERTEX_SELECTION, { ...e, numVertices: e.numVertecies }),
-      vertexchange: (e) => this._bus.emit(ADAPTER_EVENTS.VERTEX_CHANGE, { ...e, numVertices: e.numVertecies }),
-      undochange: (e) => this._bus.emit(ADAPTER_EVENTS.UNDO_CHANGE, e.length),
-      update: (e) => this._bus.emit(ADAPTER_EVENTS.UPDATE, e.features[0]),
-      geometrychange: (e) => {
-        // Phase-less events are rubber-band moves carrying the displayed feature
-        // (placed vertices + cursor) — they drive the live invalid stroke, and are
-        // cached for setDrawingPreviewProperty (the in-progress feature has no
-        // stable id yet — only assigned once drawing actually finishes — so it
-        // can't be targeted via setFeatureProperty).
-        if (!e?.phase) {
-          this._updateLiveStroke(e)
-          this._currentDrawEvent = e
+      vertexselection: (event) => this._bus.emit(ADAPTER_EVENTS.VERTEX_SELECTION, event),
+      vertexchange: (event) => this._bus.emit(ADAPTER_EVENTS.VERTEX_CHANGE, event),
+      undochange: (event) => this._bus.emit(ADAPTER_EVENTS.UNDO_CHANGE, event.length),
+      update: (event) => this._bus.emit(ADAPTER_EVENTS.UPDATE, event.features[0]),
+      geometrychange: (event) => {
+        // Phase-less events are rubber-band moves carrying the in-progress feature — they
+        // drive the live invalid stroke, and are cached for setDrawingPreviewProperty (which
+        // has no stable id yet to target via setFeatureProperty).
+        if (!event?.phase) {
+          this._updateLiveStroke(event)
+          this._currentDrawEvent = event
         }
-        this._bus.emit(ADAPTER_EVENTS.GEOMETRY_CHANGE, e)
+        this._bus.emit(ADAPTER_EVENTS.GEOMETRY_CHANGE, event)
       },
-      placementblocked: (e) => this._bus.emit(ADAPTER_EVENTS.PLACEMENT_BLOCKED, e),
-      interfacetypechange: (e) => this._bus.emit(ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE, { interfaceType: e.interfaceType }),
-      modechange: (e) => this._handleModeChange(e),
+      placementblocked: (event) => this._bus.emit(ADAPTER_EVENTS.PLACEMENT_BLOCKED, event),
+      interfacetypechange: (event) => this._bus.emit(ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE, { interfaceType: event.interfaceType }),
+      modechange: (event) => this._handleModeChange(event),
       styledata: () => this._handleStyleData()
     }
 
@@ -177,36 +170,30 @@ export class MaplibreDrawAdapter {
       this._liveStroke.set(false)
       this._liveDrawChecks.reset()
     }
-    // draw_point has no direct dependency on symbolRegistry/mapProvider — the resolver is
-    // injected here so the mode only ever calls state.resolvePointSymbol(...) and stays
-    // decoupled from how a symbol image actually gets resolved/registered.
+    // The resolver is injected here so draw_point stays decoupled from how a symbol image
+    // actually gets resolved/registered.
     if (name === 'draw_point') {
       options = { ...options, resolvePointSymbol: (featureId, properties) => this._resolvePointSymbol(featureId, properties) }
     }
     this._draw.changeMode(name, options)
-    // The underlying mapbox-gl-draw control's public changeMode API is silent by
-    // default (it never fires 'draw.modechange'), so every mode change requested
-    // through this adapter must drive the same cleanup manually.
+    // mapbox-gl-draw's own changeMode never fires 'draw.modechange', so every mode change
+    // requested through this adapter must drive the same cleanup manually.
     this._handleModeChange({ mode: name })
   }
 
-  // Injected into draw_point's changeMode options as state.resolvePointSymbol — resolves and
-  // registers the feature's symbol-config icon, then writes the resolved image id/anchor back
-  // onto the feature so the data-driven point-symbol layer (styles.js) can render it.
+  // Resolves and registers the feature's symbol-config icon, then writes the resolved image
+  // id/anchor back so styles.js's point-symbol layer can render it.
   _resolvePointSymbol (featureId, properties) {
     return resolvePointSymbol({ draw: this._draw, mapProvider: this._mapProvider, map: this._map, featureId, properties })
   }
 
-  // Live invalid-stroke driver: called on every rubber-band move (draw) and vertex
-  // drag / nudge (edit) with the displayed feature. Edit mode has no Add-point
-  // gate, so it goes straight through the live-stroke controller as before. Draw
-  // mode routes through _liveDrawChecks instead, which computes both the stroke
-  // and Add-point verdicts from one throttled user-callback call (see
-  // liveDrawChecks.js).
-  _updateLiveStroke (e) {
-    if (!e?.coordinates) { return }
+  // Live invalid-stroke driver, called on every rubber-band move (draw) and vertex drag/nudge
+  // (edit). Draw mode routes through _liveDrawChecks (also computes the Add-point verdict);
+  // edit mode goes straight through the live-stroke controller.
+  _updateLiveStroke (event) {
+    if (!event?.coordinates) { return }
     const mode = this._draw.getMode()
-    const shape = displayedShape(mode, e.coordinates)
+    const shape = displayedShape(mode, event.coordinates)
     if (!shape) { return }
     if (mode === 'draw_polygon' || mode === 'draw_line') {
       this._liveDrawChecks.update({ feature: shape.feature, numVertices: shape.numVertices, context: { mode }, onGeometryChange: this._geometryValidator })
@@ -240,13 +227,9 @@ export class MaplibreDrawAdapter {
   cancel () {
     this._mapProvider.undoStack?.clear()
     const mode = this._draw.getMode()
-    // trash() only belongs to an in-progress, never-committed draw — it deletes
-    // whatever's selected. For edit_vertex, events.js's handleCancel has already
-    // restored the original feature via draw.add() before this runs; trash()
-    // here would instead run mapbox-gl-draw's direct_select onTrash on the
-    // mode's own live state (removing the selected vertex, or — if the
-    // in-progress edit happened to leave the shape invalid — deleting the
-    // entire feature), silently discarding the just-restored original.
+    // trash() only belongs to an in-progress, uncommitted draw. For edit_vertex, events.js has
+    // already restored the original feature — trash() here would instead run direct_select's
+    // own onTrash and silently discard that restore.
     if (mode === 'draw_polygon' || mode === 'draw_line') {
       this._draw.trash()
     }
@@ -258,14 +241,41 @@ export class MaplibreDrawAdapter {
     this._map.fire(CUSTOM_DRAW_EVENTS.UNDO)
   }
 
-  // MoveControls' D-pad, routed here via mapProvider.activeMoveTarget (see
-  // events.js) once a vertex is selected. Bridged into the running edit mode the
-  // same way setInterfaceType is, since the adapter has no direct reference to the
-  // mode's live state.
+  // MapControls' D-pad, routed here via mapProvider.activeMoveTarget once a vertex is
+  // selected — bridged into the mode via event, same as setInterfaceType.
   nudgeSelectedVertex (dx, dy, isLargeStep) {
     this._map.fire(CUSTOM_DRAW_EVENTS.NUDGE_VERTEX, { dx, dy, isLargeStep })
   }
 
+  // Read-only vertex/midpoint coordinates for the shared spatial listbox (useSpatialList.js).
+  // Reads the committed feature via the public get() — the adapter has no reference into the
+  // live mode (see selectVertex below) — flat across all rings/parts, matching the mode's own
+  // selectedVertexIndex convention.
+  getVertexItems () {
+    const empty = { vertices: [], midpoints: [] }
+    if (this._draw.getMode() !== 'edit_vertex' || !this._editingFeatureId) {
+      return empty
+    }
+    const feature = this._draw.get(this._editingFeatureId)
+    if (!feature) {
+      return empty
+    }
+    const geometry = dedupeClosedRings(feature.geometry)
+    return { vertices: getCoords(geometry), midpoints: getMidpointCoords(geometry) }
+  }
+
+  // Moves the live vertex/midpoint cursor to `index` — preview only, no geometry change.
+  // Bridged into the mode via a custom event, same pattern as nudgeSelectedVertex.
+  selectVertex (index) {
+    this._map.fire(CUSTOM_DRAW_EVENTS.SELECT_VERTEX, { index })
+  }
+
+  // Commits a new vertex exactly at midpoint `index` (no directional offset, unlike the
+  // keyboard/D-pad path) — the destructive counterpart to selectVertex's preview-only move.
+  insertVertexAtMidpoint (index) {
+    this._map.fire(CUSTOM_DRAW_EVENTS.INSERT_VERTEX_AT_MIDPOINT, { index })
+  }
+
   // Record the current geometry validity so the draw mode can block finish gestures
   // (double-click / click-to-close) while the in-progress shape is invalid.
   setGeometryValid (valid) {
@@ -283,10 +293,8 @@ export class MaplibreDrawAdapter {
     this._liveStroke.set(invalid)
   }
 
-  // Toggle the active shape's stroke between solid (valid) and dashed (invalid) by
-  // swapping which of the two overlaid stroke layers is visible; the fill is hidden
-  // while invalid so the shape reads as an outline only. Only the live-stroke
-  // controller calls this — everything else goes through setInvalid.
+  // Swaps which overlaid stroke layer is visible (solid vs dashed); fill is hidden while
+  // invalid. Only the live-stroke controller calls this — everything else goes through setInvalid.
   _applyStrokeInvalid (invalid) {
     this._setLayerVisibility('stroke-active', !invalid)
     this._setLayerVisibility('stroke-active-invalid', invalid)
@@ -303,12 +311,9 @@ export class MaplibreDrawAdapter {
   }
 
   deleteVertex () {
-    // Intentionally a no-op on MapLibre. The shared events layer calls draw.deleteVertex()
-    // from the delete-point button, but the ML edit mode already handles deletion itself:
-    // via the keyboard (Backspace/Delete) and its own window-click listener matching
-    // deleteVertexButtonId (see editVertexMode.onButtonClick). Deleting here too would
-    // double-delete. The OL adapter implements this for real; here it only satisfies the
-    // shared adapter interface.
+    // Intentionally a no-op on MapLibre — the ML edit mode already handles vertex deletion
+    // itself (keyboard + its own click listener); deleting here too would double-delete.
+    // The OL adapter implements this for real; here it only satisfies the shared interface.
   }
 
   get (id) { return this._draw.get(id) }
@@ -318,9 +323,8 @@ export class MaplibreDrawAdapter {
     return this._sortKeyCounter
   }
 
-  // A directly-added Point (e.g. api/addFeature.js) skips draw_point's own icon-resolving
-  // drawend handler, so it must be resolved here instead — with no fallback, styles.js's
-  // point-symbol layer would otherwise render nothing at all.
+  // A directly-added Point skips draw_point's own icon-resolving handler, so it must be
+  // resolved here instead, or styles.js's point-symbol layer renders nothing.
   add (feature) {
     // Only a genuinely new feature gets a fresh sort key — setStyle() re-adds an existing one
     // (via a shallow properties spread) to re-render it, and must not bump it back to the front.
@@ -335,9 +339,8 @@ export class MaplibreDrawAdapter {
     return ids
   }
 
-  // Patches an existing feature's style properties (stroke/fill/strokeWidth or symbol-family
-  // keys) and re-renders — routed through add() itself so a Point's icon gets re-resolved the
-  // same way a directly-added one does, for free.
+  // Patches an existing feature's style properties and re-renders via add(), so a Point's
+  // icon gets re-resolved the same way a directly-added one does.
   setStyle (id, properties) {
     const feature = this._draw.get(id)
     if (!feature) {
@@ -380,17 +383,14 @@ export class MaplibreDrawAdapter {
     this._draw.setFeatureProperty(id, property, value)
   }
 
-  // Tag the feature currently being drawn (rubber-band, not yet created — so it
-  // has no stable id to target via setFeatureProperty) with a property, and
-  // re-render so the change is visible immediately. Used for live preview styling
-  // while drawing, e.g. split's valid/invalid line colour. A no-op once nothing
-  // has been drawn yet this session, or outside draw_polygon/draw_line.
+  // Tags the in-progress rubber-band feature (no stable id yet) with a property and
+  // re-renders — used for live preview styling, e.g. split's valid/invalid line colour.
   setDrawingPreviewProperty (property, value) {
-    const e = this._currentDrawEvent
-    if (e?.properties) {
-      e.properties[property] = value
+    const event = this._currentDrawEvent
+    if (event?.properties) {
+      event.properties[property] = value
     }
-    e?.ctx?.store?.render()
+    event?.ctx?.store?.render()
   }
 
   on (type, handler) {
@@ -401,9 +401,9 @@ export class MaplibreDrawAdapter {
     this._bus.off(type, handler)
   }
 
-  _handleModeChange (e) {
+  _handleModeChange (event) {
     const DRAW_MODES = new Set(['draw_polygon', 'draw_line', 'draw_point', 'edit_vertex', 'edit_point'])
-    if (!DRAW_MODES.has(e.mode)) {
+    if (!DRAW_MODES.has(event.mode)) {
       clearSnapIndicator(getSnapInstance(this._map), this._map)
     }
   }
@@ -414,9 +414,8 @@ export class MaplibreDrawAdapter {
     // 'styledata' after the map's been torn down — getStyle() returns undefined then; no-op.
     const style = this._map.getStyle()
     if (!style) { return }
-    // A style reload re-adds the draw layers with their spec-default visibility
-    // (solid stroke shown, dashed hidden) — re-assert the cached stroke state so
-    // an invalid shape stays dashed across the reload.
+    // A style reload resets layers to spec-default visibility — re-assert the cached stroke
+    // state so an invalid shape stays dashed.
     this._liveStroke.refresh()
     const layers = style.layers || []
     if (!layers.length || layers[layers.length - 1].source?.startsWith('mapbox-gl-draw')) {

package/plugins/draw/src/adapters/maplibre/MaplibreDrawAdapter.test.js

@@ -179,11 +179,11 @@ describe('map event normalisation', () => {
     expect(bus.emit).toHaveBeenCalledWith('cancel')
   })
 
-  test('vertexselection/vertexchange normalise the numVertecies typo', () => {
+  test('vertexselection/vertexchange forward the raw event', () => {
     const { map, bus } = setup()
 
-    onHandler(map, CUSTOM_DRAW_EVENTS.VERTEX_SELECTION)({ numVertecies: 3, index: 1 })
-    onHandler(map, CUSTOM_DRAW_EVENTS.VERTEX_CHANGE)({ numVertecies: 2 })
+    onHandler(map, CUSTOM_DRAW_EVENTS.VERTEX_SELECTION)({ numVertices: 3, index: 1 })
+    onHandler(map, CUSTOM_DRAW_EVENTS.VERTEX_CHANGE)({ numVertices: 2 })
 
     expect(bus.emit).toHaveBeenCalledWith('vertexselection', expect.objectContaining({ numVertices: 3, index: 1 }))
     expect(bus.emit).toHaveBeenCalledWith('vertexchange', expect.objectContaining({ numVertices: 2 }))
@@ -197,16 +197,16 @@ describe('map event normalisation', () => {
 
   test('geometrychange forwards the raw event', () => {
     const { map, bus } = setup()
-    const e = { type: 'Polygon' }
-    onHandler(map, CUSTOM_DRAW_EVENTS.GEOMETRY_CHANGE)(e)
-    expect(bus.emit).toHaveBeenCalledWith('geometrychange', e)
+    const event = { type: 'Polygon' }
+    onHandler(map, CUSTOM_DRAW_EVENTS.GEOMETRY_CHANGE)(event)
+    expect(bus.emit).toHaveBeenCalledWith('geometrychange', event)
   })
 
   test('placementblocked forwards the raw event', () => {
     const { map, bus } = setup()
-    const e = { phase: 'place', reason: 'outside region' }
-    onHandler(map, CUSTOM_DRAW_EVENTS.PLACEMENT_BLOCKED)(e)
-    expect(bus.emit).toHaveBeenCalledWith('placementblocked', e)
+    const event = { phase: 'place', reason: 'outside region' }
+    onHandler(map, CUSTOM_DRAW_EVENTS.PLACEMENT_BLOCKED)(event)
+    expect(bus.emit).toHaveBeenCalledWith('placementblocked', event)
   })
 })
 
@@ -582,6 +582,18 @@ describe('simple delegations', () => {
     expect(map.fire).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.NUDGE_VERTEX, { dx: 1, dy: 0, isLargeStep: true })
   })
 
+  test('selectVertex fires the select-vertex event with the given index', () => {
+    const { adapter, map } = setup()
+    adapter.selectVertex(3)
+    expect(map.fire).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.SELECT_VERTEX, { index: 3 })
+  })
+
+  test('insertVertexAtMidpoint fires the insert-vertex-at-midpoint event with the given index', () => {
+    const { adapter, map } = setup()
+    adapter.insertVertexAtMidpoint(4)
+    expect(map.fire).toHaveBeenCalledWith(CUSTOM_DRAW_EVENTS.INSERT_VERTEX_AT_MIDPOINT, { index: 4 })
+  })
+
   test('deleteVertex is a no-op', () => {
     const { adapter, draw, map } = setup()
     expect(() => adapter.deleteVertex()).not.toThrow()
@@ -761,6 +773,67 @@ describe('simple delegations', () => {
   })
 })
 
+describe('getVertexItems', () => {
+  test('returns empty vertices/midpoints when not in edit_vertex mode', () => {
+    const { adapter, draw } = setup()
+    draw.getMode.mockReturnValue('draw_polygon')
+    expect(adapter.getVertexItems()).toEqual({ vertices: [], midpoints: [] })
+  })
+
+  test('returns empty vertices/midpoints when in edit_vertex but no editing feature id is set', () => {
+    const { adapter, draw } = setup()
+    draw.getMode.mockReturnValue('edit_vertex')
+    expect(adapter.getVertexItems()).toEqual({ vertices: [], midpoints: [] })
+  })
+
+  test('returns empty vertices/midpoints when the editing feature no longer exists', () => {
+    const { adapter, draw } = setup()
+    adapter.changeMode('edit_vertex', { featureId: 'f1' })
+    draw.getMode.mockReturnValue('edit_vertex')
+    draw.get.mockReturnValue(undefined)
+    expect(adapter.getVertexItems()).toEqual({ vertices: [], midpoints: [] })
+  })
+
+  test('flattens a LineString — no closing duplicate to strip', () => {
+    const { adapter, draw } = setup()
+    adapter.changeMode('edit_vertex', { featureId: 'f1' })
+    draw.getMode.mockReturnValue('edit_vertex')
+    draw.get.mockReturnValue({ geometry: { type: 'LineString', coordinates: [[0, 0], [10, 0], [10, 10]] } })
+    const result = adapter.getVertexItems()
+    expect(result.vertices).toEqual([[0, 0], [10, 0], [10, 10]])
+    expect(result.midpoints).toEqual([[5, 0], [10, 5]])
+  })
+
+  test('strips the closing duplicate coordinate for a Polygon ring — index-aligned with the mode\'s own selectedVertexIndex', () => {
+    const { adapter, draw } = setup()
+    adapter.changeMode('edit_vertex', { featureId: 'f1' })
+    draw.getMode.mockReturnValue('edit_vertex')
+    draw.get.mockReturnValue({ geometry: { type: 'Polygon', coordinates: [[[0, 0], [10, 0], [10, 10], [0, 0]]] } })
+    const result = adapter.getVertexItems()
+    expect(result.vertices).toEqual([[0, 0], [10, 0], [10, 10]])
+  })
+
+  test('strips the closing duplicate for every ring/part of a MultiPolygon, keeping index continuity across parts', () => {
+    const { adapter, draw } = setup()
+    adapter.changeMode('edit_vertex', { featureId: 'f1' })
+    draw.getMode.mockReturnValue('edit_vertex')
+    draw.get.mockReturnValue({
+      geometry: {
+        type: 'MultiPolygon',
+        coordinates: [
+          [[[0, 0], [10, 0], [10, 10], [0, 0]]],
+          [[[20, 20], [30, 20], [30, 30], [20, 20]]]
+        ]
+      }
+    })
+    const result = adapter.getVertexItems()
+    expect(result.vertices).toEqual([
+      [0, 0], [10, 0], [10, 10],
+      [20, 20], [30, 20], [30, 30]
+    ])
+  })
+})
+
 describe('done', () => {
   test('clears the undo stack and fires editfinish when editing a vertex', () => {
     const { adapter, map, draw, undoStack } = setup()

package/plugins/draw/src/adapters/maplibre/drawEvents.js

@@ -28,7 +28,9 @@ export const CUSTOM_DRAW_EVENTS = {
   GEOMETRY_CHANGE: 'draw.geometrychange',
   INTERFACE_TYPE_CHANGE: 'draw.interfacetypechange',
   PLACEMENT_BLOCKED: 'draw.placementblocked',
-  NUDGE_VERTEX: 'draw.nudgevertex'
+  NUDGE_VERTEX: 'draw.nudgevertex',
+  SELECT_VERTEX: 'draw.selectvertex',
+  INSERT_VERTEX_AT_MIDPOINT: 'draw.insertvertexatmidpoint'
 }
 
 // Native MapLibre map event (not a draw event) — fires whenever the map style data changes.

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

@@ -21,7 +21,7 @@ describe('createDrawMode composition', () => {
     const mode = build()
     const contributed = [
       'onSetup', 'onStop', // lifecycle
-      'onClick', 'onTap', 'doClick', 'onVertexButtonClick', 'onCreate', // click
+      'onClick', 'onTap', 'doClick', '_placeAtCrossHair', 'onVertexButtonClick', 'onCreate', // click
       'pushDrawUndo', 'undoVertex', 'onUndo', // undo
       'onKeydown', 'onKeyup', 'onKeyUp', // keyboard
       'onMove', 'onMouseMove', 'onTouchStart', 'onBlur', // pointer

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

@@ -1,8 +1,10 @@
 import { DrawPolygonMode } from '../../drawPolygonMode.js'
 import { DrawLineMode } from '../../drawLineMode.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'
+// Real mapbox-gl-draw Feature classes, not exported from its package entrypoint — needed here
+// so this harness can construct the actual objects mapbox-gl-draw itself hands to a mode.
+import PolygonFeature from '../../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/polygon.js' // NOSONAR
+import LineStringFeature from '../../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/line_string.js' // NOSONAR
 
 /**
  * Shared test harness for the createDrawMode handler modules. Exercises the real
@@ -12,6 +14,10 @@ import LineStringFeature from '../../../../../../../../node_modules/@mapbox/mapb
 
 export { DrawPolygonMode, DrawLineMode }
 export const CENTER = { lng: 5, lat: 5 }
+// Fixed point a mock-active snap resolves to, distinct from CENTER so tests can tell whether
+// a click landed at the real coordinate or was pulled onto the snap target — the value itself
+// is arbitrary, just needs to differ from CENTER.
+export const SNAP_TARGET = [9, 9] // NOSONAR
 
 const createMap = () => {
   const canvas = document.createElement('canvas')
@@ -25,9 +31,12 @@ const createMap = () => {
     getCenter: () => ({ ...CENTER }),
     project: jest.fn(() => ({ x: 50, y: 50 })),
     unproject: jest.fn(() => ({ ...CENTER })),
-    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) })
+    fire: jest.fn(function (type, event) { (listeners[type] ?? []).forEach((handler) => handler(event)) }),
+    on: jest.fn((type, handler) => {
+      listeners[type] ??= []
+      listeners[type].push(handler)
+    }),
+    off: jest.fn((type, handler) => { listeners[type] = (listeners[type] ?? []).filter((x) => x !== handler) })
   }
 }
 
@@ -64,8 +73,8 @@ const createModeContext = (mode) => {
 
 // Remove window/container/map listeners registered by onSetup so tests don't leak into each other
 const contexts = []
-const removeListeners = (ctx) => ctx._listeners?.forEach(([t, e, h]) =>
-  t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
+const removeListeners = (ctx) => ctx._listeners?.forEach(([target, eventName, handler, opts]) =>
+  target.removeEventListener ? target.removeEventListener(eventName, handler, opts) : target.off(eventName, handler))
 
 const createContainer = () => {
   const container = document.createElement('div')
@@ -104,9 +113,9 @@ export const clickEvent = (ctx, lng, lat, overrides = {}) => ({
 
 export const clickAt = (ctx, state, lng, lat) => ctx.onClick(state, clickEvent(ctx, lng, lat))
 
-export const firedWith = (map, type) => map.fire.mock.calls.filter(([t]) => t === type).map(([, e]) => e)
+export const firedWith = (map, type) => map.fire.mock.calls.filter(([eventType]) => eventType === type).map(([, event]) => event)
 
-export const activeSnap = () => ({ status: true, snapStatus: true, snapCoords: [9, 9], snapToClosestPoint: jest.fn() })
+export const activeSnap = () => ({ status: true, snapStatus: true, snapCoords: SNAP_TARGET, snapToClosestPoint: jest.fn() })
 
 afterEach(() => {
   contexts.splice(0).forEach(removeListeners)

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

@@ -60,7 +60,7 @@ const createClickHelpers = ({ geometryType, getFeature, getCoords }) => ({
   dispatchVertexChange (coords) {
     // Both polygon ring and LineString store [v0...vN, rubber_band] during drawing — subtract 1 to get placed vertex count
     this.map.fire('draw.vertexchange', {
-      numVertecies: Math.max(0, coords.length - 1)
+      numVertices: Math.max(0, coords.length - 1)
     })
   },
 
@@ -179,6 +179,14 @@ const createClickActions = ({ ParentMode, getFeature, getCoords, validateClick,
       this.pushDrawUndo(state)
       this.dispatchVertexChange(newCoords)
       this.emitDrawValidation(state)
+    },
+
+    // Alias for lifecycle.js's shared crosshair.activate wiring (createLifecycle calls
+    // this._placeAtCrossHair?.(state)) — drawPointMode.js defines its own _placeAtCrossHair
+    // directly, but polygon/line's equivalent "commit at crosshair" action is doClick above
+    // (also used by the touch add-vertex button), just under a different name.
+    _placeAtCrossHair (state) {
+      this.doClick(state)
     }
   }
 }