@defra/interactive-map 0.0.3-alpha → 0.0.4-alpha

package/plugins/beta/draw-ml/src/api/merge.js

@@ -0,0 +1,9 @@
+/**
+ * Programmatically merge multiple polygons ia single polygon
+ * @param {object} context - plugin context
+ * @param {string} polygon[] - an a rray of polygons to merge
+ */
+export const merge = ({ services }, polygons) => {
+  console.log('merge')
+  console.log(polygons)
+}

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

@@ -0,0 +1,43 @@
+import { getSnapInstance } from '../utils/snapHelpers.js'
+
+/**
+ * Programmatically create a new line
+ * @param {object} context - plugin context
+ * @param {string} featureId - ID for the new feature
+ * @param {object} options - Options including snapLayers.
+ */
+export const newLine = ({ appState, appConfig, pluginState, mapProvider }, featureId, options = {}) => {
+  const { dispatch } = pluginState
+  const { draw, map } = mapProvider
+
+  if (!draw) {
+    return
+  }
+
+  // Set per-call snap layers if provided
+  const snap = getSnapInstance(map)
+  if (snap?.setSnapLayers) {
+    snap.setSnapLayers(options.snapLayers || null)
+  } else if (options.snapLayers) {
+    // Snap instance not ready yet - store for later
+    map._pendingSnapLayers = options.snapLayers
+  } else {
+    // No action
+  }
+
+  // Update state so UI can react to snap layer availability
+  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: options.snapLayers?.length > 0 })
+
+  // Change mode to draw_line
+  draw.changeMode('draw_line', {
+    container: appState.layoutRefs.viewportRef.current,
+    vertexMarkerId: `${appConfig.id}-cross-hair`,
+    addVertexButtonId: `${appConfig.id}-draw-add-point`,
+    interfaceType: appState.interfaceType,
+    getSnapEnabled: () => mapProvider.snapEnabled === true,
+    featureId
+  })
+
+  // Set mode to draw_line
+  dispatch({ type: 'SET_MODE', payload: 'draw_line' })
+}

package/plugins/{draw-ml → beta/draw-ml}/src/api/newPolygon.js

@@ -1,4 +1,4 @@
-import { getSnapInstance } from '../snapHelpers.js'
+import { getSnapInstance } from '../utils/snapHelpers.js'
 
 /**
  * Programmatically create a new polygon
@@ -28,8 +28,8 @@ export const newPolygon = ({ appState, appConfig, pluginState, mapProvider }, fe
   // Update state so UI can react to snap layer availability
   dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: options.snapLayers?.length > 0 })
 
-  // Change mode to draw_vertex
-  draw.changeMode('draw_vertex', {
+  // Change mode to draw_polygon
+  draw.changeMode('draw_polygon', {
     container: appState.layoutRefs.viewportRef.current,
     vertexMarkerId: `${appConfig.id}-cross-hair`,
     addVertexButtonId: `${appConfig.id}-draw-add-point`,
@@ -38,6 +38,6 @@ export const newPolygon = ({ appState, appConfig, pluginState, mapProvider }, fe
     featureId
   })
 
-  // Set mode to draw_vertex
-  dispatch({ type: 'SET_MODE', payload: 'draw_vertex' })
+  // Set mode to draw_polygon
+  dispatch({ type: 'SET_MODE', payload: 'draw_polygon' })
 }

package/plugins/beta/draw-ml/src/api/split.js

@@ -0,0 +1,81 @@
+import { getSnapInstance } from '../utils/snapHelpers.js'
+import { splitPolygon } from '../utils/spatial.js'
+import { debounce } from '../utils/debounce.js'
+
+/**
+ * Programmatically split a polygon or line
+ * @param {object} context - plugin context
+ * @param {string} feature - the new feature to be split
+ * @param {object} options - Options including snapLayers.
+ */
+export const split = ({ appState, appConfig, pluginState, mapProvider }, featureId, options = {}) => {
+  const { dispatch } = pluginState
+  const { draw, map } = mapProvider
+
+  if (!draw) {
+    return
+  }
+
+  // Get target polygon feature
+  const polygonFeature = draw.get(featureId)
+
+  // Always include 'stroke-inactive' in snap layers
+  const snapLayers = ['stroke-inactive.cold', ...(options.snapLayers || [])]
+
+  // Set per-call snap layers if provided
+  const snap = getSnapInstance(map)
+
+  if (snap?.setSnapLayers) {
+    snap.setSnapLayers(snapLayers)
+  } else if (options.snapLayers) {
+    // Snap instance not ready yet - store for later
+    map._pendingSnapLayers = snapLayers
+  } else {
+    // No action
+  }
+
+  // Update state so UI can react to snap layer availability
+  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: true })
+
+  // Change mode to draw_line
+  draw.changeMode('draw_line', {
+    container: appState.layoutRefs.viewportRef.current,
+    vertexMarkerId: `${appConfig.id}-cross-hair`,
+    addVertexButtonId: `${appConfig.id}-draw-add-point`,
+    interfaceType: appState.interfaceType,
+    getSnapEnabled: () => mapProvider.snapEnabled === true,
+    featureId: '_splitter',
+    properties: { splitter: 'invalid' }
+  })
+
+  // Perform split
+  map.on('draw.create', (e) => {
+    const lineFeature = e.features[0]
+    const featureCollection = splitPolygon(polygonFeature, lineFeature)
+    draw.setFeatureProperty('_splitter', 'splitter', featureCollection ? 'valid' : 'invalid')
+    dispatch({ type: 'SET_ACTION', payload: { name: 'split', isValid: !!featureCollection }})
+  })
+
+  // Real time check for valid line
+  const DEBOUNCE_SPLIT_POLYGON = 50
+  const onGeometryChange = debounce((e) => {
+    if (e.coordinates.length < 2) {
+      return
+    }
+    const lineFeature = { id: '_splitter', geometry: { type: 'LineString', coordinates: e.coordinates }}
+    const featureCollection = splitPolygon(polygonFeature, lineFeature)
+    const isValid = !!featureCollection
+    e.properties.splitter = isValid ? 'valid' : 'invalid'
+    e.ctx.store.render()
+    if (draw.getMode() === 'edit_vertex') {
+      dispatch({ type: 'SET_ACTION', payload: { name: 'split', isValid }})
+    }
+  }, DEBOUNCE_SPLIT_POLYGON)
+  map.on('draw.geometrychange', onGeometryChange)
+
+  // Set mode to 'draw_line'
+  dispatch({ type: 'SET_MODE', payload: 'draw_line' })
+
+  // Set action to 'split'
+  dispatch({ type: 'SET_ACTION', payload: { name: 'split' }})
+}

package/plugins/{draw-ml → beta/draw-ml}/src/defaults.js

@@ -2,6 +2,8 @@ export const DEFAULTS = {
   editColorsForeground: { light: 'rgba(29,112,184,1)', dark: '#ffffff' },
   editColorsBackground: { light: '#ffffff', dark: 'rgba(11,12,12,1)' },
   editColorsHalo: { light: 'rgba(11,12,12,1)', dark: '#ffffff' },
+  splitInvalidColors: { light: 'rgba(29,112,184,1)', dark: 'rgba(29,112,184,1)' },
+  splitValidColors: { light: 'rgba(29,112,184,1)', dark: 'rgba(29,112,184,1)' },
   stroke: 'rgba(212,53,28,1)',
   strokeWidth: 2,
   fill: 'rgba(212,53,28,0.1)',

package/plugins/{draw-ml → beta/draw-ml}/src/events.js

@@ -1,4 +1,4 @@
-import { clearSnapState, getSnapInstance } from './snapHelpers.js'
+import { clearSnapState, getSnapInstance } from './utils/snapHelpers.js'
 
 export function attachEvents ({ appState, appConfig, mapState, pluginState, mapProvider, buttonConfig, eventBus }) {
   const {
@@ -14,8 +14,24 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
   const { map, draw } = mapProvider
   const { dispatch, feature, tempFeature } = pluginState
 
+  // Helper to disable snap and hide indicators
+  const disableSnap = () => {
+    mapProvider.snapEnabled = false
+    dispatch({ type: 'SET_SNAP', payload: false })
+    const snap = getSnapInstance(map)
+    if (snap) {
+      snap.setSnapStatus?.(false)
+      clearSnapState(snap)
+    }
+    if (map.getLayer('snap-helper-circle')) {
+      map.setLayoutProperty('snap-helper-circle', 'visibility', 'none')
+    }
+  }
+
   // --- Done
   const handleDone = () => {
+    disableSnap()
+    mapProvider.undoStack?.clear()
     draw.changeMode('disabled')
     dispatch({ type: 'SET_MODE', payload: null })
     dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
@@ -25,12 +41,16 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
 
   // --- Cancel
   const handleCancel = () => {
-    draw.delete(tempFeature.id)
+    if (tempFeature?.id) {
+      draw.delete(tempFeature.id)
+    }
 
     // Reinstate initial feature
     if (feature) {
       draw.add(feature)
     }
+    disableSnap()
+    mapProvider.undoStack?.clear()
     draw.changeMode('disabled')
 
     dispatch({ type: 'SET_MODE', payload: null })
@@ -39,10 +59,67 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
   }
   drawCancel.onClick = handleCancel
 
+  // --- Finish shape (programmatically complete the drawing)
+  const handleFinish = () => {
+    const mode = draw.getMode()
+    if (!['draw_polygon', 'draw_line'].includes(mode)) {
+      return
+    }
+
+    const features = draw.getAll().features
+    if (features.length === 0) {
+      return
+    }
+
+    const feature = features[0]
+    const geom = feature.geometry
+
+    // Remove the rubber band point (last coordinate that follows cursor)
+    if (geom.type === 'Polygon') {
+      // Polygon coords: [v1, v2, v3, ..., rubberBand, v1(closing)]
+      // Remove rubber band (second to last) and keep the ring closed
+      const ring = geom.coordinates[0]
+      geom.coordinates[0] = [...ring.slice(0, -2), ring[0]]
+    } else {
+      // Line coords: [v1, v2, v3, ..., rubberBand]
+      // Remove the rubber band (last point)
+      geom.coordinates = geom.coordinates.slice(0, -1)
+    }
+
+    // Fire draw.create to trigger the standard completion flow
+    map.fire('draw.create', { features: [feature] })
+
+    // Change mode to trigger cleanup (this calls onStop on the draw mode)
+    draw.changeMode('simple_select', { featureIds: [feature.id] })
+  }
+  drawFinish.onClick = handleFinish
+
+  // --- Undo last action (only for draw modes - edit_vertex handles its own undo)
+  const handleUndo = () => {
+    // edit_vertex mode handles its own undo via button click listener
+    if (draw.getMode() === 'edit_vertex') {
+      return
+    }
+
+    const undoStack = mapProvider.undoStack
+    if (!undoStack || undoStack.length === 0) {
+      return
+    }
+
+    const operation = undoStack.pop()
+
+    // Set flag to prevent button click from also adding a vertex
+    map._undoInProgress = true
+    setTimeout(() => { map._undoInProgress = false }, 100)
+
+    // Fire event for the current mode to handle
+    map.fire('draw.undo', { operation })
+  }
+  drawUndo.onClick = handleUndo
+
   // --- Snap toggle with throttle to prevent Safari slowdown
   let lastToggleTime = 0
   const THROTTLE_MS = 300
-
   const handleSnap = () => {
     // Strict throttle - ignore clicks within throttle window
     const now = Date.now()
@@ -88,6 +165,9 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
     dispatch({ type: 'SET_FEATURE', payload: { tempFeature: newFeature }})
     eventBus.emit('draw:create', e)
 
+    // Clear draw mode undo stack - editing starts fresh
+    mapProvider.undoStack?.clear()
+
     // Switch straight to edit vertex mode
     dispatch({ type: 'SET_MODE', payload: 'edit_vertex'})
 
@@ -95,6 +175,7 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
       draw.changeMode('edit_vertex', {
         container: appState.layoutRefs.viewportRef.current,
         deleteVertexButtonId: `${appConfig.id}-draw-delete-point`,
+        undoButtonId: `${appConfig.id}-draw-undo`,
         isPanEnabled: appState.interfaceType !== 'keyboard',
         interfaceType: appState.interfaceType,
         scale: { small: 1, medium: 1.5, large: 2 }[mapState.mapSize],
@@ -105,6 +186,12 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
   }
   map.on('draw.create', onCreate)
 
+  // --- A shape is updated
+  const onUpdate = (e) => {
+    eventBus.emit('draw:update', e)
+  }
+  map.on('draw.update', onUpdate)
+
   // --- A vertex is selected
   const onVertexSelection = (e) => {
     dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: e })
@@ -112,6 +199,18 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
   }
   map.on('draw.vertexselection', onVertexSelection)
 
+  // --- Vertex count changes during drawing
+  const onVertexChange = (e) => {
+    dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: { index: -1, numVertecies: e.numVertecies } })
+  }
+  map.on('draw.vertexchange', onVertexChange)
+
+  // --- Undo stack changes
+  const onUndoChange = (e) => {
+    dispatch({ type: 'SET_UNDO_STACK_LENGTH', payload: e.length })
+  }
+  map.on('draw.undochange', onUndoChange)
+
   return () => {
     drawDone.onClick = null
     drawAddPoint.onClick = null
@@ -122,6 +221,9 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
     drawCancel.onClick = null
     map.off('styledata', handleStyleData)
     map.off('draw.create', onCreate)
+    map.off('draw.update', onUpdate)
     map.off('draw.vertexselection', onVertexSelection)
+    map.off('draw.vertexchange', onVertexChange)
+    map.off('draw.undochange', onUndoChange)
   }
 }

package/plugins/{draw-ml → beta/draw-ml}/src/manifest.js

@@ -2,9 +2,12 @@
 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'
+import { split } from './api/split.js'
+import { merge } from './api/merge.js'
 
 const createButtonSlots = (showLabel) => ({
   mobile:  { slot: 'actions', showLabel },
@@ -22,39 +25,39 @@ export const manifest = {
 
   buttons: [{
     id: 'drawDone',
-    label: 'Done',
-    variant: 'primary',
+    label: ({ pluginState }) => pluginState.action ? pluginState.action.charAt(0).toUpperCase() + pluginState.action.slice(1) : 'Done',
     hiddenWhen: ({ appState, pluginState }) => !pluginState.mode || appState.interfaceType !== 'mouse' && pluginState.mode !== 'edit_vertex',
-    enableWhen: ({ pluginState }) => !!pluginState.tempFeature,
-    ...createButtonSlots(true)
+    enableWhen: ({ pluginState }) => pluginState.action ? pluginState.actionValid : !!pluginState.tempFeature,
+    ...createButtonSlots(true),
+    variant: 'primary',
   },{
     id: 'drawAddPoint',
     label: 'Add point',
     variant: 'primary',
-    hiddenWhen: ({ appState, pluginState }) => pluginState.mode !== 'draw_vertex' || appState.interfaceType === 'mouse',
+    hiddenWhen: ({ appState, pluginState }) => !['draw_polygon', 'draw_line'].includes(pluginState.mode) || appState.interfaceType === 'mouse',
     ...createButtonSlots(true)
   },{
     id: 'drawUndo',
     label: 'Undo',
     iconId: 'undo',
     variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => !pluginState.mode,
-    enableWhen: ({ pluginState }) => false,
+    hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
+    enableWhen: ({ pluginState }) => pluginState.undoStackLength > 0,
     ...createButtonSlots(false)
   },{
     id: 'drawFinish',
     label: 'Finish shape',
     iconId: 'check',
     variant: 'tertiary',
-    hiddenWhen: ({ pluginState }) => pluginState.mode !== 'draw_vertex',
-    enableWhen: ({ pluginState }) => pluginState.numVertecies > 3,
+    hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line'].includes(pluginState.mode),
+    enableWhen: ({ pluginState }) => pluginState.numVertecies >= (pluginState.mode === 'draw_polygon' ? 3 : 2),
     ...createButtonSlots(false)
   },{
     id: 'drawDeletePoint',
     label: 'Delete point',
     iconId: 'close',
     variant: 'tertiary',
-    enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertecies > 3,
+    enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertecies > (pluginState.tempFeature?.geometry?.type === 'Polygon' ? 3 : 2),
     hiddenWhen: ({ pluginState }) => !(['simple_select', 'edit_vertex'].includes(pluginState.mode)),
     ...createButtonSlots(false)
   },{
@@ -93,8 +96,11 @@ export const manifest = {
 
   api: {
     newPolygon,
+    newLine,
     editFeature,
     addFeature,
-    deleteFeature
+    deleteFeature,
+    split,
+    merge
   }
 }

package/plugins/{draw-ml → beta/draw-ml}/src/mapboxDraw.js

@@ -1,9 +1,11 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw'
 import { DisabledMode } from './modes/disabledMode.js'
 import { EditVertexMode } from './modes/editVertexMode.js'
-import { DrawVertexMode } from './modes/drawVertexMode.js'
+import { DrawPolygonMode } from './modes/drawPolygonMode.js'
+import { DrawLineMode } from './modes/drawLineMode.js'
 import { createDrawStyles, updateDrawStyles } from './styles.js'
 import { initMapLibreSnap } from './mapboxSnap.js'
+import { createUndoStack } from './undoStack.js'
 
 /**
  * Creates and manages a MapLibre/Mapbox Draw control instance configured for polygon editing.
@@ -33,7 +35,8 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
     ...MapboxDraw.modes,
     disabled: DisabledMode,
     edit_vertex: EditVertexMode,
-    draw_vertex: DrawVertexMode
+    draw_polygon: DrawPolygonMode,
+    draw_line: DrawLineMode
   }
 
   // --- Create MapLibre Draw instance ---
@@ -46,10 +49,53 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
   })
   map.addControl(draw)
 
+  // Workaround: mapbox-gl-draw calls preventDefault() on touchend even in disabled mode,
+  // which prevents the browser from synthesizing a click event. We detect taps and
+  // manually dispatch a click event when in disabled mode.
+  const canvas = map.getCanvas()
+  let touchStart = null
+
+  const handleTouchStart = (e) => {
+    if (e.touches.length === 1) {
+      touchStart = { x: e.touches[0].clientX, y: e.touches[0].clientY, time: Date.now() }
+    }
+  }
+
+  const handleTouchEnd = (e) => {
+    if (draw.getMode() !== 'disabled' || !touchStart) {
+      touchStart = null
+      return
+    }
+
+    const touch = e.changedTouches[0]
+    const dx = touch.clientX - touchStart.x
+    const dy = touch.clientY - touchStart.y
+    const duration = Date.now() - touchStart.time
+
+    // Only synthesize click for quick taps with minimal movement
+    if (duration < 300 && Math.abs(dx) < 10 && Math.abs(dy) < 10) {
+      canvas.dispatchEvent(new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: touch.clientX,
+        clientY: touch.clientY
+      }))
+    }
+
+    touchStart = null
+  }
+
+  canvas.addEventListener('touchstart', handleTouchStart, { passive: true })
+  canvas.addEventListener('touchend', handleTouchEnd, { passive: true })
+
   // We need a reference to this
   mapProvider.draw = draw
   // Initialize snap as disabled (matches initialState.snap = false)
   mapProvider.snapEnabled = false
+  // Initialize undo stack (also stored on map for mode access)
+  const undoStack = createUndoStack(map)
+  mapProvider.undoStack = undoStack
+  map._undoStack = undoStack
 
   // --- Initialize MapboxSnap using external module ---
   // Start with status: false to match initial snap disabled state
@@ -77,6 +123,9 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
   return {
     draw,
     remove() {
+      // Remove touch workaround listeners
+      canvas.removeEventListener('touchstart', handleTouchStart)
+      canvas.removeEventListener('touchend', handleTouchEnd)
       // Remove event listeners
       eventBus.off(events.MAP_SET_STYLE, handleSetMapStyle)
       // Delete all features and disable draw

package/plugins/{draw-ml → beta/draw-ml}/src/mapboxSnap.js

@@ -68,6 +68,7 @@ function applyMapboxSnapPatches(colors) {
       return orig.getLines.call(this, feature, mouse, radiusArg)
     } catch (e) {
       // Invalid geometry - skip this feature
+      console.log(e)
       return []
     }
   }
@@ -127,6 +128,7 @@ function applyMapboxSnapPatches(colors) {
       return result
     } catch (err) {
       // Invalid geometry encountered - clear state and continue
+      console.log(err)
       this.snapStatus = false
       this.snapCoords = null
       return