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

package/plugins/draw/src/adapters/maplibre/modes/drawMode/keyboardHandlers.js

@@ -0,0 +1,78 @@
+/**
+ * Keyboard handling for the shared draw mode: cmd/ctrl+z undo, arrow/Enter keyboard
+ * drawing, and Escape cancel/reinitialise. Part of createDrawMode.
+ *
+ * Note the two distinct handlers: onKeyup (lowercase) is a window listener; onKeyUp
+ * (capital U) is mapbox-gl-draw's own, registered on the container.
+ */
+export const createKeyboardHandlers = ({ ParentMode, getFeature, INTERFACE_KEYS }) => ({
+  onKeydown (state, e) {
+    if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+      this._handleUndoKeydown(state, e)
+      return
+    }
+    if (document.activeElement !== state.container) {
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      return
+    }
+    if (e.key === 'Enter') {
+      state.isActive = true
+    }
+    if (!INTERFACE_KEYS.has(e.key)) {
+      return
+    }
+    this._setInterface(state, 'keyboard')
+    this.onMove(state, e)
+  },
+
+  onKeyup (state, e) {
+    if (e.key === 'Escape') {
+      if (state.interfaceType !== 'keyboard') {
+        // Mouse/touch: cancel drawing — onKeyUp (capital U) won't fire since container isn't focused
+        this.map.fire('draw.cancel')
+      }
+      // Keyboard: onKeyUp (capital U) handles reinitialize (container is focused, event reaches it)
+      return
+    }
+    if (document.activeElement !== state.container) {
+      return
+    }
+    if (!INTERFACE_KEYS.has(e.key)) {
+      return
+    }
+    this._setInterface(state, 'keyboard')
+    this.onMove(state, e)
+    if (e.key === 'Enter' && state.isActive) {
+      this.doClick(state)
+    }
+  },
+
+  // Called by mapbox-gl-draw's event system (capital U — distinct from onKeyup above).
+  // Registered on ctx.container, so only fires when the viewport has focus (keyboard drawing).
+  //   1. A UI element inside the viewport has focus (e.g. popup menu) → ignore, let React handle
+  //   2. Keyboard drawing (container focused, interfaceType === 'keyboard') → Escape restarts
+  //   3. Non-keyboard with container focused → skip (already handled by window onKeyup via draw.cancel)
+  onKeyUp (state, e) {
+    const activeEl = document.activeElement
+    if (activeEl && activeEl !== state.container && state.container.contains(activeEl)) {
+      return
+    }
+    if (e.key === 'Escape') {
+      if (state.interfaceType === 'keyboard') {
+        const undoStack = this.map._undoStack
+        if (undoStack) {
+          undoStack.clear()
+        }
+        this._reinitializeFeature(state, getFeature(state))
+      }
+      // Non-keyboard already handled by onKeyup (window) via draw.cancel
+      return
+    }
+    if (activeEl !== state.container) {
+      ParentMode.onKeyUp.call(this, state, e)
+    }
+  }
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/keyboardHandlers.test.js

@@ -0,0 +1,75 @@
+import { setup, clickAt, firedWith, DrawPolygonMode } from './__helpers__/harness.js'
+
+describe('keyboard interface', () => {
+  test('arrow keys switch to keyboard interface, show the crosshair and move the rubber band to center', () => {
+    const { ctx, state, marker, container } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    container.focus()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+    expect(state.interfaceType).toBe('keyboard')
+    expect(marker.style.display).toBe('block')
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([5, 5])
+    expect(firedWith(ctx.map, 'draw.geometrychange').length).toBeGreaterThan(0)
+  })
+
+  test('other keys, unfocused container and Escape do not switch interface', () => {
+    const { ctx, state, marker, container } = setup(DrawPolygonMode)
+    ctx.keydownHandler(new KeyboardEvent('keydown', { key: 'ArrowRight' })) // container not focused
+    container.focus()
+    ctx.keydownHandler(new KeyboardEvent('keydown', { key: 'a' }))
+    ctx.keydownHandler(new KeyboardEvent('keydown', { key: 'Escape' }))
+    ctx.keyupHandler(new KeyboardEvent('keyup', { key: 'a' }))
+    expect(state.interfaceType).toBe('mouse')
+    expect(marker.style.display).toBe('none')
+  })
+
+  test('keyup without focus is ignored', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.keyupHandler(new KeyboardEvent('keyup', { key: 'ArrowRight' }))
+    expect(state.interfaceType).toBe('mouse')
+  })
+
+  test('Enter down then up places a vertex at center', () => {
+    const { ctx, state, container } = setup(DrawPolygonMode)
+    container.focus()
+    ctx.keydownHandler(new KeyboardEvent('keydown', { key: 'Enter' }))
+    ctx.keyupHandler(new KeyboardEvent('keyup', { key: 'Enter' }))
+    expect(state.isActive).toBe(true)
+    expect(state.polygon.coordinates[0][0]).toEqual([5, 5])
+  })
+
+  test('Escape keyup cancels drawing for mouse/touch but not keyboard', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.keyupHandler(new KeyboardEvent('keyup', { key: 'Escape' }))
+    expect(firedWith(ctx.map, 'draw.cancel')).toHaveLength(1)
+
+    state.interfaceType = 'keyboard'
+    ctx.keyupHandler(new KeyboardEvent('keyup', { key: 'Escape' }))
+    expect(firedWith(ctx.map, 'draw.cancel')).toHaveLength(1)
+  })
+
+  test('keyup of a non-Enter interface key while focused switches interface without committing a vertex', () => {
+    const { ctx, state, container } = setup(DrawPolygonMode)
+    container.focus()
+    ctx.keyupHandler(new KeyboardEvent('keyup', { key: 'ArrowRight' }))
+    expect(state.interfaceType).toBe('keyboard')
+    expect(ctx.map._undoStack.length).toBe(0)
+  })
+
+  test('container keyUp with the container itself focused and a non-Escape key does not defer to the parent', () => {
+    const { ctx, state, container } = setup(DrawPolygonMode)
+    container.focus()
+    ctx.onKeyUp(state, { key: 'a' })
+    expect(ctx.changeMode).not.toHaveBeenCalled()
+  })
+
+  test('Escape during keyboard drawing with no undo stack still reinitialises the feature', () => {
+    const { ctx, state, container } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    clickAt(ctx, state, 0, 0)
+    container.focus()
+    const id = state.polygon.id
+    ctx.map._undoStack = null
+    ctx.onKeyUp(state, { key: 'Escape' })
+    expect(ctx._ctx.store.delete).toHaveBeenCalledWith([id])
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/lifecycle.js

@@ -0,0 +1,78 @@
+/**
+ * Setup / teardown for the shared draw mode: binds the window/container/map event
+ * handlers on entry and removes them on exit. Part of createDrawMode.
+ */
+export const createLifecycle = ({ ParentMode, featureProp, excludeFeatureIdFromSetup }) => ({
+  onSetup (options) {
+    const { map } = this
+
+    // Some parent modes (DrawLineString) interpret featureId as "continue existing"
+    // rather than "use this ID for new feature"
+    const parentOptions = excludeFeatureIdFromSetup
+      ? { ...options, featureId: null }
+      : options
+
+    const state = {
+      ...ParentMode.onSetup.call(this, parentOptions),
+      ...options
+    }
+
+    // Add initial props
+    state[featureProp].properties = options.properties
+
+    const { container, vertexMarkerId, getInterfaceType } = state
+    const currentInterfaceType = getInterfaceType ? getInterfaceType() : state.interfaceType
+    state.interfaceType = currentInterfaceType
+    const vertexMarker = container.querySelector(`#${vertexMarkerId}`)
+    state.vertexMarker = vertexMarker
+    if (['touch', 'keyboard'].includes(currentInterfaceType)) {
+      this._showCrossHair(state)
+    } else {
+      this._hideCrossHair(state)
+    }
+
+    // Bind all handlers once
+    const bind = (name, fn) => (this[name] = fn.bind(this, state))
+    const handlers = {
+      keydownHandler: this.onKeydown,
+      keyupHandler: this.onKeyup,
+      blurHandler: this.onBlur,
+      createHandler: this.onCreate,
+      moveHandler: this.onMove,
+      pointerdownHandler: this.onPointerdown,
+      pointermoveHandler: this.onPointermove,
+      pointerupHandler: this.onPointerup,
+      vertexButtonClickHandler: this.onVertexButtonClick,
+      undoHandler: this.onUndo,
+      interfaceTypeChangeHandler: this.onInterfaceTypeChange
+    }
+    Object.entries(handlers).forEach(([k, fn]) => bind(k, fn))
+
+    // Register events
+    this._listeners = [
+      [window, 'keydown', this.keydownHandler],
+      [window, 'keyup', this.keyupHandler],
+      [window, 'click', this.vertexButtonClickHandler],
+      [container, 'blur', this.blurHandler],
+      [container, 'pointermove', this.pointermoveHandler],
+      [container, 'pointerup', this.pointerupHandler],
+      [map, 'pointerdown', this.pointerdownHandler],
+      [map, 'draw.create', this.createHandler],
+      [map, 'move', this.moveHandler],
+      [map, 'draw.undo', this.undoHandler],
+      [map, 'draw.interfacetypechange', this.interfaceTypeChangeHandler]
+    ]
+    this._listeners.forEach(([t, e, h]) => t.addEventListener ? t.addEventListener(e, h) : t.on(e, h))
+
+    return state
+  },
+
+  onStop (state) {
+    ParentMode.onStop.call(this, state)
+    this._listeners.forEach(([t, e, h]) => t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
+    this._hideCrossHair(state)
+    // Sync the final interfaceType from draw mode back to app state so crosshair
+    // visibility is correct when exiting draw mode (e.g., if user switched from mouse to keyboard)
+    this.map.fire('draw.interfacetypechange', { interfaceType: state.interfaceType })
+  }
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/lifecycle.test.js

@@ -0,0 +1,48 @@
+import { setup, firedWith, DrawPolygonMode, DrawLineMode } from './__helpers__/harness.js'
+
+describe('setup and crosshair', () => {
+  test('mouse interface hides the vertex marker, keyboard shows it', () => {
+    const mouse = setup(DrawPolygonMode)
+    expect(mouse.marker.style.display).toBe('none')
+
+    const keyboard = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    expect(keyboard.marker.style.display).toBe('block')
+  })
+
+  test('getInterfaceType() takes precedence over the static interfaceType option', () => {
+    const { state, marker } = setup(DrawPolygonMode, { interfaceType: 'mouse', getInterfaceType: () => 'touch' })
+    expect(state.interfaceType).toBe('touch')
+    expect(marker.style.display).toBe('block')
+  })
+
+  test('a crossHair object is used instead of the vertex marker when provided', () => {
+    const crossHair = { show: jest.fn(), hide: jest.fn() }
+    const { ctx, state } = setup(DrawPolygonMode, { interfaceType: 'keyboard', crossHair })
+    expect(crossHair.show).toHaveBeenCalled()
+    ctx.pointermoveHandler({ pointerType: 'mouse' })
+    expect(crossHair.hide).toHaveBeenCalled()
+    ctx.onBlur(state, { target: document.body })
+    expect(crossHair.hide).toHaveBeenCalledTimes(2)
+  })
+
+  test('line mode creates a fresh feature even when featureId is passed', () => {
+    const { state } = setup(DrawLineMode)
+    expect(state.line).toBeDefined()
+    expect(state.featureId).toBe('shape-1')
+  })
+})
+
+describe('onStop', () => {
+  test('removes listeners, hides the crosshair and reports the final interface type', () => {
+    const { ctx, state, marker, container } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    ctx.onStop(state)
+    expect(marker.style.display).toBe('none')
+    expect(firedWith(ctx.map, 'draw.interfacetypechange')).toEqual([{ interfaceType: 'keyboard' }])
+
+    // Window/container/map listeners are gone: keydown no longer shows the crosshair
+    container.focus()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+    expect(marker.style.display).toBe('none')
+    expect(ctx.map.off).toHaveBeenCalledWith('draw.create', ctx.createHandler)
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/pointerHandlers.js

@@ -0,0 +1,103 @@
+import {
+  getSnapInstance, isSnapEnabled, getSnapLngLat, triggerSnapAtPoint, triggerSnapAtCenter
+} from '../../utils/snapHelpers.js'
+
+/**
+ * Pointer / touch handling for the shared draw mode: touch and mouse interface
+ * switching, rubber-band movement (with snapping) and blur. Part of createDrawMode.
+ */
+export const createPointerHandlers = ({ ParentMode, getFeature, getCoords }) => ({
+  onTouchStart (state, e) {
+    this._setInterface(state, 'touch')
+    this.onMove(state, e)
+  },
+
+  onTouchEnd (state, e) {
+    this._setInterface(state, 'touch')
+    this.onMove(state, e)
+  },
+
+  // The global interface type (e.g. switching to touch and panning via MoveControl)
+  // can change mid-session without any touch/pointer/key event ever landing on the
+  // map container, so this can't rely on onTouchStart/onPointerdown alone — refresh
+  // the rubber band immediately rather than waiting for the next incidental 'move'.
+  // Also fires once on every mode entry (DrawInit.jsx syncs setInterfaceType whenever
+  // draw_polygon/draw_line starts), so this must only show the crosshair for
+  // touch/keyboard — same as onSetup/onMove — not unconditionally like touch's own
+  // onTouchStart/onTouchEnd, or a mouse-driven session would flash it on every entry.
+  onInterfaceTypeChange (state, e) {
+    this._setInterface(state, e.interfaceType, ['touch', 'keyboard'].includes(e.interfaceType))
+    this.onMove(state)
+  },
+
+  onBlur (state, e) {
+    if (e.target !== state.container) {
+      this._hideCrossHair(state)
+    }
+  },
+
+  onMouseMove (state, e) {
+    if (isSnapEnabled(state)) {
+      const snap = getSnapInstance(this.map)
+      triggerSnapAtPoint(snap, this.map, e.point)
+
+      const snappedLngLat = getSnapLngLat(snap)
+      if (snappedLngLat) {
+        e = { ...e, lngLat: snappedLngLat }
+      }
+    }
+
+    ParentMode.onMouseMove.call(this, state, e)
+
+    // Fired after the parent updates the rubber band so the payload (and the live
+    // invalid-stroke check driven by it) reflects the current cursor position.
+    this.map.fire('draw.geometrychange', state.polygon || state.line)
+  },
+
+  onMove (state) {
+    if (['touch', 'keyboard'].includes(state.interfaceType)) {
+      if (isSnapEnabled(state)) {
+        triggerSnapAtCenter(getSnapInstance(this.map), this.map)
+      }
+
+      const snap = getSnapInstance(this.map)
+      const snappedLngLat = isSnapEnabled(state) && getSnapLngLat(snap)
+
+      if (snappedLngLat) {
+        const point = this.map.project([snappedLngLat.lng, snappedLngLat.lat])
+        ParentMode.onMouseMove.call(this, state, {
+          lngLat: snappedLngLat,
+          point,
+          originalEvent: new MouseEvent('mousemove', {
+            clientX: point.x,
+            clientY: point.y,
+            bubbles: true,
+            cancelable: true
+          })
+        })
+        this._ctx.store.render()
+        // Parity with _simulateMouse: report the rubber-band move so the live
+        // invalid-stroke check sees snapped touch/keyboard moves too.
+        this.map.fire('draw.geometrychange', state.polygon || state.line)
+      } else {
+        this._simulateMouse('mousemove', ParentMode.onMouseMove, state)
+      }
+    }
+  },
+
+  onPointerdown (state, e) {
+    if (e.pointerType !== 'touch') {
+      this._setInterface(state, 'mouse', false)
+    }
+  },
+
+  onPointermove (state, e) {
+    if (e.pointerType !== 'touch') {
+      this._hideCrossHair(state)
+    }
+  },
+
+  onPointerup (state) {
+    this.dispatchVertexChange(getCoords(getFeature(state)))
+  }
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/pointerHandlers.test.js

@@ -0,0 +1,127 @@
+import { setup, clickAt, firedWith, activeSnap, DrawPolygonMode, DrawLineMode, CENTER } from './__helpers__/harness.js'
+
+describe('touch and pointer interface', () => {
+  test('touch start/end switch to touch interface and show the crosshair', () => {
+    const { ctx, state, marker } = setup(DrawPolygonMode)
+    ctx.onTouchStart(state, {})
+    expect(state.interfaceType).toBe('touch')
+    expect(marker.style.display).toBe('block')
+    ctx.onTouchEnd(state, {})
+    expect(state.interfaceType).toBe('touch')
+  })
+
+  test('non-touch pointerdown switches back to mouse without showing the crosshair; touch does not', () => {
+    const { ctx, state, marker } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    ctx.map.fire('pointerdown', { pointerType: 'mouse' })
+    expect(state.interfaceType).toBe('mouse')
+    expect(marker.style.display).toBe('block') // unchanged, not re-shown or hidden
+
+    ctx.map.fire('pointerdown', { pointerType: 'touch' })
+    expect(state.interfaceType).toBe('mouse')
+  })
+
+  test('mouse pointermove hides the crosshair; touch pointermove does not', () => {
+    const { ctx, marker } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    ctx.pointermoveHandler({ pointerType: 'touch' })
+    expect(marker.style.display).toBe('block')
+    ctx.pointermoveHandler({ pointerType: 'mouse' })
+    expect(marker.style.display).toBe('none')
+  })
+
+  test('pointerup reports the current vertex count', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    ctx.map.fire.mockClear()
+    ctx.pointerupHandler({})
+    expect(firedWith(ctx.map, 'draw.vertexchange')).toEqual([{ numVertecies: 1 }])
+  })
+
+  test('blur away from the container hides the crosshair; blur on the container does not', () => {
+    const { ctx, marker, container } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    ctx.blurHandler({ target: container })
+    expect(marker.style.display).toBe('block')
+    ctx.blurHandler({ target: document.body })
+    expect(marker.style.display).toBe('none')
+  })
+
+  test('draw.interfacetypechange (e.g. switching to touch and panning via MoveControl mid-session) updates the interface and refreshes the rubber band immediately', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    ctx.map.fire('draw.interfacetypechange', { interfaceType: 'touch' })
+    expect(state.interfaceType).toBe('touch')
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([CENTER.lng, CENTER.lat])
+  })
+
+  test('draw.interfacetypechange to touch/keyboard shows the crosshair; to mouse it does not', () => {
+    const { ctx, marker } = setup(DrawPolygonMode)
+    ctx.map.fire('draw.interfacetypechange', { interfaceType: 'touch' })
+    expect(marker.style.display).toBe('block')
+
+    marker.style.display = 'none' // reset, isolate the next assertion
+    ctx.map.fire('draw.interfacetypechange', { interfaceType: 'keyboard' })
+    expect(marker.style.display).toBe('block')
+  })
+
+  test('draw.interfacetypechange to mouse never shows the crosshair — fires on every mode entry regardless of device', () => {
+    const { ctx, marker } = setup(DrawPolygonMode)
+    ctx.map.fire('draw.interfacetypechange', { interfaceType: 'mouse' })
+    expect(marker.style.display).toBe('none')
+  })
+})
+
+describe('rubber band and snapping while moving', () => {
+  test('onMouseMove moves the rubber band, preferring the snapped position', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { getSnapEnabled: () => true })
+    clickAt(ctx, state, 0, 0)
+    ctx.map._snapInstance = activeSnap()
+    ctx.onMouseMove(state, { lngLat: { lng: 3, lat: 3 }, point: { x: 3, y: 3 } })
+    expect(ctx.map._snapInstance.snapToClosestPoint).toHaveBeenCalled()
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([9, 9])
+    expect(firedWith(ctx.map, 'draw.geometrychange').length).toBeGreaterThan(0)
+  })
+
+  test('onMouseMove without snap uses the pointer position', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    ctx.onMouseMove(state, { lngLat: { lng: 3, lat: 3 }, point: { x: 3, y: 3 } })
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([3, 3])
+  })
+
+  test('onMouseMove with snapping enabled but no snap point falls back to the pointer position', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { getSnapEnabled: () => true })
+    clickAt(ctx, state, 0, 0)
+    ctx.map._snapInstance = { status: true, snapStatus: false, snapCoords: null, snapToClosestPoint: jest.fn() }
+    ctx.onMouseMove(state, { lngLat: { lng: 3, lat: 3 }, point: { x: 3, y: 3 } })
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([3, 3])
+  })
+
+  test('map move in keyboard interface keeps the rubber band at center, or at the snap point when snapping', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    clickAt(ctx, state, 0, 0)
+    ctx.map.fire('move')
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([CENTER.lng, CENTER.lat])
+
+    state.getSnapEnabled = () => true
+    ctx.map._snapInstance = activeSnap()
+    ctx.map.fire('move')
+    expect(ctx.map._snapInstance.snapToClosestPoint).toHaveBeenCalled()
+    expect(state.polygon.coordinates[0].at(-1)).toEqual([9, 9])
+  })
+
+  test('map move in mouse interface leaves the rubber band alone', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    const before = [...state.polygon.coordinates[0].map((c) => [...c])]
+    ctx.map.fire('move')
+    expect(state.polygon.coordinates[0]).toEqual(before)
+  })
+
+  test('map move in keyboard line mode with snap fires geometrychange with state.line', () => {
+    const { ctx, state } = setup(DrawLineMode, { interfaceType: 'keyboard', getSnapEnabled: () => true })
+    clickAt(ctx, state, 0, 0)
+    ctx.map._snapInstance = activeSnap()
+    ctx.map.fire.mockClear()
+    ctx.map.fire('move')
+    expect(firedWith(ctx.map, 'draw.geometrychange').pop()).toBe(state.line)
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/renderHelpers.js

@@ -0,0 +1,59 @@
+/**
+ * Rendering helpers for the shared draw mode: crosshair/vertex-marker visibility,
+ * interface switching, simulated mouse events at map centre, and the display-feature
+ * pass that adds a marker on every placed vertex. Part of createDrawMode.
+ */
+export const createRenderHelpers = ({ ParentMode, geometryType, getFeature, getPlacedCoords }) => ({
+  _simulateMouse (type, fn, state) {
+    const { map } = this
+    const center = map.getCenter()
+    const point = map.project(center)
+    fn.call(this, state, {
+      lngLat: center,
+      point,
+      originalEvent: new MouseEvent(type, {
+        clientX: point.x,
+        clientY: point.y,
+        bubbles: true,
+        cancelable: true
+      })
+    })
+    this._ctx.store.render()
+
+    this.map.fire('draw.geometrychange', state.polygon || state.line)
+  },
+
+  _showCrossHair (state) {
+    if (state.crossHair) { state.crossHair.show() } else { state.vertexMarker.style.display = 'block' }
+  },
+
+  _hideCrossHair (state) {
+    if (state.crossHair) { state.crossHair.hide() } else { state.vertexMarker.style.display = 'none' }
+  },
+
+  _setInterface (state, type, show = true) {
+    state.interfaceType = type
+    if (show) {
+      this._showCrossHair(state)
+    }
+  },
+
+  toDisplayFeatures (state, geojson, display) {
+    ParentMode.toDisplayFeatures.call(this, state, geojson, display)
+
+    // Display features carry the id in properties.id (no top-level id)
+    const feature = getFeature(state)
+    if (geojson.geometry.type === geometryType && geojson.properties.id === feature.id) {
+      // Parent modes render only some placed vertices (which ones varies by
+      // mapbox-gl-draw version) — add a marker on every placed vertex. The
+      // 'draw-vertex' meta is display-only: it's not in mapbox-gl-draw's
+      // META_TYPES, so featuresAt ignores these markers and the parent's own
+      // vertex click targets (click first/last to finish) keep working.
+      getPlacedCoords(geojson).forEach((coordinates) => display({
+        type: 'Feature',
+        properties: { meta: 'draw-vertex', parent: feature.id, active: 'false' },
+        geometry: { type: 'Point', coordinates }
+      }))
+    }
+  }
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/renderHelpers.test.js

@@ -0,0 +1,34 @@
+import { setup, clickAt, DrawPolygonMode, DrawLineMode } from './__helpers__/harness.js'
+
+describe('vertex marker display', () => {
+  const displayed = (ctx, state, geometry, id) => {
+    const display = jest.fn()
+    ctx.toDisplayFeatures(state, { type: 'Feature', properties: { id }, geometry }, display)
+    return display.mock.calls.map(([f]) => f).filter((f) => f.properties.meta === 'draw-vertex')
+  }
+
+  test('every placed polygon vertex gets a display-only draw-vertex marker', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+    const ring = [[0, 0], [10, 0], [10, 10], [5, 5], [0, 0]] // placed + rubber + closing
+    const markers = displayed(ctx, state, { type: 'Polygon', coordinates: [ring] }, state.polygon.id)
+    expect(markers.map((m) => m.geometry.coordinates)).toEqual([[0, 0], [10, 0], [10, 10]])
+    expect(markers[0].properties).toEqual({ meta: 'draw-vertex', parent: state.polygon.id, active: 'false' })
+  })
+
+  test('every placed line vertex gets a marker', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    ctx.doClick(state)
+    const coords = [[5, 5], [8, 8]] // placed + rubber
+    const markers = displayed(ctx, state, { type: 'LineString', coordinates: coords }, state.line.id)
+    expect(markers.map((m) => m.geometry.coordinates)).toEqual([[5, 5]])
+  })
+
+  test('other features get no markers', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    const ring = [[0, 0], [10, 0], [10, 10], [0, 0]]
+    expect(displayed(ctx, state, { type: 'Polygon', coordinates: [ring] }, 'other-feature')).toEqual([])
+  })
+})