@defra/interactive-map 0.0.36-alpha → 0.0.38-alpha

package/plugins/draw/src/adapters/openlayers/snap/snapEngine.test.js

@@ -0,0 +1,232 @@
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorTileLayer from 'ol/layer/VectorTile.js'
+import VectorSource from 'ol/source/Vector.js'
+import { createSnapEngine } from './snapEngine.js'
+import { polygonFeature } from '../__helpers__/harness.js'
+
+// One tile covering [0,0]–[4096,4096]: band for clip artefacts = 256 units from an
+// edge, axis-alignment tolerance = 2 units. Resolution 1 → 12px radius = 12 units.
+const tileGrid = {
+  getZForResolution: jest.fn(() => 10),
+  getTileCoordForCoordAndZ: jest.fn(() => [10, 0, 0]),
+  getTileCoordExtent: jest.fn(() => [0, 0, 4096, 4096])
+}
+
+const createEngineMap = () => {
+  const layers = []
+  return {
+    layers,
+    getLayers: () => ({ forEach: (cb) => layers.forEach(cb) }),
+    getView: () => ({ getResolution: () => 1, getProjection: () => 'EPSG:3857' }),
+    getPixelFromCoordinate: jest.fn((c) => [c[0], c[1]]),
+    forEachFeatureAtPixel: jest.fn()
+  }
+}
+
+const renderFeature = (type, flat, ends = null, mapboxLayer = { id: 'boundaries', type: 'line' }) => ({
+  getType: () => type,
+  getFlatCoordinates: () => flat,
+  getEnds: () => ends,
+  get: (key) => (key === 'mapbox-layer' ? mapboxLayer : undefined)
+})
+
+// map.forEachFeatureAtPixel serves two callers: candidate iteration (hitTolerance =
+// snap radius) and the invisible-fill probe (hitTolerance 2, returns the callback result)
+const setupVT = ({ features, withTileGrid = true, fillNeighbour = false }) => {
+  const map = createEngineMap()
+  const vtLayer = new VectorTileLayer({})
+  if (withTileGrid) {
+    jest.spyOn(vtLayer, 'getSource').mockReturnValue({ getTileGrid: () => tileGrid, getProjection: () => null })
+  }
+  map.layers.push(vtLayer)
+  map.forEachFeatureAtPixel.mockImplementation((pixel, visit, opts) => {
+    // Honour the layerFilter the way OL does — only tile layers are consulted
+    if (!opts.layerFilter(vtLayer)) {
+      return undefined
+    }
+    if (opts.hitTolerance === 2) {
+      return fillNeighbour ? visit({ get: () => ({ id: 'fills' }) }) : undefined
+    }
+    features.forEach((f) => visit(f, vtLayer))
+    return undefined
+  })
+  return { map, engine: createSnapEngine(map, ['boundaries', 'fills']) }
+}
+
+afterEach(() => jest.clearAllMocks())
+
+describe('plain vector layers', () => {
+  test('snaps to features near the query, skipping layers without a source', () => {
+    const map = createEngineMap()
+    const source = new VectorSource()
+    source.addFeature(polygonFeature([[0, 0], [100, 0], [100, 100], [0, 0]]))
+    const engine = createSnapEngine(map, [new VectorLayer({ source }), new VectorLayer({})])
+    expect(engine.query([98, 2], 12)).toEqual({ type: 'vertex', coord: [100, 0] })
+    expect(engine.query([500, 500], 12)).toBeNull()
+  })
+
+  test('setLayers swaps targets at runtime and ignores unsupported entries', () => {
+    const map = createEngineMap()
+    const source = new VectorSource()
+    source.addFeature(polygonFeature([[0, 0], [100, 0], [100, 100], [0, 0]]))
+    const engine = createSnapEngine(map, [new VectorLayer({ source }), 42])
+    expect(engine.query([98, 2], 12)).not.toBeNull()
+    engine.setLayers([])
+    expect(engine.query([98, 2], 12)).toBeNull()
+  })
+
+  test('no resolution (map not ready) means no snapping', () => {
+    const map = createEngineMap()
+    map.getView = () => ({ getResolution: () => undefined })
+    expect(createSnapEngine(map, ['boundaries']).query([0, 0], 12)).toBeNull()
+  })
+
+  test('defaults to an empty snap-layer set when none are configured', () => {
+    const map = createEngineMap()
+    expect(createSnapEngine(map).query([0, 0], 12)).toBeNull()
+  })
+
+  test('setLayers tolerates a null layer list', () => {
+    const map = createEngineMap()
+    const source = new VectorSource()
+    source.addFeature(polygonFeature([[0, 0], [100, 0], [100, 100], [0, 0]]))
+    const engine = createSnapEngine(map, [new VectorLayer({ source })])
+    expect(engine.query([98, 2], 12)).not.toBeNull()
+    engine.setLayers(null)
+    expect(engine.query([98, 2], 12)).toBeNull()
+  })
+})
+
+describe('vector-tile layers', () => {
+  test('snaps to configured tile layers only, mid-tile axis alignment is fine', () => {
+    // Horizontal segment mid-tile: axis-aligned but nowhere near a tile edge → real geometry
+    const { engine } = setupVT({
+      features: [
+        renderFeature('LineString', [500, 2000, 1500, 2000]),
+        renderFeature('LineString', [590, 2000, 610, 2000], null, { id: 'not-configured', type: 'line' })
+      ]
+    })
+    expect(engine.query([600, 2005], 12)).toEqual({ type: 'edge', coord: [600, 2000] })
+  })
+
+  test('without any tile layer on the map, tile snapping is skipped entirely', () => {
+    const map = createEngineMap()
+    const engine = createSnapEngine(map, ['boundaries'])
+    expect(engine.query([600, 2005], 12)).toBeNull()
+    expect(map.forEachFeatureAtPixel).not.toHaveBeenCalled()
+  })
+
+  test('clip artefacts are rejected: axis-aligned segments hugging a tile edge', () => {
+    // Vertical segment at x=1, well inside the 256-unit band of the tile's left edge
+    const { engine } = setupVT({ features: [renderFeature('LineString', [1, 500, 1, 1500])] })
+    expect(engine.query([5, 1000], 12)).toBeNull()
+  })
+
+  test('clip-cut vertices are rejected while their real edges survive', () => {
+    // The vertex at [1,1000] ends a clip segment (vertical along x=1); the horizontal
+    // edge leaving it at y=1000 is real geometry. The vertex would normally beat the
+    // edge — filtering it lets the edge win.
+    const { engine } = setupVT({ features: [renderFeature('LineString', [1, 500, 1, 1000, 800, 1000])] })
+    expect(engine.query([6, 1004], 12)).toMatchObject({ type: 'edge' })
+  })
+
+  test('without a tile grid the clip filter degrades gracefully and keeps candidates', () => {
+    const { engine } = setupVT({
+      features: [renderFeature('LineString', [1, 500, 1, 1500])],
+      withTileGrid: false
+    })
+    expect(engine.query([5, 1000], 12)).toEqual({ type: 'edge', coord: [1, 1000] })
+  })
+
+  test('the tile boundary state is computed once per layer per query', () => {
+    const { engine } = setupVT({
+      features: [
+        renderFeature('LineString', [500, 2000, 1500, 2000]),
+        renderFeature('LineString', [500, 2020, 1500, 2020])
+      ]
+    })
+    engine.query([600, 2005], 12)
+    expect(tileGrid.getZForResolution).toHaveBeenCalledTimes(1)
+  })
+
+  test('the boundary state is reused across multiple candidates from the same tile layer', () => {
+    const { engine } = setupVT({
+      features: [
+        renderFeature('LineString', [500, 2000, 1500, 2000]),
+        renderFeature('LineString', [500, 2005, 1500, 2005])
+      ]
+    })
+    expect(engine.query([600, 2002], 12)).not.toBeNull() // both features yield a candidate
+    expect(tileGrid.getZForResolution).toHaveBeenCalledTimes(1)
+  })
+
+  test('open-line endpoints test only the neighbour that exists', () => {
+    // Endpoint [2000,2000] has a null previous neighbour; the clip filter must skip it
+    const { engine } = setupVT({ features: [renderFeature('LineString', [2000, 2000, 3000, 2000])] })
+    expect(engine.query([2002, 2001], 12)).toEqual({ type: 'vertex', coord: [2000, 2000] })
+  })
+
+  test('a tile point candidate without adjacency data snaps as a vertex', () => {
+    const { engine } = setupVT({ features: [renderFeature('Point', [2000, 2000])] })
+    expect(engine.query([2001, 2000], 12)).toEqual({ type: 'vertex', coord: [2000, 2000] })
+  })
+
+  test('non-tile layers present on the map are ignored when gathering tile layers', () => {
+    const { engine, map } = setupVT({ features: [renderFeature('LineString', [500, 2000, 1500, 2000])] })
+    map.layers.unshift(new VectorLayer({})) // a non-tile layer sits in the stack
+    expect(engine.query([600, 2005], 12)).toEqual({ type: 'edge', coord: [600, 2000] })
+  })
+})
+
+describe('invisible shared fill boundaries', () => {
+  const fillSquare = renderFeature(
+    'Polygon', [1000, 1000, 3000, 1000, 3000, 3000, 1000, 3000], [8], { id: 'fills', type: 'fill' })
+
+  test('an edge with the same fill on both sides is skipped; a visible outer edge snaps', () => {
+    const invisible = setupVT({ features: [fillSquare], fillNeighbour: true })
+    expect(invisible.engine.query([2000, 995], 12)).toBeNull()
+
+    const visible = setupVT({ features: [fillSquare], fillNeighbour: false })
+    expect(visible.engine.query([2000, 995], 12)).toEqual({ type: 'edge', coord: [2000, 1000] })
+  })
+
+  test('a cursor already on the edge, or an unprojectable probe, skips the direction check', () => {
+    const onEdge = setupVT({ features: [fillSquare], fillNeighbour: true })
+    expect(onEdge.engine.query([2000, 1000], 12)).toEqual({ type: 'edge', coord: [2000, 1000] })
+
+    const blindProbe = setupVT({ features: [fillSquare], fillNeighbour: true })
+    blindProbe.map.getPixelFromCoordinate.mockReturnValueOnce([2000, 995]).mockReturnValueOnce(null)
+    expect(blindProbe.engine.query([2000, 995], 12)).toEqual({ type: 'edge', coord: [2000, 1000] })
+  })
+})
+
+test('debug logging traces queries, candidates and filtering when enabled', () => {
+  const log = jest.spyOn(console, 'log').mockImplementation(() => {})
+  globalThis.DEBUG_SNAP_VISIBILITY = true
+  try {
+    const { engine } = setupVT({ features: [renderFeature('LineString', [1, 500, 1, 1500])] })
+    engine.query([5, 1000], 12)
+    const topics = log.mock.calls.map(([topic]) => topic)
+    expect(topics).toContain('[snap-query]')
+    expect(topics).toContain('[snap-candidate-found]')
+    expect(topics).toContain('[snap-filtered] tile clip artefact')
+  } finally {
+    delete globalThis.DEBUG_SNAP_VISIBILITY
+    log.mockRestore()
+  }
+})
+
+test('debug logging traces invisible-fill filtering when enabled', () => {
+  const log = jest.spyOn(console, 'log').mockImplementation(() => {})
+  globalThis.DEBUG_SNAP_VISIBILITY = true
+  try {
+    const fillSquare = renderFeature(
+      'Polygon', [1000, 1000, 3000, 1000, 3000, 3000, 1000, 3000], [8], { id: 'fills', type: 'fill' })
+    const { engine } = setupVT({ features: [fillSquare], fillNeighbour: true })
+    engine.query([2000, 995], 12)
+    expect(log.mock.calls.map(([topic]) => topic)).toContain('[snap-filtered] invisible fill boundary')
+  } finally {
+    delete globalThis.DEBUG_SNAP_VISIBILITY
+    log.mockRestore()
+  }
+})

package/plugins/draw/src/adapters/openlayers/snap/snapGeometry.js

@@ -0,0 +1,198 @@
+const dist2 = (a, b) => {
+  const dx = a[0] - b[0]
+  const dy = a[1] - b[1]
+  return dx * dx + dy * dy
+}
+
+const closestPointOnSegment = (p, a, b) => {
+  const dx = b[0] - a[0]
+  const dy = b[1] - a[1]
+  const lenSq = dx * dx + dy * dy
+  if (lenSq === 0) {
+    return [a[0], a[1]]
+  }
+  const t = Math.max(0, Math.min(1, ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / lenSq))
+  return [a[0] + t * dx, a[1] + t * dy]
+}
+
+// Exported for the snap engine to merge candidates across features/layers
+export const bestOf = (current, candidate) => better(current, candidate) ? candidate : current
+
+const better = (a, b) => {
+  if (!a) {
+    return !!b
+  }
+  if (!b) {
+    return false
+  }
+  // Vertex always beats edge — only compare distance within the same type
+  if (a.type === 'edge' && b.type === 'vertex') {
+    return true
+  }
+  if (a.type === 'vertex' && b.type === 'edge') {
+    return false
+  }
+  return b.distSq < a.distSq
+}
+
+// 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
+  const edgeCount = isClosedRing ? n : n - 1
+
+  for (let i = 0; i < n; i++) {
+    const v = coords[i]
+    const dSq = dist2(query, v)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'vertex', coord: [v[0], v[1]], distSq: dSq })
+    }
+  }
+
+  for (let i = 0; i < edgeCount; i++) {
+    const a = coords[i]
+    const b = coords[(i + 1) % n]
+    const pt = closestPointOnSegment(query, a, b)
+    const dSq = dist2(query, pt)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'edge', coord: pt, distSq: dSq })
+    }
+  }
+
+  return best
+}
+
+// Edge candidates carry their segment endpoints (seg) and vertex candidates their
+// neighbouring vertices (adjacent) so the snap engine can test segment orientation —
+// used to recognise tile clip artefacts, which are always axis-aligned in tile space.
+const getBestEdge = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
+  let best = null
+  for (let i = 0; i < edgeCount; i++) {
+    const ai = start + i * 2
+    const bi = start + ((i + 1) % numPairs) * 2
+    const a = [flat[ai], flat[ai + 1]]
+    const b = [flat[bi], flat[bi + 1]]
+    const pt = closestPointOnSegment(query, a, b)
+    const dSq = dist2(query, pt)
+    if (dSq <= toleranceSq) {
+      best = bestOf(best, { type: 'edge', coord: pt, distSq: dSq, seg: [a, b] })
+    }
+  }
+  return best
+}
+
+// Neighbouring vertex indices; closed rings (edgeCount === numPairs) wrap around the ring
+const adjacentIndices = (i, numPairs, wraps) => {
+  const prev = i > 0 ? i - 1 : numPairs - 1
+  const next = i < numPairs - 1 ? i + 1 : 0
+  return [
+    (i > 0 || wraps) ? prev : null,
+    (i < numPairs - 1 || wraps) ? next : null
+  ]
+}
+
+const getBestVertex = (flat, start, numPairs, edgeCount, query, toleranceSq) => {
+  const wraps = edgeCount === numPairs
+  const coordAt = (i) => i === null ? null : [flat[start + i * 2], flat[start + i * 2 + 1]]
+  let best = null
+  for (let i = 0; i < numPairs; i++) {
+    const v = coordAt(i)
+    const dSq = dist2(query, v)
+    if (dSq <= toleranceSq) {
+      const [prevIdx, nextIdx] = adjacentIndices(i, numPairs, wraps)
+      const adjacent = [coordAt(prevIdx), coordAt(nextIdx)]
+      best = bestOf(best, { type: 'vertex', coord: v, distSq: dSq, adjacent })
+    }
+  }
+  return best
+}
+
+// Returns the best vertex and best edge separately so the caller can filter one
+// (e.g. a clip-artefact vertex) while still snapping to the other.
+const testFlatCoords = (flat, start, end, query, toleranceSq, isClosedRing) => {
+  const numPairs = (end - start) / 2
+  const edgeCount = isClosedRing ? numPairs : numPairs - 1
+  return {
+    vertex: getBestVertex(flat, start, numPairs, edgeCount, query, toleranceSq),
+    edge: getBestEdge(flat, start, numPairs, edgeCount, query, toleranceSq)
+  }
+}
+
+const olGeomHandlers = {
+  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) => {
+    return testCoords(geom.getCoordinates(), query, toleranceSq, false)
+  },
+  linearRing: (geom, query, toleranceSq) => {
+    return testCoords(geom.getCoordinates(), query, toleranceSq, true)
+  },
+  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) => {
+    let best = null
+    for (const line of geom.getCoordinates()) {
+      best = bestOf(best, testCoords(line, query, toleranceSq, false))
+    }
+    return best
+  },
+  multiPolygon: (geom, query, toleranceSq) => {
+    let best = null
+    for (const polygon of geom.getCoordinates()) {
+      for (const ring of polygon) {
+        best = bestOf(best, testCoords(ring, query, toleranceSq, true))
+      }
+    }
+    return best
+  }
+}
+
+export const testOLFeature = (feature, query, toleranceSq) => {
+  const geom = feature.getGeometry()
+  if (!geom) { return null }
+  const rawType = geom.getType()
+  const handler = olGeomHandlers[rawType[0].toLowerCase() + rawType.slice(1)]
+  return handler ? handler(geom, query, toleranceSq) : null
+}
+
+// Returns an array of candidates (best vertex and best edge, when within tolerance)
+// rather than a single winner, so the snap engine can filter clip artefacts per
+// candidate and still fall back to the other.
+export const testRenderFeature = (feature, query, toleranceSq) => {
+  const type = feature.getType()
+  const flat = feature.getFlatCoordinates()
+  let bestVertex = null
+  let bestEdge = null
+
+  if (type === 'Point') {
+    const dSq = dist2(query, flat)
+    if (dSq <= toleranceSq) {
+      bestVertex = { type: 'vertex', coord: [flat[0], flat[1]], distSq: dSq }
+    }
+  } else if (type === 'LineString') {
+    ({ vertex: bestVertex, edge: bestEdge } = testFlatCoords(flat, 0, flat.length, query, toleranceSq, false))
+  } else if (type === 'Polygon' || type === 'MultiLineString') {
+    const ends = feature.getEnds()
+    let start = 0
+    const isClosedRing = type === 'Polygon'
+    for (const end of ends) {
+      const pair = testFlatCoords(flat, start, end, query, toleranceSq, isClosedRing)
+      bestVertex = bestOf(bestVertex, pair.vertex)
+      bestEdge = bestOf(bestEdge, pair.edge)
+      start = end
+    }
+  } else {
+    // MultiPoint / unknown — no snap candidates
+  }
+
+  return [bestVertex, bestEdge].filter(Boolean)
+}

package/plugins/draw/src/adapters/openlayers/snap/snapGeometry.test.js

@@ -0,0 +1,136 @@
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import LineString from 'ol/geom/LineString.js'
+import LinearRing from 'ol/geom/LinearRing.js'
+import Polygon from 'ol/geom/Polygon.js'
+import MultiLineString from 'ol/geom/MultiLineString.js'
+import MultiPolygon from 'ol/geom/MultiPolygon.js'
+import MultiPoint from 'ol/geom/MultiPoint.js'
+import { bestOf, testOLFeature, testRenderFeature } from './snapGeometry.js'
+
+const TOL = 100 // 10px tolerance, squared
+
+describe('bestOf candidate ranking', () => {
+  const vertex = (distSq) => ({ type: 'vertex', distSq })
+  const edge = (distSq) => ({ type: 'edge', distSq })
+
+  test('a vertex always beats an edge, regardless of distance', () => {
+    expect(bestOf(edge(1), vertex(99))).toEqual(vertex(99))
+    expect(bestOf(vertex(99), edge(1))).toEqual(vertex(99))
+  })
+
+  test('within the same type the closer candidate wins', () => {
+    expect(bestOf(vertex(50), vertex(10))).toEqual(vertex(10))
+    expect(bestOf(edge(10), edge(50))).toEqual(edge(10))
+  })
+
+  test('null candidates never win', () => {
+    expect(bestOf(null, vertex(50))).toEqual(vertex(50))
+    expect(bestOf(vertex(50), null)).toEqual(vertex(50))
+    expect(bestOf(null, null)).toBeNull()
+  })
+})
+
+describe('testOLFeature', () => {
+  test('points snap as vertices within tolerance only', () => {
+    const feature = new Feature(new Point([100, 100]))
+    expect(testOLFeature(feature, [103, 104], TOL)).toEqual({ type: 'vertex', coord: [100, 100], distSq: 25 })
+    expect(testOLFeature(feature, [200, 200], TOL)).toBeNull()
+  })
+
+  test('lines snap to the nearest vertex, or to the closest point on an edge', () => {
+    const feature = new Feature(new LineString([[0, 0], [100, 0]]))
+    expect(testOLFeature(feature, [2, 2], TOL)).toMatchObject({ type: 'vertex', coord: [0, 0] })
+    expect(testOLFeature(feature, [50, 5], TOL)).toMatchObject({ type: 'edge', coord: [50, 0] })
+  })
+
+  test('a query beyond the segment end clamps to the endpoint', () => {
+    const feature = new Feature(new LineString([[0, 0], [100, 0]]))
+    expect(testOLFeature(feature, [106, 0], TOL)).toMatchObject({ coord: [100, 0] })
+  })
+
+  test('polygons snap on the closing edge and skip the duplicated closing vertex', () => {
+    const feature = new Feature(new Polygon([[[0, 0], [100, 0], [100, 100], [0, 100], [0, 0]]]))
+    // Closing edge [0,100] → [0,0]
+    expect(testOLFeature(feature, [5, 50], TOL)).toMatchObject({ type: 'edge', coord: [0, 50] })
+    // Exactly on the first/closing vertex — one vertex candidate, not two
+    expect(testOLFeature(feature, [0, 0], TOL)).toMatchObject({ type: 'vertex', coord: [0, 0], distSq: 0 })
+  })
+
+  test('multi-part geometries test every part and ring', () => {
+    const multiLine = new Feature(new MultiLineString([[[0, 0], [10, 0]], [[200, 200], [300, 200]]]))
+    expect(testOLFeature(multiLine, [201, 201], TOL)).toMatchObject({ type: 'vertex', coord: [200, 200] })
+
+    const ring = new Feature(new LinearRing([[0, 0], [50, 0], [50, 50], [0, 0]]))
+    expect(testOLFeature(ring, [25, 25], TOL)).toMatchObject({ type: 'edge', coord: [25, 25] })
+
+    const multiPolygon = new Feature(new MultiPolygon([
+      [[[0, 0], [10, 0], [10, 10], [0, 0]]],
+      [[[200, 200], [300, 200], [300, 300], [200, 200]]]
+    ]))
+    expect(testOLFeature(multiPolygon, [202, 201], TOL)).toMatchObject({ type: 'vertex', coord: [200, 200] })
+  })
+
+  test('a zero-length segment degrades to its start point', () => {
+    const feature = new Feature(new LineString([[10, 10], [10, 10]]))
+    expect(testOLFeature(feature, [12, 10], TOL)).toMatchObject({ type: 'vertex', coord: [10, 10] })
+  })
+
+  test('unsupported or missing geometries yield no candidate', () => {
+    expect(testOLFeature(new Feature(new MultiPoint([[0, 0]])), [0, 0], TOL)).toBeNull()
+    expect(testOLFeature(new Feature(), [0, 0], TOL)).toBeNull()
+  })
+})
+
+describe('testRenderFeature (vector-tile render features)', () => {
+  const renderFeature = (type, flat, ends = null) => ({
+    getType: () => type,
+    getFlatCoordinates: () => flat,
+    getEnds: () => ends
+  })
+
+  test('points return a single vertex candidate within tolerance', () => {
+    expect(testRenderFeature(renderFeature('Point', [10, 10]), [12, 10], TOL))
+      .toEqual([{ type: 'vertex', coord: [10, 10], distSq: 4 }])
+    expect(testRenderFeature(renderFeature('Point', [10, 10]), [100, 100], TOL)).toEqual([])
+  })
+
+  test('lines return best vertex AND best edge, with adjacency/segment metadata', () => {
+    const line = renderFeature('LineString', [0, 0, 100, 0, 100, 100])
+    const [vertex, edge] = testRenderFeature(line, [98, 4], TOL)
+    expect(vertex).toMatchObject({ type: 'vertex', coord: [100, 0], adjacent: [[0, 0], [100, 100]] })
+    expect(edge).toMatchObject({ type: 'edge', seg: [[100, 0], [100, 100]] })
+  })
+
+  test('open line ends have null adjacency on the open side', () => {
+    const line = renderFeature('LineString', [0, 0, 100, 0])
+    const [vertex] = testRenderFeature(line, [1, 1], TOL)
+    expect(vertex).toMatchObject({ coord: [0, 0], adjacent: [null, [100, 0]] })
+  })
+
+  test('the far end of an open line also reports a null neighbour on its open side', () => {
+    const line = renderFeature('LineString', [0, 0, 100, 0])
+    const [vertex] = testRenderFeature(line, [99, 1], TOL)
+    expect(vertex).toMatchObject({ coord: [100, 0], adjacent: [[0, 0], null] })
+  })
+
+  test('polygon rings (no duplicated closing coord in tiles) wrap edges and adjacency', () => {
+    const square = renderFeature('Polygon', [0, 0, 100, 0, 100, 100, 0, 100], [8])
+    const candidates = testRenderFeature(square, [2, 52], TOL)
+    expect(candidates).toEqual([expect.objectContaining({ type: 'edge', coord: [0, 52], seg: [[0, 100], [0, 0]] })])
+
+    const [vertex] = testRenderFeature(square, [1, 1], TOL)
+    expect(vertex).toMatchObject({ coord: [0, 0], adjacent: [[0, 100], [100, 0]] }) // wraps to last vertex
+  })
+
+  test('multi-line render features honour their part boundaries', () => {
+    const twoParts = renderFeature('MultiLineString', [0, 0, 10, 0, 200, 200, 300, 200], [4, 8])
+    // No phantom edge between [10,0] and [200,200] — a query midway finds nothing
+    expect(testRenderFeature(twoParts, [105, 100], TOL)).toEqual([])
+    expect(testRenderFeature(twoParts, [201, 200], TOL)[0]).toMatchObject({ coord: [200, 200] })
+  })
+
+  test('unsupported render feature types return no candidates', () => {
+    expect(testRenderFeature(renderFeature('MultiPoint', [0, 0]), [0, 0], TOL)).toEqual([])
+  })
+})

package/plugins/draw/src/adapters/openlayers/snap/snapIndicator.js

@@ -0,0 +1,81 @@
+/**
+ * Snap indicator — a single OL VectorLayer that shows a circle at the active
+ * snap candidate position.
+ *
+ * Vertex snap → orange semi-transparent circle (snapVertex color)
+ * Edge snap   → blue semi-transparent circle (snapEdge color)
+ *
+ * Uses Style.renderer (single canvas call) so the circle renders correctly
+ * at fractional CSS scale factors.
+ */
+
+import VectorLayer from 'ol/layer/Vector.js'
+import VectorSource from 'ol/source/Vector.js'
+import Feature from 'ol/Feature.js'
+import Point from 'ol/geom/Point.js'
+import { Style } from 'ol/style.js'
+
+const RADIUS_PX = 10
+
+const makeRenderer = (color) => (coords, state) => {
+  const ctx = state.context
+  const [cx, cy] = coords
+  ctx.beginPath()
+  ctx.arc(cx, cy, RADIUS_PX * state.pixelRatio, 0, Math.PI * 2)
+  ctx.fillStyle = color
+  ctx.fill()
+}
+
+const makeStyles = (colors) => ({
+  vertex: new Style({ renderer: makeRenderer(colors.snapVertex) }),
+  edge: new Style({ renderer: makeRenderer(colors.snapEdge) })
+})
+
+export const createSnapIndicator = (map, colors) => {
+  let styles = makeStyles(colors)
+  const source = new VectorSource()
+  const layer = new VectorLayer({
+    source,
+    style: (f) => styles[f.get('snapType')] ?? null,
+    zIndex: 200,
+    updateWhileAnimating: true,
+    updateWhileInteracting: true
+  })
+  map.addLayer(layer)
+
+  const feature = new Feature()
+  let showing = false
+
+  return {
+    show (coord, type) {
+      feature.setGeometry(new Point(coord))
+      feature.set('snapType', type, true)
+      if (showing) {
+        source.changed()
+      } else {
+        source.addFeature(feature)
+        showing = true
+      }
+    },
+
+    hide () {
+      if (!showing) {
+        return
+      }
+      source.clear()
+      showing = false
+    },
+
+    updateColors (newColors) {
+      styles = makeStyles(newColors)
+      if (showing) {
+        source.changed()
+      }
+    },
+
+    remove () {
+      source.clear()
+      map.removeLayer(layer)
+    }
+  }
+}