@defra/interactive-map 0.0.22-alpha → 0.0.24-alpha

package/providers/maplibre/src/maplibreProvider.test.js

@@ -4,9 +4,10 @@ import { attachAppEvents } from './appEvents.js'
 import { createMapLabelNavigator } from './utils/labels.js'
 import { updateHighlightedFeatures } from './utils/highlightFeatures.js'
 import { queryFeatures } from './utils/queryFeatures.js'
-import { registerSymbols } from './utils/symbolImages.js'
-import { registerPatterns } from './utils/patternImages.js'
+import { addSymbolsToMap } from './utils/symbolImages.js'
+import { addPatternsToMap } from './utils/patternImages.js'
 import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds, isGeometryObscured } from './utils/spatial.js'
+import { symbolRegistry } from '../../../src/services/symbolRegistry.js'
 
 jest.mock('./defaults.js', () => ({
   DEFAULTS: { animationDuration: 400, coordinatePrecision: 7 },
@@ -35,8 +36,8 @@ jest.mock('./utils/labels.js', () => ({
 }))
 jest.mock('./utils/highlightFeatures.js', () => ({ updateHighlightedFeatures: jest.fn(() => []) }))
 jest.mock('./utils/queryFeatures.js', () => ({ queryFeatures: jest.fn(() => []) }))
-jest.mock('./utils/symbolImages.js', () => ({ registerSymbols: jest.fn(() => Promise.resolve()) }))
-jest.mock('./utils/patternImages.js', () => ({ registerPatterns: jest.fn(() => Promise.resolve()) }))
+jest.mock('./utils/symbolImages.js', () => ({ addSymbolsToMap: jest.fn(() => Promise.resolve()) }))
+jest.mock('./utils/patternImages.js', () => ({ addPatternsToMap: jest.fn(() => Promise.resolve()) }))
 
 describe('MapLibreProvider', () => {
   let map, eventBus, maplibreModule, loadCallback
@@ -244,69 +245,75 @@ describe('MapLibreProvider', () => {
     await doInitMap(p)
     p.getFeaturesAtPoint({ x: 10, y: 20 }, { radius: 5 })
     expect(queryFeatures).toHaveBeenCalledWith(map, { x: 10, y: 20 }, { radius: 5 })
-    p.updateHighlightedFeatures(['feat'], { style: 1 })
+    p.updateHighlightedFeatures(['feat'], null, { style: 1 })
     expect(updateHighlightedFeatures).toHaveBeenCalledWith({
-      LngLatBounds: maplibreModule.LngLatBounds, map, selectedFeatures: ['feat'], stylesMap: { style: 1 }
+      LngLatBounds: maplibreModule.LngLatBounds, map, selectedFeatures: ['feat'], activeFeatures: null, stylesMap: { style: 1 }
     })
   })
 
-  test('registerSymbols delegates to utility with map instance', async () => {
+  test('getVisibleFeatures returns empty array when no layers are present on the map', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    map.getLayer.mockReturnValue(null)
+    expect(p.getVisibleFeatures(['l1', 'l2'])).toEqual([])
+    expect(map.queryRenderedFeatures).not.toHaveBeenCalled()
+  })
+
+  test('getVisibleFeatures queries only layers present on the map', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    map.getLayer.mockImplementation(id => id === 'l1' ? {} : null) // NOSONAR
+    const features = [{ id: 'f1' }]
+    map.queryRenderedFeatures.mockReturnValue(features)
+    expect(p.getVisibleFeatures(['l1', 'l2'])).toEqual(features)
+    expect(map.queryRenderedFeatures).toHaveBeenCalledWith(undefined, { layers: ['l1'] })
+  })
+
+  test('addSymbolsToMap delegates to utility with map instance', async () => {
     const p = makeProvider()
     await doInitMap(p)
     const configs = [{ symbol: 'pin' }]
     const mapStyle = { id: 'test', selectedColor: '#0b0c0c' }
-    const registry = {}
-    await p.registerSymbols(configs, mapStyle, registry)
-    expect(registerSymbols).toHaveBeenCalledWith(map, configs, mapStyle, registry, expect.any(Number))
+    await p.addSymbolsToMap(configs, mapStyle, symbolRegistry)
+    expect(addSymbolsToMap).toHaveBeenCalledWith(map, configs, mapStyle, symbolRegistry, expect.any(Number))
   })
 
-  test('registerSymbols computes pixelRatio from getPixelRatio and mapSize scale factor', async () => {
+  test('addSymbolsToMap computes pixelRatio from getPixelRatio and mapSize scale factor', async () => {
     const p = makeProvider()
     await doInitMap(p)
     map.getPixelRatio.mockReturnValue(2)
-    p.mapSize = 'medium' // scaleFactor['medium'] = 1.5
-    const registry = {}
-    await p.registerSymbols([], { id: 'test' }, registry)
-    expect(registerSymbols).toHaveBeenCalledWith(map, [], { id: 'test' }, registry, 3) // 2 * 1.5
+    p.mapSize = 'medium'
+    await p.addSymbolsToMap([], { id: 'test' }, symbolRegistry)
+    expect(addSymbolsToMap).toHaveBeenCalledWith(map, [], { id: 'test' }, symbolRegistry, 2)
   })
 
-  test('registerSymbols falls back to pixelRatio 1 when getPixelRatio returns 0', async () => {
+  test('addSymbolsToMap falls back to pixelRatio 1 when getPixelRatio returns 0', async () => {
     const p = makeProvider()
     await doInitMap(p)
     map.getPixelRatio.mockReturnValue(0)
     p.mapSize = 'small' // scaleFactor['small'] = 1
-    const registry = {}
-    await p.registerSymbols([], { id: 'test' }, registry)
-    expect(registerSymbols).toHaveBeenCalledWith(map, [], { id: 'test' }, registry, 1) // (0 || 1) * 1
+    await p.addSymbolsToMap([], { id: 'test' }, symbolRegistry)
+    expect(addSymbolsToMap).toHaveBeenCalledWith(map, [], { id: 'test' }, symbolRegistry, 1)
   })
 
-  test('registerPatterns delegates to utility with map instance and pixelRatio', async () => {
+  test('addPatternsToMap falls back to pixelRatio 1 when getPixelRatio returns 0', async () => {
     const p = makeProvider()
     await doInitMap(p)
+    map.getPixelRatio.mockReturnValue(0)
     const configs = [{ fillPattern: 'dot' }]
     const registry = {}
-    await p.registerPatterns(configs, 'test', registry)
-    expect(registerPatterns).toHaveBeenCalledWith(map, configs, 'test', registry, 1) // getPixelRatio()=1, mapSize unset → 1*1
+    await p.addPatternsToMap(configs, 'test', registry)
+    expect(addPatternsToMap).toHaveBeenCalledWith(map, configs, 'test', registry, 1)
   })
 
-  test('registerPatterns computes pixelRatio from getPixelRatio and mapSize scale factor', async () => {
+  test('addPatternsToMap is called with pixelRatio from getPixelRatio', async () => {
     const p = makeProvider()
     await doInitMap(p)
     map.getPixelRatio.mockReturnValue(2)
-    p.mapSize = 'medium' // scaleFactor['medium'] = 1.5
-    const registry = {}
-    await p.registerPatterns([], 'test', registry)
-    expect(registerPatterns).toHaveBeenCalledWith(map, [], 'test', registry, 3) // 2 * 1.5
-  })
-
-  test('registerPatterns falls back to pixelRatio 1 when getPixelRatio returns 0', async () => {
-    const p = makeProvider()
-    await doInitMap(p)
-    map.getPixelRatio.mockReturnValue(0)
-    p.mapSize = 'small' // scaleFactor['small'] = 1
+    p.mapSize = 'medium'
     const registry = {}
-    await p.registerPatterns([], 'test', registry)
-    expect(registerPatterns).toHaveBeenCalledWith(map, [], 'test', registry, 1) // (0 || 1) * 1
+    await p.addPatternsToMap([], 'test', registry)
+    expect(addPatternsToMap).toHaveBeenCalledWith(map, [], 'test', registry, 2)
   })
 
   describe('setHoverCursor', () => {

package/providers/maplibre/src/utils/highlightFeatures.js

@@ -1,3 +1,15 @@
+const ICON_IMAGE = 'icon-image'
+
+const ACTIVE_PREFIX = 'active-highlight'
+const ACTIVE_INNER_PREFIX = 'active-highlight-inner'
+const SELECTED_PREFIX = 'selected-highlight'
+
+// Inner and selected both use the selected colour/width (black, thin)
+const usesSelectedStyle = (prefix) => prefix === SELECTED_PREFIX || prefix === ACTIVE_INNER_PREFIX
+
+const getActiveImageId = (map, imageId) => map._activeSymbolImageMap?.[imageId] ?? null
+const getSelectedImageId = (map, imageId) => map._selectedSymbolImageMap?.[imageId] ?? null
+
 const groupFeaturesBySource = (map, selectedFeatures) => {
   const featuresBySource = {}
 
@@ -20,7 +32,7 @@ const groupFeaturesBySource = (map, selectedFeatures) => {
       }
     }
 
-    // Track whether any selected feature on this source is a polygon
+    // Track whether any feature on this source is a polygon
     if (geometry && (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon')) {
       featuresBySource[sourceId].hasFillGeometry = true
       featuresBySource[sourceId].fillIds.add(featureId)
@@ -32,12 +44,11 @@ const groupFeaturesBySource = (map, selectedFeatures) => {
   return featuresBySource
 }
 
-const cleanupStaleSources = (map, previousSources, currentSources) => {
+const cleanupStaleSources = (map, previousSources, currentSources, prefix) => {
   previousSources.forEach(src => {
     if (!currentSources.has(src)) {
-      const base = `highlight-${src}`
-      const layers = [`${base}-fill`, `${base}-line`, `${base}-symbol`]
-      layers.forEach(id => {
+      const base = `${prefix}-${src}`
+      ;[`${base}-fill`, `${base}-line`, `${base}-symbol`].forEach(id => {
         if (map.getLayer(id)) {
           map.setFilter(id, ['==', 'id', ''])
         }
@@ -46,6 +57,12 @@ const cleanupStaleSources = (map, previousSources, currentSources) => {
   })
 }
 
+const clearPrefixSources = (map, prefix) => {
+  const key = `_${prefix.replaceAll('-', '')}Sources`
+  cleanupStaleSources(map, map[key] || new Set(), new Set(), prefix)
+  map[key] = new Set()
+}
+
 const applyHighlightLayer = (map, id, type, sourceId, srcLayer, paint, filter) => {
   if (!map.getLayer(id)) {
     map.addLayer({
@@ -71,13 +88,13 @@ const applySymbolHighlightLayer = (map, id, sourceId, srcLayer, originalLayerId,
       source: sourceId,
       ...(srcLayer && { 'source-layer': srcLayer }),
       layout: {
-        'icon-image': imageId,
+        [ICON_IMAGE]: imageId,
         'icon-anchor': map.getLayoutProperty(originalLayerId, 'icon-anchor') ?? 'center',
         'icon-allow-overlap': true
       }
     })
   }
-  map.setLayoutProperty(id, 'icon-image', imageId)
+  map.setLayoutProperty(id, ICON_IMAGE, imageId)
   map.setFilter(id, filter)
   map.moveLayer(id)
 }
@@ -97,67 +114,105 @@ const calculateBounds = (LngLatBounds, renderedFeatures) => {
   return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()]
 }
 
-const getSelectedImageId = (map, imageId) => map._symbolImageMap?.[imageId] ?? null
+const applySymbolGeomHighlight = (map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId) => {
+  const imageId = map.getLayoutProperty(layerId, ICON_IMAGE)
+  const symbolImageId = getSymbolImageId(map, imageId)
+  if (symbolImageId) {
+    applySymbolHighlightLayer(map, `${base}-symbol`, sourceId, srcLayer, layerId, symbolImageId, filter)
+  }
+}
+
+const applyFillGeomHighlight = (map, base, sourceId, srcLayer, { isSelected, idExpression, fillIds, fill, lineColor, lineWidth, filter }) => {
+  if (isSelected) {
+    const fillFilter = ['in', idExpression, ['literal', [...fillIds]]]
+    // Only apply fill highlight to polygon features, not to any co-selected line features
+    applyHighlightLayer(map, `${base}-fill`, 'fill', sourceId, srcLayer, { 'fill-color': fill }, fillFilter)
+  }
+  applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, { 'line-color': lineColor, 'line-width': lineWidth }, filter)
+}
+
+const applySourceHighlight = (map, sourceId, featuresBySource, stylesMap, prefix, getSymbolImageId) => {
+  const { ids, fillIds, idProperty, layerId, hasFillGeometry } = featuresBySource[sourceId]
+  const baseLayer = map.getLayer(layerId)
+  const srcLayer = baseLayer.sourceLayer
+  const geom = hasFillGeometry ? 'fill' : baseLayer.type
+  const base = `${prefix}-${sourceId}`
+  const style = stylesMap[layerId]
+
+  if (!style) {
+    return
+  }
+
+  const { stroke, selectionStroke, strokeWidth, activeStrokeWidth, fill } = style
+  const isSelected = prefix === SELECTED_PREFIX
+  const selectedStyle = usesSelectedStyle(prefix)
+  const lineColor = selectedStyle ? selectionStroke : stroke
+  const lineWidth = selectedStyle ? strokeWidth : activeStrokeWidth
+  const idExpression = idProperty ? ['get', idProperty] : ['id']
+  const filter = ['in', idExpression, ['literal', [...ids]]]
+
+  if (geom === 'fill') {
+    applyFillGeomHighlight(map, base, sourceId, srcLayer, { isSelected, idExpression, fillIds, fill, lineColor, lineWidth, filter })
+  }
+
+  if (geom === 'line') {
+    if (map.getLayer(`${base}-fill`)) {
+      // Clear any fill highlight from a previous polygon on the same source
+      map.setFilter(`${base}-fill`, ['==', 'id', ''])
+    }
+    applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, { 'line-color': lineColor, 'line-width': lineWidth }, filter)
+  }
+
+  if (geom === 'symbol') {
+    applySymbolGeomHighlight(map, base, sourceId, srcLayer, layerId, filter, getSymbolImageId)
+  }
+}
+
+const applyFeatureHighlights = (map, features, stylesMap, prefix, getSymbolImageId) => {
+  const featuresBySource = groupFeaturesBySource(map, features)
+  const currentSources = new Set(Object.keys(featuresBySource))
+  const storageKey = `_${prefix.replaceAll('-', '')}Sources`
+  const previousSources = map[storageKey] || new Set()
+
+  cleanupStaleSources(map, previousSources, currentSources, prefix)
+  map[storageKey] = currentSources
+  currentSources.forEach(sourceId => applySourceHighlight(map, sourceId, featuresBySource, stylesMap, prefix, getSymbolImageId))
+
+  return featuresBySource
+}
 
 /**
  * Update highlighted features using pure filters.
+ * activeFeatures (keyboard cursor) render with the active ring (yellow) plus a selected ring inner (black).
+ * selectedFeatures render with the selected ring (black) only.
  * Supports fill, line and symbol geometry, multi-source, cleanup, and bounds.
  */
-export function updateHighlightedFeatures ({ LngLatBounds, map, selectedFeatures, stylesMap }) {
+export function updateHighlightedFeatures ({ LngLatBounds, map, selectedFeatures, activeFeatures, stylesMap }) {
   if (!map) {
     return null
   }
 
-  const featuresBySource = groupFeaturesBySource(map, selectedFeatures)
-  const renderedFeatures = []
-
-  const currentSources = new Set(Object.keys(featuresBySource))
-  const previousSources = map._highlightedSources || new Set()
-
-  cleanupStaleSources(map, previousSources, currentSources)
-  map._highlightedSources = currentSources
-
-  // Apply highlights for current sources
-  currentSources.forEach(sourceId => {
-    const { ids, fillIds, idProperty, layerId, hasFillGeometry } = featuresBySource[sourceId]
-    const baseLayer = map.getLayer(layerId)
-    const srcLayer = baseLayer.sourceLayer
-
-    // Use the actual feature geometry to determine highlight type
-    const geom = hasFillGeometry ? 'fill' : baseLayer.type
-    const base = `highlight-${sourceId}`
-
-    const idExpression = idProperty ? ['get', idProperty] : ['id']
-    const filter = ['in', idExpression, ['literal', [...ids]]]
-
-    if (geom === 'fill') {
-      const { stroke, strokeWidth, fill } = stylesMap[layerId]
-      const fillFilter = ['in', idExpression, ['literal', [...fillIds]]]
-      const linePaint = { 'line-color': stroke, 'line-width': strokeWidth }
-      // Only apply fill highlight to polygon features, not to any co-selected line features
-      applyHighlightLayer(map, `${base}-fill`, 'fill', sourceId, srcLayer, { 'fill-color': fill }, fillFilter)
-      applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, linePaint, filter)
-    }
-
-    if (geom === 'line') {
-      const { stroke, strokeWidth } = stylesMap[layerId]
-      const linePaint = { 'line-color': stroke, 'line-width': strokeWidth }
-      // Clear any fill highlight from a previous polygon selection on the same source
-      if (map.getLayer(`${base}-fill`)) {
-        map.setFilter(`${base}-fill`, ['==', 'id', ''])
-      }
-      applyHighlightLayer(map, `${base}-line`, 'line', sourceId, srcLayer, linePaint, filter)
-    }
+  // Active cursor features — rendered first so selected layers appear on top
+  if (activeFeatures?.length) {
+    applyFeatureHighlights(map, activeFeatures, stylesMap, ACTIVE_PREFIX, getActiveImageId)
+    // Black selected stroke on top of yellow active (mirrors resolveActive for symbols)
+    applyFeatureHighlights(map, activeFeatures, stylesMap, ACTIVE_INNER_PREFIX, getSelectedImageId)
+  } else {
+    clearPrefixSources(map, ACTIVE_PREFIX)
+    clearPrefixSources(map, ACTIVE_INNER_PREFIX)
+  }
 
-    if (geom === 'symbol') {
-      const imageId = map.getLayoutProperty(layerId, 'icon-image')
-      const selectedImageId = getSelectedImageId(map, imageId)
-      if (selectedImageId) {
-        applySymbolHighlightLayer(map, `${base}-symbol`, sourceId, srcLayer, layerId, selectedImageId, filter)
-      }
-    }
+  // Selection features
+  let featuresBySource = {}
+  if (selectedFeatures?.length) {
+    featuresBySource = applyFeatureHighlights(map, selectedFeatures, stylesMap, SELECTED_PREFIX, getSelectedImageId)
+  } else {
+    clearPrefixSources(map, SELECTED_PREFIX)
+  }
 
-    // Bounds only from rendered tiles
+  // Bounds only from selected features
+  const renderedFeatures = []
+  Object.entries(featuresBySource).forEach(([, { ids, idProperty, layerId }]) => {
     renderedFeatures.push(
       ...map
         .queryRenderedFeatures({ layers: [layerId] })