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

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

@@ -1,18 +1,48 @@
 import Draw from 'ol/interaction/Draw.js'
+import { noModifierKeys } from 'ol/events/condition.js'
 import { createDrawInput } from './drawInput.js'
 import { getCoords } from '../utils/geometryHelpers.js'
 
-/**
- * Draw mode — handles draw_polygon and draw_line.
- *
- * OL's Draw interaction handles all pointer/mouse behaviour natively.
- * drawInput.js handles touch/keyboard/button input.
- *
- * @returns {{ done, cancel, undo, destroy }}
- */
+const SNAP_TOLERANCE_PX = 12
+const MIN_VERTICES = { Polygon: 3, LineString: 2 }
+
+const canFinish = (geometryType, sketchFeature) => {
+  if (!sketchFeature) { return false }
+  const geom = sketchFeature.getGeometry()
+  const coords = getCoords({ type: geometryType, coordinates: geom.getCoordinates() })
+  // OL keeps a trailing rubber-band coordinate; subtract 1 to get real vertex count
+  return coords.length - 1 >= MIN_VERTICES[geometryType]
+}
+
+// OL closes Polygon rings by appending v1: [...placed, rubber_band, v1_closing]; last placed is 3 from end.
+const POLY_LAST_PLACED_OFFSET = 3
+
+const getLastPlacedCoord = (geom) => {
+  if (geom.getType() === 'Polygon') {
+    const ring = geom.getCoordinates()[0] || []
+    return ring.length >= POLY_LAST_PLACED_OFFSET ? ring[ring.length - POLY_LAST_PLACED_OFFSET] : null
+  }
+  const coords = geom.getCoordinates()
+  return coords.length >= 2 ? coords[coords.length - 2] : null
+}
+
+const DUPLICATE_TOLERANCE_PX = 2
+
+const buildCondition = (map, geometryType, getSketchFeature) => (e) => {
+  if (!noModifierKeys(e)) { return false }
+  const sf = getSketchFeature()
+  if (!sf || canFinish(geometryType, sf)) { return true }
+  const prev = getLastPlacedCoord(sf.getGeometry())
+  if (!prev) { return true }
+  const pp = map.getPixelFromCoordinate(prev)
+  if (!pp) { return true }
+  const dx = e.pixel[0] - pp[0]; const dy = e.pixel[1] - pp[1]
+  return dx * dx + dy * dy > DUPLICATE_TOLERANCE_PX * DUPLICATE_TOLERANCE_PX
+}
+
 export const createDrawMode = ({ map, manager, options }) => {
   const {
-    geometryType, // 'Polygon' | 'LineString'
+    geometryType,
     featureId,
     properties = {},
     container,
@@ -22,28 +52,28 @@ export const createDrawMode = ({ map, manager, options }) => {
     snap
   } = options
 
+  let sketchFeature = null
+
   const drawInteraction = new Draw({
     type: geometryType,
     style: manager.styles.createSketchStyle(),
     stopClick: true,
-    // minPoints defaults: 3 for Polygon, 2 for LineString — OL handles this
-    // snapTolerance: how close to first point to auto-close polygon
-    snapTolerance: 12
+    snapTolerance: SNAP_TOLERANCE_PX,
+    condition: buildCondition(map, geometryType, () => sketchFeature)
   })
   map.addInteraction(drawInteraction)
-
-  // Track vertex count for the Done button enabled state
-  let sketchFeature = null
+  // OL internal: overlay_ is the private VectorLayer used for the sketch geometry.
+  // updateWhileAnimating_ forces per-frame redraws during view animations (keyboard pan).
+  // Without this, geom.setCoordinates() calls are ignored while the ANIMATING hint is set.
+  // Check ol/interaction/Draw.js and ol/layer/BaseVector.js if this breaks after an OL upgrade.
+  drawInteraction.overlay_.updateWhileAnimating_ = true
 
   const updateVertexCount = () => {
-    if (!sketchFeature) {
-      return
-    }
+    if (!sketchFeature) { return }
     const geom = sketchFeature.getGeometry()
     const coords = getCoords({ type: geometryType, coordinates: geom.getCoordinates() })
     // OL always keeps a trailing rubber-band coordinate; subtract 1
-    const numVertices = Math.max(0, coords.length - 1)
-    manager.emit('vertexchange', { numVertices })
+    manager.emit('vertexchange', { numVertices: Math.max(0, coords.length - 1) })
   }
 
   drawInteraction.on('drawstart', (e) => {
@@ -56,14 +86,11 @@ export const createDrawMode = ({ map, manager, options }) => {
     olFeature.setId(String(featureId))
     olFeature.setProperties(properties)
     manager.store.source.addFeature(olFeature)
-    const geojson = manager.store.toGeoJSON(olFeature)
-    manager.emit('create', geojson)
+    manager.emit('create', manager.store.toGeoJSON(olFeature))
     // Mode switches to disabled in events.js after receiving 'create'
   })
 
-  drawInteraction.on('drawabort', () => {
-    manager.emit('cancel')
-  })
+  drawInteraction.on('drawabort', () => { manager.emit('cancel') })
 
   const input = createDrawInput({
     drawInteraction,
@@ -74,36 +101,17 @@ export const createDrawMode = ({ map, manager, options }) => {
       addVertexButtonId,
       mapProvider,
       snap,
-      onUndo: () => {
-        drawInteraction.removeLastPoint()
-        updateVertexCount()
-      }
+      onUndo: () => { drawInteraction.removeLastPoint(); updateVertexCount() },
+      canFinish: () => canFinish(geometryType, sketchFeature)
     }
   })
 
   return {
     done () {
-      // Validate minimum points before finishing
-      if (sketchFeature) {
-        const geom = sketchFeature.getGeometry()
-        const coords = getCoords({ type: geometryType, coordinates: geom.getCoordinates() })
-        const min = geometryType === 'Polygon' ? 4 : 3 // +1 for rubber band
-        if (coords.length < min) {
-          return
-        }
-      }
-      drawInteraction.finishDrawing()
+      if (canFinish(geometryType, sketchFeature)) { drawInteraction.finishDrawing() }
     },
-
-    cancel () {
-      drawInteraction.abortDrawing()
-    },
-
-    undo () {
-      drawInteraction.removeLastPoint()
-      updateVertexCount()
-    },
-
+    cancel () { drawInteraction.abortDrawing() },
+    undo () { drawInteraction.removeLastPoint(); updateVertexCount() },
     destroy () {
       input.destroy()
       map.removeInteraction(drawInteraction)

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

@@ -1,18 +1,15 @@
-/**
- * Input handling for draw mode: touch, keyboard, and button events.
- *
- * Mouse/pointer drawing is handled entirely by OL's Draw interaction.
- * This module handles the crosshair-based input path (touch + keyboard)
- * and the Done / Add Point / Cancel button wiring.
- */
-
 import { coordToPixel, pixelDist } from '../utils/olCoords.js'
 
 const SNAP_TOLERANCE = 12 // pixels
+// Minimum ring length to allow snap-to-close (placed vertices + rubber-band)
+const MIN_SKETCH_COORDS = { Polygon: 4, LineString: 3 }
+const DUPLICATE_TOLERANCE_PX = 2
+// OL Polygon ring layout after addToDrawing_: [...committed, rubber_band, closing_v1]
+const POLY_COMMITTED_OFFSET = 3
 const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'])
 
 const isCloseToFirstVertex = (map, coord, sketchCoords, geometryType) => {
-  if (geometryType !== 'Polygon' || sketchCoords.length < 4) {
+  if (geometryType !== 'Polygon' || sketchCoords.length < MIN_SKETCH_COORDS.Polygon) {
     return false
   }
   const firstCoord = sketchCoords[0]
@@ -44,13 +41,24 @@ const applyRubberbanding = (geom, centerCoord) => {
   }
 }
 
+// Returns the last vertex committed by OL's Draw interaction (not the rubber-band or
+// the closing copy that OL appends to Polygon rings).
+const getLastCommittedVertex = (geom) => {
+  if (geom.getType() === 'Polygon') {
+    const ring = geom.getCoordinates()[0] || []
+    return ring.length >= POLY_COMMITTED_OFFSET ? ring[ring.length - POLY_COMMITTED_OFFSET] : null
+  }
+  const coords = geom.getCoordinates()
+  return coords.length >= 2 ? coords[coords.length - 2] : null
+}
+
 const wireInputEvents = ({
   container, addVertexButtonId, olView, onUndo,
   getInterfaceType, setInterfaceType, clearLastCoord,
   updateRubberbanding, placeVertex
 }) => {
   const onCenterChange = () => {
-    if (getInterfaceType() !== 'pointer') {
+    if (getInterfaceType() !== 'mouse') {
       updateRubberbanding()
     }
   }
@@ -83,7 +91,7 @@ const wireInputEvents = ({
 
   const onPointerdown = (e) => {
     if (e.pointerType !== 'touch') {
-      setInterfaceType('pointer')
+      setInterfaceType('mouse')
       clearLastCoord()
     }
   }
@@ -93,7 +101,7 @@ const wireInputEvents = ({
   }
 
   const onPointerMove = () => {
-    if (getInterfaceType() === 'pointer') {
+    if (getInterfaceType() === 'mouse') {
       return
     }
     updateRubberbanding()
@@ -117,15 +125,9 @@ const wireInputEvents = ({
   }
 }
 
-/**
- * @param {object} params
- * @param {import('ol/interaction/Draw').default} params.drawInteraction
- * @param {object} params.options - { container, interfaceType, addVertexButtonId, mapProvider, snap }
- * @returns {{ getInterfaceType: () => string, destroy: () => void }}
- */
 export const createDrawInput = ({ drawInteraction, options }) => {
-  const { container, addVertexButtonId, mapProvider, snap, onUndo } = options
-  let interfaceType = options.interfaceType
+  const { container, addVertexButtonId, mapProvider, snap, onUndo, canFinish } = options
+  let interfaceType = options.interfaceType ?? 'mouse'
   let sketchFeature = null
   let lastPlacedCoord = null
 
@@ -144,6 +146,12 @@ export const createDrawInput = ({ drawInteraction, options }) => {
 
   const updateRubberbanding = () => {
     if (!sketchFeature) {
+      // No sketch yet — update snap indicator at crosshair position so targets are
+      // visible before the first vertex is placed (touch/keyboard only; mouse uses
+      // the OL snap interaction's pointermove handler instead).
+      if (interfaceType !== 'mouse' && snap) {
+        snap.apply(mapProvider.getCenter())
+      }
       return
     }
     const geom = sketchFeature.getGeometry()
@@ -152,36 +160,63 @@ export const createDrawInput = ({ drawInteraction, options }) => {
       return
     }
     const raw = mapProvider.getCenter()
-    const centerCoord = (interfaceType !== 'pointer' && snap) ? snap.apply(raw) : raw
+    const centerCoord = (interfaceType !== 'mouse' && snap) ? snap.apply(raw) : raw
     applyRubberbanding(geom, centerCoord)
   }
 
+  // Returns true if the vertex was handled as a close/finish attempt (caller should not append).
+  const tryClose = (geom, sketchCoords, coord) => {
+    if (lastPlacedCoord && lastPlacedCoord[0] === coord[0] && lastPlacedCoord[1] === coord[1]) {
+      // Same position as last placed: don't duplicate. Close only if enough real vertices exist.
+      if (canFinish?.()) { drawInteraction.finishDrawing() }
+      lastPlacedCoord = null
+      return true
+    }
+    if (isCloseToFirstVertex(drawInteraction.getMap(), coord, sketchCoords, geom.getType())) {
+      drawInteraction.finishDrawing()
+      return true
+    }
+    // When the add-vertex button overlays the map (touch UI), OL's native pointer handler
+    // and this button click handler both fire for the same tap. Detect that OL already
+    // committed a vertex at coord's position and skip the duplicate appendCoordinates,
+    // but register coord as lastPlacedCoord so a second tap at the same position can close.
+    const map = drawInteraction.getMap()
+    const lastCommitted = getLastCommittedVertex(geom)
+    if (lastCommitted) {
+      const p1 = map.getPixelFromCoordinate(lastCommitted)
+      const p2 = map.getPixelFromCoordinate(coord)
+      if (p1 && p2) {
+        const dx = p1[0] - p2[0]; const dy = p1[1] - p2[1]
+        if (dx * dx + dy * dy < DUPLICATE_TOLERANCE_PX * DUPLICATE_TOLERANCE_PX) {
+          lastPlacedCoord = coord
+          return true
+        }
+      }
+    }
+    return false
+  }
+
   const placeVertex = () => {
     const raw = mapProvider.getCenter()
-    const coord = (interfaceType !== 'pointer' && snap) ? snap.apply(raw) : raw
+    const coord = (interfaceType !== 'mouse' && snap) ? snap.apply(raw) : raw
     snap?.hideIndicator()
     if (sketchFeature) {
       const geom = sketchFeature.getGeometry()
       const rawCoords = geom.getCoordinates()
       const sketchCoords = geom.getType() === 'Polygon' ? (rawCoords[0] || []) : rawCoords
-      if (lastPlacedCoord && lastPlacedCoord[0] === coord[0] && lastPlacedCoord[1] === coord[1]) {
-        drawInteraction.finishDrawing()
-        lastPlacedCoord = null
-        return
-      }
-      if (isCloseToFirstVertex(drawInteraction.getMap(), coord, sketchCoords, geom.getType())) {
-        drawInteraction.finishDrawing()
-        return
-      }
+      if (tryClose(geom, sketchCoords, coord)) { return }
     }
     drawInteraction.appendCoordinates([coord])
     lastPlacedCoord = coord
   }
 
+  const map = drawInteraction.getMap()
+  const olView = map?.getView()
+
   const events = wireInputEvents({
     container,
     addVertexButtonId,
-    olView: drawInteraction.getMap()?.getView(),
+    olView,
     onUndo,
     getInterfaceType: () => interfaceType,
     setInterfaceType: (t) => { interfaceType = t },
@@ -190,10 +225,19 @@ export const createDrawInput = ({ drawInteraction, options }) => {
     placeVertex
   })
 
+  // change:center fires once when a keyboard pan animation starts; postrender tracks each frame.
+  const onMapRender = () => {
+    if (interfaceType !== 'mouse' && olView?.getAnimating()) {
+      updateRubberbanding()
+    }
+  }
+  map?.on('postrender', onMapRender)
+
   return {
     getInterfaceType: () => interfaceType,
     destroy () {
       events.destroy()
+      map?.un('postrender', onMapRender)
     }
   }
 }

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

@@ -41,7 +41,7 @@ export const createEditMode = ({ map, manager, options }) => {
     selectedVertexType: null,
     vertices: [],
     midpoints: [],
-    interfaceType: interfaceType ?? 'pointer'
+    interfaceType: interfaceType ?? 'mouse'
   }
 
   const getState = () => state
@@ -210,7 +210,7 @@ export const createEditMode = ({ map, manager, options }) => {
       touchHandler.updateTargetPosition()
       return
     }
-    state.interfaceType = 'pointer'
+    state.interfaceType = 'mouse'
 
     const olPixel = map.getEventPixel(e)
     const pixel = { x: olPixel[0], y: olPixel[1] }
@@ -242,10 +242,10 @@ export const createEditMode = ({ map, manager, options }) => {
     if (e.pointerType !== 'mouse') {
       return
     }
-    if (state.interfaceType === 'pointer') {
+    if (state.interfaceType === 'mouse') {
       return
     }
-    state.interfaceType = 'pointer'
+    state.interfaceType = 'mouse'
     touchHandler.hide()
   }
 

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

@@ -81,7 +81,11 @@ export const manifest = {
         id: 'drawDeletePoint',
         label: 'Delete point',
         iconId: 'trash',
-        enableWhen: ({ pluginState }) => pluginState.selectedVertexIndex >= 0 && pluginState.numVertices > 2,
+        enableWhen: ({ pluginState }) => {
+          if (pluginState.selectedVertexIndex < 0) { return false }
+          const isPolygon = pluginState.feature?.geometry?.type === 'Polygon'
+          return isPolygon ? pluginState.numVertices > 3 : pluginState.numVertices > 2 // NOSONAR
+        },
         hiddenWhen: ({ pluginState }) => pluginState.mode !== 'edit_vertex'
       }],
       mobile: { slot: 'bottom-right' },

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

@@ -9,7 +9,7 @@ const initialState = {
   hasSnapLayers: false
 }
 
-const setMode = (state, payload) => ({ ...state, mode: payload })
+const setMode = (state, payload) => ({ ...state, mode: payload, numVertices: null })
 
 const setFeature = (state, payload) => ({
   ...state,

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