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

package/plugins/beta/draw-ol/src/edit/vertexOps.js

@@ -0,0 +1,99 @@
+import {
+  getCoords,
+  getRingSegments,
+  getSegmentForIndex,
+  getModifiableCoords
+} from '../utils/geometryHelpers.js'
+
+/**
+ * Delete the vertex at `selectedIndex` from the OL feature's geometry.
+ * Respects minimum vertex counts (3 for closed rings, 2 for lines).
+ *
+ * @returns {{ deletedIndex: number, deletedCoord: number[] } | null} undo payload, or null if not deleted
+ */
+export const deleteVertex = (olFeature, selectedIndex) => {
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const coords = getCoords(geojsonGeom)
+  const segments = getRingSegments(geojsonGeom)
+  const result = getSegmentForIndex(segments, selectedIndex)
+  if (!result) {
+    return null
+  }
+
+  const { segment } = result
+  const minVertices = segment.closed ? 3 : 2
+  if (segment.length <= minVertices) {
+    return null
+  }
+
+  const deletedCoord = [...coords[selectedIndex]]
+  const ring = getModifiableCoords(geojsonGeom, segment.path)
+  ring.splice(result.localIdx, 1)
+  if (segment.closed) {
+    ring[ring.length - 1] = [...ring[0]]
+  }
+
+  geom.setCoordinates(geojsonGeom.coordinates)
+  return { deletedIndex: selectedIndex, deletedCoord }
+}
+
+/**
+ * Insert a vertex after `afterIndex` in the OL feature's geometry.
+ * Used when the user activates a midpoint (touch tap or keyboard insert).
+ *
+ * @param {number[][]} midpoints - current midpoint array (from midpointLayer)
+ * @param {number} midpointFlatIndex - flat index (vertexCount + midpointOffset)
+ * @param {number} vertexCount - number of actual vertices
+ * @param {number[][]} vertices - current vertex array
+ * @returns {{ insertedIndex: number } | null}
+ */
+export const insertAtMidpoint = (olFeature, midpoints, midpointFlatIndex, vertexCount) => {
+  const midpointLocalIdx = midpointFlatIndex - vertexCount
+  const midCoord = midpoints[midpointLocalIdx]
+  if (!midCoord) {
+    return null
+  }
+
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+
+  // Map midpoint local index to insertion position in the coordinate array
+  let midpointCounter = 0
+  for (const seg of segments) {
+    const segMidpoints = seg.closed ? seg.length : seg.length - 1
+    if (midpointLocalIdx < midpointCounter + segMidpoints) {
+      const localMidIdx = midpointLocalIdx - midpointCounter
+      const insertLocalIdx = localMidIdx + 1
+      const insertGlobalIdx = seg.start + insertLocalIdx
+      const ring = getModifiableCoords(geojsonGeom, seg.path)
+      ring.splice(insertLocalIdx, 0, [...midCoord])
+      geom.setCoordinates(geojsonGeom.coordinates)
+      return { insertedIndex: insertGlobalIdx }
+    }
+    midpointCounter += segMidpoints
+  }
+
+  return null
+}
+
+/**
+ * Move vertex at `index` to `newCoord` in the OL feature's geometry.
+ */
+export const moveVertex = (olFeature, index, newCoord) => {
+  const geom = olFeature.getGeometry()
+  const geojsonGeom = { type: geom.getType(), coordinates: geom.getCoordinates() }
+  const segments = getRingSegments(geojsonGeom)
+  const result = getSegmentForIndex(segments, index)
+  if (!result) {
+    return
+  }
+
+  const ring = getModifiableCoords(geojsonGeom, result.segment.path)
+  ring[result.localIdx] = [...newCoord]
+  if (result.segment.closed && result.localIdx === 0) {
+    ring[ring.length - 1] = [...newCoord]
+  }
+  geom.setCoordinates(geojsonGeom.coordinates)
+}

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

@@ -0,0 +1,114 @@
+/**
+ * Button and manager event wiring for the OL draw plugin.
+ * Mirrors draw-ml/events.js structure but uses manager.on/off instead of map.on/off.
+ */
+export function attachEvents ({ pluginState, mapProvider, buttonConfig, eventBus }) {
+  const { drawDone, drawCancel, drawUndo, drawDeletePoint, drawSnap } = buttonConfig
+  const { draw } = mapProvider
+  const { dispatch, feature, tempFeature } = pluginState
+
+  const resetState = () => {
+    draw.undoStack.clear()
+    dispatch({ type: 'SET_MODE', payload: null })
+    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null } })
+  }
+
+  // --- Button handlers ---
+
+  const handleDone = () => {
+    draw.undoStack.clear()
+    draw.done()
+  }
+
+  const handleCancel = () => {
+    const mode = draw.getMode()
+    if (mode === 'edit_vertex' && tempFeature?.id) {
+      // Restore original geometry by re-adding the pre-edit feature
+      draw.add(feature)
+    }
+    draw.cancel()
+    resetState()
+    eventBus.emit('draw:cancelled', feature)
+  }
+
+  const handleUndo = () => {
+    draw.undo()
+  }
+
+  const handleDeleteVertex = () => {
+    draw.deleteVertex()
+  }
+
+  const handleSnap = () => {
+    const newSnapState = !pluginState.snap
+    dispatch({ type: 'TOGGLE_SNAP' })
+    draw.snap?.setActive(newSnapState)
+  }
+
+  // --- Manager event handlers ---
+
+  const onCreate = (geojsonFeature) => {
+    resetState()
+    draw.changeMode('disabled')
+    eventBus.emit('draw:created', geojsonFeature)
+  }
+
+  const onEditFinish = (geojsonFeature) => {
+    resetState()
+    draw.changeMode('disabled')
+    eventBus.emit('draw:edited', geojsonFeature)
+  }
+
+  const onCancel = () => {
+    // Fired by draw.cancel() / drawabort — only when not user-initiated via button
+  }
+
+  const onVertexSelection = (e) => {
+    dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: e })
+    eventBus.emit('draw:vertexselection', e)
+  }
+
+  const onVertexChange = (e) => {
+    dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: { index: -1, numVertices: e.numVertices } })
+  }
+
+  const onUndoChange = (length) => {
+    dispatch({ type: 'SET_UNDO_STACK_LENGTH', payload: length })
+  }
+
+  const onUpdate = (geojsonFeature) => {
+    eventBus.emit('draw:updated', geojsonFeature)
+  }
+
+  // --- Wire up ---
+
+  drawDone.onClick = handleDone
+  drawCancel.onClick = handleCancel
+  drawUndo.onClick = handleUndo
+  if (drawDeletePoint) drawDeletePoint.onClick = handleDeleteVertex
+  if (drawSnap) drawSnap.onClick = handleSnap
+
+  draw.on('create', onCreate)
+  draw.on('editfinish', onEditFinish)
+  draw.on('cancel', onCancel)
+  draw.on('vertexselection', onVertexSelection)
+  draw.on('vertexchange', onVertexChange)
+  draw.on('undochange', onUndoChange)
+  draw.on('update', onUpdate)
+
+  return () => {
+    drawDone.onClick = null
+    drawCancel.onClick = null
+    drawUndo.onClick = null
+    if (drawDeletePoint) drawDeletePoint.onClick = null
+    if (drawSnap) drawSnap.onClick = null
+
+    draw.off('create', onCreate)
+    draw.off('editfinish', onEditFinish)
+    draw.off('cancel', onCancel)
+    draw.off('vertexselection', onVertexSelection)
+    draw.off('vertexchange', onVertexChange)
+    draw.off('undochange', onUndoChange)
+    draw.off('update', onUpdate)
+  }
+}

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

@@ -0,0 +1,12 @@
+import './draw.scss'
+
+export default function createPlugin (options = {}) {
+  return {
+    ...options,
+    id: 'draw',
+    load: async () => {
+      const module = (await import(/* webpackChunkName: "im-draw-ol-plugin" */ './manifest.js')).manifest
+      return module
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+import { initialState, actions } from './reducer.js'
+import { DrawInit } from './DrawInit.jsx'
+import { newPolygon } from './api/newPolygon.js'
+import { newLine } from './api/newLine.js'
+import { editFeature } from './api/editFeature.js'
+import { addFeature } from './api/addFeature.js'
+import { deleteFeature } from './api/deleteFeature.js'
+
+const createButtonSlots = (showLabel) => ({
+  mobile: { slot: 'actions', showLabel },
+  tablet: { slot: 'actions', showLabel },
+  desktop: { slot: 'actions', showLabel }
+})
+
+export const manifest = {
+  reducer: {
+    initialState,
+    actions
+  },
+
+  InitComponent: DrawInit,
+
+  buttons: [
+    {
+      id: 'drawCancel',
+      label: 'Cancel',
+      variant: 'tertiary',
+      hiddenWhen: ({ pluginState }) => !pluginState.mode,
+      ...createButtonSlots(true)
+    },
+    {
+      id: 'drawAddPoint',
+      label: 'Add point',
+      variant: 'primary',
+      hiddenWhen: ({ appState, pluginState }) =>
+        !['draw_polygon', 'draw_line'].includes(pluginState.mode) || appState.interfaceType !== 'touch',
+      ...createButtonSlots(true)
+    },
+    {
+      id: 'drawDone',
+      label: 'Done',
+      variant: 'primary',
+      hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+      enableWhen: ({ pluginState }) => {
+        if (pluginState.mode === 'draw_polygon') {
+          return pluginState.numVertices >= 3 // NOSONAR
+        }
+        if (pluginState.mode === 'draw_line') {
+          return pluginState.numVertices >= 2 // NOSONAR
+        }
+        if (pluginState.mode === 'edit_vertex') {
+          return true
+        }
+        return false
+      },
+      ...createButtonSlots(true)
+    },
+    {
+      id: 'drawMenu',
+      label: 'Menu',
+      iconId: 'menu',
+      hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+      menuItems: [{
+        id: 'drawUndo',
+        label: 'Undo',
+        iconId: 'undo',
+        hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+        enableWhen: ({ pluginState }) => {
+          if (['draw_polygon', 'draw_line'].includes(pluginState.mode)) {
+            return pluginState.numVertices > 0
+          }
+          return pluginState.undoStackLength > 0
+        }
+      }, {
+        id: 'drawSnap',
+        label: 'Snap to feature',
+        iconId: 'magnet',
+        hiddenWhen: ({ pluginState }) => !pluginState.mode || !pluginState.hasSnapLayers,
+        pressedWhen: ({ pluginState }) => !!pluginState.snap
+      }, {
+        id: 'drawDeletePoint',
+        label: 'Delete point',
+        iconId: 'trash',
+        enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertices > 2,
+        hiddenWhen: ({ pluginState }) => pluginState.mode !== 'edit_vertex'
+      }],
+      mobile: { slot: 'bottom-right' },
+      tablet: { slot: 'top-middle' },
+      desktop: { slot: 'top-middle' }
+    }
+  ],
+
+  keyboardShortcuts: [{
+    id: 'drawStart',
+    group: 'Drawing',
+    title: 'Edit vertex',
+    command: '<kbd>Spacebar</kbd></dd>'
+  }],
+
+  icons: [{
+    id: 'menu',
+    svgContent: '<path d="m6 9 6 6 6-6"/>'
+  }, {
+    id: 'undo',
+    svgContent: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>'
+  }, {
+    id: 'magnet',
+    svgContent: '<path d="m12 15 4 4"/><path d="M2.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.029-6.029a1 1 0 1 1 3 3l-6.029 6.029a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.365-6.367A1 1 0 0 0 8.716 4.282z"/><path d="m5 8 4 4"/>'
+  }, {
+    id: 'trash',
+    svgContent: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>'
+  }],
+
+  api: {
+    newPolygon,
+    newLine,
+    editFeature,
+    addFeature,
+    deleteFeature
+  }
+}

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

@@ -0,0 +1,38 @@
+import { OLDrawManager } from './core/OLDrawManager.js'
+
+/**
+ * Creates the OLDrawManager, attaches it to mapProvider, and wires
+ * app-level events (MAP_SET_SIZE for scale-aware touch targets,
+ * MAP_SET_STYLE for dynamic color updates).
+ *
+ * @returns {{ remove: () => void }}
+ */
+export const createOLDraw = ({ mapProvider, events, eventBus, pluginConfig = {}, mapStyle = null }) => {
+  const { map } = mapProvider
+  const manager = new OLDrawManager(map, pluginConfig)
+
+  if (mapStyle) {
+    manager.setMapStyle(mapStyle)
+  }
+
+  mapProvider.draw = manager
+
+  const handleSetMapSize = (size) => {
+    mapProvider.drawScale = { small: 1, medium: 1.5, large: 2 }[size] ?? 1
+  }
+  eventBus.on(events.MAP_SET_SIZE, handleSetMapSize)
+
+  const handleSetMapStyle = (newMapStyle) => {
+    manager.setMapStyle(newMapStyle)
+  }
+  eventBus.on(events.MAP_SET_STYLE, handleSetMapStyle)
+
+  return {
+    remove () {
+      eventBus.off(events.MAP_SET_SIZE, handleSetMapSize)
+      eventBus.off(events.MAP_SET_STYLE, handleSetMapStyle)
+      manager.remove()
+      mapProvider.draw = null
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+const initialState = {
+  mode: null,
+  feature: null,
+  tempFeature: null,
+  selectedVertexIndex: -1,
+  numVertices: null,
+  undoStackLength: 0,
+  snap: false,
+  hasSnapLayers: false
+}
+
+const setMode = (state, payload) => ({ ...state, mode: payload })
+
+const setFeature = (state, payload) => ({
+  ...state,
+  feature: payload.feature === undefined ? state.feature : payload.feature,
+  tempFeature: payload.tempFeature === undefined ? state.tempFeature : payload.tempFeature
+})
+
+const setSelectedVertexIndex = (state, payload) => ({
+  ...state,
+  selectedVertexIndex: payload.index,
+  numVertices: payload.numVertices
+})
+
+const setUndoStackLength = (state, payload) => ({ ...state, undoStackLength: payload })
+
+const toggleSnap = (state) => ({ ...state, snap: !state.snap })
+
+const setHasSnapLayers = (state, payload) => ({ ...state, hasSnapLayers: !!payload })
+
+const actions = {
+  SET_MODE: setMode,
+  SET_FEATURE: setFeature,
+  SET_SELECTED_VERTEX_INDEX: setSelectedVertexIndex,
+  SET_UNDO_STACK_LENGTH: setUndoStackLength,
+  TOGGLE_SNAP: toggleSnap,
+  SET_HAS_SNAP_LAYERS: setHasSnapLayers
+}
+
+export { initialState, actions }

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

@@ -0,0 +1,109 @@
+/**
+ * Snap candidate engine.
+ *
+ * Accepts two kinds of entry in snapLayers:
+ *   - string  → a VectorTile style-layer name (matched via feature.get('layer'))
+ *               All VectorTileLayers on the map are searched; only features whose
+ *               style-layer name is in the set are tested.
+ *   - OL VectorLayer instance → all features in that layer's source are tested.
+ *
+ * query() is synchronous and uses:
+ *   - VectorSource.getFeaturesInExtent() for OL vector layers (internal rBush, fast)
+ *   - map.forEachFeatureAtPixel() for VectorTile layers (rendered tile data)
+ */
+
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import { testOLFeature, testRenderFeature } from './snapGeometry.js'
+
+const pickBest = (a, b) => {
+  if (!b) { return a }
+  if (!a) { return b }
+  if (a.type === 'vertex' && b.type === 'edge') { return a }
+  if (a.type === 'edge' && b.type === 'vertex') { return b }
+  return b.distSq < a.distSq ? b : a
+}
+
+// Collected on each query — VectorTileLayers are replaced when the map style changes
+const getVTLayers = (map) => {
+  const layers = []
+  map.getLayers().forEach(l => {
+    if (l instanceof VectorTileLayer) { layers.push(l) }
+  })
+  return layers
+}
+
+export const createSnapEngine = (map, snapLayers = []) => {
+  let vtLayerNames = new Set()
+  let olLayers = []
+
+  const setLayers = (layers) => {
+    vtLayerNames = new Set()
+    olLayers = []
+    for (const entry of layers ?? []) {
+      if (typeof entry === 'string') {
+        vtLayerNames.add(entry)
+      } else if (entry instanceof VectorLayer) {
+        olLayers.push(entry)
+      } else {
+        // unsupported layer type — skip
+      }
+    }
+  }
+
+  setLayers(snapLayers)
+
+  /**
+   * Find the nearest snap candidate to coord within radiusPx screen pixels.
+   * @param {number[]} coord - map coordinate [x, y]
+   * @param {number} radiusPx - tolerance in screen pixels
+   * @returns {{ type: 'vertex'|'edge', coord: number[] } | null}
+   */
+  const query = (coord, radiusPx) => {
+    const resolution = map.getView().getResolution()
+    if (!resolution) {
+      return null
+    }
+    const toleranceMapUnits = radiusPx * resolution
+    const toleranceSq = toleranceMapUnits * toleranceMapUnits
+    const ext = [
+      coord[0] - toleranceMapUnits,
+      coord[1] - toleranceMapUnits,
+      coord[0] + toleranceMapUnits,
+      coord[1] + toleranceMapUnits
+    ]
+
+    let best = null
+
+    // --- OL VectorLayer sources ---
+    for (const layer of olLayers) {
+      const source = layer.getSource()
+      if (!source) {
+        continue
+      }
+      for (const feature of source.getFeaturesInExtent(ext)) {
+        best = pickBest(best, testOLFeature(feature, coord, toleranceSq))
+      }
+    }
+
+    // --- VectorTile layers ---
+    if (vtLayerNames.size > 0) {
+      const vtLayers = getVTLayers(map)
+      const pixel = vtLayers.length > 0 ? map.getPixelFromCoordinate(coord) : null
+      if (pixel) {
+        map.forEachFeatureAtPixel(
+          pixel,
+          (feature, _layer) => {
+            if (!vtLayerNames.has(feature.get('mapbox-layer')?.id)) { return }
+            best = pickBest(best, testRenderFeature(feature, coord, toleranceSq))
+          },
+          { hitTolerance: radiusPx, layerFilter: (l) => vtLayers.includes(l) }
+        )
+      }
+    }
+
+    return best ? { type: best.type, coord: best.coord } : null
+  }
+
+  return { query, setLayers }
+}