@defra/interactive-map 0.0.37-alpha → 0.0.38-alpha

package/plugins/draw/src/adapters/openlayers/snap/snapIndicator.test.js

@@ -0,0 +1,72 @@
+import { createSnapIndicator } from './snapIndicator.js'
+import { createFakeMap } from '../__helpers__/harness.js'
+
+const colors = { snapVertex: '#sv', snapEdge: '#se' }
+
+const setup = () => {
+  const map = createFakeMap()
+  const indicator = createSnapIndicator(map, colors)
+  const layer = map.layers[0]
+  return { map, indicator, layer, source: layer.getSource() }
+}
+
+const renderedColor = (layer, feature) => {
+  const ctx = { beginPath: jest.fn(), arc: jest.fn(), fill: jest.fn(), fillStyle: null }
+  layer.getStyle()(feature).getRenderer()([5, 6], { context: ctx, pixelRatio: 2 })
+  return { color: ctx.fillStyle, arc: ctx.arc.mock.calls[0] }
+}
+
+test('show places a single reused feature; repeated shows move it rather than duplicate', () => {
+  const { indicator, source } = setup()
+  indicator.show([10, 10], 'vertex')
+  indicator.show([20, 20], 'edge')
+  expect(source.getFeatures()).toHaveLength(1)
+  expect(source.getFeatures()[0].getGeometry().getCoordinates()).toEqual([20, 20])
+  expect(source.getFeatures()[0].get('snapType')).toBe('edge')
+})
+
+test('vertex and edge snaps render circles in their own colours, scaled by pixelRatio', () => {
+  const { indicator, layer, source } = setup()
+  indicator.show([10, 10], 'vertex')
+  const feature = source.getFeatures()[0]
+  expect(renderedColor(layer, feature)).toEqual({ color: colors.snapVertex, arc: [5, 6, 20, 0, Math.PI * 2] })
+
+  feature.set('snapType', 'edge', true)
+  expect(renderedColor(layer, feature).color).toBe(colors.snapEdge)
+
+  feature.set('snapType', 'mystery', true)
+  expect(layer.getStyle()(feature)).toBeNull()
+})
+
+test('hide clears the circle and is safe to call when nothing is showing', () => {
+  const { indicator, source } = setup()
+  indicator.hide() // nothing showing — no-op
+  indicator.show([10, 10], 'vertex')
+  indicator.hide()
+  expect(source.getFeatures()).toHaveLength(0)
+  indicator.show([1, 1], 'vertex') // can show again after hiding
+  expect(source.getFeatures()).toHaveLength(1)
+})
+
+test('colour updates apply to subsequent renders, refreshing a visible circle', () => {
+  const { indicator, layer, source } = setup()
+  indicator.show([10, 10], 'vertex')
+  indicator.updateColors({ snapVertex: '#new', snapEdge: '#se' })
+  expect(renderedColor(layer, source.getFeatures()[0]).color).toBe('#new')
+  indicator.updateColors(colors) // also fine while hidden
+})
+
+test('colour updates while hidden skip the redraw', () => {
+  const { indicator, source } = setup()
+  const changed = jest.spyOn(source, 'changed')
+  indicator.updateColors({ snapVertex: '#x', snapEdge: '#y' }) // nothing showing yet
+  expect(changed).not.toHaveBeenCalled()
+})
+
+test('remove clears the source and detaches the layer', () => {
+  const { map, indicator, source } = setup()
+  indicator.show([10, 10], 'vertex')
+  indicator.remove()
+  expect(source.getFeatures()).toHaveLength(0)
+  expect(map.removeLayer).toHaveBeenCalled()
+})

package/plugins/draw/src/adapters/openlayers/snap/snapInteraction.js

@@ -0,0 +1,57 @@
+/**
+ * Custom OL Interaction that intercepts pointer events and rewrites
+ * mapBrowserEvent.coordinate to the nearest snap candidate before any draw
+ * or modify interaction sees it.
+ *
+ * Coordinate snapping applies to all pointer events (pointermove, pointerdown,
+ * pointerup, singleclick) so that both rubberbanding and vertex placement are snapped.
+ * The visual indicator is only updated on pointermove.
+ *
+ * Must be added to the map AFTER the Draw/Modify interaction so it is processed
+ * first (OL iterates interactions in reverse-add order).
+ * snapManager.reattach() handles this after each mode change.
+ */
+
+import Interaction from 'ol/interaction/Interaction.js'
+
+const SNAP_EVENTS = new Set(['pointermove', 'pointerdrag', 'pointerdown', 'pointerup', 'singleclick', 'click'])
+
+const processSnapEvent = (mapBrowserEvent, engine, indicator, snapRadius, isIndicatorActive) => {
+  const { type } = mapBrowserEvent
+
+  if (type === 'pointerout' || type === 'pointerleave') {
+    indicator.hide()
+    return
+  }
+
+  if (!SNAP_EVENTS.has(type)) {
+    return
+  }
+
+  const result = engine.query(mapBrowserEvent.coordinate, snapRadius)
+  if (result) {
+    mapBrowserEvent.coordinate = result.coord.slice()
+  }
+
+  // Only update indicator during free mouse movement — hide during drag, no-op for clicks
+  if (type === 'pointermove' && isIndicatorActive()) {
+    result ? indicator.show(result.coord, result.type) : indicator.hide()
+  } else if (type === 'pointerdrag') {
+    indicator.hide()
+  } else {
+    // no indicator update for click/down/up events
+  }
+}
+
+export const createSnapInteraction = (engine, indicator, snapRadius, isIndicatorActive) => {
+  const interaction = new Interaction({
+    handleEvent (mapBrowserEvent) {
+      if (interaction.getActive()) {
+        processSnapEvent(mapBrowserEvent, engine, indicator, snapRadius, isIndicatorActive)
+      }
+      return true
+    }
+  })
+
+  return interaction
+}

package/plugins/draw/src/adapters/openlayers/snap/snapInteraction.test.js

@@ -0,0 +1,68 @@
+import { createSnapInteraction } from './snapInteraction.js'
+
+const setup = ({ indicatorActive = true } = {}) => {
+  const engine = { query: jest.fn(() => ({ type: 'vertex', coord: [9, 9] })) }
+  const indicator = { show: jest.fn(), hide: jest.fn() }
+  const interaction = createSnapInteraction(engine, indicator, 12, () => indicatorActive)
+  const fire = (type, coordinate = [1, 1]) => {
+    const event = { type, coordinate }
+    const result = interaction.handleEvent(event)
+    return { event, result }
+  }
+  return { engine, indicator, interaction, fire }
+}
+
+test('always lets the event continue to other interactions', () => {
+  const { fire } = setup()
+  expect(fire('pointermove').result).toBe(true)
+  expect(fire('wheel').result).toBe(true)
+})
+
+test('does nothing while inactive', () => {
+  const { engine, interaction, fire } = setup()
+  interaction.setActive(false)
+  const { event } = fire('pointermove')
+  expect(engine.query).not.toHaveBeenCalled()
+  expect(event.coordinate).toEqual([1, 1])
+})
+
+test('rewrites the event coordinate to a copy of the snap candidate for all pointer gestures', () => {
+  const { engine, fire } = setup()
+  for (const type of ['pointermove', 'pointerdrag', 'pointerdown', 'pointerup', 'singleclick', 'click']) {
+    const { event } = fire(type)
+    expect(event.coordinate).toEqual([9, 9])
+    expect(event.coordinate).not.toBe(engine.query.mock.results.at(-1).value.coord) // copy, not shared
+  }
+})
+
+test('the indicator follows free mouse movement only', () => {
+  const { engine, indicator, fire } = setup()
+  fire('pointermove')
+  expect(indicator.show).toHaveBeenCalledWith([9, 9], 'vertex')
+
+  engine.query.mockReturnValue(null)
+  fire('pointermove')
+  expect(indicator.hide).toHaveBeenCalledTimes(1)
+
+  engine.query.mockReturnValue({ type: 'edge', coord: [5, 5] })
+  fire('pointerdrag')
+  expect(indicator.hide).toHaveBeenCalledTimes(2) // hidden during drags
+  fire('singleclick')
+  expect(indicator.show).toHaveBeenCalledTimes(1) // clicks never touch the indicator
+})
+
+test('the indicator stays untouched during pointermove when the indicator is gated off', () => {
+  const { indicator, fire } = setup({ indicatorActive: false })
+  const { event } = fire('pointermove')
+  expect(event.coordinate).toEqual([9, 9]) // snapping still applies
+  expect(indicator.show).not.toHaveBeenCalled()
+  expect(indicator.hide).not.toHaveBeenCalled()
+})
+
+test('leaving the map hides the indicator without querying; unrelated events are ignored', () => {
+  const { engine, indicator, fire } = setup()
+  fire('pointerout')
+  expect(indicator.hide).toHaveBeenCalled()
+  fire('wheel')
+  expect(engine.query).not.toHaveBeenCalled()
+})

package/plugins/draw/src/adapters/openlayers/snap/snapManager.js

@@ -0,0 +1,99 @@
+/**
+ * Snap manager — orchestrates the snap engine, indicator, and OL interaction.
+ *
+ * Returned as manager.snap; null when no snapLayers are configured.
+ *
+ * Interface used by draw and edit modes:
+ *   snap.apply(coord)     — query + show/hide indicator; returns snapped coord or original
+ *   snap.hideIndicator()  — explicit hide (e.g. on touch/keyboard commit)
+ *   snap.setActive(bool)  — enable / disable (wired to the UI snap toggle)
+ *   snap.reattach()       — re-add the OL interaction after a mode change so it stays
+ *                           last-added (= first to process pointermove events)
+ *   snap.destroy()        — full cleanup
+ */
+
+import { createSnapEngine } from './snapEngine.js'
+import { createSnapIndicator } from './snapIndicator.js'
+import { createSnapInteraction } from './snapInteraction.js'
+
+export const createSnapManager = (map, snapLayers, colors, snapRadius) => {
+  if (!snapLayers?.length) {
+    return null
+  }
+
+  const engine = createSnapEngine(map, snapLayers)
+  const indicator = createSnapIndicator(map, colors)
+
+  let indicatorActive = false
+  const interaction = createSnapInteraction(engine, indicator, snapRadius, () => indicatorActive)
+
+  map.addInteraction(interaction)
+  interaction.setActive(false) // matches reducer initial state: snap: false
+
+  let active = false
+
+  return {
+    /**
+     * Apply snap at coord. Updates the indicator and returns the snapped
+     * coordinate, or the original coordinate when no snap candidate is found.
+     * Returns original coord unchanged when snap is disabled.
+     */
+    snapRadius,
+
+    apply (coord) {
+      if (!active) {
+        return coord
+      }
+      const result = engine.query(coord, snapRadius)
+      if (result) {
+        indicator.show(result.coord, result.type)
+        return result.coord
+      }
+      indicator.hide()
+      return coord
+    },
+
+    hideIndicator () {
+      indicator.hide()
+    },
+
+    setIndicatorActive (value) {
+      indicatorActive = value
+      if (!value) {
+        indicator.hide()
+      }
+    },
+
+    setActive (value) {
+      active = value
+      interaction.setActive(value)
+      if (!value) {
+        indicator.hide()
+      }
+    },
+
+    /**
+     * Remove and re-add the OL interaction so it sits at the top of the
+     * interaction stack (last-added = first to handle pointermove).
+     * Call after each changeMode() so the interaction always runs before
+     * the newly added Draw or Modify interaction.
+     */
+    setSnapLayers (layers) {
+      engine.setLayers(layers === null || layers === undefined ? snapLayers : layers)
+    },
+
+    reattach () {
+      map.removeInteraction(interaction)
+      map.addInteraction(interaction)
+    },
+
+    updateColors (newColors) {
+      indicator.updateColors(newColors)
+    },
+
+    destroy () {
+      map.removeInteraction(interaction)
+      indicator.remove()
+    }
+  }
+}

package/plugins/draw/src/adapters/openlayers/snap/snapManager.test.js

@@ -0,0 +1,101 @@
+import { createSnapManager } from './snapManager.js'
+import { createSnapEngine } from './snapEngine.js'
+import { createSnapIndicator } from './snapIndicator.js'
+import { createSnapInteraction } from './snapInteraction.js'
+import { createFakeMap } from '../__helpers__/harness.js'
+
+jest.mock('./snapEngine.js', () => ({
+  createSnapEngine: jest.fn(() => ({ query: jest.fn(() => null), setLayers: jest.fn() }))
+}))
+jest.mock('./snapIndicator.js', () => ({
+  createSnapIndicator: jest.fn(() => ({ show: jest.fn(), hide: jest.fn(), updateColors: jest.fn(), remove: jest.fn() }))
+}))
+jest.mock('./snapInteraction.js', () => ({
+  createSnapInteraction: jest.fn(() => ({ setActive: jest.fn() }))
+}))
+
+const setup = () => {
+  const map = createFakeMap()
+  const snap = createSnapManager(map, ['boundaries'], { snapVertex: '#sv' }, 12)
+  const engine = createSnapEngine.mock.results.at(-1).value
+  const indicator = createSnapIndicator.mock.results.at(-1).value
+  const interaction = createSnapInteraction.mock.results.at(-1).value
+  return { map, snap, engine, indicator, interaction }
+}
+
+afterEach(() => jest.clearAllMocks())
+
+test('no snap layers configured means no snap manager at all', () => {
+  expect(createSnapManager(createFakeMap(), null, {}, 12)).toBeNull()
+  expect(createSnapManager(createFakeMap(), [], {}, 12)).toBeNull()
+})
+
+test('starts attached to the map but inactive, matching the initial snap-off UI state', () => {
+  const { map, snap, interaction } = setup()
+  expect(map.interactions).toContain(interaction)
+  expect(interaction.setActive).toHaveBeenCalledWith(false)
+  expect(snap.snapRadius).toBe(12)
+})
+
+describe('apply', () => {
+  test('returns the coordinate untouched while snap is off', () => {
+    const { snap, engine } = setup()
+    expect(snap.apply([1, 2])).toEqual([1, 2])
+    expect(engine.query).not.toHaveBeenCalled()
+  })
+
+  test('snaps to a candidate and shows the indicator, or hides it on a miss', () => {
+    const { snap, engine, indicator } = setup()
+    snap.setActive(true)
+    engine.query.mockReturnValue({ type: 'vertex', coord: [9, 9] })
+    expect(snap.apply([8, 8])).toEqual([9, 9])
+    expect(indicator.show).toHaveBeenCalledWith([9, 9], 'vertex')
+
+    engine.query.mockReturnValue(null)
+    expect(snap.apply([1, 2])).toEqual([1, 2])
+    expect(indicator.hide).toHaveBeenCalled()
+  })
+})
+
+test('deactivating snap or the indicator hides the circle; the interaction reads indicator state live', () => {
+  const { snap, indicator, interaction } = setup()
+  const isIndicatorActive = createSnapInteraction.mock.calls.at(-1)[3]
+  snap.setIndicatorActive(true)
+  expect(isIndicatorActive()).toBe(true)
+  snap.setIndicatorActive(false)
+  expect(isIndicatorActive()).toBe(false)
+  expect(indicator.hide).toHaveBeenCalledTimes(1)
+
+  snap.setActive(false)
+  expect(interaction.setActive).toHaveBeenLastCalledWith(false)
+  expect(indicator.hide).toHaveBeenCalledTimes(2)
+})
+
+test('setSnapLayers forwards new layers, falling back to the configured set when cleared', () => {
+  const { snap, engine } = setup()
+  snap.setSnapLayers(['other'])
+  expect(engine.setLayers).toHaveBeenCalledWith(['other'])
+  snap.setSnapLayers(null)
+  expect(engine.setLayers).toHaveBeenCalledWith(['boundaries'])
+  snap.setSnapLayers(undefined)
+  expect(engine.setLayers).toHaveBeenLastCalledWith(['boundaries'])
+})
+
+test('reattach re-adds the interaction so it processes pointer events first', () => {
+  const { map, snap, interaction } = setup()
+  map.interactions.push({ id: 'draw' }) // a mode was just added
+  snap.reattach()
+  expect(map.removeInteraction).toHaveBeenCalledWith(interaction)
+  expect(map.interactions.at(-1)).toBe(interaction)
+})
+
+test('colour updates and explicit hides reach the indicator; destroy removes interaction and indicator', () => {
+  const { map, snap, indicator, interaction } = setup()
+  snap.hideIndicator()
+  expect(indicator.hide).toHaveBeenCalled()
+  snap.updateColors({ snapVertex: '#new' })
+  expect(indicator.updateColors).toHaveBeenCalledWith({ snapVertex: '#new' })
+  snap.destroy()
+  expect(map.removeInteraction).toHaveBeenCalledWith(interaction)
+  expect(indicator.remove).toHaveBeenCalled()
+})

package/plugins/draw/src/adapters/openlayers/utils/geometryHelpers.js

@@ -0,0 +1,103 @@
+/**
+ * Pure geometry helpers for multi-ring/multi-part geometry support.
+ * Handles coordinate transformations between flat arrays and hierarchical GeoJSON.
+ * Supports Polygon, MultiPolygon, LineString, MultiLineString.
+ */
+
+export const getCoords = (geom) => {
+  if (!geom?.coordinates) {
+    return []
+  }
+  switch (geom.type) {
+    case 'LineString': return geom.coordinates
+    case 'Polygon': return geom.coordinates.flatMap(ring => ring.slice(0, -1))
+    case 'MultiLineString': return geom.coordinates.flat(1)
+    case 'MultiPolygon': return geom.coordinates.flatMap(poly => poly.flatMap(ring => ring.slice(0, -1)))
+    default: return []
+  }
+}
+
+/**
+ * Segment metadata for each ring or part.
+ * { start, length, path, closed }
+ */
+export const getRingSegments = (geom) => {
+  if (!geom?.coordinates) {
+    return []
+  }
+  const segments = []
+  let start = 0
+
+  switch (geom.type) {
+    case 'LineString':
+      segments.push({ start: 0, length: geom.coordinates.length, path: [], closed: false })
+      break
+    case 'Polygon':
+      geom.coordinates.forEach((ring, i) => {
+        const len = ring.length - 1
+        segments.push({ start, length: len, path: [i], closed: true })
+        start += len
+      })
+      break
+    case 'MultiLineString':
+      geom.coordinates.forEach((line, i) => {
+        segments.push({ start, length: line.length, path: [i], closed: false })
+        start += line.length
+      })
+      break
+    case 'MultiPolygon':
+      geom.coordinates.forEach((polygon, pi) => {
+        polygon.forEach((ring, ri) => {
+          const len = ring.length - 1
+          segments.push({ start, length: len, path: [pi, ri], closed: true })
+          start += len
+        })
+      })
+      break
+    default:
+      break
+  }
+
+  return segments
+}
+
+/** Find which segment a flat vertex index belongs to. */
+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
+}
+
+/** Return a reference to the coordinate array at a hierarchical path. */
+export const getModifiableCoords = (geojsonGeometry, path) => {
+  let coords = geojsonGeometry.coordinates
+  for (const idx of path) {
+    coords = coords[idx]
+  }
+  return coords
+}
+
+/** Compute midpoints for all segments, respecting open/closed ring boundaries. */
+export const getMidpoints = (geom) => {
+  const coords = getCoords(geom)
+  const segments = getRingSegments(geom)
+  if (!coords.length || !segments.length) {
+    return []
+  }
+
+  const midpoints = []
+  for (const seg of segments) {
+    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
+}

package/plugins/draw/src/adapters/openlayers/utils/geometryHelpers.test.js

@@ -0,0 +1,76 @@
+import { getCoords, getRingSegments, getSegmentForIndex, getModifiableCoords, getMidpoints } from './geometryHelpers.js'
+
+const SQUARE = [[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]
+const HOLE = [[2, 2], [4, 2], [4, 4], [2, 2]]
+const LINE = [[0, 0], [10, 0], [20, 0]]
+
+describe('getCoords flattens editable vertices (closing coords stripped)', () => {
+  test.each([
+    ['LineString', { type: 'LineString', coordinates: LINE }, 3],
+    ['Polygon with hole', { type: 'Polygon', coordinates: [SQUARE, HOLE] }, 7],
+    ['MultiLineString', { type: 'MultiLineString', coordinates: [LINE, LINE] }, 6],
+    ['MultiPolygon', { type: 'MultiPolygon', coordinates: [[SQUARE], [SQUARE, HOLE]] }, 11]
+  ])('%s', (_, geom, expected) => {
+    expect(getCoords(geom)).toHaveLength(expected)
+  })
+
+  test('missing or unsupported geometry yields an empty array', () => {
+    expect(getCoords(null)).toEqual([])
+    expect(getCoords({ type: 'Point' })).toEqual([])
+    expect(getCoords({ type: 'Point', coordinates: [0, 0] })).toEqual([])
+  })
+})
+
+describe('getRingSegments maps flat indices back to parts', () => {
+  test('describes each ring/part with its offset, length, path and closure', () => {
+    expect(getRingSegments({ type: 'LineString', coordinates: LINE }))
+      .toEqual([{ start: 0, length: 3, path: [], closed: false }])
+    expect(getRingSegments({ type: 'Polygon', coordinates: [SQUARE, HOLE] }))
+      .toEqual([
+        { start: 0, length: 4, path: [0], closed: true },
+        { start: 4, length: 3, path: [1], closed: true }
+      ])
+    expect(getRingSegments({ type: 'MultiLineString', coordinates: [LINE, LINE] })[1])
+      .toEqual({ start: 3, length: 3, path: [1], closed: false })
+    expect(getRingSegments({ type: 'MultiPolygon', coordinates: [[SQUARE], [HOLE]] })[1])
+      .toEqual({ start: 4, length: 3, path: [1, 0], closed: true })
+  })
+
+  test('missing or unsupported geometry yields no segments', () => {
+    expect(getRingSegments(null)).toEqual([])
+    expect(getRingSegments({ type: 'Point', coordinates: [0, 0] })).toEqual([])
+  })
+})
+
+describe('getSegmentForIndex', () => {
+  const segments = getRingSegments({ type: 'Polygon', coordinates: [SQUARE, HOLE] })
+
+  test('finds the owning segment and the local index within it', () => {
+    expect(getSegmentForIndex(segments, 5)).toEqual({ segment: segments[1], localIdx: 1 })
+  })
+
+  test('returns null beyond the last segment', () => {
+    expect(getSegmentForIndex(segments, 7)).toBeNull()
+  })
+})
+
+test('getModifiableCoords returns a live reference at a hierarchical path', () => {
+  const geom = { type: 'MultiPolygon', coordinates: [[SQUARE], [HOLE]] }
+  const ring = getModifiableCoords(geom, [1, 0])
+  ring[0] = [3, 3]
+  expect(geom.coordinates[1][0][0]).toEqual([3, 3])
+  expect(getModifiableCoords(geom, [])).toBe(geom.coordinates)
+})
+
+describe('getMidpoints', () => {
+  test('closed rings wrap (one midpoint per vertex); open lines do not', () => {
+    expect(getMidpoints({ type: 'Polygon', coordinates: [SQUARE] }))
+      .toEqual([[5, 0], [10, 5], [5, 10], [0, 5]])
+    expect(getMidpoints({ type: 'LineString', coordinates: LINE }))
+      .toEqual([[5, 0], [15, 0]])
+  })
+
+  test('empty geometry yields no midpoints', () => {
+    expect(getMidpoints({ type: 'LineString', coordinates: [] })).toEqual([])
+  })
+})

package/plugins/draw/src/adapters/openlayers/utils/olCoords.js

@@ -0,0 +1,35 @@
+/**
+ * Thin helpers bridging OL's array-based pixel/coordinate API
+ * and the {x, y} object convention used in touch/keyboard handlers.
+ */
+
+/** OL coordinate [e, n] → screen pixel { x, y } */
+export const coordToPixel = (map, coord) => {
+  const px = map.getPixelFromCoordinate(coord)
+  if (!px) { return null }
+  return { x: px[0], y: px[1] }
+}
+
+/** Screen pixel { x, y } → OL coordinate [e, n] */
+export const pixelToCoord = (map, pixel) => {
+  return map.getCoordinateFromPixel([pixel.x, pixel.y])
+}
+
+/** Pixel distance between two { x, y } points */
+export const pixelDist = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2)
+
+/** OL pixel array [x, y] → { x, y } */
+export const arrayToPixel = ([x, y]) => ({ x, y })
+
+/** { x, y } → OL pixel array [x, y] */
+export const pixelToArray = ({ x, y }) => [x, y]
+
+/**
+ * Nudge a coordinate by (dx, dy) screen pixels.
+ * Converts pixel offset to map coordinate delta using the current resolution.
+ */
+export const nudgeCoord = (map, coord, dx, dy) => {
+  const px = map.getPixelFromCoordinate(coord)
+  if (!px) { return coord }
+  return map.getCoordinateFromPixel([px[0] + dx, px[1] + dy])
+}

package/plugins/draw/src/adapters/openlayers/utils/olCoords.test.js

@@ -0,0 +1,22 @@
+import { coordToPixel, pixelToCoord, pixelDist, arrayToPixel, pixelToArray, nudgeCoord } from './olCoords.js'
+import { createFakeMap } from '../__helpers__/harness.js'
+
+const map = createFakeMap()
+
+test('converts between OL arrays and {x, y} pixel objects', () => {
+  expect(coordToPixel(map, [10, 20])).toEqual({ x: 10, y: 20 })
+  expect(pixelToCoord(map, { x: 10, y: 20 })).toEqual([10, 20])
+  expect(arrayToPixel([1, 2])).toEqual({ x: 1, y: 2 })
+  expect(pixelToArray({ x: 1, y: 2 })).toEqual([1, 2])
+  expect(pixelDist({ x: 0, y: 0 }, { x: 3, y: 4 })).toBe(5)
+})
+
+test('nudgeCoord offsets a coordinate by screen pixels', () => {
+  expect(nudgeCoord(map, [10, 20], 5, -3)).toEqual([15, 17])
+})
+
+test('unprojectable coordinates return null / stay put', () => {
+  const blindMap = { getPixelFromCoordinate: () => null }
+  expect(coordToPixel(blindMap, [1, 1])).toBeNull()
+  expect(nudgeCoord(blindMap, [1, 1], 5, 5)).toEqual([1, 1])
+})

package/plugins/draw/src/adapters/openlayers/utils/sketchHelpers.js

@@ -0,0 +1,22 @@
+/**
+ * Coordinate-layout helpers for ol/interaction/Draw sketch geometries.
+ *
+ * During drawing OL keeps a trailing rubber-band coordinate, and for Polygons
+ * additionally appends a copy of the first coordinate to close the ring:
+ *   LineString:   [...placed, rubber_band]
+ *   Polygon ring: [...placed, rubber_band, v0_closing]
+ *
+ * This is the single place that layout is encoded — if an OL upgrade changes
+ * the Draw interaction's sketch bookkeeping, update it here.
+ */
+const TRAILING_COORDS = { Polygon: 2, LineString: 1 }
+
+/** Placed vertex coordinates of an in-progress sketch geometry. */
+export const getPlacedSketchCoords = (geom) => {
+  const type = geom.getType()
+  const coords = type === 'Polygon' ? (geom.getCoordinates()[0] ?? []) : geom.getCoordinates()
+  return coords.slice(0, -TRAILING_COORDS[type])
+}
+
+/** Last vertex committed by OL's Draw interaction, or null if none placed yet. */
+export const getLastPlacedSketchCoord = (geom) => getPlacedSketchCoords(geom).at(-1) ?? null

package/plugins/draw/src/adapters/openlayers/utils/sketchHelpers.test.js

@@ -0,0 +1,18 @@
+import Polygon from 'ol/geom/Polygon.js'
+import LineString from 'ol/geom/LineString.js'
+import { getPlacedSketchCoords, getLastPlacedSketchCoord } from './sketchHelpers.js'
+
+test('strips the rubber band (and the closing coord for polygons) to expose placed vertices', () => {
+  const poly = new Polygon([[[0, 0], [10, 0], [5, 5], [0, 0]]]) // 2 placed + rubber + closing
+  expect(getPlacedSketchCoords(poly)).toEqual([[0, 0], [10, 0]])
+  expect(getLastPlacedSketchCoord(poly)).toEqual([10, 0])
+
+  const line = new LineString([[0, 0], [10, 0], [5, 5]]) // 2 placed + rubber
+  expect(getPlacedSketchCoords(line)).toEqual([[0, 0], [10, 0]])
+  expect(getLastPlacedSketchCoord(line)).toEqual([10, 0])
+})
+
+test('empty or rubber-band-only sketches have no placed vertices', () => {
+  expect(getPlacedSketchCoords(new Polygon([]))).toEqual([])
+  expect(getLastPlacedSketchCoord(new LineString([]))).toBeNull()
+})