@defra/interactive-map 0.0.40-alpha → 0.0.42-alpha

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

@@ -40,8 +40,16 @@ export const DrawInit = ({ appState, appConfig, mapState, pluginConfig, pluginSt
     }
   }, [mapState.isMapReady, appState.mode])
 
+  // Suppresses the accessible features list for the whole time a draw/edit session holds exclusive control of map interaction.
   useEffect(() => {
-    if (['draw_polygon', 'draw_line'].includes(pluginState.mode) && isTouchOrKeyboard) {
+    eventBus.emit(EVENTS.MAP_SET_FEATURES_SUPPRESSED, { suppressed: pluginState.mode !== null })
+    return () => {
+      eventBus.emit(EVENTS.MAP_SET_FEATURES_SUPPRESSED, { suppressed: false })
+    }
+  }, [pluginState.mode, eventBus])
+
+  useEffect(() => {
+    if (['draw_polygon', 'draw_line', 'draw_point'].includes(pluginState.mode) && isTouchOrKeyboard) {
       const wasAlreadyVisible = crossHair.isVisible
       crossHair.fixAtCenter()
       return () => {
@@ -61,7 +69,7 @@ export const DrawInit = ({ appState, appConfig, mapState, pluginConfig, pluginSt
   // map, immediately when the input device changes mid-session (e.g. the user
   // starts drawing with the mouse then switches to touch and pans via MoveControls).
   useEffect(() => {
-    if (!['edit_vertex', 'draw_polygon', 'draw_line'].includes(pluginState.mode) || !mapProvider.draw) {
+    if (!['edit_vertex', 'edit_point', 'draw_polygon', 'draw_line', 'draw_point'].includes(pluginState.mode) || !mapProvider.draw) {
       return undefined
     }
     mapProvider.draw.setInterfaceType(appState.interfaceType)

package/plugins/draw/src/DrawInit.test.jsx

@@ -29,11 +29,7 @@ const makeProps = (overrides = {}) => {
   return { props, adapter }
 }
 
-const renderInit = async (props) => {
-  let result
-  await act(async () => { result = render(<DrawInit {...props} />) })
-  return result
-}
+const renderInit = async (props) => render(<DrawInit {...props} />)
 
 beforeEach(() => jest.clearAllMocks())
 
@@ -86,7 +82,7 @@ describe('adapter lifecycle', () => {
     expect(props.mapProvider.draw).toBe(adapter)
     props.mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
 
-    await act(async () => { result.unmount() })
+    result.unmount()
 
     expect(adapter.remove).toHaveBeenCalled()
     expect(props.mapProvider.draw).toBeNull()
@@ -98,9 +94,8 @@ describe('adapter lifecycle', () => {
     let resolveAdapter
     loadDrawAdapter.mockReturnValue(new Promise((resolve) => { resolveAdapter = resolve }))
 
-    let result
-    await act(async () => { result = render(<DrawInit {...props} />) })
-    await act(async () => { result.unmount() })
+    const result = render(<DrawInit {...props} />)
+    result.unmount()
     await act(async () => { resolveAdapter(adapter); await Promise.resolve() })
 
     expect(props.mapProvider.draw).toBeNull()
@@ -108,6 +103,52 @@ describe('adapter lifecycle', () => {
   })
 })
 
+describe('features list suppression', () => {
+  test('suppresses the features list while a draw/edit mode is active', async () => {
+    const { props } = makeProps({ pluginState: { dispatch: jest.fn(), mode: 'draw_polygon' } })
+    await renderInit(props)
+    expect(props.services.eventBus.emit).toHaveBeenCalledWith(
+      EVENTS.MAP_SET_FEATURES_SUPPRESSED, { suppressed: true }
+    )
+  })
+
+  test('leaves it unsuppressed when no mode is active', async () => {
+    const { props } = makeProps({ pluginState: { dispatch: jest.fn(), mode: null } })
+    await renderInit(props)
+    expect(props.services.eventBus.emit).toHaveBeenCalledWith(
+      EVENTS.MAP_SET_FEATURES_SUPPRESSED, { suppressed: false }
+    )
+  })
+
+  test('re-suppresses/unsuppresses as the mode changes across re-renders', async () => {
+    const { props } = makeProps({ pluginState: { dispatch: jest.fn(), mode: 'edit_vertex' } })
+    const result = await renderInit(props)
+    expect(props.services.eventBus.emit).toHaveBeenCalledWith(
+      EVENTS.MAP_SET_FEATURES_SUPPRESSED, { suppressed: true }
+    )
+
+    props.services.eventBus.emit.mockClear()
+    props.pluginState = { ...props.pluginState, mode: null }
+    result.rerender(<DrawInit {...props} />)
+
+    expect(props.services.eventBus.emit).toHaveBeenCalledWith(
+      EVENTS.MAP_SET_FEATURES_SUPPRESSED, { suppressed: false }
+    )
+  })
+
+  test('releases the suppression on unmount, even mid-session', async () => {
+    const { props } = makeProps({ pluginState: { dispatch: jest.fn(), mode: 'edit_point' } })
+    const result = await renderInit(props)
+    props.services.eventBus.emit.mockClear()
+
+    result.unmount()
+
+    expect(props.services.eventBus.emit).toHaveBeenCalledWith(
+      EVENTS.MAP_SET_FEATURES_SUPPRESSED, { suppressed: false }
+    )
+  })
+})
+
 describe('crosshair', () => {
   test('fixes the crosshair at centre while drawing on a touch interface', async () => {
     const { props } = makeProps({
@@ -138,7 +179,7 @@ describe('crosshair', () => {
     // Switch away from touch/keyboard, then re-render so the crosshair effect's
     // cleanup runs — it reads the (mutated) interface type and hides the crosshair.
     props.appState.interfaceType = 'mouse'
-    await act(async () => { result.rerender(<DrawInit {...props} />) })
+    result.rerender(<DrawInit {...props} />)
 
     expect(props.mapState.crossHair.hide).toHaveBeenCalled()
   })

package/plugins/draw/src/adapters/maplibre/MaplibreDrawAdapter.js

@@ -5,9 +5,11 @@ import { MAPBOX_DRAW_EVENTS, CUSTOM_DRAW_EVENTS, STYLE_DATA_EVENT } from './draw
 import { ADAPTER_EVENTS } from '../../adapterEvents.js'
 import { createLiveStroke } from '../../validation/liveStroke.js'
 import { createLiveDrawChecks } from '../../validation/liveDrawChecks.js'
+import { resolvePointSymbol, hasSymbolStyle } from './pointSymbolImages.js'
 
 const polygonFeature = (coordinates) => ({ type: 'Feature', geometry: { type: 'Polygon', coordinates } })
 const lineFeature = (coordinates) => ({ type: 'Feature', geometry: { type: 'LineString', coordinates } })
+const pointFeature = (coordinates) => ({ type: 'Feature', geometry: { type: 'Point', coordinates } })
 
 // The displayed feature + placed-vertex count for the live stroke check. MapLibre's
 // fire() copies the payload onto an Event whose `type` is the event name, so the
@@ -23,10 +25,19 @@ export const displayedShape = (mode, coordinates) => {
     return { feature: lineFeature(coordinates), numVertices: (coordinates?.length ?? 1) - 1 }
   }
   if (mode === 'edit_vertex') {
-    return Array.isArray(coordinates[0]?.[0])
-      ? { feature: polygonFeature(coordinates), numVertices: coordinates[0]?.length ?? 0 }
+    // Read the outer ring once — Array.isArray(ring?.[0]) already proves `ring` itself is
+    // non-nullish whenever it's true, so the polygon branch can use it directly with no
+    // second optional-chaining/fallback (which `coordinates[0]` re-read a second time,
+    // unreachably, used to need).
+    const ring = coordinates[0]
+    return Array.isArray(ring?.[0])
+      ? { feature: polygonFeature(coordinates), numVertices: ring.length }
       : { feature: lineFeature(coordinates), numVertices: coordinates?.length ?? 0 }
   }
+  if (mode === 'edit_point') {
+    // A Point's coordinates are already flat ([lng, lat]) — no ring/segment shape to read.
+    return { feature: pointFeature(coordinates), numVertices: 1 }
+  }
   return null
 }
 
@@ -42,7 +53,7 @@ export const displayedShape = (mode, coordinates) => {
  *   setInterfaceType(type)
  *   done() / cancel() / undo() / deleteVertex()
  *   nudgeSelectedVertex(dx, dy, isLargeStep)
- *   get(id) / add(feature) / delete(id) / deleteAll()
+ *   get(id) / add(feature) / setStyle(id, properties) / delete(id) / deleteAll()
  *   setSnapEnabled(bool) / setSnapLayers(layers) / isSnapEnabled()
  *   setFeatureProperty(id, property, value) / setDrawingPreviewProperty(property, value)
  *   on(event, handler) / off(event, handler)
@@ -54,6 +65,11 @@ export class MaplibreDrawAdapter {
     this._map = mapProvider.map
     this._bus = createEventBus()
     this._editingFeatureId = null
+    // Assigned once per feature, on creation only — see styles.js's SORT_KEY_PROP. Drives
+    // fill/line/symbol-sort-key so a later-drawn feature reliably paints above an earlier one
+    // within the same shared layer, instead of the order being incidental to mapbox-gl-draw's
+    // internal cold/hot bucket placement.
+    this._sortKeyCounter = 0
 
     const { draw, remove } = createMapboxDraw({
       mapStyle: options.mapStyle,
@@ -76,7 +92,8 @@ export class MaplibreDrawAdapter {
     this._liveStroke = createLiveStroke({
       onChange: (invalid, reason) => {
         this._applyStrokeInvalid(invalid)
-        if (this._draw.getMode() === 'edit_vertex') {
+        const mode = this._draw.getMode()
+        if (mode === 'edit_vertex' || mode === 'edit_point') {
           this._bus.emit(ADAPTER_EVENTS.VALIDITY_CHANGE, { valid: !invalid, reason })
         }
       }
@@ -97,7 +114,20 @@ export class MaplibreDrawAdapter {
     // Normalise ML map events → the shared adapter event contract (adapterEvents.js).
     // The OL adapter emits the same contract directly from OLDrawManager.
     this._mapHandlers = {
-      create: (e) => this._bus.emit(ADAPTER_EVENTS.CREATE, e.features[0]),
+      create: (e) => {
+        const feature = e.features[0]
+        // Every draw mode's own 'draw.create' listener (registered later, at that mode's
+        // onSetup, so it runs after this one in the same synchronous dispatch) re-ids a
+        // freshly-drawn feature to its caller-requested id via a delete+re-add (see
+        // drawPointMode.js's onCreate / drawMode/clickHandlers.js's reidCreatedFeature) —
+        // mutating this SAME `feature` object's `id` in place. Deferring a tick lets that
+        // re-id finish first, so `feature.id` is already final by the time this runs, and
+        // setFeatureProperty targets the feature that's actually still in the store.
+        setTimeout(() => {
+          this._draw.setFeatureProperty(feature.id, 'sortKey', this._nextSortKey())
+          this._bus.emit(ADAPTER_EVENTS.CREATE, this._draw.get(feature.id))
+        }, 0)
+      },
       editfinish: (e) => this._bus.emit(ADAPTER_EVENTS.EDIT_FINISH, e.features[0]),
       cancel: () => this._bus.emit(ADAPTER_EVENTS.CANCEL),
       // Normalise typo: the ML modes fire numVertecies, the contract uses numVertices
@@ -138,7 +168,7 @@ export class MaplibreDrawAdapter {
   }
 
   changeMode (name, options = {}) {
-    if (name === 'edit_vertex') {
+    if (name === 'edit_vertex' || name === 'edit_point') {
       this._editingFeatureId = options.featureId ?? null
     }
     // A fresh draw always starts with a solid stroke and a placeable crosshair;
@@ -147,6 +177,12 @@ export class MaplibreDrawAdapter {
       this._liveStroke.set(false)
       this._liveDrawChecks.reset()
     }
+    // draw_point has no direct dependency on symbolRegistry/mapProvider — the resolver is
+    // injected here so the mode only ever calls state.resolvePointSymbol(...) and stays
+    // decoupled from how a symbol image actually gets resolved/registered.
+    if (name === 'draw_point') {
+      options = { ...options, resolvePointSymbol: (featureId, properties) => this._resolvePointSymbol(featureId, properties) }
+    }
     this._draw.changeMode(name, options)
     // The underlying mapbox-gl-draw control's public changeMode API is silent by
     // default (it never fires 'draw.modechange'), so every mode change requested
@@ -154,6 +190,13 @@ export class MaplibreDrawAdapter {
     this._handleModeChange({ mode: name })
   }
 
+  // Injected into draw_point's changeMode options as state.resolvePointSymbol — resolves and
+  // registers the feature's symbol-config icon, then writes the resolved image id/anchor back
+  // onto the feature so the data-driven point-symbol layer (styles.js) can render it.
+  _resolvePointSymbol (featureId, properties) {
+    return resolvePointSymbol({ draw: this._draw, mapProvider: this._mapProvider, map: this._map, featureId, properties })
+  }
+
   // Live invalid-stroke driver: called on every rubber-band move (draw) and vertex
   // drag / nudge (edit) with the displayed feature. Edit mode has no Add-point
   // gate, so it goes straight through the live-stroke controller as before. Draw
@@ -181,8 +224,8 @@ export class MaplibreDrawAdapter {
   done () {
     this._mapProvider.undoStack?.clear()
     const mode = this._draw.getMode()
-    if (mode === 'edit_vertex' && this._editingFeatureId) {
-      // Leaving edit_vertex here — hide immediately rather than waiting on the
+    if ((mode === 'edit_vertex' || mode === 'edit_point') && this._editingFeatureId) {
+      // Leaving edit_vertex/edit_point here — hide immediately rather than waiting on the
       // async disable() the EDIT_FINISH handler fires later (see changeMode()).
       this._handleModeChange({ mode: 'disabled' })
       this._map.fire(CUSTOM_DRAW_EVENTS.EDIT_FINISH, { features: [this._draw.get(this._editingFeatureId)] })
@@ -269,7 +312,40 @@ export class MaplibreDrawAdapter {
   }
 
   get (id) { return this._draw.get(id) }
-  add (feature) { return this._draw.add(feature) }
+
+  _nextSortKey () {
+    this._sortKeyCounter += 1
+    return this._sortKeyCounter
+  }
+
+  // A directly-added Point (e.g. api/addFeature.js) skips draw_point's own icon-resolving
+  // drawend handler, so it must be resolved here instead — with no fallback, styles.js's
+  // point-symbol layer would otherwise render nothing at all.
+  add (feature) {
+    // Only a genuinely new feature gets a fresh sort key — setStyle() re-adds an existing one
+    // (via a shallow properties spread) to re-render it, and must not bump it back to the front.
+    const properties = feature.properties?.sortKey == null
+      ? { ...feature.properties, sortKey: this._nextSortKey() }
+      : feature.properties
+    const withSortKey = { ...feature, properties }
+    const ids = this._draw.add(withSortKey)
+    if (withSortKey.geometry?.type === 'Point' && hasSymbolStyle(properties)) {
+      this._resolvePointSymbol(ids[0], properties)
+    }
+    return ids
+  }
+
+  // Patches an existing feature's style properties (stroke/fill/strokeWidth or symbol-family
+  // keys) and re-renders — routed through add() itself so a Point's icon gets re-resolved the
+  // same way a directly-added one does, for free.
+  setStyle (id, properties) {
+    const feature = this._draw.get(id)
+    if (!feature) {
+      return
+    }
+    this.add({ ...feature, properties: { ...feature.properties, ...properties } })
+  }
+
   delete (id) { this._draw.delete(id) }
   deleteAll () { this._draw.deleteAll() }
 
@@ -326,7 +402,7 @@ export class MaplibreDrawAdapter {
   }
 
   _handleModeChange (e) {
-    const DRAW_MODES = new Set(['draw_polygon', 'draw_line', 'edit_vertex'])
+    const DRAW_MODES = new Set(['draw_polygon', 'draw_line', 'draw_point', 'edit_vertex', 'edit_point'])
     if (!DRAW_MODES.has(e.mode)) {
       clearSnapIndicator(getSnapInstance(this._map), this._map)
     }
@@ -334,11 +410,15 @@ export class MaplibreDrawAdapter {
 
   // Keeps draw layers on top after MapLibre style reloads
   _handleStyleData () {
+    // A pending point-symbol resolution's map.addImage() call (pointSymbolImages.js) can fire
+    // 'styledata' after the map's been torn down — getStyle() returns undefined then; no-op.
+    const style = this._map.getStyle()
+    if (!style) { return }
     // A style reload re-adds the draw layers with their spec-default visibility
     // (solid stroke shown, dashed hidden) — re-assert the cached stroke state so
     // an invalid shape stays dashed across the reload.
     this._liveStroke.refresh()
-    const layers = this._map.getStyle().layers || []
+    const layers = style.layers || []
     if (!layers.length || layers[layers.length - 1].source?.startsWith('mapbox-gl-draw')) {
       return
     }