@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

package/plugins/draw/src/adapters/openlayers/core/styles.js

@@ -2,9 +2,13 @@ import Style from 'ol/style/Style.js'
 import Fill from 'ol/style/Fill.js'
 import Stroke from 'ol/style/Stroke.js'
 import CircleStyle from 'ol/style/Circle.js'
+import Icon from 'ol/style/Icon.js'
 import MultiPoint from 'ol/geom/MultiPoint.js'
 import { SIZES } from '../defaults.js'
 import { getPlacedSketchCoords } from '../utils/sketchHelpers.js'
+import { getCachedSymbolImage } from '../../../../../../providers/beta/openlayers/src/utils/symbolImages.js'
+import { symbolRegistry } from '../../../../../../src/services/symbolRegistry.js'
+import { getSymbolAnchor } from '../../../../../../src/utils/symbolUtils.js'
 
 const HALO_RADIUS_OFFSET = 3
 
@@ -74,12 +78,74 @@ const createSketchLineStyles = (colors) => ({
   })
 })
 
+// Placeholder for a committed point feature that has no symbol config, or whose symbol
+// image hasn't rasterised/cached yet (point/pointSymbolImages.js resolves it asynchronously
+// after the feature is added to the store — this is what renders in the gap, and what
+// permanently renders for a point with no symbol properties at all). Stroke/Fill styles
+// have no effect on a Point geometry, so without this branch a committed point renders
+// invisibly.
+const createPointPlaceholderStyle = (colors) => new Style({
+  image: new CircleStyle({
+    radius: SIZES.vertexRadius + HALO_RADIUS_OFFSET,
+    fill: new Fill({ color: colors.shapeFill }),
+    stroke: new Stroke({ color: colors.shapeStroke, width: 2 })
+  })
+})
+
+// ol/style/Icon defaults (anchorOrigin: 'top-left', anchorXUnits/anchorYUnits: 'fraction')
+// already match symbolAnchor's own [x,y]-fraction-from-top-left convention, so unlike the
+// MapLibre adapter (whose icon-anchor only has 9 discrete positions) no offset compensation
+// is needed here — the raw anchor is usable as-is. Icon style instances are cached per
+// imageId+anchor+pixelRatio so a style function running every render frame doesn't rebuild
+// one each time.
+const createPointStyles = (colors) => {
+  const pointStyle = createPointPlaceholderStyle(colors)
+  const iconStyleCache = new Map()
+
+  // imageIdProp lets edit_point's own per-feature style override (point/editPointMode.js)
+  // ask for the precomputed "selected" (black ring) variant instead of the normal one — the
+  // same variant the interact plugin's own highlight already uses, via the same
+  // symbolSelectedImageId point/pointSymbolImages.js resolves for every point.
+  const getPointIconStyle = (properties, imageIdProp = 'symbolImageId') => {
+    const imageId = properties[imageIdProp]
+    const canvas = imageId && getCachedSymbolImage(imageId)
+    if (!canvas) {
+      return null
+    }
+    const symbolDef = symbolRegistry.getSymbolDef(properties)
+    const [anchorX, anchorY] = getSymbolAnchor(properties, symbolDef)
+    // The cached canvas was rasterised at viewBox × pixelRatio device pixels for crispness
+    // (point/pointSymbolImages.js) — unlike MapLibre's map.addImage(id, data, {pixelRatio}),
+    // which uses the registered pixelRatio to auto-derive the displayed CSS size, ol/style/
+    // Icon draws its source at native pixel size by default, so `scale` has to cancel that
+    // back out here or the icon renders pixelRatio× too big.
+    const pixelRatio = properties.symbolPixelRatio || 1
+    const cacheKey = `${imageId}|${anchorX}|${anchorY}|${pixelRatio}`
+    let iconStyle = iconStyleCache.get(cacheKey)
+    if (!iconStyle) {
+      iconStyle = new Style({ image: new Icon({ img: canvas, anchor: [anchorX, anchorY], scale: 1 / pixelRatio }) })
+      iconStyleCache.set(cacheKey, iconStyle)
+    }
+    return iconStyle
+  }
+
+  return {
+    pointStyleFor: (feature) => getPointIconStyle(feature.getProperties()) ?? pointStyle,
+    // Falls back through selected → normal → placeholder, so edit_point still shows
+    // something sensible before the selected variant has resolved.
+    selectedPointStyleFor: (feature) => {
+      const properties = feature.getProperties()
+      return getPointIconStyle(properties, 'symbolSelectedImageId') ?? getPointIconStyle(properties) ?? pointStyle
+    }
+  }
+}
+
 /**
  * Create all draw-ol style instances for the given resolved color set.
  *
  * @param {object} colors - Output of resolveColors()
  * @returns {{ vertexStyle, selectedVertexStyle, midpointStyle, selectedMidpointStyle,
- *             editFeatureStyle, createSketchStyle, createFeatureStyle }}
+ *             editFeatureStyle, selectedPointStyleFor, createSketchStyle, createFeatureStyle }}
  */
 export const createStyles = (colors) => {
   const { vertexImage, vertexStyle, selectedVertexStyle } = createVertexStyles(colors)
@@ -130,7 +196,12 @@ export const createStyles = (colors) => {
     return type === geometryType ? [lineStyle, sketchVertexStyle] : [lineStyle]
   }
 
+  const { pointStyleFor, selectedPointStyleFor } = createPointStyles(colors)
+
   const createFeatureStyle = () => (feature) => {
+    if (feature.getGeometry().getType() === 'Point') {
+      return [pointStyleFor(feature)]
+    }
     const p = feature.getProperties()
     const id = colors.mapStyleId
     const stroke = (id && p[`stroke${capitalize(id)}`]) || p.stroke || colors.shapeStroke
@@ -149,6 +220,7 @@ export const createStyles = (colors) => {
     selectedMidpointStyle,
     editFeatureStyle,
     editFeatureStyleInvalid,
+    selectedPointStyleFor,
     createSketchStyle,
     createFeatureStyle
   }

package/plugins/draw/src/adapters/openlayers/core/styles.test.js

@@ -1,9 +1,11 @@
 import Point from 'ol/geom/Point.js'
 import LineString from 'ol/geom/LineString.js'
 import Feature from 'ol/Feature.js'
+import Icon from 'ol/style/Icon.js'
 import { createStyles } from './styles.js'
 import { SIZES } from '../defaults.js'
-import { polygonFeature, lineFeature } from '../__helpers__/harness.js'
+import { polygonFeature, lineFeature, pointFeature } from '../__helpers__/harness.js'
+import { getOrCreateSymbolImage, clearSymbolImageCache } from '../../../../../../providers/beta/openlayers/src/utils/symbolImages.js'
 
 const colors = {
   editStroke: '#e5',
@@ -117,7 +119,11 @@ describe('sketch styles while drawing', () => {
 })
 
 describe('createFeatureStyle (inactive shapes)', () => {
-  const styleFor = (properties) => styles.createFeatureStyle()({ getProperties: () => properties })[0]
+  const styleFor = (properties) => {
+    const feature = polygonFeature([[0, 0], [1, 0], [1, 1], [0, 0]])
+    feature.setProperties(properties)
+    return styles.createFeatureStyle()(feature)[0]
+  }
 
   test('falls back to the configured shape colours', () => {
     const style = styleFor({})
@@ -137,7 +143,120 @@ describe('createFeatureStyle (inactive shapes)', () => {
 
   test('without a map style id only the generic properties apply', () => {
     const plain = createStyles({ ...colors, mapStyleId: null })
-    const style = plain.createFeatureStyle()({ getProperties: () => ({ strokeRoad: '#r1' }) })[0]
+    const feature = polygonFeature([[0, 0], [1, 0], [1, 1], [0, 0]])
+    feature.setProperties({ strokeRoad: '#r1' })
+    const style = plain.createFeatureStyle()(feature)[0]
     expect(style.getStroke().getColor()).toBe(colors.shapeStroke)
   })
+
+  test('a committed Point feature gets the placeholder circle style, not Stroke/Fill', () => {
+    const style = styles.createFeatureStyle()(pointFeature([5, 5]))[0]
+    expect(style.getImage()).toBeTruthy()
+    expect(style.getStroke()).toBeFalsy()
+    expect(style.getFill()).toBeFalsy()
+  })
+
+  test('a Point feature with a resolved+cached symbolImageId renders a real Icon, not the placeholder', () => {
+    HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+      this._ctx ??= { putImageData: jest.fn() }
+      return this._ctx
+    })
+    clearSymbolImageCache()
+    const canvas = getOrCreateSymbolImage('symbol-pin-1x', { width: 10, height: 10 })
+
+    const feature = pointFeature([5, 5])
+    feature.setProperties({ symbol: 'pin', symbolImageId: 'symbol-pin-1x' })
+
+    const style = styles.createFeatureStyle()(feature)[0]
+    expect(style.getImage()).toBeInstanceOf(Icon)
+    expect(style.getImage().getImage(1)).toBe(canvas)
+  })
+
+  test('reuses the same Icon Style instance across renders for the same imageId/anchor/pixelRatio', () => {
+    HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+      this._ctx ??= { putImageData: jest.fn() }
+      return this._ctx
+    })
+    clearSymbolImageCache()
+    getOrCreateSymbolImage('symbol-pin-cache', { width: 10, height: 10 })
+
+    const feature = pointFeature([5, 5])
+    feature.setProperties({ symbol: 'pin', symbolImageId: 'symbol-pin-cache' })
+
+    const styleFn = styles.createFeatureStyle()
+    const first = styleFn(feature)[0]
+    const second = styleFn(feature)[0] // a style function runs every render frame
+    expect(second).toBe(first)
+  })
+
+  test('scales the Icon down by the rasterisation pixelRatio, so a high-DPI raster still displays at its intended CSS size', () => {
+    HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+      this._ctx ??= { putImageData: jest.fn() }
+      return this._ctx
+    })
+    clearSymbolImageCache()
+    getOrCreateSymbolImage('symbol-pin-4x', { width: 176, height: 176 }) // 44 viewBox × pixelRatio 4
+
+    const feature = pointFeature([5, 5])
+    feature.setProperties({ symbol: 'pin', symbolImageId: 'symbol-pin-4x', symbolPixelRatio: 4 })
+
+    const style = styles.createFeatureStyle()(feature)[0]
+    expect(style.getImage().getScale()).toBe(0.25)
+  })
+
+  test('defaults to scale 1 when symbolPixelRatio is missing', () => {
+    HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+      this._ctx ??= { putImageData: jest.fn() }
+      return this._ctx
+    })
+    clearSymbolImageCache()
+    getOrCreateSymbolImage('symbol-pin-no-ratio', { width: 44, height: 44 })
+
+    const feature = pointFeature([5, 5])
+    feature.setProperties({ symbol: 'pin', symbolImageId: 'symbol-pin-no-ratio' })
+
+    const style = styles.createFeatureStyle()(feature)[0]
+    expect(style.getImage().getScale()).toBe(1)
+  })
+
+  // edit_point's per-feature style override (point/editPointMode.js) uses this to keep
+  // showing the same "selected" (black ring) look the interact plugin's own highlight
+  // already uses for the whole edit session — see selectedPointStyleFor's own comment.
+  test('selectedPointStyleFor renders the selected variant, falling back to normal then the placeholder', () => {
+    HTMLCanvasElement.prototype.getContext = jest.fn(function () {
+      this._ctx ??= { putImageData: jest.fn() }
+      return this._ctx
+    })
+    clearSymbolImageCache()
+    const selectedCanvas = getOrCreateSymbolImage('symbol-pin-selected', { width: 10, height: 10 })
+
+    const selected = pointFeature([5, 5])
+    selected.setProperties({ symbol: 'pin', symbolImageId: 'symbol-pin-normal', symbolSelectedImageId: 'symbol-pin-selected' })
+    const selectedStyle = styles.selectedPointStyleFor(selected)
+    expect(selectedStyle.getImage()).toBeInstanceOf(Icon)
+    expect(selectedStyle.getImage().getImage(1)).toBe(selectedCanvas)
+
+    // No selected variant resolved yet → falls back to the normal icon
+    const normalCanvas = getOrCreateSymbolImage('symbol-pin-normal-only', { width: 10, height: 10 })
+    const normalOnly = pointFeature([5, 5])
+    normalOnly.setProperties({ symbol: 'pin', symbolImageId: 'symbol-pin-normal-only' })
+    const fallbackStyle = styles.selectedPointStyleFor(normalOnly)
+    expect(fallbackStyle.getImage().getImage(1)).toBe(normalCanvas)
+
+    // Neither resolved → the placeholder circle
+    const placeholderStyle = styles.selectedPointStyleFor(pointFeature([5, 5]))
+    expect(placeholderStyle.getStroke()).toBeFalsy()
+    expect(placeholderStyle.getImage()).not.toBeInstanceOf(Icon)
+  })
+
+  test('a Point feature whose symbolImageId has not been rasterised/cached yet falls back to the placeholder', () => {
+    clearSymbolImageCache()
+    const feature = pointFeature([5, 5])
+    feature.setProperties({ symbol: 'pin', symbolImageId: 'symbol-not-cached' })
+
+    const style = styles.createFeatureStyle()(feature)[0]
+    expect(style.getImage()).not.toBeInstanceOf(Icon)
+    expect(style.getStroke()).toBeFalsy()
+    expect(style.getFill()).toBeFalsy()
+  })
 })

package/plugins/draw/src/adapters/openlayers/draw/DrawMode.js

@@ -172,6 +172,7 @@ const buildDrawInput = ({ drawInteraction, options, geometryType, getSketch, upd
       addVertexButtonId: options.addVertexButtonId,
       mapProvider: options.mapProvider,
       snap: options.snap,
+      crossHair: options.crossHair,
       onUndo: () => { drawInteraction.removeLastPoint(); updateVertexCount(); emitUndoValidation() },
       canFinish: () => canFinish(geometryType, getSketch()),
       canPlace: canPlaceVertex

package/plugins/draw/src/adapters/openlayers/draw/DrawMode.test.js

@@ -4,6 +4,8 @@ import { createFeatureStore } from '../core/featureStore.js'
 import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
 import { STYLES_CHANGED_EVENT } from '../core/internalEvents.js'
 import { createFakeMap, createFakeManager, polygonFeature, lineFeature } from '../__helpers__/harness.js'
+import Feature from 'ol/Feature.js'
+import Polygon from 'ol/geom/Polygon.js'
 
 jest.mock('./drawInput.js', () => ({
   createDrawInput: jest.fn(() => ({
@@ -174,6 +176,16 @@ describe('drawing lifecycle', () => {
     expect(manager.styles.createSketchStyle).not.toHaveBeenCalledWith('Polygon', true)
   })
 
+  test('a Polygon sketch with no ring yet (freshly started, before the first coordinate) never throws or goes dashed', () => {
+    const { manager, interaction } = setup('Polygon')
+    const sketch = new Feature(new Polygon([]))
+    sketch.setId('shape-1')
+    interaction.dispatchEvent({ type: 'drawstart', feature: sketch })
+    // coords[0] is undefined with zero rings — displayedSketch's `?? []` fallback covers it.
+    expect(() => sketch.getGeometry().setCoordinates([])).not.toThrow()
+    expect(manager.styles.createSketchStyle).not.toHaveBeenCalledWith('Polygon', true)
+  })
+
   test('2 placed vertices + cursor never go dashed (below the 4-point threshold)', () => {
     const { manager, interaction } = setup('Polygon')
     const sketch = polygonFeature([[0, 0], [5, 5], [0, 0]])
@@ -187,6 +199,20 @@ describe('drawing lifecycle', () => {
     expect(typeof inputOptions.canPlace).toBe('function')
   })
 
+  test('drawInput receives the crossHair passed to the mode, so it can sync visibility itself', () => {
+    const map = createFakeMap()
+    const manager = createFakeManager()
+    manager.store = createFeatureStore()
+    const crossHair = { fixAtCenter: jest.fn(), hide: jest.fn() }
+    createDrawMode({
+      map,
+      manager,
+      options: { geometryType: 'Polygon', featureId: 'shape-1', properties: {}, container: null, snap: null, crossHair }
+    })
+    const inputOptions = createDrawInput.mock.calls.at(-1)[0].options
+    expect(inputOptions.crossHair).toBe(crossHair)
+  })
+
   test('a placement-vetoing path disables Add point; a legal one re-enables it', () => {
     const { emitted, interaction } = setup('Polygon')
     const sketch = polygonFeature([[0, 0], [5, 5], [0, 0]])
@@ -249,7 +275,7 @@ describe('drawing lifecycle', () => {
     expect(changed).toHaveBeenCalled()
   })
 
-  test('setInterfaceType forwards to the draw input (e.g. DrawInit syncing MoveControl-driven interface changes mid-session)', () => {
+  test('setInterfaceType forwards to the draw input (e.g. DrawInit syncing MoveControls-driven interface changes mid-session)', () => {
     const { mode, input } = setup('Polygon')
     mode.setInterfaceType('touch')
     expect(input.setInterfaceType).toHaveBeenCalledWith('touch')

package/plugins/draw/src/adapters/openlayers/draw/drawInput.js

@@ -2,7 +2,23 @@ import { createVertexPlacement } from './vertexPlacement.js'
 
 const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
 
-const wireInputEvents = ({
+// Mirrors DrawInit.jsx's fixAtCenter()/hide() gate, but reasserted on every interface-type transition this module detects — matching MapLibre's own onSetup/onInterfaceTypeChange redundancy.
+// Exported alongside wireInputEvents for the same reason — point/drawPointMode.js reuses it directly.
+export const applyCrossHairVisibility = (crossHair, type) => {
+  if (!crossHair) { return }
+  if (['touch', 'keyboard'].includes(type)) {
+    crossHair.fixAtCenter()
+  } else {
+    crossHair.hide()
+  }
+}
+
+// Exported so point/drawPointMode.js can reuse this DOM-wiring layer directly — it's
+// already generic (crosshair/interface-type tracking, add-vertex-button/Enter/undo
+// listeners), parametrised entirely by the callbacks passed in, with no ring-shaped
+// assumptions baked in. draw_point supplies point-shaped versions of those callbacks
+// (no rubber band, no undo) rather than this file growing a second copy of the wiring.
+export const wireInputEvents = ({
   container, addVertexButtonId, olView, onUndo,
   getInterfaceType, setInterfaceType, clearLastCoord,
   updateRubberbanding, placeVertex
@@ -83,7 +99,7 @@ const wireInputEvents = ({
  * @returns {{ getInterfaceType: () => string, destroy: () => void }}
  */
 export const createDrawInput = ({ drawInteraction, options }) => {
-  const { container, addVertexButtonId, mapProvider, snap, onUndo, canFinish, canPlace } = options
+  const { container, addVertexButtonId, mapProvider, snap, onUndo, canFinish, canPlace, crossHair } = options
   let interfaceType = options.interfaceType ?? 'mouse'
   const getInterfaceType = () => interfaceType
 
@@ -105,12 +121,15 @@ export const createDrawInput = ({ drawInteraction, options }) => {
     olView,
     onUndo,
     getInterfaceType,
-    setInterfaceType: (t) => { interfaceType = t },
+    setInterfaceType: (t) => { interfaceType = t; applyCrossHairVisibility(crossHair, t) },
     clearLastCoord: placement.clearLastCoord,
     updateRubberbanding: placement.updateRubberbanding,
     placeVertex: placement.placeVertex
   })
 
+  // Sync on creation too (mirrors MapLibre's own onSetup), so the crosshair reflects the mode's starting interface type immediately.
+  applyCrossHairVisibility(crossHair, interfaceType)
+
   // change:center fires once when a keyboard pan animation starts; postrender tracks each frame.
   const onMapRender = () => {
     if (interfaceType !== 'mouse' && olView?.getAnimating()) {
@@ -122,11 +141,12 @@ export const createDrawInput = ({ drawInteraction, options }) => {
   return {
     getInterfaceType,
     // Called when the global interface type changes without any pointer/touch/key
-    // event landing on the map container (e.g. panning via MoveControl after
+    // event landing on the map container (e.g. panning via MoveControls after
     // switching to touch) — refresh the rubber band immediately rather than
     // waiting for the next incidental change:center/postrender event.
     setInterfaceType (type) {
       interfaceType = type
+      applyCrossHairVisibility(crossHair, type)
       if (type !== 'mouse') {
         placement.updateRubberbanding()
       }

package/plugins/draw/src/adapters/openlayers/draw/drawInput.test.js

@@ -10,7 +10,7 @@ jest.mock('./vertexPlacement.js', () => ({
   }))
 }))
 
-const setup = (interfaceType = 'mouse') => {
+const setup = (interfaceType = 'mouse', crossHair) => {
   const map = createFakeMap()
   const container = createContainer()
   const button = document.createElement('button')
@@ -19,13 +19,15 @@ const setup = (interfaceType = 'mouse') => {
   const onUndo = jest.fn()
   const input = createDrawInput({
     drawInteraction: { getMap: () => map },
-    options: { container, addVertexButtonId: 'add-pt', interfaceType, mapProvider: {}, snap: null, onUndo }
+    options: { container, addVertexButtonId: 'add-pt', interfaceType, mapProvider: {}, snap: null, onUndo, crossHair }
   })
   const placement = createVertexPlacement.mock.results.at(-1).value
   liveInputs.push(input)
   return { map, view: map.getView(), container, button, input, placement, onUndo }
 }
 
+const fakeCrossHair = () => ({ fixAtCenter: jest.fn(), hide: jest.fn() })
+
 const liveInputs = []
 afterEach(() => {
   liveInputs.splice(0).forEach((i) => i.destroy())
@@ -109,7 +111,7 @@ test('pointer moves and map pans update the rubber band except for the mouse int
   expect(mouse.placement.updateRubberbanding).not.toHaveBeenCalled()
 })
 
-test('setInterfaceType updates the interface and refreshes the rubber band immediately for non-mouse types, e.g. switching to touch and panning via MoveControl mid-session', () => {
+test('setInterfaceType updates the interface and refreshes the rubber band immediately for non-mouse types, e.g. switching to touch and panning via MoveControls mid-session', () => {
   const { input, placement } = setup('mouse')
   input.setInterfaceType('touch')
   expect(input.getInterfaceType()).toBe('touch')
@@ -130,6 +132,48 @@ test('keyboard pan animations keep the rubber band anchored via postrender', ()
   expect(placement.updateRubberbanding).toHaveBeenCalledTimes(1)
 })
 
+test('syncs the crosshair on creation to match the starting interface type', () => {
+  const touchCrossHair = fakeCrossHair()
+  setup('touch', touchCrossHair)
+  expect(touchCrossHair.fixAtCenter).toHaveBeenCalled()
+  expect(touchCrossHair.hide).not.toHaveBeenCalled()
+
+  const mouseCrossHair = fakeCrossHair()
+  setup('mouse', mouseCrossHair)
+  expect(mouseCrossHair.hide).toHaveBeenCalled()
+  expect(mouseCrossHair.fixAtCenter).not.toHaveBeenCalled()
+})
+
+test('shows the crosshair when a key press switches to keyboard, hides it when a mouse pointerdown switches back', () => {
+  const crossHair = fakeCrossHair()
+  const { container } = setup('mouse', crossHair)
+  expect(crossHair.hide).toHaveBeenCalledTimes(1) // initial sync at creation, starting interface is 'mouse'
+
+  container.focus()
+  key({ key: 'ArrowUp' })
+  expect(crossHair.fixAtCenter).toHaveBeenCalledTimes(1)
+
+  container.dispatchEvent(Object.assign(new Event('pointerdown'), { pointerType: 'mouse' }))
+  expect(crossHair.hide).toHaveBeenCalledTimes(2)
+})
+
+test('setInterfaceType syncs the crosshair the same way as a detected input change', () => {
+  const crossHair = fakeCrossHair()
+  const { input } = setup('mouse', crossHair)
+  expect(crossHair.hide).toHaveBeenCalledTimes(1) // initial sync at creation, starting interface is 'mouse'
+
+  input.setInterfaceType('touch')
+  expect(crossHair.fixAtCenter).toHaveBeenCalledTimes(1)
+
+  input.setInterfaceType('mouse')
+  expect(crossHair.hide).toHaveBeenCalledTimes(2)
+})
+
+test('tolerates a missing crosshair (e.g. edit_vertex mode, which does not supply one)', () => {
+  const { input } = setup('mouse')
+  expect(() => input.setInterfaceType('keyboard')).not.toThrow()
+})
+
 test('destroy removes all listeners', () => {
   const { container, button, input, placement } = setup()
   input.destroy()

package/plugins/draw/src/adapters/openlayers/edit/EditMode.js

@@ -291,7 +291,7 @@ const buildModeApi = ({ manager, store, olFeature, originalFeatureStyle, selecti
 
     undo: actions.doUndo,
     deleteVertex: actions.doDeleteVertex,
-    // MoveControl's D-pad, routed here via mapProvider.activeMoveTarget (see
+    // MoveControls' D-pad, routed here via mapProvider.activeMoveTarget (see
     // events.js) once a vertex is selected.
     nudgeSelectedVertex: parts.keyboardHandler.nudgeByDelta,
 

package/plugins/draw/src/adapters/openlayers/edit/EditMode.test.js

@@ -71,6 +71,13 @@ test('a mid-drag crossing turns the stroke dashed live, and back when it clears'
   expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyle)
 })
 
+test('a Polygon with no ring yet (transiently empty mid-drag) never throws computing numVertices', () => {
+  const { olFeature } = setup()
+  // OL's own Polygon geometry supports zero rings natively — coordinates[0] is undefined,
+  // exercising updateLiveValidity's `?? 1` fallback rather than a real drag scenario.
+  expect(() => olFeature.getGeometry().setCoordinates([])).not.toThrow()
+})
+
 test('a validity flip repaints the map without touching the feature — Modify tracks its own drag via feature #change, which setStyle() would trip', () => {
   const { map, olFeature } = setup()
   const renderCallsBefore = map.render.mock.calls.length
@@ -88,6 +95,30 @@ test('validity flips while editing also gate the Done button', () => {
     expect.objectContaining({ valid: true }))
 })
 
+test('a LineString edit computes numVertices directly from coordinates.length (no ring -1 adjustment)', () => {
+  const map = createFakeMap()
+  const manager = createFakeManager()
+  manager.store = createFeatureStore()
+  manager.store.add({ type: 'Feature', id: 'l1', properties: {}, geometry: { type: 'LineString', coordinates: [[0, 0], [100, 0], [100, 100]] } })
+  const container = createContainer()
+  map.getViewport().appendChild(container)
+  const mode = createEditMode({
+    map,
+    manager,
+    options: { featureId: 'l1', container, interfaceType: 'mouse', deleteVertexButtonId: 'del-v', snap: null }
+  })
+  liveModes.push(mode)
+  const olFeature = manager.store.getOL('l1')
+
+  expect(manager.emit).toHaveBeenCalledWith(ADAPTER_EVENTS.VERTEX_CHANGE, { numVertices: 3 })
+
+  // LIVE_RULES (self-intersect/area) only ever apply to Polygon (see rules.js's getPolygon
+  // guard) — a self-crossing LineString still drives updateLiveValidity, but never flips
+  // the stroke invalid, unlike the Polygon case above.
+  olFeature.getGeometry().setCoordinates([[0, 0], [100, 100], [100, 0], [0, 100]])
+  expect(currentStyle(olFeature)).toBe(manager.styles.editFeatureStyle)
+})
+
 test('the user callback runs throttled during an edit drag', () => {
   jest.useFakeTimers()
   const { manager, olFeature } = setup()
@@ -123,7 +154,7 @@ test('select via pointer, delete the vertex, then undo restores it', () => {
   mode.undo() // empty stack — no-op
 })
 
-test('nudgeSelectedVertex (MoveControl D-pad) moves the selected vertex and is undoable', () => {
+test('nudgeSelectedVertex (MoveControls D-pad) moves the selected vertex and is undoable', () => {
   const { container, manager, mode, ring } = setup()
   container.dispatchEvent(domEvent('pointerdown', { pointerType: 'mouse', clientX: 100, clientY: 0 }))
   mode.nudgeSelectedVertex(1, 0, true)

package/plugins/draw/src/adapters/openlayers/edit/keyboardHandler.js

@@ -104,12 +104,13 @@ const buildKeydownHandler = ({ map, getState, setState, nudge, keyMove, onUndo,
   }
 }
 
-const buildKeyupHandler = ({ snap, keyMove, onVertexMoved, onDeleted, isFocused }) => (e) => {
+const buildKeyupHandler = ({ keyMove, onVertexMoved, onDeleted, isFocused }) => (e) => {
   if (isFocused()) {
     return
   }
   if (ARROW_KEYS.has(e.key) && keyMove.start && keyMove.index != null) {
-    snap?.hideIndicator()
+    // Not hiding the snap indicator here — nudge.js's own snap.apply() already left it showing
+    // correctly, and it should stay that way after the key is released.
     onVertexMoved({ vertexIndex: keyMove.index, previousCoord: keyMove.start })
     keyMove.start = null
     keyMove.index = null
@@ -133,16 +134,19 @@ const buildKeyupHandler = ({ snap, keyMove, onVertexMoved, onDeleted, isFocused
  * convert it. Only pressing a plain/Shift arrow converts it.
  *
  * @param {{ map, getState, setState, snap, onVertexMoved, onInserted, onDeleted, onUndo, onKeyboardActive }} options
+ * @param {(olFeature, index: number, coord: number[]) => void} [options.moveCoord] - coordinate
+ *   writer forwarded to wireNudge, defaulting there to moveVertex; point/editPointMode.js
+ *   injects point/pointOps.js's movePoint instead.
  * @returns {{ nudgeByDelta: (dx: number, dy: number, isLargeStep: boolean) => void, destroy: () => void }}
  */
 export const createKeyboardHandler = (options) => {
-  const { map, snap, getState, setState, onVertexMoved, onInserted, onDeleted, onUndo, onKeyboardActive } = options
-  const { nudge, keyMove, nudgeByDelta } = wireNudge({ map, snap, getState, setState, onInserted, onVertexMoved })
+  const { map, snap, getState, setState, onVertexMoved, onInserted, onDeleted, onUndo, onKeyboardActive, moveCoord } = options
+  const { nudge, keyMove, nudgeByDelta } = wireNudge({ map, snap, getState, setState, onInserted, onVertexMoved, moveCoord })
   const appViewport = map.getViewport().closest('[role="application"]') ?? map.getViewport()
   const isFocused = () => isInteractiveElementFocused(appViewport)
 
   const onKeydown = buildKeydownHandler({ map, getState, setState, nudge, keyMove, onUndo, onKeyboardActive, isFocused })
-  const onKeyup = buildKeyupHandler({ snap, keyMove, onVertexMoved, onDeleted, isFocused })
+  const onKeyup = buildKeyupHandler({ keyMove, onVertexMoved, onDeleted, isFocused })
 
   globalThis.addEventListener('keydown', onKeydown, { capture: true })
   globalThis.addEventListener('keyup', onKeyup, { capture: true })

package/plugins/draw/src/adapters/openlayers/edit/keyboardHandler.test.js

@@ -33,7 +33,7 @@ afterEach(() => {
 
 const key = (type, props) => window.dispatchEvent(new KeyboardEvent(type, { cancelable: true, ...props }))
 
-test('nudgeByDelta (exposed for MoveControl) moves the selected vertex and reports it via onVertexMoved', () => {
+test('nudgeByDelta (exposed for MoveControls) moves the selected vertex and reports it via onVertexMoved', () => {
   const { state, handler, onVertexMoved } = setup()
   Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
   handler.nudgeByDelta(1, 0, true)
@@ -115,6 +115,39 @@ test('a plain arrow nudges the selected vertex, and keyup commits a single move
   expect(onVertexMoved).toHaveBeenCalledTimes(1)
 })
 
+// Regression: keyup used to force-hide the snap indicator unconditionally, so it vanished the
+// instant the key was released even when the vertex landed exactly on a snap target — making it
+// impossible to tell whether the nudge had actually snapped. nudge.js's own snap.apply() already
+// leaves the indicator correctly reflecting reality; keyup must leave it alone (mirrors the ML
+// adapter, which never hides its own indicator on keyup either).
+test('keyup does not hide the snap indicator', () => {
+  const snap = { apply: jest.fn((c) => c), hideIndicator: jest.fn(), snapRadius: 12 }
+  const map = createFakeMap({ center: [98, 98] })
+  const state = {
+    olFeature: polygonFeature(RING),
+    selectedVertexIndex: 1,
+    selectedVertexType: 'vertex',
+    vertices: [[0, 0], [100, 0], [100, 100]],
+    midpoints: [[50, 0], [100, 50], [50, 50]]
+  }
+  const setState = jest.fn((updates) => Object.assign(state, updates))
+  const handler = createKeyboardHandler({
+    map,
+    getState: () => state,
+    setState,
+    snap,
+    onVertexMoved: jest.fn(),
+    onInserted: jest.fn(),
+    onDeleted: jest.fn(),
+    onUndo: jest.fn(),
+    onKeyboardActive: jest.fn()
+  })
+  liveHandlers.push(handler)
+  key('keydown', { key: 'ArrowRight' })
+  key('keyup', { key: 'ArrowRight' })
+  expect(snap.hideIndicator).not.toHaveBeenCalled()
+})
+
 test('arrows without a selection do nothing', () => {
   const { setState } = setup()
   key('keydown', { key: 'ArrowRight' })

package/plugins/draw/src/adapters/openlayers/edit/modifyInteraction.js

@@ -44,16 +44,18 @@ export const buildModifyCondition = ({ map, getState }) => (mapBrowserEvent) =>
  * each completed drag via `onModifyEnd(prevCoords)` with the vertices
  * snapshotted at drag start.
  *
+ * @param {(mapBrowserEvent) => boolean} [condition] - overrides buildModifyCondition's
+ *   fixed-radius vertex hit-test.
  * @returns {{ destroy: () => void }}
  */
-export const createModifyInteraction = ({ map, olFeature, getState, onModifyEnd }) => {
-  const condition = buildModifyCondition({ map, getState })
+export const createModifyInteraction = ({ map, olFeature, getState, onModifyEnd, condition }) => {
+  const modifyCondition = condition ?? buildModifyCondition({ map, getState })
 
   const modifyInteraction = new Modify({
     features: new Collection([olFeature]),
     style: () => [], // vertex circles rendered by vertexLayer instead
     pixelTolerance: PIXEL_TOLERANCE,
-    condition
+    condition: modifyCondition
   })
   map.addInteraction(modifyInteraction)