@defra/interactive-map 0.0.32-alpha → 0.0.33-alpha

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

@@ -1,10 +1,3 @@
-/**
- * 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]
@@ -41,11 +34,8 @@ const better = (a, b) => {
   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
- */
+// OL Vector rings duplicate the first coord as last; VectorTile rings do not.
+// isClosedRing=true: skip the duplicated last vertex, wrap closing edge back to first.
 const testCoords = (coords, query, toleranceSq, isClosedRing) => {
   let best = null
   const n = isClosedRing && coords.length > 1 ? coords.length - 1 : coords.length
@@ -72,13 +62,6 @@ const testCoords = (coords, query, toleranceSq, isClosedRing) => {
   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++) {
@@ -95,7 +78,7 @@ const getBestEdge = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
   return best
 }
 
-const getBestPair = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
+const getBestVertex = (flat, start, numPairs, query, toleranceSq) => {
   let best = null
   for (let i = 0; i < numPairs; i++) {
     const xi = start + i * 2
@@ -105,7 +88,14 @@ const getBestPair = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
       best = bestOf(best, { type: 'vertex', coord: v, distSq: dSq })
     }
   }
-  return bestOf(best, getBestEdge(flat, start, numPairs, edgeCount, query, toleranceSq))
+  return best
+}
+
+const getBestPair = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
+  return bestOf(
+    getBestVertex(flat, start, numPairs, query, toleranceSq),
+    getBestEdge(flat, start, numPairs, edgeCount, query, toleranceSq)
+  )
 }
 
 const testFlatCoords = (flat, start, end, query, toleranceSq, isClosedRing) => {
@@ -115,32 +105,32 @@ const testFlatCoords = (flat, start, end, query, toleranceSq, isClosedRing) => {
 }
 
 const olGeomHandlers = {
-  Point (geom, query, toleranceSq) {
+  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) {
+  lineString: (geom, query, toleranceSq) => {
     return testCoords(geom.getCoordinates(), query, toleranceSq, false)
   },
-  LinearRing (geom, query, toleranceSq) {
+  linearRing: (geom, query, toleranceSq) => {
     return testCoords(geom.getCoordinates(), query, toleranceSq, true)
   },
-  Polygon (geom, query, toleranceSq) {
+  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) {
+  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) {
+  multiPolygon: (geom, query, toleranceSq) => {
     let best = null
     for (const polygon of geom.getCoordinates()) {
       for (const ring of polygon) {
@@ -151,27 +141,14 @@ const olGeomHandlers = {
   }
 }
 
-/**
- * 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()]
+  if (!geom) { return null }
+  const rawType = geom.getType()
+  const handler = olGeomHandlers[rawType[0].toLowerCase() + rawType.slice(1)]
   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()
@@ -180,10 +157,10 @@ export const testRenderFeature = (feature, query, toleranceSq) => {
   if (type === 'Point') {
     const dSq = dist2(query, flat)
     if (dSq <= toleranceSq) {
-      best = bestOf(best, { type: 'vertex', coord: [flat[0], flat[1]], distSq: dSq })
+      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))
+    best = testFlatCoords(flat, 0, flat.length, query, toleranceSq, false)
   } else if (type === 'Polygon' || type === 'MultiLineString') {
     const ends = feature.getEnds()
     let start = 0
@@ -193,7 +170,7 @@ export const testRenderFeature = (feature, query, toleranceSq) => {
       start = end
     }
   } else {
-    // No action
+    // MultiPoint / unknown — no snap candidates
   }
 
   return best

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

@@ -16,38 +16,39 @@ 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 processSnapEvent = (mapBrowserEvent, engine, indicator, snapRadius, isIndicatorActive) => {
+  const { type } = mapBrowserEvent
+
+  if (type === 'pointerout' || type === 'pointerleave') {
+    indicator.hide()
+    return
+  }
+
+  if (!SNAP_EVENTS.has(type)) {
+    return
+  }
+
+  const result = engine.query(mapBrowserEvent.coordinate, snapRadius)
+  if (result) {
+    mapBrowserEvent.coordinate = result.coord.slice()
+  }
+
+  // Only update indicator during free mouse movement — hide during drag, no-op for clicks
+  if (type === 'pointermove' && isIndicatorActive()) {
+    result ? indicator.show(result.coord, result.type) : indicator.hide()
+  } else if (type === 'pointerdrag') {
+    indicator.hide()
+  } else {
+    // no indicator update for click/down/up events
+  }
+}
+
+export const createSnapInteraction = (engine, indicator, snapRadius, isIndicatorActive) => {
   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()
+      if (interaction.getActive()) {
+        processSnapEvent(mapBrowserEvent, engine, indicator, snapRadius, isIndicatorActive)
       }
-
-      // 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
     }
   })

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

@@ -23,7 +23,9 @@ export const createSnapManager = (map, snapLayers, colors, snapRadius) => {
 
   const engine = createSnapEngine(map, snapLayers)
   const indicator = createSnapIndicator(map, colors)
-  const interaction = createSnapInteraction(engine, indicator, snapRadius)
+
+  let indicatorActive = false
+  const interaction = createSnapInteraction(engine, indicator, snapRadius, () => indicatorActive)
 
   map.addInteraction(interaction)
   interaction.setActive(false) // matches reducer initial state: snap: false
@@ -55,6 +57,13 @@ export const createSnapManager = (map, snapLayers, colors, snapRadius) => {
       indicator.hide()
     },
 
+    setIndicatorActive (value) {
+      indicatorActive = value
+      if (!value) {
+        indicator.hide()
+      }
+    },
+
     setActive (value) {
       active = value
       interaction.setActive(value)

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

@@ -5,7 +5,9 @@
  */
 
 export const getCoords = (geom) => {
-  if (!geom?.coordinates) return []
+  if (!geom?.coordinates) {
+    return []
+  }
   switch (geom.type) {
     case 'LineString': return geom.coordinates
     case 'Polygon': return geom.coordinates.flatMap(ring => ring.slice(0, -1))
@@ -20,7 +22,9 @@ export const getCoords = (geom) => {
  * { start, length, path, closed }
  */
 export const getRingSegments = (geom) => {
-  if (!geom?.coordinates) return []
+  if (!geom?.coordinates) {
+    return []
+  }
   const segments = []
   let start = 0
 
@@ -80,7 +84,9 @@ export const getModifiableCoords = (geojsonGeometry, path) => {
 export const getMidpoints = (geom) => {
   const coords = getCoords(geom)
   const segments = getRingSegments(geom)
-  if (!coords.length || !segments.length) return []
+  if (!coords.length || !segments.length) {
+    return []
+  }
 
   const midpoints = []
   for (const seg of segments) {

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

@@ -6,7 +6,7 @@
 /** OL coordinate [e, n] → screen pixel { x, y } */
 export const coordToPixel = (map, coord) => {
   const px = map.getPixelFromCoordinate(coord)
-  if (!px) return null
+  if (!px) { return null }
   return { x: px[0], y: px[1] }
 }
 
@@ -30,6 +30,6 @@ export const pixelToArray = ({ x, y }) => [x, y]
  */
 export const nudgeCoord = (map, coord, dx, dy) => {
   const px = map.getPixelFromCoordinate(coord)
-  if (!px) return coord
+  if (!px) { return coord }
   return map.getCoordinateFromPixel([px[0] + dx, px[1] + dy])
 }

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

@@ -12,17 +12,13 @@ export const spatialNavigate = (start, pixels, direction) => {
     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
+    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)
+  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)
+  const dist = (p) => Math.hypot(start[0] - p[0], start[1] - p[1])
+  const closest = quadrant.reduce((best, p) => dist(p) < dist(best) ? p : best, quadrant[0])
   return pixels.findIndex(p => JSON.stringify(p) === JSON.stringify(closest))
 }