@defra/interactive-map 0.0.26-alpha → 0.0.27-alpha

package/plugins/beta/draw-ol/src/edit/keyboardHandler.js

@@ -0,0 +1,227 @@
+import { coordToPixel, nudgeCoord } from '../utils/olCoords.js'
+import { spatialNavigate } from '../utils/spatial.js'
+import { moveVertex, insertAtMidpoint } from './vertexOps.js'
+
+const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
+const INTERACTIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT', 'A'])
+const NUDGE_PX = 1
+const STEP_PX = 5
+
+const selectNearest = (map, getState, setState) => {
+  const { vertices, midpoints } = getState()
+  if (!vertices.length) {
+    return
+  }
+  const centerCoord = map.getView().getCenter()
+  const centerPx = coordToPixel(map, centerCoord)
+  if (!centerPx) {
+    return
+  }
+  const allPixels = [
+    ...vertices.map(c => coordToPixel(map, c)),
+    ...midpoints.map(c => coordToPixel(map, c))
+  ].filter(Boolean).map(p => [p.x, p.y])
+  const idx = spatialNavigate([centerPx.x, centerPx.y], allPixels, undefined)
+  setState({ selectedVertexIndex: idx, selectedVertexType: idx < vertices.length ? 'vertex' : 'midpoint' })
+}
+
+const navigateTo = (direction, map, getState, setState) => {
+  const { selectedVertexIndex, vertices, midpoints } = getState()
+  if (!vertices.length) {
+    return
+  }
+  const allCoords = [...vertices, ...midpoints]
+  const allPixels = allCoords.map(c => coordToPixel(map, c)).filter(Boolean).map(p => [p.x, p.y])
+  const startPx = selectedVertexIndex >= 0
+    ? allPixels[selectedVertexIndex]
+    : (() => {
+        const c = coordToPixel(map, map.getView().getCenter())
+        return c ? [c.x, c.y] : null
+      })()
+  if (!startPx) {
+    return
+  }
+  const idx = spatialNavigate(startPx, allPixels, direction)
+  setState({ selectedVertexIndex: idx, selectedVertexType: idx < vertices.length ? 'vertex' : 'midpoint' })
+}
+
+// Returns snappedCoord, but escapes snap if it prevents sufficient progress in the nudge direction.
+// Covers vertex-stuck (snap holds position) and edge-hugging (vertex slides along edge).
+const resolveSnappedCoord = (snap, map, current, nudgedCoord, snappedCoord, dx, dy) => {
+  if (!snap) {
+    return snappedCoord
+  }
+  const nudgeVec = [nudgedCoord[0] - current[0], nudgedCoord[1] - current[1]]
+  const actualVec = [snappedCoord[0] - current[0], snappedCoord[1] - current[1]]
+  const nudgeLenSq = nudgeVec[0] ** 2 + nudgeVec[1] ** 2
+  const dot = actualVec[0] * nudgeVec[0] + actualVec[1] * nudgeVec[1]
+  if (nudgeLenSq > 0 && dot / nudgeLenSq < 0.5) {
+    const escapePx = snap.snapRadius + 1
+    return nudgeCoord(map, current, dx === 0 ? 0 : Math.sign(dx) * escapePx, dy === 0 ? 0 : Math.sign(dy) * escapePx)
+  }
+  return snappedCoord
+}
+
+const wireNudge = ({ map, snap, getState, setState, onInserted }) => {
+  const keyMove = { start: null, index: null }
+
+  // Insert the midpoint as a vertex then move it — midpoints stay as midpoints until actually moved.
+  const nudgeMidpoint = (olFeature, midpoints, selectedVertexIndex, vertices, dx, dy) => {
+    const result = insertAtMidpoint(olFeature, midpoints, selectedVertexIndex, vertices.length)
+    if (!result) {
+      return
+    }
+    onInserted({ insertedIndex: result.insertedIndex }) // pushes insert_vertex undo + syncGeom
+    const updatedVertices = getState().vertices
+    const insertedCoord = updatedVertices[result.insertedIndex]
+    if (!insertedCoord) {
+      return
+    }
+    keyMove.start = [...insertedCoord]
+    keyMove.index = result.insertedIndex
+    const nudgedCoord = nudgeCoord(map, insertedCoord, dx, dy)
+    const movedCoord = snap ? snap.apply(nudgedCoord) : nudgedCoord
+    moveVertex(olFeature, result.insertedIndex, movedCoord)
+    setState({
+      selectedVertexIndex: result.insertedIndex,
+      selectedVertexType: 'vertex',
+      vertices: updatedVertices.map((c, i) => i === result.insertedIndex ? movedCoord : c)
+    })
+  }
+
+  const nudge = (e) => {
+    const { selectedVertexIndex, selectedVertexType, vertices, midpoints, olFeature } = getState()
+    if (!olFeature) {
+      return
+    }
+    const step = e.shiftKey ? NUDGE_PX : STEP_PX
+    const offsets = { ArrowUp: [0, -step], ArrowDown: [0, step], ArrowLeft: [-step, 0], ArrowRight: [step, 0] }
+    const [dx, dy] = offsets[e.key]
+    if (selectedVertexType === 'midpoint') {
+      nudgeMidpoint(olFeature, midpoints, selectedVertexIndex, vertices, dx, dy)
+      return
+    }
+    if (selectedVertexIndex < 0 || !vertices[selectedVertexIndex]) {
+      return
+    }
+    const current = vertices[selectedVertexIndex]
+    if (!keyMove.start) {
+      keyMove.start = [...current]
+      keyMove.index = selectedVertexIndex
+    }
+    const nudgedCoord = nudgeCoord(map, current, dx, dy)
+    const snappedCoord = snap ? snap.apply(nudgedCoord) : nudgedCoord
+    snap?.hideIndicator()
+    const newCoord = resolveSnappedCoord(snap, map, current, nudgedCoord, snappedCoord, dx, dy)
+    moveVertex(olFeature, selectedVertexIndex, newCoord)
+    setState({ vertices: vertices.map((c, i) => i === selectedVertexIndex ? newCoord : c) })
+  }
+
+  return { nudge, keyMove }
+}
+
+const isInteractiveElementFocused = (appViewport) => {
+  const el = document.activeElement
+  if (!el || el === document.body) {
+    return false
+  }
+  if (appViewport.contains(el)) {
+    return false
+  }
+  const tag = el.tagName
+  return INTERACTIVE_TAGS.has(tag) || el.isContentEditable || el.hasAttribute('tabindex')
+}
+
+const wireKeyboardEvents = ({ map, snap, getState, setState, onVertexMoved, onInserted, onDeleted, onUndo, onKeyboardActive }) => {
+  const { nudge, keyMove } = wireNudge({ map, snap, getState, setState, onInserted })
+  const appViewport = map.getViewport().closest('[role="application"]') ?? map.getViewport()
+  const isFocused = () => isInteractiveElementFocused(appViewport)
+
+  const handleArrowKey = (e) => {
+    if (e.altKey) {
+      e.preventDefault()
+      e.stopPropagation()
+      navigateTo(e.key, map, getState, setState)
+    } else if (getState().selectedVertexIndex >= 0) {
+      e.preventDefault()
+      e.stopPropagation()
+      nudge(e)
+    } else {
+      // No action: arrow with no selection and no alt modifier
+    }
+  }
+
+  const handleKey = (e) => {
+    onKeyboardActive?.()
+    if (e.key === ' ' && getState().selectedVertexIndex < 0) {
+      e.preventDefault()
+      selectNearest(map, getState, setState)
+    } else if (ARROW_KEYS.has(e.key)) {
+      handleArrowKey(e)
+    } else if (e.key === 'z' && (e.metaKey || e.ctrlKey)) {
+      const tag = document.activeElement?.tagName
+      if (!INTERACTIVE_TAGS.has(tag)) {
+        e.preventDefault()
+        e.stopPropagation()
+        onUndo()
+      }
+    } else {
+      // No action
+    }
+  }
+
+  const onKeydown = (e) => {
+    if (!isFocused()) {
+      if (e.key === 'Escape' && getState().selectedVertexIndex >= 0) {
+        e.preventDefault()
+        keyMove.start = null
+        keyMove.index = null
+        setState({ selectedVertexIndex: -1, selectedVertexType: null })
+      } else {
+        handleKey(e)
+      }
+    }
+  }
+
+  const onKeyup = (e) => {
+    if (!isFocused()) {
+      if (ARROW_KEYS.has(e.key) && keyMove.start && keyMove.index != null) {
+        snap?.hideIndicator()
+        onVertexMoved({ vertexIndex: keyMove.index, previousCoord: keyMove.start })
+        keyMove.start = null
+        keyMove.index = null
+      }
+      if (e.key === 'Delete') {
+        onDeleted()
+      }
+    }
+  }
+
+  window.addEventListener('keydown', onKeydown, { capture: true })
+  window.addEventListener('keyup', onKeyup, { capture: true })
+
+  return {
+    destroy () {
+      window.removeEventListener('keydown', onKeydown, { capture: true })
+      window.removeEventListener('keyup', onKeyup, { capture: true })
+    }
+  }
+}
+
+/**
+ * Keyboard handler for edit mode.
+ *
+ * Space       — select nearest vertex or midpoint to crosshair (only when nothing selected)
+ * Alt+Arrow   — navigate to next vertex/midpoint in that direction (requires selection)
+ * Arrow       — move selected vertex; if midpoint selected, inserts it as a vertex and moves it
+ * Shift+Arrow — same but fine nudge (1px vs 5px)
+ * Delete      — delete selected vertex (no-op on midpoints)
+ * Ctrl/Cmd+Z  — undo
+ *
+ * Midpoints remain midpoints until moved — navigating to a midpoint (Space/Alt+Arrow) does not
+ * convert it. Only pressing a plain/Shift arrow converts it.
+ *
+ * @param {{ map, container, getState, setState, onVertexMoved, onInserted, onDeleted, onUndo }}
+ * @returns {{ destroy }}
+ */
+export const createKeyboardHandler = (options) => wireKeyboardEvents(options)

package/plugins/beta/draw-ol/src/edit/midpointLayer.js

@@ -0,0 +1,57 @@
+import VectorSource from 'ol/source/Vector.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import { getMidpoints } from '../utils/geometryHelpers.js'
+
+/**
+ * Manages a dedicated overlay layer for midpoint handles in edit mode.
+ * Midpoints are always visible (unlike OL Modify's native midpoints which
+ * only appear when the pointer is near a segment). The selected midpoint is
+ * rendered by the separate active-selection layer in EditMode (zIndex 103).
+ */
+export const createMidpointLayer = (map, midpointStyle) => {
+  let currentStyle = midpointStyle
+  let selectedIndex = -1
+  const source = new VectorSource()
+  const layer = new VectorLayer({
+    source,
+    style: (feature) => feature.get('midpointIndex') === selectedIndex ? null : [currentStyle],
+    zIndex: 101
+  })
+  map.addLayer(layer)
+
+  return {
+    update (geom) {
+      source.clear()
+      const midpoints = getMidpoints(geom)
+      const features = midpoints.map((coord, i) => {
+        const f = new Feature({ geometry: new Point(coord) })
+        f.set('midpointIndex', i)
+        return f
+      })
+      source.addFeatures(features)
+    },
+
+    setSelected (index) {
+      selectedIndex = index
+      source.changed()
+    },
+
+    updateStyle (newMidpointStyle) {
+      currentStyle = newMidpointStyle
+      source.changed()
+    },
+
+    getCoords () {
+      return source.getFeatures()
+        .sort((a, b) => a.get('midpointIndex') - b.get('midpointIndex'))
+        .map(f => f.getGeometry().getCoordinates())
+    },
+
+    remove () {
+      source.clear()
+      map.removeLayer(layer)
+    }
+  }
+}

package/plugins/beta/draw-ol/src/edit/touchHandler.js

@@ -0,0 +1,171 @@
+import { coordToPixel, pixelToCoord } from '../utils/olCoords.js'
+import { createTouchTarget, applyTouchTargetColors, showTouchTarget, hideTouchTarget, isOnTouchTarget } from '../utils/touchTarget.js'
+import { moveVertex } from './vertexOps.js'
+import { findNearest } from './vertexHitTest.js'
+
+const TAP_MOVE_THRESHOLD = 10
+const TAP_TIME_THRESHOLD = 400
+const TOUCH_TOLERANCE = 24
+
+const wireTouchEvents = ({ container, map, targetEl, olToCSS, cssToOl, getState, setState, onVertexMoved, onTap, snap }) => {
+  let dragStartCoord = null
+  let dragStartIndex = null
+  let vertexTouchDelta = null
+  let targetTouchDelta = null
+  let tapStart = null
+
+  const onTouchstart = (e) => {
+    const touch = e.touches[0]
+    const onTarget = isOnTouchTarget(e.target)
+    tapStart = { x: touch.clientX, y: touch.clientY, time: Date.now(), onTarget }
+    if (!onTarget) {
+      return
+    }
+    const { selectedVertexIndex, vertices } = getState()
+    const vertex = vertices[selectedVertexIndex]
+    if (!vertex) {
+      return
+    }
+    const tOl = map.getEventPixel({ clientX: touch.clientX, clientY: touch.clientY })
+    const vertexPx = coordToPixel(map, vertex)
+    const style = getComputedStyle(targetEl)
+    const svgOlPx = cssToOl({ x: Number.parseFloat(style.left), y: Number.parseFloat(style.top) })
+    dragStartCoord = [...vertex]
+    dragStartIndex = selectedVertexIndex
+    vertexTouchDelta = { x: tOl[0] - vertexPx.x, y: tOl[1] - vertexPx.y }
+    targetTouchDelta = { x: tOl[0] - svgOlPx.x, y: tOl[1] - svgOlPx.y }
+    e.preventDefault()
+  }
+
+  const onTouchmove = (e) => {
+    if (!isOnTouchTarget(e.target) || dragStartIndex == null) {
+      return
+    }
+    e.preventDefault()
+    const tOl = map.getEventPixel({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY })
+    const rawCoord = pixelToCoord(map, { x: tOl[0] - vertexTouchDelta.x, y: tOl[1] - vertexTouchDelta.y })
+    const newCoord = snap ? snap.apply(rawCoord) : rawCoord
+    snap?.hideIndicator()
+    const { olFeature, vertices } = getState()
+    if (!olFeature) {
+      return
+    }
+    moveVertex(olFeature, dragStartIndex, newCoord)
+    setState({ vertices: vertices.map((c, i) => i === dragStartIndex ? newCoord : c) })
+    showTouchTarget(targetEl, olToCSS({ x: tOl[0] - targetTouchDelta.x, y: tOl[1] - targetTouchDelta.y }))
+  }
+
+  const onTouchend = (e) => {
+    const wasDragging = dragStartIndex != null
+    if (!wasDragging) {
+      if (tapStart && !tapStart.onTarget && e.changedTouches.length > 0) {
+        const t = e.changedTouches[0]
+        const dt = Date.now() - tapStart.time
+        if (Math.hypot(t.clientX - tapStart.x, t.clientY - tapStart.y) < TAP_MOVE_THRESHOLD && dt < TAP_TIME_THRESHOLD) {
+          const tOl = map.getEventPixel({ clientX: t.clientX, clientY: t.clientY })
+          const tapState = getState()
+          onTap?.(findNearest(map, tapState.vertices, tapState.midpoints, { x: tOl[0], y: tOl[1] }, TOUCH_TOLERANCE))
+          e.preventDefault()
+        }
+      }
+      tapStart = null
+      return
+    }
+    tapStart = null
+    const { vertices } = getState()
+    if (vertices[dragStartIndex] && dragStartCoord) {
+      onVertexMoved({ vertexIndex: dragStartIndex, previousCoord: dragStartCoord })
+    }
+    snap?.hideIndicator()
+    dragStartCoord = null; dragStartIndex = null; vertexTouchDelta = null; targetTouchDelta = null
+    e.preventDefault()
+  }
+
+  container.addEventListener('touchstart', onTouchstart, { passive: false })
+  container.addEventListener('touchmove', onTouchmove, { passive: false })
+  container.addEventListener('touchend', onTouchend, { passive: false })
+
+  return {
+    isDragging: () => dragStartIndex != null,
+    destroy () {
+      container.removeEventListener('touchstart', onTouchstart)
+      container.removeEventListener('touchmove', onTouchmove)
+      container.removeEventListener('touchend', onTouchend)
+    }
+  }
+}
+
+/**
+ * Touch vertex drag handler for edit mode.
+ * Shows an SVG offset target below the finger so the vertex can be repositioned
+ * without finger occlusion. Tap on a vertex or midpoint selects it via onTap.
+ *
+ * @param {{ map, container, getState, setState, onVertexMoved, onTap, colors }} options
+ * @returns {{ updateTargetPosition, updateColors, hide, destroy }}
+ */
+export const createTouchHandler = ({ map, container, getState, setState, onVertexMoved, onTap, colors, snap }) => {
+  const targetEl = createTouchTarget(container)
+  applyTouchTargetColors(targetEl, colors)
+
+  // OL pixel space is relative to ol-viewport at its pre-scale CSS size.
+  // Container CSS space is larger when a CSS transform scales up ol-viewport
+  // (e.g. scale(1.5) at medium map size makes OL pixels 1.5× smaller than CSS pixels).
+  const cssTx = { scale: 1, ox: 0, oy: 0 }
+  const olToCSS = (p) => ({ x: p.x * cssTx.scale + cssTx.ox, y: p.y * cssTx.scale + cssTx.oy })
+  const cssToOl = (p) => ({ x: (p.x - cssTx.ox) / cssTx.scale, y: (p.y - cssTx.oy) / cssTx.scale })
+
+  const syncCssTx = () => {
+    const vpEl = map.getViewport()
+    const vpRect = vpEl.getBoundingClientRect()
+    const cRect = container.getBoundingClientRect()
+    const vpScale = vpEl.offsetWidth > 0 ? vpRect.width / vpEl.offsetWidth : 1
+    const cScale = container.offsetWidth > 0 ? cRect.width / container.offsetWidth : 1
+    Object.assign(cssTx, {
+      scale: vpScale / cScale,
+      ox: (vpRect.left - cRect.left) / cScale,
+      oy: (vpRect.top - cRect.top) / cScale
+    })
+  }
+
+  const touchEvents = wireTouchEvents({ container, map, targetEl, olToCSS, cssToOl, getState, setState, onVertexMoved, onTap, snap })
+
+  const updateTargetPosition = () => {
+    const { selectedVertexIndex, vertices, interfaceType } = getState()
+    if (selectedVertexIndex < 0 || !vertices[selectedVertexIndex] || interfaceType !== 'touch') {
+      hideTouchTarget(targetEl)
+      return
+    }
+    const px = coordToPixel(map, vertices[selectedVertexIndex])
+    if (!px) {
+      hideTouchTarget(targetEl)
+      return
+    }
+    showTouchTarget(targetEl, olToCSS(px))
+  }
+
+  // Reposition on every render — keeps target anchored during pinch-zoom and pan.
+  // Skipped during drag since touchmove handles position directly.
+  const onPostrender = () => {
+    const { selectedVertexIndex, interfaceType } = getState()
+    if (selectedVertexIndex >= 0 && !touchEvents.isDragging() && interfaceType === 'touch') {
+      updateTargetPosition()
+    }
+  }
+  map.on('postrender', onPostrender)
+
+  const onSizeChange = () => { syncCssTx(); map.once('postrender', updateTargetPosition) }
+  map.on('change:size', onSizeChange)
+  syncCssTx()
+
+  return {
+    updateTargetPosition,
+    updateColors (newColors) { applyTouchTargetColors(targetEl, newColors) },
+    hide () { hideTouchTarget(targetEl) },
+    destroy () {
+      map.un('change:size', onSizeChange)
+      map.un('postrender', onPostrender)
+      touchEvents.destroy()
+      hideTouchTarget(targetEl)
+    }
+  }
+}

package/plugins/beta/draw-ol/src/edit/undoOps.js

@@ -0,0 +1,95 @@
+import {
+  getRingSegments,
+  getSegmentForIndex,
+  getModifiableCoords
+} from '../utils/geometryHelpers.js'
+
+/**
+ * Undo handlers for edit mode.
+ * Each operation receives the OL feature and the saved op payload,
+ * mutates the geometry, and returns the vertex index to re-select (or -1).
+ */
+
+export const undoMoveVertex = (olFeature, op) => {
+  const { vertexIndex, previousCoord } = op
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+  const result = getSegmentForIndex(segments, vertexIndex)
+  if (!result) {
+    return -1
+  }
+
+  const ring = getModifiableCoords(geojsonGeom, result.segment.path)
+  ring[result.localIdx] = [...previousCoord]
+  if (result.segment.closed && result.localIdx === 0) {
+    ring[ring.length - 1] = [...previousCoord]
+  }
+  geom.setCoordinates(geojsonGeom.coordinates)
+  return vertexIndex
+}
+
+export const undoInsertVertex = (olFeature, op) => {
+  const { vertexIndex } = op
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+  const result = getSegmentForIndex(segments, vertexIndex)
+  if (!result) {
+    return -1
+  }
+
+  const ring = getModifiableCoords(geojsonGeom, result.segment.path)
+  ring.splice(result.localIdx, 1)
+  if (result.segment.closed) {
+    ring[ring.length - 1] = [...ring[0]]
+  }
+  geom.setCoordinates(geojsonGeom.coordinates)
+  return -1
+}
+
+export const undoDeleteVertex = (olFeature, op) => {
+  const { vertexIndex, deletedCoord } = op
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+
+  let result = getSegmentForIndex(segments, vertexIndex)
+  // Vertex might be at a segment boundary after deletion shifted indices
+  if (!result) {
+    for (const seg of segments) {
+      if (vertexIndex === seg.start + seg.length) {
+        result = { segment: seg, localIdx: seg.length }
+        break
+      }
+    }
+  }
+  if (!result) {
+    return -1
+  }
+
+  const ring = getModifiableCoords(geojsonGeom, result.segment.path)
+  ring.splice(result.localIdx, 0, [...deletedCoord])
+  if (result.segment.closed) {
+    ring[ring.length - 1] = [...ring[0]]
+  }
+  geom.setCoordinates(geojsonGeom.coordinates)
+  return vertexIndex
+}
+
+/**
+ * Dispatch the correct undo handler based on operation type.
+ * @returns {number} vertex index to re-select after undo, or -1 for none
+ */
+export const applyUndo = (olFeature, op) => {
+  switch (op.type) {
+    case 'move_vertex':
+      return undoMoveVertex(olFeature, op)
+    case 'insert_vertex':
+      return undoInsertVertex(olFeature, op)
+    case 'delete_vertex':
+      return undoDeleteVertex(olFeature, op)
+    default:
+      return -1
+  }
+}

package/plugins/beta/draw-ol/src/edit/vertexHitTest.js

@@ -0,0 +1,72 @@
+import { coordToPixel, pixelDist } from '../utils/olCoords.js'
+
+const PIXEL_TOLERANCE = 12
+
+/**
+ * Find the nearest vertex to a screen pixel within tolerance.
+ *
+ * @param {import('ol/Map').default} map
+ * @param {number[][]} vertices - flat coordinate array [[e,n], ...]
+ * @param {{ x: number, y: number }} pixel
+ * @param {number} [tolerance]
+ * @returns {{ index: number, type: 'vertex' } | null}
+ */
+export const findNearestVertex = (map, vertices, pixel, tolerance = PIXEL_TOLERANCE) => {
+  let bestIdx = -1
+  let bestDist = tolerance
+
+  vertices.forEach((coord, i) => {
+    const px = coordToPixel(map, coord)
+    if (!px) {
+      return
+    }
+    const d = pixelDist(px, pixel)
+    if (d < bestDist) {
+      bestDist = d
+      bestIdx = i
+    }
+  })
+
+  return bestIdx >= 0 ? { index: bestIdx, type: 'vertex' } : null
+}
+
+/**
+ * Find the nearest midpoint to a screen pixel within tolerance.
+ *
+ * @param {import('ol/Map').default} map
+ * @param {number[][]} midpoints - midpoint coordinate array
+ * @param {{ x: number, y: number }} pixel
+ * @param {number} vertexCount - number of actual vertices (midpoint index offset)
+ * @param {number} [tolerance]
+ * @returns {{ index: number, type: 'midpoint' } | null}
+ */
+export const findNearestMidpoint = (map, midpoints, pixel, vertexCount, tolerance = PIXEL_TOLERANCE) => {
+  let bestIdx = -1
+  let bestDist = tolerance
+
+  midpoints.forEach((coord, i) => {
+    const px = coordToPixel(map, coord)
+    if (!px) {
+      return
+    }
+    const d = pixelDist(px, pixel)
+    if (d < bestDist) {
+      bestDist = d
+      bestIdx = i
+    }
+  })
+
+  return bestIdx >= 0 ? { index: vertexCount + bestIdx, type: 'midpoint' } : null
+}
+
+/**
+ * Find the nearest vertex or midpoint to a pixel.
+ * Vertices take priority when equidistant.
+ *
+ * @param {number} [tolerance]
+ * @returns {{ index: number, type: 'vertex'|'midpoint' } | null}
+ */
+export const findNearest = (map, vertices, midpoints, pixel, tolerance = PIXEL_TOLERANCE) => {
+  return findNearestVertex(map, vertices, pixel, tolerance) ??
+    findNearestMidpoint(map, midpoints, pixel, vertices.length, tolerance)
+}

package/plugins/beta/draw-ol/src/edit/vertexLayer.js

@@ -0,0 +1,49 @@
+import VectorSource from 'ol/source/Vector.js'
+import VectorLayer from 'ol/layer/Vector.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import { getCoords } from '../utils/geometryHelpers.js'
+
+/**
+ * Always-visible vertex handle layer for edit mode.
+ * OL Modify's built-in vertex handles only appear on hover; this layer
+ * keeps circles visible at all times. The selected vertex is rendered by
+ * the separate active-selection layer in EditMode (zIndex 103).
+ */
+export const createVertexLayer = (map, vertexStyle) => {
+  let currentStyle = vertexStyle
+  let selectedIndex = -1
+  const source = new VectorSource()
+  const layer = new VectorLayer({
+    source,
+    style: (feature) => feature.get('vertexIndex') === selectedIndex ? null : [currentStyle],
+    zIndex: 102
+  })
+  map.addLayer(layer)
+
+  return {
+    update (geom) {
+      source.clear()
+      getCoords(geom).forEach((coord, i) => {
+        const f = new Feature({ geometry: new Point(coord) })
+        f.set('vertexIndex', i)
+        source.addFeature(f)
+      })
+    },
+
+    setSelected (index) {
+      selectedIndex = index
+      source.changed()
+    },
+
+    updateStyle (newVertexStyle) {
+      currentStyle = newVertexStyle
+      source.changed()
+    },
+
+    remove () {
+      source.clear()
+      map.removeLayer(layer)
+    }
+  }
+}