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

package/src/scss/main.scss

@@ -17,6 +17,7 @@
 
 // Components: specific UI components. Using 'CSS in Component' pattern
 @use '../App/components/KeyboardHelp/KeyboardHelp.module';
+@use '../App/components/Tabs/Tabs.module';
 @use '../App/components/MapButton/MapButton.module';
 @use '../App/components/Panel/Panel.module';
 @use '../App/components/Icon/Icon.module';
@@ -25,8 +26,10 @@
 @use '../App/components/PopupMenu/PopupMenu.module';
 @use '../App/components/Attributions/Attributions.module';
 @use '../App/components/Logo/Logo.module';
+@use '../App/components/Hints/Hints.module';
 @use '../App/components/CrossHair/CrossHair.module';
 @use '../App/components/Markers/Markers.module';
+@use '../App/components/Viewport/Features.module';
 @use '../App/components/Actions/Actions.module';
 
 // Components that dont have a corresponding React Component

package/src/scss/tools/_border-focus.scss

@@ -11,7 +11,6 @@
 /// @include border-focus-base($offset: -1px, $border: panel, $box-shadow: panel);
 /// ```
 @mixin border-focus-base($type: null, $is-inset: null) {
-  position: relative;
   border: 0;
   
   // Border radius

package/src/services/eventBus.js

@@ -31,6 +31,21 @@ class EventBus {
     return this
   }
 
+  /**
+   * Register a one-time handler that removes itself after the first call.
+   *
+   * @param {string} eventName
+   * @param {Function} handler
+   * @returns {this}
+   */
+  once (eventName, handler) {
+    const wrapper = (...args) => {
+      this.off(eventName, wrapper)
+      handler(...args)
+    }
+    return this.on(eventName, wrapper)
+  }
+
   /**
    * Remove a handler for an event. Omit `handler` to remove all handlers.
    *

package/src/services/eventBus.test.js

@@ -82,6 +82,17 @@ describe('EventBus singleton', () => {
     console.error.mockRestore()
   })
 
+  it('once fires the handler exactly once', () => {
+    const handler = jest.fn()
+    eventBus.once('single', handler)
+
+    eventBus.emit('single', 'a')
+    eventBus.emit('single', 'b')
+
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(handler).toHaveBeenCalledWith('a')
+  })
+
   it('destroys all events', () => {
     const handler = jest.fn()
     eventBus.on('destroyMe', handler)

package/src/services/hints.js

@@ -0,0 +1,47 @@
+const stripHtml = (html) => html.replace(/<[^<>]*>/g, '')
+
+/**
+ * Creates the hints service. Manages a single active toast hint shown in the
+ * Hints container. Calling show() replaces any current hint and
+ * restarts the dismiss timer. Internally calls announce() so screen readers
+ * receive the message through the live region without callers needing to pair
+ * the two calls manually.
+ */
+export function createHints (announce) {
+  const subscribers = new Set()
+  let current = null
+  let timer = null
+
+  const notify = () => subscribers.forEach(fn => fn(current))
+
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  const dismiss = () => {
+    clearTimer()
+    current = null
+    notify()
+  }
+
+  const show = (html, options = {}) => {
+    const { duration = 4000, announce: announceText } = options
+    clearTimer()
+    current = { html }
+    notify()
+    announce(announceText ?? stripHtml(html), 'plugin')
+    if (duration > 0) {
+      timer = setTimeout(dismiss, duration)
+    }
+  }
+
+  const subscribe = (fn) => {
+    subscribers.add(fn)
+    return () => subscribers.delete(fn)
+  }
+
+  return { show, dismiss, subscribe }
+}

package/src/services/hints.test.js

@@ -0,0 +1,110 @@
+import { createHints } from './hints.js'
+
+let announce
+let hints
+
+beforeEach(() => {
+  jest.useFakeTimers()
+  announce = jest.fn()
+  hints = createHints(announce)
+})
+
+afterEach(() => {
+  jest.useRealTimers()
+})
+
+// ─── show() ──────────────────────────────────────────────────────────────────
+
+describe('show', () => {
+  it('notifies subscribers with the html payload', () => {
+    const sub = jest.fn()
+    hints.subscribe(sub)
+    hints.show('<kbd>Enter</kbd> to select')
+    expect(sub).toHaveBeenCalledWith({ html: '<kbd>Enter</kbd> to select' })
+  })
+
+  it('calls announce with stripped html', () => {
+    hints.show('<kbd>Enter</kbd> to select')
+    expect(announce).toHaveBeenCalledWith('Enter to select', 'plugin')
+  })
+
+  it('calls announce with custom text when announce option is provided', () => {
+    hints.show('<kbd>Alt+K</kbd> help', { announce: 'Press Alt+K for keyboard controls' })
+    expect(announce).toHaveBeenCalledWith('Press Alt+K for keyboard controls', 'plugin')
+  })
+
+  it('replaces an existing hint and resets the timer', () => {
+    const sub = jest.fn()
+    hints.subscribe(sub)
+    hints.show('first', { duration: 2000 })
+    hints.show('second', { duration: 2000 })
+    jest.advanceTimersByTime(2000)
+    expect(sub).toHaveBeenLastCalledWith(null)
+    // Only one dismiss fired (the second hint's timer)
+    expect(sub).toHaveBeenCalledTimes(3) // show1, show2, dismiss
+  })
+
+  it('auto-dismisses after duration', () => {
+    const sub = jest.fn()
+    hints.subscribe(sub)
+    hints.show('hello', { duration: 3000 })
+    jest.advanceTimersByTime(3000)
+    expect(sub).toHaveBeenLastCalledWith(null)
+  })
+
+  it('does not auto-dismiss when duration is 0', () => {
+    const sub = jest.fn()
+    hints.subscribe(sub)
+    hints.show('persistent', { duration: 0 })
+    jest.advanceTimersByTime(60000)
+    expect(sub).not.toHaveBeenCalledWith(null)
+  })
+})
+
+// ─── dismiss() ───────────────────────────────────────────────────────────────
+
+describe('dismiss', () => {
+  it('clears the active hint and notifies', () => {
+    const sub = jest.fn()
+    hints.subscribe(sub)
+    hints.show('hello')
+    hints.dismiss()
+    expect(sub).toHaveBeenLastCalledWith(null)
+  })
+
+  it('cancels the auto-dismiss timer', () => {
+    const sub = jest.fn()
+    hints.subscribe(sub)
+    hints.show('hello', { duration: 3000 })
+    hints.dismiss()
+    sub.mockClear()
+    jest.advanceTimersByTime(3000)
+    expect(sub).not.toHaveBeenCalled()
+  })
+
+  it('is safe to call when no hint is active', () => {
+    expect(() => hints.dismiss()).not.toThrow()
+  })
+})
+
+// ─── subscribe / unsubscribe ──────────────────────────────────────────────────
+
+describe('subscribe', () => {
+  it('returns an unsubscribe function', () => {
+    const sub = jest.fn()
+    const unsub = hints.subscribe(sub)
+    unsub()
+    hints.show('hello')
+    expect(sub).not.toHaveBeenCalled()
+  })
+
+  it('notifies multiple subscribers', () => {
+    const sub1 = jest.fn()
+    const sub2 = jest.fn()
+    hints.subscribe(sub1)
+    hints.subscribe(sub2)
+    hints.show('hello')
+    expect(sub1).toHaveBeenCalled()
+    expect(sub2).toHaveBeenCalled()
+  })
+})

package/src/services/patternRegistry.js

@@ -1,5 +1,6 @@
 import { BUILT_IN_PATTERNS } from '../config/patternConfig.js'
-
+import { getValueForStyle } from '../utils/getValueForStyle.js'
+import { KEY_BORDER_PATH, getEffectivePixelRatio, injectColors, hashString } from '../utils/patternUtils.js'
 const patterns = new Map()
 
 export const patternRegistry = {
@@ -31,6 +32,73 @@ export const patternRegistry = {
    */
   list () {
     return [...patterns.values()]
+  },
+
+  /**
+   * Clears all registered patterns (including built-ins). Mainly for testing purposes.
+   */
+  clear () {
+    patterns.clear()
+  },
+
+  /**
+   * Returns the raw (un-coloured) inner SVG content for a style's pattern.
+   * Precedence: inline fillPatternSvgContent → named fillPattern from registry.
+   *
+   * @param {Object} style
+   * @returns {string|null}
+   */
+  getPatternInnerContent (style) {
+    if (style.fillPatternSvgContent) {
+      return style.fillPatternSvgContent
+    }
+    if (style.fillPattern) {
+      return this.get(style.fillPattern)?.svgContent ?? null
+    }
+    return null
+  },
+
+  /**
+ * 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 style has no pattern.
+ *
+ * @param {Object} style
+ * @param {string} mapStyleId
+ * @returns {{ border: string, content: string }|null}
+ */
+  getKeyPatternPaths (style, mapStyleId) {
+    const innerContent = this.getPatternInnerContent(style)
+    if (!innerContent) {
+      return null
+    }
+    const fg = getValueForStyle(style.fillPatternForegroundColor, mapStyleId) || 'black'
+    const bg = getValueForStyle(style.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+    const borderStroke = getValueForStyle(style.stroke, mapStyleId) || fg
+    const keyPatternPaths = {
+      border: injectColors(KEY_BORDER_PATH, borderStroke, bg),
+      content: injectColors(innerContent, fg, bg)
+    }
+    return keyPatternPaths
+  },
+
+  /**
+ * Returns a deterministic image ID for a pattern + resolved colour + pixel ratio combination.
+ *
+ * @param {Object} dataset
+ * @param {string} mapStyleId
+ * @param {number} [pixelRatio=1]
+ * @returns {string|null}
+ */
+  getPatternImageId (dataset, mapStyleId, pixelRatio = 1) {
+    const innerContent = this.getPatternInnerContent(dataset)
+    if (!innerContent) {
+      return null
+    }
+    const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
+    const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+    const effectiveRatio = getEffectivePixelRatio(pixelRatio)
+    return `pattern-${hashString(innerContent + fg + bg)}-${effectiveRatio}x`
   }
 }
 

package/src/services/patternRegistry.test.js

@@ -1,5 +1,5 @@
 import { patternRegistry } from './patternRegistry.js'
-
+import { KEY_BORDER_PATH } from '../utils/patternUtils.js'
 describe('patternRegistry', () => {
   describe('built-in patterns', () => {
     test.each([
@@ -45,4 +45,115 @@ describe('patternRegistry', () => {
       expect(all.every(p => p.id && p.svgContent)).toBe(true)
     })
   })
+
+  describe('getPatternInnerContent', () => {
+    test('returns fillPatternSvgContent when set (inline SVG takes precedence)', () => {
+      const style = { fillPatternSvgContent: '<path d="custom"/>', fillPattern: 'dot' }
+      expect(patternRegistry.getPatternInnerContent(style)).toBe('<path d="custom"/>')
+    })
+
+    test('returns svgContent from registry for a named fillPattern', () => {
+      const style = { fillPattern: 'dot' }
+      patternRegistry.register('dot', '<path d="M4 4" fill="{{foregroundColor}}"/>')
+      expect(patternRegistry.getPatternInnerContent(style)).toBe('<path d="M4 4" fill="{{foregroundColor}}"/>')
+    })
+
+    test('returns null for an unregistered fillPattern name', () => {
+      const style = { fillPattern: 'unknown-pattern' }
+      expect(patternRegistry.getPatternInnerContent(style)).toBeNull()
+    })
+
+    test('returns null when no pattern is configured', () => {
+      expect(patternRegistry.getPatternInnerContent({})).toBeNull()
+    })
+  })
+
+  describe('getKeyPatternPaths', () => {
+    test('returns border and content strings with colours injected', () => {
+      const dataset = {
+        fillPattern: 'dot',
+        fillPatternForegroundColor: 'red',
+        fillPatternBackgroundColor: 'white',
+        stroke: 'black'
+      }
+      const result = patternRegistry.getKeyPatternPaths(dataset, 'style-a')
+      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(patternRegistry.getKeyPatternPaths({ fillPattern: 'unknown' }, 'style-a')).toBeNull()
+    })
+
+    test('falls back to "black" fg and "transparent" bg when colour properties are absent', () => {
+      const result = patternRegistry.getKeyPatternPaths({ fillPattern: 'dot' }, 'style-a')
+      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 = patternRegistry.getKeyPatternPaths(
+        { fillPattern: 'dot', fillPatternForegroundColor: 'green' },
+        'style-a'
+      )
+      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}}')
+    })
+  })
+
+  describe('patternRegistry.getPatternImageId', () => {
+    test('returns a deterministic string id', () => {
+      const dataset = { fillPattern: 'dot', fillPatternForegroundColor: 'red', fillPatternBackgroundColor: 'blue' }
+      const id = patternRegistry.getPatternImageId(dataset, 'style-a')
+      expect(typeof id).toBe('string')
+      expect(id).toMatch(/^pattern-/)
+      expect(id).toBe(patternRegistry.getPatternImageId(dataset, 'style-a'))
+    })
+
+    test('returns null when no pattern content is found', () => {
+      expect(patternRegistry.getPatternImageId({ fillPattern: 'unknown' }, 'style-a')).toBeNull()
+    })
+
+    test('produces different ids for different colours', () => {
+      const base = { fillPattern: 'dot' }
+      const idA = patternRegistry.getPatternImageId({ ...base, fillPatternForegroundColor: 'red' }, 'style-a')
+      const idB = patternRegistry.getPatternImageId({ ...base, fillPatternForegroundColor: 'blue' }, 'style-a')
+      expect(idA).not.toBe(idB)
+    })
+
+    test('floors effective ratio at 2 * so low-DPI ids match 2x', () => {
+      const dataset = { fillPattern: 'dot' }
+      const id1x = patternRegistry.getPatternImageId(dataset, 'style-a', 1)
+      expect(id1x).toMatch(/-2x$/)
+    })
+
+    test('produces different ids for pixelRatios above the floor', () => {
+      const dataset = { fillPattern: 'dot' }
+      const id2x = patternRegistry.getPatternImageId(dataset, 'style-a', 2)
+      const id3x = patternRegistry.getPatternImageId(dataset, 'style-a', 3)
+      expect(id2x).not.toBe(id3x)
+      expect(id2x).toMatch(/-4x$/)
+      expect(id3x).toMatch(/-6x$/)
+    })
+
+    test('falls back to "black" foreground and "transparent" background when colours are absent', () => {
+      const id = patternRegistry.getPatternImageId({ fillPattern: 'dot' }, 'style-a')
+      const idExplicit = patternRegistry.getPatternImageId(
+        { fillPattern: 'dot', fillPatternForegroundColor: 'black', fillPatternBackgroundColor: 'transparent' },
+        'style-a'
+      )
+      expect(id).toBe(idExplicit)
+    })
+  })
 })

package/src/services/reverseGeocode.js

@@ -7,6 +7,10 @@ export function createReverseGeocode ({ url, transformRequest, load }, crs) {
   }
 }
 
+export function hasReverseGeocode () {
+  return reverseGeocodeFn !== null
+}
+
 export function reverseGeocode (zoom, coord) {
   if (!reverseGeocodeFn) {
     throw new Error('ReverseGeocode not initialised')

package/src/services/reverseGeocode.test.js

@@ -1,5 +1,5 @@
 // reverseGeocode.test.js
-import { createReverseGeocode, reverseGeocode } from './reverseGeocode'
+import { createReverseGeocode, reverseGeocode, hasReverseGeocode } from './reverseGeocode'
 
 describe('reverseGeocode module', () => {
   beforeEach(() => {
@@ -11,6 +11,10 @@ describe('reverseGeocode module', () => {
     expect(() => reverseGeocode(10, [0, 0])).toThrow('ReverseGeocode not initialised')
   })
 
+  it('hasReverseGeocode returns false before initialisation', () => {
+    expect(hasReverseGeocode()).toBe(false)
+  })
+
   it('sets reverseGeocodeFn via createReverseGeocode and calls providerFn correctly', async () => {
     const mockProviderFn = jest.fn().mockResolvedValue('result')
 
@@ -44,6 +48,12 @@ describe('reverseGeocode module', () => {
     expect(result).toBe('result')
   })
 
+  it('hasReverseGeocode returns true after initialisation', () => {
+    const config = { url: 'x', transformRequest: jest.fn(), load: jest.fn().mockResolvedValue(jest.fn()) }
+    createReverseGeocode(config, 'EPSG:4326')
+    expect(hasReverseGeocode()).toBe(true)
+  })
+
   it('supports multiple calls after initialisation', async () => {
     const mockProviderFn = jest.fn().mockResolvedValue('ok')