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

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

@@ -0,0 +1,155 @@
+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 MultiPoint from 'ol/geom/MultiPoint.js'
+import { SIZES } from '../defaults.js'
+import { getPlacedSketchCoords } from '../utils/sketchHelpers.js'
+
+const HALO_RADIUS_OFFSET = 3
+
+const selectedVertexRadii = { outer: SIZES.vertexHaloRadius + HALO_RADIUS_OFFSET, mid: SIZES.vertexHaloRadius, inner: SIZES.vertexRadius }
+const selectedMidpointRadii = { outer: SIZES.midpointHaloRadius + HALO_RADIUS_OFFSET, mid: SIZES.midpointHaloRadius, inner: SIZES.midpointRadius }
+
+const fillArc = (ctx, cx, cy, radius, fillStyle) => {
+  ctx.beginPath()
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2)
+  ctx.fillStyle = fillStyle
+  ctx.fill()
+}
+
+// Custom renderer draws all arcs at the same (cx,cy) so concentric rings never
+// drift at fractional CSS scales (e.g. 1.5×) the way separate drawImage calls can.
+const makeRingRenderer = ({ outer, mid, inner }, colors, innerKey) => (pixelCoordinates, state) => {
+  const ctx = state.context
+  const pr = state.pixelRatio
+  const [cx, cy] = /** @type {number[]} */ (pixelCoordinates)
+  ctx.save()
+  fillArc(ctx, cx, cy, outer * pr, colors.editActive)
+  fillArc(ctx, cx, cy, mid * pr, colors.editHalo)
+  fillArc(ctx, cx, cy, inner * pr, colors[innerKey])
+  ctx.restore()
+}
+
+const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1)
+
+// Shared by edit-mode vertices and in-progress sketch vertices so they always look the same
+const createVertexStyles = (colors) => {
+  const vertexImage = new CircleStyle({
+    radius: SIZES.vertexRadius,
+    fill: new Fill({ color: colors.editVertex })
+  })
+  return {
+    vertexImage,
+    vertexStyle: new Style({ image: vertexImage }),
+    selectedVertexStyle: new Style({ renderer: makeRingRenderer(selectedVertexRadii, colors, 'editVertex') })
+  }
+}
+
+const createMidpointStyles = (colors) => ({
+  midpointStyle: new Style({
+    image: new CircleStyle({
+      radius: SIZES.midpointRadius,
+      fill: new Fill({ color: colors.editMidpoint })
+    })
+  }),
+  selectedMidpointStyle: new Style({ renderer: makeRingRenderer(selectedMidpointRadii, colors, 'editMidpoint') })
+})
+
+// Split-line preview colours: valid is solid, invalid is dashed — matching
+// ML's stroke-valid-splitter / stroke-invalid-splitter layers.
+const createSketchLineStyles = (colors) => ({
+  valid: new Style({
+    stroke: new Stroke({ color: colors.editStroke, width: 2 }),
+    fill: new Fill({ color: colors.editFill })
+  }),
+  invalid: new Style({
+    stroke: new Stroke({ color: colors.invalidStroke, width: 2, lineDash: [2, 4] })
+  }),
+  splitValid: new Style({
+    stroke: new Stroke({ color: colors.splitValid, width: 2 })
+  }),
+  splitInvalid: new Style({
+    stroke: new Stroke({ color: colors.splitInvalid, width: 2, lineDash: [2, 4] })
+  })
+})
+
+/**
+ * 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 }}
+ */
+export const createStyles = (colors) => {
+  const { vertexImage, vertexStyle, selectedVertexStyle } = createVertexStyles(colors)
+  const { midpointStyle, selectedMidpointStyle } = createMidpointStyles(colors)
+
+  const editFeatureStyle = new Style({
+    stroke: new Stroke({ color: colors.editStroke, width: 2 }),
+    fill: new Fill({ color: colors.editFill })
+  })
+
+  // Dashed variant shown while the edited/drawn shape is invalid — no fill, so an
+  // invalid shape reads as an outline only.
+  const editFeatureStyleInvalid = new Style({
+    stroke: new Stroke({ color: colors.invalidStroke, width: 2, lineDash: [2, 4] })
+  })
+
+  const sketchLineStyles = createSketchLineStyles(colors)
+
+  // Reused across renders — the geometry function runs every frame while sketching,
+  // so mutate one MultiPoint (setCoordinates bumps its revision, keeping OL's
+  // render caches correct) instead of allocating a new one per frame
+  const sketchVertices = new MultiPoint([])
+  const sketchVertexStyle = new Style({
+    image: vertexImage,
+    geometry: (feature) => {
+      const coords = getPlacedSketchCoords(feature.getGeometry())
+      if (!coords.length) {
+        return null
+      }
+      sketchVertices.setCoordinates(coords)
+      return sketchVertices
+    }
+  })
+
+  // No style for the Point sketch (cursor-following ghost marker); placed
+  // vertices get markers on the sketch feature instead. geometryType filters
+  // out the extra LineString sketch OL renders alongside a Polygon sketch,
+  // so vertices aren't drawn twice. `invalid` swaps to the dashed line style.
+  // A 'splitter' property on the feature (set via setDrawingPreviewProperty)
+  // overrides both with the split-specific valid/invalid colours.
+  const createSketchStyle = (geometryType, invalid = false) => (feature) => {
+    const type = feature.getGeometry().getType()
+    if (type === 'Point') { return [] }
+    const splitter = feature.get('splitter')
+    let lineStyle = invalid ? sketchLineStyles.invalid : sketchLineStyles.valid
+    if (splitter === 'valid') { lineStyle = sketchLineStyles.splitValid }
+    if (splitter === 'invalid') { lineStyle = sketchLineStyles.splitInvalid }
+    return type === geometryType ? [lineStyle, sketchVertexStyle] : [lineStyle]
+  }
+
+  const createFeatureStyle = () => (feature) => {
+    const p = feature.getProperties()
+    const id = colors.mapStyleId
+    const stroke = (id && p[`stroke${capitalize(id)}`]) || p.stroke || colors.shapeStroke
+    const fill = (id && p[`fill${capitalize(id)}`]) || p.fill || colors.shapeFill
+    const strokeWidth = p.strokeWidth || colors.strokeWidth
+    return [new Style({
+      stroke: new Stroke({ color: stroke, width: strokeWidth }),
+      fill: new Fill({ color: fill })
+    })]
+  }
+
+  return {
+    vertexStyle,
+    selectedVertexStyle,
+    midpointStyle,
+    selectedMidpointStyle,
+    editFeatureStyle,
+    editFeatureStyleInvalid,
+    createSketchStyle,
+    createFeatureStyle
+  }
+}

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

@@ -0,0 +1,143 @@
+import Point from 'ol/geom/Point.js'
+import LineString from 'ol/geom/LineString.js'
+import Feature from 'ol/Feature.js'
+import { createStyles } from './styles.js'
+import { SIZES } from '../defaults.js'
+import { polygonFeature, lineFeature } from '../__helpers__/harness.js'
+
+const colors = {
+  editStroke: '#e5',
+  editFill: '#ef',
+  editVertex: '#ev',
+  editMidpoint: '#em',
+  editActive: '#ea',
+  editHalo: '#eh',
+  invalidStroke: '#is',
+  splitValid: '#sv',
+  splitInvalid: '#si',
+  shapeStroke: '#ss',
+  shapeFill: '#sf',
+  strokeWidth: 3,
+  mapStyleId: 'road'
+}
+
+const styles = createStyles(colors)
+
+// Records each canvas fill as { radius, fillStyle } so ring order/colours can be asserted
+const fakeCanvas = () => {
+  const fills = []
+  const ctx = {
+    fillStyle: null,
+    save: jest.fn(),
+    restore: jest.fn(),
+    beginPath: jest.fn(),
+    arc: jest.fn((cx, cy, radius) => { ctx.lastArc = { cx, cy, radius } }),
+    fill: jest.fn(() => fills.push({ ...ctx.lastArc, fillStyle: ctx.fillStyle }))
+  }
+  return { ctx, fills }
+}
+
+describe('handle styles', () => {
+  test('vertex and midpoint handles use the configured radii and colours', () => {
+    expect(styles.vertexStyle.getImage().getRadius()).toBe(SIZES.vertexRadius)
+    expect(styles.vertexStyle.getImage().getFill().getColor()).toBe(colors.editVertex)
+    expect(styles.midpointStyle.getImage().getRadius()).toBe(SIZES.midpointRadius)
+    expect(styles.midpointStyle.getImage().getFill().getColor()).toBe(colors.editMidpoint)
+  })
+
+  test('selected handles render three concentric rings in one canvas pass, scaled by pixelRatio', () => {
+    const { ctx, fills } = fakeCanvas()
+    styles.selectedVertexStyle.getRenderer()([10, 20], { context: ctx, pixelRatio: 2 })
+    expect(fills).toEqual([
+      { cx: 10, cy: 20, radius: (SIZES.vertexHaloRadius + 3) * 2, fillStyle: colors.editActive },
+      { cx: 10, cy: 20, radius: SIZES.vertexHaloRadius * 2, fillStyle: colors.editHalo },
+      { cx: 10, cy: 20, radius: SIZES.vertexRadius * 2, fillStyle: colors.editVertex }
+    ])
+
+    const midpoint = fakeCanvas()
+    styles.selectedMidpointStyle.getRenderer()([0, 0], { context: midpoint.ctx, pixelRatio: 1 })
+    expect(midpoint.fills.map(f => f.radius)).toEqual(
+      [SIZES.midpointHaloRadius + 3, SIZES.midpointHaloRadius, SIZES.midpointRadius])
+    expect(midpoint.fills[2].fillStyle).toBe(colors.editMidpoint)
+  })
+
+  test('the edited feature gets the edit stroke and fill', () => {
+    expect(styles.editFeatureStyle.getStroke().getColor()).toBe(colors.editStroke)
+    expect(styles.editFeatureStyle.getFill().getColor()).toBe(colors.editFill)
+  })
+
+  test('the invalid edited feature gets a dashed stroke and no fill', () => {
+    expect(styles.editFeatureStyleInvalid.getStroke().getColor()).toBe(colors.invalidStroke)
+    expect(styles.editFeatureStyleInvalid.getStroke().getLineDash()).toEqual([2, 4])
+    expect(styles.editFeatureStyleInvalid.getFill()).toBeNull()
+  })
+})
+
+describe('sketch styles while drawing', () => {
+  const polygonStyleFn = styles.createSketchStyle('Polygon')
+
+  test('the cursor-follow point renders nothing; the companion line gets stroke only', () => {
+    expect(polygonStyleFn(new Feature(new Point([0, 0])))).toEqual([])
+    expect(polygonStyleFn(new Feature(new LineString([[0, 0], [1, 1]])))).toHaveLength(1)
+  })
+
+  test('the invalid sketch renders a dashed line in the invalid colour with no fill', () => {
+    const invalidStyleFn = styles.createSketchStyle('Polygon', true)
+    const [lineStyle] = invalidStyleFn(new Feature(new LineString([[0, 0], [1, 1]])))
+    expect(lineStyle.getStroke().getColor()).toBe(colors.invalidStroke)
+    expect(lineStyle.getStroke().getLineDash()).toEqual([2, 4])
+    expect(lineStyle.getFill()).toBeNull()
+  })
+
+  test('a splitter-tagged sketch renders the split colours (valid solid, invalid dashed), overriding invalid', () => {
+    const valid = lineFeature([[0, 0], [1, 1]])
+    valid.set('splitter', 'valid')
+    const [validStyle] = styles.createSketchStyle('LineString')(valid)
+    expect(validStyle.getStroke().getColor()).toBe(colors.splitValid)
+    expect(validStyle.getStroke().getLineDash()).toBeNull()
+
+    const invalid = lineFeature([[0, 0], [1, 1]])
+    invalid.set('splitter', 'invalid')
+    const [invalidStyle] = styles.createSketchStyle('LineString', true)(invalid)
+    expect(invalidStyle.getStroke().getColor()).toBe(colors.splitInvalid)
+    expect(invalidStyle.getStroke().getLineDash()).toEqual([2, 4])
+  })
+
+  test('placed vertices render with the shared vertex image on a reused MultiPoint', () => {
+    const sketch = polygonFeature([[0, 0], [10, 0], [5, 5], [0, 0]]) // 2 placed + rubber + closing
+    const [, vertexStyle] = polygonStyleFn(sketch)
+    expect(vertexStyle.getImage()).toBe(styles.vertexStyle.getImage())
+    const geometry = vertexStyle.getGeometry()(sketch)
+    expect(geometry.getCoordinates()).toEqual([[0, 0], [10, 0]])
+    expect(vertexStyle.getGeometry()(sketch)).toBe(geometry) // instance reused per render
+
+    const empty = lineFeature([[9, 9]]) // rubber band only — nothing placed
+    expect(styles.createSketchStyle('LineString')(empty)[1].getGeometry()(empty)).toBeNull()
+  })
+})
+
+describe('createFeatureStyle (inactive shapes)', () => {
+  const styleFor = (properties) => styles.createFeatureStyle()({ getProperties: () => properties })[0]
+
+  test('falls back to the configured shape colours', () => {
+    const style = styleFor({})
+    expect(style.getStroke().getColor()).toBe(colors.shapeStroke)
+    expect(style.getStroke().getWidth()).toBe(colors.strokeWidth)
+    expect(style.getFill().getColor()).toBe(colors.shapeFill)
+  })
+
+  test('per-feature properties override, and map-style-specific properties win overall', () => {
+    const style = styleFor({ stroke: '#f1', fill: '#f2', strokeWidth: 7, strokeRoad: '#r1', fillRoad: '#r2' })
+    expect(style.getStroke().getColor()).toBe('#r1')
+    expect(style.getFill().getColor()).toBe('#r2')
+    expect(style.getStroke().getWidth()).toBe(7)
+
+    expect(styleFor({ stroke: '#f1' }).getStroke().getColor()).toBe('#f1')
+  })
+
+  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]
+    expect(style.getStroke().getColor()).toBe(colors.shapeStroke)
+  })
+})

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

@@ -0,0 +1 @@
+export { COLORS, SIZES, TOLERANCES, KEYBOARD, MAP_SIZE_SCALES } from '../../defaults.js'

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

@@ -0,0 +1,272 @@
+import Draw from 'ol/interaction/Draw.js'
+import { noModifierKeys } from 'ol/events/condition.js'
+import { createDrawInput } from './drawInput.js'
+import { getPlacedSketchCoords, getLastPlacedSketchCoord } from '../utils/sketchHelpers.js'
+import { TOLERANCES } from '../defaults.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+import { STYLES_CHANGED_EVENT } from '../core/internalEvents.js'
+import { attemptPlacement, MODE_BY_GEOMETRY } from '../../../validation/validateGeometry.js'
+import { MIN_VERTICES } from '../../../validation/rules.js'
+import { createLiveStroke } from '../../../validation/liveStroke.js'
+import { createLiveDrawChecks } from '../../../validation/liveDrawChecks.js'
+
+const canFinish = (geometryType, sketchFeature) => {
+  if (!sketchFeature) { return false }
+  return getPlacedSketchCoords(sketchFeature.getGeometry()).length >= MIN_VERTICES[geometryType]
+}
+
+const DUPLICATE_TOLERANCE_PX = 2
+
+// Blocks clicks with modifier keys, vetoed placements (the vertex never appears —
+// see canPlaceVertex in createDrawMode), and duplicate clicks on the last placed
+// vertex while the shape is not yet finishable (once finishable, clicking the last
+// vertex is OL's finish gesture).
+export const buildCondition = (map, geometryType, getSketchFeature, canPlaceVertex) => (e) => {
+  if (!noModifierKeys(e)) { return false }
+  const sf = getSketchFeature()
+  if (!canPlaceVertex(e.coordinate)) { return false }
+  if (!sf || canFinish(geometryType, sf)) { return true }
+  const prev = getLastPlacedSketchCoord(sf.getGeometry())
+  if (!prev) { return true }
+  const pp = map.getPixelFromCoordinate(prev)
+  if (!pp) { return true }
+  const dx = e.pixel[0] - pp[0]; const dy = e.pixel[1] - pp[1]
+  return dx * dx + dy * dy > DUPLICATE_TOLERANCE_PX * DUPLICATE_TOLERANCE_PX
+}
+
+// During drawing the sketch has trailing rubber-band (+ closing, for polygons) coords.
+const TRAILING_COORDS = { Polygon: 2, LineString: 1 }
+
+// The placed-only GeoJSON of an in-progress sketch (lon/lat), dropping the trailing
+// cursor-tracking coords so validation tests just the committed vertices.
+const placedFeatureGeoJSON = (store, sketchFeature) => {
+  const gj = store.toGeoJSON(sketchFeature)
+  const type = gj.geometry.type
+  const trailing = TRAILING_COORDS[type]
+  const ring = type === 'Polygon' ? gj.geometry.coordinates[0] : gj.geometry.coordinates
+  const placed = ring.slice(0, -trailing)
+  const geometry = type === 'Polygon'
+    ? { type: 'Polygon', coordinates: [placed] }
+    : { type: 'LineString', coordinates: placed }
+  return { type: 'Feature', geometry, properties: gj.properties }
+}
+
+// Attempt a placement (mouse click, crosshair tap, Enter) through the shared
+// hard rules + user callback. On a veto the vertex never appears and a
+// PLACEMENT_BLOCKED event carries the reason.
+export const buildCanPlaceVertex = ({ manager, geometryType, getSketch }) => (coordinate) => {
+  const sketch = getSketch()
+  const result = attemptPlacement({
+    placed: sketch ? getPlacedSketchCoords(sketch.getGeometry()) : [],
+    point: coordinate,
+    geometryType,
+    onGeometryChange: manager._geometryValidator
+  })
+  if (!result.valid) {
+    manager.emit(ADAPTER_EVENTS.PLACEMENT_BLOCKED, result.blocked)
+  }
+  return result.valid
+}
+
+// Build the displayed-geometry payload (placed vertices + cursor) for the live
+// stroke check from the current sketch, plus the placed-vertex count for the
+// minimum-vertices threshold.
+const displayedSketch = (geometryType, sketch) => {
+  const geom = sketch.getGeometry()
+  const coords = geom.getCoordinates()
+  const ring = geometryType === 'Polygon' ? (coords[0] ?? []) : coords
+  const geometry = geometryType === 'Polygon'
+    ? { type: 'Polygon', coordinates: [ring] }
+    : { type: 'LineString', coordinates: ring }
+  return { feature: { type: 'Feature', geometry }, numVertices: getPlacedSketchCoords(geom).length }
+}
+
+// Commit a finished sketch to the store under the requested id and emit CREATE.
+const finalizeDrawnFeature = (manager, olFeature, featureId, properties) => {
+  olFeature.setId(String(featureId))
+  olFeature.setProperties(properties)
+  manager.store.source.addFeature(olFeature)
+  manager.emit(ADAPTER_EVENTS.CREATE, manager.store.toGeoJSON(olFeature))
+}
+
+// Wire the OL Draw interaction's lifecycle: track the sketch, react to every sketch
+// geometry change (vertex count + live validity), finalise on end, and report a
+// cancel on abort.
+const attachDrawListeners = (drawInteraction, { manager, featureId, properties, onStart, onSketchChange }) => {
+  drawInteraction.on('drawstart', (e) => {
+    onStart(e.feature)
+    e.feature.getGeometry().on('change', onSketchChange)
+  })
+  drawInteraction.on('drawend', (e) => finalizeDrawnFeature(manager, e.feature, featureId, properties))
+  drawInteraction.on('drawabort', () => { manager.emit(ADAPTER_EVENTS.CANCEL) })
+}
+
+// Tracks placed-vertex count and emits VERTEX_CHANGE plus, on each genuine placement,
+// a commit-level GEOMETRY_CHANGE ('commit-add') for validation. Deferred a tick so a
+// rejection's revert runs after the current click settles.
+const createVertexTracker = (manager, getSketch) => {
+  let lastPlacedCount = 0
+  const emit = (phase, vertexIndex) => {
+    setTimeout(() => {
+      const sketch = getSketch()
+      if (!sketch) { return }
+      manager.emit(ADAPTER_EVENTS.GEOMETRY_CHANGE, { feature: placedFeatureGeoJSON(manager.store, sketch), phase, vertexIndex })
+    }, 0)
+  }
+  return {
+    resetCount: () => { lastPlacedCount = 0 },
+    updateVertexCount: () => {
+      const sketch = getSketch()
+      if (!sketch) { return }
+      const placed = getPlacedSketchCoords(sketch.getGeometry()).length
+      manager.emit(ADAPTER_EVENTS.VERTEX_CHANGE, { numVertices: placed })
+      if (placed > lastPlacedCount) { emit('commit-add', placed - 1) }
+      lastPlacedCount = placed
+    },
+    // An undo commits a vertex removal, so it must re-validate like any other
+    // commit — otherwise the Done gate goes stale.
+    emitUndoValidation: () => {
+      const sketch = getSketch()
+      if (!sketch) { return }
+      emit('commit-delete', getPlacedSketchCoords(sketch.getGeometry()).length)
+    }
+  }
+}
+
+// The mode interface consumed by OLDrawManager.
+const buildDrawModeApi = ({ map, manager, drawInteraction, input, geometryType, getSketch, updateVertexCount, emitUndoValidation, onStylesChanged, clearSketch, setInvalid, liveStroke, liveDrawChecks }) => ({
+  done () {
+    if (canFinish(geometryType, getSketch())) { drawInteraction.finishDrawing() }
+  },
+  cancel () { drawInteraction.abortDrawing() },
+  undo () { drawInteraction.removeLastPoint(); updateVertexCount(); emitUndoValidation() },
+  setInvalid,
+  setInterfaceType (type) { input.setInterfaceType(type) },
+  // Tags the sketch feature so createSketchStyle can pick the split-specific
+  // colour (see styles.js); no-op before any sketch exists.
+  setDrawingPreviewProperty (property, value) {
+    const sketch = getSketch()
+    if (!sketch) { return }
+    sketch.set(property, value)
+    drawInteraction.overlay_.changed()
+  },
+  destroy () {
+    liveStroke.destroy()
+    liveDrawChecks.destroy()
+    manager.off(STYLES_CHANGED_EVENT, onStylesChanged)
+    // Emit the final interfaceType so crosshair visibility is correct on exit.
+    manager.emit(ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE, { interfaceType: input.getInterfaceType() })
+    input.destroy()
+    map.removeInteraction(drawInteraction)
+    clearSketch()
+  }
+})
+
+// Build the touch/keyboard draw input for the interaction.
+const buildDrawInput = ({ drawInteraction, options, geometryType, getSketch, updateVertexCount, emitUndoValidation, canPlaceVertex }) =>
+  createDrawInput({
+    drawInteraction,
+    options: {
+      container: options.container,
+      interfaceType: options.interfaceType,
+      addVertexButtonId: options.addVertexButtonId,
+      mapProvider: options.mapProvider,
+      snap: options.snap,
+      onUndo: () => { drawInteraction.removeLastPoint(); updateVertexCount(); emitUndoValidation() },
+      canFinish: () => canFinish(geometryType, getSketch()),
+      canPlace: canPlaceVertex
+    }
+  })
+
+export const createDrawMode = ({ map, manager, options }) => {
+  const { geometryType, featureId, properties = {} } = options
+
+  let sketchFeature = null
+  let invalid = false
+  let currentSketchStyle = manager.styles.createSketchStyle(geometryType)
+  const { updateVertexCount, resetCount, emitUndoValidation } = createVertexTracker(manager, () => sketchFeature)
+
+  const canPlaceVertex = buildCanPlaceVertex({ manager, geometryType, getSketch: () => sketchFeature })
+
+  const drawInteraction = new Draw({
+    type: geometryType,
+    style: (feature) => currentSketchStyle(feature),
+    stopClick: true,
+    snapTolerance: TOLERANCES.snapRadius,
+    condition: buildCondition(map, geometryType, () => sketchFeature, canPlaceVertex),
+    // Block finish gestures (double-click / click-to-close) while the shape is invalid.
+    finishCondition: () => manager._geometryValid !== false
+  })
+  map.addInteraction(drawInteraction)
+
+  const setSketchInvalid = (next) => {
+    invalid = next
+    currentSketchStyle = manager.styles.createSketchStyle(geometryType, invalid)
+    drawInteraction.overlay_.changed()
+  }
+  // liveStroke stays a real createLiveStroke instance (not just a set() sink)
+  // since edit mode drives its own separate instance the same way — kept here
+  // for consistency with that pattern, even though draw mode only ever calls
+  // set() on it (see liveDrawChecks.js, which is flip-guarded itself). There's
+  // no equivalent cross-mode instance for Add-point, so that verdict emits directly.
+  const liveStroke = createLiveStroke({ onChange: setSketchInvalid })
+  // Computes both verdicts from a SINGLE throttled call to the user's callback
+  // per sketch change (see liveDrawChecks.js for why that matters).
+  const liveDrawChecks = createLiveDrawChecks({
+    onStrokeChange: (nextInvalid, reason) => liveStroke.set(nextInvalid, reason),
+    onPlaceChange: (vetoed, reason) => manager.emit(ADAPTER_EVENTS.CAN_PLACE_CHANGE, { canPlace: !vetoed, reason })
+  })
+  const liveMode = MODE_BY_GEOMETRY[geometryType]
+  const updateLiveValidity = () => {
+    if (!sketchFeature) { return }
+    const { feature, numVertices } = displayedSketch(geometryType, sketchFeature)
+    liveDrawChecks.update({ feature, context: { mode: liveMode }, numVertices, onGeometryChange: manager._geometryValidator })
+  }
+
+  // Update sketch style when map style changes
+  const onStylesChanged = () => {
+    currentSketchStyle = manager.styles.createSketchStyle(geometryType, invalid)
+    drawInteraction.overlay_.changed()
+  }
+  manager.on(STYLES_CHANGED_EVENT, onStylesChanged)
+  // OL internal: overlay_ is the private VectorLayer used for the sketch geometry.
+  // updateWhileAnimating_ forces per-frame redraws during view animations (keyboard pan).
+  // Without this, geom.setCoordinates() calls are ignored while the ANIMATING hint is set.
+  // Check ol/interaction/Draw.js and ol/layer/BaseVector.js if this breaks after an OL upgrade.
+  drawInteraction.overlay_.updateWhileAnimating_ = true
+
+  attachDrawListeners(drawInteraction, {
+    manager,
+    featureId,
+    properties,
+    onStart: (f) => { sketchFeature = f; resetCount() },
+    onSketchChange: () => { updateVertexCount(); updateLiveValidity() }
+  })
+
+  const input = buildDrawInput({
+    drawInteraction,
+    options,
+    geometryType,
+    getSketch: () => sketchFeature,
+    updateVertexCount,
+    emitUndoValidation,
+    canPlaceVertex
+  })
+
+  return buildDrawModeApi({
+    map,
+    manager,
+    drawInteraction,
+    input,
+    geometryType,
+    getSketch: () => sketchFeature,
+    updateVertexCount,
+    emitUndoValidation,
+    onStylesChanged,
+    clearSketch: () => { sketchFeature = null },
+    // External writes go through the controller so its cache mirrors the style.
+    setInvalid: (next) => liveStroke.set(next),
+    liveStroke,
+    liveDrawChecks
+  })
+}