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

package/plugins/draw/src/adapters/maplibre/modes/disabledMode.js

@@ -0,0 +1,23 @@
+export const DisabledMode = {
+  onSetup () {
+    return {} // Return empty state
+  },
+
+  onClick () {
+    // Prevent feature selection
+    return false
+  },
+
+  onKeyUp () {
+    return false
+  },
+
+  onDrag () {
+    return false
+  },
+
+  toDisplayFeatures (_state, geojson, display) {
+    geojson.properties.active = 'false'
+    display(geojson)
+  }
+}

package/plugins/draw/src/adapters/maplibre/modes/disabledMode.test.js

@@ -0,0 +1,21 @@
+import { DisabledMode } from './disabledMode.js'
+
+describe('DisabledMode', () => {
+  test('onSetup returns an empty state', () => {
+    expect(DisabledMode.onSetup()).toEqual({})
+  })
+
+  test('interaction handlers are disabled (return false to block selection/drag/keys)', () => {
+    expect(DisabledMode.onClick()).toBe(false)
+    expect(DisabledMode.onKeyUp()).toBe(false)
+    expect(DisabledMode.onDrag()).toBe(false)
+  })
+
+  test('toDisplayFeatures marks the feature inactive and still displays it', () => {
+    const display = jest.fn()
+    const geojson = { properties: {} }
+    DisabledMode.toDisplayFeatures({}, geojson, display)
+    expect(geojson.properties.active).toBe('false')
+    expect(display).toHaveBeenCalledWith(geojson)
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/drawLineMode.js

@@ -0,0 +1,15 @@
+import MapboxDraw from '@mapbox/mapbox-gl-draw'
+import { isValidLineClick } from '../../../utils/spatial.js'
+import { createDrawMode } from './createDrawMode.js'
+
+// Extend the built-in mode via the package's public API (MapboxDraw.modes) rather than a deep internal import
+export const DrawLineMode = createDrawMode(MapboxDraw.modes.draw_line_string, {
+  featureProp: 'line',
+  geometryType: 'LineString',
+  getCoords: (feature) => feature.coordinates,
+  validateClick: (feature) => isValidLineClick(feature.coordinates),
+  excludeFeatureIdFromSetup: true, // DrawLineString interprets featureId as "continue existing"
+  finishOnInvalidClick: true, // Clicking same spot (like double-click) finishes the line
+  // Display coords during drawing: [v0...vN, rubber_band]
+  getPlacedCoords: (geojson) => geojson.geometry.coordinates.slice(0, -1)
+})

package/plugins/draw/src/adapters/maplibre/modes/drawLineMode.test.js

@@ -0,0 +1,37 @@
+import { setup, firedWith, DrawLineMode } from './drawMode/__helpers__/harness.js'
+
+const drawVertexMarkers = (ctx, state, geometry) => {
+  const display = jest.fn()
+  ctx.toDisplayFeatures(state, { type: 'Feature', properties: { id: state.line.id }, geometry }, display)
+  return display.mock.calls.map(([f]) => f)
+    .filter((f) => f.properties.meta === 'draw-vertex')
+    .map((m) => m.geometry.coordinates)
+}
+
+describe('DrawLineMode config', () => {
+  test('excludeFeatureIdFromSetup starts a fresh line feature even when a featureId is supplied', () => {
+    const { state } = setup(DrawLineMode)
+    expect(state.line).toBeDefined()
+    expect(state.featureId).toBe('shape-1')
+  })
+
+  test('getCoords reads the line coordinates directly (not a ring)', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    ctx.doClick(state)
+    expect(state.line.coordinates[0]).toEqual([5, 5]) // first placed vertex, at map centre
+  })
+
+  test('getPlacedCoords marks every placed vertex, excluding the rubber band', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    // Display coords: [v0..vN, rubber_band] → placed = slice(0, -1)
+    expect(drawVertexMarkers(ctx, state, { type: 'LineString', coordinates: [[5, 5], [8, 8]] })).toEqual([[5, 5]])
+  })
+
+  test('finishOnInvalidClick finishes the line when the same spot is clicked twice', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    ctx.doClick(state)
+    ctx.doClick(state) // same spot → finish (like a double-click)
+    expect(firedWith(ctx.map, 'draw.create')).toHaveLength(1)
+    expect(ctx.changeMode).toHaveBeenCalledWith('simple_select', { featureIds: [state.line.id] })
+  })
+})

package/plugins/draw/src/adapters/maplibre/modes/drawMode/__helpers__/harness.js

@@ -0,0 +1,115 @@
+import { DrawPolygonMode } from '../../drawPolygonMode.js'
+import { DrawLineMode } from '../../drawLineMode.js'
+import { createUndoStack } from '../../../../../utils/undoStack.js'
+import PolygonFeature from '../../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/polygon.js'
+import LineStringFeature from '../../../../../../../../node_modules/@mapbox/mapbox-gl-draw/src/feature_types/line_string.js'
+
+/**
+ * Shared test harness for the createDrawMode handler modules. Exercises the real
+ * DrawPolygonMode / DrawLineMode (real mapbox-gl-draw parent modes and feature
+ * classes) over test doubles for the map, store and DOM. Excluded from coverage.
+ */
+
+export { DrawPolygonMode, DrawLineMode }
+export const CENTER = { lng: 5, lat: 5 }
+
+const createMap = () => {
+  const canvas = document.createElement('canvas')
+  const listeners = {}
+  return {
+    _undoInProgress: false,
+    _undoStack: null,
+    _snapInstance: null,
+    doubleClickZoom: { disable: jest.fn(), enable: jest.fn() },
+    getCanvas: () => canvas,
+    getCenter: () => ({ ...CENTER }),
+    project: jest.fn(() => ({ x: 50, y: 50 })),
+    unproject: jest.fn(() => ({ ...CENTER })),
+    fire: jest.fn(function (type, e) { (listeners[type] ?? []).forEach((h) => h(e)) }),
+    on: jest.fn((type, h) => { (listeners[type] ??= []).push(h) }),
+    off: jest.fn((type, h) => { listeners[type] = (listeners[type] ?? []).filter((x) => x !== h) })
+  }
+}
+
+// The `this` context mapbox-gl-draw gives a mode: map, ctx accessors and the mode's own methods
+const createModeContext = (mode) => {
+  const map = createMap()
+  const features = new Map()
+  const store = {
+    add: jest.fn((f) => features.set(f.id, f)),
+    delete: jest.fn((ids) => ids.forEach((id) => features.delete(id))),
+    render: jest.fn(),
+    featureChanged: jest.fn(),
+    getInitialConfigValue: jest.fn(() => true)
+  }
+  const ctx = {
+    map,
+    _ctx: { store, api: { changeMode: jest.fn(), add: jest.fn(), delete: jest.fn() }, options: {} },
+    addFeature: (f) => store.add(f),
+    getFeature: (id) => features.get(id),
+    deleteFeature: jest.fn((ids) => ids.forEach((id) => features.delete(id))),
+    clearSelectedFeatures: jest.fn(),
+    updateUIClasses: jest.fn(),
+    activateUIButton: jest.fn(),
+    setActionableState: jest.fn(),
+    changeMode: jest.fn()
+  }
+  ctx.newFeature = (geojson) => geojson.geometry.type === 'Polygon'
+    ? new PolygonFeature(ctx._ctx, geojson)
+    : new LineStringFeature(ctx._ctx, geojson)
+  Object.assign(ctx, mode)
+  contexts.push(ctx)
+  return ctx
+}
+
+// Remove window/container/map listeners registered by onSetup so tests don't leak into each other
+const contexts = []
+const removeListeners = (ctx) => ctx._listeners?.forEach(([t, e, h]) =>
+  t.removeEventListener ? t.removeEventListener(e, h) : t.off(e, h))
+
+const createContainer = () => {
+  const container = document.createElement('div')
+  container.tabIndex = 0
+  const marker = document.createElement('div')
+  marker.id = 'vertex-marker'
+  container.appendChild(marker)
+  const button = document.createElement('button')
+  button.id = 'add-vertex'
+  container.appendChild(button)
+  document.body.appendChild(container)
+  return { container, marker, button }
+}
+
+export const setup = (mode, options = {}) => {
+  const ctx = createModeContext(mode)
+  const dom = createContainer()
+  ctx.map._undoStack = createUndoStack(() => {})
+  const state = ctx.onSetup({
+    container: dom.container,
+    vertexMarkerId: 'vertex-marker',
+    addVertexButtonId: 'add-vertex',
+    interfaceType: 'mouse',
+    featureId: 'shape-1',
+    properties: { label: 'field' },
+    ...options
+  })
+  return { ctx, state, ...dom }
+}
+
+export const clickEvent = (ctx, lng, lat, overrides = {}) => ({
+  lngLat: { lng, lat },
+  point: { x: lng, y: lat },
+  originalEvent: { button: 0, target: ctx.map.getCanvas(), ...overrides }
+})
+
+export const clickAt = (ctx, state, lng, lat) => ctx.onClick(state, clickEvent(ctx, lng, lat))
+
+export const firedWith = (map, type) => map.fire.mock.calls.filter(([t]) => t === type).map(([, e]) => e)
+
+export const activeSnap = () => ({ status: true, snapStatus: true, snapCoords: [9, 9], snapToClosestPoint: jest.fn() })
+
+afterEach(() => {
+  contexts.splice(0).forEach(removeListeners)
+  document.body.innerHTML = ''
+  jest.useRealTimers()
+})

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

@@ -0,0 +1,193 @@
+import {
+  getSnapInstance, isSnapActive, isSnapEnabled, createSnappedEvent, createSnappedClickEvent
+} from '../../utils/snapHelpers.js'
+import { attemptPlacement } from '../../../../validation/validateGeometry.js'
+
+// The commit-level geometrychange payload for a vertex commit: the placed-only
+// geometry (trailing rubber-band point dropped so validation tests the committed shape).
+const placedDrawGeometryChange = (feature, getCoords, phase) => {
+  const placed = getCoords(feature).slice(0, -1)
+  const type = feature.toGeoJSON().geometry.type
+  const geometry = type === 'Polygon'
+    ? { type: 'Polygon', coordinates: [placed] }
+    : { type: 'LineString', coordinates: placed }
+  return { feature: { type: 'Feature', geometry, properties: {} }, phase, vertexIndex: Math.max(0, placed.length - 1) }
+}
+
+// Fire a commit-level geometrychange for validation, deferred a tick so it runs after
+// the current click settles.
+const scheduleDrawValidation = (map, getFeature, getCoords, state, phase) => {
+  setTimeout(() => {
+    const feature = getFeature(state)
+    if (!feature) { return }
+    map.fire('draw.geometrychange', placedDrawGeometryChange(feature, getCoords, phase))
+  }, 0)
+}
+
+// Re-id a freshly created feature to the caller's requested id.
+const reidCreatedFeature = (api, feature, featureId) => {
+  api.delete(feature.id)
+  feature.id = featureId
+  api.add(feature, { userProperties: true })
+}
+
+// Guards, notifications, and small wiring handlers shared by the click paths.
+const createClickHelpers = ({ geometryType, getFeature, getCoords }) => ({
+  // Non-drawing clicks: secondary buttons, clicks during an undo, or off-canvas.
+  _isIgnorableClick (e) {
+    return e.originalEvent.button > 0 || this.map._undoInProgress || e.originalEvent.target !== this.map.getCanvas()
+  },
+
+  // Attempt a placement through the shared hard rules + user callback. On a veto
+  // the vertex never appears and a draw.placementblocked event carries the
+  // reason. The trailing rubber-band coord is dropped so the candidate is placed
+  // vertices + the point about to be placed.
+  _canPlaceVertex (state, point) {
+    const feature = getFeature(state)
+    if (!feature || !point) { return true }
+    const result = attemptPlacement({
+      placed: getCoords(feature).slice(0, -1),
+      point,
+      geometryType,
+      onGeometryChange: this.map._drawGeometryValidator
+    })
+    if (!result.valid) {
+      this.map.fire('draw.placementblocked', result.blocked)
+    }
+    return result.valid
+  },
+
+  dispatchVertexChange (coords) {
+    // Both polygon ring and LineString store [v0...vN, rubber_band] during drawing — subtract 1 to get placed vertex count
+    this.map.fire('draw.vertexchange', {
+      numVertecies: Math.max(0, coords.length - 1)
+    })
+  },
+
+  // Emit a commit-level geometrychange after a vertex commit (placement or undo)
+  // so the validation layer can gate the Done button.
+  emitDrawValidation (state, phase = 'commit-add') {
+    scheduleDrawValidation(this.map, getFeature, getCoords, state, phase)
+  },
+
+  onTap () {
+
+  },
+
+  onVertexButtonClick (state, e) {
+    // Only trigger for the specific add vertex button, and skip during undo
+    if (state.addVertexButtonId && !this.map._undoInProgress && e.target.closest(`#${state.addVertexButtonId}`)) {
+      this.doClick(state)
+    }
+  },
+
+  onCreate (state, e) {
+    reidCreatedFeature(this._ctx.api, e.features[0], state.featureId)
+  }
+})
+
+// The click paths themselves: mouse clicks and the simulated crosshair click
+// (touch / keyboard / add-vertex button).
+const createClickActions = ({ ParentMode, getFeature, getCoords, validateClick, finishOnInvalidClick }) => {
+  // Snap is inactive: sync the trailing rubber-band point to the click, then guard
+  // against a duplicate-coordinate click reaching ParentMode, which would trigger a
+  // changeMode chain and cause a runtime error on coords.length access (polygon).
+  // Returns false when the click should be dropped without placing a vertex.
+  const prepareUnsnappedClick = (state, e) => {
+    const coords = getCoords(getFeature(state))
+    if (coords.length > 0) {
+      coords[coords.length - 1] = [e.lngLat.lng, e.lngLat.lat]
+    }
+    return finishOnInvalidClick || validateClick(getFeature(state))
+  }
+
+  return {
+    onClick (state, e) {
+      // Skip non-primary clicks, undo operations, or clicks outside canvas
+      if (this._isIgnorableClick(e)) {
+        return
+      }
+      // Block a finish/close gesture (clicking a placed vertex) while the shape is invalid.
+      if (this.map._drawGeometryValid === false && e.featureTarget?.properties?.meta === 'vertex') {
+        return
+      }
+      const snap = getSnapInstance(this.map)
+      if (isSnapEnabled(state) && isSnapActive(snap)) {
+        e = createSnappedEvent(e, snap)
+      } else if (!prepareUnsnappedClick(state, e)) {
+        return
+      } else {
+        // No action
+      }
+      // Hard gate: a placement the rules or the user callback veto never appears, so
+      // an unrecoverable state (e.g. a self-crossing path) can't be drawn forward.
+      if (!this._canPlaceVertex(state, [e.lngLat.lng, e.lngLat.lat])) {
+        return
+      }
+      const coordsBefore = getCoords(getFeature(state)).length
+      ParentMode.onClick.call(this, state, e)
+      // Push undo and update count if a vertex was added
+      if (getCoords(getFeature(state)).length > coordsBefore) {
+        this.pushDrawUndo(state)
+        this.dispatchVertexChange(getCoords(getFeature(state)))
+        this.emitDrawValidation(state)
+      }
+    },
+
+    doClick (state) {
+      // Skip during undo operation
+      if (this.map._undoInProgress) {
+        return
+      }
+
+      const feature = getFeature(state)
+      const coords = getCoords(feature)
+      this.dispatchVertexChange(coords)
+
+      if (!validateClick(feature)) {
+        // For lines: clicking same spot (like double-click) should finish the line — but
+        // only when the geometry is valid, so an invalid line can't be completed.
+        // isValidLineClick only returns false with 2+ coords, so coords.length is always > 1 here.
+        if (finishOnInvalidClick && this.map._drawGeometryValid !== false) {
+          coords.pop()
+          this.map.fire('draw.create', { features: [feature.toGeoJSON()] })
+          this.changeMode('simple_select', { featureIds: [feature.id] })
+        }
+        return
+      }
+
+      const snap = getSnapInstance(this.map)
+      const snappedEvent = isSnapEnabled(state) && createSnappedClickEvent(this.map, snap)
+
+      // Hard-gate parity with onClick: touch/keyboard/add-button placements are vetoed
+      // at the point that would actually be committed (snapped or map centre).
+      const target = snappedEvent ? snappedEvent.lngLat : this.map.getCenter()
+      if (!this._canPlaceVertex(state, [target.lng, target.lat])) {
+        return
+      }
+
+      if (snappedEvent) {
+        ParentMode.onClick.call(this, state, snappedEvent)
+        this._ctx.store.render()
+      } else {
+        this._simulateMouse('click', ParentMode.onClick, state)
+      }
+
+      // Push undo and update count if a vertex was added. A validated click always
+      // adds one vertex via the parent mode, so this runs on every successful doClick.
+      const newCoords = getCoords(getFeature(state))
+      this.pushDrawUndo(state)
+      this.dispatchVertexChange(newCoords)
+      this.emitDrawValidation(state)
+    }
+  }
+}
+
+/**
+ * Click / vertex-placement handling for the shared draw mode: mouse clicks, the
+ * add-vertex button, and the draw.create re-id step. Part of createDrawMode.
+ */
+export const createClickHandlers = (deps) => ({
+  ...createClickHelpers(deps),
+  ...createClickActions(deps)
+})

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

@@ -0,0 +1,241 @@
+import { setup, clickAt, clickEvent, firedWith, activeSnap, DrawPolygonMode, DrawLineMode, CENTER } from './__helpers__/harness.js'
+
+describe('mouse clicks (polygon)', () => {
+  test('each click at a new position places a vertex, fires vertexchange and pushes an undo op', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+
+    // Ring is [v0, v1, rubber_band]
+    expect(state.polygon.coordinates[0]).toHaveLength(3)
+    expect(state.polygon.coordinates[0][0]).toEqual([0, 0])
+    expect(state.polygon.coordinates[0][1]).toEqual([10, 0])
+    expect(firedWith(ctx.map, 'draw.vertexchange').pop()).toEqual({ numVertecies: 2 })
+    expect(ctx.map._undoStack.length).toBe(2)
+  })
+
+  test('clicking the same position again is rejected', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 0, 0)
+    expect(state.polygon.coordinates[0]).toHaveLength(2)
+    expect(ctx.map._undoStack.length).toBe(1)
+  })
+
+  test('rejects a click that would make the drawn path cross itself', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 10)
+    clickAt(ctx, state, 10, 0)
+    const lenBefore = state.polygon.coordinates[0].length
+    clickAt(ctx, state, 0, 10) // the new edge would cross the (0,0)-(10,10) edge
+    expect(state.polygon.coordinates[0].length).toBe(lenBefore) // vertex never placed
+  })
+
+  test('a rejected placement fires draw.placementblocked with the reason', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 10)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 0, 10)
+    expect(firedWith(ctx.map, 'draw.placementblocked').pop()).toEqual(expect.objectContaining({
+      phase: 'place',
+      mode: 'draw_polygon',
+      vertexIndex: 3,
+      reason: expect.any(String),
+      feature: expect.objectContaining({ type: 'Feature' })
+    }))
+  })
+
+  test('the user callback can veto a mouse placement (and receives phase "place")', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.map._drawGeometryValidator = jest.fn((event) =>
+      event.phase === 'place' ? { valid: false, reason: 'outside region' } : { valid: true })
+    clickAt(ctx, state, 0, 0)
+    expect(state.polygon.coordinates[0]).toHaveLength(0) // first vertex vetoed
+    expect(firedWith(ctx.map, 'draw.placementblocked').pop()).toEqual(
+      expect.objectContaining({ reason: 'outside region', vertexIndex: 0 }))
+  })
+
+  test('non-primary buttons, undo-in-progress and off-canvas clicks are ignored', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.onClick(state, clickEvent(ctx, 0, 0, { button: 2 }))
+    ctx.map._undoInProgress = true
+    clickAt(ctx, state, 0, 0)
+    ctx.map._undoInProgress = false
+    ctx.onClick(state, clickEvent(ctx, 0, 0, { target: document.body }))
+    expect(state.polygon.coordinates[0]).toHaveLength(0)
+  })
+
+  test('with snap active the vertex is placed at the snapped position', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { getSnapEnabled: () => true })
+    ctx.map._snapInstance = activeSnap()
+    clickAt(ctx, state, 0, 0)
+    expect(state.polygon.coordinates[0][0]).toEqual([9, 9])
+  })
+
+  test('onTap is disabled', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    expect(ctx.onTap(state, clickEvent(ctx, 0, 0))).toBeUndefined()
+    expect(state.polygon.coordinates[0]).toHaveLength(0)
+  })
+
+  test('placing a vertex emits a deferred commit-level geometrychange for validation', () => {
+    jest.useFakeTimers()
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    jest.runAllTimers()
+    const geomChange = firedWith(ctx.map, 'draw.geometrychange').pop()
+    expect(geomChange).toEqual(expect.objectContaining({ phase: 'commit-add', feature: expect.any(Object) }))
+    jest.useRealTimers()
+  })
+
+  test('emitDrawValidation does not fire without a feature', () => {
+    jest.useFakeTimers()
+    const { ctx } = setup(DrawPolygonMode)
+    ctx.emitDrawValidation({}) // no polygon on the state
+    jest.runAllTimers()
+    expect(firedWith(ctx.map, 'draw.geometrychange')).toHaveLength(0)
+    jest.useRealTimers()
+  })
+
+  test('a line placement emits a LineString geometrychange', () => {
+    jest.useFakeTimers()
+    const { ctx, state } = setup(DrawLineMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    jest.runAllTimers()
+    const geom = firedWith(ctx.map, 'draw.geometrychange').pop()
+    expect(geom.feature.geometry.type).toBe('LineString')
+    jest.useRealTimers()
+  })
+
+  test('blocks a close gesture (vertex click) while the geometry is invalid', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 5, 10)
+    ctx.map._drawGeometryValid = false
+    const lenBefore = state.polygon.coordinates[0].length
+    ctx.onClick(state, { ...clickEvent(ctx, 0, 0), featureTarget: { properties: { meta: 'vertex' } } })
+    expect(state.polygon.coordinates[0].length).toBe(lenBefore) // finish gesture ignored
+    expect(firedWith(ctx.map, 'draw.create')).toHaveLength(0)
+  })
+})
+
+describe('add-vertex button and doClick', () => {
+  test('clicking the add-vertex button places a vertex at map center', () => {
+    const { ctx, state, button } = setup(DrawPolygonMode, { interfaceType: 'keyboard' })
+    ctx.vertexButtonClickHandler({ target: button })
+    expect(state.polygon.coordinates[0][0]).toEqual([CENTER.lng, CENTER.lat])
+    expect(ctx.map._undoStack.length).toBe(1)
+  })
+
+  test('does not finish a line via doClick while the geometry is invalid', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    ctx.map._drawGeometryValid = false
+    // Rubber-band duplicates the last placed vertex → a finish gesture.
+    state.line.setCoordinates([[0, 0], [10, 0], [10, 0]])
+    ctx.doClick(state)
+    expect(firedWith(ctx.map, 'draw.create')).toHaveLength(0)
+  })
+
+  test('clicks elsewhere, without a button id, or during undo do nothing', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.vertexButtonClickHandler({ target: document.body })
+    ctx.map._undoInProgress = true
+    ctx.doClick(state)
+    ctx.map._undoInProgress = false
+    const noButton = setup(DrawPolygonMode, { addVertexButtonId: null })
+    noButton.ctx.vertexButtonClickHandler({ target: document.body })
+    expect(state.polygon.coordinates[0]).toHaveLength(0)
+    expect(noButton.state.polygon.coordinates[0]).toHaveLength(0)
+  })
+
+  test('doClick rejects a placement that would make the drawn path cross itself', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, -10)
+    const lenBefore = state.polygon.coordinates[0].length
+    ctx.doClick(state) // map centre is (5,5): the new edge would cross (0,0)-(10,0)
+    expect(state.polygon.coordinates[0].length).toBe(lenBefore)
+    expect(firedWith(ctx.map, 'draw.placementblocked').length).toBeGreaterThan(0)
+  })
+
+  test('the user callback can veto a doClick placement', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.map._drawGeometryValidator = () => ({ valid: false, reason: 'outside region' })
+    ctx.doClick(state)
+    expect(state.polygon.coordinates[0]).toHaveLength(0)
+    expect(firedWith(ctx.map, 'draw.placementblocked').pop()).toEqual(
+      expect.objectContaining({ reason: 'outside region', phase: 'place' }))
+  })
+
+  test('doClick places at the snapped position when snapping', () => {
+    const { ctx, state } = setup(DrawPolygonMode, { getSnapEnabled: () => true })
+    ctx.map._snapInstance = activeSnap()
+    ctx.doClick(state)
+    expect(state.polygon.coordinates[0][0]).toEqual([9, 9])
+    expect(ctx._ctx.store.render).toHaveBeenCalled()
+  })
+
+  test('line: activating add-vertex at the same spot twice finishes the line', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    ctx.doClick(state)
+    ctx.doClick(state)
+    expect(firedWith(ctx.map, 'draw.create')).toHaveLength(1)
+    expect(ctx.changeMode).toHaveBeenCalledWith('simple_select', { featureIds: [state.line.id] })
+  })
+
+  test('polygon: a repeated add-vertex at the same spot is rejected without finishing', () => {
+    const { ctx, state } = setup(DrawPolygonMode)
+    ctx.doClick(state)
+    ctx.doClick(state)
+    expect(firedWith(ctx.map, 'draw.create')).toHaveLength(0)
+    expect(ctx.changeMode).not.toHaveBeenCalled()
+  })
+})
+
+describe('line mode mouse interactions', () => {
+  test('mouse clicks place line vertices; moving then undoing keeps the rubber band on the last vertex', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    clickAt(ctx, state, 10, 10)
+    expect(state.line.coordinates.map(([x]) => x)).toEqual([0, 10, 10, 10]) // 3 placed + rubber band
+
+    ctx.onMouseMove(state, { lngLat: { lng: 3, lat: 3 }, point: { x: 3, y: 3 } })
+    expect(state.line.coordinates.at(-1)).toEqual([3, 3])
+    expect(firedWith(ctx.map, 'draw.geometrychange').length).toBeGreaterThan(0)
+
+    ctx.map._undoStack.push({ type: 'draw_vertex' })
+    ctx.undoVertex(state)
+    const coords = state.line.coordinates
+    expect(coords[coords.length - 1]).toEqual(coords[coords.length - 2])
+  })
+
+  test('a repeated mouse click at the last vertex adds no new vertex and does not finish the line', () => {
+    const { ctx, state } = setup(DrawLineMode)
+    clickAt(ctx, state, 0, 0)
+    clickAt(ctx, state, 10, 0)
+    const before = state.line.coordinates.length
+    clickAt(ctx, state, 10, 0)
+    expect(state.line.coordinates.length).toBe(before)
+    expect(firedWith(ctx.map, 'draw.create')).toHaveLength(0)
+  })
+})
+
+describe('onCreate (draw.create re-id)', () => {
+  test('re-ids the created feature to the requested featureId', () => {
+    const { ctx } = setup(DrawPolygonMode)
+    const feature = { id: 'temp-id' }
+    ctx.map.fire('draw.create', { features: [feature] })
+    expect(ctx._ctx.api.delete).toHaveBeenCalledWith('temp-id')
+    expect(feature.id).toBe('shape-1')
+    expect(ctx._ctx.api.add).toHaveBeenCalledWith(feature, { userProperties: true })
+  })
+})