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

package/src/utils/patternUtils.js

@@ -1,7 +1,9 @@
-import { getValueForStyle } from '../utils/getValueForStyle.js'
-
 // Border path rendered behind the pattern content in Key panel symbols (20×20 coordinate space).
 export const KEY_BORDER_PATH = '<path d="M19 2.862v14.275c0 1.028-.835 1.862-1.862 1.862H2.863c-1.028 0-1.862-.835-1.862-1.862V2.862C1.001 1.834 1.836 1 2.863 1h14.275C18.166 1 19 1.835 19 2.862z" fill="{{backgroundColor}}" stroke="{{foregroundColor}}" stroke-width="2"/>'
+// Minimum oversampling — keeps 16×16 physical pixels as the floor so patterns remain crisp.
+const PATTERN_MIN_PIXEL_RATIO = 2
+
+export const getEffectivePixelRatio = (pixelRatio) => Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio * 2)
 
 export const hashString = (str) => {
   let hash = 0
@@ -32,68 +34,3 @@ export const injectColors = (content, foregroundColor, backgroundColor) =>
  * @returns {boolean}
  */
 export const hasPattern = (dataset) => !!(dataset.fillPattern || dataset.fillPatternSvgContent)
-
-/**
- * Returns the raw (un-coloured) inner SVG content for a dataset's pattern.
- * Precedence: inline fillPatternSvgContent → named fillPattern from registry.
- *
- * @param {Object} dataset
- * @param {Object} patternRegistry
- * @returns {string|null}
- */
-export const getPatternInnerContent = (dataset, patternRegistry) => {
-  if (dataset.fillPatternSvgContent) {
-    return dataset.fillPatternSvgContent
-  }
-  if (dataset.fillPattern) {
-    return patternRegistry?.get(dataset.fillPattern)?.svgContent ?? null
-  }
-  return null
-}
-
-/**
- * Returns a deterministic image ID for a pattern + resolved colour + pixel ratio combination.
- *
- * @param {Object} dataset
- * @param {string} mapStyleId
- * @param {Object} patternRegistry
- * @param {number} [pixelRatio=1]
- * @returns {string|null}
- */
-// Minimum oversampling — keeps 16×16 physical pixels as the floor so patterns remain crisp.
-export const PATTERN_MIN_PIXEL_RATIO = 2
-
-export const getPatternImageId = (dataset, mapStyleId, patternRegistry, pixelRatio = 1) => {
-  const innerContent = getPatternInnerContent(dataset, patternRegistry)
-  if (!innerContent) {
-    return null
-  }
-  const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
-  const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
-  const effectiveRatio = Math.max(PATTERN_MIN_PIXEL_RATIO, pixelRatio)
-  return `pattern-${hashString(innerContent + fg + bg)}-${effectiveRatio}x`
-}
-
-/**
- * Returns colour-injected SVG path content for use in Key panel pattern symbols.
- * Returns { border, content } where border is the rounded-rect outline and content
- * is the pattern fill. Returns null if the dataset has no pattern.
- *
- * @param {Object} dataset
- * @param {string} mapStyleId
- * @param {Object} patternRegistry
- * @returns {{ border: string, content: string }|null}
- */
-export const getKeyPatternPaths = (dataset, mapStyleId, patternRegistry) => {
-  const innerContent = getPatternInnerContent(dataset, patternRegistry)
-  if (!innerContent) {
-    return null
-  }
-  const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
-  const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
-  const borderStroke = getValueForStyle(dataset.stroke, mapStyleId) || fg
-  return {
-    border: injectColors(KEY_BORDER_PATH, borderStroke, bg),
-    content: injectColors(innerContent, fg, bg)
-  }
-}

package/src/utils/patternUtils.test.js

@@ -1,17 +1,9 @@
 import {
   hashString,
   injectColors,
-  hasPattern,
-  getPatternInnerContent,
-  getPatternImageId,
-  getKeyPatternPaths,
-  KEY_BORDER_PATH
+  hasPattern
 } from './patternUtils.js'
 
-const mockRegistry = {
-  get: (id) => id === 'dot' ? { id: 'dot', svgContent: '<path d="M4 4" fill="{{foregroundColor}}"/>' } : undefined
-}
-
 describe('hashString', () => {
   test('returns a non-empty string', () => {
     expect(typeof hashString('hello')).toBe('string')
@@ -61,117 +53,3 @@ describe('hasPattern', () => {
     expect(hasPattern({ fill: 'red' })).toBe(false)
   })
 })
-
-describe('getPatternInnerContent', () => {
-  test('returns fillPatternSvgContent when set (inline SVG takes precedence)', () => {
-    const dataset = { fillPatternSvgContent: '<path d="custom"/>', fillPattern: 'dot' }
-    expect(getPatternInnerContent(dataset, mockRegistry)).toBe('<path d="custom"/>')
-  })
-
-  test('returns svgContent from registry for a named fillPattern', () => {
-    const dataset = { fillPattern: 'dot' }
-    expect(getPatternInnerContent(dataset, mockRegistry)).toBe('<path d="M4 4" fill="{{foregroundColor}}"/>')
-  })
-
-  test('returns null for an unregistered fillPattern name', () => {
-    const dataset = { fillPattern: 'unknown-pattern' }
-    expect(getPatternInnerContent(dataset, mockRegistry)).toBeNull()
-  })
-
-  test('returns null when no pattern is configured', () => {
-    expect(getPatternInnerContent({}, mockRegistry)).toBeNull()
-  })
-})
-
-describe('getPatternImageId', () => {
-  test('returns a deterministic string id', () => {
-    const dataset = { fillPattern: 'dot', fillPatternForegroundColor: 'red', fillPatternBackgroundColor: 'blue' }
-    const id = getPatternImageId(dataset, 'style-a', mockRegistry)
-    expect(typeof id).toBe('string')
-    expect(id).toMatch(/^pattern-/)
-    expect(id).toBe(getPatternImageId(dataset, 'style-a', mockRegistry))
-  })
-
-  test('returns null when no pattern content is found', () => {
-    expect(getPatternImageId({ fillPattern: 'unknown' }, 'style-a', mockRegistry)).toBeNull()
-  })
-
-  test('produces different ids for different colours', () => {
-    const base = { fillPattern: 'dot' }
-    const idA = getPatternImageId({ ...base, fillPatternForegroundColor: 'red' }, 'style-a', mockRegistry)
-    const idB = getPatternImageId({ ...base, fillPatternForegroundColor: 'blue' }, 'style-a', mockRegistry)
-    expect(idA).not.toBe(idB)
-  })
-
-  test('floors effective ratio at PATTERN_MIN_PIXEL_RATIO so low-DPI ids match 2x', () => {
-    const dataset = { fillPattern: 'dot' }
-    const id1x = getPatternImageId(dataset, 'style-a', mockRegistry, 1)
-    const id2x = getPatternImageId(dataset, 'style-a', mockRegistry, 2)
-    expect(id1x).toBe(id2x)
-    expect(id1x).toMatch(/-2x$/)
-  })
-
-  test('produces different ids for pixelRatios above the floor', () => {
-    const dataset = { fillPattern: 'dot' }
-    const id2x = getPatternImageId(dataset, 'style-a', mockRegistry, 2)
-    const id3x = getPatternImageId(dataset, 'style-a', mockRegistry, 3)
-    expect(id2x).not.toBe(id3x)
-    expect(id2x).toMatch(/-2x$/)
-    expect(id3x).toMatch(/-3x$/)
-  })
-
-  test('falls back to "black" foreground and "transparent" background when colours are absent', () => {
-    const id = getPatternImageId({ fillPattern: 'dot' }, 'style-a', mockRegistry)
-    const idExplicit = getPatternImageId(
-      { fillPattern: 'dot', fillPatternForegroundColor: 'black', fillPatternBackgroundColor: 'transparent' },
-      'style-a',
-      mockRegistry
-    )
-    expect(id).toBe(idExplicit)
-  })
-})
-
-describe('getKeyPatternPaths', () => {
-  test('returns border and content strings with colours injected', () => {
-    const dataset = {
-      fillPattern: 'dot',
-      fillPatternForegroundColor: 'red',
-      fillPatternBackgroundColor: 'white',
-      stroke: 'black'
-    }
-    const result = getKeyPatternPaths(dataset, 'style-a', mockRegistry)
-    expect(result).not.toBeNull()
-    expect(result.border).toContain('black') // stroke colour
-    expect(result.border).toContain('white') // background colour
-    expect(result.content).toContain('red') // foreground colour
-    expect(result.border).not.toContain('{{foregroundColor}}')
-    expect(result.content).not.toContain('{{foregroundColor}}')
-  })
-
-  test('returns null when no pattern content is found', () => {
-    expect(getKeyPatternPaths({ fillPattern: 'unknown' }, 'style-a', mockRegistry)).toBeNull()
-  })
-
-  test('falls back to "black" fg and "transparent" bg when colour properties are absent', () => {
-    const result = getKeyPatternPaths({ fillPattern: 'dot' }, 'style-a', mockRegistry)
-    expect(result).not.toBeNull()
-    expect(result.content).toContain('black')
-    expect(result.border).toContain('transparent')
-  })
-
-  test('border stroke falls back to foreground colour when stroke is absent', () => {
-    const result = getKeyPatternPaths(
-      { fillPattern: 'dot', fillPatternForegroundColor: 'green' },
-      'style-a',
-      mockRegistry
-    )
-    expect(result).not.toBeNull()
-    // borderStroke falls back to fg ('green'), so the border uses green for both stroke and background
-    expect(result.border).toContain('green')
-  })
-
-  test('KEY_BORDER_PATH contains foregroundColor and backgroundColor tokens', () => {
-    expect(KEY_BORDER_PATH).toContain('{{foregroundColor}}')
-    expect(KEY_BORDER_PATH).toContain('{{backgroundColor}}')
-  })
-})

package/src/utils/symbolUtils.js

@@ -14,23 +14,21 @@ const SYMBOL_STYLE_PROPS = new Set([
 export const hasSymbol = (dataset) => !!(dataset.symbol || dataset.symbolSvgContent)
 
 /**
- * Resolves the symbolDef for a dataset's symbol config.
+ * Returns true if a marker item should render as a standalone label with no symbol.
+ * Requires label content and at least one of symbol/symbolSvgContent to be explicitly null.
+ * Undefined values fall through to render-time default symbol resolution.
  *
- * dataset.symbol is a string symbol ID (e.g. 'pin').
- * dataset.symbolSvgContent is inline SVG content for a custom symbol.
- *
- * @param {Object} dataset
- * @param {Object} symbolRegistry
- * @returns {Object|undefined}
+ * @param {Object} marker
+ * @returns {boolean}
  */
-export const getSymbolDef = (dataset, symbolRegistry) => {
-  if (dataset.symbolSvgContent) {
-    return { svg: dataset.symbolSvgContent }
+export const isStandaloneLabel = (marker) => {
+  if (!marker.label) {
+    return false
   }
-  if (dataset.symbol) {
-    return symbolRegistry.get(dataset.symbol)
+  if (marker.symbol || marker.symbolSvgContent) {
+    return false
   }
-  return undefined
+  return marker.symbol === null || marker.symbolSvgContent === null
 }
 
 /**

package/src/utils/symbolUtils.test.js

@@ -1,15 +1,11 @@
 import {
   hasSymbol,
-  getSymbolDef,
+  isStandaloneLabel,
   getSymbolStyleColors,
   getSymbolViewBox,
   getSymbolAnchor
 } from './symbolUtils.js'
 
-const mockRegistry = (defs = {}) => ({
-  get: jest.fn((id) => defs[id])
-})
-
 // ─── hasSymbol ────────────────────────────────────────────────────────────────
 
 describe('hasSymbol', () => {
@@ -30,34 +26,32 @@ describe('hasSymbol', () => {
   })
 })
 
-// ─── getSymbolDef ─────────────────────────────────────────────────────────────
+// ─── isStandaloneLabel ────────────────────────────────────────────────────────
+
+describe('isStandaloneLabel', () => {
+  it('returns false when marker has no label', () => {
+    expect(isStandaloneLabel({})).toBe(false)
+    expect(isStandaloneLabel({ symbol: null })).toBe(false)
+  })
 
-describe('getSymbolDef', () => {
-  it('returns undefined when dataset has no symbol', () => {
-    expect(getSymbolDef({}, mockRegistry())).toBeUndefined()
+  it('returns false when marker has a truthy symbol string (line 28)', () => {
+    expect(isStandaloneLabel({ label: 'My label', symbol: 'pin' })).toBe(false)
   })
 
-  it('looks up string symbol id in the registry', () => {
-    const pinDef = { id: 'pin', svg: '<g/>' }
-    const registry = mockRegistry({ pin: pinDef })
-    expect(getSymbolDef({ symbol: 'pin' }, registry)).toBe(pinDef)
+  it('returns false when marker has symbolSvgContent (line 28)', () => {
+    expect(isStandaloneLabel({ label: 'My label', symbolSvgContent: '<circle/>' })).toBe(false)
   })
 
-  it('returns undefined for an unregistered string symbol', () => {
-    expect(getSymbolDef({ symbol: 'missing' }, mockRegistry())).toBeUndefined()
+  it('returns false when label is present but both symbol and symbolSvgContent are undefined (line 31)', () => {
+    expect(isStandaloneLabel({ label: 'My label' })).toBe(false)
   })
 
-  it('returns inline def from symbolSvgContent with svg key', () => {
-    const dataset = { symbolSvgContent: '<circle/>', symbolViewBox: '0 0 10 10' }
-    const result = getSymbolDef(dataset, mockRegistry())
-    expect(result.svg).toBe('<circle/>')
+  it('returns true when label is present and symbol is explicitly null (line 31)', () => {
+    expect(isStandaloneLabel({ label: 'My label', symbol: null })).toBe(true)
   })
 
-  it('symbolSvgContent takes precedence over symbol id', () => {
-    const pinDef = { id: 'pin', svg: '<g/>' }
-    const registry = mockRegistry({ pin: pinDef })
-    const result = getSymbolDef({ symbol: 'pin', symbolSvgContent: '<circle/>' }, registry)
-    expect(result.svg).toBe('<circle/>')
+  it('returns true when label is present and symbolSvgContent is explicitly null (line 31)', () => {
+    expect(isStandaloneLabel({ label: 'My label', symbolSvgContent: null })).toBe(true)
   })
 })
 
@@ -77,13 +71,11 @@ describe('getSymbolStyleColors', () => {
       symbol: 'pin',
       symbolBackgroundColor: '#ff0000',
       symbolForegroundColor: '#ffffff',
-      symbolHaloWidth: '2',
       symbolGraphic: 'cross'
     }
     expect(getSymbolStyleColors(dataset)).toEqual({
       backgroundColor: '#ff0000',
       foregroundColor: '#ffffff',
-      haloWidth: '2',
       graphic: 'cross'
     })
   })

package/plugins/interact/dist/css/index.css

@@ -1 +0,0 @@
-.im-c-mark-location{display:flex;justify-content:center;gap:var(--divider-gap)}.im-o-app--mobile .im-c-mark-location .im-c-button-wrapper,.im-o-app--mobile .im-c-mark-location .im-c-map-button{flex:1 1 auto;min-width:fit-content}.im-o-app--mouse.im-o-app--tablet .im-c-mark-location .im-c-map-button,.im-o-app--mouse.im-o-app--desktop .im-c-mark-location .im-c-map-button{min-width:150px}.im-o-app--mobile .im-c-mark-location .im-c-map-button{flex:1 1 auto;min-width:fit-content}

package/plugins/interact/src/interact.scss

@@ -1,24 +0,0 @@
-.im-c-mark-location {
-    display: flex;
-    justify-content: center;
-    gap: var(--divider-gap);
-}
-
-.im-o-app--mobile .im-c-mark-location {
-    .im-c-button-wrapper, .im-c-map-button {
-        flex: 1 1 auto;
-        min-width: fit-content;
-    }
-}
-
-.im-o-app--mouse.im-o-app--tablet,
-.im-o-app--mouse.im-o-app--desktop {
-    .im-c-mark-location .im-c-map-button {
-        min-width: 150px;
-    }
-}
-
-.im-o-app--mobile .im-c-mark-location .im-c-map-button {
-    flex: 1 1 auto;
-    min-width: fit-content;
-}