@defra/interactive-map 0.0.16-alpha → 0.0.18-alpha

package/src/config/events.js

@@ -61,6 +61,34 @@ export const EVENTS = {
    */
   APP_READY: 'app:ready',
 
+  /**
+   * Emitted when the map application becomes visible after being hidden.
+   *
+   * This can occur in 'hybrid behaviour' responsive scenarios where the map is already initialized
+   * (e.g. initialized inline on desktop) but was hidden and then shown again
+   * (e.g. resizing to mobile and opening the map).
+   *
+   * @remarks
+   * - Only emitted when transitioning from hidden → visible.
+   * - Not fired on initial open.
+   * - The existing map state may be preserved depending on configuration.
+   */
+  APP_VISIBLE: 'app:visible',
+
+  /**
+   * Emitted when the map application becomes hidden.
+   *
+   * This can occur in 'hybrid behaviour' responsive scenarios where the map was initialized inline
+   * (e.g. visible on desktop) but then becomes hidden
+   * (e.g. resizing to mobile or closing the map view).
+   *
+   * @remarks
+   * - Only emitted when transitioning from visible → hidden.
+   * - Not fired on initial load if the map starts hidden.
+   * - The map state may be preserved depending on configuration.
+   */
+  APP_HIDDEN: 'app:hidden',
+
   /**
    * Emitted when a panel is opened.
    * Payload: { panelId: string }

package/src/config/mapTheme.js

@@ -0,0 +1,56 @@
+/**
+ * Canonical colour values for light and dark map colour schemes.
+ * These are the single source of truth for map overlay colours —
+ * used both by the symbol SVG renderer (JS canvas) and injected as
+ * CSS custom properties onto the app container for CSS-rendered elements.
+ *
+ * Per-style overrides take precedence: set `haloColor`, `selectedColor`, or
+ * `foregroundColor` directly on a `MapStyleConfig` to override these defaults.
+ */
+export const SCHEME_COLORS = {
+  light: {
+    haloColor: '#ffffff',
+    selectedColor: '#0b0c0c',
+    foregroundColor: '#0b0c0c'
+  },
+  dark: {
+    haloColor: '#0b0c0c',
+    selectedColor: '#ffffff',
+    foregroundColor: '#ffffff'
+  }
+}
+
+/**
+ * Resolves the three map overlay colours for the given map style,
+ * falling back to the appropriate scheme defaults when not explicitly set.
+ * Stored in `mapState.mapTheme` so plugins can read resolved values without
+ * importing from core.
+ *
+ * @param {import('../types.js').MapStyleConfig|null} mapStyle
+ * @returns {{ haloColor: string, selectedColor: string, foregroundColor: string }}
+ */
+export const resolveMapTheme = (mapStyle) => {
+  const scheme = SCHEME_COLORS[mapStyle?.mapColorScheme] ?? SCHEME_COLORS.light
+  return {
+    haloColor: mapStyle?.haloColor ?? scheme.haloColor,
+    selectedColor: mapStyle?.selectedColor ?? scheme.selectedColor,
+    foregroundColor: mapStyle?.foregroundColor ?? scheme.foregroundColor
+  }
+}
+
+/**
+ * Converts a mapStyle's overlay colours into CSS custom properties,
+ * falling back to the appropriate scheme defaults when not explicitly set.
+ * Suitable for spreading directly into a React `style` prop.
+ *
+ * @param {import('../types.js').MapStyleConfig|null} mapStyle
+ * @returns {Object} CSS custom property object
+ */
+export const getMapThemeVars = (mapStyle) => {
+  const { haloColor, selectedColor, foregroundColor } = resolveMapTheme(mapStyle)
+  return {
+    '--map-overlay-halo-color': haloColor,
+    '--map-overlay-selected-color': selectedColor,
+    '--map-overlay-foreground-color': foregroundColor
+  }
+}

package/src/config/patternConfig.js

@@ -0,0 +1,16 @@
+/**
+ * Built-in fill pattern SVG content.
+ * Each value is the inner SVG paths only (no wrapper element).
+ * Paths are authored in a 16×16 coordinate space and tile seamlessly.
+ * Use {{foregroundColor}} and {{backgroundColor}} tokens for colour injection.
+ */
+export const BUILT_IN_PATTERNS = {
+  'cross-hatch': '<path d="M0 4.486V3.485h3.5V.001h1v3.484h7.002V.001h1v3.484h3.5v1.001h-3.5v7h3.5v.999h-3.5v3.516h-1v-3.516H4.499v3.516h-1v-3.516H0v-.999h3.5v-7H0zm11.501 0H4.499v7h7.002v-7z" fill="{{foregroundColor}}"/>',
+  'diagonal-cross-hatch': '<path d="M0 8.707V7.293L7.293 0h1.414L16 7.293v1.414L8.707 16H7.293L0 8.707zM.707 8L8 15.293 15.293 8 8 .707.707 8z" fill="{{foregroundColor}}"/>',
+  'forward-diagonal-hatch': '<path d="M16 8.707V7.293L7.293 16h1.414L16 8.707zm-16 0L8.707 0H7.293L0 7.293v1.414z" fill="{{foregroundColor}}"/>',
+  'backward-diagonal-hatch': '<path d="M0 8.707V7.293L8.707 16H7.293L0 8.707zm16 0L7.293 0h1.414L16 7.293v1.414z" fill="{{foregroundColor}}"/>',
+  'horizontal-hatch': '<path d="M0 4.5V3.499h15.999V4.5H0zm0 7h15.999V12.5H0v-1.001z" fill="{{foregroundColor}}"/>',
+  'vertical-hatch': '<path d="M3.501 16.001V0h1v16.001h-1zm7.998 0V0h1v16.001h-1z" fill="{{foregroundColor}}"/>',
+  dot: '<path d="M3.999 2A2 2 0 0 1 6 3.999C6 5.103 5.103 6 3.999 6a2 2 0 0 1-1.999-2.001A2 2 0 0 1 3.999 2zm0 7.999C5.103 10 6 10.897 6 12.001A2 2 0 0 1 3.999 14a2 2 0 0 1-1.999-1.999A2 2 0 0 1 3.999 10zM11.999 2A2 2 0 0 1 14 3.999C14 5.103 13.103 6 11.999 6S10 5.103 10 3.999A2 2 0 0 1 11.999 2zm0 7.999c1.104 0 2.001.897 2.001 2.001A2 2 0 0 1 11.999 14 2 2 0 0 1 10 12.001c0-1.104.897-2.001 1.999-2.001z" fill="{{foregroundColor}}"/>',
+  diamond: '<path d="M4 .465L7.535 4 4 7.535.465 4 4 .465zm0 7.999l3.535 3.535L4 15.535.465 11.999 4 8.464zm8-8l3.535 3.535-3.536 3.536L8.464 4 12 .464zm0 8.001L15.536 12 12 15.536 8.465 12 12 8.465z" fill="{{foregroundColor}}"/>'
+}

package/src/config/symbolConfig.js

@@ -0,0 +1,80 @@
+/**
+ * Default token values applied to all symbols unless overridden at the constructor,
+ * symbol registration, or marker creation level.
+ * Colour values may be a plain string or a map-style-keyed object,
+ * e.g. { outdoor: '#ffffff', dark: '#0b0c0c' }
+ */
+export const symbolDefaults = {
+  symbol: 'pin',
+  backgroundColor: '#ca3535',
+  foregroundColor: '#ffffff',
+  haloWidth: '1',
+  selectedWidth: '6'
+}
+
+/**
+ * Built-in graphic path data strings for use with the `graphic` token.
+ *
+ * Each value is an SVG `d` attribute string in a 16×16 coordinate space,
+ * centred at (8, 8). The built-in symbols (`pin`, `circle`, `square`) apply a
+ * `translate` transform to position this 16×16 area correctly within their
+ * 38×38 viewBox — so graphic path data does not need to account for symbol
+ * positioning.
+ *
+ * @example
+ * markers.add('id', coords, { symbol: 'pin', graphic: graphics.dot })
+ *
+ * @example
+ * // Inline path data (16×16 space, centred at 8,8)
+ * markers.add('id', coords, { symbol: 'pin', graphic: 'M3 8 L8 3 L13 8 L8 13 Z' })
+ */
+export const graphics = {
+  /** Small filled circle — the default graphic for built-in symbols */
+  dot: 'M8 3c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.241 5-5-2.24-5-5-5z',
+
+  /** Filled plus / cross shape */
+  cross: 'M6 3H10V6H13V10H10V13H6V10H3V6H6Z',
+
+  /** Filled diamond / rotated square */
+  diamond: 'M8 2L14 8L8 14L2 8Z',
+
+  /** Filled upward-pointing triangle */
+  triangle: 'M8 2L14 14H2Z',
+
+  /** Filled square */
+  square: 'M3 3H13V13H3Z'
+}
+
+// ─── Built-in symbol definitions ─────────────────────────────────────────────
+// Each symbol uses a 38×38 viewBox. SVG templates use {{token}} placeholders
+// resolved at render time by the symbolRegistry.
+
+export const pin = {
+  id: 'pin',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.9], // NOSONAR
+  graphic: graphics.dot,
+  svg: `<path d="M19 33.499c-5.318-5-12-9.509-12-16.998 0-6.583 5.417-12 12-12s12 5.417 12 12c0 7.489-6.682 11.998-12 16.998z" fill="none" stroke="{{selectedColor}}" stroke-width="{{selectedWidth}}"/>
+  <path d="M19 33.499c-5.318-5-12-9.509-12-16.998 0-6.583 5.417-12 12-12s12 5.417 12 12c0 7.489-6.682 11.998-12 16.998z" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="{{haloWidth}}"/>
+  <g transform="translate(19, 16) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>`
+}
+
+export const circle = {
+  id: 'circle',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.5],
+  graphic: graphics.dot,
+  svg: `<path d="M19 7C12.376 7 7 12.376 7 19s5.376 12 12 12a12.01 12.01 0 0 0 12-12A12.01 12.01 0 0 0 19 7z" fill="none" stroke="{{selectedColor}}" stroke-width="{{selectedWidth}}"/>
+  <path d="M19 7C12.376 7 7 12.376 7 19s5.376 12 12 12a12.01 12.01 0 0 0 12-12A12.01 12.01 0 0 0 19 7z" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="{{haloWidth}}"/>
+  <g transform="translate(19, 19) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>`
+}
+
+export const square = {
+  id: 'square',
+  viewBox: '0 0 38 38',
+  anchor: [0.5, 0.5],
+  graphic: graphics.dot,
+  svg: `<path d="M28 7a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H10a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h18z" fill="none" stroke="{{selectedColor}}" stroke-width="{{selectedWidth}}"/>
+  <path d="M28 7a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H10a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h18z" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="{{haloWidth}}"/>
+  <g transform="translate(19, 19) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>`
+}

package/src/scss/main.scss

@@ -19,6 +19,7 @@
 @use '../App/components/KeyboardHelp/KeyboardHelp.module';
 @use '../App/components/MapButton/MapButton.module';
 @use '../App/components/Panel/Panel.module';
+@use '../App/components/Icon/Icon.module';
 @use '../App/components/Viewport/Viewport.module';
 @use '../App/components/Tooltip/Tooltip.module';
 @use '../App/components/PopupMenu/PopupMenu.module';

package/src/scss/settings/_colors.scss

@@ -35,10 +35,6 @@
     --attributions-foreground-color: #0b0c0c;
     --attributions-background-color: #ffffff80;
 
-    // Map overlays, such as scale bar, target marker etc
-    --map-overlay-foreground-color: #0b0c0c;
-    --map-overlay-halo-color: #ffffff;
-
     // Fixed colours (Dont chnage with dark mode)
     --fixed-foreground-color: #0b0c0c;
 
@@ -78,8 +74,3 @@
     --content-link-color: #ffffff;
 }
 
-// Map color scheme specific overrides
-:root .im-o-app--dark-map {
-  --map-overlay-foreground-color: #ffffff;
-  --map-overlay-halo-color: #0b0c0c;
-}

package/src/scss/settings/_dimensions.scss

@@ -9,7 +9,6 @@
     --button-padding: 8px;
     --button-icon-label-offset: 7px;
     --label-button-padding: 10px;
-    --touch-button-size: 50px;
 
     // Borders and focus
     --app-border-width: 1px;

package/src/services/patternRegistry.js

@@ -0,0 +1,40 @@
+import { BUILT_IN_PATTERNS } from '../config/patternConfig.js'
+
+const patterns = new Map()
+
+export const patternRegistry = {
+  /**
+   * Register a named pattern.
+   *
+   * @param {string} id - Unique pattern name (e.g. 'my-hatch')
+   * @param {string} svgContent - Inner SVG path content in a 16×16 coordinate space.
+   *   Use {{foregroundColor}} and {{backgroundColor}} tokens for colour injection.
+   */
+  register (id, svgContent) {
+    patterns.set(id, { id, svgContent })
+  },
+
+  /**
+   * Retrieve a registered pattern by name.
+   *
+   * @param {string} id
+   * @returns {{ id: string, svgContent: string }|undefined}
+   */
+  get (id) {
+    return patterns.get(id)
+  },
+
+  /**
+   * Returns all registered patterns.
+   *
+   * @returns {{ id: string, svgContent: string }[]}
+   */
+  list () {
+    return [...patterns.values()]
+  }
+}
+
+// Seed built-in patterns
+Object.entries(BUILT_IN_PATTERNS).forEach(([id, svgContent]) => {
+  patternRegistry.register(id, svgContent)
+})

package/src/services/patternRegistry.test.js

@@ -0,0 +1,48 @@
+import { patternRegistry } from './patternRegistry.js'
+
+describe('patternRegistry', () => {
+  describe('built-in patterns', () => {
+    test.each([
+      'cross-hatch',
+      'diagonal-cross-hatch',
+      'forward-diagonal-hatch',
+      'backward-diagonal-hatch',
+      'horizontal-hatch',
+      'vertical-hatch',
+      'dot',
+      'diamond'
+    ])('seeds built-in pattern: %s', (id) => {
+      const pattern = patternRegistry.get(id)
+      expect(pattern).toBeDefined()
+      expect(pattern.id).toBe(id)
+      expect(typeof pattern.svgContent).toBe('string')
+      expect(pattern.svgContent.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('register / get', () => {
+    test('registers a custom pattern and retrieves it by id', () => {
+      patternRegistry.register('test-hatch', '<path d="M0 0L8 8" stroke="{{foreground}}"/>')
+      const result = patternRegistry.get('test-hatch')
+      expect(result).toEqual({ id: 'test-hatch', svgContent: '<path d="M0 0L8 8" stroke="{{foreground}}"/>' })
+    })
+
+    test('returns undefined for an unregistered id', () => {
+      expect(patternRegistry.get('nonexistent-pattern')).toBeUndefined()
+    })
+
+    test('overwrite an existing pattern by re-registering the same id', () => {
+      patternRegistry.register('overwrite-test', '<path d="M0 0"/>')
+      patternRegistry.register('overwrite-test', '<path d="M1 1"/>')
+      expect(patternRegistry.get('overwrite-test').svgContent).toBe('<path d="M1 1"/>')
+    })
+  })
+
+  describe('list', () => {
+    test('returns all registered patterns including built-ins', () => {
+      const all = patternRegistry.list()
+      expect(all.length).toBeGreaterThanOrEqual(8)
+      expect(all.every(p => p.id && p.svgContent)).toBe(true)
+    })
+  })
+})

package/src/services/symbolRegistry.js

@@ -0,0 +1,113 @@
+import { getValueForStyle } from '../utils/getValueForStyle.js'
+import { symbolDefaults, pin, circle, square, graphics } from '../config/symbolConfig.js'
+import { SCHEME_COLORS } from '../config/mapTheme.js'
+
+const symbols = new Map()
+let _constructorDefaults = {}
+
+// Keys that are structural — not token values for SVG substitution
+const STRUCTURAL = new Set(['id', 'svg', 'viewBox', 'anchor', 'symbol', 'symbolSvgContent'])
+
+// selectedWidth is app-wide — not overridable at symbol registration level.
+// selectedColor is a map style concern — always injected from mapStyle, never from cascade.
+const REGISTRY_EXCLUDED = new Set([...STRUCTURAL, 'selectedWidth'])
+
+function resolveValues (symbolDef, markerValues, mapStyle) {
+  const mapStyleId = mapStyle?.id
+  const symbolTokens = Object.fromEntries(
+    Object.entries(symbolDef || {}).filter(([k]) => !REGISTRY_EXCLUDED.has(k))
+  )
+  const constructorTokens = Object.fromEntries(
+    Object.entries(_constructorDefaults).filter(([k]) => !STRUCTURAL.has(k))
+  )
+  const defined = Object.fromEntries(
+    Object.entries(markerValues).filter(([, v]) => v != null)
+  )
+  const merged = { ...symbolDefaults, ...constructorTokens, ...symbolTokens, ...defined }
+  // haloColor and selectedColor are map style concerns — always injected from mapStyle, never from the cascade
+  const scheme = SCHEME_COLORS[mapStyle?.mapColorScheme] ?? SCHEME_COLORS.light
+  merged.haloColor = mapStyle?.haloColor ?? scheme.haloColor
+  merged.selectedColor = mapStyle?.selectedColor ?? scheme.selectedColor
+  if (typeof merged.graphic === 'string' && graphics[merged.graphic]) {
+    merged.graphic = graphics[merged.graphic]
+  }
+  return Object.fromEntries(
+    Object.entries(merged).map(([token, value]) => [token, getValueForStyle(value, mapStyleId) || ''])
+  )
+}
+
+function resolveLayer (svgString, values) {
+  return Object.entries(values).reduce(
+    (svg, [token, value]) => svg.replaceAll(`{{${token}}}`, value),
+    svgString
+  )
+}
+
+export const symbolRegistry = {
+  /**
+   * Set constructor-level defaults. Called once during app initialisation.
+   * Merges onto symbolDefaults to form the app-wide token baseline.
+   *
+   * @param {Object} defaults - Constructor symbolDefaults config
+   */
+  setDefaults (defaults) {
+    _constructorDefaults = defaults || {}
+  },
+
+  /**
+   * Returns the merged app-wide defaults (hardcoded + constructor overrides).
+   * Includes both structural properties (symbol, viewBox, anchor) and token values.
+   *
+   * @returns {Object}
+   */
+  getDefaults () {
+    return { ...symbolDefaults, ..._constructorDefaults }
+  },
+
+  register (symbolDef) {
+    symbols.set(symbolDef.id, symbolDef)
+  },
+
+  get (id) {
+    return symbols.get(id)
+  },
+
+  list () {
+    return [...symbols.values()]
+  },
+
+  /**
+   * Resolve a symbol's SVG string for normal (unselected) rendering.
+   * The selected ring is always hidden regardless of cascade values.
+   *
+   * @param {Object} symbolDef - Symbol definition
+   * @param {Object} styleColors - Token overrides
+   * @param {Object} mapStyle - Current map style config (provides selectedColor, haloColor)
+   * @returns {string} Resolved SVG string
+   */
+  resolve (symbolDef, styleColors, mapStyle) {
+    const colors = resolveValues(symbolDef, styleColors || {}, mapStyle)
+    if (!symbolDef) { return '' }
+    colors.selectedColor = ''
+    return resolveLayer(symbolDef.svg, colors)
+  },
+
+  /**
+   * Resolve a symbol's SVG string for selected rendering.
+   * selectedColor comes from mapStyle.selectedColor (or the hardcoded fallback).
+   *
+   * @param {Object} symbolDef - Symbol definition
+   * @param {Object} styleColors - Token overrides
+   * @param {Object} mapStyle - Current map style config (provides selectedColor, haloColor)
+   * @returns {string} Resolved SVG string
+   */
+  resolveSelected (symbolDef, styleColors, mapStyle) {
+    const colors = resolveValues(symbolDef, styleColors || {}, mapStyle)
+    if (!symbolDef) { return '' }
+    return resolveLayer(symbolDef.svg, colors)
+  }
+}
+
+symbolRegistry.register(pin)
+symbolRegistry.register(circle)
+symbolRegistry.register(square)