@defra/interactive-map 0.0.15-alpha → 0.0.16-alpha

package/plugins/beta/draw-ml/src/DrawInit.jsx

@@ -3,70 +3,67 @@ import { attachEvents } from './events.js'
 import { createMapboxDraw } from './mapboxDraw.js'
 
 export const DrawInit = ({ appState, appConfig, mapState, pluginConfig, pluginState, services, mapProvider, buttonConfig }) => {
-	const { events, eventBus } = services
-	const { crossHair } = mapState
-	const isTouchOrKeyboard = ['touch', 'keyboard'].includes(appState.interfaceType)
+  const { events, eventBus } = services
+  const { crossHair } = mapState
+  const isTouchOrKeyboard = ['touch', 'keyboard'].includes(appState.interfaceType)
 
-	// Create draw instance once
-	useEffect(() => {
-		// Don't run init if the app is in non-specified mode
-		const inModeWhitelist = pluginConfig.includeModes?.includes(appState.mode) ?? true
-		const inExcludeModes = pluginConfig.excludeModes?.includes(appState.mode) ?? false
+  // Create draw instance once
+  useEffect(() => {
+    // Don't run init if the app is in non-specified mode
+    const inModeWhitelist = pluginConfig.includeModes?.includes(appState.mode) ?? true
+    const inExcludeModes = pluginConfig.excludeModes?.includes(appState.mode) ?? false
 
     if (!mapState.isMapReady || !inModeWhitelist || inExcludeModes) {
       return
     }
 
     const { remove } = createMapboxDraw({
-			mapStyle: mapState.mapStyle,
-			snapLayers: pluginConfig.snapLayers,
-			mapProvider,
-			events,
-			eventBus
-		})
+      mapStyle: mapState.mapStyle,
+      snapLayers: pluginConfig.snapLayers,
+      mapProvider,
+      events,
+      eventBus
+    })
 
-		// Initialize snap layers flag from config
-		pluginState.dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: pluginConfig.snapLayers?.length > 0 })
+    // Initialize snap layers flag from config
+    pluginState.dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: pluginConfig.snapLayers?.length > 0 })
 
-		// Draw ready
-		eventBus.emit('draw:ready')
-
-		return () => remove()
+    // Draw ready
+    eventBus.emit('draw:ready')
 
+    return () => remove()
   }, [mapState.isMapReady, appState.mode])
 
-	// Show crosshair immediately on touch/keyboard when entering draw mode
-	useEffect(() => {
-		if (['draw_polygon', 'draw_line'].includes(pluginState.mode) && isTouchOrKeyboard) {
-			const wasAlreadyVisible = crossHair.isVisible
-			crossHair.fixAtCenter()
-			return () => {
-				if (!wasAlreadyVisible) {
-					crossHair.hide()
-				}
-			}
-		}
-	}, [pluginState.mode, appState.interfaceType])
-
-	// Attach events when plgin state changes
-	useEffect(() => {
-		
-		if (!mapProvider.draw) {
-			return
-		}
+  // Show crosshair immediately on touch/keyboard when entering draw mode
+  useEffect(() => {
+    if (['draw_polygon', 'draw_line'].includes(pluginState.mode) && isTouchOrKeyboard) {
+      const wasAlreadyVisible = crossHair.isVisible
+      crossHair.fixAtCenter()
+      return () => {
+        if (!wasAlreadyVisible) {
+          crossHair.hide()
+        }
+      }
+    }
+  }, [pluginState.mode, appState.interfaceType])
 
-		const cleanupEvents = attachEvents({
-			appState,
-			appConfig,
-			mapState,
-			mapProvider,
-			buttonConfig,
-			pluginState,
-			events,
-			eventBus
-		})
+  // Attach events when plgin state changes
+  useEffect(() => {
+    if (!mapProvider.draw) {
+      return
+    }
 
-		return () => cleanupEvents()
+    const cleanupEvents = attachEvents({
+      appState,
+      appConfig,
+      mapState,
+      mapProvider,
+      buttonConfig,
+      pluginState,
+      events,
+      eventBus
+    })
 
-	}, [mapProvider, appState, pluginState])
-}
+    return () => cleanupEvents()
+  }, [mapProvider, appState, pluginState])
+}

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

@@ -10,4 +10,4 @@ export const deleteFeature = ({ mapProvider, services }, featureIds) => {
   draw.delete(featureIds)
 
   eventBus.emit('draw:delete', { featureIds })
-}
+}

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

@@ -55,13 +55,16 @@ export const editFeature = ({ appState, appConfig, mapState, pluginConfig, plugi
 
   // Put feature in state
   const feature = draw.get(featureId)
-  dispatch({ type: 'SET_FEATURE', payload: {
-    feature,
-    tempFeature: feature
-  }})
+  dispatch({
+    type: 'SET_FEATURE',
+    payload: {
+      feature,
+      tempFeature: feature
+    }
+  })
 
   // Set mode to edit_vertex
   dispatch({ type: 'SET_MODE', payload: 'edit_vertex' })
 
   return true
-}
+}

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

@@ -1,6 +1,5 @@
 import { getSnapInstance } from '../utils/snapHelpers.js'
 import { flattenStyleProperties } from '../utils/flattenStyleProperties.js'
-import { DEFAULTS } from '../defaults.js'
 
 /**
  * Programmatically create a new line

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

@@ -1,6 +1,5 @@
 import { getSnapInstance } from '../utils/snapHelpers.js'
 import { flattenStyleProperties } from '../utils/flattenStyleProperties.js'
-import { DEFAULTS } from '../defaults.js'
 
 /**
  * Programmatically create a new polygon

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

@@ -53,7 +53,7 @@ export const split = ({ appState, appConfig, pluginState, mapProvider }, feature
     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 }})
+    dispatch({ type: 'SET_ACTION', payload: { name: 'split', isValid: !!featureCollection } })
   })
 
   // Real time check for valid line
@@ -62,13 +62,13 @@ export const split = ({ appState, appConfig, pluginState, mapProvider }, feature
     if (e.coordinates.length < 2) {
       return
     }
-    const lineFeature = { id: '_splitter', geometry: { type: 'LineString', coordinates: e.coordinates }}
+    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 }})
+      dispatch({ type: 'SET_ACTION', payload: { name: 'split', isValid } })
     }
   }, DEBOUNCE_SPLIT_POLYGON)
   map.on('draw.geometrychange', onGeometryChange)
@@ -77,5 +77,5 @@ export const split = ({ appState, appConfig, pluginState, mapProvider }, feature
   dispatch({ type: 'SET_MODE', payload: 'draw_line' })
 
   // Set action to 'split'
-  dispatch({ type: 'SET_ACTION', payload: { name: 'split' }})
+  dispatch({ type: 'SET_ACTION', payload: { name: 'split' } })
 }

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

@@ -14,4 +14,4 @@ export const DEFAULTS = {
     edge: 'rgba(29,112,184,1)'
   },
   snapRadius: 10
-}
+}

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

@@ -1,6 +1,6 @@
 import { clearSnapState, getSnapInstance } from './utils/snapHelpers.js'
 
-export function attachEvents({ pluginState, mapProvider, buttonConfig, eventBus }) {
+export function attachEvents ({ pluginState, mapProvider, buttonConfig, eventBus }) {
   const { drawDone, drawAddPoint, drawUndo, drawDeletePoint, drawSnap, drawCancel } = buttonConfig
   const { map, draw } = mapProvider
   const { dispatch, feature, tempFeature } = pluginState
@@ -23,7 +23,7 @@ export function attachEvents({ pluginState, mapProvider, buttonConfig, eventBus
   const resetDrawModeAndFeature = () => {
     mapProvider.undoStack?.clear()
     dispatch({ type: 'SET_MODE', payload: null })
-    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
+    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null } })
   }
 
   // --- Button handlers
@@ -156,9 +156,11 @@ export function attachEvents({ pluginState, mapProvider, buttonConfig, eventBus
 
   // --- Cleanup
   return () => {
-    [drawDone, drawAddPoint, drawUndo, drawDeletePoint, drawSnap, drawCancel].forEach(btn => { if (btn) {
-      btn.onClick = null
-    }})
+    [drawDone, drawAddPoint, drawUndo, drawDeletePoint, drawSnap, drawCancel].forEach(btn => {
+      if (btn) {
+        btn.onClick = null
+      }
+    })
     map.off('styledata', handleStyleData)
     map.off('draw.cancel', handleCancel)
     map.off('draw.create', onCreate)
@@ -168,4 +170,4 @@ export function attachEvents({ pluginState, mapProvider, buttonConfig, eventBus
     map.off('draw.vertexchange', onVertexChange)
     map.off('draw.undochange', onUndoChange)
   }
-}
+}

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

@@ -10,8 +10,8 @@ import { split } from './api/split.js'
 import { merge } from './api/merge.js'
 
 const createButtonSlots = (showLabel) => ({
-  mobile:  { slot: 'actions', showLabel },
-  tablet:  { slot: 'actions', showLabel },
+  mobile: { slot: 'actions', showLabel },
+  tablet: { slot: 'actions', showLabel },
   desktop: { slot: 'actions', showLabel }
 })
 
@@ -30,13 +30,13 @@ export const manifest = {
     variant: 'touch',
     hiddenWhen: ({ appState, pluginState }) => !['draw_polygon', 'draw_line'].includes(pluginState.mode) || appState.interfaceType !== 'touch',
     ...createButtonSlots(false)
-  },{
+  }, {
     id: 'drawCancel',
     label: 'Cancel',
     variant: 'tertiary',
     hiddenWhen: ({ pluginState }) => !pluginState.mode,
     ...createButtonSlots(true)
-  },{
+  }, {
     id: 'drawMenu',
     label: 'Menu',
     iconId: 'menu',
@@ -47,22 +47,22 @@ export const manifest = {
       label: 'Undo',
       iconId: 'undo',
       hiddenWhen: ({ pluginState }) => !['draw_polygon', 'draw_line', 'edit_vertex'].includes(pluginState.mode),
-      enableWhen: ({ pluginState }) => pluginState.undoStackLength > 0,
-    },{
+      enableWhen: ({ pluginState }) => pluginState.undoStackLength > 0
+    }, {
       id: 'drawSnap',
       label: 'Snap to feature',
       iconId: 'magnet',
       hiddenWhen: ({ pluginState }) => !pluginState.mode || !pluginState.hasSnapLayers,
-      pressedWhen: ({ pluginState }) => !!pluginState.snap,
-    },{
+      pressedWhen: ({ pluginState }) => !!pluginState.snap
+    }, {
       id: 'drawDeletePoint',
       label: 'Delete point',
       iconId: 'trash',
       enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertecies > (pluginState.tempFeature?.geometry?.type === 'Polygon' ? 3 : 2),
-      hiddenWhen: ({ pluginState }) => !(['simple_select', 'edit_vertex'].includes(pluginState.mode)),
+      hiddenWhen: ({ pluginState }) => !(['simple_select', 'edit_vertex'].includes(pluginState.mode))
     }],
     ...createButtonSlots(true)
-  },{
+  }, {
     id: 'drawDone',
     label: 'Done',
     variant: 'primary',
@@ -81,16 +81,16 @@ export const manifest = {
   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: 'check',
     svgContent: '<path d="M20 6 9 17l-5-5"/>'
-  },{
+  }, {
     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"/>'
   }],
@@ -104,4 +104,4 @@ export const manifest = {
     split,
     merge
   }
-}
+}

package/plugins/beta/draw-ml/src/mapboxDraw.js

@@ -122,7 +122,7 @@ export const createMapboxDraw = ({ mapStyle, mapProvider, events, eventBus, snap
   // --- Return instance and cleanup function ---
   return {
     draw,
-    remove() {
+    remove () {
       // Remove touch workaround listeners
       canvas.removeEventListener('touchstart', handleTouchStart)
       canvas.removeEventListener('touchend', handleTouchEnd)

package/plugins/beta/draw-ml/src/mapboxSnap.js

@@ -5,7 +5,7 @@ import { DEFAULTS } from './defaults.js'
 const SNAP_HELPER_LAYER = 'snap-helper-circle'
 
 /** Apply patches to MapboxSnap prototype (once only) */
-function applyMapboxSnapPatches(colors) {
+function applyMapboxSnapPatches (colors) {
   if (MapboxSnap.prototype.__snapPatched) {
     return
   }
@@ -27,7 +27,7 @@ function applyMapboxSnapPatches(colors) {
   proto.changeSnappedPoints = () => {}
 
   // Skip setMapData when disabled, ensure layer visibility when enabled
-  proto.setMapData = function(data) {
+  proto.setMapData = function (data) {
     if (!this.status) {
       return
     }
@@ -39,7 +39,7 @@ function applyMapboxSnapPatches(colors) {
   }
 
   // Skip drawingSnapCheck when disabled
-  proto.drawingSnapCheck = function() {
+  proto.drawingSnapCheck = function () {
     if (!this.status) {
       return
     }
@@ -48,7 +48,7 @@ function applyMapboxSnapPatches(colors) {
 
   // Fix typo: original uses 'coodinates' instead of 'coordinates' for Multi* types
   // Also validate coordinates to prevent "coordinates must contain numbers" errors
-  proto.getLines = function(feature, mouse, radiusArg) {
+  proto.getLines = function (feature, mouse, radiusArg) {
     const geom = feature.geometry
     if (!geom || !geom.coordinates) {
       return []
@@ -74,7 +74,7 @@ function applyMapboxSnapPatches(colors) {
   }
 
   // Query within radius bbox instead of just point, filter to existing layers
-  proto.getCloseFeatures = function(e, radiusInMeters) {
+  proto.getCloseFeatures = function (e, radiusInMeters) {
     if (!this.status) {
       return []
     }
@@ -90,21 +90,21 @@ function applyMapboxSnapPatches(colors) {
   }
 
   // Custom colors for snap indicators
-  proto.searchInVertex = function(...args) {
+  proto.searchInVertex = function (...args) {
     const r = orig.searchInVertex.apply(this, args)
     if (r) {
       r.color = colors.vertex
     }
     return r
   }
-  proto.searchInMidPoint = function(...args) {
+  proto.searchInMidPoint = function (...args) {
     const r = orig.searchInMidPoint.apply(this, args)
     if (r) {
       r.color = colors.midpoint
     }
     return r
   }
-  proto.searchInEdge = function(...args) {
+  proto.searchInEdge = function (...args) {
     const r = orig.searchInEdge.apply(this, args)
     if (r) {
       r.color = colors.edge
@@ -113,7 +113,7 @@ function applyMapboxSnapPatches(colors) {
   }
 
   // Skip when disabled or zooming, clean up internal arrays to prevent memory accumulation
-  proto.snapToClosestPoint = function(e) {
+  proto.snapToClosestPoint = function (e) {
     if (!this.status || this.map?._isZooming) {
       return
     }
@@ -131,14 +131,13 @@ function applyMapboxSnapPatches(colors) {
       console.log(err)
       this.snapStatus = false
       this.snapCoords = null
-      return
     }
   }
 }
 
 /** Poll until checkFn returns truthy, then call onSuccess with the result */
-function pollUntil(checkFn, onSuccess) {
-  (function poll() {
+function pollUntil (checkFn, onSuccess) {
+  (function poll () {
     const result = checkFn()
     // null signals to stop polling, falsy continues polling
     if (result === null) return
@@ -150,7 +149,7 @@ function pollUntil(checkFn, onSuccess) {
  * Patch a GeoJSON source to expose _data for MapboxSnap compatibility
  * MapboxSnap expects source._data.features but MapLibre doesn't expose this
  */
-export function patchSourceData(source) {
+export function patchSourceData (source) {
   if (!source || (source._data && Array.isArray(source._data?.features))) {
     return
   }
@@ -168,7 +167,7 @@ export function patchSourceData(source) {
 }
 
 /** Initialize MapboxSnap with MapLibre + MapboxDraw */
-export function initMapLibreSnap(map, draw, snapOptions = {}) {
+export function initMapLibreSnap (map, draw, snapOptions = {}) {
   // Prevent multiple initializations (causes event listener duplication)
   if (map._snapInitialized) {
     return map._snapInstance
@@ -188,7 +187,7 @@ export function initMapLibreSnap(map, draw, snapOptions = {}) {
   applyMapboxSnapPatches({ ...DEFAULTS.snapColors, ...colors })
 
   // Clean up old snap instance's source and layer
-  function cleanupOldSnap() {
+  function cleanupOldSnap () {
     if (map.getLayer(SNAP_HELPER_LAYER)) {
       map.removeLayer(SNAP_HELPER_LAYER)
     }
@@ -198,7 +197,7 @@ export function initMapLibreSnap(map, draw, snapOptions = {}) {
   }
 
   // Create snap instance once source is available
-  function createSnap(source) {
+  function createSnap (source) {
     // Prevent duplicate creation (race condition between initial poll and style.load)
     if (map._snapInstance || map._snapCreating) {
       return map._snapInstance
@@ -247,9 +246,9 @@ export function initMapLibreSnap(map, draw, snapOptions = {}) {
     // Set snap layers (overrides defaults, pass null to reset to defaults)
     snap.setSnapLayers = (overrideLayers) => {
       if (overrideLayers === null || overrideLayers === undefined) {
-        snap._activeLayers = null  // Use defaults
+        snap._activeLayers = null // Use defaults
       } else if (Array.isArray(overrideLayers)) {
-        snap._activeLayers = overrideLayers  // Override defaults
+        snap._activeLayers = overrideLayers // Override defaults
       } else {
         // No action
       }