@defra/interactive-map 0.0.50-alpha → 0.0.51-apha

package/providers/beta/openlayers/src/utils/symbolImages.js

@@ -1,18 +1,36 @@
 /**
  * The OL "last mile" for symbolRegistry's rasterised symbol images: turns the ImageData
- * rasteriseSymbolImage() produces into something ol/style/Icon can render (a canvas),
- * and caches it by the same content-hash imageId symbolRegistry already computes — so
- * repeated resolves of the same style/theme/pixel-ratio combination are free after the
- * first. Unlike MapLibre (map.addImage), OL has no map-level image registry of its own,
- * so this cache lives at the module level here instead.
+ * rasteriseSymbolImage() produces into something OL can render, cached by the same imageId
+ * symbolRegistry computes. OL has no map-level image registry like MapLibre's map.addImage,
+ * so this cache lives at the module level instead.
+ *
+ * Two consumers need two different shapes from the same ImageData: highlightFeatures.js builds
+ * its own ol/style/Icon directly, so it wants a raw <canvas> (getOrCreateSymbolImage/
+ * getCachedSymbolImage); OpenLayersDataset.flatStyle's icon-src needs a data URI string instead.
  */
 
+// Fixed oversampling ratio, unrelated to the map's actual pixelRatio — icon-scale genuinely
+// decouples a symbol's on-screen size from its native pixel detail, so one fixed high-detail
+// raster stays crisp at any pixelRatio with no re-rasterisation needed on resize.
+export const SYMBOL_RASTER_PIXEL_RATIO = 3
+
 const imageCache = new Map() // imageId → HTMLCanvasElement
+const dataUriCache = new Map() // imageId → data URI string
+const activeImageMap = new Map() // normalId → activeId
+const selectedImageMap = new Map() // normalId → selectedId
 
 /** Synchronous lookup for style functions (which must be synchronous) — undefined until
  * getOrCreateSymbolImage() has resolved it at least once. */
 export const getCachedSymbolImage = (imageId) => imageCache.get(imageId)
 
+/**
+ * Reverse-map a symbol's normal (base) imageId to its active/selected variant, mirroring
+ * MapLibre's own active/selected image maps. Used by highlightFeatures.js to highlight a
+ * dataset symbol point, which (unlike a drawn point) has no active/selected id of its own.
+ */
+export const getActiveSymbolImageId = (normalId) => activeImageMap.get(normalId) ?? null
+export const getSelectedSymbolImageId = (normalId) => selectedImageMap.get(normalId) ?? null
+
 /**
  * Rasterise-once-cache-forever: draws the given ImageData onto a canvas the first time
  * imageId is seen, and returns the cached canvas on every subsequent call.
@@ -34,7 +52,63 @@ export const getOrCreateSymbolImage = (imageId, imageData) => {
   return canvas
 }
 
+/** Synchronous lookup for OpenLayersDataset.flatStyle (a synchronous getter) — undefined
+ * until registerSymbol() has resolved it at least once. */
+export const getCachedSymbolDataUri = (imageId) => dataUriCache.get(imageId)
+
+/**
+ * Rasterise-once-cache-forever: resolves and caches one symbol's data URI for flatStyle's
+ * icon-src, plus its active/selected variants so highlightFeatures.js can highlight a dataset
+ * symbol point the same way it already does for a drawn one.
+ * @param {Object} style - Dataset style with symbol/symbolSvgContent properties
+ * @param {Object} mapStyle - Current map style config
+ * @param {Object} symbolRegistry
+ * @param {number} pixelRatio - the map's actual current pixelRatio
+ * @returns {Promise<void>}
+ */
+export const registerSymbol = async (style, mapStyle, symbolRegistry, pixelRatio) => {
+  const normalId = symbolRegistry.getSymbolImageId(style, mapStyle, false, pixelRatio)
+  if (!normalId) {
+    return
+  }
+  const activeId = symbolRegistry.getSymbolImageId(style, mapStyle, true, pixelRatio)
+  if (activeId) {
+    activeImageMap.set(normalId, activeId)
+  }
+
+  await Promise.all(['normal', 'active', 'selected'].map(async (variant) => {
+    const imageId = variant === 'active' ? activeId : normalId
+    if (variant !== 'selected' && (!imageId || imageCache.has(imageId))) {
+      return
+    }
+    const result = await symbolRegistry.rasteriseSymbolImage(style, mapStyle, variant, pixelRatio)
+    if (!result) {
+      return
+    }
+    if (variant === 'selected') {
+      selectedImageMap.set(normalId, result.imageId)
+    }
+    if (!imageCache.has(result.imageId)) {
+      const canvas = getOrCreateSymbolImage(result.imageId, result.imageData)
+      if (variant === 'normal') {
+        dataUriCache.set(result.imageId, canvas.toDataURL())
+      }
+    }
+  }))
+}
+
+/** Register symbol data URIs for the given pre-resolved style configs, in parallel. */
+export const registerSymbols = async (styleArray, mapStyle, symbolRegistry, pixelRatio) => {
+  if (!styleArray.length) {
+    return
+  }
+  await Promise.all(styleArray.map(style => registerSymbol(style, mapStyle, symbolRegistry, pixelRatio)))
+}
+
 /** Mainly for testing — clears every cached image. */
 export const clearSymbolImageCache = () => {
   imageCache.clear()
+  dataUriCache.clear()
+  activeImageMap.clear()
+  selectedImageMap.clear()
 }

package/providers/beta/openlayers/src/utils/symbolImages.test.js

@@ -1,7 +1,17 @@
-import { getCachedSymbolImage, getOrCreateSymbolImage, clearSymbolImageCache } from './symbolImages.js'
+import { getCachedSymbolImage, getOrCreateSymbolImage, clearSymbolImageCache, registerSymbol, registerSymbols, getCachedSymbolDataUri, getActiveSymbolImageId, getSelectedSymbolImageId } from './symbolImages.js'
+
+const MAP_STYLE = { id: 'outdoor' }
 
 const imageData = (width, height) => ({ width, height })
 
+const makeSymbolRegistry = () => ({
+  getSymbolImageId: jest.fn((style, mapStyle, active, pixelRatio) => `symbol-${style.symbol}-${pixelRatio}x${active ? '-active' : ''}`),
+  rasteriseSymbolImage: jest.fn(async (style, mapStyle, variant, pixelRatio) => ({
+    imageId: `symbol-${style.symbol}-${pixelRatio}x${variant === 'active' ? '-active' : variant === 'selected' ? '-selected' : ''}`,
+    imageData: imageData(20, 20)
+  }))
+})
+
 beforeEach(() => {
   clearSymbolImageCache()
   // Memoized per-canvas so `canvas.getContext()` returns the same mock object on repeat
@@ -11,6 +21,9 @@ beforeEach(() => {
     this._ctx ??= { putImageData: jest.fn() }
     return this._ctx
   })
+  HTMLCanvasElement.prototype.toDataURL = jest.fn(function () {
+    return `data:image/png;base64,mock-${this.width}x${this.height}`
+  })
 })
 
 describe('getCachedSymbolImage', () => {
@@ -55,4 +68,101 @@ describe('clearSymbolImageCache', () => {
     const second = getOrCreateSymbolImage('symbol-f', imageData(10, 10))
     expect(second).not.toBe(first)
   })
+
+  it('also clears the data URI cache', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    clearSymbolImageCache()
+    expect(getCachedSymbolDataUri('symbol-pin-1x')).toBeUndefined()
+  })
+})
+
+describe('registerSymbol', () => {
+  it('caches a data URI built from the rasterised ImageData', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    expect(getCachedSymbolDataUri('symbol-pin-1x')).toBe('data:image/png;base64,mock-20x20')
+  })
+
+  it('rasterises at the given pixelRatio, not a fixed constant', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 3)
+    expect(symbolRegistry.rasteriseSymbolImage).toHaveBeenCalledWith({ symbol: 'pin' }, MAP_STYLE, 'normal', 3)
+  })
+
+  it('does nothing when rasteriseSymbolImage returns null', async () => {
+    const symbolRegistry = { ...makeSymbolRegistry(), rasteriseSymbolImage: jest.fn().mockResolvedValue(null) }
+    await registerSymbol({ symbol: 'unknown' }, MAP_STYLE, symbolRegistry, 1)
+    expect(getCachedSymbolDataUri('symbol-unknown-1x')).toBeUndefined()
+  })
+
+  it('does nothing when getSymbolImageId returns null', async () => {
+    const symbolRegistry = { ...makeSymbolRegistry(), getSymbolImageId: jest.fn(() => null) }
+    await registerSymbol({ symbol: 'unknown' }, MAP_STYLE, symbolRegistry, 1)
+    expect(symbolRegistry.rasteriseSymbolImage).not.toHaveBeenCalled()
+  })
+
+  it('skips re-rasterising normal/active once cached for the same imageId — selected always re-rasterises', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    expect(symbolRegistry.rasteriseSymbolImage).toHaveBeenCalledTimes(3) // normal + active + selected
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    expect(symbolRegistry.rasteriseSymbolImage).toHaveBeenCalledTimes(4) // + selected only
+  })
+
+  it('reuses the same cached canvas getOrCreateSymbolImage builds', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    expect(getCachedSymbolImage('symbol-pin-1x')).toBeInstanceOf(HTMLCanvasElement)
+  })
+
+  it('registers the active variant, resolvable via getActiveSymbolImageId', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    expect(getActiveSymbolImageId('symbol-pin-1x')).toBe('symbol-pin-1x-active')
+    expect(getCachedSymbolImage('symbol-pin-1x-active')).toBeInstanceOf(HTMLCanvasElement)
+  })
+
+  it('registers the selected variant, resolvable via getSelectedSymbolImageId', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    expect(getSelectedSymbolImageId('symbol-pin-1x')).toBe('symbol-pin-1x-selected')
+    expect(getCachedSymbolImage('symbol-pin-1x-selected')).toBeInstanceOf(HTMLCanvasElement)
+  })
+
+  it('does not register an active variant when getSymbolImageId returns null for active', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    symbolRegistry.getSymbolImageId.mockImplementation((style, mapStyle, active) => (active ? null : 'symbol-pin-1x'))
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    expect(getActiveSymbolImageId('symbol-pin-1x')).toBeNull()
+  })
+})
+
+describe('getActiveSymbolImageId / getSelectedSymbolImageId', () => {
+  it('returns null for an imageId that has never been registered', () => {
+    expect(getActiveSymbolImageId('symbol-unseen')).toBeNull()
+    expect(getSelectedSymbolImageId('symbol-unseen')).toBeNull()
+  })
+
+  it('is cleared by clearSymbolImageCache', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbol({ symbol: 'pin' }, MAP_STYLE, symbolRegistry, 1)
+    clearSymbolImageCache()
+    expect(getActiveSymbolImageId('symbol-pin-1x')).toBeNull()
+    expect(getSelectedSymbolImageId('symbol-pin-1x')).toBeNull()
+  })
+})
+
+describe('registerSymbols', () => {
+  it('registers every config in parallel', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbols([{ symbol: 'pin' }, { symbol: 'flag' }], MAP_STYLE, symbolRegistry, 1)
+    expect(symbolRegistry.rasteriseSymbolImage).toHaveBeenCalledTimes(6) // 2 symbols × normal/active/selected
+  })
+
+  it('is a no-op for an empty array', async () => {
+    const symbolRegistry = makeSymbolRegistry()
+    await registerSymbols([], MAP_STYLE, symbolRegistry, 1)
+    expect(symbolRegistry.rasteriseSymbolImage).not.toHaveBeenCalled()
+  })
 })

package/providers/beta/openlayers/src/utils/vtTileFragments.js

@@ -1,5 +1,9 @@
-import VectorTileLayer from 'ol/layer/VectorTile.js'
 import TileState from 'ol/TileState.js'
+import GeoJSON from 'ol/format/GeoJSON.js'
+
+const CRS = 'EPSG:27700'
+const geoJsonFormat = new GeoJSON({ dataProjection: CRS, featureProjection: CRS })
+
 const toPairs = (flat, start, end) => {
   const coords = []
   for (let i = start; i < end; i += 2) {
@@ -47,17 +51,24 @@ export const renderFeatureToGeoJSON = (feature) => {
   return { type, coordinates: toPairs(flat, 0, flat.length) }
 }
 
+// draw-ol's basemap MVT tiles are RenderFeatures (no getGeometry()); tiles-backed datasets use
+// real ol/Feature instances instead — branch on which shape this actually is.
+const fragmentToGeoJSON = (feature) =>
+  feature.getGeometry ? geoJsonFormat.writeGeometryObject(feature.getGeometry()) : renderFeatureToGeoJSON(feature)
+
 /**
- * Collects all loaded VT tile fragments for a feature across all VectorTileLayers.
- * OL clips VT features at tile boundaries, so a single logical feature appears as
- * multiple RenderFeature instances (one per tile). This gathers them all so callers
- * can work with the full feature geometry rather than a single clipped fragment.
+ * Collects all loaded VT tile fragments for a feature across all VectorTile/WebGLVectorTile
+ * layers. OL clips VT features at tile boundaries, so a single logical feature appears as
+ * multiple feature instances (one per tile). This gathers them all so callers can work with
+ * the full feature geometry rather than a single clipped fragment.
  */
 export const collectTileFragments = (map, layerId, featureId, idProperty) => {
   const fragments = []
 
   map.getLayers().forEach(mapLayer => {
-    if (!(mapLayer instanceof VectorTileLayer)) {
+    // Tagged with a 'layerType' property rather than checked via `instanceof VectorTileLayer`,
+    // since a UMD consumer's independently-bundled ol copy would never match this one's class.
+    if (mapLayer.get('layerType') !== 'vectorTile') {
       return
     }
     const source = mapLayer.getSource()
@@ -70,14 +81,15 @@ export const collectTileFragments = (map, layerId, featureId, idProperty) => {
         return
       }
       tile.getFeatures().forEach(feature => {
-        if (feature.get('mapbox-layer')?.id !== layerId) {
+        const styleLayerId = feature.get('mapbox-layer')?.id ?? mapLayer.get('layerId')
+        if (styleLayerId !== layerId) {
           return
         }
         const fid = idProperty ? feature.get(idProperty) : feature.getId()
         if (String(fid) !== String(featureId)) {
           return
         }
-        fragments.push(renderFeatureToGeoJSON(feature))
+        fragments.push(fragmentToGeoJSON(feature))
       })
     })
   })

package/providers/beta/openlayers/src/utils/vtTileFragments.test.js

@@ -0,0 +1,162 @@
+import TileState from 'ol/TileState.js'
+import { renderFeatureToGeoJSON, collectTileFragments } from './vtTileFragments.js'
+
+jest.mock('ol/TileState.js', () => ({ __esModule: true, default: { LOADED: 'loaded', LOADING: 'loading' } }))
+jest.mock('ol/format/GeoJSON.js', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    writeGeometryObject: jest.fn(geom => ({ type: 'mock-real-feature', geom }))
+  }))
+}))
+
+describe('renderFeatureToGeoJSON', () => {
+  const makeRenderFeature = (type, flat, extra = {}) => ({
+    getType: () => type,
+    getFlatCoordinates: () => flat,
+    ...extra
+  })
+
+  it('converts a Point', () => {
+    const feature = makeRenderFeature('Point', [1, 2])
+    expect(renderFeatureToGeoJSON(feature)).toEqual({ type: 'Point', coordinates: [1, 2] })
+  })
+
+  it('converts a LineString', () => {
+    const feature = makeRenderFeature('LineString', [0, 0, 1, 1, 2, 2])
+    expect(renderFeatureToGeoJSON(feature)).toEqual({ type: 'LineString', coordinates: [[0, 0], [1, 1], [2, 2]] })
+  })
+
+  it('converts a Polygon using getEnds for ring boundaries', () => {
+    const flat = [0, 0, 1, 0, 1, 1, 0, 0]
+    const feature = makeRenderFeature('Polygon', flat, { getEnds: () => [8] })
+    expect(renderFeatureToGeoJSON(feature)).toEqual({
+      type: 'Polygon',
+      coordinates: [[[0, 0], [1, 0], [1, 1], [0, 0]]]
+    })
+  })
+
+  it('converts a Polygon with a hole (two rings)', () => {
+    const outer = [0, 0, 4, 0, 4, 4, 0, 0]
+    const hole = [1, 1, 2, 1, 2, 2, 1, 1]
+    const flat = [...outer, ...hole]
+    const feature = makeRenderFeature('Polygon', flat, { getEnds: () => [8, 16] })
+    const result = renderFeatureToGeoJSON(feature)
+    expect(result.coordinates).toHaveLength(2)
+    expect(result.coordinates[1]).toEqual([[1, 1], [2, 1], [2, 2], [1, 1]])
+  })
+
+  it('converts a MultiPolygon using getEndss for polygon/ring boundaries', () => {
+    const poly1 = [0, 0, 1, 0, 1, 1, 0, 0]
+    const poly2 = [2, 2, 3, 2, 3, 3, 2, 2]
+    const flat = [...poly1, ...poly2]
+    const feature = makeRenderFeature('MultiPolygon', flat, { getEndss: () => [[8], [16]] })
+    const result = renderFeatureToGeoJSON(feature)
+    expect(result.coordinates).toEqual([
+      [[[0, 0], [1, 0], [1, 1], [0, 0]]],
+      [[[2, 2], [3, 2], [3, 3], [2, 2]]]
+    ])
+  })
+
+  it('falls back to a flat pairs conversion for MultiPoint/MultiLineString', () => {
+    const feature = makeRenderFeature('MultiPoint', [0, 0, 1, 1])
+    expect(renderFeatureToGeoJSON(feature)).toEqual({ type: 'MultiPoint', coordinates: [[0, 0], [1, 1]] })
+  })
+})
+
+describe('collectTileFragments', () => {
+  const makeTile = (features, state = TileState.LOADED) => ({
+    getState: () => state,
+    getFeatures: () => features
+  })
+
+  const makeVtLayer = (layerId, sourceTiles) => ({
+    get: (key) => {
+      if (key === 'layerType') return 'vectorTile'
+      if (key === 'layerId') return layerId
+      return undefined
+    },
+    getSource: () => ({ sourceTiles_: sourceTiles })
+  })
+
+  const makeMap = (layers) => ({ getLayers: () => ({ forEach: cb => layers.forEach(cb) }) })
+
+  // draw-ol's basemap MVT convention: a RenderFeature with a 'mapbox-layer' object.
+  const makeMapboxFeature = (styleLayerId, id, flat = [1, 2]) => ({
+    get: (key) => key === 'mapbox-layer' ? { id: styleLayerId } : undefined,
+    getId: () => id,
+    getType: () => 'Point',
+    getFlatCoordinates: () => flat
+  })
+
+  // datasets-plugin tiles-backed convention: a real ol/Feature, no 'mapbox-layer', identified
+  // purely by which OL *layer* it came from (mapLayer.get('layerId')).
+  const makeDatasetFeature = (id) => ({
+    get: () => undefined,
+    getId: () => id,
+    getGeometry: () => ({ type: 'Point', coordinates: [3, 4] })
+  })
+
+  it('returns fragments for a matching mapbox-layer (basemap MVT) feature', () => {
+    const feature = makeMapboxFeature('roads', 1)
+    const layer = makeVtLayer(undefined, { a: makeTile([feature]) })
+    const result = collectTileFragments(makeMap([layer]), 'roads', 1)
+    expect(result).toEqual([{ type: 'Point', coordinates: [1, 2] }])
+  })
+
+  it('returns fragments for a matching datasets-plugin tiles-backed feature, via the layer\'s own layerId', () => {
+    const feature = makeDatasetFeature('f1')
+    const layer = makeVtLayer('existing-fields', { a: makeTile([feature]) })
+    const result = collectTileFragments(makeMap([layer]), 'existing-fields', 'f1')
+    expect(result).toEqual([{ type: 'mock-real-feature', geom: { type: 'Point', coordinates: [3, 4] } }])
+  })
+
+  it('does not call the RenderFeature-only conversion for a real ol/Feature', () => {
+    // A real ol/Feature has no getFlatCoordinates/getType — calling renderFeatureToGeoJSON on
+    // it would throw. This proves collectTileFragments takes the getGeometry() branch instead.
+    const feature = makeDatasetFeature('f1')
+    const layer = makeVtLayer('existing-fields', { a: makeTile([feature]) })
+    expect(() => collectTileFragments(makeMap([layer]), 'existing-fields', 'f1')).not.toThrow()
+  })
+
+  it('matches a dataset feature using idProperty when given', () => {
+    const feature = { get: (k) => k === 'ref' ? 'abc' : undefined, getGeometry: () => ({ type: 'Point', coordinates: [0, 0] }) }
+    const layer = makeVtLayer('existing-fields', { a: makeTile([feature]) })
+    const result = collectTileFragments(makeMap([layer]), 'existing-fields', 'abc', 'ref')
+    expect(result).toHaveLength(1)
+  })
+
+  it('skips a feature whose styleLayerId does not match', () => {
+    const feature = makeDatasetFeature('f1')
+    const layer = makeVtLayer('hedge-control', { a: makeTile([feature]) })
+    expect(collectTileFragments(makeMap([layer]), 'existing-fields', 'f1')).toEqual([])
+  })
+
+  it('skips a feature whose id does not match', () => {
+    const feature = makeDatasetFeature('other-id')
+    const layer = makeVtLayer('existing-fields', { a: makeTile([feature]) })
+    expect(collectTileFragments(makeMap([layer]), 'existing-fields', 'f1')).toEqual([])
+  })
+
+  it('skips tiles that are not loaded', () => {
+    const feature = makeDatasetFeature('f1')
+    const layer = makeVtLayer('existing-fields', { a: makeTile([feature], TileState.LOADING) })
+    expect(collectTileFragments(makeMap([layer]), 'existing-fields', 'f1')).toEqual([])
+  })
+
+  it('skips layers with no loaded tiles yet', () => {
+    const layer = makeVtLayer('existing-fields', undefined)
+    expect(collectTileFragments(makeMap([layer]), 'existing-fields', 'f1')).toEqual([])
+  })
+
+  it('skips layers that are not vectorTile-tagged', () => {
+    const otherLayer = { get: () => 'vector', getSource: () => ({}) }
+    expect(collectTileFragments(makeMap([otherLayer]), 'existing-fields', 'f1')).toEqual([])
+  })
+
+  it('collects fragments split across multiple loaded tiles', () => {
+    const feature1 = makeDatasetFeature('f1')
+    const feature2 = makeDatasetFeature('f1')
+    const layer = makeVtLayer('existing-fields', { a: makeTile([feature1]), b: makeTile([feature2]) })
+    expect(collectTileFragments(makeMap([layer]), 'existing-fields', 'f1')).toHaveLength(2)
+  })
+})