@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

package/plugins/interact/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.interactPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat},287(e){e.exports=preactJsxRuntime}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},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-interact-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.interactPlugin:",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:"interact",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(936).then(o.bind(o,77));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.interactPlugin=t())}(this,()=>(()=>{"use strict";var e,t,r={738(e){e.exports=preactCompat},287(e){e.exports=preactJsxRuntime}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var i=n[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.m=r,o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},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-interact-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.interactPlugin:",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:"interact",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(936).then(o.bind(o,394));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/interact/src/hooks/useCrossHairVisibility.js

@@ -8,13 +8,16 @@ export function useCrossHairVisibility ({ crossHair, enabled, selectMarkerOnly,
   const crossHairRef = useRef(crossHair)
   crossHairRef.current = crossHair
   const listboxFocusRef = useRef(false)
+  // True while focus is inside an element (marked `data-map-keyboard-scope`) that actually routes cursor keys to the map, e.g. the viewport or MoveControl's D-pad.
+  const mapKeyboardScopedRef = useRef(false)
   const interfaceTypeRef = useRef(appState.interfaceType)
   interfaceTypeRef.current = appState.interfaceType
 
   const updateCrossHair = useCallback(() => {
     const type = interfaceTypeRef.current
-    const isToK = ['touch', 'keyboard'].includes(type)
-    if (enabledRef.current && !listboxFocusRef.current && isToK && !(type === 'touch' && selectMarkerOnlyRef.current)) {
+    const keyboardCanOperateMap = type === 'keyboard' && mapKeyboardScopedRef.current
+    const touchCanOperateMap = type === 'touch' && !selectMarkerOnlyRef.current && !listboxFocusRef.current
+    if (enabledRef.current && (keyboardCanOperateMap || touchCanOperateMap)) {
       crossHairRef.current.fixAtCenter()
     } else {
       crossHairRef.current.hide()
@@ -28,10 +31,15 @@ export function useCrossHairVisibility ({ crossHair, enabled, selectMarkerOnly,
   useEffect(() => {
     const container = appState.layoutRefs?.appContainerRef?.current
     if (!container) { return undefined }
+    mapKeyboardScopedRef.current = !!document.activeElement?.closest('[data-map-keyboard-scope]')
     const handleFocusIn = (e) => {
       const inListbox = !!e.target.closest('[role="listbox"], [role="option"]')
-      if (listboxFocusRef.current !== inListbox) {
-        listboxFocusRef.current = inListbox
+      const inMapKeyboardScope = !!e.target.closest('[data-map-keyboard-scope]')
+      const changed = listboxFocusRef.current !== inListbox || mapKeyboardScopedRef.current !== inMapKeyboardScope
+      listboxFocusRef.current = inListbox
+      mapKeyboardScopedRef.current = inMapKeyboardScope
+      // Keep the refs current regardless, but only touch the crosshair while enabled — while disabled, another owner (e.g. draw mode) is responsible for it.
+      if (changed && enabledRef.current) {
         updateCrossHair()
       }
     }

package/plugins/interact/src/hooks/useCrossHairVisibility.test.js

@@ -19,7 +19,7 @@ describe('useCrossHairVisibility', () => {
     expect(crossHair.hide).toHaveBeenCalled()
   })
 
-  it('shows crosshair on touch/keyboard and hides when listbox has focus', () => {
+  it('shows crosshair on touch and hides when listbox has focus', () => {
     const container = appState.layoutRefs.appContainerRef.current
     appState.interfaceType = 'touch'
     renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
@@ -46,4 +46,91 @@ describe('useCrossHairVisibility', () => {
     act(() => otherEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
     expect(crossHair.fixAtCenter).toHaveBeenCalledTimes(2)
   })
+
+  it('hides crosshair in keyboard mode until focus enters the map keyboard scope', () => {
+    const container = appState.layoutRefs.appContainerRef.current
+    const viewportEl = document.createElement('div')
+    viewportEl.setAttribute('data-map-keyboard-scope', '')
+    container.appendChild(viewportEl)
+    appState.interfaceType = 'keyboard'
+
+    renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
+
+    // interfaceType is 'keyboard' but nothing in the map keyboard scope has focus yet
+    expect(crossHair.hide).toHaveBeenCalled()
+    expect(crossHair.fixAtCenter).not.toHaveBeenCalled()
+
+    // Viewport gains focus — cursor keys now actually operate the map
+    act(() => viewportEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.fixAtCenter).toHaveBeenCalled()
+
+    // Focus moves elsewhere (e.g. a popup menu closed with Escape, which also
+    // flips interfaceType to 'keyboard' but shouldn't leave the crosshair up)
+    const menuEl = document.createElement('ul')
+    menuEl.setAttribute('role', 'menu')
+    container.appendChild(menuEl)
+    act(() => menuEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.hide).toHaveBeenCalledTimes(2)
+  })
+
+  it('shows the crosshair for a control (e.g. MoveControl) that forwards arrow keys to the map without moving DOM focus onto the viewport', () => {
+    const container = appState.layoutRefs.appContainerRef.current
+    const moveControlButton = document.createElement('button')
+    const moveControlScope = document.createElement('div')
+    moveControlScope.setAttribute('data-map-keyboard-scope', '')
+    moveControlScope.appendChild(moveControlButton)
+    container.appendChild(moveControlScope)
+    appState.interfaceType = 'keyboard'
+
+    renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
+    expect(crossHair.fixAtCenter).not.toHaveBeenCalled()
+
+    // Focus lands on a direction button nested inside the scoped control, not
+    // on the scope element itself — closest() must still pick it up.
+    act(() => moveControlButton.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.fixAtCenter).toHaveBeenCalled()
+  })
+
+  it('does not touch the crosshair on a focus change while disabled, leaving another owner (e.g. draw mode) in control', () => {
+    const container = appState.layoutRefs.appContainerRef.current
+    const viewportEl = document.createElement('div')
+    viewportEl.setAttribute('data-map-keyboard-scope', '')
+    container.appendChild(viewportEl)
+    appState.interfaceType = 'keyboard'
+
+    // interact starts disabled (e.g. a draw session already took over) — the crosshair
+    // is presumed to already be showing via that other owner, mirroring what
+    // DrawInit.jsx/drawInput.js would have set moments earlier.
+    renderHook(() => useCrossHairVisibility({ crossHair, enabled: false, selectMarkerOnly: false, appState }))
+    crossHair.fixAtCenter.mockClear()
+    crossHair.hide.mockClear()
+
+    // Focus moves into the map keyboard scope (e.g. draw's deferred focus-to-viewport
+    // after a menu selection) — interact must not call hide() here; it isn't the owner.
+    act(() => viewportEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.hide).not.toHaveBeenCalled()
+    expect(crossHair.fixAtCenter).not.toHaveBeenCalled()
+  })
+
+  it('does not show the crosshair for a menu-button Escape that never enters the map keyboard scope', () => {
+    const container = appState.layoutRefs.appContainerRef.current
+    const menuButton = document.createElement('button')
+    container.appendChild(menuButton)
+    appState.interfaceType = 'mouse'
+
+    const { rerender } = renderHook(
+      (props) => useCrossHairVisibility(props),
+      { initialProps: { crossHair, enabled: true, selectMarkerOnly: false, appState } }
+    )
+    expect(crossHair.hide).toHaveBeenCalled()
+
+    // Menu opened by mouse, focus lands on it, then Escape closes it and
+    // returns focus to the instigating button — interfaceType flips to
+    // 'keyboard' along the way, but the map keyboard scope was never entered.
+    act(() => menuButton.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    appState = { ...appState, interfaceType: 'keyboard' }
+    rerender({ crossHair, enabled: true, selectMarkerOnly: false, appState })
+
+    expect(crossHair.fixAtCenter).not.toHaveBeenCalled()
+  })
 })

package/plugins/interact/src/hooks/useHighlightSync.js

@@ -1,14 +1,19 @@
 import { useEffect, useMemo } from 'react'
 import { buildStylesMap } from '../utils/buildStylesMap.js'
 
+// How long after a map style/size change to keep re-applying highlights on every
+// MAP_DATA_CHANGE — see the effect's own comment.
+const SETTLE_WINDOW_MS = 3000
+
 /**
  * Keeps map highlight rendering in sync with the current selection and keyboard-active item.
  *
  * Calls mapProvider.updateHighlightedFeatures whenever selectedFeatures or listboxActiveItem
  * changes, passing selected features (shown with the selection ring) and the active item
  * (shown with the keyboard cursor ring) as separate arguments so the provider can style them
- * differently. Also re-applies highlights after a map style reload, since highlight layers
- * are removed when the base style changes.
+ * differently. Also re-applies highlights after a map style reload or a map-size change,
+ * since both remove/rebuild highlight layers and/or leave a selected feature's own drawn
+ * symbol (colours, resolution) briefly stale until the draw plugin re-resolves it.
  */
 export const useHighlightSync = ({
   mapProvider,
@@ -43,19 +48,35 @@ export const useHighlightSync = ({
 
     updateHighlightedFeatures()
 
-    // Re-apply after style reload — highlight layers are removed when style reloads.
-    // MAP_STYLE_CHANGE fires as soon as the new style is ready, before any plugin has
-    // re-added its layers, so we register a one-time MAP_DATA_CHANGE listener instead.
-    // MAP_DATA_CHANGE is debounced and fires once all layer additions from every plugin
-    // have settled, giving us a single well-timed trigger. Using once() avoids the
-    // infinite loop a permanent listener would cause (layer moves re-trigger MAP_DATA_CHANGE).
-    const handleStyleChange = () => {
-      eventBus.once(events.MAP_DATA_CHANGE, updateHighlightedFeatures)
+    // MAP_STYLE_CHANGE/MAP_SET_SIZE fire before layers are re-added or symbols re-resolved, so
+    // this arms a "keep re-applying" window rather than reacting once — MAP_DATA_CHANGE can
+    // fire more than once as things settle, and a single listen-once would miss the later,
+    // real update. A permanent listener isn't safe either, since updateHighlightedFeatures()
+    // itself can trigger further MAP_DATA_CHANGE events. Uses `on`/`off`, not `once` — its
+    // returned wrapper can't be off()'d by this same handler reference.
+    let settleUntil = 0
+    let armed = false
+    const reapply = () => {
+      updateHighlightedFeatures()
+      if (Date.now() >= settleUntil) {
+        eventBus.off(events.MAP_DATA_CHANGE, reapply)
+        armed = false
+      }
+    }
+    const armSettleWindow = () => {
+      settleUntil = Date.now() + SETTLE_WINDOW_MS
+      if (!armed) {
+        armed = true
+        eventBus.on(events.MAP_DATA_CHANGE, reapply)
+      }
     }
-    eventBus.on(events.MAP_STYLE_CHANGE, handleStyleChange)
+    eventBus.on(events.MAP_STYLE_CHANGE, armSettleWindow)
+    eventBus.on(events.MAP_SET_SIZE, armSettleWindow)
 
     return () => {
-      eventBus.off(events.MAP_STYLE_CHANGE, handleStyleChange)
+      eventBus.off(events.MAP_STYLE_CHANGE, armSettleWindow)
+      eventBus.off(events.MAP_SET_SIZE, armSettleWindow)
+      eventBus.off(events.MAP_DATA_CHANGE, reapply)
     }
   }, [selectedFeatures, listboxActiveItem, mapProvider, stylesMap, eventBus])
 }

package/plugins/interact/src/hooks/useHighlightSync.test.js

@@ -7,19 +7,37 @@ jest.mock('../utils/buildStylesMap.js', () => ({
 }))
 
 const STYLE_CHANGE = 'map:stylechange'
+const SET_SIZE = 'map:setsize'
 const DATA_CHANGE = 'map:datachange'
 
+// A minimal real-ish event bus (mirrors src/services/eventBus.js's on/once/off contract)
+// rather than jest.fn() stubs — the re-arming logic under test depends on once() genuinely
+// self-removing and on() genuinely supporting multiple independent listeners, which a bare
+// mock can't exercise faithfully.
+const createEventBus = () => {
+  const listeners = {}
+  return {
+    on: jest.fn((event, handler) => { (listeners[event] ??= []).push(handler) }),
+    once: jest.fn((event, handler) => {
+      const wrapper = (...args) => { bus.off(event, wrapper); handler(...args) }
+      listeners[event] ??= []
+      listeners[event].push(wrapper)
+    }),
+    off: jest.fn((event, handler) => { listeners[event] = (listeners[event] ?? []).filter(h => h !== handler) }),
+    emit: (event, ...args) => { (listeners[event] ?? []).slice().forEach(h => h(...args)) },
+    _listenerCount: (event) => (listeners[event] ?? []).length
+  }
+}
+let bus
+
 let mockDeps
-let capturedStyleChangeHandler
-let capturedDataChangeHandler
 
 const render = (overrides = {}) =>
   renderHook(() => useHighlightSync({ ...mockDeps, ...overrides }))
 
 beforeEach(() => {
   jest.clearAllMocks()
-  capturedStyleChangeHandler = null
-  capturedDataChangeHandler = null
+  bus = createEventBus()
 
   mockDeps = {
     mapProvider: {
@@ -30,20 +48,8 @@ beforeEach(() => {
       layers: [{ layerId: 'layer1' }]
     },
     selectedFeatures: [],
-    events: { MAP_STYLE_CHANGE: STYLE_CHANGE, MAP_DATA_CHANGE: DATA_CHANGE },
-    eventBus: {
-      on: jest.fn((event, handler) => {
-        if (event === STYLE_CHANGE) {
-          capturedStyleChangeHandler = handler
-        }
-      }),
-      once: jest.fn((event, handler) => {
-        if (event === DATA_CHANGE) {
-          capturedDataChangeHandler = handler
-        }
-      }),
-      off: jest.fn()
-    }
+    events: { MAP_STYLE_CHANGE: STYLE_CHANGE, MAP_SET_SIZE: SET_SIZE, MAP_DATA_CHANGE: DATA_CHANGE },
+    eventBus: bus
   }
 })
 
@@ -95,28 +101,93 @@ describe('useHighlightSync — styles memoization', () => {
   })
 })
 
-// ─── useHighlightSync — style-change event ───────────────────────────────────
+// ─── useHighlightSync — style/size-change settle window ──────────────────────
 
-describe('useHighlightSync — style-change event', () => {
+describe('useHighlightSync — style/size-change settle window', () => {
   it('refreshes highlights after MAP_STYLE_CHANGE then MAP_DATA_CHANGE', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
 
     render()
     mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
 
-    act(() => capturedStyleChangeHandler())
-    act(() => capturedDataChangeHandler())
+    act(() => bus.emit(STYLE_CHANGE))
+    act(() => bus.emit(DATA_CHANGE))
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledTimes(1)
+  })
+
+  it('also refreshes after MAP_SET_SIZE then MAP_DATA_CHANGE', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    act(() => bus.emit(SET_SIZE))
+    act(() => bus.emit(DATA_CHANGE))
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledTimes(1)
+  })
+
+  // The whole reason for re-arming rather than a single listen-once: MAP_DATA_CHANGE
+  // typically fires more than once during a settle (basemap loading before a drawn
+  // feature's own symbol re-resolution has finished) — the second, later firing must
+  // still be caught, not missed because the first already consumed a one-shot listener.
+  it('keeps re-applying on every MAP_DATA_CHANGE within the settle window, not just the first', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    act(() => bus.emit(STYLE_CHANGE))
+    act(() => bus.emit(DATA_CHANGE)) // early, still-stale settle
+    act(() => bus.emit(DATA_CHANGE)) // later, real settle
+    act(() => bus.emit(DATA_CHANGE))
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledTimes(3)
+  })
+
+  it('stops re-arming once the settle window has elapsed, so it does not listen forever', () => {
+    jest.useFakeTimers()
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    act(() => bus.emit(STYLE_CHANGE))
+    act(() => bus.emit(DATA_CHANGE)) // re-arms — within the window
+    expect(bus._listenerCount(DATA_CHANGE)).toBe(1)
+
+    jest.advanceTimersByTime(4000) // past the settle window
+    act(() => bus.emit(DATA_CHANGE)) // the last re-arm still fires once...
+    expect(bus._listenerCount(DATA_CHANGE)).toBe(0) // ...but does not re-arm again
+
+    jest.useRealTimers()
+  })
+
+  it('a second style/size change while still settling extends the window without double-registering', () => {
+    jest.useFakeTimers()
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+
+    act(() => bus.emit(STYLE_CHANGE))
+    expect(bus._listenerCount(DATA_CHANGE)).toBe(1)
+    act(() => bus.emit(SET_SIZE)) // still armed — must not add a second listener
+    expect(bus._listenerCount(DATA_CHANGE)).toBe(1)
 
-    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalled()
+    jest.useRealTimers()
   })
 
-  it('unsubscribes on unmount', () => {
+  it('unsubscribes MAP_STYLE_CHANGE/MAP_SET_SIZE/MAP_DATA_CHANGE listeners on unmount', () => {
     mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
 
     const { unmount } = render()
+    act(() => bus.emit(STYLE_CHANGE)) // arm the MAP_DATA_CHANGE re-apply listener too
     unmount()
 
-    expect(mockDeps.eventBus.off).toHaveBeenCalledWith(STYLE_CHANGE, expect.any(Function))
+    expect(bus._listenerCount(STYLE_CHANGE)).toBe(0)
+    expect(bus._listenerCount(SET_SIZE)).toBe(0)
+    expect(bus._listenerCount(DATA_CHANGE)).toBe(0)
   })
 })
 

package/plugins/interact/src/utils/featureQueries.js

@@ -1,7 +1,25 @@
+// mapbox-gl-draw (MapLibre only) splits every layer into a `.cold`/`.hot` sibling pair — see
+// providers/maplibre/src/utils/drawLayerBuckets.js. Inlined here (not imported) since this file
+// stays provider-agnostic and OpenLayers has no such split.
+const drawBucketSiblingSuffix = { '.cold': '.hot', '.hot': '.cold' }
+
+const siblingLayerId = (layerId) => {
+  for (const [suffix, sibling] of Object.entries(drawBucketSiblingSuffix)) {
+    if (layerId.endsWith(suffix)) {
+      return `${layerId.slice(0, -suffix.length)}${sibling}`
+    }
+  }
+  return null
+}
+
 export const buildLayerConfigMap = dataLayers => {
   const map = {}
   for (const layer of dataLayers) {
     map[layer.layerId] = layer
+    const sibling = siblingLayerId(layer.layerId)
+    if (sibling) {
+      map[sibling] = layer
+    }
   }
   return map
 }

package/plugins/interact/src/utils/featureQueries.test.js

@@ -15,6 +15,21 @@ describe('buildLayerConfigMap', () => {
 
     expect(buildLayerConfigMap([])).toEqual({})
   })
+
+  // mapbox-gl-draw (MapLibre only) moves a feature out of its `.cold` layer/source into a
+  // `.hot` sibling the instant any of its own properties change — a click landing on a feature
+  // that's since moved would otherwise silently fail to match any registered config at all.
+  it('also registers the .cold/.hot sibling id, pointing at the same config', () => {
+    const dataLayers = [{ layerId: 'point-symbol.cold', idProperty: 'id' }]
+    const result = buildLayerConfigMap(dataLayers)
+    expect(result['point-symbol.cold']).toBe(result['point-symbol.hot'])
+    expect(result['point-symbol.hot']).toEqual({ layerId: 'point-symbol.cold', idProperty: 'id' })
+  })
+
+  it('does not add a sibling for a layer id with no cold/hot suffix', () => {
+    const result = buildLayerConfigMap([{ layerId: 'field-parcels' }])
+    expect(Object.keys(result)).toEqual(['field-parcels'])
+  })
 })
 
 describe('getFeaturesAtPoint', () => {

package/plugins/interact/src/utils/spatial.js

@@ -41,19 +41,25 @@ function isContiguousWithAny (feature, features) {
   return features.some(f => !booleanDisjoint(toTurfGeometry(f), toTurfGeometry(feature)))
 }
 
+const isPolygonal = (type) => type === 'Polygon' || type === 'MultiPolygon'
+
 /**
- * Check if all features form a single contiguous group (can be merged).
+ * Check if all features are polygons/multi-polygons and form a single contiguous group
+ * (mergeable). Mixed geometry types (e.g. a line crossing a polygon) are never contiguous,
+ * regardless of spatial overlap, so the type check runs first and skips the spatial work
+ * entirely when it fails.
+ *
  * Uses flood-fill to find connected components.
  *
  * @param {Array} features - Array of features to test
- * @returns {boolean} True if 2+ features and all are contiguous
+ * @returns {boolean} True if 2+ features, all polygonal, and all contiguous
  */
 function areAllContiguous (features) {
   if (features.length < 2) {
     return false
   }
 
-  if (features.some(f => !f.geometry?.type)) {
+  if (features.some(feature => !isPolygonal(feature.geometry?.type))) {
     return false
   }
 

package/plugins/interact/src/utils/spatial.test.js

@@ -67,9 +67,11 @@ describe('areAllContiguous', () => {
   const B = poly([[2, 0], [4, 0], [4, 2], [2, 2], [2, 0]]) // touches A
   const C = poly([[4, 0], [6, 0], [6, 2], [4, 2], [4, 0]]) // touches B
   const D = poly([[10, 10], [12, 10], [12, 12], [10, 12], [10, 10]]) // isolated
+  const multiA = { geometry: { type: 'MultiPolygon', coordinates: [[[[0, 0], [2, 0], [2, 2], [0, 2], [0, 0]]]] } } // same shape as A
 
   const noGeom = { geometry: undefined }
   const noType = { geometry: {} }
+  const lineThroughA = { geometry: { type: 'LineString', coordinates: [[1, -1], [1, 3]] } } // crosses straight through A's interior
 
   it.each([
     [[], false],
@@ -81,8 +83,17 @@ describe('areAllContiguous', () => {
     [[noGeom, A], false],
     [[A, noGeom], false],
     [[noGeom, noGeom], false],
-    [[noType, A], false]
+    [[noType, A], false],
+    [[multiA, B], true],
+    [[A, lineThroughA], false]
   ])('returns expected result for %# features', (features, expected) => {
     expect(areAllContiguous(features)).toBe(expected)
   })
+
+  it('excludes a line from the contiguous group even when it spatially crosses a polygon', () => {
+    // Without the type restriction this would be true — isContiguousWithAny alone treats
+    // a line crossing a polygon's interior the same as a shared boundary.
+    expect(isContiguousWithAny(lineThroughA, [A])).toBe(true)
+    expect(areAllContiguous([A, lineThroughA])).toBe(false)
+  })
 })

package/plugins/map-key/dist/css/index.css

@@ -0,0 +1,62 @@
+.im-c-map-key > *:first-child {
+  padding-top: 5px;
+}
+.im-c-map-key > *:first-child .im-c-map-key__group-heading {
+  padding-top: 0;
+}
+
+.im-c-map-key--has-groups > *:not(:first-child) {
+  border-top: 1px solid var(--button-hover-color);
+}
+
+.im-c-map-key__group:not(:last-child) {
+  padding-bottom: 5px;
+}
+
+.im-c-map-key__group-heading {
+  padding-top: 15px;
+  padding-bottom: 10px;
+  margin: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  color: var(--foreground-color);
+}
+
+.im-c-map-key__item {
+  display: flex;
+  align-items: start;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 1rem;
+}
+.im-c-map-key__group .im-c-map-key__item:first-child {
+  padding-top: 0;
+}
+
+.im-c-map-key--has-groups > .im-c-map-key__item:not(:first-child) {
+  padding-top: 15px;
+}
+
+.im-c-map-key--has-groups > .im-c-map-key__item {
+  padding-bottom: 15px;
+}
+
+.im-c-map-key__group .im-c-map-key__item {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.im-c-map-key > .im-c-map-key__item:last-child,
+.im-c-map-key__group:last-child .im-c-map-key__item:last-child {
+  padding-bottom: 5px;
+}
+
+.am-c-map-key-symbol {
+  position: relative;
+  flex-shrink: 0;
+  margin: 0 13px 0 3px;
+}
+
+.am-c-map-key-symbol--point {
+  margin: -12px 1px -12px -9px;
+}

package/plugins/map-key/dist/esm/im-map-key-plugin.js

@@ -0,0 +1 @@
+import{useState as e,useEffect as t}from"preact/compat";import{jsx as r,jsxs as o}from"preact/jsx-runtime";import n from"@babel/runtime/helpers/defineProperty";import l from"@babel/runtime/helpers/asyncToGenerator";var a=null,i=e=>a=e,c={"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="{{foregroundColor}}"/>',"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="{{foregroundColor}}"/>',"forward-diagonal-hatch":'<path d="M16 8.707V7.293L7.293 16h1.414L16 8.707zm-16 0L8.707 0H7.293L0 7.293v1.414z" fill="{{foregroundColor}}"/>',"backward-diagonal-hatch":'<path d="M0 8.707V7.293L8.707 16H7.293L0 8.707zm16 0L7.293 0h1.414L16 7.293v1.414z" fill="{{foregroundColor}}"/>',"horizontal-hatch":'<path d="M0 4.5V3.499h15.999V4.5H0zm0 7h15.999V12.5H0v-1.001z" fill="{{foregroundColor}}"/>',"vertical-hatch":'<path d="M3.501 16.001V0h1v16.001h-1zm7.998 0V0h1v16.001h-1z" fill="{{foregroundColor}}"/>',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="{{foregroundColor}}"/>',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="{{foregroundColor}}"/>'},s=(e,t)=>{if(!e)return null;if("string"==typeof e)return e.trim();if("object"==typeof e){if(t&&e[t])return e[t];var r=Object.values(e)[0];return null!=r?r:null}return null},f=(e,t,r)=>e.replace(/\{\{foregroundColor\}\}/g,t||"black").replace(/\{\{backgroundColor\}\}/g,r),p=new Map,d={register(e,t){p.set(e,{id:e,svgContent:t})},get:e=>p.get(e),list:()=>[...p.values()],clear(){p.clear()},initialise(){Object.entries(c).forEach(e=>{var[t,r]=e;this.register(t,r)})},getPatternInnerContent(e){return e.fillPatternSvgContent?e.fillPatternSvgContent:e.fillPattern&&null!==(t=null===(r=this.get(e.fillPattern))||void 0===r?void 0:r.svgContent)&&void 0!==t?t:null;var t,r},getKeyPatternPaths(e,t){var r=this.getPatternInnerContent(e);if(!r)return null;var o=s(e.fillPatternForegroundColor,t)||"black",n=s(e.fillPatternBackgroundColor,t)||"transparent",l=s(e.stroke,t)||o;return{border:f('<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="{{backgroundColor}}" stroke="{{foregroundColor}}" stroke-width="2"/>',l,n),content:f(r,o,n)}},getPatternImageId(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,o=this.getPatternInnerContent(e);if(!o)return null;var n=s(e.fillPatternForegroundColor,t)||"black",l=s(e.fillPatternBackgroundColor,t)||"transparent",a=(e=>Math.max(2,2*e))(r);return"pattern-".concat((e=>{var t=0;for(var r of e)t=Math.trunc((t<<5)-t+r.codePointAt(0));return Math.abs(t).toString(36)})(o+n+l),"-").concat(a,"x")}};d.initialise();var u={symbol:"pin",backgroundColor:"#ca3535",foregroundColor:"#ffffff"},h={dot:"M8 3c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.241 5-5-2.24-5-5-5z",cross:"M6 3H10V6H13V10H10V13H6V10H3V6H6Z",diamond:"M8 2L14 8L8 14L2 8Z",triangle:"M8 2L14 14H2Z",square:"M3 3H13V13H3Z"},v={id:"pin",viewBox:"0 0 44 44",anchor:[.5,.9],graphic:h.dot,svg:'<path d="M22 40.999c-3.621 0-8.306-5.864-10.258-8.3C9.02 29.302 6 23.66 6 19.002a16.01 16.01 0 0 1 16-16 16.01 16.01 0 0 1 16 16c0 4.658-3.02 10.3-5.742 13.697-1.952 2.437-6.637 8.3-10.258 8.3z" fill="{{selectedColor}}" stroke="{{activeColor}}" stroke-width="6" paint-order="stroke fill"/>\n  <path d="M22 7.001a12.01 12.01 0 0 1 12 12c0 7.623-10.377 17.998-12 17.998S10 26.624 10 19.001a12.01 12.01 0 0 1 12-12z" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="2" paint-order="stroke fill"/>\n  <g transform="translate(22, 19) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>'},g={id:"circle",viewBox:"0 0 44 44",anchor:[.5,.5],graphic:h.dot,svg:'<circle cx="22" cy="22" r="16" fill="{{selectedColor}}" stroke="{{activeColor}}" stroke-width="6" paint-order="stroke fill"/>\n  <circle cx="22" cy="22" r="12" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="2" paint-order="stroke fill"/>\n  <g transform="translate(22, 22) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>'},m={id:"square",viewBox:"0 0 44 44",anchor:[.5,.5],graphic:h.dot,svg:'<path d="M13 6h18c3.863 0 7 3.137 7 7v18c0 3.863-3.137 7-7 7H13c-3.863 0-7-3.137-7-7V13c0-3.863 3.137-7 7-7" fill="{{selectedColor}}" stroke="{{activeColor}}" stroke-width="6" paint-order="stroke fill"/>\n  <path d="M13 34a3 3 0 0 1-3-3V13a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H13z" fill-rule="nonzero" fill="{{backgroundColor}}" stroke="{{haloColor}}" stroke-width="2" paint-order="stroke fill"/>\n  <g transform="translate(22, 22) scale(0.8) translate(-8, -8)"><path d="{{graphic}}" fill="{{foregroundColor}}"/></g>'},y=new Set(["symbolBackgroundColor","symbolForegroundColor","symbolHaloWidth","symbolGraphic"]),b=e=>{if(!(e=>!(!e.symbol&&!e.symbolSvgContent))(e))return{};var t={};return y.forEach(r=>{if(null!=e[r]){var o=r.charAt(6).toLowerCase()+r.slice(7);t[o]=e[r]}}),t},O=(e,t)=>{var r;return e.symbolViewBox?e.symbolViewBox:null!==(r=null==t?void 0:t.viewBox)&&void 0!==r?r:"0 0 38 38"},k={light:{haloColor:"#ffffff",selectedColor:"#0b0c0c",activeColor:"#ffdd00",foregroundColor:"#0b0c0c"},dark:{haloColor:"#0b0c0c",selectedColor:"#ffffff",activeColor:"#ffdd00",foregroundColor:"#ffffff"}};function w(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 C(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var j=new Map,P=new Map,S={},D=e=>{var t=0;for(var r of e)t=Math.trunc((t<<5)-t+r.codePointAt(0));return Math.abs(t).toString(36)},M=new Set(["id","svg","viewBox","anchor","symbol","symbolSvgContent"]);function x(e,t,r){var o,n,l,a,i=null==r?void 0:r.id,c=Object.fromEntries(Object.entries(e||{}).filter(e=>{var[t]=e;return!M.has(t)})),f=Object.fromEntries(Object.entries(S).filter(e=>{var[t]=e;return!M.has(t)})),p=Object.fromEntries(Object.entries(t).filter(e=>{var[,t]=e;return null!=t})),d=C(C(C(C({},u),f),c),p),v=null!==(o=k[null==r?void 0:r.mapColorScheme])&&void 0!==o?o:k.light;return d.haloColor=null!==(n=null==r?void 0:r.haloColor)&&void 0!==n?n:v.haloColor,d.selectedColor=null!==(l=null==r?void 0:r.selectedColor)&&void 0!==l?l:v.selectedColor,d.activeColor=null!==(a=null==r?void 0:r.activeColor)&&void 0!==a?a:v.activeColor,"string"==typeof d.graphic&&h[d.graphic]&&(d.graphic=h[d.graphic]),Object.fromEntries(Object.entries(d).map(e=>{var[t,r]=e;return[t,s(r,i)||""]}))}function L(e,t){return Object.entries(t).reduce((e,t)=>{var[r,o]=t;return e.replaceAll("{{".concat(r,"}}"),o)},e)}var z={setDefaults(e){S=e||{}},getDefaults:()=>C(C({},u),S),register(e){j.set(e.id,e)},get:e=>j.get(e),list:()=>[...j.values()],clear(){j.clear()},initialise(){this.register(v),this.register(g),this.register(m)},resolve(e,t,r){var o=x(e,t||{},r);return e?(o.selectedColor="none",o.activeColor="none",L(e.svg,o)):""},resolveActive(e,t,r){var o=x(e,t||{},r);return e?L(e.svg,o):""},resolveSelected(e,t,r){var o=x(e,t||{},r);return e?(o.activeColor="none",L(e.svg,o)):""},getSymbolImageId(e,t){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:2,n=this.getSymbolDef(e);if(!n)return null;var l=b(e),a=r?this.resolveActive(n,l,t):this.resolve(n,l,t);return"symbol-".concat(r?"act-":"").concat(D(a),"-").concat(o,"x")},getSymbolDef(e){return e.symbolSvgContent?{svg:e.symbolSvgContent}:e.symbol?this.get(e.symbol):void 0},rasteriseSymbolImage(e,t,r,o){var n=this;return l(function*(){var l=n.getSymbolDef(e);if(!l)return null;var a,i,c=b(e);"active"===r?(a=n.resolveActive(l,c,t),i="act-"):"selected"===r?(a=n.resolveSelected(l,c,t),i="sel-"):(a=n.resolve(l,c,t),i="");var s="symbol-".concat(i).concat(D(a),"-").concat(o,"x"),f=P.get(s);if(!f){var p=O(e,l),[,,d,u]=p.split(" ").map(Number),h='<svg xmlns="http://www.w3.org/2000/svg" width="'.concat(d*o,'" height="').concat(u*o,'" viewBox="').concat(p,'">').concat(a,"</svg>");f=yield((e,t,r)=>new Promise((o,n)=>{var l="data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(e)),a=new Image(t,r);a.onload=()=>{var e=document.createElement("canvas");e.width=t,e.height=r;var n=e.getContext("2d");n.drawImage(a,0,0,t,r),o(n.getImageData(0,0,t,r))},a.onerror=()=>{n(new Error("Failed to rasterise SVG: ".concat(e.slice(0,80))))},a.src=l}))(h,d*o,u*o),P.set(s,f)}return{imageId:s,imageData:f}})()}};z.initialise();var I=e=>{var{text:t}=e;return r("div",{className:"im-c-map-key",children:r("p",{className:"im-c-map-key__empty-message",children:t})})};function H(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(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?H(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):H(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var E=20,_={xmlns:"http://www.w3.org/2000/svg",width:E,height:E,viewBox:"0 0 ".concat(E," ").concat(E),className:"am-c-map-key-symbol","aria-hidden":"true",focusable:"false"},B=V(V({},_),{},{width:44,height:44,className:"am-c-map-key-symbol am-c-map-key-symbol--point"});function A(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 N(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var K=n=>{var{keyDefinition:l,mapStyle:a}=n,[i,c]=e(null);return t(()=>{var{style:e}=l;c(d.getKeyPatternPaths(e,a.id))},[a.id,l]),i?o("svg",N(N({},_),{},{children:[r("g",{dangerouslySetInnerHTML:{__html:i.border}}),r("g",{transform:"translate(".concat(2,", ").concat(2,")"),dangerouslySetInnerHTML:{__html:i.content}})]})):null};function G(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 T(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?G(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):G(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var W=o=>{var{keyDefinition:n,mapStyle:l,symbolDef:a}=o,[i,c]=e(null),[s,f]=e(null);return t(()=>{var e,{style:t}=n,r=null!==(e=null==l?void 0:l.appColorScheme)&&void 0!==e?e:"light",o=T(T({},l),{},{mapColorScheme:r});c(z.resolve(a,b(t),o)),f(O(t,a))},[l,n]),i&&s?r("svg",T(T({},B),{},{viewBox:s,children:r("g",{dangerouslySetInnerHTML:{__html:i}})})):null};function q(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(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?q(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):q(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var Z=o=>{var{mapStyle:n,keyDefinition:l}=o,[a,i]=e(2),[c,f]=e("#ff0000");return t(()=>{var{style:e}=l;i(e.strokeWidth),f(s(e.stroke,n.id))},[n.id,l]),r("svg",F(F({},_),{},{children:r("line",{x1:a/2,y1:10,x2:E-a/2,y2:10,stroke:c,strokeWidth:a,strokeLinecap:"round"})}))};function R(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(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?R(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):R(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var J=o=>{var{mapStyle:n,keyDefinition:l}=o,[a,i]=e(2),[c,f]=e("#ff0000"),[p,d]=e("#ff0000");return t(()=>{var{style:e}=l;i(e.strokeWidth),f(s(e.fill,n.id)),d(s(e.stroke,n.id))},[n.id,l]),r("svg",U(U({},_),{},{children:r("rect",{x:a/2,y:a/2,width:E-a,height:E-a,rx:a,ry:a,fill:c,stroke:p,strokeWidth:a,strokeLinejoin:"round"})}))},Q=o=>{var{keyDefinition:n,mapStyle:l}=o,[a,i]=e(null),[c,s]=e(null);return t(()=>{if(n){var{hasSymbol:e,hasPattern:t,style:r}=n;if(e){var o=z.getSymbolDef(r);s(o),i(o?"symbol":"rect")}else t?i("pattern"):"line"===r.keySymbolShape?i("line"):i("rect")}else i(null)},[n]),a?"symbol"===a?r(W,{mapStyle:l,keyDefinition:n,symbolDef:c}):r("pattern"===a?K:"line"===a?Z:J,{mapStyle:l,keyDefinition:n}):null},X=n=>{var{keyDefinition:l,mapStyle:a}=n,[i,c]=e(""),[f,p]=e("");return t(()=>{c(l.label),p(s(l.symbolDescription,a.id))},[l,a.id]),o("dl",{className:"im-c-map-key__item",children:[r("dt",{className:"im-c-map-key__item-symbol",children:r(Q,{keyDefinition:l,mapStyle:a})}),o("dd",{className:"im-c-map-key__item-label",children:[i,f&&o("span",{className:"govuk-visually-hidden",children:["(",f,")"]})]})]})},Y=e=>{var{headingId:t,label:n,keyDefinitions:l,mapStyle:a}=e;return o("section",{className:"im-c-map-key__group","aria-labelledby":t,children:[r("h3",{id:t,className:"im-c-map-key__group-heading",children:n}),l.map(e=>r(X,{keyDefinition:e,mapStyle:a},"".concat(e.id)))]})},$="im-c-map-key",ee=e=>{var{item:t,mapStyle:o}=e;return"group"===t.type?r(Y,{headingId:"key-heading-".concat(t.id),label:t.groupLabel,keyDefinitions:t.keyDefinitions,mapStyle:o}):r(X,{keyDefinition:t.keyDefinition,mapStyle:o})},te=o=>{var{noKeyItemText:n,keyGroups:l,hasGroups:a,mapStyle:i}=o;if(null==l||!l.length)return r(I,{text:n});var[c,s]=e("im-c-map-key");return t(()=>s(a?"".concat($," ").concat("im-c-map-key--has-groups"):$),[a]),r("div",{className:c,children:l.map(e=>r(ee,{item:e,mapStyle:i},e.id))})};var re={InitComponent:function(e){var{mapState:r,services:o}=e,{eventBus:n}=o;t(()=>{r.isMapReady&&n.requestOnce("datasets:registry",i)},[r.isMapReady])},panels:[{id:"mapKey",label:"Key",mobile:{slot:"drawer",modal:!0},tablet:{slot:"left-top",width:"260px"},desktop:{slot:"left-top",width:"280px"},render:function(o){var{mapState:{mapStyle:n},pluginConfig:{noKeyItemText:l},services:{eventBus:i}}=o,[c,s]=e([]),[f,p]=e(!1),[d,u]=e(a),h=()=>{var{items:e,hasGroups:t}=d.keyItems();s(e),p(t)},v=e=>{d.invalidateKeyItemsOnMenuStateChange(e),h()};return t(()=>d?(h(),i.on("menu:changed",v).on("datasets:changed",h),()=>i.off("menu:changed",v).off("datasets:changed",h)):(i.requestOnce("datasets:registry",u),()=>{}),[d]),r(te,{noKeyItemText:l,keyGroups:c,hasGroups:f,mapStyle:n})}}],buttons:[{id:"mapKey",panelId:"mapKey",label:"Key",iconId:"key",mobile:{slot:"top-left",showLabel:!1},tablet:{slot:"top-left",showLabel:!0},desktop:{slot:"top-left",showLabel:!0}}],icons:[{id:"key",svgContent:'<path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/>'}]};export{re as manifest};

package/plugins/map-key/dist/esm/index.js

@@ -0,0 +1 @@
+import e from"@babel/runtime/helpers/asyncToGenerator";import r from"@babel/runtime/helpers/defineProperty";function t(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}function n(e){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?t(Object(o),!0).forEach(function(t){r(e,t,o[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))})}return e}function o(){var r;return n(n({noKeyItemText:"No features displayed"},arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}),{},{id:"mapKey",load:(r=e(function*(){return(yield import(/* webpackChunkName: "im-map-key-plugin" */ "./im-map-key-plugin.js")).manifest}),function(){return r.apply(this,arguments)})})}export{o as default};