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

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

@@ -0,0 +1,140 @@
+import { createDrawInput } from './drawInput.js'
+import { createVertexPlacement } from './vertexPlacement.js'
+import { createFakeMap, createContainer } from '../__helpers__/harness.js'
+
+jest.mock('./vertexPlacement.js', () => ({
+  createVertexPlacement: jest.fn(() => ({
+    placeVertex: jest.fn(),
+    updateRubberbanding: jest.fn(),
+    clearLastCoord: jest.fn()
+  }))
+}))
+
+const setup = (interfaceType = 'mouse') => {
+  const map = createFakeMap()
+  const container = createContainer()
+  const button = document.createElement('button')
+  button.id = 'add-pt'
+  document.body.appendChild(button)
+  const onUndo = jest.fn()
+  const input = createDrawInput({
+    drawInteraction: { getMap: () => map },
+    options: { container, addVertexButtonId: 'add-pt', interfaceType, mapProvider: {}, snap: null, onUndo }
+  })
+  const placement = createVertexPlacement.mock.results.at(-1).value
+  liveInputs.push(input)
+  return { map, view: map.getView(), container, button, input, placement, onUndo }
+}
+
+const liveInputs = []
+afterEach(() => {
+  liveInputs.splice(0).forEach((i) => i.destroy())
+  document.body.innerHTML = ''
+  jest.clearAllMocks()
+})
+
+const key = (props) => window.dispatchEvent(new KeyboardEvent('keydown', { cancelable: true, ...props }))
+
+test('Enter places a vertex and switches to keyboard — only while focus is inside the viewport', () => {
+  const { container, input, placement } = setup()
+  key({ key: 'Enter' })
+  expect(placement.placeVertex).not.toHaveBeenCalled()
+
+  container.focus()
+  key({ key: 'Enter' })
+  expect(placement.placeVertex).toHaveBeenCalled()
+  expect(input.getInterfaceType()).toBe('keyboard')
+})
+
+test('arrow keys switch to the keyboard interface without placing', () => {
+  const { container, input, placement } = setup()
+  container.focus()
+  key({ key: 'ArrowUp' })
+  expect(input.getInterfaceType()).toBe('keyboard')
+  expect(placement.placeVertex).not.toHaveBeenCalled()
+})
+
+test('ctrl/cmd+z triggers undo', () => {
+  const { container, onUndo } = setup()
+  container.focus()
+  key({ key: 'z', ctrlKey: true })
+  expect(onUndo).toHaveBeenCalled()
+})
+
+test('the add-vertex button places a vertex; other clicks do not', () => {
+  const { button, placement } = setup()
+  button.click()
+  expect(placement.placeVertex).toHaveBeenCalledTimes(1)
+  document.body.click()
+  expect(placement.placeVertex).toHaveBeenCalledTimes(1)
+})
+
+test('pointer and touch input switch the interface type', () => {
+  const { container, input, placement } = setup('keyboard')
+  container.dispatchEvent(Object.assign(new Event('pointerdown'), { pointerType: 'mouse' }))
+  expect(input.getInterfaceType()).toBe('mouse')
+  expect(placement.clearLastCoord).toHaveBeenCalled()
+
+  container.dispatchEvent(new Event('touchstart'))
+  expect(input.getInterfaceType()).toBe('touch')
+})
+
+test('a touch pointerdown is left for the touchstart handler to classify', () => {
+  const { container, input, placement } = setup('keyboard')
+  container.dispatchEvent(Object.assign(new Event('pointerdown'), { pointerType: 'touch' }))
+  expect(input.getInterfaceType()).toBe('keyboard') // onPointerdown ignored the touch pointer
+  expect(placement.clearLastCoord).not.toHaveBeenCalled()
+})
+
+test('the interface type defaults to mouse when none is supplied', () => {
+  const map = createFakeMap()
+  const container = createContainer()
+  const input = createDrawInput({
+    drawInteraction: { getMap: () => map },
+    options: { container, addVertexButtonId: 'add-pt', mapProvider: {}, snap: null, onUndo: jest.fn() }
+  })
+  liveInputs.push(input)
+  expect(input.getInterfaceType()).toBe('mouse')
+})
+
+test('pointer moves and map pans update the rubber band except for the mouse interface', () => {
+  const { container, view, placement } = setup('touch')
+  container.dispatchEvent(new Event('pointermove'))
+  view.emit('change:center')
+  expect(placement.updateRubberbanding).toHaveBeenCalledTimes(2)
+
+  const mouse = setup('mouse')
+  mouse.container.dispatchEvent(new Event('pointermove'))
+  mouse.view.emit('change:center')
+  expect(mouse.placement.updateRubberbanding).not.toHaveBeenCalled()
+})
+
+test('setInterfaceType updates the interface and refreshes the rubber band immediately for non-mouse types, e.g. switching to touch and panning via MoveControl mid-session', () => {
+  const { input, placement } = setup('mouse')
+  input.setInterfaceType('touch')
+  expect(input.getInterfaceType()).toBe('touch')
+  expect(placement.updateRubberbanding).toHaveBeenCalledTimes(1)
+
+  input.setInterfaceType('mouse')
+  expect(input.getInterfaceType()).toBe('mouse')
+  expect(placement.updateRubberbanding).toHaveBeenCalledTimes(1) // not called again for mouse
+})
+
+test('keyboard pan animations keep the rubber band anchored via postrender', () => {
+  const { map, view, placement } = setup('keyboard')
+  view.getAnimating.mockReturnValue(true)
+  map.emit('postrender')
+  expect(placement.updateRubberbanding).toHaveBeenCalledTimes(1)
+  view.getAnimating.mockReturnValue(false)
+  map.emit('postrender')
+  expect(placement.updateRubberbanding).toHaveBeenCalledTimes(1)
+})
+
+test('destroy removes all listeners', () => {
+  const { container, button, input, placement } = setup()
+  input.destroy()
+  container.focus()
+  key({ key: 'Enter' })
+  button.click()
+  expect(placement.placeVertex).not.toHaveBeenCalled()
+})

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

@@ -0,0 +1,144 @@
+import { coordToPixel, pixelDist } from '../utils/olCoords.js'
+import { getLastPlacedSketchCoord } from '../utils/sketchHelpers.js'
+
+const SNAP_TOLERANCE = 12 // pixels
+// Minimum ring length to allow snap-to-close (placed vertices + rubber-band)
+const MIN_SKETCH_COORDS = { Polygon: 4, LineString: 3 }
+const DUPLICATE_TOLERANCE_PX = 2
+
+export const isCloseToFirstVertex = (map, coord, sketchCoords, geometryType) => {
+  if (geometryType !== 'Polygon' || sketchCoords.length < MIN_SKETCH_COORDS.Polygon) {
+    return false
+  }
+  const currentPixel = coordToPixel(map, coord)
+  const firstPixel = coordToPixel(map, sketchCoords[0])
+  if (!currentPixel || !firstPixel) {
+    return false
+  }
+  return pixelDist(currentPixel, firstPixel) < SNAP_TOLERANCE
+}
+
+export const applyRubberbanding = (geom, centerCoord) => {
+  if (geom.getType() === 'LineString') {
+    const updated = [...geom.getCoordinates()]
+    updated[updated.length - 1] = centerCoord
+    geom.setCoordinates(updated)
+  } else if (geom.getType() === 'Polygon') {
+    const updated = geom.getCoordinates().map((ring, i) => {
+      if (i !== 0) {
+        return ring
+      }
+      const r = [...ring]
+      r[r.length - 1] = centerCoord
+      return r
+    })
+    geom.setCoordinates(updated)
+  } else {
+    // No action
+  }
+}
+
+/**
+ * Close/finish handling for a placed coordinate. Pure with respect to the
+ * lastPlacedCoord bookkeeping: returns the updated value alongside whether the
+ * coordinate was consumed as a close/finish attempt (caller must not append).
+ *
+ * @returns {{ handled: boolean, lastPlacedCoord: number[] | null }}
+ */
+const tryClose = ({ drawInteraction, canFinish, geom, sketchCoords, coord, lastPlacedCoord }) => {
+  if (lastPlacedCoord && lastPlacedCoord[0] === coord[0] && lastPlacedCoord[1] === coord[1]) {
+    // Same position as last placed: don't duplicate. Close only if enough real vertices exist.
+    if (canFinish?.()) { drawInteraction.finishDrawing() }
+    return { handled: true, lastPlacedCoord: null }
+  }
+  const map = drawInteraction.getMap()
+  if (isCloseToFirstVertex(map, coord, sketchCoords, geom.getType())) {
+    drawInteraction.finishDrawing()
+    return { handled: true, lastPlacedCoord }
+  }
+  // When the add-vertex button overlays the map (touch UI), OL's native pointer handler
+  // and this button click handler both fire for the same tap. Detect that OL already
+  // committed a vertex at coord's position and skip the duplicate appendCoordinates,
+  // but register coord as lastPlacedCoord so a second tap at the same position can close.
+  const lastCommitted = getLastPlacedSketchCoord(geom)
+  if (lastCommitted) {
+    const p1 = map.getPixelFromCoordinate(lastCommitted)
+    const p2 = map.getPixelFromCoordinate(coord)
+    if (p1 && p2) {
+      const dx = p1[0] - p2[0]; const dy = p1[1] - p2[1]
+      if (dx * dx + dy * dy < DUPLICATE_TOLERANCE_PX * DUPLICATE_TOLERANCE_PX) {
+        return { handled: true, lastPlacedCoord: coord }
+      }
+    }
+  }
+  return { handled: false, lastPlacedCoord }
+}
+
+/**
+ * Crosshair-driven vertex placement for touch/keyboard drawing.
+ *
+ * Owns the sketch-feature and last-placed-coordinate bookkeeping via the Draw
+ * interaction's lifecycle events, and implements placing a vertex at the map
+ * center: rubber-band updates, duplicate suppression when OL already committed
+ * the same tap, close-on-repeat and close-near-first-vertex behaviour.
+ *
+ * @returns {{ placeVertex, updateRubberbanding, clearLastCoord }}
+ */
+export const createVertexPlacement = ({ drawInteraction, mapProvider, snap, canFinish, canPlace, getInterfaceType }) => {
+  let sketchFeature = null
+  let lastPlacedCoord = null
+
+  const resetSketch = (feature = null) => {
+    sketchFeature = feature
+    lastPlacedCoord = null
+  }
+  drawInteraction.on('drawstart', (e) => resetSketch(e.feature))
+  drawInteraction.on('drawend', () => resetSketch())
+  drawInteraction.on('drawabort', () => resetSketch())
+
+  const snappedCenter = () => {
+    const raw = mapProvider.getCenter()
+    return (getInterfaceType() !== 'mouse' && snap) ? snap.apply(raw) : raw
+  }
+
+  const updateRubberbanding = () => {
+    if (!sketchFeature) {
+      // No sketch yet — update snap indicator at crosshair position so targets are
+      // visible before the first vertex is placed (touch/keyboard only; mouse uses
+      // the OL snap interaction's pointermove handler instead).
+      if (getInterfaceType() !== 'mouse' && snap) {
+        snap.apply(mapProvider.getCenter())
+      }
+      return
+    }
+    const geom = sketchFeature.getGeometry()
+    if (!geom.getCoordinates().length) {
+      return
+    }
+    applyRubberbanding(geom, snappedCenter())
+  }
+
+  const placeVertex = () => {
+    const coord = snappedCenter()
+    snap?.hideIndicator()
+    if (sketchFeature) {
+      const geom = sketchFeature.getGeometry()
+      const rawCoords = geom.getCoordinates()
+      const sketchCoords = geom.getType() === 'Polygon' ? (rawCoords[0] || []) : rawCoords
+      const result = tryClose({ drawInteraction, canFinish, geom, sketchCoords, coord, lastPlacedCoord })
+      lastPlacedCoord = result.lastPlacedCoord
+      if (result.handled) { return }
+    }
+    // appendCoordinates bypasses the Draw interaction's condition, so the placement
+    // gate must run here explicitly — touch/keyboard parity with the mouse path.
+    if (canPlace && !canPlace(coord)) { return }
+    drawInteraction.appendCoordinates([coord])
+    lastPlacedCoord = coord
+  }
+
+  return {
+    placeVertex,
+    updateRubberbanding,
+    clearLastCoord () { lastPlacedCoord = null }
+  }
+}

package/plugins/draw/src/adapters/openlayers/draw/vertexPlacement.test.js

@@ -0,0 +1,196 @@
+import Point from 'ol/geom/Point.js'
+import Polygon from 'ol/geom/Polygon.js'
+import Feature from 'ol/Feature.js'
+import { createVertexPlacement, applyRubberbanding, isCloseToFirstVertex } from './vertexPlacement.js'
+import { createFakeMap, createEmitter, polygonFeature, lineFeature } from '../__helpers__/harness.js'
+
+const CENTER = [5, 5]
+
+const setup = ({ interfaceType = 'touch', snap = null, canFinish = () => true, canPlace } = {}) => {
+  const map = createFakeMap()
+  const bus = createEmitter()
+  const drawInteraction = {
+    on: bus.on,
+    emit: bus.emit,
+    getMap: () => map,
+    appendCoordinates: jest.fn(),
+    finishDrawing: jest.fn()
+  }
+  const placement = createVertexPlacement({
+    drawInteraction,
+    mapProvider: { getCenter: () => CENTER },
+    snap,
+    canFinish,
+    canPlace,
+    getInterfaceType: () => interfaceType
+  })
+  const startSketch = (feature) => { bus.emit('drawstart', { feature }); return feature }
+  return { drawInteraction, placement, startSketch, bus }
+}
+
+describe('placing vertices', () => {
+  test('appends the crosshair position, snapped when a snap manager is active', () => {
+    const { placement, drawInteraction } = setup()
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledWith([CENTER])
+
+    const snap = { apply: jest.fn(() => [9, 9]), hideIndicator: jest.fn() }
+    const snapped = setup({ snap })
+    snapped.placement.placeVertex()
+    expect(snapped.drawInteraction.appendCoordinates).toHaveBeenCalledWith([[9, 9]])
+    expect(snap.hideIndicator).toHaveBeenCalled()
+  })
+
+  test('a canPlace veto rejects the placement — the vertex is never appended', () => {
+    const canPlace = jest.fn(() => false)
+    const { placement, drawInteraction } = setup({ canPlace })
+    placement.placeVertex()
+    expect(canPlace).toHaveBeenCalledWith(CENTER)
+    expect(drawInteraction.appendCoordinates).not.toHaveBeenCalled()
+  })
+
+  test('a canPlace veto does not block a finish tap (close runs before the gate)', () => {
+    let allow = true
+    const { placement, drawInteraction, startSketch } = setup({ canPlace: () => allow })
+    startSketch(lineFeature([[0, 0], [50, 50]]))
+    placement.placeVertex() // placed at the crosshair
+    allow = false
+    placement.placeVertex() // same spot again → a finish attempt, not a placement
+    expect(drawInteraction.finishDrawing).toHaveBeenCalledTimes(1)
+  })
+
+  test('the mouse interface ignores snapping (the OL snap interaction covers it)', () => {
+    const snap = { apply: jest.fn(() => [9, 9]), hideIndicator: jest.fn() }
+    const { placement, drawInteraction } = setup({ interfaceType: 'mouse', snap })
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledWith([CENTER])
+  })
+
+  test('a second tap at the same spot finishes the shape instead of duplicating — when finishable', () => {
+    const { placement, drawInteraction, startSketch } = setup()
+    startSketch(lineFeature([[0, 0], [50, 50]]))
+    placement.placeVertex()
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledTimes(1)
+    expect(drawInteraction.finishDrawing).toHaveBeenCalledTimes(1)
+
+    const unfinishable = setup({ canFinish: () => false })
+    unfinishable.startSketch(lineFeature([[0, 0], [50, 50]]))
+    unfinishable.placement.placeVertex()
+    unfinishable.placement.placeVertex()
+    unfinishable.placement.placeVertex() // duplicate reset the bookkeeping — placed again
+    expect(unfinishable.drawInteraction.finishDrawing).not.toHaveBeenCalled()
+    expect(unfinishable.drawInteraction.appendCoordinates).toHaveBeenCalledTimes(2)
+  })
+
+  test('placing near the first polygon vertex closes the ring', () => {
+    const { placement, drawInteraction, startSketch } = setup()
+    startSketch(polygonFeature([[0, 0], [30, 0], [30, 30], [8, 8], [0, 0]])) // center [5,5] within 12px of [0,0]
+    placement.placeVertex()
+    expect(drawInteraction.finishDrawing).toHaveBeenCalled()
+    expect(drawInteraction.appendCoordinates).not.toHaveBeenCalled()
+  })
+
+  test('a vertex OL already committed at the same position is not appended twice', () => {
+    const { placement, drawInteraction, startSketch } = setup()
+    startSketch(lineFeature([[0, 0], [5, 6], [50, 50]])) // last committed [5,6] within 2px of center
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).not.toHaveBeenCalled()
+    placement.placeVertex() // now registered as last placed — same spot again closes
+    expect(drawInteraction.finishDrawing).toHaveBeenCalled()
+  })
+
+  test('the first vertex of a fresh sketch appends — nothing is committed yet', () => {
+    const { placement, drawInteraction, startSketch } = setup()
+    startSketch(lineFeature([[0, 0]])) // only the rubber-band coord, no committed vertex
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledWith([CENTER])
+  })
+
+  test('an unprojectable committed vertex skips the duplicate-tolerance check', () => {
+    const { placement, drawInteraction, startSketch } = setup()
+    startSketch(lineFeature([[0, 0], [5, 6], [50, 50]]))
+    drawInteraction.getMap().getPixelFromCoordinate = () => null // mid view transition
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledWith([CENTER])
+  })
+
+  test('placing into an empty polygon sketch (no ring yet) appends without error', () => {
+    const { placement, drawInteraction, startSketch } = setup()
+    startSketch(new Feature(new Polygon([]))) // ring not created yet
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledWith([CENTER])
+  })
+
+  test('clearLastCoord and sketch end/abort reset the duplicate bookkeeping', () => {
+    const { placement, drawInteraction, startSketch, bus } = setup()
+    startSketch(lineFeature([[0, 0], [50, 50]]))
+    placement.placeVertex()
+    placement.clearLastCoord()
+    placement.placeVertex()
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledTimes(2)
+
+    bus.emit('drawend')
+    placement.placeVertex() // no sketch — plain append
+    expect(drawInteraction.appendCoordinates).toHaveBeenCalledTimes(3)
+    bus.emit('drawabort')
+  })
+})
+
+describe('rubber-banding', () => {
+  test('moves the trailing coordinate of a line or polygon ring to the crosshair', () => {
+    const { placement, startSketch } = setup()
+    const line = startSketch(lineFeature([[0, 0], [50, 50]]))
+    placement.updateRubberbanding()
+    expect(line.getGeometry().getCoordinates()).toEqual([[0, 0], CENTER])
+
+    const poly = setup()
+    const hole = [[10, 10], [12, 10], [12, 12], [10, 10]]
+    const feature = poly.startSketch(new Feature(new Polygon([[[0, 0], [30, 0], [50, 50], [0, 0]], hole])))
+    poly.placement.updateRubberbanding()
+    expect(feature.getGeometry().getCoordinates()[0].at(-1)).toEqual(CENTER)
+    expect(feature.getGeometry().getCoordinates()[1]).toEqual(hole) // inner rings untouched
+  })
+
+  test('without a sketch it only refreshes the snap indicator at the crosshair (non-mouse)', () => {
+    const snap = { apply: jest.fn((c) => c), hideIndicator: jest.fn() }
+    const { placement } = setup({ snap })
+    placement.updateRubberbanding()
+    expect(snap.apply).toHaveBeenCalledWith(CENTER)
+
+    const mouse = setup({ interfaceType: 'mouse', snap })
+    snap.apply.mockClear()
+    mouse.placement.updateRubberbanding()
+    expect(snap.apply).not.toHaveBeenCalled()
+  })
+
+  test('an empty sketch geometry is left alone', () => {
+    const { placement, startSketch } = setup()
+    const line = startSketch(lineFeature([]))
+    placement.updateRubberbanding() // must not throw
+    expect(line.getGeometry().getCoordinates()).toEqual([])
+  })
+
+  test('applyRubberbanding ignores unsupported geometry types', () => {
+    const point = new Point([1, 1])
+    applyRubberbanding(point, CENTER)
+    expect(point.getCoordinates()).toEqual([1, 1])
+  })
+})
+
+describe('isCloseToFirstVertex', () => {
+  const map = createFakeMap()
+
+  test('only closes polygons with enough vertices, within the snap tolerance', () => {
+    const ring = [[0, 0], [30, 0], [30, 30], [8, 8], [0, 0]]
+    expect(isCloseToFirstVertex(map, [5, 5], ring, 'Polygon')).toBe(true)
+    expect(isCloseToFirstVertex(map, [20, 20], ring, 'Polygon')).toBe(false)
+    expect(isCloseToFirstVertex(map, [5, 5], ring, 'LineString')).toBe(false)
+    expect(isCloseToFirstVertex(map, [5, 5], [[0, 0], [30, 0]], 'Polygon')).toBe(false)
+  })
+
+  test('is false when a coordinate cannot be projected to a pixel', () => {
+    const nullMap = { getPixelFromCoordinate: () => null }
+    expect(isCloseToFirstVertex(nullMap, [5, 5], [[0, 0], [1, 1], [2, 2], [3, 3]], 'Polygon')).toBe(false)
+  })
+})