Create separate components for the various Dataset SVGs

demo/js/index.js

@@ -220,7 +220,7 @@ const datasetsPlugin = createDatasetsPlugin({
 		maxZoom: 24,
 		showInKey: true,
 		toggleVisibility: true,
-		visibility: 'hidden',
+		// visibility: 'hidden',
 		style: {
 			stroke: '#b58840',
 			fill: 'transparent',

plugins/beta/datasets/src/components/KeySvg.jsx

@@ -0,0 +1,24 @@
+import { hasSymbol, getSymbolDef } from '../../../../../src/utils/symbolUtils.js'
+import { hasPattern } from '../../../../../src/utils/patternUtils.js'
+import { KeySvgPattern } from './KeySvgPattern.jsx'
+import { KeySvgSymbol } from './KeySvgSymbol.jsx'
+import { KeySvgLine } from './KeySvgLine.jsx'
+import { KeySvgRect } from './KeySvgRect.jsx'
+
+export const KeySvg = (props) => {
+  const { symbolRegistry } = props
+  const symbolDef = hasSymbol(props) && getSymbolDef(props, symbolRegistry)
+  if (symbolDef) {
+    return <KeySvgSymbol {...props} symbolDef={symbolDef} />
+  }
+
+  if (hasPattern(props)) {
+    return <KeySvgPattern {...props} />
+  }
+
+  if (props.keySymbolShape === 'line') {
+    return <KeySvgLine {...props} />
+  }
+
+  return <KeySvgRect {...props} />
+}

plugins/beta/datasets/src/components/KeySvgLine.jsx

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

plugins/beta/datasets/src/components/KeySvgPattern.jsx

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

plugins/beta/datasets/src/components/KeySvgRect.jsx

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

plugins/beta/datasets/src/components/KeySvgSymbol.jsx

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

plugins/beta/datasets/src/components/svgProperties.js

@@ -0,0 +1,20 @@
+export const SVG_SIZE = 20
+export const SVG_CENTER = SVG_SIZE / 2
+const SVG_SYMBOL_SIZE = 38
+
+export const svgProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: SVG_SIZE,
+  height: SVG_SIZE,
+  viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
+  className: 'am-c-datasets-key-symbol',
+  'aria-hidden': 'true',
+  focusable: 'false'
+}
+
+export const svgSymbolProps = {
+  ...svgProps,
+  width: SVG_SYMBOL_SIZE,
+  height: SVG_SYMBOL_SIZE,
+  className: 'am-c-datasets-key-symbol am-c-datasets-key-symbol--point'
+}

plugins/beta/datasets/src/index.js

@@ -2,7 +2,6 @@
 import './datasets.scss'
 
 export default function createPlugin (options = { }) {
-  console.log('options', options)
   const plugin = {
     noKeyItemText: 'No features displayed',
     ...options,

plugins/beta/datasets/src/panels/Key.jsx

@@ -1,14 +1,8 @@
 import React from 'react'
 import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
-import { hasPattern, getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js'
 import { mergeSublayer } from '../utils/mergeSublayer.js'
-import { hasSymbol, getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
-import { EmptyKey } from './EmptyKey.jsx'
-
-const SVG_SIZE = 20
-const SVG_SYMBOL_SIZE = 38
-const SVG_CENTER = SVG_SIZE / 2
-const PATTERN_INSET = 2
+import { EmptyKey } from '../components/EmptyKey.jsx'
+import { KeySvg } from '../components/KeySvg.jsx'
 
 export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
   if (!pluginState?.key?.items?.length) {
@@ -17,80 +11,11 @@ export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
   const { mapStyle } = mapState
   const { symbolRegistry, patternRegistry } = services
 
-  // Key symbols are rendered in the app UI panel, not on the map, so use the app color
-  // scheme for halo fallback — not the map color scheme (which could differ, e.g. aerial).
-  const appColorScheme = mapStyle?.appColorScheme ?? 'light'
-  const keyMapStyle = mapStyle ? { ...mapStyle, mapColorScheme: appColorScheme } : mapStyle
-
-  const itemSymbol = (config) => {
-    const svgProps = {
-      xmlns: 'http://www.w3.org/2000/svg',
-      width: hasSymbol(config) ? SVG_SYMBOL_SIZE : SVG_SIZE,
-      height: hasSymbol(config) ? SVG_SYMBOL_SIZE : SVG_SIZE,
-      viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
-      className: `am-c-datasets-key-symbol${hasSymbol(config) ? ' am-c-datasets-key-symbol--point' : ''}`,
-      'aria-hidden': 'true',
-      focusable: 'false'
-    }
-
-    if (hasSymbol(config)) {
-      const symbolDef = getSymbolDef(config, symbolRegistry)
-      if (symbolDef) {
-        const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(config), keyMapStyle)
-        const viewBox = getSymbolViewBox(config, symbolDef)
-        return (
-          <svg {...svgProps} viewBox={viewBox}>
-            <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />
-          </svg>
-        )
-      }
-    }
-
-    if (hasPattern(config)) {
-      const paths = getKeyPatternPaths(config, mapStyle.id, patternRegistry)
-      return (
-        <svg {...svgProps}>
-          <g dangerouslySetInnerHTML={{ __html: paths.border }} />
-          <g transform={`translate(${PATTERN_INSET}, ${PATTERN_INSET})`} dangerouslySetInnerHTML={{ __html: paths.content }} />
-        </svg>
-      )
-    }
-
-    return (
-      <svg {...svgProps}>
-        {config.keySymbolShape === 'line'
-          ? (
-            <line
-              x1={config.strokeWidth / 2}
-              y1={SVG_CENTER}
-              x2={SVG_SIZE - config.strokeWidth / 2}
-              y2={SVG_CENTER}
-              stroke={getValueForStyle(config.stroke, mapStyle.id)}
-              strokeWidth={config.strokeWidth}
-              strokeLinecap='round'
-            />
-            )
-          : (
-            <rect
-              x={config.strokeWidth / 2}
-              y={config.strokeWidth / 2}
-              width={SVG_SIZE - config.strokeWidth}
-              height={SVG_SIZE - config.strokeWidth}
-              rx={config.strokeWidth}
-              ry={config.strokeWidth}
-              fill={getValueForStyle(config.fill, mapStyle.id)}
-              stroke={getValueForStyle(config.stroke, mapStyle.id)}
-              strokeWidth={config.strokeWidth}
-              strokeLinejoin='round'
-            />
-            )}
-      </svg>
-    )
-  }
-
   const renderEntry = (key, config) => (
     <dl key={key} className='im-c-datasets-key__item'>
-      <dt className='im-c-datasets-key__item-symbol'>{itemSymbol(config)}</dt>
+      <dt className='im-c-datasets-key__item-symbol'>
+        <KeySvg {...config} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
+      </dt>
       <dd className='im-c-datasets-key__item-label'>
         {config.label}
         {config.symbolDescription && (