ol-contextmenu - npm Package Compare versions

Comparing version 5.2.0 to 5.2.1

dist/helpers/dom.d.ts

@@ -0,5 +1,18 @@
+import { TinyEmitter } from 'tiny-emitter';
 import { Item } from '../types';
 export declare function createFragment(html: string): DocumentFragment;
 export declare function getLineHeight(container: HTMLDivElement): number;
-export declare function addMenuEntry(parentNode: HTMLUListElement, item: Item, isSubmenu?: boolean, isInsideSubmenu?: boolean): HTMLLIElement;
-export declare function addMenuEntries(container: HTMLUListElement, items: Item[], menuWidth: number, isInsideSubmenu?: boolean): void;
+export declare function addMenuEntry({ parentNode, item, isSubmenu, isInsideSubmenu, emitter, }: {
+    parentNode: HTMLUListElement;
+    item: Item;
+    isSubmenu: boolean;
+    isInsideSubmenu?: boolean;
+    emitter: TinyEmitter;
+}): HTMLLIElement;
+export declare function addMenuEntries({ container, items, menuWidth, isInsideSubmenu, emitter, }: {
+    container: HTMLUListElement;
+    items: Item[];
+    menuWidth: number;
+    isInsideSubmenu?: boolean;
+    emitter: TinyEmitter;
+}): void;

dist/main.d.ts

@@ -0,13 +1,15 @@
+import OlMap from 'ol/Map';
 import type { Pixel } from 'ol/pixel';
+import { EventsKey } from 'ol/events';
+import BaseEvent from 'ol/events/Event';
+import { ObjectEvent } from 'ol/Object';
+import Control from 'ol/control/Control';
+import { TinyEmitter } from 'tiny-emitter';
 import type { Coordinate } from 'ol/coordinate';
-import OlMap from 'ol/Map';
-import Control from 'ol/control/Control';
-import BaseEvent from 'ol/events/Event';
-import { EventsKey } from 'ol/events';
 import { Types as ObjectEventTypes } from 'ol/ObjectEventType';
 import { CombinedOnSignature, EventTypes as OlEventTypes, OnSignature } from 'ol/Observable';
-import { ObjectEvent } from 'ol/Object';
 import { ContextMenuEvent, CustomEventTypes, Item, MenuEntry, Options } from './types';
 export default class ContextMenu extends Control {
     protected map: OlMap;
+    protected emitter: TinyEmitter;
     protected container: HTMLDivElement;
@@ -14,0 +16,0 @@ protected coordinate: Coordinate;

dist/ol-contextmenu.iife.js

 
   /*!
-  * ol-contextmenu - v5.2.0
+  * ol-contextmenu - v5.2.1
   * https://github.com/jonataswalker/ol-contextmenu
-  * Built: Mon Mar 13 2023 13:25:53 GMT-0300 (Brasilia Standard Time)
+  * Built: Fri Mar 31 2023 20:27:32 GMT-0300 (Brasilia Standard Time)
   */
 
-var ContextMenu=function(){"use strict";var pe=Object.defineProperty;var fe=(v,u,g)=>u in v?pe(v,u,{enumerable:!0,configurable:!0,writable:!0,value:g}):v[u]=g;var l=(v,u,g)=>(fe(v,typeof u!="symbol"?u+"":u,g),g);class v{constructor(e){this.propagationStopped,this.defaultPrevented,this.type=e,this.target=null}preventDefault(){this.defaultPrevented=!0}stopPropagation(){this.propagationStopped=!0}}const u=v,g={PROPERTYCHANGE:"propertychange"};class K{constructor(){this.disposed=!1}dispose(){this.disposed||(this.disposed=!0,this.disposeInternal())}disposeInternal(){}}const U=K;function M(){}function S(s){for(const e in s)delete s[e]}function z(s){let e;for(e in s)return!1;return!e}class B extends U{constructor(e){super(),this.eventTarget_=e,this.pendingRemovals_=null,this.dispatching_=null,this.listeners_=null}addEventListener(e,t){if(!e||!t)return;const n=this.listeners_||(this.listeners_={}),i=n[e]||(n[e]=[]);i.includes(t)||i.push(t)}dispatchEvent(e){const t=typeof e=="string",n=t?e:e.type,i=this.listeners_&&this.listeners_[n];if(!i)return;const r=t?new u(e):e;r.target||(r.target=this.eventTarget_||this);const o=this.dispatching_||(this.dispatching_={}),d=this.pendingRemovals_||(this.pendingRemovals_={});n in o||(o[n]=0,d[n]=0),++o[n];let p;for(let c=0,y=i.length;c<y;++c)if("handleEvent"in i[c]?p=i[c].handleEvent(r):p=i[c].call(this,r),p===!1||r.propagationStopped){p=!1;break}if(--o[n]===0){let c=d[n];for(delete d[n];c--;)this.removeEventListener(n,M);delete o[n]}return p}disposeInternal(){this.listeners_&&S(this.listeners_)}getListeners(e){return this.listeners_&&this.listeners_[e]||void 0}hasListener(e){return this.listeners_?e?e in this.listeners_:Object.keys(this.listeners_).length>0:!1}removeEventListener(e,t){const n=this.listeners_&&this.listeners_[e];if(n){const i=n.indexOf(t);i!==-1&&(this.pendingRemovals_&&e in this.pendingRemovals_?(n[i]=M,++this.pendingRemovals_[e]):(n.splice(i,1),n.length===0&&delete this.listeners_[e]))}}}const F=B,V={CHANGE:"change",ERROR:"error",BLUR:"blur",CLEAR:"clear",CONTEXTMENU:"contextmenu",CLICK:"click",DBLCLICK:"dblclick",DRAGENTER:"dragenter",DRAGOVER:"dragover",DROP:"drop",FOCUS:"focus",KEYDOWN:"keydown",KEYPRESS:"keypress",LOAD:"load",RESIZE:"resize",TOUCHMOVE:"touchmove",WHEEL:"wheel"};function _(s,e,t,n,i){if(n&&n!==s&&(t=t.bind(n)),i){const o=t;t=function(){s.removeEventListener(e,t),o.apply(this,arguments)}}const r={target:s,type:e,listener:t};return s.addEventListener(e,t),r}function D(s,e,t,n){return _(s,e,t,n,!0)}function C(s){s&&s.target&&(s.target.removeEventListener(s.type,s.listener),S(s))}class L extends F{constructor(){super(),this.on=this.onInternal,this.once=this.onceInternal,this.un=this.unInternal,this.revision_=0}changed(){++this.revision_,this.dispatchEvent(V.CHANGE)}getRevision(){return this.revision_}onInternal(e,t){if(Array.isArray(e)){const n=e.length,i=new Array(n);for(let r=0;r<n;++r)i[r]=_(this,e[r],t);return i}return _(this,e,t)}onceInternal(e,t){let n;if(Array.isArray(e)){const i=e.length;n=new Array(i);for(let r=0;r<i;++r)n[r]=D(this,e[r],t)}else n=D(this,e,t);return t.ol_key=n,n}unInternal(e,t){const n=t.ol_key;if(n)j(n);else if(Array.isArray(e))for(let i=0,r=e.length;i<r;++i)this.removeEventListener(e[i],t);else this.removeEventListener(e,t)}}L.prototype.on,L.prototype.once,L.prototype.un;function j(s){if(Array.isArray(s))for(let e=0,t=s.length;e<t;++e)C(s[e]);else C(s)}const Y=L;let G=0;function Z(s){return s.ol_uid||(s.ol_uid=String(++G))}class R extends u{constructor(e,t,n){super(e),this.key=t,this.oldValue=n}}class X extends Y{constructor(e){super(),this.on,this.once,this.un,Z(this),this.values_=null,e!==void 0&&this.setProperties(e)}get(e){let t;return this.values_&&this.values_.hasOwnProperty(e)&&(t=this.values_[e]),t}getKeys(){return this.values_&&Object.keys(this.values_)||[]}getProperties(){return this.values_&&Object.assign({},this.values_)||{}}hasProperties(){return!!this.values_}notify(e,t){let n;n=`change:${e}`,this.hasListener(n)&&this.dispatchEvent(new R(n,e,t)),n=g.PROPERTYCHANGE,this.hasListener(n)&&this.dispatchEvent(new R(n,e,t))}addChangeListener(e,t){this.addEventListener(`change:${e}`,t)}removeChangeListener(e,t){this.removeEventListener(`change:${e}`,t)}set(e,t,n){const i=this.values_||(this.values_={});if(n)i[e]=t;else{const r=i[e];i[e]=t,r!==t&&this.notify(e,r)}}setProperties(e,t){for(const n in e)this.set(n,e[n],t)}applyProperties(e){e.values_&&Object.assign(this.values_||(this.values_={}),e.values_)}unset(e,t){if(this.values_&&e in this.values_){const n=this.values_[e];delete this.values_[e],z(this.values_)&&(this.values_=null),t||this.notify(e,n)}}}const W=X,q={POSTRENDER:"postrender",MOVESTART:"movestart",MOVEEND:"moveend",LOADSTART:"loadstart",LOADEND:"loadend"};function P(s){return s&&s.parentNode?s.parentNode.removeChild(s):null}class J extends W{constructor(e){super();const t=e.element;t&&!e.target&&!t.style.pointerEvents&&(t.style.pointerEvents="auto"),this.element=t||null,this.target_=null,this.map_=null,this.listenerKeys=[],e.render&&(this.render=e.render),e.target&&this.setTarget(e.target)}disposeInternal(){P(this.element),super.disposeInternal()}getMap(){return this.map_}setMap(e){this.map_&&P(this.element);for(let t=0,n=this.listenerKeys.length;t<n;++t)C(this.listenerKeys[t]);this.listenerKeys.length=0,this.map_=e,e&&((this.target_?this.target_:e.getOverlayContainerStopEvent()).appendChild(this.element),this.render!==M&&this.listenerKeys.push(_(e,q.POSTRENDER,this.render,this)),e.render())}render(e){}setTarget(e){this.target_=typeof e=="string"?document.getElementById(e):e}}const Q=J;class ee extends u{constructor(e,t,n){super(e),this.map=t,this.frameState=n!==void 0?n:null}}const te=ee;class ne extends te{constructor(e,t,n,i,r,o){super(e,t,r),this.originalEvent=n,this.pixel_=null,this.coordinate_=null,this.dragging=i!==void 0?i:!1,this.activePointers=o}get pixel(){return this.pixel_||(this.pixel_=this.map.getEventPixel(this.originalEvent)),this.pixel_}set pixel(e){this.pixel_=e}get coordinate(){return this.coordinate_||(this.coordinate_=this.map.getCoordinateFromPixel(this.pixel)),this.coordinate_}set coordinate(e){this.coordinate_=e}preventDefault(){super.preventDefault(),"preventDefault"in this.originalEvent&&this.originalEvent.preventDefault()}stopPropagation(){super.stopPropagation(),"stopPropagation"in this.originalEvent&&this.originalEvent.stopPropagation()}}const se=ne;var O=(s=>(s.CONTEXTMENU="contextmenu",s.CLICK="click",s.DBLCLICK="dblclick",s))(O||{}),m=(s=>(s.BEFOREOPEN="beforeopen",s.OPEN="open",s.CLOSE="close",s.ADD_MENU_ENTRY="add-menu-entry",s))(m||{});class $ extends se{constructor(e){super(e.type,e.map,e.originalEvent)}}const ie={width:150,scrollAt:4,eventType:O.CONTEXTMENU,defaultItems:!0,items:[]},E="ol-ctx-menu",a={namespace:E,container:`${E}-container`,separator:`${E}-separator`,submenu:`${E}-submenu`,hidden:`${E}-hidden`,icon:`${E}-icon`,zoomIn:`${E}-zoom-in`,zoomOut:`${E}-zoom-out`,unselectable:"ol-unselectable"},I=[{text:"Zoom In",classname:`${a.zoomIn} ${a.icon}`,callback:(s,e)=>{const t=e.getView();t.animate({zoom:Number(t.getZoom())+1,duration:700,center:s.coordinate})}},{text:"Zoom Out",classname:`${a.zoomOut} ${a.icon}`,callback:(s,e)=>{const t=e.getView();t.animate({zoom:Number(t.getZoom())-1,duration:700,center:s.coordinate})}}];var w={},re={get exports(){return w},set exports(s){w=s}};function A(){}A.prototype={on:function(s,e,t){var n=this.e||(this.e={});return(n[s]||(n[s]=[])).push({fn:e,ctx:t}),this},once:function(s,e,t){var n=this;function i(){n.off(s,i),e.apply(t,arguments)}return i._=e,this.on(s,i,t)},emit:function(s){var e=[].slice.call(arguments,1),t=((this.e||(this.e={}))[s]||[]).slice(),n=0,i=t.length;for(n;n<i;n++)t[n].fn.apply(t[n].ctx,e);return this},off:function(s,e){var t=this.e||(this.e={}),n=t[s],i=[];if(n&&e)for(var r=0,o=n.length;r<o;r++)n[r].fn!==e&&n[r].fn._!==e&&i.push(n[r]);return i.length?t[s]=i:delete t[s],this}},re.exports=A;var oe=w.TinyEmitter=A;const b=new oe;function x(s){const e=document.createDocumentFragment(),t=document.createElement("div");for(t.innerHTML=s;t.firstChild;)e.append(t.firstChild);return e}function ae(s){const e=document.importNode(s),t=s.offsetWidth;e.style.cssText=`position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${t}px`;const n=x("<span>Foo</span>"),i=x("<span>Foo</span>"),r=document.createElement("li"),o=document.createElement("li");r.append(n),o.append(i),e.append(r),e.append(o),s.parentNode?.append(e);const d=e.offsetHeight/2;return s.parentNode?.removeChild(e),d}function k(s,e,t=!1,n=!1){const i=`_${Math.random().toString(36).slice(2,11)}`;if(typeof e!="string"&&"text"in e){const c=`<span>${e.text}</span>`,y=x(c),h=document.createElement("li");e.classname=e.classname||"",e.icon&&(e.classname===""?e.classname=a.icon:e.classname.includes(a.icon)===!1&&(e.classname+=` ${a.icon}`),h.setAttribute("style",`background-image:url(${e.icon})`)),h.id=i,h.className=e.classname,h.append(y),s.append(h);const H={id:i,isSubmenu:t,isInsideSubmenu:n,isSeparator:!1,callback:"callback"in e?e.callback:null,data:"data"in e?e.data:null};return b.emit(m.ADD_MENU_ENTRY,H,h),h}const r=`<li id="${i}" class="${a.separator}"><hr></li>`,o=x(r);s.append(o);const d=s.lastChild,p={id:i,isSubmenu:!1,isInsideSubmenu:!1,isSeparator:!0,callback:null,data:null};return b.emit(m.ADD_MENU_ENTRY,p,d),d}function N(s,e,t,n){e.forEach(i=>{if(typeof i!="string"&&"items"in i&&Array.isArray(i.items)){const r=k(s,i,!0);r.classList.add(a.submenu);const o=document.createElement("ul");o.classList.add(a.container),o.style.width=`${t}px`,r.append(o),N(o,i.items,t,!0)}else k(s,i,!1,n)})}const me="";function T(s,e){if(!s)throw new Error(e)}class le extends Q{constructor(t={}){T(typeof t=="object","@param `opts` should be object type!");const n=document.createElement("div");super({element:n});l(this,"map");l(this,"container");l(this,"coordinate",[]);l(this,"pixel",[]);l(this,"contextMenuEventListener");l(this,"entryCallbackEventListener");l(this,"mapMoveListener");l(this,"lineHeight",0);l(this,"disabled");l(this,"opened");l(this,"items",[]);l(this,"menuEntries",new Map);l(this,"options");this.options={...ie,...t};const i=document.createElement("ul");n.append(i),n.style.width=`${this.options.width}px`,n.classList.add(a.container,a.unselectable,a.hidden),this.container=n,this.contextMenuEventListener=r=>{this.handleContextMenu(r)},this.entryCallbackEventListener=r=>{this.handleEntryCallback(r)},this.mapMoveListener=()=>{this.handleMapMove()},this.disabled=!1,this.opened=!1,window.addEventListener("beforeunload",()=>{this.removeListeners()},{once:!0})}clear(){for(const t of this.menuEntries.keys())this.removeMenuEntry(t);this.container.replaceChildren(),this.container.append(document.createElement("ul"))}enable(){this.disabled=!1}disable(){this.disabled=!0}getDefaultItems(){return I}countItems(){return this.menuEntries.size}extend(t){T(Array.isArray(t),"@param `items` should be an Array."),N(this.container.firstElementChild,t,this.options.width)}closeMenu(){this.opened=!1,this.container.classList.add(a.hidden),this.dispatchEvent(m.CLOSE)}isOpen(){return this.opened}updatePosition(t){T(Array.isArray(t),"@param `pixel` should be an Array."),this.isOpen()&&(this.pixel=t,this.positionContainer())}pop(){const t=Array.from(this.menuEntries.keys()).pop();t&&this.removeMenuEntry(t)}shift(){const t=Array.from(this.menuEntries.keys()).shift();t&&this.removeMenuEntry(t)}push(t){t&&this.extend([t])}setMap(t){if(super.setMap(t),t){this.map=t,this.map.getViewport().addEventListener(this.options.eventType,this.contextMenuEventListener,!1),this.map.on("movestart",()=>{this.handleMapMove()}),b.on(m.ADD_MENU_ENTRY,(i,r)=>{this.handleAddMenuEntry(i,r)},this),this.items=this.options.defaultItems?this.options.items.concat(I):this.options.items,N(this.container.firstElementChild,this.items,this.options.width);const n=this.getMenuEntriesLength();this.lineHeight=n>0?this.container.offsetHeight/n:ae(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),b.off(m.ADD_MENU_ENTRY)}removeMenuEntry(t){const n=document.getElementById(t);n?.remove(),n?.removeEventListener("click",this.entryCallbackEventListener),this.menuEntries.delete(t)}handleContextMenu(t){this.coordinate=this.map.getEventCoordinate(t),this.pixel=this.map.getEventPixel(t),this.dispatchEvent(new $({type:m.BEFOREOPEN,map:this.map,originalEvent:t})),!this.disabled&&(this.options.eventType===O.CONTEXTMENU&&(t.stopPropagation(),t.preventDefault()),setTimeout(()=>{this.openMenu(t)}),t.target?.addEventListener("pointerdown",n=>{this.opened&&(n.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(t){this.opened=!0,this.positionContainer(),this.container.classList.remove(a.hidden),this.dispatchEvent(new $({type:m.OPEN,map:this.map,originalEvent:t}))}getMenuEntriesLength(){return Array.from(this.menuEntries).filter(([,t])=>t.isSeparator===!1&&t.isSubmenu===!1&&t.isInsideSubmenu===!1).length}positionContainer(){const t=this.map.getSize()||[0,0],n={w:t[0]-this.pixel[0],h:t[1]-this.pixel[1]},i=this.getMenuEntriesLength(),r={w:this.container.offsetWidth,h:Math.round(this.lineHeight*i)},o=n.w>=r.w?this.pixel[0]+5:this.pixel[0]-r.w;this.container.style.left=`${o}px`,this.container.style.top=n.h>=r.h?`${this.pixel[1]-10}px`:`${this.pixel[1]-r.h}px`,this.container.style.right="auto",this.container.style.bottom="auto",n.w-=r.w;const d=y=>Array.from(y.children).filter(h=>h.tagName==="LI"&&h.classList.contains(a.submenu));let p=0;const c=(y,h)=>{p+=1,d(y).forEach(he=>{const ce=h>=r.w?r.w-8:(r.w+8)*-1,f=he.querySelector(`ul.${a.container}`),ue=Math.round(this.lineHeight*Array.from(f.children).filter(de=>de.tagName==="LI").length);f.style.left=`${ce}px`,f.style.right="auto",f.style.top=n.h>=ue+r.h?"0":`-${f.offsetHeight-25}px`,f.style.bottom="auto",f.style.zIndex=String(p),d(f).length>0&&c(f,h-r.w)})};c(this.container.firstElementChild,n.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(t){t.preventDefault(),t.stopPropagation();const n=t.currentTarget,i=this.menuEntries.get(n.id);if(!i)return;const r={coordinate:this.coordinate,data:i.data};this.closeMenu(),i.callback?.(r,this.map)}handleAddMenuEntry(t,n){this.menuEntries.set(t.id,t),this.positionContainer(),"callback"in t&&typeof t.callback=="function"&&n.addEventListener("click",this.entryCallbackEventListener,!1)}}return le}();
+var ContextMenu=function(){"use strict";var de=Object.defineProperty;var pe=(v,u,g)=>u in v?de(v,u,{enumerable:!0,configurable:!0,writable:!0,value:g}):v[u]=g;var h=(v,u,g)=>(pe(v,typeof u!="symbol"?u+"":u,g),g);class v{constructor(e){this.propagationStopped,this.defaultPrevented,this.type=e,this.target=null}preventDefault(){this.defaultPrevented=!0}stopPropagation(){this.propagationStopped=!0}}const u=v,g={PROPERTYCHANGE:"propertychange"};class K{constructor(){this.disposed=!1}dispose(){this.disposed||(this.disposed=!0,this.disposeInternal())}disposeInternal(){}}const U=K;function M(){}function D(s){for(const e in s)delete s[e]}function z(s){let e;for(e in s)return!1;return!e}class B extends U{constructor(e){super(),this.eventTarget_=e,this.pendingRemovals_=null,this.dispatching_=null,this.listeners_=null}addEventListener(e,t){if(!e||!t)return;const n=this.listeners_||(this.listeners_={}),r=n[e]||(n[e]=[]);r.includes(t)||r.push(t)}dispatchEvent(e){const t=typeof e=="string",n=t?e:e.type,r=this.listeners_&&this.listeners_[n];if(!r)return;const i=t?new u(e):e;i.target||(i.target=this.eventTarget_||this);const o=this.dispatching_||(this.dispatching_={}),l=this.pendingRemovals_||(this.pendingRemovals_={});n in o||(o[n]=0,l[n]=0),++o[n];let d;for(let c=0,_=r.length;c<_;++c)if("handleEvent"in r[c]?d=r[c].handleEvent(i):d=r[c].call(this,i),d===!1||i.propagationStopped){d=!1;break}if(--o[n]===0){let c=l[n];for(delete l[n];c--;)this.removeEventListener(n,M);delete o[n]}return d}disposeInternal(){this.listeners_&&D(this.listeners_)}getListeners(e){return this.listeners_&&this.listeners_[e]||void 0}hasListener(e){return this.listeners_?e?e in this.listeners_:Object.keys(this.listeners_).length>0:!1}removeEventListener(e,t){const n=this.listeners_&&this.listeners_[e];if(n){const r=n.indexOf(t);r!==-1&&(this.pendingRemovals_&&e in this.pendingRemovals_?(n[r]=M,++this.pendingRemovals_[e]):(n.splice(r,1),n.length===0&&delete this.listeners_[e]))}}}const F=B,V={CHANGE:"change",ERROR:"error",BLUR:"blur",CLEAR:"clear",CONTEXTMENU:"contextmenu",CLICK:"click",DBLCLICK:"dblclick",DRAGENTER:"dragenter",DRAGOVER:"dragover",DROP:"drop",FOCUS:"focus",KEYDOWN:"keydown",KEYPRESS:"keypress",LOAD:"load",RESIZE:"resize",TOUCHMOVE:"touchmove",WHEEL:"wheel"};function b(s,e,t,n,r){if(n&&n!==s&&(t=t.bind(n)),r){const o=t;t=function(){s.removeEventListener(e,t),o.apply(this,arguments)}}const i={target:s,type:e,listener:t};return s.addEventListener(e,t),i}function R(s,e,t,n){return b(s,e,t,n,!0)}function C(s){s&&s.target&&(s.target.removeEventListener(s.type,s.listener),D(s))}class L extends F{constructor(){super(),this.on=this.onInternal,this.once=this.onceInternal,this.un=this.unInternal,this.revision_=0}changed(){++this.revision_,this.dispatchEvent(V.CHANGE)}getRevision(){return this.revision_}onInternal(e,t){if(Array.isArray(e)){const n=e.length,r=new Array(n);for(let i=0;i<n;++i)r[i]=b(this,e[i],t);return r}return b(this,e,t)}onceInternal(e,t){let n;if(Array.isArray(e)){const r=e.length;n=new Array(r);for(let i=0;i<r;++i)n[i]=R(this,e[i],t)}else n=R(this,e,t);return t.ol_key=n,n}unInternal(e,t){const n=t.ol_key;if(n)j(n);else if(Array.isArray(e))for(let r=0,i=e.length;r<i;++r)this.removeEventListener(e[r],t);else this.removeEventListener(e,t)}}L.prototype.on,L.prototype.once,L.prototype.un;function j(s){if(Array.isArray(s))for(let e=0,t=s.length;e<t;++e)C(s[e]);else C(s)}const Y=L;let G=0;function Z(s){return s.ol_uid||(s.ol_uid=String(++G))}class P extends u{constructor(e,t,n){super(e),this.key=t,this.oldValue=n}}class W extends Y{constructor(e){super(),this.on,this.once,this.un,Z(this),this.values_=null,e!==void 0&&this.setProperties(e)}get(e){let t;return this.values_&&this.values_.hasOwnProperty(e)&&(t=this.values_[e]),t}getKeys(){return this.values_&&Object.keys(this.values_)||[]}getProperties(){return this.values_&&Object.assign({},this.values_)||{}}hasProperties(){return!!this.values_}notify(e,t){let n;n=`change:${e}`,this.hasListener(n)&&this.dispatchEvent(new P(n,e,t)),n=g.PROPERTYCHANGE,this.hasListener(n)&&this.dispatchEvent(new P(n,e,t))}addChangeListener(e,t){this.addEventListener(`change:${e}`,t)}removeChangeListener(e,t){this.removeEventListener(`change:${e}`,t)}set(e,t,n){const r=this.values_||(this.values_={});if(n)r[e]=t;else{const i=r[e];r[e]=t,i!==t&&this.notify(e,i)}}setProperties(e,t){for(const n in e)this.set(n,e[n],t)}applyProperties(e){e.values_&&Object.assign(this.values_||(this.values_={}),e.values_)}unset(e,t){if(this.values_&&e in this.values_){const n=this.values_[e];delete this.values_[e],z(this.values_)&&(this.values_=null),t||this.notify(e,n)}}}const X=W,q={POSTRENDER:"postrender",MOVESTART:"movestart",MOVEEND:"moveend",LOADSTART:"loadstart",LOADEND:"loadend"};function $(s){return s&&s.parentNode?s.parentNode.removeChild(s):null}class J extends X{constructor(e){super();const t=e.element;t&&!e.target&&!t.style.pointerEvents&&(t.style.pointerEvents="auto"),this.element=t||null,this.target_=null,this.map_=null,this.listenerKeys=[],e.render&&(this.render=e.render),e.target&&this.setTarget(e.target)}disposeInternal(){$(this.element),super.disposeInternal()}getMap(){return this.map_}setMap(e){this.map_&&$(this.element);for(let t=0,n=this.listenerKeys.length;t<n;++t)C(this.listenerKeys[t]);this.listenerKeys.length=0,this.map_=e,e&&((this.target_?this.target_:e.getOverlayContainerStopEvent()).appendChild(this.element),this.render!==M&&this.listenerKeys.push(b(e,q.POSTRENDER,this.render,this)),e.render())}render(e){}setTarget(e){this.target_=typeof e=="string"?document.getElementById(e):e}}const Q=J;var O={},ee={get exports(){return O},set exports(s){O=s}};function w(){}w.prototype={on:function(s,e,t){var n=this.e||(this.e={});return(n[s]||(n[s]=[])).push({fn:e,ctx:t}),this},once:function(s,e,t){var n=this;function r(){n.off(s,r),e.apply(t,arguments)}return r._=e,this.on(s,r,t)},emit:function(s){var e=[].slice.call(arguments,1),t=((this.e||(this.e={}))[s]||[]).slice(),n=0,r=t.length;for(n;n<r;n++)t[n].fn.apply(t[n].ctx,e);return this},off:function(s,e){var t=this.e||(this.e={}),n=t[s],r=[];if(n&&e)for(var i=0,o=n.length;i<o;i++)n[i].fn!==e&&n[i].fn._!==e&&r.push(n[i]);return r.length?t[s]=r:delete t[s],this}},ee.exports=w;var te=O.TinyEmitter=w;class ne extends u{constructor(e,t,n){super(e),this.map=t,this.frameState=n!==void 0?n:null}}const se=ne;class ie extends se{constructor(e,t,n,r,i,o){super(e,t,i),this.originalEvent=n,this.pixel_=null,this.coordinate_=null,this.dragging=r!==void 0?r:!1,this.activePointers=o}get pixel(){return this.pixel_||(this.pixel_=this.map.getEventPixel(this.originalEvent)),this.pixel_}set pixel(e){this.pixel_=e}get coordinate(){return this.coordinate_||(this.coordinate_=this.map.getCoordinateFromPixel(this.pixel)),this.coordinate_}set coordinate(e){this.coordinate_=e}preventDefault(){super.preventDefault(),"preventDefault"in this.originalEvent&&this.originalEvent.preventDefault()}stopPropagation(){super.stopPropagation(),"stopPropagation"in this.originalEvent&&this.originalEvent.stopPropagation()}}const re=ie;var A=(s=>(s.CONTEXTMENU="contextmenu",s.CLICK="click",s.DBLCLICK="dblclick",s))(A||{}),f=(s=>(s.BEFOREOPEN="beforeopen",s.OPEN="open",s.CLOSE="close",s.ADD_MENU_ENTRY="add-menu-entry",s))(f||{});class I extends re{constructor(e){super(e.type,e.map,e.originalEvent)}}const oe={width:150,scrollAt:4,eventType:A.CONTEXTMENU,defaultItems:!0,items:[]},m="ol-ctx-menu",a={namespace:m,container:`${m}-container`,separator:`${m}-separator`,submenu:`${m}-submenu`,hidden:`${m}-hidden`,icon:`${m}-icon`,zoomIn:`${m}-zoom-in`,zoomOut:`${m}-zoom-out`,unselectable:"ol-unselectable"},H=[{text:"Zoom In",classname:`${a.zoomIn} ${a.icon}`,callback:(s,e)=>{const t=e.getView();t.animate({zoom:Number(t.getZoom())+1,duration:700,center:s.coordinate})}},{text:"Zoom Out",classname:`${a.zoomOut} ${a.icon}`,callback:(s,e)=>{const t=e.getView();t.animate({zoom:Number(t.getZoom())-1,duration:700,center:s.coordinate})}}];function x(s){const e=document.createDocumentFragment(),t=document.createElement("div");for(t.innerHTML=s;t.firstChild;)e.append(t.firstChild);return e}function ae(s){const e=document.importNode(s),t=s.offsetWidth;e.style.cssText=`position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${t}px`;const n=x("<span>Foo</span>"),r=x("<span>Foo</span>"),i=document.createElement("li"),o=document.createElement("li");i.append(n),o.append(r),e.append(i),e.append(o),s.parentNode?.append(e);const l=e.offsetHeight/2;return s.parentNode?.removeChild(e),l}function k({parentNode:s,item:e,isSubmenu:t=!1,isInsideSubmenu:n=!1,emitter:r}){const i=`_${Math.random().toString(36).slice(2,11)}`;if(typeof e!="string"&&"text"in e){const _=`<span>${e.text}</span>`,y=x(_),E=document.createElement("li");e.classname=e.classname||"",e.icon&&(e.classname===""?e.classname=a.icon:e.classname.includes(a.icon)===!1&&(e.classname+=` ${a.icon}`),E.setAttribute("style",`background-image:url(${e.icon})`)),E.id=i,E.className=e.classname,E.append(y),s.append(E);const T={id:i,isSubmenu:t,isInsideSubmenu:n,isSeparator:!1,callback:"callback"in e?e.callback:null,data:"data"in e?e.data:null};return r.emit(f.ADD_MENU_ENTRY,T,E),E}const o=`<li id="${i}" class="${a.separator}"><hr></li>`,l=x(o);s.append(l);const d=s.lastChild,c={id:i,isSubmenu:!1,isInsideSubmenu:!1,isSeparator:!0,callback:null,data:null};return r.emit(f.ADD_MENU_ENTRY,c,d),d}function N({container:s,items:e,menuWidth:t,isInsideSubmenu:n,emitter:r}){e.forEach(i=>{if(typeof i!="string"&&"items"in i&&Array.isArray(i.items)){const o=k({parentNode:s,item:i,isSubmenu:!0,emitter:r});o.classList.add(a.submenu);const l=document.createElement("ul");l.classList.add(a.container),l.style.width=`${t}px`,o.append(l),N({emitter:r,menuWidth:t,container:l,items:i.items,isInsideSubmenu:!0})}else k({parentNode:s,item:i,isSubmenu:!1,isInsideSubmenu:n,emitter:r})})}const fe="";function S(s,e){if(!s)throw new Error(e)}class le extends Q{constructor(t={}){S(typeof t=="object","@param `opts` should be object type!");const n=document.createElement("div");super({element:n});h(this,"map");h(this,"emitter",new te);h(this,"container");h(this,"coordinate",[]);h(this,"pixel",[]);h(this,"contextMenuEventListener");h(this,"entryCallbackEventListener");h(this,"mapMoveListener");h(this,"lineHeight",0);h(this,"disabled");h(this,"opened");h(this,"items",[]);h(this,"menuEntries",new Map);h(this,"options");this.options={...oe,...t};const r=document.createElement("ul");n.append(r),n.style.width=`${this.options.width}px`,n.classList.add(a.container,a.unselectable,a.hidden),this.container=n,this.contextMenuEventListener=i=>{this.handleContextMenu(i)},this.entryCallbackEventListener=i=>{this.handleEntryCallback(i)},this.mapMoveListener=()=>{this.handleMapMove()},this.disabled=!1,this.opened=!1,window.addEventListener("beforeunload",()=>{this.removeListeners()},{once:!0})}clear(){for(const t of this.menuEntries.keys())this.removeMenuEntry(t);this.container.replaceChildren(),this.container.append(document.createElement("ul"))}enable(){this.disabled=!1}disable(){this.disabled=!0}getDefaultItems(){return H}countItems(){return this.menuEntries.size}extend(t){S(Array.isArray(t),"@param `items` should be an Array."),N({items:t,emitter:this.emitter,menuWidth:this.options.width,container:this.container.firstElementChild})}closeMenu(){this.opened=!1,this.container.classList.add(a.hidden),this.dispatchEvent(f.CLOSE)}isOpen(){return this.opened}updatePosition(t){S(Array.isArray(t),"@param `pixel` should be an Array."),this.isOpen()&&(this.pixel=t,this.positionContainer())}pop(){const t=Array.from(this.menuEntries.keys()).pop();t&&this.removeMenuEntry(t)}shift(){const t=Array.from(this.menuEntries.keys()).shift();t&&this.removeMenuEntry(t)}push(t){t&&this.extend([t])}setMap(t){if(super.setMap(t),t){this.map=t,t.getViewport().addEventListener(this.options.eventType,this.contextMenuEventListener,!1),t.on("movestart",()=>{this.handleMapMove()}),this.emitter.on(f.ADD_MENU_ENTRY,(r,i)=>{this.handleAddMenuEntry(r,i)},this),this.items=this.options.defaultItems?this.options.items.concat(H):this.options.items,N({items:this.items,emitter:this.emitter,menuWidth:this.options.width,container:this.container.firstElementChild});const n=this.getMenuEntriesLength();this.lineHeight=n>0?this.container.offsetHeight/n:ae(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),this.emitter.off(f.ADD_MENU_ENTRY)}removeMenuEntry(t){let n=document.getElementById(t);n?.remove(),n=null,this.menuEntries.delete(t)}handleContextMenu(t){this.coordinate=this.map.getEventCoordinate(t),this.pixel=this.map.getEventPixel(t),this.dispatchEvent(new I({map:this.map,originalEvent:t,type:f.BEFOREOPEN})),!this.disabled&&(this.options.eventType===A.CONTEXTMENU&&(t.stopPropagation(),t.preventDefault()),setTimeout(()=>{this.openMenu(t)}),t.target?.addEventListener("pointerdown",n=>{this.opened&&(n.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(t){this.opened=!0,this.positionContainer(),this.container.classList.remove(a.hidden),this.dispatchEvent(new I({map:this.map,originalEvent:t,type:f.OPEN}))}getMenuEntriesLength(){return Array.from(this.menuEntries).filter(([,t])=>t.isSeparator===!1&&t.isSubmenu===!1&&t.isInsideSubmenu===!1).length}positionContainer(){const t=this.map.getSize()||[0,0],n={w:t[0]-this.pixel[0],h:t[1]-this.pixel[1]},r=this.getMenuEntriesLength(),i={w:this.container.offsetWidth,h:Math.round(this.lineHeight*r)},o=n.w>=i.w?this.pixel[0]+5:this.pixel[0]-i.w;this.container.style.left=`${o}px`,this.container.style.top=n.h>=i.h?`${this.pixel[1]-10}px`:`${this.pixel[1]-i.h}px`,this.container.style.right="auto",this.container.style.bottom="auto",n.w-=i.w;const l=_=>Array.from(_.children).filter(y=>y.tagName==="LI"&&y.classList.contains(a.submenu));let d=0;const c=(_,y)=>{d+=1,l(_).forEach(T=>{const he=y>=i.w?i.w-8:(i.w+8)*-1,p=T.querySelector(`ul.${a.container}`),ce=Math.round(this.lineHeight*Array.from(p.children).filter(ue=>ue.tagName==="LI").length);p.style.left=`${he}px`,p.style.right="auto",p.style.top=n.h>=ce+i.h?"0":`-${p.offsetHeight-25}px`,p.style.bottom="auto",p.style.zIndex=String(d),l(p).length>0&&c(p,y-i.w)})};c(this.container.firstElementChild,n.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(t){t.preventDefault(),t.stopPropagation();const n=t.currentTarget,r=this.menuEntries.get(n.id);if(!r)return;const i={data:r.data,coordinate:this.coordinate};this.closeMenu(),r.callback?.(i,this.map)}handleAddMenuEntry(t,n){this.menuEntries.set(t.id,t),this.positionContainer(),"callback"in t&&typeof t.callback=="function"&&n.addEventListener("click",this.entryCallbackEventListener,!1)}}return le}();

dist/ol-contextmenu.js

 
   /*!
-  * ol-contextmenu - v5.2.0
+  * ol-contextmenu - v5.2.1
   * https://github.com/jonataswalker/ol-contextmenu
-  * Built: Mon Mar 13 2023 13:25:53 GMT-0300 (Brasilia Standard Time)
+  * Built: Fri Mar 31 2023 20:27:32 GMT-0300 (Brasilia Standard Time)
   */
 
-var z = Object.defineProperty;
-var B = (s, e, t) => e in s ? z(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var l = (s, e, t) => (B(s, typeof e != "symbol" ? e + "" : e, t), t);
-class F {
+var U = Object.defineProperty;
+var z = (s, e, t) => e in s ? U(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var h = (s, e, t) => (z(s, typeof e != "symbol" ? e + "" : e, t), t);
+class B {
   /**
@@ -34,3 +34,3 @@ * @param {string} type Type.
 }
-const O = F, V = {
+const w = B, F = {
   /**
@@ -43,3 +43,3 @@ * Triggered when a property is changed.
 };
-class j {
+class V {
   constructor() {
@@ -61,4 +61,4 @@ this.disposed = !1;
 }
-const Y = j;
-function b() {
+const j = V;
+function x() {
 }
@@ -69,3 +69,3 @@ function I(s) {
 }
-function G(s) {
+function Y(s) {
   let e;
@@ -76,3 +76,3 @@ for (e in s)
 }
-class Z extends Y {
+class G extends j {
   /**
@@ -91,4 +91,4 @@ * @param {*} [target] Default event target for dispatched events.
       return;
-    const n = this.listeners_ || (this.listeners_ = {}), i = n[e] || (n[e] = []);
-    i.includes(t) || i.push(t);
+    const n = this.listeners_ || (this.listeners_ = {}), r = n[e] || (n[e] = []);
+    r.includes(t) || r.push(t);
   }
@@ -106,27 +106,27 @@ /**
   dispatchEvent(e) {
-    const t = typeof e == "string", n = t ? e : e.type, i = this.listeners_ && this.listeners_[n];
-    if (!i)
+    const t = typeof e == "string", n = t ? e : e.type, r = this.listeners_ && this.listeners_[n];
+    if (!r)
       return;
-    const r = t ? new O(e) : (
+    const i = t ? new w(e) : (
       /** @type {Event} */
       e
     );
-    r.target || (r.target = this.eventTarget_ || this);
-    const o = this.dispatching_ || (this.dispatching_ = {}), u = this.pendingRemovals_ || (this.pendingRemovals_ = {});
-    n in o || (o[n] = 0, u[n] = 0), ++o[n];
-    let d;
-    for (let c = 0, E = i.length; c < E; ++c)
-      if ("handleEvent" in i[c] ? d = /** @type {import("../events.js").ListenerObject} */
-      i[c].handleEvent(r) : d = /** @type {import("../events.js").ListenerFunction} */
-      i[c].call(this, r), d === !1 || r.propagationStopped) {
-        d = !1;
+    i.target || (i.target = this.eventTarget_ || this);
+    const o = this.dispatching_ || (this.dispatching_ = {}), l = this.pendingRemovals_ || (this.pendingRemovals_ = {});
+    n in o || (o[n] = 0, l[n] = 0), ++o[n];
+    let u;
+    for (let c = 0, E = r.length; c < E; ++c)
+      if ("handleEvent" in r[c] ? u = /** @type {import("../events.js").ListenerObject} */
+      r[c].handleEvent(i) : u = /** @type {import("../events.js").ListenerFunction} */
+      r[c].call(this, i), u === !1 || i.propagationStopped) {
+        u = !1;
         break;
       }
     if (--o[n] === 0) {
-      let c = u[n];
-      for (delete u[n]; c--; )
-        this.removeEventListener(n, b);
+      let c = l[n];
+      for (delete l[n]; c--; )
+        this.removeEventListener(n, x);
       delete o[n];
     }
-    return d;
+    return u;
   }
@@ -164,8 +164,8 @@ /**
     if (n) {
-      const i = n.indexOf(t);
-      i !== -1 && (this.pendingRemovals_ && e in this.pendingRemovals_ ? (n[i] = b, ++this.pendingRemovals_[e]) : (n.splice(i, 1), n.length === 0 && delete this.listeners_[e]));
+      const r = n.indexOf(t);
+      r !== -1 && (this.pendingRemovals_ && e in this.pendingRemovals_ ? (n[r] = x, ++this.pendingRemovals_[e]) : (n.splice(r, 1), n.length === 0 && delete this.listeners_[e]));
     }
   }
 }
-const X = Z, W = {
+const Z = G, W = {
   /**
@@ -199,4 +199,4 @@ * Generic change event. Triggered when the revision counter is increased.
 };
-function v(s, e, t, n, i) {
-  if (n && n !== s && (t = t.bind(n)), i) {
+function g(s, e, t, n, r) {
+  if (n && n !== s && (t = t.bind(n)), r) {
     const o = t;
@@ -207,3 +207,3 @@ t = function() {
   }
-  const r = {
+  const i = {
     target: s,
@@ -213,11 +213,11 @@ type: e,
   };
-  return s.addEventListener(e, t), r;
+  return s.addEventListener(e, t), i;
 }
-function T(s, e, t, n) {
-  return v(s, e, t, n, !0);
+function S(s, e, t, n) {
+  return g(s, e, t, n, !0);
 }
-function x(s) {
+function M(s) {
   s && s.target && (s.target.removeEventListener(s.type, s.listener), I(s));
 }
-class _ extends X {
+class y extends Z {
   constructor() {
@@ -253,8 +253,8 @@ super(), this.on = /** @type {ObservableOnSignature<import("./events").EventsKey>} */
     if (Array.isArray(e)) {
-      const n = e.length, i = new Array(n);
-      for (let r = 0; r < n; ++r)
-        i[r] = v(this, e[r], t);
-      return i;
+      const n = e.length, r = new Array(n);
+      for (let i = 0; i < n; ++i)
+        r[i] = g(this, e[i], t);
+      return r;
     }
-    return v(
+    return g(
       this,
@@ -275,8 +275,8 @@ /** @type {string} */
     if (Array.isArray(e)) {
-      const i = e.length;
-      n = new Array(i);
-      for (let r = 0; r < i; ++r)
-        n[r] = T(this, e[r], t);
+      const r = e.length;
+      n = new Array(r);
+      for (let i = 0; i < r; ++i)
+        n[i] = S(this, e[i], t);
     } else
-      n = T(
+      n = S(
         this,
@@ -301,6 +301,6 @@ /** @type {string} */
     if (n)
-      q(n);
+      X(n);
     else if (Array.isArray(e))
-      for (let i = 0, r = e.length; i < r; ++i)
-        this.removeEventListener(e[i], t);
+      for (let r = 0, i = e.length; r < i; ++r)
+        this.removeEventListener(e[r], t);
     else
@@ -310,11 +310,11 @@ this.removeEventListener(e, t);
 }
-_.prototype.on;
-_.prototype.once;
-_.prototype.un;
-function q(s) {
+y.prototype.on;
+y.prototype.once;
+y.prototype.un;
+function X(s) {
   if (Array.isArray(s))
     for (let e = 0, t = s.length; e < t; ++e)
-      x(s[e]);
+      M(s[e]);
   else
-    x(
+    M(
       /** @type {import("./events.js").EventsKey} */
@@ -324,8 +324,8 @@ s
 }
-const J = _;
-let Q = 0;
-function ee(s) {
-  return s.ol_uid || (s.ol_uid = String(++Q));
+const q = y;
+let J = 0;
+function Q(s) {
+  return s.ol_uid || (s.ol_uid = String(++J));
 }
-class S extends O {
+class T extends w {
   /**
@@ -340,3 +340,3 @@ * @param {string} type The event type.
 }
-class te extends J {
+class ee extends q {
   /**
@@ -346,3 +346,3 @@ * @param {Object<string, *>} [values] An object with key-value pairs.
   constructor(e) {
-    super(), this.on, this.once, this.un, ee(this), this.values_ = null, e !== void 0 && this.setProperties(e);
+    super(), this.on, this.once, this.un, Q(this), this.values_ = null, e !== void 0 && this.setProperties(e);
   }
@@ -387,3 +387,3 @@ /**
     let n;
-    n = `change:${e}`, this.hasListener(n) && this.dispatchEvent(new S(n, e, t)), n = V.PROPERTYCHANGE, this.hasListener(n) && this.dispatchEvent(new S(n, e, t));
+    n = `change:${e}`, this.hasListener(n) && this.dispatchEvent(new T(n, e, t)), n = F.PROPERTYCHANGE, this.hasListener(n) && this.dispatchEvent(new T(n, e, t));
   }
@@ -412,8 +412,8 @@ /**
   set(e, t, n) {
-    const i = this.values_ || (this.values_ = {});
+    const r = this.values_ || (this.values_ = {});
     if (n)
-      i[e] = t;
+      r[e] = t;
     else {
-      const r = i[e];
-      i[e] = t, r !== t && this.notify(e, r);
+      const i = r[e];
+      r[e] = t, i !== t && this.notify(e, i);
     }
@@ -449,7 +449,7 @@ }
       const n = this.values_[e];
-      delete this.values_[e], G(this.values_) && (this.values_ = null), t || this.notify(e, n);
+      delete this.values_[e], Y(this.values_) && (this.values_ = null), t || this.notify(e, n);
     }
   }
 }
-const ne = te, se = {
+const te = ee, ne = {
   /**
@@ -489,3 +489,3 @@ * Triggered after a map frame is rendered.
 }
-class ie extends ne {
+class se extends te {
   /**
@@ -524,5 +524,5 @@ * @param {Options} options Control options.
     for (let t = 0, n = this.listenerKeys.length; t < n; ++t)
-      x(this.listenerKeys[t]);
-    this.listenerKeys.length = 0, this.map_ = e, e && ((this.target_ ? this.target_ : e.getOverlayContainerStopEvent()).appendChild(this.element), this.render !== b && this.listenerKeys.push(
-      v(e, se.POSTRENDER, this.render, this)
+      M(this.listenerKeys[t]);
+    this.listenerKeys.length = 0, this.map_ = e, e && ((this.target_ ? this.target_ : e.getOverlayContainerStopEvent()).appendChild(this.element), this.render !== x && this.listenerKeys.push(
+      g(e, ne.POSTRENDER, this.render, this)
     ), e.render());
@@ -550,4 +550,45 @@ }
 }
-const re = ie;
-class oe extends O {
+const ie = se;
+var C = {}, re = {
+  get exports() {
+    return C;
+  },
+  set exports(s) {
+    C = s;
+  }
+};
+function A() {
+}
+A.prototype = {
+  on: function(s, e, t) {
+    var n = this.e || (this.e = {});
+    return (n[s] || (n[s] = [])).push({
+      fn: e,
+      ctx: t
+    }), this;
+  },
+  once: function(s, e, t) {
+    var n = this;
+    function r() {
+      n.off(s, r), e.apply(t, arguments);
+    }
+    return r._ = e, this.on(s, r, t);
+  },
+  emit: function(s) {
+    var e = [].slice.call(arguments, 1), t = ((this.e || (this.e = {}))[s] || []).slice(), n = 0, r = t.length;
+    for (n; n < r; n++)
+      t[n].fn.apply(t[n].ctx, e);
+    return this;
+  },
+  off: function(s, e) {
+    var t = this.e || (this.e = {}), n = t[s], r = [];
+    if (n && e)
+      for (var i = 0, o = n.length; i < o; i++)
+        n[i].fn !== e && n[i].fn._ !== e && r.push(n[i]);
+    return r.length ? t[s] = r : delete t[s], this;
+  }
+};
+re.exports = A;
+var oe = C.TinyEmitter = A;
+class ae extends w {
   /**
@@ -562,4 +603,4 @@ * @param {string} type Event type.
 }
-const ae = oe;
-class le extends ae {
+const le = ae;
+class he extends le {
   /**
@@ -573,4 +614,4 @@ * @param {string} type Event type.
    */
-  constructor(e, t, n, i, r, o) {
-    super(e, t, r), this.originalEvent = n, this.pixel_ = null, this.coordinate_ = null, this.dragging = i !== void 0 ? i : !1, this.activePointers = o;
+  constructor(e, t, n, r, i, o) {
+    super(e, t, i), this.originalEvent = n, this.pixel_ = null, this.coordinate_ = null, this.dragging = r !== void 0 ? r : !1, this.activePointers = o;
   }
@@ -617,5 +658,5 @@ /**
 }
-const he = le;
-var w = /* @__PURE__ */ ((s) => (s.CONTEXTMENU = "contextmenu", s.CLICK = "click", s.DBLCLICK = "dblclick", s))(w || {}), m = /* @__PURE__ */ ((s) => (s.BEFOREOPEN = "beforeopen", s.OPEN = "open", s.CLOSE = "close", s.ADD_MENU_ENTRY = "add-menu-entry", s))(m || {});
-class R extends he {
+const ce = he;
+var N = /* @__PURE__ */ ((s) => (s.CONTEXTMENU = "contextmenu", s.CLICK = "click", s.DBLCLICK = "dblclick", s))(N || {}), m = /* @__PURE__ */ ((s) => (s.BEFOREOPEN = "beforeopen", s.OPEN = "open", s.CLOSE = "close", s.ADD_MENU_ENTRY = "add-menu-entry", s))(m || {});
+class R extends ce {
   constructor(e) {
@@ -625,6 +666,6 @@ super(e.type, e.map, e.originalEvent);
 }
-const ce = {
+const ue = {
   width: 150,
   scrollAt: 4,
-  eventType: w.CONTEXTMENU,
+  eventType: N.CONTEXTMENU,
   defaultItems: !0,
@@ -668,45 +709,3 @@ items: []
 ];
-var M = {}, ue = {
-  get exports() {
-    return M;
-  },
-  set exports(s) {
-    M = s;
-  }
-};
-function A() {
-}
-A.prototype = {
-  on: function(s, e, t) {
-    var n = this.e || (this.e = {});
-    return (n[s] || (n[s] = [])).push({
-      fn: e,
-      ctx: t
-    }), this;
-  },
-  once: function(s, e, t) {
-    var n = this;
-    function i() {
-      n.off(s, i), e.apply(t, arguments);
-    }
-    return i._ = e, this.on(s, i, t);
-  },
-  emit: function(s) {
-    var e = [].slice.call(arguments, 1), t = ((this.e || (this.e = {}))[s] || []).slice(), n = 0, i = t.length;
-    for (n; n < i; n++)
-      t[n].fn.apply(t[n].ctx, e);
-    return this;
-  },
-  off: function(s, e) {
-    var t = this.e || (this.e = {}), n = t[s], i = [];
-    if (n && e)
-      for (var r = 0, o = n.length; r < o; r++)
-        n[r].fn !== e && n[r].fn._ !== e && i.push(n[r]);
-    return i.length ? t[s] = i : delete t[s], this;
-  }
-};
-ue.exports = A;
-var de = M.TinyEmitter = A;
-const g = new de();
-function y(s) {
+function _(s) {
   const e = document.createDocumentFragment(), t = document.createElement("div");
@@ -717,16 +716,22 @@ for (t.innerHTML = s; t.firstChild; )
 }
-function pe(s) {
+function de(s) {
   const e = document.importNode(s), t = s.offsetWidth;
   e.style.cssText = `position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${t}px`;
-  const n = y("<span>Foo</span>"), i = y("<span>Foo</span>"), r = document.createElement("li"), o = document.createElement("li");
-  r.append(n), o.append(i), e.append(r), e.append(o), s.parentNode?.append(e);
-  const u = e.offsetHeight / 2;
-  return s.parentNode?.removeChild(e), u;
+  const n = _("<span>Foo</span>"), r = _("<span>Foo</span>"), i = document.createElement("li"), o = document.createElement("li");
+  i.append(n), o.append(r), e.append(i), e.append(o), s.parentNode?.append(e);
+  const l = e.offsetHeight / 2;
+  return s.parentNode?.removeChild(e), l;
 }
-function $(s, e, t = !1, n = !1) {
+function $({
+  parentNode: s,
+  item: e,
+  isSubmenu: t = !1,
+  isInsideSubmenu: n = !1,
+  emitter: r
+}) {
   const i = `_${Math.random().toString(36).slice(2, 11)}`;
   if (typeof e != "string" && "text" in e) {
-    const c = `<span>${e.text}</span>`, E = y(c), h = document.createElement("li");
-    e.classname = e.classname || "", e.icon && (e.classname === "" ? e.classname = a.icon : e.classname.includes(a.icon) === !1 && (e.classname += ` ${a.icon}`), h.setAttribute("style", `background-image:url(${e.icon})`)), h.id = i, h.className = e.classname, h.append(E), s.append(h);
-    const N = {
+    const E = `<span>${e.text}</span>`, v = _(E), p = document.createElement("li");
+    e.classname = e.classname || "", e.icon && (e.classname === "" ? e.classname = a.icon : e.classname.includes(a.icon) === !1 && (e.classname += ` ${a.icon}`), p.setAttribute("style", `background-image:url(${e.icon})`)), p.id = i, p.className = e.classname, p.append(v), s.append(p);
+    const b = {
       id: i,
@@ -739,7 +744,7 @@ isSubmenu: t,
     };
-    return g.emit(m.ADD_MENU_ENTRY, N, h), h;
+    return r.emit(m.ADD_MENU_ENTRY, b, p), p;
   }
-  const r = `<li id="${i}" class="${a.separator}"><hr></li>`, o = y(r);
-  s.append(o);
-  const u = s.lastChild, d = {
+  const o = `<li id="${i}" class="${a.separator}"><hr></li>`, l = _(o);
+  s.append(l);
+  const u = s.lastChild, c = {
     id: i,
@@ -752,13 +757,31 @@ isSubmenu: !1,
   };
-  return g.emit(m.ADD_MENU_ENTRY, d, u), u;
+  return r.emit(m.ADD_MENU_ENTRY, c, u), u;
 }
-function C(s, e, t, n) {
+function O({
+  container: s,
+  items: e,
+  menuWidth: t,
+  isInsideSubmenu: n,
+  emitter: r
+}) {
   e.forEach((i) => {
     if (typeof i != "string" && "items" in i && Array.isArray(i.items)) {
-      const r = $(s, i, !0);
-      r.classList.add(a.submenu);
-      const o = document.createElement("ul");
-      o.classList.add(a.container), o.style.width = `${t}px`, r.append(o), C(o, i.items, t, !0);
+      const o = $({ parentNode: s, item: i, isSubmenu: !0, emitter: r });
+      o.classList.add(a.submenu);
+      const l = document.createElement("ul");
+      l.classList.add(a.container), l.style.width = `${t}px`, o.append(l), O({
+        emitter: r,
+        menuWidth: t,
+        container: l,
+        items: i.items,
+        isInsideSubmenu: !0
+      });
     } else
-      $(s, i, !1, n);
+      $({
+        parentNode: s,
+        item: i,
+        isSubmenu: !1,
+        isInsideSubmenu: n,
+        emitter: r
+      });
   });
@@ -770,3 +793,3 @@ }
 }
-class me extends re {
+class fe extends ie {
   constructor(t = {}) {
@@ -776,25 +799,26 @@ L(typeof t == "object", "@param `opts` should be object type!");
     super({ element: n });
-    l(this, "map");
-    l(this, "container");
-    l(this, "coordinate", []);
-    l(this, "pixel", []);
-    l(this, "contextMenuEventListener");
-    l(this, "entryCallbackEventListener");
-    l(this, "mapMoveListener");
-    l(this, "lineHeight", 0);
-    l(this, "disabled");
-    l(this, "opened");
-    l(this, "items", []);
-    l(this, "menuEntries", /* @__PURE__ */ new Map());
-    l(this, "options");
-    this.options = { ...ce, ...t };
-    const i = document.createElement("ul");
-    n.append(i), n.style.width = `${this.options.width}px`, n.classList.add(
+    h(this, "map");
+    h(this, "emitter", new oe());
+    h(this, "container");
+    h(this, "coordinate", []);
+    h(this, "pixel", []);
+    h(this, "contextMenuEventListener");
+    h(this, "entryCallbackEventListener");
+    h(this, "mapMoveListener");
+    h(this, "lineHeight", 0);
+    h(this, "disabled");
+    h(this, "opened");
+    h(this, "items", []);
+    h(this, "menuEntries", /* @__PURE__ */ new Map());
+    h(this, "options");
+    this.options = { ...ue, ...t };
+    const r = document.createElement("ul");
+    n.append(r), n.style.width = `${this.options.width}px`, n.classList.add(
       a.container,
       a.unselectable,
       a.hidden
-    ), this.container = n, this.contextMenuEventListener = (r) => {
-      this.handleContextMenu(r);
-    }, this.entryCallbackEventListener = (r) => {
-      this.handleEntryCallback(r);
+    ), this.container = n, this.contextMenuEventListener = (i) => {
+      this.handleContextMenu(i);
+    }, this.entryCallbackEventListener = (i) => {
+      this.handleEntryCallback(i);
     }, this.mapMoveListener = () => {
@@ -828,7 +852,8 @@ this.handleMapMove();
   extend(t) {
-    L(Array.isArray(t), "@param `items` should be an Array."), C(
-      this.container.firstElementChild,
-      t,
-      this.options.width
-    );
+    L(Array.isArray(t), "@param `items` should be an Array."), O({
+      items: t,
+      emitter: this.emitter,
+      menuWidth: this.options.width,
+      container: this.container.firstElementChild
+    });
   }
@@ -857,17 +882,22 @@ closeMenu() {
     if (super.setMap(t), t) {
-      this.map = t, this.map.getViewport().addEventListener(this.options.eventType, this.contextMenuEventListener, !1), this.map.on("movestart", () => {
+      this.map = t, t.getViewport().addEventListener(
+        this.options.eventType,
+        this.contextMenuEventListener,
+        !1
+      ), t.on("movestart", () => {
         this.handleMapMove();
-      }), g.on(
+      }), this.emitter.on(
         m.ADD_MENU_ENTRY,
-        (i, r) => {
-          this.handleAddMenuEntry(i, r);
+        (r, i) => {
+          this.handleAddMenuEntry(r, i);
         },
         this
-      ), this.items = this.options.defaultItems ? this.options.items.concat(P) : this.options.items, C(
-        this.container.firstElementChild,
-        this.items,
-        this.options.width
-      );
+      ), this.items = this.options.defaultItems ? this.options.items.concat(P) : this.options.items, O({
+        items: this.items,
+        emitter: this.emitter,
+        menuWidth: this.options.width,
+        container: this.container.firstElementChild
+      });
       const n = this.getMenuEntriesLength();
-      this.lineHeight = n > 0 ? this.container.offsetHeight / n : pe(this.container);
+      this.lineHeight = n > 0 ? this.container.offsetHeight / n : de(this.container);
     } else
@@ -877,7 +907,7 @@ this.removeListeners(), this.clear();
   removeListeners() {
-    this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1), g.off(m.ADD_MENU_ENTRY);
+    this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1), this.emitter.off(m.ADD_MENU_ENTRY);
   }
   removeMenuEntry(t) {
-    const n = document.getElementById(t);
-    n?.remove(), n?.removeEventListener("click", this.entryCallbackEventListener), this.menuEntries.delete(t);
+    let n = document.getElementById(t);
+    n?.remove(), n = null, this.menuEntries.delete(t);
   }
@@ -887,7 +917,7 @@ handleContextMenu(t) {
       new R({
-        type: m.BEFOREOPEN,
         map: this.map,
-        originalEvent: t
+        originalEvent: t,
+        type: m.BEFOREOPEN
       })
-    ), !this.disabled && (this.options.eventType === w.CONTEXTMENU && (t.stopPropagation(), t.preventDefault()), setTimeout(() => {
+    ), !this.disabled && (this.options.eventType === N.CONTEXTMENU && (t.stopPropagation(), t.preventDefault()), setTimeout(() => {
       this.openMenu(t);
@@ -905,5 +935,5 @@ }), t.target?.addEventListener(
       new R({
-        type: m.OPEN,
         map: this.map,
-        originalEvent: t
+        originalEvent: t,
+        type: m.OPEN
       })
@@ -921,21 +951,21 @@ );
       h: t[1] - this.pixel[1]
-    }, i = this.getMenuEntriesLength(), r = {
+    }, r = this.getMenuEntriesLength(), i = {
       w: this.container.offsetWidth,
       // a cheap way to recalculate container height
       // since offsetHeight is like cached
-      h: Math.round(this.lineHeight * i)
-    }, o = n.w >= r.w ? this.pixel[0] + 5 : this.pixel[0] - r.w;
-    this.container.style.left = `${o}px`, this.container.style.top = n.h >= r.h ? `${this.pixel[1] - 10}px` : `${this.pixel[1] - r.h}px`, this.container.style.right = "auto", this.container.style.bottom = "auto", n.w -= r.w;
-    const u = (E) => Array.from(E.children).filter(
-      (h) => h.tagName === "LI" && h.classList.contains(a.submenu)
+      h: Math.round(this.lineHeight * r)
+    }, o = n.w >= i.w ? this.pixel[0] + 5 : this.pixel[0] - i.w;
+    this.container.style.left = `${o}px`, this.container.style.top = n.h >= i.h ? `${this.pixel[1] - 10}px` : `${this.pixel[1] - i.h}px`, this.container.style.right = "auto", this.container.style.bottom = "auto", n.w -= i.w;
+    const l = (E) => Array.from(E.children).filter(
+      (v) => v.tagName === "LI" && v.classList.contains(a.submenu)
     );
-    let d = 0;
-    const c = (E, h) => {
-      d += 1, u(E).forEach((k) => {
-        const H = h >= r.w ? r.w - 8 : (r.w + 8) * -1, p = k.querySelector(
+    let u = 0;
+    const c = (E, v) => {
+      u += 1, l(E).forEach((b) => {
+        const H = v >= i.w ? i.w - 8 : (i.w + 8) * -1, d = b.querySelector(
           `ul.${a.container}`
-        ), K = Math.round(
-          this.lineHeight * Array.from(p.children).filter((U) => U.tagName === "LI").length
+        ), k = Math.round(
+          this.lineHeight * Array.from(d.children).filter((K) => K.tagName === "LI").length
         );
-        p.style.left = `${H}px`, p.style.right = "auto", p.style.top = n.h >= K + r.h ? "0" : `-${p.offsetHeight - 25}px`, p.style.bottom = "auto", p.style.zIndex = String(d), u(p).length > 0 && c(p, h - r.w);
+        d.style.left = `${H}px`, d.style.right = "auto", d.style.top = n.h >= k + i.h ? "0" : `-${d.offsetHeight - 25}px`, d.style.bottom = "auto", d.style.zIndex = String(u), l(d).length > 0 && c(d, v - i.w);
       });
@@ -950,10 +980,10 @@ };
     t.preventDefault(), t.stopPropagation();
-    const n = t.currentTarget, i = this.menuEntries.get(n.id);
-    if (!i)
+    const n = t.currentTarget, r = this.menuEntries.get(n.id);
+    if (!r)
       return;
-    const r = {
-      coordinate: this.coordinate,
-      data: i.data
+    const i = {
+      data: r.data,
+      coordinate: this.coordinate
     };
-    this.closeMenu(), i.callback?.(r, this.map);
+    this.closeMenu(), r.callback?.(i, this.map);
   }
@@ -965,3 +995,3 @@ handleAddMenuEntry(t, n) {
 export {
-  me as default
+  fe as default
 };

dist/types.d.ts

@@ -0,3 +1,3 @@
+import OlMap from 'ol/Map';
 import type { Coordinate } from 'ol/coordinate';
-import OlMap from 'ol/Map';
 import MapBrowserEvent from 'ol/MapBrowserEvent';
@@ -4,0 +4,0 @@ export declare enum EventTypes {

package.json

 {
     "name": "ol-contextmenu",
-    "version": "5.2.0",
+    "version": "5.2.1",
     "description": "Custom Context Menu for Openlayers",
@@ -50,8 +50,8 @@ "type": "module",
     "devDependencies": {
-        "@swc/core": "^1.3.40",
+        "@swc/core": "^1.3.44",
         "@swc/jest": "^0.2.24",
-        "@types/jest": "^29.4.0",
-        "eslint": "^8.36.0",
-        "eslint-config-jwalker": "^8.0.0",
-        "eslint-config-prettier": "^8.7.0",
+        "@types/jest": "^29.5.0",
+        "eslint": "^8.37.0",
+        "eslint-config-jwalker": "^8.1.0",
+        "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-jest": "^27.2.1",
@@ -64,7 +64,7 @@ "eslint-plugin-prettier": "^4.2.1",
         "ol": "^7.3.0",
-        "prettier": "^2.8.4",
-        "rimraf": "^4.4.0",
-        "sass": "^1.59.2",
-        "typescript": "^4.9.5",
-        "vite": "^4.1.4",
+        "prettier": "^2.8.7",
+        "rimraf": "^4.4.1",
+        "sass": "^1.60.0",
+        "typescript": "^5.0.3",
+        "vite": "^4.2.1",
         "vite-plugin-banner": "^0.7.0",
@@ -71,0 +71,0 @@ "vite-plugin-dts": "^2.1.0"

README.md

@@ -24,3 +24,4 @@ # OpenLayers Custom Context Menu
 
-[JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
+[JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/)
+[CodeSandbox](https://codesandbox.io/s/openlayers-custom-context-menu-5s99kb?file=/src/index.js)
 
@@ -27,0 +28,0 @@ ## How to use it?

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78120

increased by1.92%

Lines of code

1247

increased by3.66%

Number of lines in readme file

254

increased by0.4%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

12

decreased by-7.69%

No dependency changes