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

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

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

package/plugins/beta/datasets/src/components/EmptyKey.test.jsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import { EmptyKey } from './EmptyKey'
+
+describe('EmptyKey', () => {
+  const text = 'No features available'
+
+  it('renders the wrapper div with the correct class', async () => {
+    const { container } = render(<EmptyKey text={text} />)
+    expect(container.querySelector('.im-c-datasets-key')).toBeTruthy()
+  })
+
+  it('renders the empty message paragraph with the correct class', async () => {
+    const { container } = render(<EmptyKey text={text} />)
+    expect(container.querySelector('.im-c-datasets-key__empty-message')).toBeTruthy()
+  })
+
+  it('renders the provided text', async () => {
+    render(<EmptyKey text={text} />)
+    expect(screen.getByText(text)).toBeTruthy()
+  })
+})

package/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} />
+}

package/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>
+  )
+}

package/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>
+  )
+}

package/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>
+  )
+}

package/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>
+  )
+}

package/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'
+}

package/plugins/beta/datasets/src/datasets.js

@@ -11,7 +11,7 @@ export const createDatasets = ({
   adapter,
   pluginConfig,
   pluginStateRef,
-  mapStyleId,
+  mapStyle,
   mapProvider,
   events,
   eventBus
@@ -25,7 +25,7 @@ export const createDatasets = ({
 
   // Initialise all datasets via the adapter, then set up dynamic sources
   const processedDatasets = datasets.map(d => applyDatasetDefaults(d, datasetDefaults))
-  adapter.init(processedDatasets, mapStyleId).then(() => {
+  adapter.init(processedDatasets, mapStyle).then(() => {
     processedDatasets.forEach(dataset => {
       if (!isDynamicSource(dataset)) {
         return
@@ -42,16 +42,25 @@ export const createDatasets = ({
     eventBus.emit('datasets:ready')
   })
 
+  let currentMapStyle = mapStyle
+
   // Handle basemap style changes — delegate entirely to the adapter
-  const onSetStyle = (e) => {
-    adapter.onStyleChange(getDatasets(), e.id, getHiddenFeatures(), dynamicSources)
+  const onSetStyle = (newMapStyle) => {
+    currentMapStyle = newMapStyle
+    adapter.onStyleChange(getDatasets(), newMapStyle, getHiddenFeatures(), dynamicSources)
+  }
+
+  const onSizeChange = () => {
+    adapter.onSizeChange(getDatasets(), currentMapStyle)
   }
 
   eventBus.on(events.MAP_SET_STYLE, onSetStyle)
+  eventBus.on(events.MAP_SIZE_CHANGE, onSizeChange)
 
   return {
     remove () {
       eventBus.off(events.MAP_SET_STYLE, onSetStyle)
+      eventBus.off(events.MAP_SIZE_CHANGE, onSizeChange)
 
       // Clean up dynamic sources
       dynamicSources.forEach(source => source.destroy())

package/plugins/beta/datasets/src/defaults.js

@@ -16,12 +16,14 @@ const datasetDefaults = {
 const STYLE_PROPS = [
   'stroke', 'strokeWidth', 'strokeDashArray',
   'fill', 'fillPattern', 'fillPatternSvgContent', 'fillPatternForegroundColor', 'fillPatternBackgroundColor',
-  'opacity', 'symbolDescription', 'keySymbolShape'
+  'opacity', 'symbolDescription', 'keySymbolShape',
+  'symbol', 'symbolSvgContent', 'symbolViewBox', 'symbolAnchor',
+  'symbolBackgroundColor', 'symbolForegroundColor', 'symbolHaloWidth', 'symbolGraphic'
 ]
 
 // Props whose presence in a style object indicates a custom visual style.
 // When any are set, the default symbolDescription is not appropriate.
-const VISUAL_STYLE_PROPS = ['stroke', 'fill', 'fillPattern', 'fillPatternSvgContent']
+const VISUAL_STYLE_PROPS = ['stroke', 'fill', 'fillPattern', 'fillPatternSvgContent', 'symbol', 'symbolSvgContent']
 
 const hasCustomVisualStyle = (style) =>
   VISUAL_STYLE_PROPS.some(prop => prop in style)

package/plugins/beta/datasets/src/index.js

@@ -1,8 +1,9 @@
 // /plugins/datasets/index.js
 import './datasets.scss'
 
-export default function createPlugin (options = {}) {
+export default function createPlugin (options = { }) {
   const plugin = {
+    noKeyItemText: 'No features displayed',
     ...options,
     id: 'datasets',
     load: async () => {

package/plugins/beta/datasets/src/manifest.js

@@ -103,7 +103,7 @@ export const manifest = {
 
   icons: [{
     id: 'layers',
-    svgContent: '<path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"></path><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"></path>'
+    svgContent: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'
   }, {
     id: 'key',
     svgContent: '<path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/>'

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

@@ -1,95 +1,21 @@
 import React from 'react'
 import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
-import { hasPattern, getKeyPatternPaths } from '../styles/patterns.js'
 import { mergeSublayer } from '../utils/mergeSublayer.js'
+import { EmptyKey } from '../components/EmptyKey.jsx'
+import { KeySvg } from '../components/KeySvg.jsx'
 
-const SVG_SIZE = 20
-const SVG_CENTER = SVG_SIZE / 2
-const PATTERN_INSET = 2
-
-const buildKeyGroups = (datasets) => {
-  const seenGroups = new Set()
-  const items = []
-  datasets.forEach(dataset => {
-    if (dataset.sublayers?.length) {
-      items.push({ type: 'sublayers', dataset })
-      return
-    }
-    if (dataset.groupLabel) {
-      if (seenGroups.has(dataset.groupLabel)) {
-        return
-      }
-      seenGroups.add(dataset.groupLabel)
-      items.push({
-        type: 'group',
-        groupLabel: dataset.groupLabel,
-        datasets: datasets.filter(d => !d.sublayers?.length && d.groupLabel === dataset.groupLabel)
-      })
-      return
-    }
-    items.push({ type: 'flat', dataset })
-  })
-  return items
-}
-
-export const Key = ({ mapState, pluginState }) => {
-  const { mapStyle } = mapState
-
-  const itemSymbol = (config) => {
-    const svgProps = {
-      xmlns: 'http://www.w3.org/2000/svg',
-      width: SVG_SIZE,
-      height: SVG_SIZE,
-      viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
-      'aria-hidden': 'true',
-      focusable: 'false'
-    }
-
-    if (hasPattern(config)) {
-      const paths = getKeyPatternPaths(config, mapStyle.id)
-      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>
-    )
+export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
+  if (!pluginState?.key?.items?.length) {
+    return (<EmptyKey text={pluginConfig.noKeyItemText} />)
   }
+  const { mapStyle } = mapState
+  const { symbolRegistry, patternRegistry } = services
 
   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 && (
@@ -101,11 +27,7 @@ export const Key = ({ mapState, pluginState }) => {
     </dl>
   )
 
-  const visibleDatasets = (pluginState.datasets || [])
-    .filter(dataset => dataset.showInKey && dataset.visibility !== 'hidden')
-
-  const keyGroups = buildKeyGroups(visibleDatasets)
-  const hasGroups = keyGroups.some(item => item.type === 'sublayers' || item.type === 'group')
+  const { items: keyGroups, hasGroups } = pluginState.key
   const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
 
   return (

package/plugins/beta/datasets/src/panels/Key.module.scss

@@ -1,10 +1,13 @@
 // When groups are present, every direct child gets a border-top
-.im-c-datasets-key--has-groups > * {
-  border-top: 1px solid var(--button-hover-color);
+.im-c-datasets-key > *:first-child {
+  padding-top: 5px;
+
+  .im-c-datasets-key__group-heading {
+    padding-top: 0;
+  }
 }
 
-// When no groups, only the first child gets a border-top
-.im-c-datasets-key:not(.im-c-datasets-key--has-groups) > *:first-child {
+.im-c-datasets-key--has-groups > *:not(:first-child) {
   border-top: 1px solid var(--button-hover-color);
 }
 
@@ -28,31 +31,39 @@
   padding-bottom: 10px;
   font-size: 1rem;
 
-  // When mixed with groups, flat items match group heading spacing
-  .im-c-datasets-key--has-groups > & {
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
-
   // First item inside a group — heading already provides top spacing
   .im-c-datasets-key__group &:first-child {
     padding-top: 0;
   }
 }
 
-// No-groups: first item needs 15px below the single border
-.im-c-datasets-key:not(.im-c-datasets-key--has-groups) > .im-c-datasets-key__item:first-child {
+.im-c-datasets-key--has-groups > .im-c-datasets-key__item:not(:first-child) {
   padding-top: 15px;
 }
 
+.im-c-datasets-key--has-groups > .im-c-datasets-key__item {
+  padding-bottom: 15px;
+}
+
+.im-c-datasets-key__group .im-c-datasets-key__item {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 // Last item in all scenarios — flat or inside the last group
 .im-c-datasets-key > .im-c-datasets-key__item:last-child,
 .im-c-datasets-key__group:last-child .im-c-datasets-key__item:last-child {
   padding-bottom: 5px;
 }
 
-.im-c-datasets-key__item svg {
+// Symbol
+
+.am-c-datasets-key-symbol {
   position: relative;
   flex-shrink: 0;
   margin: 0 13px 0 2px;
 }
+
+.am-c-datasets-key-symbol--point {
+  margin: -9px 3px -9px -7px;
+}

package/plugins/beta/datasets/src/panels/Layers.module.scss

@@ -1,12 +1,10 @@
-// When groups are present, every direct child (groups and flat items) gets a border-top
-.im-c-datasets-layers--has-groups > * {
+// When groups are present, every direct child except the first gets a border-top
+.im-c-datasets-layers--has-groups > *:not(:first-child) {
   border-top: 1px solid var(--button-hover-color);
 }
 
-// When no groups, only the first child gets a border-top with 15px padding
-.im-c-datasets-layers:not(.im-c-datasets-layers--has-groups) > *:first-child {
-  border-top: 1px solid var(--button-hover-color);
-  padding-top: 10px;
+.im-c-datasets-layers > *:first-child {
+  padding-top: 5px;
 }
 
 .im-c-datasets-layers > *:last-child {
@@ -20,7 +18,11 @@
 .im-c-datasets-layers__item {
   padding-bottom: 5px;
 
-  .im-c-datasets-layers--has-groups > & {
+  &:first-child {
+    padding-top: 0;
+  }
+
+  .im-c-datasets-layers--has-groups > &:not(:first-child) {
     padding-top: 5px;
   }
 
@@ -73,3 +75,7 @@
   font-weight: bold;
   color: var(--foreground-color);
 }
+
+.im-c-datasets-layers-group:first-child .im-c-datasets-layers-group__legend {
+  padding-top: 0;
+}

package/plugins/beta/datasets/src/reducer.js

@@ -1,7 +1,12 @@
 import { applyDatasetDefaults } from './defaults.js'
+import { keyReducer } from './reducers/keyReducer.js'
 
 const initialState = {
   datasets: null,
+  key: {
+    items: [],
+    hasGroups: false
+  },
   hiddenFeatures: {}, // { [layerId]: { idProperty: string, ids: string[] } }
   layerAdapter: null
 }
@@ -191,6 +196,7 @@ const setSublayerOpacity = (state, payload) => {
 const setLayerAdapter = (state, payload) => ({ ...state, layerAdapter: payload })
 
 const actions = {
+  BUILD_KEY_GROUPS: keyReducer,
   SET_DATASETS: setDatasets,
   ADD_DATASET: addDataset,
   REMOVE_DATASET: removeDataset,

package/plugins/beta/datasets/src/reducers/keyReducer.js

@@ -0,0 +1,34 @@
+export const keyReducer = (state) => {
+  const datasets = state.datasets || []
+  const seenGroups = new Set()
+  const items = []
+  let hasGroups = false
+  datasets.forEach(dataset => {
+    if (!dataset.showInKey || dataset.visibility === 'hidden') {
+      return
+    }
+    if (dataset.sublayers?.length) {
+      const { sublayerVisibility = [] } = dataset
+      if (Object.values(sublayerVisibility).some((value) => value !== 'hidden')) {
+        hasGroups = true
+        items.push({ type: 'sublayers', dataset })
+      }
+      return
+    }
+    if (dataset.groupLabel) {
+      if (seenGroups.has(dataset.groupLabel)) {
+        return
+      }
+      seenGroups.add(dataset.groupLabel)
+      hasGroups = true
+      items.push({
+        type: 'group',
+        groupLabel: dataset.groupLabel,
+        datasets: datasets.filter(d => !d.sublayers?.length && d.groupLabel === dataset.groupLabel)
+      })
+      return
+    }
+    items.push({ type: 'flat', dataset })
+  })
+  return { ...state, key: { items, hasGroups } }
+}

package/plugins/beta/datasets/src/utils/mergeSublayer.js

@@ -73,6 +73,14 @@ export const mergeSublayer = (dataset, sublayer) => {
     filter: combinedFilter,
     minZoom: dataset.minZoom,
     maxZoom: dataset.maxZoom,
+    symbol: sublayerStyle.symbol ?? dataset.symbol,
+    symbolSvgContent: sublayerStyle.symbolSvgContent ?? dataset.symbolSvgContent,
+    symbolViewBox: sublayerStyle.symbolViewBox ?? dataset.symbolViewBox,
+    symbolAnchor: sublayerStyle.symbolAnchor ?? dataset.symbolAnchor,
+    symbolBackgroundColor: sublayerStyle.symbolBackgroundColor ?? dataset.symbolBackgroundColor,
+    symbolForegroundColor: sublayerStyle.symbolForegroundColor ?? dataset.symbolForegroundColor,
+    symbolHaloWidth: sublayerStyle.symbolHaloWidth ?? dataset.symbolHaloWidth,
+    symbolGraphic: sublayerStyle.symbolGraphic ?? dataset.symbolGraphic,
     ...getFillProps(dataset, sublayerStyle)
   }
 }

package/plugins/beta/draw-es/dist/esm/im-draw-es-plugin.js

@@ -1 +1 @@
-import e from"@babel/runtime/helpers/defineProperty";import{useEffect as t}from"preact/compat";import r from"@arcgis/core/widgets/Sketch/SketchViewModel.js";import o from"@arcgis/core/layers/GraphicsLayer.js";import a from"@babel/runtime/helpers/asyncToGenerator";import*as n from"@arcgis/core/geometry/operators/simplifyOperator.js";import i from"@arcgis/core/Graphic.js";function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function p(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?l(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):l(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function u(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?c(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):c(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}function s(e){return{type:"simple-fill",color:[0,120,255,.2],outline:{color:"dark"===e?"#ffffff":"#d4351c",width:2}}}function d(e,t,r){return new i({geometry:{type:"polygon",rings:t,spatialReference:27700},attributes:{id:e},symbol:s(r)})}function y(e){if(null==e||!e.geometry)throw new Error("Invalid graphic");var{geometry:t,attributes:r={}}=e;switch(t.type){case"point":return{type:"Feature",geometry:{type:"Point",coordinates:[t.x,t.y]},properties:u({},r)};case"polyline":return{type:"Feature",geometry:{type:"LineString",coordinates:t.paths[0]},properties:u({},r)};case"polygon":return{type:"Feature",geometry:{type:"Polygon",coordinates:t.rings},properties:u({},r)};default:throw new Error("Unsupported geometry type: ".concat(t.type))}}function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function v(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?m(Object(o),!0).forEach(function(r){e(t,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):m(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})}return t}var f={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},h={reducer:{initialState:{mode:null,feature:null,tempFeature:null},actions:{SET_MODE:(e,t)=>p(p({},e),{},{mode:t}),SET_FEATURE:(e,t)=>p(p({},e),{},{feature:void 0===t.feature?e.feature:t.feature,tempFeature:void 0===t.tempFeature?e.tempFeature:t.tempFeature})}},InitComponent:e=>{var i,l,p,c,{appState:u,mapState:m,pluginConfig:v,pluginState:f,services:h,mapProvider:g,buttonConfig:b}=e,{events:O,eventBus:w}=h,{mapColorScheme:S}=m.mapStyle||{},E=null===(i=null===(l=v.includeModes)||void 0===l?void 0:l.includes(u.mode))||void 0===i||i,k=null!==(p=null===(c=v.excludeModes)||void 0===c?void 0:c.includes(u.mode))&&void 0!==p&&p,P=m.isMapReady&&E&&!k;t(()=>{if(P&&!g.sketchViewModel){var{sketchViewModel:e,sketchLayer:t,emptySketchLayer:a}=(e=>{var{mapProvider:t}=e,{view:a}=t,n=new o({id:"sketchLayer"});a.map.add(n);var i=new o({id:"emptySketchLayer"});return a.map.add(i),{sketchViewModel:new r({view:a,layer:i,defaultUpdateOptions:{tool:"reshape",updateOnGraphicClick:!1,multipleSelectionEnabled:!1,toggleToolOnClick:!1,highlightOptions:{enabled:!1}}}),emptySketchLayer:i,sketchLayer:n}})({mapProvider:g});return g.sketchViewModel=e,g.sketchLayer=t,g.emptySketchLayer=a,w.emit("draw:ready"),()=>{g.sketchViewModel=null,g.sketchLayer=null,g.emptySketchLayer=null}}},[m.isMapReady,u.mode]),t(()=>{if(P&&g.sketchViewModel){var e=function(e){var{pluginState:t,mapProvider:r,events:o,eventBus:i,buttonConfig:l,mapColorScheme:p}=e,{view:c,sketchViewModel:u,sketchLayer:m,emptySketchLayer:v}=r;if(!u)return null;var{drawDone:f,drawCancel:h}=l,{dispatch:g,mode:b,feature:O}=t,w=function(){var e=a(function*(){var e,r=null===(e=t.feature)||void 0===e||null===(e=e.properties)||void 0===e?void 0:e.id,o=null,a="active"===u.state&&!r;if("active"===u.state&&r&&(u.cancel(),yield new Promise(e=>setTimeout(e,50))),u.polygonSymbol=s(p),null==m||m.graphics.items.forEach(e=>{var t=d(e.attributes.id,e.geometry.rings,p);e.symbol=t.symbol,r===e.attributes.id&&(o=e)}),o&&!a&&u.layer===m)try{yield u.update(o,{tool:"reshape",toggleToolOnClick:!1})}catch(e){"AbortError"!==e.name&&console.error("Error updating sketch:",e)}});return function(){return e.apply(this,arguments)}}(),S=()=>{var e,t,r=null!==(e=null===(t=m.graphics)||void 0===t||null===(t=t.items)||void 0===t?void 0:t[0])&&void 0!==e?e:null;r&&setTimeout(()=>u.update(r),0)},E=()=>w(),k=e=>{if(e){var t=y(e);i.emit("draw:updated",t),g({type:"SET_FEATURE",payload:{tempFeature:t}})}},P=function(){var e=a(function*(){b&&((u.updateGraphics||[]).length||S())});return function(){return e.apply(this,arguments)}}(),j=function(){var e=a(function*(e){var{toolEventInfo:t}=e,r=null==e?void 0:e.graphic;if(r&&"vertex-add"===(null==t?void 0:t.type)){var o,a,n=null===(o=r.geometry)||void 0===o?void 0:o.rings;(null==n?void 0:n.length)>1?setTimeout(()=>u.undo(),0):(null==n||null===(a=n[0])||void 0===a?void 0:a.length)>3&&k(r)}});return function(t){return e.apply(this,arguments)}}(),T=function(){var e=a(function*(e){var t,r=null==e||null===(t=e.graphics)||void 0===t?void 0:t[0];k(r)});return function(t){return e.apply(this,arguments)}}();i.on(o.MAP_STYLE_CHANGE,E);var C=u.on("update",e=>{var t,r=null===(t=e.toolEventInfo)||void 0===t?void 0:t.type,o=e.graphics[0];"move-start"===r&&(u.cancel(),S()),"reshape"===r&&(n.isSimple(o.geometry)||u.undo()),"reshape-stop"!==r&&"vertex-remove"!==r||k(o)}),F=c.on("click",P),L=u.on("create",j),M=u.on("undo",T),D=f.onClick,_=h.onClick;return f.onClick=()=>{u.cancel(),u.layer=v,g({type:"SET_MODE",payload:null}),g({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),i.emit("draw:done",{newFeature:t.tempFeature})},h.onClick=()=>{if(u.cancel(),m.removeAll(),O){var e=d(O.id||O.properties.id,O.geometry.coordinates,p);m.add(e)}u.layer=v,g({type:"SET_MODE",payload:null}),i.emit("draw:cancelled")},()=>{i.off(o.MAP_STYLE_CHANGE,E),C.remove(),F.remove(),L.remove(),M.remove(),f.onClick=D,h.onClick=_}}({pluginState:f,mapProvider:g,events:O,eventBus:w,buttonConfig:b,mapColorScheme:S});return()=>{e()}}},[P,S,f])},buttons:[v({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode},enableWhen:e=>{var{pluginState:t}=e;return!!t.tempFeature}},f),v({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},f)],api:{newPolygon:(e,t)=>{var{mapState:r,pluginState:o,mapProvider:a,services:n}=e,{dispatch:i}=o,{sketchViewModel:l,sketchLayer:p}=a,{eventBus:c}=n;l.layer=p;var u=l.on("create",e=>{if("complete"===e.state){e.graphic.attributes={id:t},requestAnimationFrame(()=>{l.update(e.graphic,{tool:"reshape",toggleToolOnClick:!1})});var r=y(e.graphic);c.emit("draw:created",r),i({type:"SET_FEATURE",payload:{tempFeature:r}}),u.remove()}});l.polygonSymbol=s(r.mapStyle.mapColorScheme),l.create("polygon"),i({type:"SET_MODE",payload:"new-polygon"})},editFeature:(e,t)=>{var{pluginState:r,mapProvider:o}=e,{dispatch:a}=r,{sketchViewModel:n,sketchLayer:i}=o,l=i.graphics.items.find(e=>e.attributes.id===t),p=l.geometry.extent,c=[p.xmin,p.ymin,p.xmax,p.ymax];o.fitToBounds(c),n.layer=i,n.update(l,{tool:"reshape",toggleToolOnClick:!1,enableRotation:!1,enableScaling:!1}),a({type:"SET_FEATURE",payload:{feature:y(l)}}),a({type:"SET_MODE",payload:"edit-feature"})},addFeature:(e,t)=>{var{pluginState:r,mapState:o,mapProvider:a,services:n}=e,{dispatch:i}=r,{mapStyle:l}=o,{sketchViewModel:p,sketchLayer:c,emptySketchLayer:u}=a,{eventBus:s}=n,y=d(t.id,t.geometry.coordinates,l.mapColorScheme);c.add(y),p.layer=u,i({type:"SET_FEATURE",payload:{feature:t}}),s.emit("draw:add",t)},deleteFeature:(e,t)=>{var{pluginState:r,mapProvider:o,services:a}=e,{dispatch:n}=r,{sketchViewModel:i,sketchLayer:l,emptySketchLayer:p}=o,{eventBus:c}=a,u=l.graphics.items.find(e=>e.attributes.id===t);i.cancel(),l.remove(u),i.layer=p,n({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),c.emit("draw:delete",{featureId:t}),n({type:"SET_MODE",payload:null})}}};export{h as manifest};
+import e from"@babel/runtime/helpers/defineProperty";import{useEffect as t}from"preact/compat";import r from"@arcgis/core/widgets/Sketch/SketchViewModel.js";import a from"@arcgis/core/layers/GraphicsLayer.js";import o from"@babel/runtime/helpers/asyncToGenerator";import*as n from"@arcgis/core/geometry/operators/simplifyOperator.js";import i from"@arcgis/core/Graphic.js";function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,a)}return r}function l(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?p(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):p(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}var c={APP_ADD_MARKER:"app:addmarker",APP_REMOVE_MARKER:"app:removemarker",APP_SET_MODE:"app:setmode",APP_REVERT_MODE:"app:revertmode",APP_ADD_BUTTON:"app:addbutton",APP_TOGGLE_BUTTON_STATE:"app:togglebuttonstate",APP_ADD_PANEL:"app:addpanel",APP_REMOVE_PANEL:"app:removepanel",APP_SHOW_PANEL:"app:showpanel",APP_HIDE_PANEL:"app:hidepanel",APP_ADD_CONTROL:"app:addcontrol",APP_READY:"app:ready",APP_VISIBLE:"app:visible",APP_HIDDEN:"app:hidden",APP_PANEL_OPENED:"app:panelopened",APP_PANEL_CLOSED:"app:panelclosed",MAP_SET_STYLE:"map:setstyle",MAP_SET_SIZE:"map:setsize",MAP_SET_PIXEL_RATIO:"map:setpixelratio",MAP_FIT_TO_BOUNDS:"map:fittobounds",MAP_SET_VIEW:"map:setview",MAP_INIT_MAP_STYLES:"map:initmapstyles",MAP_STYLE_CHANGE:"map:stylechange",MAP_LOADED:"map:loaded",MAP_READY:"map:ready",MAP_SIZE_CHANGE:"map:sizechange",MAP_FIRST_IDLE:"map:firstidle",MAP_MOVE_START:"map:movestart",MAP_MOVE:"map:move",MAP_MOVE_END:"map:moveend",MAP_STATE_UPDATED:"map:stateupdated",MAP_DATA_CHANGE:"map:datachange",MAP_RENDER:"map:render",MAP_CLICK:"map:click",MAP_EXIT:"map:exit",MAP_DESTROY:"map:destroy"};function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,a)}return r}function s(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?d(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):d(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}function u(e){return{type:"simple-fill",color:[0,120,255,.2],outline:{color:"dark"===e?"#ffffff":"#d4351c",width:2}}}function m(e,t,r){return new i({geometry:{type:"polygon",rings:t,spatialReference:27700},attributes:{id:e},symbol:u(r)})}function y(e){if(null==e||!e.geometry)throw new Error("Invalid graphic");var{geometry:t,attributes:r={}}=e;switch(t.type){case"point":return{type:"Feature",geometry:{type:"Point",coordinates:[t.x,t.y]},properties:s({},r)};case"polyline":return{type:"Feature",geometry:{type:"LineString",coordinates:t.paths[0]},properties:s({},r)};case"polygon":return{type:"Feature",geometry:{type:"Polygon",coordinates:t.rings},properties:s({},r)};default:throw new Error("Unsupported geometry type: ".concat(t.type))}}function v(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,a)}return r}function h(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?v(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):v(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}var f={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},E={reducer:{initialState:{mode:null,feature:null,tempFeature:null},actions:{SET_MODE:(e,t)=>l(l({},e),{},{mode:t}),SET_FEATURE:(e,t)=>l(l({},e),{},{feature:void 0===t.feature?e.feature:t.feature,tempFeature:void 0===t.tempFeature?e.tempFeature:t.tempFeature})}},InitComponent:e=>{var i,p,l,d,{appState:s,mapState:v,pluginConfig:h,pluginState:f,services:E,mapProvider:P,buttonConfig:g}=e,{eventBus:O}=E,{mapColorScheme:_}=v.mapStyle||{},S=null===(i=null===(p=h.includeModes)||void 0===p?void 0:p.includes(s.mode))||void 0===i||i,b=null!==(l=null===(d=h.excludeModes)||void 0===d?void 0:d.includes(s.mode))&&void 0!==l&&l,A=v.isMapReady&&S&&!b;t(()=>{if(A&&!P.sketchViewModel){var{sketchViewModel:e,sketchLayer:t,emptySketchLayer:o}=(e=>{var{mapProvider:t}=e,{view:o}=t,n=new a({id:"sketchLayer"});o.map.add(n);var i=new a({id:"emptySketchLayer"});return o.map.add(i),{sketchViewModel:new r({view:o,layer:i,defaultUpdateOptions:{tool:"reshape",updateOnGraphicClick:!1,multipleSelectionEnabled:!1,toggleToolOnClick:!1,highlightOptions:{enabled:!1}}}),emptySketchLayer:i,sketchLayer:n}})({mapProvider:P});return P.sketchViewModel=e,P.sketchLayer=t,P.emptySketchLayer=o,O.emit("draw:ready"),()=>{P.sketchViewModel=null,P.sketchLayer=null,P.emptySketchLayer=null}}},[v.isMapReady,s.mode]),t(()=>{if(A&&P.sketchViewModel){var e=function(e){var{pluginState:t,mapProvider:r,events:a,eventBus:i,buttonConfig:p,mapColorScheme:l}=e,{view:c,sketchViewModel:d,sketchLayer:s,emptySketchLayer:v}=r;if(!d)return null;var{drawDone:h,drawCancel:f}=p,{dispatch:E,mode:P,feature:g}=t,O=function(){var e=o(function*(){var e,r=null===(e=t.feature)||void 0===e||null===(e=e.properties)||void 0===e?void 0:e.id,a=null,o="active"===d.state&&!r;if("active"===d.state&&r&&(d.cancel(),yield new Promise(e=>setTimeout(e,50))),d.polygonSymbol=u(l),null==s||s.graphics.items.forEach(e=>{var t=m(e.attributes.id,e.geometry.rings,l);e.symbol=t.symbol,r===e.attributes.id&&(a=e)}),a&&!o&&d.layer===s)try{yield d.update(a,{tool:"reshape",toggleToolOnClick:!1})}catch(e){"AbortError"!==e.name&&console.error("Error updating sketch:",e)}});return function(){return e.apply(this,arguments)}}(),_=()=>{var e,t,r=null!==(e=null===(t=s.graphics)||void 0===t||null===(t=t.items)||void 0===t?void 0:t[0])&&void 0!==e?e:null;r&&setTimeout(()=>d.update(r),0)},S=()=>O(),b=e=>{if(e){var t=y(e);i.emit("draw:updated",t),E({type:"SET_FEATURE",payload:{tempFeature:t}})}},A=function(){var e=o(function*(){P&&((d.updateGraphics||[]).length||_())});return function(){return e.apply(this,arguments)}}(),w=function(){var e=o(function*(e){var{toolEventInfo:t}=e,r=null==e?void 0:e.graphic;if(r&&"vertex-add"===(null==t?void 0:t.type)){var a,o,n=null===(a=r.geometry)||void 0===a?void 0:a.rings;(null==n?void 0:n.length)>1?setTimeout(()=>d.undo(),0):(null==n||null===(o=n[0])||void 0===o?void 0:o.length)>3&&b(r)}});return function(t){return e.apply(this,arguments)}}(),T=function(){var e=o(function*(e){var t,r=null==e||null===(t=e.graphics)||void 0===t?void 0:t[0];b(r)});return function(t){return e.apply(this,arguments)}}();i.on(a.MAP_STYLE_CHANGE,S);var M=d.on("update",e=>{var t,r=null===(t=e.toolEventInfo)||void 0===t?void 0:t.type,a=e.graphics[0];"move-start"===r&&(d.cancel(),_()),"reshape"===r&&(n.isSimple(a.geometry)||d.undo()),"reshape-stop"!==r&&"vertex-remove"!==r||b(a)}),k=c.on("click",A),D=d.on("create",w),L=d.on("undo",T),j=h.onClick,C=f.onClick;return h.onClick=()=>{d.cancel(),d.layer=v,E({type:"SET_MODE",payload:null}),E({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),i.emit("draw:done",{newFeature:t.tempFeature})},f.onClick=()=>{if(d.cancel(),s.removeAll(),g){var e=m(g.id||g.properties.id,g.geometry.coordinates,l);s.add(e)}d.layer=v,E({type:"SET_MODE",payload:null}),i.emit("draw:cancelled")},()=>{i.off(a.MAP_STYLE_CHANGE,S),M.remove(),k.remove(),D.remove(),L.remove(),h.onClick=j,f.onClick=C}}({pluginState:f,mapProvider:P,events:c,eventBus:O,buttonConfig:g,mapColorScheme:_});return()=>{e()}}},[A,_,f])},buttons:[h({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode},enableWhen:e=>{var{pluginState:t}=e;return!!t.tempFeature}},f),h({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},f)],api:{newPolygon:(e,t)=>{var{mapState:r,pluginState:a,mapProvider:o,services:n}=e,{dispatch:i}=a,{sketchViewModel:p,sketchLayer:l}=o,{eventBus:c}=n;p.layer=l;var d=p.on("create",e=>{if("complete"===e.state){e.graphic.attributes={id:t},requestAnimationFrame(()=>{p.update(e.graphic,{tool:"reshape",toggleToolOnClick:!1})});var r=y(e.graphic);c.emit("draw:created",r),i({type:"SET_FEATURE",payload:{tempFeature:r}}),d.remove()}});p.polygonSymbol=u(r.mapStyle.mapColorScheme),p.create("polygon"),i({type:"SET_MODE",payload:"new-polygon"})},editFeature:(e,t)=>{var{pluginState:r,mapProvider:a}=e,{dispatch:o}=r,{sketchViewModel:n,sketchLayer:i}=a,p=i.graphics.items.find(e=>e.attributes.id===t),l=p.geometry.extent,c=[l.xmin,l.ymin,l.xmax,l.ymax];a.fitToBounds(c),n.layer=i,n.update(p,{tool:"reshape",toggleToolOnClick:!1,enableRotation:!1,enableScaling:!1}),o({type:"SET_FEATURE",payload:{feature:y(p)}}),o({type:"SET_MODE",payload:"edit-feature"})},addFeature:(e,t)=>{var{pluginState:r,mapState:a,mapProvider:o,services:n}=e,{dispatch:i}=r,{mapStyle:p}=a,{sketchViewModel:l,sketchLayer:c,emptySketchLayer:d}=o,{eventBus:s}=n,u=m(t.id,t.geometry.coordinates,p.mapColorScheme);c.add(u),l.layer=d,i({type:"SET_FEATURE",payload:{feature:t}}),s.emit("draw:add",t)},deleteFeature:(e,t)=>{var{pluginState:r,mapProvider:a,services:o}=e,{dispatch:n}=r,{sketchViewModel:i,sketchLayer:p,emptySketchLayer:l}=a,{eventBus:c}=o,d=p.graphics.items.find(e=>e.attributes.id===t);i.cancel(),p.remove(d),i.layer=l,n({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),c.emit("draw:delete",{featureId:t}),n({type:"SET_MODE",payload:null})}}};export{E as manifest};

package/plugins/beta/draw-es/src/DrawInit.jsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { EVENTS } from '../../../../src/config/events.js'
 import { createSketchViewModel } from './sketchViewModel.js'
 import { attachEvents } from './events.js'
 
@@ -11,7 +12,7 @@ export const DrawInit = ({
   mapProvider,
   buttonConfig
 }) => {
-  const { events, eventBus } = services
+  const { eventBus } = services
   const { mapColorScheme } = mapState.mapStyle || {}
 
   // Check if plugin should be active
@@ -52,7 +53,7 @@ export const DrawInit = ({
     const cleanup = attachEvents({
       pluginState,
       mapProvider,
-      events,
+      events: EVENTS,
       eventBus,
       buttonConfig,
       mapColorScheme

package/plugins/beta/draw-ml/dist/css/index.css

@@ -1 +1,21 @@
-.touch-vertex-target circle{fill:var(--map-overlay-foreground-color)}.touch-vertex-target path{fill:var(--map-overlay-halo-color)}.im-c-actions .im-c-button-wrapper--draw-done,.im-c-actions .im-c-button-wrapper--draw-menu,.im-c-actions .im-c-button-wrapper--draw-cancel{width:33.33%}.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-done,.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-menu,.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-cancel,.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-done,.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-menu,.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-cancel{width:100px}
+.touch-vertex-target circle {
+  fill: var(--map-overlay-foreground-color);
+}
+.touch-vertex-target path {
+  fill: var(--map-overlay-halo-color);
+}
+
+.im-c-actions .im-c-button-wrapper--draw-done,
+.im-c-actions .im-c-button-wrapper--draw-menu,
+.im-c-actions .im-c-button-wrapper--draw-cancel {
+  width: 33.33%;
+}
+
+.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-done,
+.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-menu,
+.im-o-app--tablet .im-c-actions .im-c-button-wrapper--draw-cancel,
+.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-done,
+.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-menu,
+.im-o-app--desktop .im-c-actions .im-c-button-wrapper--draw-cancel {
+  width: 100px;
+}