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

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

@@ -1,16 +1,32 @@
+import { applyDatasetDefaults } from './defaults.js'
+import { keyReducer } from './reducers/keyReducer.js'
+
 const initialState = {
   datasets: null,
-  hiddenFeatures: {} // { [layerId]: { idProperty: string, ids: string[] } }
+  key: {
+    items: [],
+    hasGroups: false
+  },
+  hiddenFeatures: {}, // { [layerId]: { idProperty: string, ids: string[] } }
+  layerAdapter: null
+}
+
+const initSublayerVisibility = (dataset) => {
+  if (!dataset.sublayers?.length) {
+    return dataset
+  }
+  const sublayerVisibility = {}
+  dataset.sublayers.forEach(sublayer => {
+    sublayerVisibility[sublayer.id] = 'visible'
+  })
+  return { ...dataset, sublayerVisibility }
 }
 
 const setDatasets = (state, payload) => {
   const { datasets, datasetDefaults } = payload
   return {
     ...state,
-    datasets: datasets.map(dataset => ({
-      ...datasetDefaults,
-      ...dataset
-    }))
+    datasets: datasets.map(dataset => initSublayerVisibility(applyDatasetDefaults(dataset, datasetDefaults)))
   }
 }
 
@@ -20,7 +36,7 @@ const addDataset = (state, payload) => {
     ...state,
     datasets: [
       ...(state.datasets || []),
-      { ...datasetDefaults, ...dataset }
+      initSublayerVisibility(applyDatasetDefaults(dataset, datasetDefaults))
     ]
   }
 }
@@ -43,6 +59,14 @@ const setDatasetVisibility = (state, payload) => {
   }
 }
 
+const setGlobalVisibility = (state, payload) => {
+  const { visibility } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => ({ ...dataset, visibility }))
+  }
+}
+
 const hideFeatures = (state, payload) => {
   const { layerId, idProperty, featureIds } = payload
   const existing = state.hiddenFeatures[layerId]
@@ -61,12 +85,15 @@ const hideFeatures = (state, payload) => {
 const showFeatures = (state, payload) => {
   const { layerId, featureIds } = payload
   const existing = state.hiddenFeatures[layerId]
-  if (!existing) return state
+  if (!existing) {
+    return state
+  }
 
   const newIds = existing.ids.filter(id => !featureIds.includes(id))
 
   if (newIds.length === 0) {
-    const { [layerId]: _, ...rest } = state.hiddenFeatures
+    const rest = { ...state.hiddenFeatures }
+    delete rest[layerId]
     return { ...state, hiddenFeatures: rest }
   }
 
@@ -79,13 +106,111 @@ const showFeatures = (state, payload) => {
   }
 }
 
+const setSublayerVisibility = (state, payload) => {
+  const { datasetId, sublayerId, visibility } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => {
+      if (dataset.id !== datasetId) {
+        return dataset
+      }
+      return {
+        ...dataset,
+        sublayerVisibility: {
+          ...dataset.sublayerVisibility,
+          [sublayerId]: visibility
+        }
+      }
+    })
+  }
+}
+
+const setDatasetStyle = (state, payload) => {
+  const { datasetId, styleChanges } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset =>
+      dataset.id === datasetId ? { ...dataset, ...styleChanges } : dataset
+    )
+  }
+}
+
+const setSublayerStyle = (state, payload) => {
+  const { datasetId, sublayerId, styleChanges } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => {
+      if (dataset.id !== datasetId) {
+        return dataset
+      }
+      return {
+        ...dataset,
+        sublayers: dataset.sublayers?.map(sublayer =>
+          sublayer.id === sublayerId
+            ? { ...sublayer, style: { ...sublayer.style, ...styleChanges } }
+            : sublayer
+        )
+      }
+    })
+  }
+}
+
+const setOpacity = (state, payload) => {
+  const { datasetId, opacity } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset =>
+      dataset.id === datasetId ? { ...dataset, opacity } : dataset
+    )
+  }
+}
+
+const setGlobalOpacity = (state, payload) => {
+  const { opacity } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => ({ ...dataset, opacity }))
+  }
+}
+
+const setSublayerOpacity = (state, payload) => {
+  const { datasetId, sublayerId, opacity } = payload
+  return {
+    ...state,
+    datasets: state.datasets?.map(dataset => {
+      if (dataset.id !== datasetId) {
+        return dataset
+      }
+      return {
+        ...dataset,
+        sublayers: dataset.sublayers?.map(sublayer =>
+          sublayer.id === sublayerId
+            ? { ...sublayer, style: { ...sublayer.style, opacity } }
+            : sublayer
+        )
+      }
+    })
+  }
+}
+
+const setLayerAdapter = (state, payload) => ({ ...state, layerAdapter: payload })
+
 const actions = {
+  BUILD_KEY_GROUPS: keyReducer,
   SET_DATASETS: setDatasets,
   ADD_DATASET: addDataset,
   REMOVE_DATASET: removeDataset,
   SET_DATASET_VISIBILITY: setDatasetVisibility,
+  SET_GLOBAL_VISIBILITY: setGlobalVisibility,
+  SET_SUBLAYER_VISIBILITY: setSublayerVisibility,
+  SET_DATASET_STYLE: setDatasetStyle,
+  SET_SUBLAYER_STYLE: setSublayerStyle,
+  SET_OPACITY: setOpacity,
+  SET_GLOBAL_OPACITY: setGlobalOpacity,
+  SET_SUBLAYER_OPACITY: setSublayerOpacity,
   HIDE_FEATURES: hideFeatures,
-  SHOW_FEATURES: showFeatures
+  SHOW_FEATURES: showFeatures,
+  SET_LAYER_ADAPTER: setLayerAdapter
 }
 
 export {

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/bbox.js

@@ -22,7 +22,7 @@ export const bboxContains = (outer, inner) => {
     inner[0] >= outer[0] && // west
     inner[1] >= outer[1] && // south
     inner[2] <= outer[2] && // east
-    inner[3] <= outer[3] // north
+    inner[3] <= outer[3] // NOSONAR, north
   )
 }
 
@@ -40,7 +40,7 @@ export const expandBbox = (existing, addition) => {
     Math.min(existing[0], addition[0]), // west
     Math.min(existing[1], addition[1]), // south
     Math.max(existing[2], addition[2]), // east
-    Math.max(existing[3], addition[3]) // north
+    Math.max(existing[3], addition[3]) // NOSONAR, north
   ]
 }
 
@@ -57,8 +57,8 @@ export const bboxIntersects = (a, b) => {
   return !(
     a[2] < b[0] || // a is left of b
     a[0] > b[2] || // a is right of b
-    a[3] < b[1] || // a is below b
-    a[1] > b[3] // a is above b
+    a[3] < b[1] || // NOSONAR a is below b
+    a[1] > b[3] // NOSONAR a is above b
   )
 }
 
@@ -98,7 +98,7 @@ export const getGeometryBbox = (geometry) => {
       processCoords(geometry.coordinates, 2)
       break
     case 'MultiPolygon':
-      processCoords(geometry.coordinates, 3)
+      processCoords(geometry.coordinates, 3) // NOSONAR: 3 = coordinate nesting depth for MultiPolygon ([polygons][rings][points])
       break
     case 'GeometryCollection':
       geometry.geometries.forEach(g => {
@@ -109,6 +109,8 @@ export const getGeometryBbox = (geometry) => {
         maxY = Math.max(maxY, b[3])
       })
       break
+    default:
+      throw new Error(`Unsupported geometry type: ${geometry.type}`)
   }
 
   return [minX, minY, maxX, maxY]

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

@@ -8,8 +8,11 @@ export const buildExclusionFilter = (originalFilter, idProperty, excludeIds) =>
   }
 
   // Coerce both sides to strings to handle number/string type mismatches
-  const stringIds = excludeIds.map(id => String(id))
-  const exclusionFilter = ['!', ['in', ['to-string', ['get', idProperty]], ['literal', stringIds]]]
+  // When no idProperty, use feature-level id via ['id'] (GeoJSON feature.id)
+  const idExpr = idProperty ? ['to-string', ['get', idProperty]] : ['to-string', ['id']]
+  // Convert all IDs to strings; map passes each element as the first argument to String
+  const stringIds = excludeIds.map(String)
+  const exclusionFilter = ['!', ['in', idExpr, ['literal', stringIds]]]
 
   if (!originalFilter) {
     return exclusionFilter

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

@@ -0,0 +1,86 @@
+import { hasCustomVisualStyle } from '../defaults.js'
+
+const getFillProps = (dataset, sublayerStyle) => {
+  if (sublayerStyle.fillPattern || sublayerStyle.fillPatternSvgContent) {
+    return {
+      fillPattern: sublayerStyle.fillPattern,
+      fillPatternSvgContent: sublayerStyle.fillPatternSvgContent,
+      fillPatternForegroundColor: sublayerStyle.fillPatternForegroundColor ?? dataset.fillPatternForegroundColor,
+      fillPatternBackgroundColor: sublayerStyle.fillPatternBackgroundColor ?? dataset.fillPatternBackgroundColor
+    }
+  }
+  if ('fill' in sublayerStyle) {
+    // Sublayer explicitly sets a plain fill — do not inherit any parent pattern
+    return { fill: sublayerStyle.fill }
+  }
+  return {
+    fill: dataset.fill,
+    fillPattern: dataset.fillPattern,
+    fillPatternSvgContent: dataset.fillPatternSvgContent,
+    fillPatternForegroundColor: dataset.fillPatternForegroundColor,
+    fillPatternBackgroundColor: dataset.fillPatternBackgroundColor
+  }
+}
+
+const getCombinedFilter = (datasetFilter, sublayerFilter) => {
+  if (datasetFilter && sublayerFilter) {
+    return ['all', datasetFilter, sublayerFilter]
+  }
+  return sublayerFilter || datasetFilter || null
+}
+
+const getSymbolDescription = (dataset, sublayerStyle) => {
+  if ('symbolDescription' in sublayerStyle) {
+    return sublayerStyle.symbolDescription
+  }
+  if (hasCustomVisualStyle(sublayerStyle)) {
+    return undefined
+  }
+  return dataset.symbolDescription
+}
+
+/**
+ * Merge a sublayer with its parent dataset, producing a flat style
+ * object suitable for layer creation and key symbol rendering.
+ *
+ * The sublayer's nested `style` object is flattened before merging.
+ *
+ * Fill precedence (highest to lowest):
+ *   1. Sublayer's own fillPattern
+ *   2. Sublayer's own fill (explicit, even if transparent — clears any parent pattern)
+ *   3. Parent's fillPattern
+ *   4. Parent's fill
+ *
+ * symbolDescription is only inherited from the parent when the sublayer has no
+ * custom visual styles of its own. If the sublayer overrides stroke/fill/pattern
+ * without setting symbolDescription explicitly, no description is shown.
+ */
+export const mergeSublayer = (dataset, sublayer) => {
+  const sublayerStyle = sublayer.style || {}
+  const combinedFilter = getCombinedFilter(dataset.filter, sublayer.filter)
+
+  return {
+    id: sublayer.id,
+    label: sublayer.label,
+    stroke: sublayerStyle.stroke ?? dataset.stroke,
+    strokeWidth: sublayerStyle.strokeWidth ?? dataset.strokeWidth,
+    strokeDashArray: sublayerStyle.strokeDashArray ?? dataset.strokeDashArray,
+    opacity: sublayerStyle.opacity ?? dataset.opacity,
+    keySymbolShape: sublayerStyle.keySymbolShape ?? dataset.keySymbolShape,
+    symbolDescription: getSymbolDescription(dataset, sublayerStyle),
+    showInKey: sublayer.showInKey ?? dataset.showInKey,
+    toggleVisibility: sublayer.toggleVisibility ?? false,
+    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}.im-c-button-wrapper--draw-add-point{position:absolute;bottom:calc(100% + var(--primary-gap));z-index:0}
+.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;
+}