@defra/interactive-map 0.0.4-alpha → 0.0.6-alpha

package/plugins/beta/draw-ml/dist/umd/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.drawMLPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e].call(i.exports,i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-draw-ml-plugin.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.drawMLPlugin:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var l=f[p];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+i){u=l;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var s=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),c&&document.head.appendChild(u)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),u=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function u(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var u=n&&n.prototype instanceof f?n:f,p=Object.create(u.prototype);return c(p,"_invoke",function(r,n,o){var i,u,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,u=0,c=e,s.n=r,a}};function d(r,n){for(u=r,c=n,t=0;!l&&f&&!o&&t<p.length;t++){var o,i=p[t],d=s.p,b=i[2];r>3?(o=b===n)&&(c=i[(u=i[4])?5:(u=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(u=0,s.v=n,s.n=i[1]):d<b&&(o=r<3||i[0]>n||n>b)&&(i[4]=r,i[5]=n,s.n=b,u=0))}if(o||r>1)return a;throw l=!0,n}return function(o,p,b){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,b),u=p,c=b;(t=u<2?e:c)||!l;){i||(u?u<3?(u>1&&(s.n=-1),d(u,c)):s.n=c:s.v=c);try{if(f=2,i){if(u||(o="next"),t=i[o]){if(!(t=t.call(i,c)))throw TypeError("iterator result is not an object");if(!t.done)return t;c=t.value,u<2&&(u=0)}else 1===u&&(t=i.return)&&t.call(i),u<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),u=1);i=e}else if((t=(l=s.n<0)?c:r.call(n,s))!==a)break}catch(t){i=e,u=1,c=t}finally{f=1}}return{value:t,done:l}}}(r,o,i),!0),p}var a={};function f(){}function p(){}function l(){}t=Object.getPrototypeOf;var s=[][n]?t(t([][n]())):(c(t={},n,function(){return this}),t),d=l.prototype=f.prototype=Object.create(s);function b(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,l):(e.__proto__=l,c(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=l,c(d,"constructor",l),c(l,"constructor",p),p.displayName="GeneratorFunction",c(l,o,"GeneratorFunction"),c(d),c(d,o,"Generator"),c(d,n,function(){return this}),c(d,"toString",function(){return"[object Generator]"}),(u=function(){return{w:i,m:b}})()}function c(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}c=function(e,t,r,n){function i(t,r){c(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},c(e,t,r,n)}function f(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function s(e,t,r){return(t=function(e){var t=function(e){if("object"!=a(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=a(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==a(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(){var e,t;return l(l({},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),{},{id:"draw",load:(e=u().m(function e(){var t;return u().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(966).then(o.bind(o,300));case 1:return t=e.v.manifest,e.a(2,t)}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){f(i,n,o,a,u,"next",e)}function u(e){f(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})})}return o.d(i,{default:()=>d}),i.default})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("defra",[],t):"object"==typeof exports?exports.defra=t():(e.defra=e.defra||{},e.defra.drawMLPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e].call(i.exports,i,i.exports,o),i.exports}o.m=r,o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.f={},o.e=e=>Promise.all(Object.keys(o.f).reduce((t,r)=>(o.f[r](e,t),t),[])),o.u=e=>"im-draw-ml-plugin.js",o.miniCssF=e=>{},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="defra.drawMLPlugin:",o.l=(r,n,i,a)=>{if(e[r])e[r].push(n);else{var u,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),p=0;p<f.length;p++){var l=f[p];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+i){u=l;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",o.nc&&u.setAttribute("nonce",o.nc),u.setAttribute("data-webpack",t+i),u.src=r),e[r]=[n];var s=(t,n)=>{u.onerror=u.onload=null,clearTimeout(d);var o=e[r];if(delete e[r],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach(e=>e(n)),t)return t(n)},d=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),c&&document.head.appendChild(u)}},o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;o.g.importScripts&&(e=o.g.location+"");var t=o.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),o.p=e})(),(()=>{var e={57:0};o.f.j=(t,r)=>{var n=o.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var i=new Promise((r,o)=>n=e[t]=[r,o]);r.push(n[2]=i);var a=o.p+o.u(t),u=new Error;o.l(a,r=>{if(o.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;u.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",u.name="ChunkLoadError",u.type=i,u.request=a,n[1](u)}},"chunk-"+t,t)}};var t=(t,r)=>{var n,i,[a,u,c]=r,f=0;if(a.some(t=>0!==e[t])){for(n in u)o.o(u,n)&&(o.m[n]=u[n]);c&&c(o)}for(t&&t(r);f<a.length;f++)i=a[f],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunkdefra_DefraMap=this.webpackChunkdefra_DefraMap||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function u(){var e,t,r="function"==typeof Symbol?Symbol:{},n=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,n,o,i){var u=n&&n.prototype instanceof f?n:f,p=Object.create(u.prototype);return c(p,"_invoke",function(r,n,o){var i,u,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,r){return i=t,u=0,c=e,s.n=r,a}};function d(r,n){for(u=r,c=n,t=0;!l&&f&&!o&&t<p.length;t++){var o,i=p[t],d=s.p,b=i[2];r>3?(o=b===n)&&(c=i[(u=i[4])?5:(u=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(u=0,s.v=n,s.n=i[1]):d<b&&(o=r<3||i[0]>n||n>b)&&(i[4]=r,i[5]=n,s.n=b,u=0))}if(o||r>1)return a;throw l=!0,n}return function(o,p,b){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,b),u=p,c=b;(t=u<2?e:c)||!l;){i||(u?u<3?(u>1&&(s.n=-1),d(u,c)):s.n=c:s.v=c);try{if(f=2,i){if(u||(o="next"),t=i[o]){if(!(t=t.call(i,c)))throw TypeError("iterator result is not an object");if(!t.done)return t;c=t.value,u<2&&(u=0)}else 1===u&&(t=i.return)&&t.call(i),u<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),u=1);i=e}else if((t=(l=s.n<0)?c:r.call(n,s))!==a)break}catch(t){i=e,u=1,c=t}finally{f=1}}return{value:t,done:l}}}(r,o,i),!0),p}var a={};function f(){}function p(){}function l(){}t=Object.getPrototypeOf;var s=[][n]?t(t([][n]())):(c(t={},n,function(){return this}),t),d=l.prototype=f.prototype=Object.create(s);function b(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,l):(e.__proto__=l,c(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return p.prototype=l,c(d,"constructor",l),c(l,"constructor",p),p.displayName="GeneratorFunction",c(l,o,"GeneratorFunction"),c(d),c(d,o,"Generator"),c(d,n,function(){return this}),c(d,"toString",function(){return"[object Generator]"}),(u=function(){return{w:i,m:b}})()}function c(e,t,r,n){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}c=function(e,t,r,n){function i(t,r){c(e,t,function(e){return this._invoke(t,r,e)})}t?o?o(e,t,{value:r,enumerable:!n,configurable:!n,writable:!n}):e[t]=r:(i("next",0),i("throw",1),i("return",2))},c(e,t,r,n)}function f(e,t,r,n,o,i,a){try{var u=e[i](a),c=u.value}catch(e){return void r(e)}u.done?t(c):Promise.resolve(c).then(n,o)}function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function s(e,t,r){return(t=function(e){var t=function(e){if("object"!=a(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=a(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==a(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(){var e,t;return l(l({},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),{},{id:"draw",load:(e=u().m(function e(){var t;return u().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,o.e(966).then(o.bind(o,133));case 1:return t=e.v.manifest,e.a(2,t)}},e)}),t=function(){var t=this,r=arguments;return new Promise(function(n,o){var i=e.apply(t,r);function a(e){f(i,n,o,a,u,"next",e)}function u(e){f(i,n,o,a,u,"throw",e)}a(void 0)})},function(){return t.apply(this,arguments)})})}return o.d(i,{default:()=>d}),i.default})());

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

@@ -1,3 +1,5 @@
+import { flattenStyleProperties } from '../utils/flattenStyleProperties.js'
+
 export const addFeature = ({ mapProvider, services }, feature) => {
   const { draw } = mapProvider
   const { eventBus } = services
@@ -6,10 +8,20 @@ export const addFeature = ({ mapProvider, services }, feature) => {
     return
   }
 
+  // Extract style props from top level, flatten variants, merge with custom properties
+  const { stroke, fill, strokeWidth, properties, ...rest } = feature
+  const flatFeature = {
+    ...rest,
+    properties: {
+      ...properties,
+      ...flattenStyleProperties({ stroke, fill, strokeWidth })
+    }
+  }
+
   // --- Add feature to draw instance
-  draw.add(feature, {
+  draw.add(flatFeature, {
     userProperties: true
   })
 
-  eventBus.emit('draw:add', feature)
-}
+  eventBus.emit('draw:add', flatFeature)
+}

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

@@ -6,7 +6,7 @@ import { getSnapInstance } from '../utils/snapHelpers.js'
  * @param {string} featureId - ID of the feature to edit
  * @param {object} options - Options including snapLayers
  */
-export const editFeature = ({ appState, appConfig, mapState, pluginState, mapProvider }, featureId, options = {}) => {
+export const editFeature = ({ appState, appConfig, mapState, pluginConfig, pluginState, mapProvider }, featureId, options = {}) => {
   const { dispatch } = pluginState
   const { draw, map } = mapProvider
 
@@ -14,24 +14,35 @@ export const editFeature = ({ appState, appConfig, mapState, pluginState, mapPro
     return
   }
 
+  // Determin snapLayers from pluginConfig or runtime config
+  let snapLayers = null
+  if (options.snapLayers !== undefined) {
+    snapLayers = options.snapLayers
+  } else if (pluginConfig.snapLayers !== undefined) {
+    snapLayers = pluginConfig.snapLayers
+  } else {
+    snapLayers = null
+  }
+
   // Set per-call snap layers if provided
   const snap = getSnapInstance(map)
   if (snap?.setSnapLayers) {
-    snap.setSnapLayers(options.snapLayers || null)
-  } else if (options.snapLayers) {
+    snap.setSnapLayers(snapLayers)
+  } else if (snapLayers) {
     // Snap instance not ready yet - store for later
-    map._pendingSnapLayers = options.snapLayers
+    map._pendingSnapLayers = snapLayers
   } else {
     // No action
   }
 
   // Update state so UI can react to snap layer availability
-  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: options.snapLayers?.length > 0 })
+  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: snapLayers?.length > 0 })
 
   // Change mode to edit_vertex
   draw.changeMode('edit_vertex', {
     container: appState.layoutRefs.viewportRef.current,
     deleteVertexButtonId: `${appConfig.id}-draw-delete-point`,
+    undoButtonId: `${appConfig.id}-draw-undo`,
     isPanEnabled: appState.interfaceType !== 'keyboard',
     interfaceType: appState.interfaceType,
     scale: { small: 1, medium: 1.5, large: 2 }[mapState.mapSize],

package/plugins/beta/draw-ml/src/api/newLine.js

@@ -1,32 +1,55 @@
 import { getSnapInstance } from '../utils/snapHelpers.js'
+import { flattenStyleProperties } from '../utils/flattenStyleProperties.js'
+import { DEFAULTS } from '../defaults.js'
 
 /**
  * Programmatically create a new line
  * @param {object} context - plugin context
  * @param {string} featureId - ID for the new feature
- * @param {object} options - Options including snapLayers.
+ * @param {object} options - Options including snapLayers, stroke, fill, strokeWidth, properties.
  */
-export const newLine = ({ appState, appConfig, pluginState, mapProvider }, featureId, options = {}) => {
+export const newLine = ({ appState, appConfig, pluginConfig, pluginState, mapProvider, services }, featureId, options = {}) => {
   const { dispatch } = pluginState
   const { draw, map } = mapProvider
+  const { eventBus } = services
 
   if (!draw) {
     return
   }
 
+  // Emit draw:start
+  eventBus.emit('draw:start', { mode: 'draw_line' })
+
+  // Determin snapLayers from pluginConfig or runtime config
+  let snapLayers = null
+  if (options.snapLayers !== undefined) {
+    snapLayers = options.snapLayers
+  } else if (pluginConfig.snapLayers !== undefined) {
+    snapLayers = pluginConfig.snapLayers
+  } else {
+    snapLayers = null
+  }
+
   // Set per-call snap layers if provided
   const snap = getSnapInstance(map)
   if (snap?.setSnapLayers) {
-    snap.setSnapLayers(options.snapLayers || null)
-  } else if (options.snapLayers) {
+    snap.setSnapLayers(snapLayers)
+  } else if (snapLayers) {
     // Snap instance not ready yet - store for later
-    map._pendingSnapLayers = options.snapLayers
+    map._pendingSnapLayers = snapLayers
   } else {
     // No action
   }
 
   // Update state so UI can react to snap layer availability
-  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: options.snapLayers?.length > 0 })
+  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: snapLayers?.length > 0 })
+
+  // Extract style props and flatten variants into properties
+  const { stroke, fill, strokeWidth, properties: customProperties, ...modeOptions } = options
+  const properties = {
+    ...customProperties,
+    ...flattenStyleProperties({ stroke, fill, strokeWidth })
+  }
 
   // Change mode to draw_line
   draw.changeMode('draw_line', {
@@ -35,7 +58,9 @@ export const newLine = ({ appState, appConfig, pluginState, mapProvider }, featu
     addVertexButtonId: `${appConfig.id}-draw-add-point`,
     interfaceType: appState.interfaceType,
     getSnapEnabled: () => mapProvider.snapEnabled === true,
-    featureId
+    featureId,
+    ...modeOptions,
+    properties
   })
 
   // Set mode to draw_line

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

@@ -1,32 +1,55 @@
 import { getSnapInstance } from '../utils/snapHelpers.js'
+import { flattenStyleProperties } from '../utils/flattenStyleProperties.js'
+import { DEFAULTS } from '../defaults.js'
 
 /**
  * Programmatically create a new polygon
  * @param {object} context - plugin context
  * @param {string} featureId - ID for the new feature
- * @param {object} options - Options including snapLayers.
+ * @param {object} options - Options including snapLayers, stroke, fill, strokeWidth, properties.
  */
-export const newPolygon = ({ appState, appConfig, pluginState, mapProvider }, featureId, options = {}) => {
+export const newPolygon = ({ appState, appConfig, pluginConfig, pluginState, mapProvider, services }, featureId, options = {}) => {
   const { dispatch } = pluginState
   const { draw, map } = mapProvider
+  const { eventBus } = services
 
   if (!draw) {
     return
   }
 
+  // Emit draw:start
+  eventBus.emit('draw:start', { mode: 'draw_polygon' })
+
+  // Determin snapLayers from pluginConfig or runtime config
+  let snapLayers = null
+  if (options.snapLayers !== undefined) {
+    snapLayers = options.snapLayers
+  } else if (pluginConfig.snapLayers !== undefined) {
+    snapLayers = pluginConfig.snapLayers
+  } else {
+    snapLayers = null
+  }
+
   // Set per-call snap layers if provided
   const snap = getSnapInstance(map)
   if (snap?.setSnapLayers) {
-    snap.setSnapLayers(options.snapLayers || null)
-  } else if (options.snapLayers) {
+    snap.setSnapLayers(snapLayers)
+  } else if (snapLayers) {
     // Snap instance not ready yet - store for later
-    map._pendingSnapLayers = options.snapLayers
+    map._pendingSnapLayers = snapLayers
   } else {
     // No action
   }
 
   // Update state so UI can react to snap layer availability
-  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: options.snapLayers?.length > 0 })
+  dispatch({ type: 'SET_HAS_SNAP_LAYERS', payload: snapLayers?.length > 0 })
+
+  // Extract style props and flatten variants into properties
+  const { stroke, fill, strokeWidth, properties: customProperties, ...modeOptions } = options
+  const properties = {
+    ...customProperties,
+    ...flattenStyleProperties({ stroke, fill, strokeWidth })
+  }
 
   // Change mode to draw_polygon
   draw.changeMode('draw_polygon', {
@@ -35,9 +58,11 @@ export const newPolygon = ({ appState, appConfig, pluginState, mapProvider }, fe
     addVertexButtonId: `${appConfig.id}-draw-add-point`,
     interfaceType: appState.interfaceType,
     getSnapEnabled: () => mapProvider.snapEnabled === true,
-    featureId
+    featureId,
+    ...modeOptions,
+    properties
   })
 
   // Set mode to draw_polygon
   dispatch({ type: 'SET_MODE', payload: 'draw_polygon' })
-}
+}

package/plugins/beta/draw-ml/src/defaults.js

@@ -7,6 +7,7 @@ export const DEFAULTS = {
   stroke: 'rgba(212,53,28,1)',
   strokeWidth: 2,
   fill: 'rgba(212,53,28,0.1)',
+  snapLayers: [],
   snapColors: {
     vertex: 'rgba(212,53,28,1)',
     midpoint: 'rgba(40,161,151,1)',

package/plugins/beta/draw-ml/src/draw.scss

@@ -6,4 +6,27 @@
     path {
         fill: var(--map-overlay-halo-color);
     }
+}
+
+// Ensure action buttons take up same width
+.im-c-actions {
+    .im-c-button-wrapper--draw-done,
+    .im-c-button-wrapper--draw-menu,
+    .im-c-button-wrapper--draw-cancel {
+        width: 33.33%;
+    }
+}
+.im-o-app--tablet .im-c-actions,
+.im-o-app--desktop .im-c-actions {
+    .im-c-button-wrapper--draw-done,
+    .im-c-button-wrapper--draw-menu,
+    .im-c-button-wrapper--draw-cancel {
+        width: 100px;
+    }
+}
+
+// Position touch add point button
+.im-c-button-wrapper--draw-add-point {
+    position: absolute;
+    bottom: calc(100% + var(--primary-gap));
 }

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

@@ -1,20 +1,11 @@
 import { clearSnapState, getSnapInstance } from './utils/snapHelpers.js'
 
-export function attachEvents ({ appState, appConfig, mapState, pluginState, mapProvider, buttonConfig, eventBus }) {
-  const {
-    drawDone,
-    drawAddPoint,
-    drawUndo,
-    drawFinish,
-    drawDeletePoint,
-    drawSnap,
-    drawCancel
-  } = buttonConfig
-
+export function attachEvents({ pluginState, mapProvider, buttonConfig, eventBus }) {
+  const { drawDone, drawAddPoint, drawUndo, drawDeletePoint, drawSnap, drawCancel } = buttonConfig
   const { map, draw } = mapProvider
   const { dispatch, feature, tempFeature } = pluginState
 
-  // Helper to disable snap and hide indicators
+  // --- Helper to disable snap
   const disableSnap = () => {
     mapProvider.snapEnabled = false
     dispatch({ type: 'SET_SNAP', payload: false })
@@ -28,100 +19,72 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
     }
   }
 
-  // --- Done
-  const handleDone = () => {
-    disableSnap()
+  // --- Helper to reset draw mode and feature (without touching snap)
+  const resetDrawModeAndFeature = () => {
     mapProvider.undoStack?.clear()
-    draw.changeMode('disabled')
     dispatch({ type: 'SET_MODE', payload: null })
     dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
-    eventBus.emit('draw:done', { newFeature: tempFeature })
   }
-  drawDone.onClick = handleDone
 
-  // --- Cancel
-  const handleCancel = () => {
-    if (tempFeature?.id) {
-      draw.delete(tempFeature.id)
-    }
+  // --- Button handlers
+  const handleDone = () => {
+    const mode = draw.getMode()
+    const features = draw.getAll().features
+    const feature = features?.[0]
 
-    // Reinstate initial feature
-    if (feature) {
-      draw.add(feature)
-    }
     disableSnap()
     mapProvider.undoStack?.clear()
-    draw.changeMode('disabled')
 
-    dispatch({ type: 'SET_MODE', payload: null })
-    dispatch({ type: 'SET_FEATURE', payload: { feature: null, tempFeature: null }})
-    eventBus.emit('draw:cancel', { originalFeature: feature })
-  }
-  drawCancel.onClick = handleCancel
-
-  // --- Finish shape (programmatically complete the drawing)
-  const handleFinish = () => {
-    const mode = draw.getMode()
-    if (!['draw_polygon', 'draw_line'].includes(mode)) {
+    if (mode === 'edit_vertex') {
+      map.fire('draw.editfinish', { features: [feature] })
       return
     }
 
-    const features = draw.getAll().features
-    if (features.length === 0) {
+    if (!['draw_polygon', 'draw_line'].includes(mode) || features.length === 0) {
       return
     }
 
-    const feature = features[0]
     const geom = feature.geometry
-
-    // Remove the rubber band point (last coordinate that follows cursor)
     if (geom.type === 'Polygon') {
-      // Polygon coords: [v1, v2, v3, ..., rubberBand, v1(closing)]
-      // Remove rubber band (second to last) and keep the ring closed
       const ring = geom.coordinates[0]
       geom.coordinates[0] = [...ring.slice(0, -2), ring[0]]
     } else {
-      // Line coords: [v1, v2, v3, ..., rubberBand]
-      // Remove the rubber band (last point)
       geom.coordinates = geom.coordinates.slice(0, -1)
     }
 
-    // Fire draw.create to trigger the standard completion flow
     map.fire('draw.create', { features: [feature] })
+  }
 
-    // Change mode to trigger cleanup (this calls onStop on the draw mode)
-    draw.changeMode('simple_select', { featureIds: [feature.id] })
+  const handleCancel = () => {
+    if (tempFeature?.id) {
+      draw.delete(tempFeature.id)
+    }
+    if (feature) {
+      draw.add(feature)
+    }
+    disableSnap()
+    draw.changeMode('disabled')
+    resetDrawModeAndFeature()
+    eventBus.emit('draw:cancel', { originalFeature: feature })
   }
-  drawFinish.onClick = handleFinish
 
-  // --- Undo last action (only for draw modes - edit_vertex handles its own undo)
   const handleUndo = () => {
-    // edit_vertex mode handles its own undo via button click listener
     if (draw.getMode() === 'edit_vertex') {
       return
     }
-
     const undoStack = mapProvider.undoStack
-    if (!undoStack || undoStack.length === 0) {
+    if (!undoStack?.length) {
       return
     }
-
     const operation = undoStack.pop()
-
-    // Set flag to prevent button click from also adding a vertex
     map._undoInProgress = true
     setTimeout(() => { map._undoInProgress = false }, 100)
-
-    // Fire event for the current mode to handle
     map.fire('draw.undo', { operation })
   }
-  drawUndo.onClick = handleUndo
 
-  // --- Snap toggle with throttle to prevent Safari slowdown
   let lastToggleTime = 0
   const THROTTLE_MS = 300
   const handleSnap = () => {
-    // Strict throttle - ignore clicks within throttle window
     const now = Date.now()
     if (now - lastToggleTime < THROTTLE_MS) {
       return
@@ -137,90 +100,69 @@ export function attachEvents ({ appState, appConfig, mapState, pluginState, mapP
       snap.setSnapStatus(newSnapState)
     }
 
-    // Clear all snap state when disabling - prevents accumulation
     if (!newSnapState && snap) {
       clearSnapState(snap)
-      // Hide indicator immediately when disabling (single call, not in RAF)
       if (map.getLayer('snap-helper-circle')) {
         map.setLayoutProperty('snap-helper-circle', 'visibility', 'none')
       }
     }
-    // When enabling, the indicator will show automatically via setMapData patch
   }
-  drawSnap.onClick = handleSnap
 
-  // --- Map style change
+  // --- Map style update
   const handleStyleData = () => {
     const layers = map.getStyle().layers || []
-    if (layers.length === 0 || layers[layers.length - 1].source?.startsWith('mapbox-gl-draw')) {
+    if (!layers.length || layers[layers.length - 1].source?.startsWith('mapbox-gl-draw')) {
       return
     }
     layers.filter(l => l.source?.startsWith('mapbox-gl-draw')).forEach(l => map.moveLayer(l.id))
   }
-  map.on('styledata', () => handleStyleData())
 
-  // --- A new shape is created
-  const onCreate = (e) => {
+  // --- Draw completion handlers (create / edit)
+  const handleDrawCompletion = (eventName) => (e) => {
     const newFeature = e.features[0]
-    dispatch({ type: 'SET_FEATURE', payload: { tempFeature: newFeature }})
-    eventBus.emit('draw:create', e)
-
-    // Clear draw mode undo stack - editing starts fresh
-    mapProvider.undoStack?.clear()
-
-    // Switch straight to edit vertex mode
-    dispatch({ type: 'SET_MODE', payload: 'edit_vertex'})
-
-    setTimeout(() => {
-      draw.changeMode('edit_vertex', {
-        container: appState.layoutRefs.viewportRef.current,
-        deleteVertexButtonId: `${appConfig.id}-draw-delete-point`,
-        undoButtonId: `${appConfig.id}-draw-undo`,
-        isPanEnabled: appState.interfaceType !== 'keyboard',
-        interfaceType: appState.interfaceType,
-        scale: { small: 1, medium: 1.5, large: 2 }[mapState.mapSize],
-        featureId: newFeature.id,
-        getSnapEnabled: () => mapProvider.snapEnabled === true
-      })
-    }, 0)
+    resetDrawModeAndFeature()
+    setTimeout(() => draw.changeMode('disabled'), 0)
+    eventBus.emit(eventName, { newFeature })
   }
-  map.on('draw.create', onCreate)
 
-  // --- A shape is updated
-  const onUpdate = (e) => {
-    eventBus.emit('draw:update', e)
-  }
-  map.on('draw.update', onUpdate)
+  const onCreate = handleDrawCompletion('draw:create')
+  const onEditFinish = handleDrawCompletion('draw:edit')
 
-  // --- A vertex is selected
+  // --- Other map events
+  const onUpdate = (e) => eventBus.emit('draw:update', e)
   const onVertexSelection = (e) => {
     dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: e })
     eventBus.emit('draw:vertexselection', e)
   }
-  map.on('draw.vertexselection', onVertexSelection)
-
-  // --- Vertex count changes during drawing
   const onVertexChange = (e) => {
     dispatch({ type: 'SET_SELECTED_VERTEX_INDEX', payload: { index: -1, numVertecies: e.numVertecies } })
   }
-  map.on('draw.vertexchange', onVertexChange)
-
-  // --- Undo stack changes
   const onUndoChange = (e) => {
     dispatch({ type: 'SET_UNDO_STACK_LENGTH', payload: e.length })
   }
+
+  // --- Register events
+  drawDone.onClick = handleDone
+  drawCancel.onClick = handleCancel
+  drawUndo.onClick = handleUndo
+  drawSnap.onClick = handleSnap
+
+  map.on('styledata', handleStyleData)
+  map.on('draw.create', onCreate)
+  map.on('draw.editfinish', onEditFinish)
+  map.on('draw.update', onUpdate)
+  map.on('draw.vertexselection', onVertexSelection)
+  map.on('draw.vertexchange', onVertexChange)
   map.on('draw.undochange', onUndoChange)
 
+  // --- Cleanup
   return () => {
-    drawDone.onClick = null
-    drawAddPoint.onClick = null
-    drawUndo.onClick = null
-    drawFinish.onClick = null
-    drawDeletePoint.onClick = null
-    drawSnap.onClick = null
-    drawCancel.onClick = null
+    [drawDone, drawAddPoint, drawUndo, drawDeletePoint, drawSnap, drawCancel].forEach(btn => { if (btn) {
+      btn.onClick = null
+    }})
     map.off('styledata', handleStyleData)
     map.off('draw.create', onCreate)
+    map.off('draw.editfinish', onEditFinish)
     map.off('draw.update', onUpdate)
     map.off('draw.vertexselection', onVertexSelection)
     map.off('draw.vertexchange', onVertexChange)