@defra/interactive-map 0.0.40-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.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]])

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

@@ -3,7 +3,8 @@ import { createVertexPlacement } from './vertexPlacement.js'
 const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
 
 // Mirrors DrawInit.jsx's fixAtCenter()/hide() gate, but reasserted on every interface-type transition this module detects — matching MapLibre's own onSetup/onInterfaceTypeChange redundancy.
-const applyCrossHairVisibility = (crossHair, type) => {
+// 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()
@@ -12,7 +13,12 @@ const applyCrossHairVisibility = (crossHair, type) => {
   }
 }
 
-const wireInputEvents = ({
+// 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

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()

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

@@ -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)
 

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

@@ -77,4 +77,15 @@ describe('createModifyInteraction', () => {
     modify.destroy()
     expect(map.removeInteraction).toHaveBeenCalledWith(interaction)
   })
+
+  // point/editPointMode.js injects its own condition (built around map.forEachFeatureAtPixel)
+  // in place of buildModifyCondition's fixed-radius hit-test, since a symbol icon can render
+  // far bigger than PIXEL_TOLERANCE covers.
+  test('an injected condition overrides buildModifyCondition\'s own default', () => {
+    const map = createFakeMap()
+    const state = { interfaceType: 'mouse', vertices: [[0, 0]], midpoints: [] }
+    const customCondition = jest.fn(() => true)
+    createModifyInteraction({ map, olFeature: polygonFeature(RING), getState: () => state, onModifyEnd: jest.fn(), condition: customCondition })
+    expect(map.interactions[0].condition_).toBe(customCondition)
+  })
 })

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

@@ -30,9 +30,12 @@ export const resolveSnappedCoord = (snap, map, current, nudgedCoord, snappedCoor
  * `keyMove` tracks the coordinate at the start of a nudge sequence so a single
  * move_vertex undo op can be pushed on keyup (see keyboardHandler).
  *
+ * @param {(olFeature, index: number, coord: number[]) => void} [options.moveCoord] - coordinate
+ *   writer, defaulting to moveVertex; point/editPointMode.js injects point/pointOps.js's
+ *   movePoint instead, since a Point has no ring index to address.
  * @returns {{ nudge: (e: KeyboardEvent) => void, keyMove: { start, index }, nudgeByDelta: (dx: number, dy: number, isLargeStep: boolean) => void }}
  */
-export const wireNudge = ({ map, snap, getState, setState, onInserted, onVertexMoved }) => {
+export const wireNudge = ({ map, snap, getState, setState, onInserted, onVertexMoved, moveCoord = moveVertex }) => {
   const keyMove = { start: null, index: null }
 
   // Shared core: moves the selected vertex by an already pixel-scaled delta,
@@ -46,9 +49,13 @@ export const wireNudge = ({ map, snap, getState, setState, onInserted, onVertexM
     const current = vertices[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)
+    // resolveSnappedCoord can override snappedCoord with an escape jump clear of the snap
+    // radius — when it does, the indicator snap.apply() just showed is now stale, so correct it.
+    if (snap && newCoord !== snappedCoord) {
+      snap.hideIndicator()
+    }
+    moveCoord(olFeature, selectedVertexIndex, newCoord)
     setState({ vertices: vertices.map((c, i) => i === selectedVertexIndex ? newCoord : c) })
     return { previousCoord: current, vertexIndex: selectedVertexIndex }
   }

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

@@ -134,7 +134,17 @@ describe('snapping while nudging', () => {
     Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
     nudge({ key: 'ArrowRight' })
     expect(ring(olFeature)[1]).toEqual([16, 0])
-    expect(snap.hideIndicator).toHaveBeenCalled()
+  })
+
+  // Regression: a stray hideIndicator() right after snap.apply() undid its own show on every
+  // single nudge, so the indicator could never actually be seen. keyboardHandler.js's own keyup
+  // no longer hides it either — see its own comment — so once shown here, it stays shown.
+  test('does not hide the indicator mid-sequence — snap.apply() already shows/hides it', () => {
+    const snap = snapReturning((c) => [c[0] + 1, c[1]])
+    const { state, nudge } = setup({ snap })
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudge({ key: 'ArrowRight' })
+    expect(snap.hideIndicator).not.toHaveBeenCalled()
   })
 
   test('escapes the snap radius when snapping blocks the nudge', () => {
@@ -144,6 +154,19 @@ describe('snapping while nudging', () => {
     nudge({ key: 'ArrowRight' })
     expect(ring(olFeature)[1]).toEqual([23, 0]) // snapRadius + 1 past the original position
   })
+
+  // Regression: nudging away from a target you're sitting on escapes the snap radius (above),
+  // but snap.apply() had already shown the indicator at the target it's about to flee — left
+  // uncorrected, the indicator stayed pinned there for one extra press even though the vertex
+  // had already jumped clear, only catching up on the next press once querying from the
+  // escaped position genuinely found nothing.
+  test('hides the indicator when a nudge escapes the snap radius', () => {
+    const snap = snapReturning(() => [10, 0]) // snap holds the vertex in place
+    const { state, nudge } = setup({ snap })
+    Object.assign(state, { selectedVertexIndex: 1, selectedVertexType: 'vertex' })
+    nudge({ key: 'ArrowRight' })
+    expect(snap.hideIndicator).toHaveBeenCalled()
+  })
 })
 
 describe('resolveSnappedCoord', () => {

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

@@ -30,21 +30,22 @@ const handleTouchStart = (e, { map, targetEl, cssToOl, getState, drag }) => {
   e.preventDefault()
 }
 
-const handleTouchMove = (e, { map, targetEl, olToCSS, getState, setState, snap, drag }) => {
+const handleTouchMove = (e, { map, targetEl, olToCSS, getState, setState, snap, drag, moveCoord }) => {
   if (!isOnTouchTarget(e.target) || drag.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] - drag.vertexTouchDelta.x, y: tOl[1] - drag.vertexTouchDelta.y })
+  // snap.apply() already shows/hides the indicator based on whether a candidate was found.
   const newCoord = snap ? snap.apply(rawCoord) : rawCoord
-  snap?.hideIndicator()
   const { olFeature, vertices } = getState()
   if (!olFeature) {
     return
   }
-  moveVertex(olFeature, drag.dragStartIndex, newCoord)
+  moveCoord(olFeature, drag.dragStartIndex, newCoord)
   setState({ vertices: vertices.map((c, i) => i === drag.dragStartIndex ? newCoord : c) })
+  // Tracks the raw touch point, not newCoord — the vertex is what jumps to the snap candidate.
   showTouchTarget(targetEl, olToCSS({ x: tOl[0] - drag.targetTouchDelta.x, y: tOl[1] - drag.targetTouchDelta.y }))
 }
 
@@ -63,7 +64,7 @@ const handleTap = (e, { map, getState, onTap, drag }) => {
 }
 
 const handleTouchEnd = (e, ctx) => {
-  const { getState, onVertexMoved, snap, drag } = ctx
+  const { getState, onVertexMoved, drag, updateTargetPosition } = ctx
   if (drag.dragStartIndex == null) {
     handleTap(e, ctx)
     drag.tapStart = null
@@ -74,8 +75,9 @@ const handleTouchEnd = (e, ctx) => {
   if (vertices[drag.dragStartIndex] && drag.dragStartCoord) {
     onVertexMoved({ vertexIndex: drag.dragStartIndex, previousCoord: drag.dragStartCoord })
   }
-  snap?.hideIndicator()
+  // Not hiding the indicator here — it should stay showing after the drag ends.
   drag.dragStartCoord = null; drag.dragStartIndex = null; drag.vertexTouchDelta = null; drag.targetTouchDelta = null
+  updateTargetPosition() // re-sync the target to the vertex's final position
   e.preventDefault()
 }
 
@@ -97,6 +99,8 @@ const wireTouchEvents = (deps) => {
   container.addEventListener('touchstart', onTouchstart, { passive: false })
   container.addEventListener('touchmove', onTouchmove, { passive: false })
   container.addEventListener('touchend', onTouchend, { passive: false })
+  // touchcancel fires instead of touchend when the browser itself interrupts the gesture.
+  container.addEventListener('touchcancel', onTouchend, { passive: false })
 
   return {
     isDragging: () => drag.dragStartIndex != null,
@@ -104,6 +108,7 @@ const wireTouchEvents = (deps) => {
       container.removeEventListener('touchstart', onTouchstart)
       container.removeEventListener('touchmove', onTouchmove)
       container.removeEventListener('touchend', onTouchend)
+      container.removeEventListener('touchcancel', onTouchend)
     }
   }
 }
@@ -114,15 +119,16 @@ const wireTouchEvents = (deps) => {
  * without finger occlusion. Tap on a vertex or midpoint selects it via onTap.
  *
  * @param {{ map, container, getState, setState, onVertexMoved, onTap, colors }} options
+ * @param {(olFeature, index: number, coord: number[]) => void} [options.moveCoord] - coordinate
+ *   writer, defaulting to moveVertex; point/editPointMode.js injects point/pointOps.js's
+ *   movePoint instead, since a Point has no ring index to address.
  * @returns {{ updateTargetPosition, updateColors, hide, destroy }}
  */
-export const createTouchHandler = ({ map, container, getState, setState, onVertexMoved, onTap, colors, snap }) => {
+export const createTouchHandler = ({ map, container, getState, setState, onVertexMoved, onTap, colors, snap, moveCoord = moveVertex }) => {
   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).
+  // Converts between OL pixel space and CSS space, which differ when a CSS transform scales up ol-viewport.
   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 })
@@ -140,8 +146,6 @@ export const createTouchHandler = ({ map, container, getState, setState, onVerte
     })
   }
 
-  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') {
@@ -156,8 +160,9 @@ export const createTouchHandler = ({ map, container, getState, setState, onVerte
     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 touchEvents = wireTouchEvents({ container, map, targetEl, olToCSS, cssToOl, getState, setState, onVertexMoved, onTap, snap, moveCoord, updateTargetPosition })
+
+  // Reposition on every render (skipped mid-drag, which handles position directly) to stay anchored during pinch-zoom and pan.
   const onPostrender = () => {
     const { selectedVertexIndex, interfaceType } = getState()
     if (selectedVertexIndex >= 0 && !touchEvents.isDragging() && interfaceType === 'touch') {