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

package/plugins/beta/draw-ol/src/snap/snapGeometry.js

@@ -0,0 +1,200 @@
+/**
+ * Pure geometry helpers for snap candidate testing.
+ * No OL imports, no side effects — only coordinate math.
+ *
+ * All coordinates are [x, y] pairs in map projection units.
+ */
+
+const dist2 = (a, b) => {
+  const dx = a[0] - b[0]
+  const dy = a[1] - b[1]
+  return dx * dx + dy * dy
+}
+
+const closestPointOnSegment = (p, a, b) => {
+  const dx = b[0] - a[0]
+  const dy = b[1] - a[1]
+  const lenSq = dx * dx + dy * dy
+  if (lenSq === 0) {
+    return [a[0], a[1]]
+  }
+  const t = Math.max(0, Math.min(1, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / lenSq))
+  return [a[0] + t * dx, a[1] + t * dy]
+}
+
+const bestOf = (current, candidate) => better(current, candidate) ? candidate : current
+
+const better = (a, b) => {
+  if (!a) {
+    return !!b
+  }
+  if (!b) {
+    return false
+  }
+  // Vertex always beats edge — only compare distance within the same type
+  if (a.type === 'edge' && b.type === 'vertex') {
+    return true
+  }
+  if (a.type === 'vertex' && b.type === 'edge') {
+    return false
+  }
+  return b.distSq < a.distSq
+}
+
+/**
+ * Test all vertices and edges of a coordinate ring/line for snap candidates.
+ * coords: [[x,y], ...] — OL ring (first === last for closed rings)
+ * isClosedRing: if true, OL has duplicated the first coord as last; skip it and wrap edges
+ */
+const testCoords = (coords, query, toleranceSq, isClosedRing) => {
+  let best = null
+  const n = isClosedRing && coords.length > 1 ? coords.length - 1 : coords.length
+  const edgeCount = isClosedRing ? n : n - 1
+
+  for (let i = 0; i < n; i++) {
+    const v = coords[i]
+    const dSq = dist2(query, v)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'vertex', coord: [v[0], v[1]], distSq: dSq })
+    }
+  }
+
+  for (let i = 0; i < edgeCount; i++) {
+    const a = coords[i]
+    const b = coords[(i + 1) % n]
+    const pt = closestPointOnSegment(query, a, b)
+    const dSq = dist2(query, pt)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'edge', coord: pt, distSq: dSq })
+    }
+  }
+
+  return best
+}
+
+/**
+ * Test flat coordinate array (stride 2) from a VectorTile RenderFeature.
+ * flat: number[] — [x0,y0,x1,y1,...]
+ * start/end: index range within flat
+ * isClosedRing: VTile polygon rings — first coord is NOT duplicated at end (unlike OL Vector)
+ *   so treat all coords as unique vertices and add a closing edge back to first
+ */
+const getBestEdge = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
+  let best = null
+  for (let i = 0; i < edgeCount; i++) {
+    const ai = start + i * 2
+    const bi = start + ((i + 1) % numPairs) * 2
+    const a = [flat[ai], flat[ai + 1]]
+    const b = [flat[bi], flat[bi + 1]]
+    const pt = closestPointOnSegment(query, a, b)
+    const dSq = dist2(query, pt)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'edge', coord: pt, distSq: dSq })
+    }
+  }
+  return best
+}
+
+const getBestPair = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
+  let best = null
+  for (let i = 0; i < numPairs; i++) {
+    const xi = start + i * 2
+    const v = [flat[xi], flat[xi + 1]]
+    const dSq = dist2(query, v)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'vertex', coord: v, distSq: dSq })
+    }
+  }
+  return bestOf(best, getBestEdge(flat, start, numPairs, edgeCount, query, toleranceSq))
+}
+
+const testFlatCoords = (flat, start, end, query, toleranceSq, isClosedRing) => {
+  const numPairs = (end - start) / 2
+  const edgeCount = isClosedRing ? numPairs : numPairs - 1
+  return getBestPair(flat, start, numPairs, edgeCount, query, toleranceSq)
+}
+
+const olGeomHandlers = {
+  Point (geom, query, toleranceSq) {
+    const c = geom.getCoordinates()
+    const dSq = dist2(query, c)
+    return dSq <= toleranceSq ? { type: 'vertex', coord: [c[0], c[1]], distSq: dSq } : null
+  },
+  LineString (geom, query, toleranceSq) {
+    return testCoords(geom.getCoordinates(), query, toleranceSq, false)
+  },
+  LinearRing (geom, query, toleranceSq) {
+    return testCoords(geom.getCoordinates(), query, toleranceSq, true)
+  },
+  Polygon (geom, query, toleranceSq) {
+    let best = null
+    for (const ring of geom.getCoordinates()) {
+      best = bestOf(best, testCoords(ring, query, toleranceSq, true))
+    }
+    return best
+  },
+  MultiLineString (geom, query, toleranceSq) {
+    let best = null
+    for (const line of geom.getCoordinates()) {
+      best = bestOf(best, testCoords(line, query, toleranceSq, false))
+    }
+    return best
+  },
+  MultiPolygon (geom, query, toleranceSq) {
+    let best = null
+    for (const polygon of geom.getCoordinates()) {
+      for (const ring of polygon) {
+        best = bestOf(best, testCoords(ring, query, toleranceSq, true))
+      }
+    }
+    return best
+  }
+}
+
+/**
+ * Test an OL Feature (from a VectorSource) against query coord.
+ * Handles Point, LineString, LinearRing, Polygon, MultiLineString, MultiPolygon.
+ *
+ * @returns {{ type: 'vertex'|'edge', coord: number[], distSq: number } | null}
+ */
+export const testOLFeature = (feature, query, toleranceSq) => {
+  const geom = feature.getGeometry()
+  if (!geom) {
+    return null
+  }
+  const handler = olGeomHandlers[geom.getType()]
+  return handler ? handler(geom, query, toleranceSq) : null
+}
+
+/**
+ * Test an OL RenderFeature (from a VectorTileSource) against query coord.
+ * Handles Point, LineString, Polygon, MultiLineString.
+ *
+ * @returns {{ type: 'vertex'|'edge', coord: number[], distSq: number } | null}
+ */
+export const testRenderFeature = (feature, query, toleranceSq) => {
+  const type = feature.getType()
+  const flat = feature.getFlatCoordinates()
+  let best = null
+
+  if (type === 'Point') {
+    const dSq = dist2(query, flat)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'vertex', coord: [flat[0], flat[1]], distSq: dSq })
+    }
+  } else if (type === 'LineString') {
+    best = bestOf(best, testFlatCoords(flat, 0, flat.length, query, toleranceSq, false))
+  } else if (type === 'Polygon' || type === 'MultiLineString') {
+    const ends = feature.getEnds()
+    let start = 0
+    const isClosedRing = type === 'Polygon'
+    for (const end of ends) {
+      best = bestOf(best, testFlatCoords(flat, start, end, query, toleranceSq, isClosedRing))
+      start = end
+    }
+  } else {
+    // No action
+  }
+
+  return best
+}

package/plugins/beta/draw-ol/src/snap/snapIndicator.js

@@ -0,0 +1,81 @@
+/**
+ * Snap indicator — a single OL VectorLayer that shows a circle at the active
+ * snap candidate position.
+ *
+ * Vertex snap → orange semi-transparent circle (snapVertex color)
+ * Edge snap   → blue semi-transparent circle (snapEdge color)
+ *
+ * Uses Style.renderer (single canvas call) so the circle renders correctly
+ * at fractional CSS scale factors.
+ */
+
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorSource from 'ol/source/Vector.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import { Style } from 'ol/style.js'
+
+const RADIUS_PX = 10
+
+const makeRenderer = (color) => (coords, state) => {
+  const ctx = state.context
+  const [cx, cy] = coords
+  ctx.beginPath()
+  ctx.arc(cx, cy, RADIUS_PX * state.pixelRatio, 0, Math.PI * 2)
+  ctx.fillStyle = color
+  ctx.fill()
+}
+
+const makeStyles = (colors) => ({
+  vertex: new Style({ renderer: makeRenderer(colors.snapVertex) }),
+  edge: new Style({ renderer: makeRenderer(colors.snapEdge) })
+})
+
+export const createSnapIndicator = (map, colors) => {
+  let styles = makeStyles(colors)
+  const source = new VectorSource()
+  const layer = new VectorLayer({
+    source,
+    style: (f) => styles[f.get('snapType')] ?? null,
+    zIndex: 200,
+    updateWhileAnimating: true,
+    updateWhileInteracting: true
+  })
+  map.addLayer(layer)
+
+  const feature = new Feature()
+  let showing = false
+
+  return {
+    show (coord, type) {
+      feature.setGeometry(new Point(coord))
+      feature.set('snapType', type, true)
+      if (showing) {
+        source.changed()
+      } else {
+        source.addFeature(feature)
+        showing = true
+      }
+    },
+
+    hide () {
+      if (!showing) {
+        return
+      }
+      source.clear()
+      showing = false
+    },
+
+    updateColors (newColors) {
+      styles = makeStyles(newColors)
+      if (showing) {
+        source.changed()
+      }
+    },
+
+    remove () {
+      source.clear()
+      map.removeLayer(layer)
+    }
+  }
+}

package/plugins/beta/draw-ol/src/snap/snapInteraction.js

@@ -0,0 +1,56 @@
+/**
+ * Custom OL Interaction that intercepts pointer events and rewrites
+ * mapBrowserEvent.coordinate to the nearest snap candidate before any draw
+ * or modify interaction sees it.
+ *
+ * Coordinate snapping applies to all pointer events (pointermove, pointerdown,
+ * pointerup, singleclick) so that both rubberbanding and vertex placement are snapped.
+ * The visual indicator is only updated on pointermove.
+ *
+ * Must be added to the map AFTER the Draw/Modify interaction so it is processed
+ * first (OL iterates interactions in reverse-add order).
+ * snapManager.reattach() handles this after each mode change.
+ */
+
+import Interaction from 'ol/interaction/Interaction.js'
+
+const SNAP_EVENTS = new Set(['pointermove', 'pointerdrag', 'pointerdown', 'pointerup', 'singleclick', 'click'])
+
+export const createSnapInteraction = (engine, indicator, snapRadius) => {
+  const interaction = new Interaction({
+    handleEvent (mapBrowserEvent) {
+      if (!interaction.getActive()) {
+        return true
+      }
+
+      const { type } = mapBrowserEvent
+
+      if (type === 'pointerout' || type === 'pointerleave') {
+        indicator.hide()
+        return true
+      }
+
+      if (!SNAP_EVENTS.has(type)) {
+        return true
+      }
+
+      const result = engine.query(mapBrowserEvent.coordinate, snapRadius)
+      if (result) {
+        mapBrowserEvent.coordinate = result.coord.slice()
+      }
+
+      // Only show indicator during free mouse movement — hide during drag and clicks
+      if (type === 'pointermove') {
+        result ? indicator.show(result.coord, result.type) : indicator.hide()
+      } else if (type === 'pointerdrag') {
+        indicator.hide()
+      } else {
+        // No action
+      }
+
+      return true
+    }
+  })
+
+  return interaction
+}

package/plugins/beta/draw-ol/src/snap/snapManager.js

@@ -0,0 +1,90 @@
+/**
+ * Snap manager — orchestrates the snap engine, indicator, and OL interaction.
+ *
+ * Returned as manager.snap; null when no snapLayers are configured.
+ *
+ * Interface used by draw and edit modes:
+ *   snap.apply(coord)     — query + show/hide indicator; returns snapped coord or original
+ *   snap.hideIndicator()  — explicit hide (e.g. on touch/keyboard commit)
+ *   snap.setActive(bool)  — enable / disable (wired to the UI snap toggle)
+ *   snap.reattach()       — re-add the OL interaction after a mode change so it stays
+ *                           last-added (= first to process pointermove events)
+ *   snap.destroy()        — full cleanup
+ */
+
+import { createSnapEngine } from './snapEngine.js'
+import { createSnapIndicator } from './snapIndicator.js'
+import { createSnapInteraction } from './snapInteraction.js'
+
+export const createSnapManager = (map, snapLayers, colors, snapRadius) => {
+  if (!snapLayers?.length) {
+    return null
+  }
+
+  const engine = createSnapEngine(map, snapLayers)
+  const indicator = createSnapIndicator(map, colors)
+  const interaction = createSnapInteraction(engine, indicator, snapRadius)
+
+  map.addInteraction(interaction)
+  interaction.setActive(false) // matches reducer initial state: snap: false
+
+  let active = false
+
+  return {
+    /**
+     * Apply snap at coord. Updates the indicator and returns the snapped
+     * coordinate, or the original coordinate when no snap candidate is found.
+     * Returns original coord unchanged when snap is disabled.
+     */
+    snapRadius,
+
+    apply (coord) {
+      if (!active) {
+        return coord
+      }
+      const result = engine.query(coord, snapRadius)
+      if (result) {
+        indicator.show(result.coord, result.type)
+        return result.coord
+      }
+      indicator.hide()
+      return coord
+    },
+
+    hideIndicator () {
+      indicator.hide()
+    },
+
+    setActive (value) {
+      active = value
+      interaction.setActive(value)
+      if (!value) {
+        indicator.hide()
+      }
+    },
+
+    /**
+     * Remove and re-add the OL interaction so it sits at the top of the
+     * interaction stack (last-added = first to handle pointermove).
+     * Call after each changeMode() so the interaction always runs before
+     * the newly added Draw or Modify interaction.
+     */
+    setSnapLayers (layers) {
+      engine.setLayers(layers === null || layers === undefined ? (snapLayers ?? []) : layers)
+    },
+
+    reattach () {
+      map.removeInteraction(interaction)
+      map.addInteraction(interaction)
+    },
+
+    updateColors (newColors) {
+      indicator.updateColors(newColors)
+    },
+
+    destroy () {
+      map.removeInteraction(interaction)
+      indicator.remove()
+    }
+  }
+}

package/plugins/beta/draw-ol/src/utils/flattenStyleProperties.js

@@ -0,0 +1,47 @@
+const STYLE_PROPS = ['stroke', 'fill', 'strokeWidth']
+
+/**
+ * Flatten style properties that may be strings or variant objects
+ * keyed by style ID into flat GeoJSON-compatible properties.
+ *
+ * @param {object} props - Object containing style properties
+ * @returns {object} Flattened properties
+ *
+ * @example
+ * flattenStyleProperties({
+ *   stroke: { outdoor: '#e6c700', dark: '#ffd700' },
+ *   fill: 'rgba(255, 221, 0, 0.1)',
+ *   strokeWidth: 3
+ * })
+ * // Returns:
+ * // {
+ * //   stroke: '#e6c700',
+ * //   strokeOutdoor: '#e6c700',
+ * //   strokeDark: '#ffd700',
+ * //   fill: 'rgba(255, 221, 0, 0.1)',
+ * //   strokeWidth: 3
+ * // }
+ */
+export const flattenStyleProperties = (props) => {
+  if (!props) {
+    return {}
+  }
+
+  const result = {}
+
+  for (const [key, value] of Object.entries(props)) {
+    if (STYLE_PROPS.includes(key) && typeof value === 'object' && value !== null) {
+      const entries = Object.entries(value)
+      if (entries.length > 0) {
+        result[key] = entries[0][1]
+      }
+      for (const [styleId, styleValue] of entries) {
+        result[`${key}${styleId.charAt(0).toUpperCase() + styleId.slice(1)}`] = styleValue
+      }
+    } else {
+      result[key] = value
+    }
+  }
+
+  return result
+}

package/plugins/beta/draw-ol/src/utils/geometryHelpers.js

@@ -0,0 +1,97 @@
+/**
+ * Pure geometry helpers for multi-ring/multi-part geometry support.
+ * Handles coordinate transformations between flat arrays and hierarchical GeoJSON.
+ * Supports Polygon, MultiPolygon, LineString, MultiLineString.
+ */
+
+export const getCoords = (geom) => {
+  if (!geom?.coordinates) return []
+  switch (geom.type) {
+    case 'LineString': return geom.coordinates
+    case 'Polygon': return geom.coordinates.flatMap(ring => ring.slice(0, -1))
+    case 'MultiLineString': return geom.coordinates.flat(1)
+    case 'MultiPolygon': return geom.coordinates.flatMap(poly => poly.flatMap(ring => ring.slice(0, -1)))
+    default: return []
+  }
+}
+
+/**
+ * Segment metadata for each ring or part.
+ * { start, length, path, closed }
+ */
+export const getRingSegments = (geom) => {
+  if (!geom?.coordinates) return []
+  const segments = []
+  let start = 0
+
+  switch (geom.type) {
+    case 'LineString':
+      segments.push({ start: 0, length: geom.coordinates.length, path: [], closed: false })
+      break
+    case 'Polygon':
+      geom.coordinates.forEach((ring, i) => {
+        const len = ring.length - 1
+        segments.push({ start, length: len, path: [i], closed: true })
+        start += len
+      })
+      break
+    case 'MultiLineString':
+      geom.coordinates.forEach((line, i) => {
+        segments.push({ start, length: line.length, path: [i], closed: false })
+        start += line.length
+      })
+      break
+    case 'MultiPolygon':
+      geom.coordinates.forEach((polygon, pi) => {
+        polygon.forEach((ring, ri) => {
+          const len = ring.length - 1
+          segments.push({ start, length: len, path: [pi, ri], closed: true })
+          start += len
+        })
+      })
+      break
+    default:
+      break
+  }
+
+  return segments
+}
+
+/** Find which segment a flat vertex index belongs to. */
+export const getSegmentForIndex = (segments, flatIdx) => {
+  for (const seg of segments) {
+    if (flatIdx >= seg.start && flatIdx < seg.start + seg.length) {
+      return { segment: seg, localIdx: flatIdx - seg.start }
+    }
+  }
+  return null
+}
+
+/** Return a reference to the coordinate array at a hierarchical path. */
+export const getModifiableCoords = (geojsonGeometry, path) => {
+  let coords = geojsonGeometry.coordinates
+  for (const idx of path) {
+    coords = coords[idx]
+  }
+  return coords
+}
+
+/** Compute midpoints for all segments, respecting open/closed ring boundaries. */
+export const getMidpoints = (geom) => {
+  const coords = getCoords(geom)
+  const segments = getRingSegments(geom)
+  if (!coords.length || !segments.length) return []
+
+  const midpoints = []
+  for (const seg of segments) {
+    const count = seg.closed ? seg.length : seg.length - 1
+    for (let i = 0; i < count; i++) {
+      const idx = seg.start + i
+      const nextIdx = seg.start + ((i + 1) % seg.length)
+      const [x1, y1] = coords[idx]
+      const [x2, y2] = coords[nextIdx]
+      midpoints.push([(x1 + x2) / 2, (y1 + y2) / 2])
+    }
+  }
+  return midpoints
+}

package/plugins/beta/draw-ol/src/utils/olCoords.js

@@ -0,0 +1,35 @@
+/**
+ * Thin helpers bridging OL's array-based pixel/coordinate API
+ * and the {x, y} object convention used in touch/keyboard handlers.
+ */
+
+/** OL coordinate [e, n] → screen pixel { x, y } */
+export const coordToPixel = (map, coord) => {
+  const px = map.getPixelFromCoordinate(coord)
+  if (!px) return null
+  return { x: px[0], y: px[1] }
+}
+
+/** Screen pixel { x, y } → OL coordinate [e, n] */
+export const pixelToCoord = (map, pixel) => {
+  return map.getCoordinateFromPixel([pixel.x, pixel.y])
+}
+
+/** Pixel distance between two { x, y } points */
+export const pixelDist = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2)
+
+/** OL pixel array [x, y] → { x, y } */
+export const arrayToPixel = ([x, y]) => ({ x, y })
+
+/** { x, y } → OL pixel array [x, y] */
+export const pixelToArray = ({ x, y }) => [x, y]
+
+/**
+ * Nudge a coordinate by (dx, dy) screen pixels.
+ * Converts pixel offset to map coordinate delta using the current resolution.
+ */
+export const nudgeCoord = (map, coord, dx, dy) => {
+  const px = map.getPixelFromCoordinate(coord)
+  if (!px) return coord
+  return map.getCoordinateFromPixel([px[0] + dx, px[1] + dy])
+}

package/plugins/beta/draw-ol/src/utils/resolveColors.js

@@ -0,0 +1,39 @@
+import { DEFAULTS } from '../defaults.js'
+
+const resolveVariant = (value, scheme, styleId) => {
+  if (typeof value !== 'object' || value === null) { return value }
+  if (styleId && value[styleId] !== undefined) { return value[styleId] }
+  if (value[scheme] !== undefined) { return value[scheme] }
+  if (value.light !== undefined) { return value.light }
+  return Object.values(value)[0]
+}
+
+/**
+ * Resolve all draw-ol colors for the given map style and plugin config overrides.
+ *
+ * Values in pluginConfig may be plain strings or variant objects (e.g. { light: '...', dark: '...' }).
+ * Variant resolution order: exact style ID match → color scheme → 'light' fallback → first value.
+ *
+ * @param {object|null} mapStyle - Current map style object (has .id and .mapColorScheme)
+ * @param {object} pluginConfig - Plugin-level user overrides (may override any DEFAULTS key)
+ * @returns {object} Flat color values ready for use in createStyles()
+ */
+export const resolveColors = (mapStyle, pluginConfig = {}) => {
+  const scheme = mapStyle?.mapColorScheme ?? 'light'
+  const styleId = mapStyle?.id ?? null
+  const r = (key) => resolveVariant(pluginConfig[key] ?? DEFAULTS[key], scheme, styleId)
+
+  return {
+    editStroke: r('editStroke'),
+    editVertex: r('editVertex'),
+    editMidpoint: r('editMidpoint'),
+    editActive: r('editActive'),
+    editHalo: r('editHalo'),
+    shapeStroke: r('shapeStroke'),
+    strokeWidth: pluginConfig.strokeWidth ?? DEFAULTS.strokeWidth,
+    shapeFill: r('shapeFill'),
+    snapVertex: r('snapVertex'),
+    snapEdge: r('snapEdge'),
+    mapStyleId: styleId
+  }
+}

package/plugins/beta/draw-ol/src/utils/spatial.js

@@ -0,0 +1,28 @@
+/**
+ * Navigate spatially from a start pixel toward a direction quadrant.
+ * Returns the index of the nearest pixel in that direction.
+ *
+ * @param {[number, number]} start - Current pixel [x, y]
+ * @param {Array<[number, number]>} pixels - All candidate pixels
+ * @param {string} direction - ArrowUp | ArrowDown | ArrowLeft | ArrowRight | undefined (nearest)
+ * @returns {number} Index into pixels array
+ */
+export const spatialNavigate = (start, pixels, direction) => {
+  const quadrant = pixels.filter((p) => {
+    const dx = Math.abs(p[0] - start[0])
+    const dy = Math.abs(p[1] - start[1])
+    let inQuadrant = false
+    if (direction === 'ArrowUp') inQuadrant = p[1] <= start[1] && dy >= dx
+    else if (direction === 'ArrowDown') inQuadrant = p[1] > start[1] && dy >= dx
+    else if (direction === 'ArrowLeft') inQuadrant = p[0] <= start[0] && dy < dx
+    else if (direction === 'ArrowRight') inQuadrant = p[0] > start[0] && dy < dx
+    else inQuadrant = true
+    return inQuadrant && JSON.stringify(p) !== JSON.stringify(start)
+  })
+
+  if (!quadrant.length) quadrant.push(start)
+
+  const dist = (p) => Math.sqrt((start[0] - p[0]) ** 2 + (start[1] - p[1]) ** 2)
+  const closest = quadrant.reduce((best, p) => dist(p) < dist(best) ? p : best)
+  return pixels.findIndex(p => JSON.stringify(p) === JSON.stringify(closest))
+}