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

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

@@ -0,0 +1,157 @@
+import { getValueForStyle } from '../../../../../src/utils/getValueForStyle.js'
+
+// ─── Built-in pattern library ────────────────────────────────────────────────
+// Each value is the inner SVG content (paths only, no wrapper).
+// Paths are authored in a 16×16 coordinate space (power-of-two, tiles seamlessly).
+// Use {{foreground}} and {{background}} tokens for colours.
+
+const BUILT_IN_PATTERNS = {
+  'cross-hatch': '<path d="M0 4.486V3.485h3.5V.001h1v3.484h7.002V.001h1v3.484h3.5v1.001h-3.5v7h3.5v.999h-3.5v3.516h-1v-3.516H4.499v3.516h-1v-3.516H0v-.999h3.5v-7H0zm11.501 0H4.499v7h7.002v-7z" fill="{{foreground}}"/>',
+  'diagonal-cross-hatch': '<path d="M0 8.707V7.293L7.293 0h1.414L16 7.293v1.414L8.707 16H7.293L0 8.707zM.707 8L8 15.293 15.293 8 8 .707.707 8z" fill="{{foreground}}"/>',
+  'forward-diagonal-hatch': '<path d="M16 8.707V7.293L7.293 16h1.414L16 8.707zm-16 0L8.707 0H7.293L0 7.293v1.414z" fill="{{foreground}}"/>',
+  'backward-diagonal-hatch': '<path d="M0 8.707V7.293L8.707 16H7.293L0 8.707zm16 0L7.293 0h1.414L16 7.293v1.414z" fill="{{foreground}}"/>',
+  'horizontal-hatch': '<path d="M0 4.5V3.499h15.999V4.5H0zm0 7h15.999V12.5H0v-1.001z" fill="{{foreground}}"/>',
+  'vertical-hatch': '<path d="M3.501 16.001V0h1v16.001h-1zm7.998 0V0h1v16.001h-1z" fill="{{foreground}}"/>',
+  dot: '<path d="M3.999 2A2 2 0 0 1 6 3.999C6 5.103 5.103 6 3.999 6a2 2 0 0 1-1.999-2.001A2 2 0 0 1 3.999 2zm0 7.999C5.103 10 6 10.897 6 12.001A2 2 0 0 1 3.999 14a2 2 0 0 1-1.999-1.999A2 2 0 0 1 3.999 10zM11.999 2A2 2 0 0 1 14 3.999C14 5.103 13.103 6 11.999 6S10 5.103 10 3.999A2 2 0 0 1 11.999 2zm0 7.999c1.104 0 2.001.897 2.001 2.001A2 2 0 0 1 11.999 14 2 2 0 0 1 10 12.001c0-1.104.897-2.001 1.999-2.001z" fill="{{foreground}}"/>',
+  diamond: '<path d="M4 .465L7.535 4 4 7.535.465 4 4 .465zm0 7.999l3.535 3.535L4 15.535.465 11.999 4 8.464zm8-8l3.535 3.535-3.536 3.536L8.464 4 12 .464zm0 8.001L15.536 12 12 15.536 8.465 12 12 8.465z" fill="{{foreground}}"/>'
+}
+
+// Plugin-controlled border path used in the key symbol (20×20 coordinate space).
+// This is always rendered as the first element, before the user-supplied content.
+const KEY_BORDER_PATH = '<path d="M19 2.862v14.275c0 1.028-.835 1.862-1.862 1.862H2.863c-1.028 0-1.862-.835-1.862-1.862V2.862C1.001 1.834 1.836 1 2.863 1h14.275C18.166 1 19 1.835 19 2.862z" fill="{{background}}" stroke="{{foreground}}" stroke-width="2"/>'
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+export const hashString = (str) => {
+  let hash = 0
+  for (const ch of str) {
+    hash = ((hash << 5) - hash) + ch.codePointAt(0)
+    hash = hash & hash
+  }
+  return Math.abs(hash).toString(36) // NOSONAR: base36 encoding for compact alphanumeric hash string
+}
+
+export const injectColors = (content, foreground, background) =>
+  content
+    .replace(/\{\{foreground\}\}/g, foreground || 'black')
+    .replace(/\{\{background\}\}/g, background || 'transparent')
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Returns true if a dataset has a fill pattern configured.
+ * @param {Object} dataset
+ * @returns {boolean}
+ */
+export const hasPattern = (dataset) => !!(dataset.fillPattern || dataset.fillPatternSvgContent)
+
+/**
+ * Returns the raw (un-coloured) inner SVG content for a dataset's pattern.
+ * Custom fillPatternSvgContent takes precedence over built-in fillPattern ids.
+ * @param {Object} dataset
+ * @returns {string|null}
+ */
+export const getPatternInnerContent = (dataset) => {
+  if (dataset.fillPatternSvgContent) {
+    return dataset.fillPatternSvgContent
+  }
+  if (dataset.fillPattern && BUILT_IN_PATTERNS[dataset.fillPattern]) {
+    return BUILT_IN_PATTERNS[dataset.fillPattern]
+  }
+  return null
+}
+
+/**
+ * Returns a deterministic image ID for a pattern + resolved colour combination.
+ * @param {Object} dataset
+ * @param {string} mapStyleId
+ * @returns {string|null}
+ */
+export const getPatternImageId = (dataset, mapStyleId) => {
+  const innerContent = getPatternInnerContent(dataset)
+  if (!innerContent) {
+    return null
+  }
+  const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
+  const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+  return `pattern-${hashString(innerContent + fg + bg)}`
+}
+
+/**
+ * Returns colour-injected inner SVG path content for use in the Key symbol.
+ * The caller is responsible for wrapping this in the SVG element and border path.
+ * @param {Object} dataset
+ * @param {string} mapStyleId
+ * @returns {{ border: string, content: string }|null}
+ */
+export const getKeyPatternPaths = (dataset, mapStyleId) => {
+  const innerContent = getPatternInnerContent(dataset)
+  if (!innerContent) {
+    return null
+  }
+  const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
+  const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+  const borderStroke = getValueForStyle(dataset.stroke, mapStyleId) || fg
+  return {
+    border: injectColors(KEY_BORDER_PATH, borderStroke, bg),
+    content: injectColors(innerContent, fg, bg)
+  }
+}
+
+// ─── Rasterisation ────────────────────────────────────────────────────────────
+
+// Module-level cache: imageId → ImageData. Avoids re-rasterising identical patterns.
+const imageDataCache = new Map()
+
+const rasteriseToImageData = (svgString, width, height) =>
+  new Promise((resolve, reject) => {
+    const blob = new Blob([svgString], { type: 'image/svg+xml' })
+    const url = URL.createObjectURL(blob)
+    const img = new Image(width, height)
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0, width, height)
+      URL.revokeObjectURL(url)
+      resolve(ctx.getImageData(0, 0, width, height))
+    }
+    img.onerror = () => {
+      URL.revokeObjectURL(url)
+      reject(new Error(`Failed to rasterise pattern SVG: ${svgString.slice(0, 80)}`))
+    }
+    img.src = url
+  })
+
+/**
+ * Rasterises a dataset's pattern SVG to ImageData, using an in-memory cache
+ * to avoid re-rasterising identical patterns. Framework-agnostic — callers
+ * are responsible for registering the result with their map framework.
+ *
+ * @param {Object} dataset
+ * @param {string} mapStyleId
+ * @returns {Promise<{ imageId: string, imageData: ImageData }|null>}
+ */
+export const rasterisePattern = async (dataset, mapStyleId) => {
+  const innerContent = getPatternInnerContent(dataset)
+  if (!innerContent) {
+    return null
+  }
+
+  const fg = getValueForStyle(dataset.fillPatternForegroundColor, mapStyleId) || 'black'
+  const bg = getValueForStyle(dataset.fillPatternBackgroundColor, mapStyleId) || 'transparent'
+  const imageId = `pattern-${hashString(innerContent + fg + bg)}`
+
+  let imageData = imageDataCache.get(imageId)
+  if (!imageData) {
+    const colored = injectColors(innerContent, fg, bg)
+    const bgRect = `<rect width="16" height="16" fill="${bg}"/>`
+    // pixelRatio: 2 means the map treats this as an 8×8 logical tile — crisp on retina screens.
+    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">${bgRect}${colored}</svg>`
+    imageData = await rasteriseToImageData(svgString, 16, 16)
+    imageDataCache.set(imageId, imageData)
+  }
+
+  return { imageId, imageData }
+}

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
   )
 }
 
@@ -68,7 +68,7 @@ export const bboxIntersects = (a, b) => {
  * @returns {number[]} bbox as [west, south, east, north]
  */
 export const getGeometryBbox = (geometry) => {
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
+  let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity
 
   const processCoord = (coord) => {
     minX = Math.min(minX, coord[0])
@@ -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,78 @@
+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,
+    ...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 s(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 u(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: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 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 f(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 h={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},v={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:s,mapState:m,pluginConfig:f,pluginState:h,services:v,mapProvider:g,buttonConfig:b}=e,{events:O,eventBus:w}=v,{mapColorScheme:S}=m.mapStyle||{},E=null===(i=null===(l=f.includeModes)||void 0===l?void 0:l.includes(s.mode))||void 0===i||i,k=null!==(p=null===(c=f.excludeModes)||void 0===c?void 0:c.includes(s.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,s.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:s,sketchLayer:m,emptySketchLayer:f}=r;if(!s)return null;var{drawDone:h,drawCancel:v}=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"===s.state&&!r;if("active"===s.state&&r&&(s.cancel(),yield new Promise(e=>setTimeout(e,50))),s.polygonSymbol=u(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&&s.layer===m)try{yield s.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(()=>s.update(r),0)},E=()=>w(),k=function(){var e=a(function*(){b&&((s.updateGraphics||[]).length||S())});return function(){return e.apply(this,arguments)}}();i.on(o.MAP_STYLE_CHANGE,E);var P=s.on("update",e=>{var t,r=null===(t=e.toolEventInfo)||void 0===t?void 0:t.type,o=e.graphics[0];if("move-start"===r&&(s.cancel(),S()),"reshape"===r&&(n.isSimple(o.geometry)||s.undo()),"reshape-stop"===r){var a=y(o);i.emit("draw:updated",a),g({type:"SET_FEATURE",payload:{tempFeature:a}})}}),j=c.on("click",k),T=h.onClick,C=v.onClick;return h.onClick=()=>{s.cancel(),s.layer=f,g({type:"SET_MODE",payload:null}),g({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),i.emit("draw:done",{newFeature:t.tempFeature})},v.onClick=()=>{if(s.cancel(),m.removeAll(),O){var e=d(O.id||O.properties.id,O.geometry.coordinates,p);m.add(e)}s.layer=f,g({type:"SET_MODE",payload:null}),i.emit("draw:cancelled")},()=>{i.off(o.MAP_STYLE_CHANGE,E),P.remove(),j.remove(),h.onClick=T,v.onClick=C}}({pluginState:h,mapProvider:g,events:O,eventBus:w,buttonConfig:b,mapColorScheme:S});return()=>{e()}}},[P,S,h])},buttons:[f({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode},enableWhen:e=>{var{pluginState:t}=e;return!!t.tempFeature}},h),f({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},h)],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 s=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}}),s.remove()}});l.polygonSymbol=u(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:s}=a,{eventBus:u}=n,y=d(t.id,t.geometry.coordinates,l.mapColorScheme);c.add(y),p.layer=s,i({type:"SET_FEATURE",payload:{feature:t}}),u.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,s=l.graphics.items.find(e=>e.attributes.id===t);i.cancel(),l.remove(s),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{v 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 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};

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

@@ -2,14 +2,14 @@ import { useEffect } from 'react'
 import { createSketchViewModel } from './sketchViewModel.js'
 import { attachEvents } from './events.js'
 
-export const DrawInit = ({ 
-  appState, 
-  mapState, 
-  pluginConfig, 
-  pluginState, 
-  services, 
-  mapProvider, 
-  buttonConfig 
+export const DrawInit = ({
+  appState,
+  mapState,
+  pluginConfig,
+  pluginState,
+  services,
+  mapProvider,
+  buttonConfig
 }) => {
   const { events, eventBus } = services
   const { mapColorScheme } = mapState.mapStyle || {}
@@ -22,9 +22,9 @@ export const DrawInit = ({
   // Initialize sketch components once
   useEffect(() => {
     if (!isActive || mapProvider.sketchViewModel) {
-			return
-		}
-    
+      return
+    }
+
     const { sketchViewModel, sketchLayer, emptySketchLayer } = createSketchViewModel({
       pluginState,
       mapProvider,
@@ -33,21 +33,21 @@ export const DrawInit = ({
 
     mapProvider.sketchViewModel = sketchViewModel
     mapProvider.sketchLayer = sketchLayer
-		mapProvider.emptySketchLayer = emptySketchLayer
+    mapProvider.emptySketchLayer = emptySketchLayer
     eventBus.emit('draw:ready')
 
     return () => {
       mapProvider.sketchViewModel = null
       mapProvider.sketchLayer = null
-			mapProvider.emptySketchLayer = null
+      mapProvider.emptySketchLayer = null
     }
   }, [mapState.isMapReady, appState.mode])
 
   // Attach/detach events
   useEffect(() => {
     if (!isActive || !mapProvider.sketchViewModel) {
-			return
-		}
+      return
+    }
 
     const cleanup = attachEvents({
       pluginState,
@@ -62,4 +62,4 @@ export const DrawInit = ({
       cleanup()
     }
   }, [isActive, mapColorScheme, pluginState])
-}
+}

package/plugins/beta/draw-es/src/api/addFeature.js

@@ -7,7 +7,7 @@ export const addFeature = ({ pluginState, mapState, mapProvider, services }, fea
   const { eventBus } = services
 
   const graphic = createGraphic(feature.id, feature.geometry.coordinates, mapStyle.mapColorScheme)
-  
+
   // Add the graphic to the layer
   sketchLayer.add(graphic)
 
@@ -15,7 +15,7 @@ export const addFeature = ({ pluginState, mapState, mapProvider, services }, fea
   sketchViewModel.layer = emptySketchLayer
 
   // Store initial feature in plugin state
-  dispatch({ type: 'SET_FEATURE', payload: { feature }})
+  dispatch({ type: 'SET_FEATURE', payload: { feature } })
 
   eventBus.emit('draw:add', feature)
-}
+}

package/plugins/beta/draw-es/src/api/deleteFeature.js

@@ -10,13 +10,13 @@ export const deleteFeature = ({ pluginState, mapProvider, services }, featureId)
   sketchViewModel.cancel()
   sketchLayer.remove(graphic)
   sketchViewModel.layer = emptySketchLayer
-  
+
   // Reset state
-  dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
+  dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null } })
 
   // Emit event
   eventBus.emit('draw:delete', { featureId })
 
   // Clear mode
   dispatch({ type: 'SET_MODE', payload: null })
-}
+}

package/plugins/beta/draw-es/src/api/editFeature.js

@@ -18,12 +18,12 @@ export const editFeature = ({ pluginState, mapProvider }, featureId) => {
     tool: 'reshape',
     toggleToolOnClick: false,
     enableRotation: false,
-    enableScaling: false 
+    enableScaling: false
   })
 
   // Set original feature
   const feature = graphicToGeoJSON(graphic)
-  dispatch({ type: 'SET_FEATURE', payload: { feature }})
+  dispatch({ type: 'SET_FEATURE', payload: { feature } })
 
   dispatch({ type: 'SET_MODE', payload: 'edit-feature' })
-}
+}

package/plugins/beta/draw-es/src/api/newPolygon.js

@@ -12,7 +12,7 @@ export const newPolygon = ({ mapState, pluginState, mapProvider, services }, fea
   const handleCreateComplete = sketchViewModel.on('create', (e) => {
     if (e.state === 'complete') {
       e.graphic.attributes = { id: featureId }
-      
+
       // Fix: to address calling some sketchViewModel methods syncronously
       requestAnimationFrame(() => {
         sketchViewModel.update(e.graphic, {
@@ -24,7 +24,7 @@ export const newPolygon = ({ mapState, pluginState, mapProvider, services }, fea
       // Store temp feature in state and emit create
       const tempFeature = graphicToGeoJSON(e.graphic)
       eventBus.emit('draw:created', tempFeature)
-      dispatch({ type: 'SET_FEATURE', payload: { tempFeature }})
+      dispatch({ type: 'SET_FEATURE', payload: { tempFeature } })
 
       handleCreateComplete.remove()
     }
@@ -34,4 +34,4 @@ export const newPolygon = ({ mapState, pluginState, mapProvider, services }, fea
   sketchViewModel.create('polygon')
 
   dispatch({ type: 'SET_MODE', payload: 'new-polygon' })
-}
+}

package/plugins/beta/draw-es/src/events.js

@@ -1,9 +1,9 @@
-import * as simplifyOperator from "@arcgis/core/geometry/operators/simplifyOperator.js"
+import * as simplifyOperator from '@arcgis/core/geometry/operators/simplifyOperator.js'
 import { createGraphic, createSymbol, graphicToGeoJSON } from './graphic.js'
 
 const MODE_CHANGE_DELAY = 50
 
-export function attachEvents({ pluginState, mapProvider, events, eventBus, buttonConfig, mapColorScheme }) {
+export function attachEvents ({ pluginState, mapProvider, events, eventBus, buttonConfig, mapColorScheme }) {
   const { view, sketchViewModel, sketchLayer, emptySketchLayer } = mapProvider
 
   if (!sketchViewModel) {
@@ -12,36 +12,36 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
 
   const { drawDone, drawCancel } = buttonConfig
   const { dispatch, mode, feature } = pluginState
-  
+
   // Re-colour graphics when map style changes
   const reColour = async () => {
     const activeGraphicId = pluginState.feature?.properties?.id
     let activeGraphic = null
     const isCreating = sketchViewModel.state === 'active' && !activeGraphicId
-    
+
     // Cancel and wait, but only if we're in update mode (not create mode)
     if (sketchViewModel.state === 'active' && activeGraphicId) {
       sketchViewModel.cancel()
       await new Promise(resolve => setTimeout(resolve, MODE_CHANGE_DELAY))
     }
-    
+
     // Update the default symbol for new polygons
     sketchViewModel.polygonSymbol = createSymbol(mapColorScheme)
-    
+
     // Update existing graphics
     sketchLayer?.graphics.items.forEach(graphic => {
       const newGraphic = createGraphic(
-        graphic.attributes.id, 
-        graphic.geometry.rings, 
+        graphic.attributes.id,
+        graphic.geometry.rings,
         mapColorScheme
       )
       graphic.symbol = newGraphic.symbol
-      
+
       if (activeGraphicId === graphic.attributes.id) {
         activeGraphic = graphic
       }
     })
-    
+
     // Re-enter update mode only if we were editing (not creating)
     if (activeGraphic && !isCreating && sketchViewModel.layer === sketchLayer) {
       try {
@@ -68,10 +68,19 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
   // Event handlers
   const handleMapStyleChange = () => reColour()
 
+  const onGraphicChanged = (graphic) => {
+    if (!graphic) {
+      return
+    }
+    const tempFeature = graphicToGeoJSON(graphic)
+    eventBus.emit('draw:updated', tempFeature)
+    dispatch({ type: 'SET_FEATURE', payload: { tempFeature } })
+  }
+
   const handleSketchUpdate = (e) => {
     const toolInfoType = e.toolEventInfo?.type
     const graphic = e.graphics[0]
-    
+
     // Prevent polygon move
     if (toolInfoType === 'move-start') {
       sketchViewModel.cancel()
@@ -87,10 +96,8 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
     }
 
     // Emit event on update
-    if (toolInfoType === 'reshape-stop') {
-      const tempFeature = graphicToGeoJSON(graphic)
-      eventBus.emit('draw:updated', tempFeature)
-      dispatch({ type: 'SET_FEATURE', payload: { tempFeature }})
+    if (toolInfoType === 'reshape-stop' || toolInfoType === 'vertex-remove') {
+      onGraphicChanged(graphic)
     }
   }
 
@@ -108,17 +115,38 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
     updateGraphic()
   }
 
+  const handleCreate = async (event) => {
+    const { toolEventInfo } = event
+    const graphic = event?.graphic
+    if (graphic && toolEventInfo?.type === 'vertex-add') {
+      const rings = graphic.geometry?.rings
+      // rings.length is > 1 occurs when the shape becomes complex (ie self intersects)
+      // setTimeout is required to cause the undo to be called after handleCreate completes
+      // otherwise the previous change, rather than this one, is undone
+      if (rings?.length > 1) {
+        setTimeout(() => sketchViewModel.undo(), 0)
+      } else if (rings?.[0]?.length > 3) {
+        onGraphicChanged(graphic) // emit a graphic update on draw, once the graphic is 2D
+      }
+    }
+  }
+
+  const handleUndo = async (event) => {
+    const graphic = event?.graphics?.[0]
+    onGraphicChanged(graphic)
+  }
+
   const handleDone = () => {
     sketchViewModel.cancel()
     sketchViewModel.layer = emptySketchLayer
     dispatch({ type: 'SET_MODE', payload: null })
-    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
+    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null } })
     eventBus.emit('draw:done', { newFeature: pluginState.tempFeature })
   }
 
   const handleCancel = () => {
     sketchViewModel.cancel()
-    
+
     // Clear all graphics
     sketchLayer.removeAll()
 
@@ -143,10 +171,12 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
   eventBus.on(events.MAP_STYLE_CHANGE, handleMapStyleChange)
   const sketchUpdateHandler = sketchViewModel.on('update', handleSketchUpdate)
   const viewClickHandler = view.on('click', handleViewClick)
-  
+  const createHandler = sketchViewModel.on('create', handleCreate)
+  const undoHandler = sketchViewModel.on('undo', handleUndo)
+
   const prevDoneClick = drawDone.onClick
   const prevCancelClick = drawCancel.onClick
-  
+
   drawDone.onClick = handleDone
   drawCancel.onClick = handleCancel
 
@@ -155,7 +185,9 @@ export function attachEvents({ pluginState, mapProvider, events, eventBus, butto
     eventBus.off(events.MAP_STYLE_CHANGE, handleMapStyleChange)
     sketchUpdateHandler.remove()
     viewClickHandler.remove()
+    createHandler.remove()
+    undoHandler.remove()
     drawDone.onClick = prevDoneClick
     drawCancel.onClick = prevCancelClick
   }
-}
+}