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

package/plugins/draw/src/adapters/openlayers/__helpers__/harness.js

@@ -0,0 +1,90 @@
+import Feature from 'ol/Feature.js'
+import Polygon from 'ol/geom/Polygon.js'
+import LineString from 'ol/geom/LineString.js'
+import Style from 'ol/style/Style.js'
+import { createUndoStack } from '../../../utils/undoStack.js'
+
+/**
+ * Shared test doubles for the OL adapter. The fake map uses an identity
+ * mapping between map coordinates and screen pixels so hit-test assertions
+ * read naturally: a vertex at [10, 20] sits at pixel (10, 20).
+ */
+
+export const createEmitter = () => {
+  const listeners = {}
+  return {
+    on: jest.fn((type, h) => { (listeners[type] ??= []).push(h) }),
+    un: jest.fn((type, h) => { listeners[type] = (listeners[type] ?? []).filter(x => x !== h) }),
+    once: jest.fn((type, h) => { (listeners[`once:${type}`] ??= []).push(h) }),
+    emit (type, e) {
+      (listeners[type] ?? []).forEach(h => h(e));
+      (listeners[`once:${type}`] ?? []).splice(0).forEach(h => h(e))
+    }
+  }
+}
+
+export const createFakeMap = ({ center = [50, 50] } = {}) => {
+  const emitter = createEmitter()
+  const viewport = document.createElement('div')
+  document.body.appendChild(viewport)
+  const view = { ...createEmitter(), getCenter: () => center, getAnimating: jest.fn(() => false) }
+  return {
+    ...emitter,
+    interactions: [],
+    layers: [],
+    addInteraction (i) { this.interactions.push(i) },
+    removeInteraction: jest.fn(function (i) { this.interactions = this.interactions.filter(x => x !== i) }),
+    addLayer (l) { this.layers.push(l) },
+    removeLayer: jest.fn(function (l) { this.layers = this.layers.filter(x => x !== l) }),
+    getViewport: () => viewport,
+    getPixelFromCoordinate: (c) => [c[0], c[1]],
+    getCoordinateFromPixel: (p) => [p[0], p[1]],
+    getEventPixel: (e) => [e.clientX, e.clientY],
+    getView: () => view,
+    render: jest.fn()
+  }
+}
+
+// Manager double matching the OLDrawManager surface EditMode/DrawMode consume
+export const createFakeManager = () => {
+  const bus = createEmitter()
+  return {
+    on: bus.on,
+    off: bus.un,
+    emit: jest.fn(bus.emit),
+    // Real Style instances — OL asserts on setStyle args; identify them by reference
+    styles: {
+      editFeatureStyle: new Style({}),
+      editFeatureStyleInvalid: new Style({}),
+      vertexStyle: new Style({}),
+      midpointStyle: new Style({}),
+      selectedVertexStyle: new Style({}),
+      selectedMidpointStyle: new Style({}),
+      createSketchStyle: jest.fn(() => () => [])
+    },
+    colors: { editVertex: 'rgba(29,112,184,1)' },
+    undoStack: createUndoStack(() => {})
+  }
+}
+
+export const polygonFeature = (ring, id = 'f1') => {
+  const feature = new Feature(new Polygon([ring]))
+  feature.setId(id)
+  return feature
+}
+
+export const lineFeature = (coords, id = 'f1') => {
+  const feature = new Feature(new LineString(coords))
+  feature.setId(id)
+  return feature
+}
+
+export const createContainer = () => {
+  const container = document.createElement('div')
+  container.tabIndex = 0
+  document.body.appendChild(container)
+  return container
+}
+
+// jsdom has no PointerEvent/TouchEvent constructors — build plain events with the fields the handlers read
+export const domEvent = (type, props) => Object.assign(new Event(type, { bubbles: true }), props)

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

@@ -0,0 +1,178 @@
+import VectorLayer from 'ol/layer/Vector.js'
+import { createFeatureStore } from './featureStore.js'
+import { createUndoStack } from '../../../utils/undoStack.js'
+import { createStyles } from './styles.js'
+import { resolveColors } from '../../../utils/resolveColors.js'
+import { createSnapManager } from '../snap/snapManager.js'
+import { createDrawMode } from '../draw/DrawMode.js'
+import { createEditMode } from '../edit/EditMode.js'
+import { TOLERANCES } from '../defaults.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+import { STYLES_CHANGED_EVENT } from './internalEvents.js'
+
+/**
+ * Mode machine for the OL draw plugin.
+ *
+ * Owns the VectorSource/Layer, undo stack, and current mode instance.
+ * Exposes a minimal on/off/emit event bus for internal plugin communication
+ * (separate from the public eventBus used for consumer-facing events).
+ *
+ * Consumer-facing events are always emitted via eventBus by events.js after
+ * listening to the manager's internal events.
+ */
+export class OLDrawManager {
+  constructor (map, pluginConfig = {}) {
+    this._map = map
+    this._pluginConfig = pluginConfig
+    this._mode = 'disabled'
+    this._modeInstance = null
+    this._listeners = new Map()
+
+    this.store = createFeatureStore()
+    this.undoStack = createUndoStack((length) => this.emit(ADAPTER_EVENTS.UNDO_CHANGE, length))
+
+    this.colors = resolveColors(null, pluginConfig)
+    this.styles = createStyles(this.colors)
+    this.snap = createSnapManager(map, pluginConfig.snapLayers ?? null, this.colors, pluginConfig.snapRadius ?? TOLERANCES.snapRadius)
+
+    this._layer = new VectorLayer({
+      source: this.store.source,
+      style: this.styles.createFeatureStyle(),
+      zIndex: 100
+    })
+    this._layer.set('layerId', 'draw')
+    map.addLayer(this._layer)
+  }
+
+  // --- Color / style updates ---
+
+  setMapStyle (mapStyle) {
+    this.colors = resolveColors(mapStyle, this._pluginConfig)
+    this.styles = createStyles(this.colors)
+    this._layer.setStyle(this.styles.createFeatureStyle())
+    this.store.source.changed()
+    this.snap?.updateColors(this.colors)
+    this.emit(STYLES_CHANGED_EVENT, this.styles)
+  }
+
+  // --- Internal event bus ---
+
+  on (type, handler) {
+    if (!this._listeners.has(type)) {
+      this._listeners.set(type, new Set())
+    }
+    this._listeners.get(type).add(handler)
+  }
+
+  off (type, handler) {
+    this._listeners.get(type)?.delete(handler)
+  }
+
+  emit (type, detail) {
+    const handlers = this._listeners.get(type)
+    // Array.from, not [...handlers] — see the comment in utils/eventBus.js:
+    // under a loose-mode Babel build (Docusaurus's docs site), spreading a Set
+    // compiles to [].concat(handlers), which doesn't flatten it — it appends
+    // the whole Set as one non-function element, and h(...) throws.
+    if (handlers) { Array.from(handlers).forEach(h => h(detail)) }
+  }
+
+  // --- Mode machine ---
+
+  async changeMode (modeName, options = {}) {
+    this._modeInstance?.destroy()
+    this._modeInstance = null
+    this._mode = modeName
+
+    const isDrawMode = modeName === 'draw_polygon' || modeName === 'draw_line' || modeName === 'edit_vertex'
+    this.snap?.setIndicatorActive(isDrawMode)
+
+    const modeOptions = { ...options, snap: this.snap }
+
+    if (modeName === 'draw_polygon' || modeName === 'draw_line') {
+      this._modeInstance = createDrawMode({ map: this._map, manager: this, options: modeOptions })
+    } else if (modeName === 'edit_vertex') {
+      this._modeInstance = createEditMode({ map: this._map, manager: this, options: modeOptions })
+    } else {
+      // disabled — no mode instance needed
+    }
+    // Reattach snap interaction after mode's interactions are added so it
+    // processes pointermove first (OL: last-added interaction = first to handle events).
+    this.snap?.reattach()
+  }
+
+  getMode () {
+    return this._mode
+  }
+
+  // --- High-level operations called by events.js ---
+
+  done () {
+    this._modeInstance?.done()
+  }
+
+  cancel () {
+    this._modeInstance?.cancel()
+    this.changeMode('disabled')
+  }
+
+  undo () {
+    this._modeInstance?.undo()
+  }
+
+  deleteVertex () {
+    this._modeInstance?.deleteVertex()
+  }
+
+  nudgeSelectedVertex (dx, dy, isLargeStep) {
+    this._modeInstance?.nudgeSelectedVertex?.(dx, dy, isLargeStep)
+  }
+
+  // Show/hide the dashed invalid stroke on the active draw sketch or edit feature.
+  setInvalid (invalid) {
+    this._modeInstance?.setInvalid?.(invalid)
+  }
+
+  // Tag the active draw sketch with a custom style property (e.g. split's
+  // valid/invalid line colour). No-op in edit mode or without a mode instance.
+  setDrawingPreviewProperty (property, value) {
+    this._modeInstance?.setDrawingPreviewProperty?.(property, value)
+  }
+
+  setInterfaceType (type) {
+    this._modeInstance?.setInterfaceType?.(type)
+    // Parity with the ML adapter: an explicit interface-type write is echoed on
+    // the bus so events.js can relay it as draw:interfacetypechange.
+    this.emit(ADAPTER_EVENTS.INTERFACE_TYPE_CHANGE, { interfaceType: type })
+  }
+
+  // --- Feature store delegation ---
+
+  get (id) {
+    return this.store.get(id)
+  }
+
+  add (geojsonFeature) {
+    return this.store.add(geojsonFeature)
+  }
+
+  delete (id) {
+    return this.store.remove(id)
+  }
+
+  deleteAll () {
+    return this.store.clear()
+  }
+
+  // --- Cleanup ---
+
+  remove () {
+    this._modeInstance?.destroy()
+    this._modeInstance = null
+    this.snap?.destroy()
+    this.snap = null
+    this.store.clear()
+    this._map.removeLayer(this._layer)
+    this._listeners.clear()
+  }
+}

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

@@ -0,0 +1,153 @@
+import { OLDrawManager } from './OLDrawManager.js'
+import { STYLES_CHANGED_EVENT } from './internalEvents.js'
+import { createDrawMode } from '../draw/DrawMode.js'
+import { createEditMode } from '../edit/EditMode.js'
+import { createSnapManager } from '../snap/snapManager.js'
+import { ADAPTER_EVENTS } from '../../../adapterEvents.js'
+import { createFakeMap } from '../__helpers__/harness.js'
+import { TOLERANCES } from '../defaults.js'
+
+jest.mock('../draw/DrawMode.js', () => ({
+  createDrawMode: jest.fn(() => ({ destroy: jest.fn(), done: jest.fn(), cancel: jest.fn(), undo: jest.fn(), deleteVertex: jest.fn(), nudgeSelectedVertex: jest.fn(), setInterfaceType: jest.fn(), setInvalid: jest.fn(), setDrawingPreviewProperty: jest.fn() }))
+}))
+jest.mock('../edit/EditMode.js', () => ({
+  createEditMode: jest.fn(() => ({ destroy: jest.fn(), done: jest.fn(), cancel: jest.fn(), undo: jest.fn(), deleteVertex: jest.fn(), nudgeSelectedVertex: jest.fn(), setInterfaceType: jest.fn(), setInvalid: jest.fn() }))
+}))
+jest.mock('../snap/snapManager.js', () => ({
+  createSnapManager: jest.fn(() => ({ setIndicatorActive: jest.fn(), reattach: jest.fn(), updateColors: jest.fn(), destroy: jest.fn() }))
+}))
+
+const geojson = { type: 'Feature', id: 'f1', properties: {}, geometry: { type: 'Polygon', coordinates: [[[0, 0], [10, 0], [10, 10], [0, 0]]] } }
+
+const setup = (pluginConfig) => {
+  const map = createFakeMap()
+  const manager = new OLDrawManager(map, pluginConfig)
+  return { map, manager }
+}
+
+afterEach(() => jest.clearAllMocks())
+
+test('sets up the draw layer and the snap manager from the plugin config', () => {
+  const { map } = setup({ snapLayers: ['boundaries'], snapRadius: 20 })
+  expect(map.layers[0].get('layerId')).toBe('draw')
+  expect(createSnapManager).toHaveBeenCalledWith(map, ['boundaries'], expect.any(Object), 20)
+
+  setup() // defaults
+  expect(createSnapManager).toHaveBeenLastCalledWith(expect.anything(), null, expect.any(Object), TOLERANCES.snapRadius)
+})
+
+test('map style changes rebuild the styles and notify modes and snap', () => {
+  const { map, manager } = setup()
+  const onStyles = jest.fn()
+  manager.on(STYLES_CHANGED_EVENT, onStyles)
+  const before = manager.styles
+  manager.setMapStyle({ id: 'dark', mapColorScheme: 'dark' })
+  expect(manager.styles).not.toBe(before)
+  expect(map.layers[0].getStyle()).toEqual(expect.any(Function))
+  expect(manager.snap.updateColors).toHaveBeenCalledWith(manager.colors)
+  expect(onStyles).toHaveBeenCalledWith(manager.styles)
+})
+
+describe('mode machine', () => {
+  test.each([
+    ['draw_polygon', createDrawMode],
+    ['draw_line', createDrawMode],
+    ['edit_vertex', createEditMode]
+  ])('%s creates its mode with snap injected, activates the indicator and reattaches snap last', async (name, factory) => {
+    const { map, manager } = setup()
+    await manager.changeMode(name, { featureId: 'f1' })
+    expect(manager.getMode()).toBe(name)
+    expect(factory).toHaveBeenCalledWith({ map, manager, options: { featureId: 'f1', snap: manager.snap } })
+    expect(manager.snap.setIndicatorActive).toHaveBeenCalledWith(true)
+    expect(manager.snap.reattach).toHaveBeenCalled()
+  })
+
+  test('disabled destroys the previous mode and deactivates the indicator', async () => {
+    const { manager } = setup()
+    await manager.changeMode('draw_polygon')
+    const instance = createDrawMode.mock.results[0].value
+    await manager.changeMode('disabled')
+    expect(instance.destroy).toHaveBeenCalled()
+    expect(manager.getMode()).toBe('disabled')
+    expect(manager.snap.setIndicatorActive).toHaveBeenLastCalledWith(false)
+  })
+
+  test('operations delegate to the current mode instance and are safe without one', async () => {
+    const { manager } = setup()
+    manager.done(); manager.undo(); manager.deleteVertex(); manager.nudgeSelectedVertex(1, 0, true); manager.setInterfaceType('touch'); manager.setInvalid(true) // no mode — no throw
+    manager.setDrawingPreviewProperty('splitter', 'valid') // no mode — no throw
+
+    await manager.changeMode('draw_polygon')
+    const instance = createDrawMode.mock.results[0].value
+    manager.done()
+    manager.undo()
+    manager.deleteVertex()
+    manager.nudgeSelectedVertex(1, 0, true)
+    const emitted = jest.fn()
+    manager.on('interfacetypechange', emitted)
+    manager.setInterfaceType('touch')
+    manager.setInvalid(true)
+    manager.setDrawingPreviewProperty('splitter', 'valid')
+    expect(instance.done).toHaveBeenCalled()
+    expect(instance.undo).toHaveBeenCalled()
+    expect(instance.deleteVertex).toHaveBeenCalled()
+    expect(instance.nudgeSelectedVertex).toHaveBeenCalledWith(1, 0, true)
+    expect(instance.setInterfaceType).toHaveBeenCalledWith('touch')
+    // Parity with ML: an explicit interface-type write is echoed on the bus.
+    expect(emitted).toHaveBeenCalledWith({ interfaceType: 'touch' })
+    expect(instance.setInvalid).toHaveBeenCalledWith(true)
+    expect(instance.setDrawingPreviewProperty).toHaveBeenCalledWith('splitter', 'valid')
+
+    manager.cancel()
+    expect(instance.cancel).toHaveBeenCalled()
+    expect(manager.getMode()).toBe('disabled')
+  })
+})
+
+test('undo stack changes are published on the adapter bus; off unsubscribes', () => {
+  const { manager } = setup()
+  const onUndoChange = jest.fn()
+  manager.on(ADAPTER_EVENTS.UNDO_CHANGE, onUndoChange)
+  manager.undoStack.push({ type: 'draw_vertex' })
+  expect(onUndoChange).toHaveBeenCalledWith(1)
+  manager.off(ADAPTER_EVENTS.UNDO_CHANGE, onUndoChange)
+  manager.undoStack.push({ type: 'draw_vertex' })
+  expect(onUndoChange).toHaveBeenCalledTimes(1)
+})
+
+test('several handlers can subscribe to the same event type and all fire', () => {
+  const { manager } = setup()
+  const h1 = jest.fn()
+  const h2 = jest.fn()
+  manager.on(ADAPTER_EVENTS.UNDO_CHANGE, h1)
+  manager.on(ADAPTER_EVENTS.UNDO_CHANGE, h2) // same type reuses the existing handler set
+  manager.undoStack.push({ type: 'draw_vertex' })
+  expect(h1).toHaveBeenCalledWith(1)
+  expect(h2).toHaveBeenCalledWith(1)
+})
+
+test('feature store delegation works with GeoJSON in and out', () => {
+  const { manager } = setup()
+  manager.add(geojson)
+  expect(manager.get('f1')).toMatchObject({ id: 'f1' })
+  manager.delete('f1')
+  expect(manager.get('f1')).toBeNull()
+  manager.add(geojson)
+  manager.deleteAll()
+  expect(manager.get('f1')).toBeNull()
+})
+
+test('remove tears everything down and silences the bus', async () => {
+  const { map, manager } = setup()
+  await manager.changeMode('draw_polygon')
+  const instance = createDrawMode.mock.results[0].value
+  const snap = manager.snap
+  const listener = jest.fn()
+  manager.on(STYLES_CHANGED_EVENT, listener)
+  manager.remove()
+  expect(instance.destroy).toHaveBeenCalled()
+  expect(snap.destroy).toHaveBeenCalled()
+  expect(map.removeLayer).toHaveBeenCalled()
+  manager.emit(STYLES_CHANGED_EVENT, {})
+  expect(listener).not.toHaveBeenCalled()
+})

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

@@ -0,0 +1,69 @@
+import VectorSource from 'ol/source/Vector.js'
+import GeoJSON from 'ol/format/GeoJSON.js'
+
+const PROJECTION = 'EPSG:27700'
+
+// No coordinate transformation: data and map both use BNG.
+const format = new GeoJSON({ dataProjection: PROJECTION, featureProjection: PROJECTION })
+
+/**
+ * Wraps an OL VectorSource with a GeoJSON-oriented API keyed by feature ID.
+ * All GeoJSON in and out uses EPSG:27700 coordinates (BNG easting/northing).
+ */
+export const createFeatureStore = () => {
+  const source = new VectorSource()
+
+  return {
+    /** The underlying VectorSource, passed to OL interactions and layers. */
+    source,
+
+    /** Get the raw OL Feature by ID, or null. */
+    getOL (id) {
+      return source.getFeatureById(String(id)) ?? null
+    },
+
+    /** Add or replace a GeoJSON feature. Returns the OL Feature. */
+    add (geojsonFeature) {
+      const existing = this.getOL(geojsonFeature.id)
+      if (existing) {
+        source.removeFeature(existing)
+      }
+      const olFeature = format.readFeature(geojsonFeature)
+      source.addFeature(olFeature)
+      return olFeature
+    },
+
+    /** Get a GeoJSON feature by ID, or null. */
+    get (id) {
+      const feature = this.getOL(id)
+      return feature ? format.writeFeatureObject(feature) : null
+    },
+
+    /** Remove one feature, or several, by ID. Matches mapbox-gl-draw's delete(ids),
+     * which accepts a single id or an array — deleteFeature.js passes either. */
+    remove (id) {
+      const ids = Array.isArray(id) ? id : [id]
+      for (const featureId of ids) {
+        const feature = this.getOL(featureId)
+        if (feature) {
+          source.removeFeature(feature)
+        }
+      }
+    },
+
+    /** Remove all features. */
+    clear () {
+      source.clear()
+    },
+
+    /** Convert an OL Feature to a GeoJSON object. */
+    toGeoJSON (olFeature) {
+      return format.writeFeatureObject(olFeature)
+    },
+
+    /** Convert a GeoJSON object to an OL Feature (no side effects). */
+    fromGeoJSON (geojsonFeature) {
+      return format.readFeature(geojsonFeature)
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+import { createFeatureStore } from './featureStore.js'
+
+const geojson = (id, coords = [[[0, 0], [10, 0], [10, 10], [0, 0]]]) => ({
+  type: 'Feature',
+  id,
+  properties: { label: 'field' },
+  geometry: { type: 'Polygon', coordinates: coords }
+})
+
+test('add returns the OL feature, retrievable by id in both OL and GeoJSON form', () => {
+  const store = createFeatureStore()
+  const olFeature = store.add(geojson('f1'))
+  expect(store.getOL('f1')).toBe(olFeature)
+  expect(store.get('f1')).toMatchObject({ id: 'f1', properties: { label: 'field' } })
+  expect(store.get('f1').geometry.coordinates[0]).toHaveLength(4)
+})
+
+test('adding the same id replaces the existing feature instead of duplicating', () => {
+  const store = createFeatureStore()
+  store.add(geojson('f1'))
+  store.add(geojson('f1', [[[0, 0], [99, 0], [99, 99], [0, 0]]]))
+  expect(store.source.getFeatures()).toHaveLength(1)
+  expect(store.get('f1').geometry.coordinates[0][1]).toEqual([99, 0])
+})
+
+test('unknown ids come back null', () => {
+  const store = createFeatureStore()
+  expect(store.getOL('missing')).toBeNull()
+  expect(store.get('missing')).toBeNull()
+})
+
+test('remove deletes by id and tolerates unknown ids; clear empties the source', () => {
+  const store = createFeatureStore()
+  store.add(geojson('f1'))
+  store.add(geojson('f2'))
+  store.remove('f1')
+  store.remove('missing') // no throw
+  expect(store.source.getFeatures()).toHaveLength(1)
+  store.clear()
+  expect(store.source.getFeatures()).toHaveLength(0)
+})
+
+test('remove accepts an array of ids and deletes all of them', () => {
+  const store = createFeatureStore()
+  store.add(geojson('f1'))
+  store.add(geojson('f2'))
+  store.add(geojson('f3'))
+  store.remove(['f1', 'f2', 'missing'])
+  expect(store.source.getFeatures()).toHaveLength(1)
+  expect(store.get('f3')).not.toBeNull()
+})
+
+test('toGeoJSON / fromGeoJSON round-trip without touching the source', () => {
+  const store = createFeatureStore()
+  const olFeature = store.fromGeoJSON(geojson('f9'))
+  expect(store.source.getFeatures()).toHaveLength(0)
+  expect(store.toGeoJSON(olFeature)).toMatchObject({ id: 'f9', geometry: { type: 'Polygon' } })
+})

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

@@ -0,0 +1,8 @@
+/**
+ * Manager-internal event names (these never cross the adapter boundary —
+ * the shared contract lives in src/adapterEvents.js).
+ */
+
+// Fired by OLDrawManager when the resolved colour set / style instances are
+// rebuilt after a map style change; modes re-style their layers in response.
+export const STYLES_CHANGED_EVENT = 'styleschanged'