@defra/interactive-map 0.0.26-alpha → 0.0.27-alpha

package/plugins/beta/draw-ol/src/api/newLine.js

@@ -0,0 +1,44 @@
+import { flattenStyleProperties } from '../utils/flattenStyleProperties.js'
+
+/**
+ * Programmatically start drawing a new line.
+ *
+ * @param {object} context - plugin context
+ * @param {string} featureId - unique ID for this feature
+ * @param {object} options - { snapLayers, stroke, fill, strokeWidth, properties }
+ */
+export const newLine = (
+  { appState, appConfig, mapState, pluginState, mapProvider, services },
+  featureId,
+  options = {}
+) => {
+  const { dispatch } = pluginState
+  const { draw } = mapProvider
+  const { eventBus } = services
+
+  if (!draw) {
+    return
+  }
+
+  eventBus.emit('draw:started', { mode: 'draw_line' })
+
+  const { stroke, fill, strokeWidth, properties: customProperties, ...modeOptions } = options
+  const properties = {
+    ...customProperties,
+    ...flattenStyleProperties({ stroke, fill, strokeWidth })
+  }
+
+  draw.changeMode('draw_line', {
+    container: appState.layoutRefs.viewportRef.current,
+    interfaceType: appState.interfaceType,
+    addVertexButtonId: `${appConfig.id}-draw-add-point`,
+    featureId,
+    geometryType: 'LineString',
+    properties,
+    mapProvider,
+    crossHair: mapState.crossHair,
+    ...modeOptions
+  })
+
+  dispatch({ type: 'SET_MODE', payload: 'draw_line' })
+}

package/plugins/beta/draw-ol/src/api/newPolygon.js

@@ -0,0 +1,44 @@
+import { flattenStyleProperties } from '../utils/flattenStyleProperties.js'
+
+/**
+ * Programmatically start drawing a new polygon.
+ *
+ * @param {object} context - plugin context
+ * @param {string} featureId - unique ID for this feature
+ * @param {object} options - { snapLayers, stroke, fill, strokeWidth, properties }
+ */
+export const newPolygon = (
+  { appState, appConfig, mapState, pluginState, mapProvider, services },
+  featureId,
+  options = {}
+) => {
+  const { dispatch } = pluginState
+  const { draw } = mapProvider
+  const { eventBus } = services
+
+  if (!draw) {
+    return
+  }
+
+  eventBus.emit('draw:started', { mode: 'draw_polygon' })
+
+  const { stroke, fill, strokeWidth, properties: customProperties, ...modeOptions } = options
+  const properties = {
+    ...customProperties,
+    ...flattenStyleProperties({ stroke, fill, strokeWidth })
+  }
+
+  draw.changeMode('draw_polygon', {
+    container: appState.layoutRefs.viewportRef.current,
+    interfaceType: appState.interfaceType,
+    addVertexButtonId: `${appConfig.id}-draw-add-point`,
+    featureId,
+    geometryType: 'Polygon',
+    properties,
+    mapProvider,
+    crossHair: mapState.crossHair,
+    ...modeOptions
+  })
+
+  dispatch({ type: 'SET_MODE', payload: 'draw_polygon' })
+}

package/plugins/beta/draw-ol/src/core/OLDrawManager.js

@@ -0,0 +1,150 @@
+import VectorLayer from 'ol/layer/Vector.js'
+import { createFeatureStore } from './featureStore.js'
+import { createUndoStack } from './undoStack.js'
+import { createStyles } from './styles.js'
+import { resolveColors } from '../utils/resolveColors.js'
+import { createSnapManager } from '../snap/snapManager.js'
+import { DEFAULTS } from '../defaults.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('undochange', length))
+
+    this.colors = resolveColors(null, pluginConfig)
+    this.styles = createStyles(this.colors)
+    this.snap = createSnapManager(map, pluginConfig.snapLayers ?? null, this.colors, pluginConfig.snapRadius ?? DEFAULTS.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('styleschanged', 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) {
+    this._listeners.get(type)?.forEach(h => h(detail))
+  }
+
+  // --- Mode machine ---
+
+  async changeMode (modeName, options = {}) {
+    this._modeInstance?.destroy()
+    this._modeInstance = null
+    this._mode = modeName
+
+    const modeOptions = { ...options, snap: this.snap }
+
+    if (modeName === 'draw_polygon' || modeName === 'draw_line') {
+      const { createDrawMode } = await import('../draw/DrawMode.js')
+      this._modeInstance = createDrawMode({ map: this._map, manager: this, options: modeOptions })
+    } else if (modeName === 'edit_vertex') {
+      const { createEditMode } = await import('../edit/EditMode.js')
+      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()
+  }
+
+  setInterfaceType (type) {
+    this._modeInstance?.setInterfaceType?.(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/beta/draw-ol/src/core/featureStore.js

@@ -0,0 +1,65 @@
+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 a feature by ID. */
+    remove (id) {
+      const feature = this.getOL(id)
+      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/beta/draw-ol/src/core/styles.js

@@ -0,0 +1,98 @@
+import Style from 'ol/style/Style.js'
+import Fill from 'ol/style/Fill.js'
+import Stroke from 'ol/style/Stroke.js'
+import CircleStyle from 'ol/style/Circle.js'
+
+const selectedVertexRadii = { outer: 11, mid: 8, inner: 6 }
+const selectedMidpointRadii = { outer: 9, mid: 6, inner: 4 }
+
+const fillArc = (ctx, cx, cy, radius, fillStyle) => {
+  ctx.beginPath()
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2)
+  ctx.fillStyle = fillStyle
+  ctx.fill()
+}
+
+// Custom renderer draws all arcs at the same (cx,cy) so concentric rings never
+// drift at fractional CSS scales (e.g. 1.5×) the way separate drawImage calls can.
+const makeRingRenderer = ({ outer, mid, inner }, colors, innerKey) => (pixelCoordinates, state) => {
+  const ctx = state.context
+  const pr = state.pixelRatio
+  const [cx, cy] = /** @type {number[]} */ (pixelCoordinates)
+  ctx.save()
+  fillArc(ctx, cx, cy, outer * pr, colors.editActive)
+  fillArc(ctx, cx, cy, mid * pr, colors.editHalo)
+  fillArc(ctx, cx, cy, inner * pr, colors[innerKey])
+  ctx.restore()
+}
+
+const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1)
+
+/**
+ * Create all draw-ol style instances for the given resolved color set.
+ *
+ * @param {object} colors - Output of resolveColors()
+ * @returns {{ vertexStyle, selectedVertexStyle, midpointStyle, selectedMidpointStyle,
+ *             editFeatureStyle, createSketchStyle, createFeatureStyle }}
+ */
+export const createStyles = (colors) => {
+  const vertexStyle = new Style({
+    image: new CircleStyle({
+      radius: 6,
+      fill: new Fill({ color: colors.editVertex })
+    })
+  })
+
+  const selectedVertexStyle = new Style({ renderer: makeRingRenderer(selectedVertexRadii, colors, 'editVertex') })
+
+  const midpointStyle = new Style({
+    image: new CircleStyle({
+      radius: 4,
+      fill: new Fill({ color: colors.editMidpoint })
+    })
+  })
+
+  const selectedMidpointStyle = new Style({ renderer: makeRingRenderer(selectedMidpointRadii, colors, 'editMidpoint') })
+
+  const editFeatureStyle = new Style({
+    stroke: new Stroke({ color: colors.editStroke, width: 2 }),
+    fill: new Fill({ color: colors.shapeFill })
+  })
+
+  const sketchLineStyle = new Style({
+    stroke: new Stroke({ color: colors.editStroke, width: 2 }),
+    fill: new Fill({ color: colors.shapeFill })
+  })
+
+  const sketchPointStyle = new Style({
+    image: new CircleStyle({
+      radius: 5,
+      fill: new Fill({ color: colors.editVertex })
+    })
+  })
+
+  const createSketchStyle = () => (feature) =>
+    feature.getGeometry().getType() === 'Point' ? [sketchPointStyle] : [sketchLineStyle]
+
+  const createFeatureStyle = () => (feature) => {
+    const p = feature.getProperties()
+    const id = colors.mapStyleId
+    const stroke = (id && p[`stroke${capitalize(id)}`]) || p.stroke || colors.shapeStroke
+    const fill = (id && p[`fill${capitalize(id)}`]) || p.fill || colors.shapeFill
+    const strokeWidth = p.strokeWidth || colors.strokeWidth
+    return [new Style({
+      stroke: new Stroke({ color: stroke, width: strokeWidth }),
+      fill: new Fill({ color: fill })
+    })]
+  }
+
+  return {
+    vertexStyle,
+    selectedVertexStyle,
+    midpointStyle,
+    selectedMidpointStyle,
+    editFeatureStyle,
+    createSketchStyle,
+    createFeatureStyle
+  }
+}

package/plugins/beta/draw-ol/src/core/undoStack.js

@@ -0,0 +1,31 @@
+/**
+ * Undo stack for draw operations.
+ * Calls onChange(length) whenever the stack changes so the UI can update.
+ *
+ * @param {(length: number) => void} onChange
+ */
+export const createUndoStack = (onChange) => {
+  const stack = []
+
+  return {
+    push (operation) {
+      stack.push(operation)
+      onChange(stack.length)
+    },
+
+    pop () {
+      const op = stack.pop()
+      onChange(stack.length)
+      return op
+    },
+
+    clear () {
+      stack.length = 0
+      onChange(stack.length)
+    },
+
+    get length () {
+      return stack.length
+    }
+  }
+}

package/plugins/beta/draw-ol/src/defaults.js

@@ -0,0 +1,16 @@
+export const DEFAULTS = {
+  editStroke: { light: '#1a65a6', dark: '#ffffff' },
+  editVertex: { light: '#1a65a6', dark: '#ffffff' },
+  editMidpoint: { light: '#1a65a6', dark: '#ffffff' },
+  editHalo: { light: '#ffffff', dark: 'rgba(11,12,12,1)' },
+  editActive: { light: '#000000', dark: '#ffffff' },
+  splitInvalid: { light: 'rgba(29,112,184,1)', dark: 'rgba(29,112,184,1)' },
+  splitValid: { light: 'rgba(29,112,184,1)', dark: 'rgba(29,112,184,1)' },
+  shapeStroke: '#1a65a6',
+  shapeFill: 'rgba(26,101,166,0.1)',
+  strokeWidth: 2,
+  snapVertex: 'rgba(212,53,28,0.5)',
+  snapMidpoint: 'rgba(40,161,151,1)',
+  snapEdge: 'rgba(29,112,184,0.5)',
+  snapRadius: 10
+}

package/plugins/beta/draw-ol/src/draw/DrawMode.js

@@ -0,0 +1,113 @@
+import Draw from 'ol/interaction/Draw.js'
+import { createDrawInput } from './drawInput.js'
+import { getCoords } from '../utils/geometryHelpers.js'
+
+/**
+ * Draw mode — handles draw_polygon and draw_line.
+ *
+ * OL's Draw interaction handles all pointer/mouse behaviour natively.
+ * drawInput.js handles touch/keyboard/button input.
+ *
+ * @returns {{ done, cancel, undo, destroy }}
+ */
+export const createDrawMode = ({ map, manager, options }) => {
+  const {
+    geometryType, // 'Polygon' | 'LineString'
+    featureId,
+    properties = {},
+    container,
+    interfaceType,
+    addVertexButtonId,
+    mapProvider,
+    snap
+  } = options
+
+  const drawInteraction = new Draw({
+    type: geometryType,
+    style: manager.styles.createSketchStyle(),
+    stopClick: true,
+    // minPoints defaults: 3 for Polygon, 2 for LineString — OL handles this
+    // snapTolerance: how close to first point to auto-close polygon
+    snapTolerance: 12
+  })
+  map.addInteraction(drawInteraction)
+
+  // Track vertex count for the Done button enabled state
+  let sketchFeature = null
+
+  const updateVertexCount = () => {
+    if (!sketchFeature) {
+      return
+    }
+    const geom = sketchFeature.getGeometry()
+    const coords = getCoords({ type: geometryType, coordinates: geom.getCoordinates() })
+    // OL always keeps a trailing rubber-band coordinate; subtract 1
+    const numVertices = Math.max(0, coords.length - 1)
+    manager.emit('vertexchange', { numVertices })
+  }
+
+  drawInteraction.on('drawstart', (e) => {
+    sketchFeature = e.feature
+    sketchFeature.getGeometry().on('change', updateVertexCount)
+  })
+
+  drawInteraction.on('drawend', (e) => {
+    const olFeature = e.feature
+    olFeature.setId(String(featureId))
+    olFeature.setProperties(properties)
+    manager.store.source.addFeature(olFeature)
+    const geojson = manager.store.toGeoJSON(olFeature)
+    manager.emit('create', geojson)
+    // Mode switches to disabled in events.js after receiving 'create'
+  })
+
+  drawInteraction.on('drawabort', () => {
+    manager.emit('cancel')
+  })
+
+  const input = createDrawInput({
+    drawInteraction,
+    manager,
+    options: {
+      container,
+      interfaceType,
+      addVertexButtonId,
+      mapProvider,
+      snap,
+      onUndo: () => {
+        drawInteraction.removeLastPoint()
+        updateVertexCount()
+      }
+    }
+  })
+
+  return {
+    done () {
+      // Validate minimum points before finishing
+      if (sketchFeature) {
+        const geom = sketchFeature.getGeometry()
+        const coords = getCoords({ type: geometryType, coordinates: geom.getCoordinates() })
+        const min = geometryType === 'Polygon' ? 4 : 3 // +1 for rubber band
+        if (coords.length < min) {
+          return
+        }
+      }
+      drawInteraction.finishDrawing()
+    },
+
+    cancel () {
+      drawInteraction.abortDrawing()
+    },
+
+    undo () {
+      drawInteraction.removeLastPoint()
+      updateVertexCount()
+    },
+
+    destroy () {
+      input.destroy()
+      map.removeInteraction(drawInteraction)
+      sketchFeature = null
+    }
+  }
+}