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

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

@@ -1,21 +1,68 @@
-/**
- * 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 { transform as projTransform } from 'ol/proj.js'
 import VectorLayer from 'ol/layer/Vector.js'
 import VectorTileLayer from 'ol/layer/VectorTile.js'
 import { testOLFeature, testRenderFeature } from './snapGeometry.js'
 
+// VectorTile features are clipped to tile extents, producing artificial straight edges at tile
+// boundaries. MVT tiles also carry a buffer region (geometry from adjacent tiles extending
+// past the tile boundary). Both the exact boundary and the buffer zone must be filtered.
+// Standard MVT buffer is 128 out of 4096 tile coordinate units.
+const TILE_BOUNDARY_EPS = 1 // source-projection units of margin beyond the buffer
+const MVT_BUFFER_UNITS = 128
+const MVT_TILE_EXTENT = 4096
+
+const buildTileBoundaryState = (layer, map) => {
+  const source = layer.getSource()
+  const tileGrid = source?.getTileGrid()
+  if (!tileGrid) { return null }
+  const viewProj = map.getView().getProjection()
+  const sourceProj = source.getProjection() ?? viewProj
+  const zoom = tileGrid.getZForResolution(map.getView().getResolution(), 0)
+  return { tileGrid, viewProj, sourceProj, zoom }
+}
+
+const isOnTileBoundary = (state, coord) => {
+  if (!state) { return false }
+  const { tileGrid, viewProj, sourceProj, zoom } = state
+  const c = projTransform(coord, viewProj, sourceProj)
+  const tileCoord = tileGrid.getTileCoordForCoordAndZ(c, zoom)
+  const [minX, minY, maxX, maxY] = tileGrid.getTileCoordExtent(tileCoord)
+  // Buffer zone in source projection: edges within this distance of a tile boundary are
+  // MVT buffer clip artefacts (geometry from the adjacent tile included for rendering overlap).
+  const tileBuffer = (maxX - minX) * (MVT_BUFFER_UNITS / MVT_TILE_EXTENT)
+  const eps = tileBuffer + TILE_BOUNDARY_EPS
+  return (
+    Math.abs(c[0] - minX) < eps ||
+    Math.abs(c[0] - maxX) < eps ||
+    Math.abs(c[1] - minY) < eps ||
+    Math.abs(c[1] - maxY) < eps
+  )
+}
+
+// Two same-style fill polygons share an invisible boundary — snapping to it is confusing.
+// Detect this by projecting a test point slightly past the snap position (away from the cursor)
+// and checking whether the same fill layer covers that side too.
+// If it does → same-style invisible boundary → skip.
+// If not (empty space, road, different layer) → visible outer edge → include.
+const INVISIBLE_FILL_MIN_DIST_SQ = 1 // (1m)² — below this, cursor is on the edge, skip direction check
+
+const isInvisibleFillBoundary = (edgeCoord, cursorCoord, layerId, map, vtLayers, resolution) => {
+  const dx = edgeCoord[0] - cursorCoord[0]
+  const dy = edgeCoord[1] - cursorCoord[1]
+  const distSq = dx * dx + dy * dy
+  if (distSq < INVISIBLE_FILL_MIN_DIST_SQ) { return false }
+  const dist = Math.sqrt(distSq)
+  const step = resolution * 4
+  const testCoord = [edgeCoord[0] + (dx / dist) * step, edgeCoord[1] + (dy / dist) * step]
+  const testPixel = map.getPixelFromCoordinate(testCoord)
+  if (!testPixel) { return false }
+  return !!map.forEachFeatureAtPixel(
+    testPixel,
+    (f) => f.get('mapbox-layer')?.id === layerId,
+    { hitTolerance: 2, layerFilter: (l) => vtLayers.includes(l) }
+  )
+}
+
 const pickBest = (a, b) => {
   if (!b) { return a }
   if (!a) { return b }
@@ -53,17 +100,9 @@ export const createSnapEngine = (map, snapLayers = []) => {
 
   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
-    }
+    if (!resolution) { return null }
     const toleranceMapUnits = radiusPx * resolution
     const toleranceSq = toleranceMapUnits * toleranceMapUnits
     const ext = [
@@ -75,27 +114,32 @@ export const createSnapEngine = (map, snapLayers = []) => {
 
     let best = null
 
-    // --- OL VectorLayer sources ---
     for (const layer of olLayers) {
       const source = layer.getSource()
-      if (!source) {
-        continue
-      }
+      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) {
+        const tileBoundaryStates = new Map()
         map.forEachFeatureAtPixel(
           pixel,
-          (feature, _layer) => {
-            if (!vtLayerNames.has(feature.get('mapbox-layer')?.id)) { return }
-            best = pickBest(best, testRenderFeature(feature, coord, toleranceSq))
+          (feature, layer) => {
+            const mapboxLayer = feature.get('mapbox-layer')
+            if (!vtLayerNames.has(mapboxLayer?.id)) { return }
+            const candidate = testRenderFeature(feature, coord, toleranceSq)
+            if (!candidate) { return }
+            if (!tileBoundaryStates.has(layer)) {
+              tileBoundaryStates.set(layer, buildTileBoundaryState(layer, map))
+            }
+            if (isOnTileBoundary(tileBoundaryStates.get(layer), candidate.coord)) { return }
+            if (candidate.type === 'edge' && mapboxLayer?.type === 'fill' && isInvisibleFillBoundary(candidate.coord, coord, mapboxLayer.id, map, vtLayers, resolution)) { return }
+            best = pickBest(best, candidate)
           },
           { hitTolerance: radiusPx, layerFilter: (l) => vtLayers.includes(l) }
         )

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))
 }

package/plugins/beta/map-styles/src/mapStyles.scss

@@ -1,84 +1,84 @@
 .im-c-map-styles {
-	display: block;
+  display: block;
 }
 
 .im-c-map-styles__inner {
-	display: flex;
-	flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .im-c-map-styles__heading {
-	padding: var(--primary-gap) 0;
+  padding: var(--primary-gap) 0;
 }
 
 .im-c-map-styles__item {
-	display: flex;
-	justify-content: center;
-	padding: calc(var(--divider-gap) / 2);
-	flex: 0 0 33.3333%;
-	box-sizing: border-box;
-	min-width: 90px;
+  display: flex;
+  justify-content: center;
+  padding: calc(var(--divider-gap) / 2);
+  flex: 0 0 33.3333%;
+  box-sizing: border-box;
+  min-width: 90px;
 }
 
 .im-c-map-styles__button {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	border: 0;
-	margin: 0;
-	color: var(--foreground-color);
-	background-color: transparent;
-	cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 0;
+  margin: 0;
+  color: var(--foreground-color);
+  background-color: transparent;
+  cursor: pointer;
 }
 
 .im-c-map-styles__image {
-	position: relative;
-	padding: 2px;
-	border: 3px solid transparent;
+  position: relative;
+  padding: 2px;
+  border: 3px solid transparent;
 }
 
 .im-c-map-styles__image svg {
-	fill: currentColor;
+  fill: currentColor;
 }
 
 .im-c-map-styles__image-bg {
-	fill: none;
-	stroke: var(--image-placeholder-color);
+  fill: none;
+  stroke: var(--image-placeholder-color);
 }
 
 .im-c-map-styles img {
-	display: block;
-	// border: 1px solid var(--image-placeholder-color);
+  display: block;
+  // border: 1px solid var(--image-placeholder-color);
 } 
 
 // Text size
 .im-c-map-styles__group:not(:first-child) {
-	margin-top: var(--divider-gap);
-	border-top: 1px solid var(--content-border-color);
+  margin-top: var(--divider-gap);
+  border-top: 1px solid var(--content-border-color);
 }
 
 // State
 .im-c-map-styles__button[aria-pressed="true"] .im-c-map-styles__image {
-	border-color: var(--foreground-color);
+  border-color: var(--foreground-color);
 }
 
 .im-c-map-styles__button:focus {
-	outline: 0;
+  outline: 0;
 }
 
 .im-c-map-styles__button[data-focus-visible="true"] {
-	.im-c-map-styles__image::after {
-		content: '';
-		position: absolute;
-		top: -3px;
-		right: -3px;
-		bottom: -3px;
-		left: -3px;
-		outline: 3px solid var(--focus-outline-color);
-		border: 3px solid var(--focus-border-color);
-	}
+  .im-c-map-styles__image::after {
+    content: '';
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    bottom: -3px;
+    left: -3px;
+    outline: 3px solid var(--focus-outline-color);
+    border: 3px solid var(--focus-border-color);
+  }
 }
 
 .im-c-map-styles__button:hover:not([aria-pressed="true"]) .im-c-map-styles__image {
-	border-color: var(--button-hover-color);
+  border-color: var(--button-hover-color);
 }