@defra/interactive-map 0.0.43-fmp-experimental → 0.0.45-alpha

package/docs/examples/place-marker.mdx

@@ -30,6 +30,8 @@ Two patterns work together in this example:
         mapProvider: maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-0.1276, 51.5074],
@@ -103,6 +105,8 @@ Two patterns work together in this example:
         mapProvider: defra.maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-0.1276, 51.5074],

package/docs/examples/search-control.mdx

@@ -30,6 +30,8 @@ This requires an OS Data Hub API key. Embedding the key in the URL is the simple
         mapProvider: maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-1.6, 53.1],
@@ -58,6 +60,8 @@ This requires an OS Data Hub API key. Embedding the key in the URL is the simple
         mapProvider: defra.maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-1.6, 53.1],

package/docs/examples/select-feature.mdx

@@ -92,6 +92,8 @@ The layer ID used here (`field-parcels`) comes from the datasets plugin — a da
         mapProvider: maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-2.464, 54.558],
@@ -212,6 +214,8 @@ The layer ID used here (`field-parcels`) comes from the datasets plugin — a da
         mapProvider: defra.maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-2.464, 54.558],

package/docs/examples/style-switcher.mdx

@@ -20,40 +20,36 @@ The live demo uses OS Open Zoomstack tiles from OS Labs, which do not require an
       import maplibreProvider from '@defra/interactive-map/providers/maplibre'
       import createMapStylesPlugin from '@defra/interactive-map/plugins/map-styles'
 
-      const attribution = 'Contains OS data © Crown copyright and database rights 2025'
-
       const mapStyles = [
         {
           id: 'outdoor',
           label: 'Outdoor',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+          url: 'https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/main/OS_VTS_3857_Open_Outdoor.json',
           thumbnail: '/path/to/outdoor-thumbnail.jpg',
-          attribution,
+          logo: '/path/to/outdoor-logo.svg',
+          logoAltText: 'Ordnance Survey logo',
+          attribution: 'Contains OS data © Crown copyright and database rights 2025',
           backgroundColor: '#f5f5f0'
         },
         {
-          id: 'night',
-          label: 'Night',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-night/style.json',
-          thumbnail: '/path/to/night-thumbnail.jpg',
-          attribution,
+          id: 'dark',
+          label: 'Dark',
+          url: 'https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/main/OS_VTS_3857_Open_Dark.json',
+          thumbnail: '/path/to/dark-thumbnail.jpg',
+          logo: '/path/to/dark-logo.svg',
+          logoAltText: 'Ordnance Survey logo',
+          attribution: 'Contains OS data © Crown copyright and database rights 2025',
           mapColorScheme: 'dark',
           appColorScheme: 'dark'
         },
         {
-          id: 'deuteranopia',
-          label: 'Deuteranopia',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-deuteranopia/style.json',
-          thumbnail: '/path/to/deuteranopia-thumbnail.jpg',
-          attribution,
-          backgroundColor: '#f5f5f0'
-        },
-        {
-          id: 'tritanopia',
-          label: 'Tritanopia',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-tritanopia/style.json',
-          thumbnail: '/path/to/tritanopia-thumbnail.jpg',
-          attribution,
+          id: 'blackWhite',
+          label: 'Black/White',
+          url: 'https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/main/OS_VTS_3857_Open_Black_and_White.json',
+          thumbnail: '/path/to/black-white-thumbnail.jpg',
+          logo: '/path/to/black-white-logo.svg',
+          logoAltText: 'Ordnance Survey logo',
+          attribution: 'Contains OS data © Crown copyright and database rights 2025',
           backgroundColor: '#f5f5f0'
         }
       ]
@@ -80,40 +76,36 @@ The live demo uses OS Open Zoomstack tiles from OS Labs, which do not require an
       <script src="/your-assets-path/map-styles-plugin/index.js"></script>
 
       <script>
-      const attribution = 'Contains OS data © Crown copyright and database rights 2025'
-
       const mapStyles = [
         {
           id: 'outdoor',
           label: 'Outdoor',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-outdoor/style.json',
+          url: 'https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/main/OS_VTS_3857_Open_Outdoor.json',
           thumbnail: '/path/to/outdoor-thumbnail.jpg',
-          attribution,
+          logo: '/path/to/outdoor-logo.svg',
+          logoAltText: 'Ordnance Survey logo',
+          attribution: 'Contains OS data © Crown copyright and database rights 2025',
           backgroundColor: '#f5f5f0'
         },
         {
-          id: 'night',
-          label: 'Night',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-night/style.json',
-          thumbnail: '/path/to/night-thumbnail.jpg',
-          attribution,
+          id: 'dark',
+          label: 'Dark',
+          url: 'https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/main/OS_VTS_3857_Open_Dark.json',
+          thumbnail: '/path/to/dark-thumbnail.jpg',
+          logo: '/path/to/dark-logo.svg',
+          logoAltText: 'Ordnance Survey logo',
+          attribution: 'Contains OS data © Crown copyright and database rights 2025',
           mapColorScheme: 'dark',
           appColorScheme: 'dark'
         },
         {
-          id: 'deuteranopia',
-          label: 'Deuteranopia',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-deuteranopia/style.json',
-          thumbnail: '/path/to/deuteranopia-thumbnail.jpg',
-          attribution,
-          backgroundColor: '#f5f5f0'
-        },
-        {
-          id: 'tritanopia',
-          label: 'Tritanopia',
-          url: 'https://labs.os.uk/tiles/styles/open-zoomstack-tritanopia/style.json',
-          thumbnail: '/path/to/tritanopia-thumbnail.jpg',
-          attribution,
+          id: 'blackWhite',
+          label: 'Black/White',
+          url: 'https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/main/OS_VTS_3857_Open_Black_and_White.json',
+          thumbnail: '/path/to/black-white-thumbnail.jpg',
+          logo: '/path/to/black-white-logo.svg',
+          logoAltText: 'Ordnance Survey logo',
+          attribution: 'Contains OS data © Crown copyright and database rights 2025',
           backgroundColor: '#f5f5f0'
         }
       ]

package/docs/examples/toggle-marker-label.mdx

@@ -25,6 +25,8 @@ Add a marker with a hidden label, then use the interact plugin to show the label
         mapProvider: maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-2.96, 54.43],
@@ -64,6 +66,8 @@ Add a marker with a hidden label, then use the interact plugin to show the label
         mapProvider: defra.maplibreProvider(),
         mapStyle: {
           url: 'https://your-tile-url/style.json',
+          logo: '/path/to/logo.svg',
+          logoAltText: 'Your logo alt text',
           attribution: 'Your tile attribution'
         },
         center: [-2.96, 54.43],

package/docs/plugins/draw.md

@@ -402,13 +402,13 @@ The plugin registers its own toolbar buttons automatically — Cancel, Add point
 |----------|--------|
 | <kbd>Enter</kbd> | Add point (draw) |
 | <kbd>Spacebar</kbd> | Select nearest point (edit) |
-| <kbd>Alt</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd>/<kbd>←</kbd>/<kbd>→</kbd> | Select adjacent point (edit) |
+| <kbd>Option</kbd>/<kbd>Alt</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd>/<kbd>←</kbd>/<kbd>→</kbd> | Select adjacent point (edit) |
 | <kbd>↑</kbd>/<kbd>↓</kbd>/<kbd>←</kbd>/<kbd>→</kbd> | Move point (edit) |
 | <kbd>Shift</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd>/<kbd>←</kbd>/<kbd>→</kbd> | Nudge point, fine step (edit) |
 | <kbd>Delete</kbd> | Delete point (edit) |
 | <kbd>Command</kbd>/<kbd>Ctrl</kbd> + <kbd>Z</kbd> | Undo |
 
-A selected edit vertex also claims the map's [`enableMoveControls`](../api.md#enablemovecontrols) D-pad, if enabled, so it can be nudged with the on-screen directional buttons as well as the keyboard.
+A selected edit vertex also claims the map's [`enableMapControls`](../api.md#enablemapcontrols) D-pad, if enabled, so it can be nudged with the on-screen directional buttons as well as the keyboard.
 
 ## Events
 

package/docs/plugins/plugin-manifest.md

@@ -87,6 +87,15 @@ const InitComponent = ({ context }) => {
 
 ---
 
+### `keyboardShortcuts`
+**Type:** `KeyboardShortcutDefinition[]`
+
+Keyboard shortcut definitions shown in the keyboard shortcuts help panel (opened via <kbd>Shift</kbd> + <kbd>?</kbd>). Registering one only adds a row to the help panel — bind the actual key handling separately, e.g. in your plugin's `InitComponent`.
+
+See [KeyboardShortcutDefinition](../api/keyboard-shortcut-definition.md) for full details.
+
+---
+
 ### `panels`
 **Type:** `PanelDefinition[]`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/interactive-map",
-  "version": "0.0.43-fmp-experimental",
+  "version": "0.0.45-alpha",
   "description": "An accessible map component",
   "repository": {
     "type": "git",
@@ -97,7 +97,7 @@
     "prod": "webpack serve --config webpack.prod.mjs",
     "build:umd": "webpack --config webpack.umd.mjs --mode production",
     "build:esm": "rollup --config rollup.esm.mjs",
-    "build": "npm run clean && npm-run-all --parallel build:umd build:esm",
+    "build": "npm run clean && npm run build:umd && npm run build:esm",
     "type-check": "tsc --noEmit",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "standard \"./**/*.{js,jsx,ts,tsx}\"",
@@ -175,6 +175,8 @@
     "compression-webpack-plugin": "^12.0.0",
     "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "cssnano": "^6.1.2",
     "dotenv": "^17.2.0",
     "express-static-gzip": "^3.0.0",
     "geodesy": "^2.4.0",

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 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_UPDATE_MARKER:"app:updatemarker",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_SHOW_HINT:"app:showhint",APP_DISMISS_HINT:"app:dismisshint",APP_READY:"app:ready",APP_OPENED:"app:opened",APP_CLOSED:"app:closed",APP_FULLSCREEN_CHANGE:"app:fullscreenchange",APP_PANEL_OPENED:"app:panelopened",APP_PANEL_CLOSED:"app:panelclosed",MAP_SET_STYLE:"map:setstyle",MAP_SET_SIZE:"map:setsize",MAP_SET_FEATURES:"map:setfeatures",MAP_SET_FEATURES_SUPPRESSED:"map:setfeaturessuppressed",MAP_SET_ACTIVE_FEATURE:"map:setactivefeature",MAP_SELECT_FEATURE:"map:selectfeature",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_DESTROY:"map:destroy"},s="[interactive-map]",u=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return console.warn(s,...t)},d=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return console.error(s,...t)};function m(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 y(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?m(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):m(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}function v(e){return{type:"simple-fill",color:[0,120,255,.2],outline:{color:"dark"===e?"#ffffff":"#d4351c",width:2}}}function E(e,t,r){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},{simplify:o=!0,allowHoles:p=!1}=a,l=new i({geometry:{type:"polygon",rings:t,spatialReference:27700},attributes:{id:e},symbol:v(r)});return o||!1===p?((e,t)=>{var{simplify:r=!0,allowHoles:a=!1}=t;return!r||n.isSimple(e.geometry)||(u("Feature geometry is not simple, attempting to simplify"),e.geometry=n.execute(e.geometry),n.isSimple(e.geometry))?!1===a&&(null==e?void 0:e.geometry.rings.length)>1?(d("Feature contains multiple polygons, which are not supported."),null):e:(d("Failed to simplify geometry, cannot add feature"),null)})(l,a):l}function f(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:y({},r)};case"polyline":return{type:"Feature",geometry:{type:"LineString",coordinates:t.paths[0]},properties:y({},r)};case"polygon":return{type:"Feature",geometry:{type:"Polygon",coordinates:t.rings},properties:y({},r)};default:throw new Error("Unsupported geometry type: ".concat(t.type))}}function h(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 g(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?h(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):h(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}var P={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},_={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,s,{appState:u,mapState:d,pluginConfig:m,pluginState:y,services:h,mapProvider:g,buttonConfig:P}=e,{eventBus:_}=h,{mapColorScheme:S}=d.mapStyle||{},A=null===(i=null===(p=m.includeModes)||void 0===p?void 0:p.includes(u.mode))||void 0===i||i,O=null!==(l=null===(s=m.excludeModes)||void 0===s?void 0:s.includes(u.mode))&&void 0!==l&&l,b=d.isMapReady&&A&&!O;t(()=>{if(b&&!g.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:g});return g.sketchViewModel=e,g.sketchLayer=t,g.emptySketchLayer=o,_.emit("draw:ready"),()=>{g.sketchViewModel=null,g.sketchLayer=null,g.emptySketchLayer=null}}},[d.isMapReady,u.mode]),t(()=>{if(b&&g.sketchViewModel){var e=function(e){var{pluginState:t,mapProvider:r,events:a,eventBus:i,buttonConfig:p,mapColorScheme:l}=e,{view:c,sketchViewModel:s,sketchLayer:u,emptySketchLayer:d}=r;if(!s)return null;var{drawDone:m,drawCancel:y}=p,{dispatch:h,mode:g,feature:P}=t,_=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"===s.state&&!r;if("active"===s.state&&r&&(s.cancel(),yield new Promise(e=>setTimeout(e,50))),s.polygonSymbol=v(l),null==u||u.graphics.items.forEach(e=>{var t=E(e.attributes.id,e.geometry.rings,l);t&&(e.symbol=t.symbol),r===e.attributes.id&&(a=e)}),a&&!o&&s.layer===u)try{yield s.update(a,{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=u.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)},A=()=>_(),O=e=>{if(e){var t=f(e);i.emit("draw:updated",t),h({type:"SET_FEATURE",payload:{tempFeature:t}})}},b=function(){var e=o(function*(){g&&((s.updateGraphics||[]).length||S())});return function(){return e.apply(this,arguments)}}(),T=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(()=>s.undo(),0):(null==n||null===(o=n[0])||void 0===o?void 0:o.length)>3&&O(r)}});return function(t){return e.apply(this,arguments)}}(),w=function(){var e=o(function*(e){var t,r=null==e||null===(t=e.graphics)||void 0===t?void 0:t[0];O(r)});return function(t){return e.apply(this,arguments)}}();i.on(a.MAP_STYLE_CHANGE,A);var M=s.on("update",e=>{var t,r=null===(t=e.toolEventInfo)||void 0===t?void 0:t.type,a=e.graphics[0];"move-start"===r&&(s.cancel(),S()),"reshape-stop"===r&&(n.isSimple(a.geometry)&&1===a.geometry.rings.length||s.undo()),"reshape-stop"!==r&&"vertex-remove"!==r||O(a)}),k=c.on("click",b),D=s.on("create",T),L=s.on("undo",w),C=m.onClick,j=y.onClick;return m.onClick=()=>{s.cancel(),s.layer=d,h({type:"SET_MODE",payload:null}),h({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),i.emit("draw:done",{newFeature:t.tempFeature})},y.onClick=()=>{if(s.cancel(),u.removeAll(),P){var e=E(P.id||P.properties.id,P.geometry.coordinates,l);e&&u.add(e)}s.layer=d,h({type:"SET_MODE",payload:null}),i.emit("draw:cancelled")},()=>{i.off(a.MAP_STYLE_CHANGE,A),M.remove(),k.remove(),D.remove(),L.remove(),m.onClick=C,y.onClick=j}}({pluginState:y,mapProvider:g,events:c,eventBus:_,buttonConfig:P,mapColorScheme:S});return()=>{e()}}},[b,S,y])},buttons:[g({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode},enableWhen:e=>{var{pluginState:t}=e;return!!t.tempFeature}},P),g({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},P)],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 s=p.on("create",e=>{if("complete"===e.state){e.graphic.attributes={id:t},requestAnimationFrame(()=>{p.update(e.graphic,{tool:"reshape",toggleToolOnClick:!1})});var r=f(e.graphic);c.emit("draw:created",r),i({type:"SET_FEATURE",payload:{tempFeature:r}}),s.remove()}});p.polygonSymbol=v(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:f(p)}}),o({type:"SET_MODE",payload:"edit-feature"})},addFeature:function(e,t){var{pluginState:r,mapState:a,mapProvider:o,services:n}=e,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:p}=r,{mapStyle:l}=a,{sketchViewModel:c,sketchLayer:s,emptySketchLayer:u}=o,{eventBus:d}=n,m=E(t.id,t.geometry.coordinates,l.mapColorScheme,i),y={success:!0};return m?(s.add(m),c.layer=u,p({type:"SET_FEATURE",payload:{feature:t}}),d.emit("draw:add",t),y):(y.success=!1,y)},deleteFeature:(e,t)=>{var{pluginState:r,mapProvider:a,services:o}=e,{dispatch:n}=r,{sketchViewModel:i,sketchLayer:p,emptySketchLayer:l}=a,{eventBus:c}=o,s=p.graphics.items.find(e=>e.attributes.id===t);i.cancel(),p.remove(s),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{_ 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 l(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 p(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?l(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}var c={APP_ADD_MARKER:"app:addmarker",APP_UPDATE_MARKER:"app:updatemarker",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_SHOW_HINT:"app:showhint",APP_DISMISS_HINT:"app:dismisshint",APP_READY:"app:ready",APP_OPENED:"app:opened",APP_CLOSED:"app:closed",APP_FULLSCREEN_CHANGE:"app:fullscreenchange",APP_PANEL_OPENED:"app:panelopened",APP_PANEL_CLOSED:"app:panelclosed",MAP_SET_STYLE:"map:setstyle",MAP_SET_SIZE:"map:setsize",MAP_SET_SPATIAL_LIST:"map:setspatiallist",MAP_SET_SPATIAL_LIST_SUPPRESSED:"map:setspatiallistsuppressed",MAP_SET_ACTIVE_ITEM:"map:setactiveitem",MAP_SELECT_ITEM:"map:selectitem",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_DESTROY:"map:destroy"},s="[interactive-map]",u=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return console.warn(s,...t)},d=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return console.error(s,...t)};function m(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 y(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?m(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):m(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}function v(e){return{type:"simple-fill",color:[0,120,255,.2],outline:{color:"dark"===e?"#ffffff":"#d4351c",width:2}}}function E(e,t,r){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},{simplify:o=!0,allowHoles:l=!1}=a,p=new i({geometry:{type:"polygon",rings:t,spatialReference:27700},attributes:{id:e},symbol:v(r)});return o||!1===l?((e,t)=>{var{simplify:r=!0,allowHoles:a=!1}=t;return!r||n.isSimple(e.geometry)||(u("Feature geometry is not simple, attempting to simplify"),e.geometry=n.execute(e.geometry),n.isSimple(e.geometry))?!1===a&&(null==e?void 0:e.geometry.rings.length)>1?(d("Feature contains multiple polygons, which are not supported."),null):e:(d("Failed to simplify geometry, cannot add feature"),null)})(p,a):p}function f(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:y({},r)};case"polyline":return{type:"Feature",geometry:{type:"LineString",coordinates:t.paths[0]},properties:y({},r)};case"polygon":return{type:"Feature",geometry:{type:"Polygon",coordinates:t.rings},properties:y({},r)};default:throw new Error("Unsupported geometry type: ".concat(t.type))}}function h(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 g(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?h(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):h(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}var P={mobile:{slot:"actions",showLabel:!0},tablet:{slot:"actions",showLabel:!0},desktop:{slot:"actions",showLabel:!0}},_={reducer:{initialState:{mode:null,feature:null,featureId:null,tempFeature:null},actions:{SET_MODE:(e,t)=>{var r=t?e.featureId:null;return p(p({},e),{},{featureId:r,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}),SET_FEATURE_ID:(e,t)=>p(p({},e),{},{featureId:t})}},InitComponent:e=>{var i,l,p,s,{appState:u,mapState:d,pluginConfig:m,pluginState:y,services:h,mapProvider:g,buttonConfig:P}=e,{eventBus:_}=h,{mapColorScheme:S}=d.mapStyle||{},A=null===(i=null===(l=m.includeModes)||void 0===l?void 0:l.includes(u.mode))||void 0===i||i,O=null!==(p=null===(s=m.excludeModes)||void 0===s?void 0:s.includes(u.mode))&&void 0!==p&&p,b=d.isMapReady&&A&&!O;t(()=>{if(b&&!g.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:g});return g.sketchViewModel=e,g.sketchLayer=t,g.emptySketchLayer=o,_.emit("draw:ready"),()=>{g.sketchViewModel=null,g.sketchLayer=null,g.emptySketchLayer=null}}},[d.isMapReady,u.mode]),t(()=>{if(b&&g.sketchViewModel){var e=function(e){var{pluginState:t,mapProvider:r,events:a,eventBus:i,buttonConfig:l,mapColorScheme:p}=e,{view:c,sketchViewModel:s,sketchLayer:u,emptySketchLayer:d}=r;if(!s)return null;var{drawDone:m,drawCancel:y}=l,{dispatch:h,mode:g,feature:P}=t,_=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"===s.state&&!r;if("active"===s.state&&r&&(s.cancel(),yield new Promise(e=>setTimeout(e,50))),s.polygonSymbol=v(p),null==u||u.graphics.items.forEach(e=>{var t=E(e.attributes.id,e.geometry.rings,p);t&&(e.symbol=t.symbol),r===e.attributes.id&&(a=e)}),a&&!o&&s.layer===u)try{yield s.update(a,{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=u.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)},A=()=>_(),O=e=>{if(e){var t=f(e);i.emit("draw:updated",t),h({type:"SET_FEATURE",payload:{tempFeature:t}})}},b=function(){var e=o(function*(){g&&((s.updateGraphics||[]).length||S())});return function(){return e.apply(this,arguments)}}(),T=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(()=>s.undo(),0):(null==n||null===(o=n[0])||void 0===o?void 0:o.length)>3&&O(r)}});return function(t){return e.apply(this,arguments)}}(),w=function(){var e=o(function*(e){var t,r=null==e||null===(t=e.graphics)||void 0===t?void 0:t[0];O(r)});return function(t){return e.apply(this,arguments)}}(),M=e=>{var r=E(e.id||e.properties.id||t.featureId,e.geometry.coordinates,p);r&&u.add(r)};i.on(a.MAP_STYLE_CHANGE,A);var k=s.on("update",e=>{var t,r=null===(t=e.toolEventInfo)||void 0===t?void 0:t.type,a=e.graphics[0];"move-start"===r&&(s.cancel(),S()),"reshape-stop"===r&&(n.isSimple(a.geometry)&&1===a.geometry.rings.length||s.undo()),"reshape-stop"!==r&&"vertex-remove"!==r||O(a)}),D=c.on("click",b),L=s.on("create",T),C=s.on("undo",w),j=m.onClick,F=y.onClick;return m.onClick=()=>{var e;null!=s&&null!==(e=s.layer)&&void 0!==e&&null!==(e=e.graphics)&&void 0!==e&&null!==(e=e.items)&&void 0!==e&&e.length||M(t.tempFeature),s.cancel(),s.layer=d,h({type:"SET_MODE",payload:null}),h({type:"SET_FEATURE",payload:{feature:null,tempFeature:null}}),i.emit("draw:done",{newFeature:t.tempFeature})},y.onClick=()=>{s.cancel(),u.removeAll(),P&&M(P),s.layer=d,h({type:"SET_MODE",payload:null}),i.emit("draw:cancelled")},()=>{i.off(a.MAP_STYLE_CHANGE,A),k.remove(),D.remove(),L.remove(),C.remove(),m.onClick=j,y.onClick=F}}({pluginState:y,mapProvider:g,events:c,eventBus:_,buttonConfig:P,mapColorScheme:S});return()=>{e()}}},[b,S,y])},buttons:[g({id:"drawDone",label:"Done",variant:"primary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode},enableWhen:e=>{var{pluginState:t}=e;return!!t.tempFeature}},P),g({id:"drawCancel",label:"Cancel",variant:"tertiary",hiddenWhen:e=>{var{pluginState:t}=e;return!t.mode}},P)],api:{newPolygon:(e,t)=>{var{mapState:r,pluginState:a,mapProvider:o,services:n}=e,{dispatch:i}=a,{sketchViewModel:l,sketchLayer:p}=o,{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=f(e.graphic);c.emit("draw:created",r),i({type:"SET_FEATURE",payload:{tempFeature:r}}),s.remove()}});l.polygonSymbol=v(r.mapStyle.mapColorScheme),l.create("polygon"),i({type:"SET_MODE",payload:"new-polygon"}),i({type:"SET_FEATURE_ID",payload:t})},editFeature:(e,t)=>{var{pluginState:r,mapProvider:a}=e,{dispatch:o}=r,{sketchViewModel:n,sketchLayer:i}=a,l=i.graphics.items.find(e=>e.attributes.id===t),p=l.geometry.extent,c=[p.xmin,p.ymin,p.xmax,p.ymax];a.fitToBounds(c),n.layer=i,n.update(l,{tool:"reshape",toggleToolOnClick:!1,enableRotation:!1,enableScaling:!1}),o({type:"SET_FEATURE",payload:{feature:f(l)}}),o({type:"SET_MODE",payload:"edit-feature"})},addFeature:function(e,t){var{pluginState:r,mapState:a,mapProvider:o,services:n}=e,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{dispatch:l}=r,{mapStyle:p}=a,{sketchViewModel:c,sketchLayer:s,emptySketchLayer:u}=o,{eventBus:d}=n,m=E(t.id,t.geometry.coordinates,p.mapColorScheme,i),y={success:!0};return m?(s.add(m),c.layer=u,l({type:"SET_FEATURE",payload:{feature:t}}),d.emit("draw:add",t),y):(y.success=!1,y)},deleteFeature:(e,t)=>{var{pluginState:r,mapProvider:a,services:o}=e,{dispatch:n}=r,{sketchViewModel:i,sketchLayer:l,emptySketchLayer:p}=a,{eventBus:c}=o,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{_ as manifest};

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

@@ -34,4 +34,5 @@ export const newPolygon = ({ mapState, pluginState, mapProvider, services }, fea
   sketchViewModel.create('polygon')
 
   dispatch({ type: 'SET_MODE', payload: 'new-polygon' })
+  dispatch({ type: 'SET_FEATURE_ID', payload: featureId })
 }

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

@@ -140,6 +140,11 @@ export function attachEvents ({ pluginState, mapProvider, events, eventBus, butt
   }
 
   const handleDone = () => {
+    if (!sketchViewModel?.layer?.graphics?.items?.length) {
+      // Done has been pressed but the graphic hasn't been finalised,
+      // so we need to add pluginState.tempFeature
+      addFeature(pluginState.tempFeature)
+    }
     sketchViewModel.cancel()
     sketchViewModel.layer = emptySketchLayer
     dispatch({ type: 'SET_MODE', payload: null })
@@ -147,6 +152,17 @@ export function attachEvents ({ pluginState, mapProvider, events, eventBus, butt
     eventBus.emit('draw:done', { newFeature: pluginState.tempFeature })
   }
 
+  const addFeature = (feature) => {
+    const graphic = createGraphic(
+      feature.id || feature.properties.id || pluginState.featureId,
+      feature.geometry.coordinates,
+      mapColorScheme
+    )
+    if (graphic) {
+      sketchLayer.add(graphic)
+    }
+  }
+
   const handleCancel = () => {
     sketchViewModel.cancel()
 
@@ -155,14 +171,7 @@ export function attachEvents ({ pluginState, mapProvider, events, eventBus, butt
 
     // Reinstate initial feature
     if (feature) {
-      const graphic = createGraphic(
-        feature.id || feature.properties.id,
-        feature.geometry.coordinates,
-        mapColorScheme
-      )
-      if (graphic) {
-        sketchLayer.add(graphic)
-      }
+      addFeature(feature)
     }
 
     // Prevent selection

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

@@ -1,12 +1,18 @@
 const initialState = {
   mode: null,
   feature: null,
+  featureId: null,
   tempFeature: null
 }
 
+const setFeatureId = (state, featureId) => {
+  return { ...state, featureId }
+}
 const setMode = (state, payload) => {
+  const featureId = payload ? state.featureId : null
   return {
     ...state,
+    featureId,
     mode: payload
   }
 }
@@ -21,7 +27,8 @@ const setFeature = (state, payload) => {
 
 const actions = {
   SET_MODE: setMode,
-  SET_FEATURE: setFeature
+  SET_FEATURE: setFeature,
+  SET_FEATURE_ID: setFeatureId
 }
 
 export {