@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

package/plugins/draw/src/events.js

@@ -9,10 +9,17 @@ import { ADAPTER_EVENTS } from './adapterEvents.js'
 import { validateGeometry } from './validation/validateGeometry.js'
 import { MIN_VERTICES_REASONS } from './validation/rules.js'
 import { MAP_SIZE_SCALES } from './defaults.js'
+import { stripInternalProperties } from './utils/stripInternalProperties.js'
 
 const EDIT_VERTEX_MODE = 'edit_vertex'
 const GEOMETRY_INVALID_EVENT = 'draw:geometryinvalid'
 
+// edit_point behaves like edit_vertex for the two checks below (restore-on-cancel, live
+// invalid-stroke gating) — a relocate session, just with one coordinate instead of a ring.
+// enterEditVertexMode (below) stays edit_vertex-only — it's only ever reached for a shape
+// that finished invalid, and Point geometry has no such failure mode (see rules.js).
+const EDIT_MODES = new Set([EDIT_VERTEX_MODE, 'edit_point'])
+
 // A shape that simply hasn't reached its minimum vertex count yet isn't a mistake —
 // it's the normal, expected state of "still being drawn" — so it's excluded below
 // even though it's a genuine SOFT_RULES failure like any other.
@@ -86,10 +93,10 @@ function createHandlers ({ appState, appConfig, mapState, pluginState, mapProvid
     handleDone: () => { draw.done() },
     handleCancel: () => {
       const mode = draw.getMode()
-      if (mode === EDIT_VERTEX_MODE && tempFeature?.id) { draw.add(feature) }
+      if (EDIT_MODES.has(mode) && tempFeature?.id) { draw.add(feature) }
       pendingCreateId = null
       draw.cancel(); resetState()
-      eventBus.emit('draw:cancelled', feature)
+      eventBus.emit('draw:cancelled', stripInternalProperties(feature))
     },
     handleUndo: () => draw.undo(),
     handleDeleteVertex: () => draw.deleteVertex(),
@@ -104,11 +111,11 @@ function createHandlers ({ appState, appConfig, mapState, pluginState, mapProvid
       const { valid, reason } = validateGeometry(f, { phase: 'create', mode: draw.getMode() }, { onGeometryChange: draw._geometryValidator })
       if (!valid) {
         pendingCreateId = f.id
-        emitGeometryInvalid({ feature: f, reason, phase: 'create', mode: EDIT_VERTEX_MODE })
+        emitGeometryInvalid({ feature: stripInternalProperties(f), reason, phase: 'create', mode: EDIT_VERTEX_MODE })
         setTimeout(() => enterEditVertexMode({ draw, appState, appConfig, mapState, dispatch }, f.id), 0)
         return
       }
-      resetState(); setTimeout(() => draw.changeMode('disabled'), 0); eventBus.emit('draw:created', f)
+      resetState(); setTimeout(() => draw.changeMode('disabled'), 0); eventBus.emit('draw:created', stripInternalProperties(f))
     },
     onEditFinish: (f) => {
       resetState()
@@ -116,15 +123,15 @@ function createHandlers ({ appState, appConfig, mapState, pluginState, mapProvid
       // A shape that was drawn-then-fixed reports as a creation, not an edit.
       if (pendingCreateId && f.id === pendingCreateId) {
         pendingCreateId = null
-        eventBus.emit('draw:created', f)
+        eventBus.emit('draw:created', stripInternalProperties(f))
       } else {
-        eventBus.emit('draw:edited', f)
+        eventBus.emit('draw:edited', stripInternalProperties(f))
       }
     },
     onCancel: () => {},
     ...createVertexSelectionHandlers({ draw, pluginState, mapProvider, eventBus }),
     onUndoChange: (l) => { pluginState.dispatch({ type: 'SET_UNDO_STACK_LENGTH', payload: l }) },
-    onUpdate: (f) => { eventBus.emit('draw:updated', f) },
+    onUpdate: (f) => { eventBus.emit('draw:updated', stripInternalProperties(f)) },
     onGeometryChange: (e) => {
       // Only commit-level changes (commit-add/move/insert/delete) carry a `phase`.
       // Preview events (e.g. split's live preview) have none and are ignored.
@@ -141,17 +148,17 @@ function createHandlers ({ appState, appConfig, mapState, pluginState, mapProvid
       // The invalid stroke is committed-validity-driven in edit mode only; in draw
       // mode the adapters drive it live from the displayed geometry (placed
       // vertices + cursor) on every rubber-band move.
-      if (mode === EDIT_VERTEX_MODE) {
+      if (EDIT_MODES.has(mode)) {
         draw.setInvalid?.(!valid)
       }
       if (!valid) {
-        emitGeometryInvalid({ reason, ...context, feature: e.feature })
+        emitGeometryInvalid({ reason, ...context, feature: stripInternalProperties(e.feature) })
       }
     },
     // A vertex placement was rejected (hard rule or user callback veto). Surface it
     // on the public bus with phase 'place', and as a hint toast, so the reason is visible.
     onPlacementBlocked: (e) => {
-      emitGeometryInvalid(e)
+      emitGeometryInvalid({ ...e, feature: stripInternalProperties(e.feature) })
     },
     // Live (mid-drag) validity flip while editing — the displayed shape is exactly
     // what Done finishes there, so it gates the Done button in real time. Emitted

package/plugins/draw/src/events.test.js

@@ -88,6 +88,13 @@ describe('button handlers', () => {
     expect(mapProvider.activeMoveTarget).toBeNull()
   })
 
+  test('cancel re-adds the feature when cancelling a point edit too', () => {
+    const { buttonConfig, draw } = setup()
+    draw.getMode.mockReturnValue('edit_point')
+    buttonConfig.drawCancel.onClick()
+    expect(draw.add).toHaveBeenCalledWith({ id: 'F' })
+  })
+
   test('cancel does not re-add outside a vertex edit', () => {
     const { buttonConfig, draw } = setup()
     draw.getMode.mockReturnValue('draw_polygon')
@@ -308,6 +315,13 @@ describe('geometrychange validation', () => {
     expect(draw.setInvalid).toHaveBeenCalledWith(true)
   })
 
+  test('drives the invalid stroke from committed validity in a point edit too', () => {
+    const { draw } = setup()
+    draw.getMode.mockReturnValue('edit_point')
+    drawHandler(draw, 'geometrychange')({ feature: squareFeature, phase: 'commit-move', vertexIndex: 0 })
+    expect(draw.setInvalid).toHaveBeenCalledWith(false)
+  })
+
   test('a live validity flip (edit drag) drives the Done gate', () => {
     const { draw, dispatch } = setup()
     drawHandler(draw, 'validitychange')({ valid: false, reason: 'Shape must not intersect itself' })

package/plugins/draw/src/manifest.js

@@ -2,8 +2,10 @@ import { initialState, actions } from './reducer.js'
 import { DrawInit } from './DrawInit.jsx'
 import { newPolygon } from './api/newPolygon.js'
 import { newLine } from './api/newLine.js'
+import { newPoint } from './api/newPoint.js'
 import { editFeature } from './api/editFeature.js'
 import { addFeature } from './api/addFeature.js'
+import { setStyle } from './api/setStyle.js'
 import { deleteFeature } from './api/deleteFeature.js'
 import { split } from './api/split.js'
 import { merge } from './api/merge.js'
@@ -11,6 +13,11 @@ import { isMac } from '../../../src/utils/isMac.js'
 
 const DRAW_ACTIONS_SLOT = 'top-middle'
 
+// edit_point behaves like edit_vertex for Done/Menu/Undo, but stays out of drawDeletePoint and mergeShapes (neither applies to a single coordinate).
+const EDIT_MODES = new Set(['edit_vertex', 'edit_point'])
+// .has(), not spread — [...aSet] can silently misbehave under a loose-mode Babel build (see OLDrawManager.js's emit()).
+const isEditMode = (mode) => EDIT_MODES.has(mode)
+
 // Show the platform-appropriate undo modifier (⌘ on macOS, Ctrl elsewhere).
 const undoCommand = isMac() ? '<kbd>Command</kbd> + <kbd>Z</kbd>' : '<kbd>Ctrl</kbd> + <kbd>Z</kbd>'
 
@@ -43,7 +50,7 @@ export const manifest = {
       variant: 'primary',
       exclusiveSlot: true,
       hiddenWhen: ({ appState, pluginState }) =>
-        !['draw_polygon', 'draw_line'].includes(pluginState.mode) || appState.interfaceType !== 'touch',
+        !['draw_polygon', 'draw_line', 'draw_point'].includes(pluginState.mode) || appState.interfaceType !== 'touch',
       // Disabled while placing at the crosshair would be vetoed (validatePlacement) —
       // driven live so the button never looks active when a tap would do nothing.
       enableWhen: ({ pluginState }) => pluginState.canAddPoint,
@@ -54,27 +61,30 @@ export const manifest = {
       label: 'Done',
       variant: 'primary',
       exclusiveSlot: true,
-      hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+      hiddenWhen: ({ pluginState }) => !(['draw_polygon', 'draw_line'].includes(pluginState.mode) || isEditMode(pluginState.mode)),
       enableWhen: ({ pluginState }) => {
         const { mode, geometryValid } = pluginState
         // Min-vertices, area and self-intersection are all enforced by the validation
         // rules via geometryValid, so the gate is simply "is the geometry valid now".
-        return ['draw_polygon', 'draw_line', 'edit_vertex'].includes(mode) && geometryValid
+        return (['draw_polygon', 'draw_line'].includes(mode) || isEditMode(mode)) && geometryValid
       },
       ...createButtonSlots(true)
     },
     {
       id: 'drawMenu',
-      label: ({ pluginState }) => pluginState.mode === 'edit_vertex' ? 'Edit actions' : 'Draw actions',
+      label: ({ pluginState }) => isEditMode(pluginState.mode) ? 'Edit actions' : 'Draw actions',
       iconId: 'menu',
       exclusiveSlot: true,
-      hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+      // draw_point belongs here too — it has no Undo (nothing to undo before a single-click
+      // commit, gated separately below) and no delete-vertex, but it DOES support snapping,
+      // and the Snap toggle is a menuItem living inside this same button.
+      hiddenWhen: ({ pluginState }) => !(['draw_polygon', 'draw_line', 'draw_point'].includes(pluginState.mode) || isEditMode(pluginState.mode)),
       menuItems: [
         {
           id: 'drawUndo',
           label: 'Undo',
           iconId: 'undo',
-          hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+          hiddenWhen: ({ pluginState }) => !(['draw_polygon', 'draw_line'].includes(pluginState.mode) || isEditMode(pluginState.mode)),
           enableWhen: ({ pluginState }) => {
             if (['draw_polygon', 'draw_line'].includes(pluginState.mode)) {
               return pluginState.numVertices > 0
@@ -161,8 +171,10 @@ export const manifest = {
   api: {
     newPolygon,
     newLine,
+    newPoint,
     editFeature,
     addFeature,
+    setStyle,
     deleteFeature,
     split,
     merge

package/plugins/draw/src/manifest.test.js

@@ -9,7 +9,7 @@ describe('manifest structure', () => {
     expect(manifest.reducer).toHaveProperty('actions')
     expect(manifest.InitComponent).toBeDefined()
     expect(Object.keys(manifest.api)).toEqual(expect.arrayContaining([
-      'newPolygon', 'newLine', 'editFeature', 'addFeature', 'deleteFeature', 'split', 'merge'
+      'newPolygon', 'newLine', 'newPoint', 'editFeature', 'addFeature', 'setStyle', 'deleteFeature', 'split', 'merge'
     ]))
   })
 })
@@ -44,12 +44,14 @@ describe('drawDone', () => {
   test('is hidden outside draw/edit modes', () => {
     expect(btn().hiddenWhen({ pluginState: { mode: null } })).toBe(true)
     expect(btn().hiddenWhen({ pluginState: { mode: 'draw_polygon' } })).toBe(false)
+    expect(btn().hiddenWhen({ pluginState: { mode: 'edit_point' } })).toBe(false)
   })
 
   test('enables in a draw/edit mode only when the geometry is valid', () => {
     expect(btn().enableWhen({ pluginState: { mode: 'draw_polygon', geometryValid: true } })).toBe(true)
     expect(btn().enableWhen({ pluginState: { mode: 'draw_line', geometryValid: true } })).toBe(true)
     expect(btn().enableWhen({ pluginState: { mode: 'edit_vertex', geometryValid: true } })).toBe(true)
+    expect(btn().enableWhen({ pluginState: { mode: 'edit_point', geometryValid: true } })).toBe(true)
     expect(btn().enableWhen({ pluginState: { mode: 'disabled', geometryValid: true } })).toBe(false)
   })
 
@@ -57,6 +59,7 @@ describe('drawDone', () => {
     expect(btn().enableWhen({ pluginState: { mode: 'draw_polygon', geometryValid: false } })).toBe(false)
     expect(btn().enableWhen({ pluginState: { mode: 'draw_line', geometryValid: false } })).toBe(false)
     expect(btn().enableWhen({ pluginState: { mode: 'edit_vertex', geometryValid: false } })).toBe(false)
+    expect(btn().enableWhen({ pluginState: { mode: 'edit_point', geometryValid: false } })).toBe(false)
   })
 })
 
@@ -66,12 +69,24 @@ describe('drawMenu', () => {
     expect(findButton('drawMenu').hiddenWhen({ pluginState: { mode: 'edit_vertex' } })).toBe(false)
   })
 
+  // draw_point has no Undo and no delete-vertex, but it does support snapping, and Snap is
+  // a menuItem inside this same button — so the button itself must stay visible for it even
+  // though drawUndo/drawDeletePoint (below) correctly keep excluding it.
+  test('is visible during draw_point, for the Snap toggle, even though it has no undo/delete', () => {
+    expect(findButton('drawMenu').hiddenWhen({ pluginState: { mode: 'draw_point' } })).toBe(false)
+  })
+
   test('labels "Edit actions" in edit mode, "Draw actions" otherwise', () => {
     expect(findButton('drawMenu').label({ pluginState: { mode: 'edit_vertex' } })).toBe('Edit actions')
+    expect(findButton('drawMenu').label({ pluginState: { mode: 'edit_point' } })).toBe('Edit actions')
     expect(findButton('drawMenu').label({ pluginState: { mode: 'draw_polygon' } })).toBe('Draw actions')
     expect(findButton('drawMenu').label({ pluginState: { mode: 'draw_line' } })).toBe('Draw actions')
   })
 
+  test('is visible during edit_point', () => {
+    expect(findButton('drawMenu').hiddenWhen({ pluginState: { mode: 'edit_point' } })).toBe(false)
+  })
+
   describe('drawUndo', () => {
     const item = () => findMenuItem('drawMenu', 'drawUndo')
 
@@ -80,11 +95,21 @@ describe('drawMenu', () => {
       expect(item().hiddenWhen({ pluginState: { mode: 'draw_line' } })).toBe(false)
     })
 
+    test('is visible in edit_point', () => {
+      expect(item().hiddenWhen({ pluginState: { mode: 'edit_point' } })).toBe(false)
+    })
+
+    test('stays hidden for draw_point — nothing to undo before a single-click commit', () => {
+      expect(item().hiddenWhen({ pluginState: { mode: 'draw_point' } })).toBe(true)
+    })
+
     test('enables from vertex count while drawing and from the undo stack while editing', () => {
       expect(item().enableWhen({ pluginState: { mode: 'draw_polygon', numVertices: 1 } })).toBe(true)
       expect(item().enableWhen({ pluginState: { mode: 'draw_polygon', numVertices: 0 } })).toBe(false)
       expect(item().enableWhen({ pluginState: { mode: 'edit_vertex', undoStackLength: 2 } })).toBe(true)
       expect(item().enableWhen({ pluginState: { mode: 'edit_vertex', undoStackLength: 0 } })).toBe(false)
+      expect(item().enableWhen({ pluginState: { mode: 'edit_point', undoStackLength: 1 } })).toBe(true)
+      expect(item().enableWhen({ pluginState: { mode: 'edit_point', undoStackLength: 0 } })).toBe(false)
     })
   })
 
@@ -111,6 +136,12 @@ describe('drawMenu', () => {
       expect(item().hiddenWhen({ pluginState: { mode: 'edit_vertex' } })).toBe(false)
     })
 
+    // Deliberately excluded from edit_point — deleting a point's one coordinate is deleting
+    // the whole feature (deleteFeature's job), not a per-vertex action.
+    test('stays hidden for edit_point', () => {
+      expect(item().hiddenWhen({ pluginState: { mode: 'edit_point' } })).toBe(true)
+    })
+
     test('enables only with a selection and enough vertices (polygon vs line)', () => {
       expect(item().enableWhen({ pluginState: { selectedVertexIndex: -1 } })).toBe(false)
       expect(item().enableWhen({ pluginState: { selectedVertexIndex: 0, feature: { geometry: { type: 'Polygon' } }, numVertices: 4 } })).toBe(true)

package/plugins/draw/src/reducer.test.js

@@ -77,6 +77,13 @@ describe('SET_UNDO_STACK_LENGTH', () => {
   })
 })
 
+describe('SET_GEOMETRY_VALID', () => {
+  test('coerces the payload to a boolean', () => {
+    expect(actions.SET_GEOMETRY_VALID(initialState, false).geometryValid).toBe(false)
+    expect(actions.SET_GEOMETRY_VALID(initialState, 1).geometryValid).toBe(true)
+  })
+})
+
 describe('SET_CAN_ADD_POINT', () => {
   test('coerces the payload to a boolean', () => {
     expect(actions.SET_CAN_ADD_POINT(initialState, false).canAddPoint).toBe(false)

package/plugins/draw/src/utils/stripInternalProperties.js

@@ -0,0 +1,19 @@
+import { SYMBOL_KEYS } from './symbolKeys.js'
+
+// Drops adapter-derived bookkeeping from a feature before it reaches a public event:
+// symbol* keys not in SYMBOL_KEYS (e.g. symbolImageId, symbolPixelRatio), and `sortKey`
+// (drives fill/line/symbol-sort-key render order — see MaplibreDrawAdapter.js — never
+// caller-supplied or meaningful application data).
+export const stripInternalProperties = (feature) => {
+  if (!feature?.properties) {
+    return feature
+  }
+  const properties = {}
+  for (const [key, value] of Object.entries(feature.properties)) {
+    const isInternal = key === 'sortKey' || (key.startsWith('symbol') && !SYMBOL_KEYS.has(key))
+    if (!isInternal) {
+      properties[key] = value
+    }
+  }
+  return { ...feature, properties }
+}

package/plugins/draw/src/utils/stripInternalProperties.test.js

@@ -0,0 +1,50 @@
+import { stripInternalProperties } from './stripInternalProperties.js'
+
+describe('stripInternalProperties', () => {
+  test('drops adapter-derived symbol* keys not in SYMBOL_KEYS', () => {
+    const feature = {
+      id: 'a',
+      properties: {
+        symbol: 'pin',
+        symbolBackgroundColor: '#ca3535',
+        symbolImageId: 'symbol-abc-2x',
+        symbolIconAnchor: 'bottom',
+        symbolIconOffset: [0, -10],
+        symbolPixelRatio: 2,
+        symbolActiveImageId: 'symbol-act-abc-2x',
+        symbolSelectedImageId: 'symbol-sel-abc-2x'
+      }
+    }
+
+    expect(stripInternalProperties(feature)).toEqual({
+      id: 'a',
+      properties: { symbol: 'pin', symbolBackgroundColor: '#ca3535' }
+    })
+  })
+
+  test('drops the internal sortKey property', () => {
+    const feature = { id: 'a', properties: { label: 'My point', sortKey: 3 } }
+    expect(stripInternalProperties(feature)).toEqual({ id: 'a', properties: { label: 'My point' } })
+  })
+
+  test('leaves non-symbol-prefixed properties untouched', () => {
+    const feature = { id: 'a', properties: { label: 'My point', stroke: '#1d70b8' } }
+    expect(stripInternalProperties(feature)).toEqual(feature)
+  })
+
+  test('does not mutate the original feature', () => {
+    const feature = { id: 'a', properties: { symbol: 'pin', symbolImageId: 'x' } }
+    stripInternalProperties(feature)
+    expect(feature.properties.symbolImageId).toBe('x')
+  })
+
+  test('returns the feature unchanged when it has no properties', () => {
+    const feature = { id: 'a', geometry: { type: 'Point', coordinates: [0, 0] } }
+    expect(stripInternalProperties(feature)).toBe(feature)
+  })
+
+  test('returns null/undefined as-is', () => {
+    expect(stripInternalProperties(null)).toBeNull()
+    expect(stripInternalProperties(undefined)).toBeUndefined()
+  })
+})

package/plugins/draw/src/utils/symbolKeys.js

@@ -0,0 +1,5 @@
+// Public symbol-config keys a caller can set on a Point (see docs/api/symbol-config.md).
+export const SYMBOL_KEYS = new Set([
+  'symbol', 'symbolSvgContent', 'symbolBackgroundColor', 'symbolForegroundColor',
+  'symbolHaloWidth', 'symbolGraphic', 'symbolViewBox', 'symbolAnchor'
+])

package/plugins/draw/src/validation/liveDrawChecks.test.js

@@ -49,6 +49,14 @@ describe('built-in rules (synchronous, independently floored, flip-guarded)', ()
     expect(onStrokeChange).not.toHaveBeenCalled()
   })
 
+  test('a non-Polygon/LineString geometry type (e.g. Point) floors at 0 via the MIN_VERTICES fallback, and never flips', () => {
+    const { onStrokeChange, onPlaceChange, checks } = setup()
+    const point = { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 0] } }
+    expect(() => checks.update({ feature: point, numVertices: 0 })).not.toThrow()
+    expect(onStrokeChange).not.toHaveBeenCalled()
+    expect(onPlaceChange).not.toHaveBeenCalled()
+  })
+
   test('numVertices defaults to 0 when omitted from context', () => {
     const { onStrokeChange, checks } = setup()
     checks.update({ feature: closingEdgeCrosses })
@@ -156,4 +164,50 @@ describe('reset / destroy', () => {
     jest.runAllTimers()
     expect(onGeometryChange).not.toHaveBeenCalled()
   })
+
+  // Belt-and-braces: recompute()/runUserRule() re-check `pending` themselves rather than
+  // trusting that cancelFrame() actually stopped the callback — simulated here by making
+  // cancelAnimationFrame a no-op, so an already-queued frame still fires after reset()/
+  // destroy() have cleared `pending`. The guards must make that a safe no-op.
+  test('a frame that still fires despite cancellation is a no-op, guarded by pending being cleared', () => {
+    const noopCancel = jest.fn()
+    const originalCaf = globalThis.cancelAnimationFrame
+    globalThis.cancelAnimationFrame = noopCancel
+    try {
+      const { onStrokeChange, onPlaceChange, checks } = setup()
+      const onGeometryChange = jest.fn(() => true)
+      checks.update({ feature: square, numVertices: 3, onGeometryChange })
+      checks.reset() // calls our no-op cancel — the queued frame is NOT actually removed
+      expect(noopCancel).toHaveBeenCalled()
+      onStrokeChange.mockClear()
+      onPlaceChange.mockClear()
+      expect(() => jest.runAllTimers()).not.toThrow()
+      expect(onGeometryChange).not.toHaveBeenCalled() // guard returns before reading pending's fields
+      expect(onStrokeChange).not.toHaveBeenCalled()
+      expect(onPlaceChange).not.toHaveBeenCalled()
+    } finally {
+      globalThis.cancelAnimationFrame = originalCaf
+    }
+  })
+
+  // recompute() carries its own `if (!pending) return` guard too, distinct from
+  // runUserRule()'s — reachable when the user's own onGeometryChange callback
+  // reentrantly clears `pending` (e.g. via reset()) partway through the very frame that's
+  // evaluating it, before runUserRule() reaches its trailing recompute() call.
+  test('recompute() guards against pending being cleared reentrantly by the user callback', () => {
+    const { onStrokeChange, onPlaceChange, checks } = setup()
+    const onGeometryChange = jest.fn(() => {
+      checks.reset() // reentrant — clears `pending` mid-evaluation, frame is already null by now
+      return true
+    })
+    checks.update({ feature: square, numVertices: 3, onGeometryChange })
+    onStrokeChange.mockClear()
+    onPlaceChange.mockClear()
+    expect(() => jest.runAllTimers()).not.toThrow()
+    expect(onGeometryChange).toHaveBeenCalledTimes(1)
+    // recompute()'s trailing call (after the reentrant reset) is a safe no-op — no further
+    // gate changes are reported off a pending the reentrant reset() already cleared.
+    expect(onStrokeChange).not.toHaveBeenCalled()
+    expect(onPlaceChange).not.toHaveBeenCalled()
+  })
 })

package/plugins/draw/src/validation/liveStroke.test.js

@@ -1,4 +1,4 @@
-import { createLiveStroke } from './liveStroke.js'
+import { createLiveStroke, requestFrame, cancelFrame } from './liveStroke.js'
 
 const poly = (ring) => ({ type: 'Feature', geometry: { type: 'Polygon', coordinates: [ring] } })
 
@@ -105,6 +105,45 @@ describe('custom validate function', () => {
   })
 })
 
+describe('requestFrame / cancelFrame (engine-agnostic frame scheduling)', () => {
+  test('uses requestAnimationFrame/cancelAnimationFrame when available', () => {
+    const raf = jest.spyOn(globalThis, 'requestAnimationFrame')
+    const caf = jest.spyOn(globalThis, 'cancelAnimationFrame')
+    const cb = jest.fn()
+    const id = requestFrame(cb)
+    expect(raf).toHaveBeenCalledWith(cb)
+    cancelFrame(id)
+    expect(caf).toHaveBeenCalledWith(id)
+    raf.mockRestore()
+    caf.mockRestore()
+  })
+
+  test('falls back to setTimeout/clearTimeout when rAF is unavailable (e.g. SSR)', () => {
+    const rafDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'requestAnimationFrame')
+    const cafDescriptor = Object.getOwnPropertyDescriptor(globalThis, 'cancelAnimationFrame')
+    // jsdom defines these as configurable globals — delete rather than assign undefined,
+    // so `typeof requestAnimationFrame` genuinely reads 'undefined' inside the module.
+    delete globalThis.requestAnimationFrame
+    delete globalThis.cancelAnimationFrame
+    try {
+      const cb = jest.fn()
+      requestFrame(cb)
+      expect(cb).not.toHaveBeenCalled()
+      jest.advanceTimersByTime(16)
+      expect(cb).toHaveBeenCalledTimes(1)
+
+      const cb2 = jest.fn()
+      const id2 = requestFrame(cb2)
+      cancelFrame(id2)
+      jest.advanceTimersByTime(16)
+      expect(cb2).not.toHaveBeenCalled()
+    } finally {
+      Object.defineProperty(globalThis, 'requestAnimationFrame', rafDescriptor)
+      Object.defineProperty(globalThis, 'cancelAnimationFrame', cafDescriptor)
+    }
+  })
+})
+
 describe('set / reset / destroy', () => {
   test('set() applies through the flip guard and drops any pending frame', () => {
     const { onChange, stroke } = setup()
@@ -147,4 +186,28 @@ describe('set / reset / destroy', () => {
     jest.runAllTimers()
     expect(onGeometryChange).not.toHaveBeenCalled()
   })
+
+  // Belt-and-braces: runUserRule() re-checks `pending` itself rather than trusting that
+  // cancelFrame() actually stopped the callback — simulated here by making
+  // cancelAnimationFrame a no-op, so the already-queued frame still fires after
+  // cancelPending() has cleared `pending`. The guard must make that a safe no-op rather
+  // than reading a null pending's properties.
+  test('a frame that still fires despite cancellation is a no-op, guarded by pending being cleared', () => {
+    const noopCancel = jest.fn()
+    const originalCaf = globalThis.cancelAnimationFrame
+    globalThis.cancelAnimationFrame = noopCancel
+    try {
+      const { onChange, stroke } = setup()
+      const onGeometryChange = jest.fn(() => true)
+      stroke.update({ feature: square, numVertices: 3, onGeometryChange })
+      stroke.destroy() // calls our no-op cancel — the queued frame is NOT actually removed
+      expect(noopCancel).toHaveBeenCalled()
+      onChange.mockClear()
+      expect(() => jest.runAllTimers()).not.toThrow()
+      expect(onGeometryChange).not.toHaveBeenCalled() // guard returns before reading pending's fields
+      expect(onChange).not.toHaveBeenCalled()
+    } finally {
+      globalThis.cancelAnimationFrame = originalCaf
+    }
+  })
 })