@defra/interactive-map 0.0.40-alpha → 0.0.41-alpha

package/src/services/eventBus.test.js

@@ -175,6 +175,89 @@ describe('emitWhenReady', () => {
   })
 })
 
+describe('emitWhenRequested', () => {
+  let bus
+  beforeEach(() => { bus = createEventBus() })
+
+  it('immediately emits eventNameReady so an already-waiting listener receives the args', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('emits eventNameReady with args whenever eventNameRequested fires after registration', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    handler.mockClear()
+    bus.emit('datasets:registryRequested')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('forwards multiple args to the Ready event', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    bus.emitWhenRequested('datasets:registry', 'a', 'b')
+    expect(handler).toHaveBeenCalledWith('a', 'b')
+  })
+
+  it('returns a cleanup function that stops responding to future Requested events', () => {
+    const handler = jest.fn()
+    bus.on('datasets:registryReady', handler)
+    const remove = bus.emitWhenRequested('datasets:registry', 'registryValue')
+    handler.mockClear()
+    remove()
+    bus.emit('datasets:registryRequested')
+    expect(handler).not.toHaveBeenCalled()
+  })
+})
+
+describe('requestOnce', () => {
+  let bus
+  beforeEach(() => { bus = createEventBus() })
+
+  it('calls the handler when eventNameReady fires', () => {
+    const handler = jest.fn()
+    bus.requestOnce('datasets:registry', handler)
+    bus.emit('datasets:registryReady', 'registryValue')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('calls the handler only once even if eventNameReady fires multiple times', () => {
+    const handler = jest.fn()
+    bus.requestOnce('datasets:registry', handler)
+    bus.emit('datasets:registryReady', 'first')
+    bus.emit('datasets:registryReady', 'second')
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('emits eventNameRequested so the provider side knows it is needed', () => {
+    const requestedHandler = jest.fn()
+    bus.on('datasets:registryRequested', requestedHandler)
+    bus.requestOnce('datasets:registry', jest.fn())
+    expect(requestedHandler).toHaveBeenCalled()
+  })
+
+  it('returns this for chaining', () => {
+    expect(bus.requestOnce('datasets:registry', jest.fn())).toBe(bus)
+  })
+
+  it('works with emitWhenRequested when requestOnce is called first', () => {
+    const handler = jest.fn()
+    bus.requestOnce('datasets:registry', handler)
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+
+  it('works with emitWhenRequested when emitWhenRequested is called first', () => {
+    const handler = jest.fn()
+    bus.emitWhenRequested('datasets:registry', 'registryValue')
+    bus.requestOnce('datasets:registry', handler)
+    expect(handler).toHaveBeenCalledWith('registryValue')
+  })
+})
+
 describe('createEventBus factory', () => {
   /**
    * Test to ensure coverage for the factory function (Line 50).

package/src/services/symbolRegistry.js

@@ -2,7 +2,7 @@ import { getValueForStyle } from '../utils/getValueForStyle.js'
 import { symbolDefaults, pin, circle, square, graphics } from '../config/symbolConfig.js'
 import { getSymbolStyleColors, getSymbolViewBox } from '../utils/symbolUtils.js'
 import { THEME_COLORS } from '../config/mapTheme.js'
-import { rasteriseToImageData } from '../../providers/maplibre/src/utils/rasteriseToImageData.js'
+import { rasteriseToImageData } from '../utils/rasteriseToImageData.js'
 
 const symbols = new Map()
 // Module-level cache: imageId → ImageData. Avoids re-rasterising identical symbols.

package/src/types.js

@@ -28,8 +28,18 @@
  *
  * @typedef {Object} ControlBreakpointConfig
  *
+ * @property {number} [order]
+ * The order the control appears within its slot (or, when targeting a panel, within that
+ * panel's body — see `slot` below).
+ *
  * @property {string} slot
- * Slot identifier.
+ * Slot identifier. In addition to the standard layout slots, a control may target a panel's
+ * body directly by setting this to `'<panelId>-panel'` (the panel id in kebab-case, suffixed
+ * with `-panel` — mirrors the `'<buttonId>-button'` convention panels use to render next to a
+ * specific button). Any plugin may target any panel this way, including one registered by a
+ * different plugin. The panel's own content and every control targeting it are ordered together
+ * via `order`. Only supported by panels with a `render` component — a panel using static `html`
+ * can't host injected controls, since `dangerouslySetInnerHTML` owns its body's children.
  */
 
 /**

package/webpack.umd.mjs

@@ -145,6 +145,8 @@ const ALL_BUILDS = [
   { entryPath: './plugins/search/src/index.js', libraryPath: 'searchPlugin', outDir: 'plugins/search/dist/umd' },
   { entryPath: './plugins/interact/src/index.js', libraryPath: 'interactPlugin', outDir: 'plugins/interact/dist/umd' },
   { entryPath: './plugins/datasets/src/index.js', libraryPath: 'datasetsPlugin', outDir: 'plugins/datasets/dist/umd', cssOutDir: 'plugins/datasets/dist' },
+  { entryPath: './plugins/map-key/src/index.js', libraryPath: 'mapKeyPlugin', outDir: 'plugins/map-key/dist/umd', cssOutDir: 'plugins/map-key/dist' },
+  { entryPath: './plugins/menu/src/index.js', libraryPath: 'menuPlugin', outDir: 'plugins/menu/dist/umd', cssOutDir: 'plugins/menu/dist' },
   { entryPath: './plugins/beta/map-styles/src/index.js', libraryPath: 'mapStylesPlugin', outDir: 'plugins/beta/map-styles/dist/umd' },
   { entryPath: './plugins/draw/src/index.js', libraryPath: 'drawPlugin', outDir: 'plugins/draw/dist/umd' },
   { entryPath: './plugins/beta/draw-ml/src/index.js', libraryPath: 'drawMLPlugin', outDir: 'plugins/beta/draw-ml/dist/umd' },

package/plugins/datasets/src/components/Key/EmptyKey.jsx

@@ -1,7 +0,0 @@
-export const EmptyKey = ({ text }) => {
-  return (
-    <div className='im-c-datasets-key'>
-      <p className='im-c-datasets-key__empty-message'>{text}</p>
-    </div>
-  )
-}

package/plugins/datasets/src/components/Key/Key.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { EmptyKey } from './EmptyKey.jsx'
-import { KeyItem } from './KeyItem.jsx'
-import { KeyGroupItem } from './KeyGroupItem.jsx'
-import { datasetRegistry } from '../../registry/datasetRegistry.js'
-
-export const Key = ({
-  pluginConfig: { noKeyItemText },
-  mapState: { mapStyle },
-  services: { symbolRegistry, patternRegistry }
-}) => {
-  const { items: keyGroups, hasGroups } = datasetRegistry.keyItems()
-
-  if (!keyGroups?.length) {
-    return (<EmptyKey text={noKeyItemText} />)
-  }
-
-  const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
-  return (
-    <div className={containerClass}>{keyGroups.map(item => {
-      const key = item.type === 'group' ? item.groupLabel.toLowerCase().replaceAll(/\s+/g, '-') : item.dataset.id
-
-      if (item.type === 'sublayers' || item.type === 'group') {
-        const datasets = item.type === 'sublayers' ? item.sublayers : item.datasets
-        const label = item.type === 'sublayers' ? item.dataset.label : item.groupLabel
-        return (
-          <KeyGroupItem
-            key={key}
-            headingId={`key-heading-${key}`}
-            label={label}
-            datasets={datasets}
-            symbolRegistry={symbolRegistry}
-            patternRegistry={patternRegistry}
-            mapStyle={mapStyle}
-          />
-        )
-      }
-      return (
-        <KeyItem
-          key={key}
-          registryDataset={item.dataset}
-          symbolRegistry={symbolRegistry}
-          patternRegistry={patternRegistry}
-          mapStyle={mapStyle}
-        />
-      )
-    })}
-    </div>
-  )
-}

package/plugins/datasets/src/components/Key/KeyGroupItem.jsx

@@ -1,18 +0,0 @@
-import { KeyItem } from './KeyItem.jsx'
-
-export const KeyGroupItem = ({ headingId, label, datasets, symbolRegistry, patternRegistry, mapStyle }) => {
-  return (
-    <section className='im-c-datasets-key__group' aria-labelledby={headingId}>
-      <h3 id={headingId} className='im-c-datasets-key__group-heading'>{label}</h3>
-      {datasets.map(dataset =>
-        <KeyItem
-          key={`${dataset.id}`}
-          registryDataset={dataset}
-          symbolRegistry={symbolRegistry}
-          patternRegistry={patternRegistry}
-          mapStyle={mapStyle}
-        />
-      )}
-    </section>
-  )
-}

package/plugins/datasets/src/components/Key/KeyItem.jsx

@@ -1,23 +0,0 @@
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
-import { KeySvg } from './KeySvg.jsx'
-
-export const KeyItem = ({ registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
-  if (!registryDataset.showInKey) {
-    return null
-  }
-  return (
-    <dl className='im-c-datasets-key__item'>
-      <dt className='im-c-datasets-key__item-symbol'>
-        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
-      </dt>
-      <dd className='im-c-datasets-key__item-label'>
-        {registryDataset.label}
-        {registryDataset.symbolDescription && (
-          <span className='govuk-visually-hidden'>
-            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
-          </span>
-        )}
-      </dd>
-    </dl>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvg.jsx

@@ -1,22 +0,0 @@
-import { KeySvgPattern } from './KeySvgPattern.jsx'
-import { KeySvgSymbol } from './KeySvgSymbol.jsx'
-import { KeySvgLine } from './KeySvgLine.jsx'
-import { KeySvgRect } from './KeySvgRect.jsx'
-
-export const KeySvg = ({ symbolRegistry, registryDataset, mapStyle, patternRegistry }) => {
-  const { hasSymbol, hasPattern, style } = registryDataset
-  const symbolDef = hasSymbol && symbolRegistry.getSymbolDef(style)
-  if (symbolDef) {
-    return <KeySvgSymbol mapStyle={mapStyle} registryDataset={registryDataset} symbolRegistry={symbolRegistry} symbolDef={symbolDef} />
-  }
-
-  if (hasPattern) {
-    return <KeySvgPattern mapStyle={mapStyle} registryDataset={registryDataset} patternRegistry={patternRegistry} />
-  }
-
-  if (style.keySymbolShape === 'line') {
-    return <KeySvgLine mapStyle={mapStyle} registryDataset={registryDataset} />
-  }
-
-  return <KeySvgRect mapStyle={mapStyle} registryDataset={registryDataset} />
-}

package/plugins/datasets/src/components/Key/KeySvgLine.jsx

@@ -1,19 +0,0 @@
-import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js'
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
-
-export const KeySvgLine = ({ mapStyle, registryDataset }) => {
-  const { style } = registryDataset
-  return (
-    <svg {...svgProps}>
-      <line
-        x1={style.strokeWidth / 2}
-        y1={SVG_CENTER}
-        x2={SVG_SIZE - style.strokeWidth / 2}
-        y2={SVG_CENTER}
-        stroke={getValueForStyle(style.stroke, mapStyle.id)}
-        strokeWidth={style.strokeWidth}
-        strokeLinecap='round'
-      />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvgPattern.jsx

@@ -1,13 +0,0 @@
-import { svgProps } from './svgProperties.js'
-const PATTERN_INSET = 2
-
-export const KeySvgPattern = ({ patternRegistry, registryDataset, mapStyle }) => {
-  const { style } = registryDataset
-  const paths = patternRegistry.getKeyPatternPaths(style, mapStyle.id)
-  return (
-    <svg {...svgProps}>
-      <g dangerouslySetInnerHTML={{ __html: paths.border }} />
-      <g transform={`translate(${PATTERN_INSET}, ${PATTERN_INSET})`} dangerouslySetInnerHTML={{ __html: paths.content }} />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvgRect.jsx

@@ -1,22 +0,0 @@
-import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
-import { svgProps, SVG_SIZE } from './svgProperties.js'
-
-export const KeySvgRect = ({ mapStyle, registryDataset }) => {
-  const { style } = registryDataset
-  return (
-    <svg {...svgProps}>
-      <rect
-        x={style.strokeWidth / 2}
-        y={style.strokeWidth / 2}
-        width={SVG_SIZE - style.strokeWidth}
-        height={SVG_SIZE - style.strokeWidth}
-        rx={style.strokeWidth}
-        ry={style.strokeWidth}
-        fill={getValueForStyle(style.fill, mapStyle.id)}
-        stroke={getValueForStyle(style.stroke, mapStyle.id)}
-        strokeWidth={style.strokeWidth}
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/Key/KeySvgSymbol.jsx

@@ -1,16 +0,0 @@
-import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
-import { svgSymbolProps } from './svgProperties.js'
-
-export const KeySvgSymbol = ({ symbolRegistry, registryDataset, mapStyle, symbolDef }) => {
-  const { style } = registryDataset
-  const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
-  const keyMapStyle = { ...mapStyle, mapColorScheme }
-
-  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle)
-  const viewBox = getSymbolViewBox(style, symbolDef)
-  return (
-    <svg {...svgSymbolProps} viewBox={viewBox}>
-      <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
-    </svg>
-  )
-}

package/plugins/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.jsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
-import { LayersMenuRadio } from './LayersMenuRadio.jsx'
-
-export const LayersRadioGroupWrapper = ({ pluginState, menuGroup }) => {
-  const { id, items, visibleWhen } = menuGroup
-  const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
-  if (!visible) {
-    return null
-  }
-
-  const { menuState, dispatch } = pluginState
-  const value = menuState[id]
-  const handleChange = (event) => {
-    dispatch({ type: 'UPDATE_MENU_STATE', payload: { [id]: event.target.value } })
-  }
-
-  const wrapperClass = 'govuk-form-group im-c-datasets-layers-group'
-  return (
-    <div key={menuGroup.id} className={wrapperClass}>
-      <fieldset className='im-c-datasets-layers-group__fieldset'>
-        <legend className='im-c-datasets-layers-group__legend'>
-          <h3>
-            {menuGroup.label}
-          </h3>
-        </legend>
-        <div className='govuk-radios govuk-radios--small' data-module='govuk-radios'>
-          {items.map((menuGroupItem) =>
-            <LayersMenuRadio
-              key={menuGroupItem.id}
-              menuGroupItem={menuGroupItem}
-              name={id}
-              checked={menuGroupItem.id === value}
-              onChange={handleChange}
-            />
-          )}
-        </div>
-      </fieldset>
-    </div>
-  )
-}