ol-contextmenu 5.1.3 → 5.1.5

package/README.md

@@ -21,9 +21,7 @@ A `contextmenu` extension for [OpenLayers](http://openlayers.org/). **Requires**
 
 ## Demo
 
-[CodeSandbox](https://codesandbox.io/s/openlayers-custom-context-menu-5s99kb?file=/src/index.js)
-
-[JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/)
+[JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
 
 ## How to use it?
 

package/dist/helpers/dom.d.ts

@@ -1,5 +1,5 @@
 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): HTMLLIElement;
-export declare function addMenuEntries(container: HTMLUListElement, items: Item[], menuWidth: number): void;
+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;

package/dist/ol-contextmenu.css

@@ -1,8 +1,8 @@
 
   /*!
-  * ol-contextmenu - v5.1.3
+  * ol-contextmenu - v5.1.5
   * https://github.com/jonataswalker/ol-contextmenu
-  * Built: Mon Dec 26 2022 20:57:30 GMT-0300 (Brasilia Standard Time)
+  * Built: Sat Mar 11 2023 15:05:27 GMT-0300 (Brasilia Standard Time)
   */
 
 .ol-ctx-menu-container{position:absolute;padding:8px;background:#fff;color:#222;font-size:13px;border-radius:5px;box-shadow:#0003 3px 3px 5px;box-sizing:border-box}.ol-ctx-menu-container div,.ol-ctx-menu-container span,.ol-ctx-menu-container a,.ol-ctx-menu-container img,.ol-ctx-menu-container ul,.ol-ctx-menu-container li{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}.ol-ctx-menu-container a img{border:none}.ol-ctx-menu-container *,.ol-ctx-menu-container *:before,.ol-ctx-menu-container *:after{box-sizing:inherit}.ol-ctx-menu-container.ol-ctx-menu-hidden{opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container ul{list-style:none}.ol-ctx-menu-container li{position:relative;line-height:20px;padding:2px 5px;white-space:nowrap}.ol-ctx-menu-container li:not(.ol-ctx-menu-separator):hover{cursor:pointer;background-color:#333;color:#eee}.ol-ctx-menu-container li.ol-ctx-menu-submenu .ol-ctx-menu-container{border:1px solid #eee;padding:8px;top:0;opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container li.ol-ctx-menu-submenu:after{position:absolute;top:7px;right:10px;content:"";display:inline-block;width:.6em;height:.6em;border-right:.3em solid #222;border-top:.3em solid #222;transform:rotate(45deg)}.ol-ctx-menu-container li.ol-ctx-menu-submenu:hover:after{border-color:#eee}.ol-ctx-menu-container:not(.ol-ctx-menu-hidden) li.ol-ctx-menu-submenu:hover>.ol-ctx-menu-container{opacity:1;visibility:visible;transition-delay:0s}.ol-ctx-menu-container li.ol-ctx-menu-separator{padding:0}.ol-ctx-menu-container li.ol-ctx-menu-separator hr{border:0;height:1px;background-image:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,.75),rgba(0,0,0,0))}.ol-ctx-menu-icon{text-indent:20px;background-size:20px auto;background-repeat:no-repeat;background-position:left center}.ol-ctx-menu-zoom-in{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABaUlEQVQ4T72U7VHCQBCGn90GtAMuNGCswFiBWIFQgWMFxg6wArECsQKhArEBiB1Qwa1zgQn5IAYcxv13k71n3919L8KJQ07M47+BzgG9TRfZ/JBuWhS6BJFHRJICYrZGZIz3z5Ct2+B7gG6I6kt+wewdkQVwjtkAkR5mC8yu26A1oItR/cTsOweQBdgutD8G7jGm2PJ2n8oqUKIpIjd4HxTM8gvaT/F+AlmWnyWaIXKF95eNguFzTYFhNsdWu9kFgFlaFMANUH3D8wDLoLgSTSD2il8NCe2ZXQBxWDGwxmyUzzOMBZ7wy7Qb2K0wQfXjMOBuhlFpZtNty5sFaTQBuTusZdymeqs1SpYKcO9HkE3KbTd9WFijMHJQ5hBNEAYNq5Qd0dhyke0GiE4QzjqfW23mHT8Hl4DG4Lce3FPE7AtbBSdsbNqpoJLgYkRnNeUV+xwJDHTnUEkxHGbhBXUs5TjJjew/KPy94g+NRaIVRYmMXwAAAABJRU5ErkJggg==)}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-in{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABc0lEQVQ4T71U21ECQRDsJgGdvQDECMQIxAjECMQILCPwzAAjECIQI0AiEDPQAPaWCBhrcKHuCUcV5f7dY3v6tUscefHIePhfwBBCF8CZqRCReRs1tQxDCH1VfQLQz4EsSY4AvIjIsgm8AhhCGKrqa9zwrqoLAKckB5HtguR1E2gBMITQU9VPAD8GICIGtl3e+xHJBwBT59xtHcsCYJZlUwA3kcGHbfDep51OZywi3/acZZm9vyJ5WR5o38uACmDunNt6ZwAkUxFZDwghDFT1jeSjiJinhVUBVNVJkiTDKO8CQA+AsbNQ7s1Ps0VVn5MkSfcCtmBoDZi1Bdx4eJ7zbBolrwPy3o9J3rWSHPs3A1BbjVKlYBaIyDgvu9LDXDU2RTZmXVW1oKyLxRD+OrkOrJLy5mVM0iaftDhuhVbsvBzMglzKUNW6IV/OOWtCM8MmVvEkmbwt83LaB19fdgOtVquUZJeknaDdobTwbOcvBzPcN/AXH1DFFWP7u9oAAAAASUVORK5CYII=)}.ol-ctx-menu-zoom-out{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABU0lEQVQ4T72U7VECMRRFz3sNaAdkacC1AtcKxApcKnCsQOwAK3CtQKxAqEBsANYOqCDPyTIC+8WCw5jfybn33dxEOPGSE/P4b6BzQG89RT47ZJoWhy5B5BGRZAMxWyEyxvtnyFdt8AagS1F9KQ6YvSMyB84xGyDSw2yO2XUbtAJ0MaqfmH0XAPIA2y7tj4F7jAm2uG1yWQZKNEHkBu+Dg2njWBJNEbnC+8uaIFRuWfuG2QxbbrOrUd0A1Tc8D7AIjkur7DAAsVf8MiWMZ3ZR2m02LPIMscATfjHqBnY7TFD9OAy4zTCCPG/MUKMM5O6wkXFr9dZq7FQqqHk/hDzbFa73cFONTZFDdRyiCcKg5rrSiLaXkiI6RjjrfG6VzDs+B5eAxuDXeYpmNRGzL2wZ/wof+du4GNFpBVqqz5HA4MM5VEYYDrOs+1I6Q9u/4Q8O9wN/AGgWjBVqQjjgAAAAAElFTkSuQmCC)}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-out{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABYklEQVQ4T72U4VHCQBCF36tA91KAWIFYgViBWIFYgWMFYgdYgVCBWAFSgdiBFpAsFWSdxcDkQoBkhnF/ZjbfvX377ogjF4/Mw/8CVbUD4MynEJF5k2lqFapqz8yeAPRKkCXJEYAXEVnugm8BVXVgZq/FD+9mtgBwSrJfqF2QvN4FjYCq2jWzTwA/DhARh20qTdMRyQcA0xDCbZ3KCJhl2RTATaHgo+6HLMv8+xXJy+qB3l8FGoB5CKHsXcRV1b6ZvZF8FBH3NKotoJlNkiQZFONdlLtJ3rufbouZPSdJMjwIbKDQEzBrClx7eC4i33Uepmk6JnnXaOQifzMAtdGoRApugYiMI1uqKkrRWAfZo9MxM1+UZzFewl8mN4nYdVM83L7BkwbXLUrF3sfBLQDQBbDy08x8vOohXyEE71lVq9emuEk+3gZa3XYroCvwFyjP8yHJDsnxwaU08GxvS2uFhw78BbzWrxXgMbsHAAAAAElFTkSuQmCC)}

package/dist/ol-contextmenu.iife.js

@@ -0,0 +1,8 @@
+
+  /*!
+  * ol-contextmenu - v5.1.5
+  * https://github.com/jonataswalker/ol-contextmenu
+  * Built: Sat Mar 11 2023 15:05:27 GMT-0300 (Brasilia Standard Time)
+  */
+
+var ContextMenu=function(f,h){"use strict";var U=Object.defineProperty;var F=(f,h,u)=>h in f?U(f,h,{enumerable:!0,configurable:!0,writable:!0,value:u}):f[h]=u;var a=(f,h,u)=>(F(f,typeof h!="symbol"?h+"":h,u),u);var u=(n=>(n.CONTEXTMENU="contextmenu",n.CLICK="click",n.DBLCLICK="dblclick",n))(u||{}),p=(n=>(n.BEFOREOPEN="beforeopen",n.OPEN="open",n.CLOSE="close",n.ADD_MENU_ENTRY="add-menu-entry",n))(p||{});class A extends h.MapBrowserEvent{constructor(t){super(t.type,t.map,t.originalEvent)}}const k={width:150,scrollAt:4,eventType:u.CONTEXTMENU,defaultItems:!0,items:[]},m="ol-ctx-menu",r={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"},N=[{text:"Zoom In",classname:`${r.zoomIn} ${r.icon}`,callback:(n,t)=>{const e=t.getView();e.animate({zoom:Number(e.getZoom())+1,duration:700,center:n.coordinate})}},{text:"Zoom Out",classname:`${r.zoomOut} ${r.icon}`,callback:(n,t)=>{const e=t.getView();e.animate({zoom:Number(e.getZoom())-1,duration:700,center:n.coordinate})}}];var x={},T={get exports(){return x},set exports(n){x=n}};function L(){}L.prototype={on:function(n,t,e){var s=this.e||(this.e={});return(s[n]||(s[n]=[])).push({fn:t,ctx:e}),this},once:function(n,t,e){var s=this;function i(){s.off(n,i),t.apply(e,arguments)}return i._=t,this.on(n,i,e)},emit:function(n){var t=[].slice.call(arguments,1),e=((this.e||(this.e={}))[n]||[]).slice(),s=0,i=e.length;for(s;s<i;s++)e[s].fn.apply(e[s].ctx,t);return this},off:function(n,t){var e=this.e||(this.e={}),s=e[n],i=[];if(s&&t)for(var o=0,l=s.length;o<l;o++)s[o].fn!==t&&s[o].fn._!==t&&i.push(s[o]);return i.length?e[n]=i:delete e[n],this}},T.exports=L;var O=x.TinyEmitter=L;const y=new O;function v(n){const t=document.createDocumentFragment(),e=document.createElement("div");for(e.innerHTML=n;e.firstChild;)t.append(e.firstChild);return t}function D(n){const t=document.importNode(n),e=n.offsetWidth;t.style.cssText=`position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${e}px`;const s=v("<span>Foo</span>"),i=v("<span>Foo</span>"),o=document.createElement("li"),l=document.createElement("li");o.append(s),l.append(i),t.append(o),t.append(l),n.parentNode?.append(t);const E=t.offsetHeight/2;return n.parentNode?.removeChild(t),E}function S(n,t,e=!1,s=!1){const i=`_${Math.random().toString(36).slice(2,11)}`;if(typeof t!="string"&&"text"in t){const b=`<span>${t.text}</span>`,g=v(b),c=document.createElement("li");t.classname=t.classname||"",t.icon&&(t.classname===""?t.classname=r.icon:t.classname.includes(r.icon)===!1&&(t.classname+=` ${r.icon}`),c.setAttribute("style",`background-image:url(${t.icon})`)),c.id=i,c.className=t.classname,c.append(g),n.append(c);const $={id:i,isSubmenu:e,isInsideSubmenu:s,isSeparator:!1,callback:"callback"in t?t.callback:null,data:"data"in t?t.data:null};return y.emit(p.ADD_MENU_ENTRY,$,c),c}const o=`<li id="${i}" class="${r.separator}"><hr></li>`,l=v(o);n.append(l);const E=n.lastChild,M={id:i,isSubmenu:!1,isInsideSubmenu:!1,isSeparator:!0,callback:null,data:null};return y.emit(p.ADD_MENU_ENTRY,M,E),E}function w(n,t,e,s){t.forEach(i=>{if(typeof i!="string"&&"items"in i&&Array.isArray(i.items)){const o=S(n,i,!0);o.classList.add(r.submenu);const l=document.createElement("ul");l.classList.add(r.container),l.style.width=`${e}px`,o.append(l),w(l,i.items,e,!0)}else S(n,i,!1,s)})}const R="";function C(n,t){if(!n)throw new Error(t)}class I extends f{constructor(e={}){C(typeof e=="object","@param `opts` should be object type!");const s=document.createElement("div");super({element:s});a(this,"map");a(this,"container");a(this,"coordinate",[]);a(this,"pixel",[]);a(this,"contextMenuEventListener");a(this,"entryCallbackEventListener");a(this,"mapMoveListener");a(this,"lineHeight",0);a(this,"disabled");a(this,"opened");a(this,"items",[]);a(this,"menuEntries",new Map);a(this,"options");this.options={...k,...e};const i=document.createElement("ul");s.append(i),s.style.width=`${this.options.width}px`,s.classList.add(r.container,r.unselectable,r.hidden),this.container=s,this.contextMenuEventListener=o=>{this.handleContextMenu(o)},this.entryCallbackEventListener=o=>{this.handleEntryCallback(o)},this.mapMoveListener=()=>{this.handleMapMove()},this.disabled=!1,this.opened=!1,window.addEventListener("beforeunload",()=>{this.removeListeners()},{once:!0})}clear(){for(const e of this.menuEntries.keys())this.removeMenuEntry(e);this.container.replaceChildren(),this.container.append(document.createElement("ul"))}enable(){this.disabled=!1}disable(){this.disabled=!0}getDefaultItems(){return N}countItems(){return this.menuEntries.size}extend(e){C(Array.isArray(e),"@param `items` should be an Array."),w(this.container.firstElementChild,e,this.options.width)}closeMenu(){this.opened=!1,this.container.classList.add(r.hidden),this.dispatchEvent(p.CLOSE)}isOpen(){return this.opened}updatePosition(e){C(Array.isArray(e),"@param `pixel` should be an Array."),this.isOpen()&&(this.pixel=e,this.positionContainer())}pop(){const e=Array.from(this.menuEntries.keys()).pop();e&&this.removeMenuEntry(e)}shift(){const e=Array.from(this.menuEntries.keys()).shift();e&&this.removeMenuEntry(e)}push(e){e&&this.extend([e])}setMap(e){if(super.setMap(e),e){this.map=e,this.map.getViewport().addEventListener(this.options.eventType,this.contextMenuEventListener,!1),this.map.on("movestart",()=>{this.handleMapMove()}),y.on(p.ADD_MENU_ENTRY,(i,o)=>{this.handleAddMenuEntry(i,o)},this),this.items=this.options.defaultItems?this.options.items.concat(N):this.options.items,w(this.container.firstElementChild,this.items,this.options.width);const s=this.getMenuEntriesLength();this.lineHeight=s>0?this.container.offsetHeight/s:D(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),y.off(p.ADD_MENU_ENTRY)}removeMenuEntry(e){const s=document.getElementById(e);s?.remove(),s?.removeEventListener("click",this.entryCallbackEventListener),this.menuEntries.delete(e)}handleContextMenu(e){this.coordinate=this.map.getEventCoordinate(e),this.pixel=this.map.getEventPixel(e),this.dispatchEvent(new A({type:p.BEFOREOPEN,map:this.map,originalEvent:e})),!this.disabled&&(this.options.eventType===u.CONTEXTMENU&&(e.stopPropagation(),e.preventDefault()),setTimeout(()=>{this.openMenu(e)}),e.target?.addEventListener("pointerdown",s=>{this.opened&&(s.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(e){this.opened=!0,this.positionContainer(),this.container.classList.remove(r.hidden),this.dispatchEvent(new A({type:p.OPEN,map:this.map,originalEvent:e}))}getMenuEntriesLength(){return Array.from(this.menuEntries).filter(([,e])=>e.isSeparator===!1&&e.isSubmenu===!1&&e.isInsideSubmenu===!1).length}positionContainer(){const e=this.map.getSize()||[0,0],s={w:e[0]-this.pixel[0],h:e[1]-this.pixel[1]},i=this.getMenuEntriesLength(),o={w:this.container.offsetWidth,h:Math.round(this.lineHeight*i)},l=s.w>=o.w?this.pixel[0]+5:this.pixel[0]-o.w;this.container.style.left=`${l}px`,this.container.style.top=s.h>=o.h?`${this.pixel[1]-10}px`:`${this.pixel[1]-o.h}px`,this.container.style.right="auto",this.container.style.bottom="auto",s.w-=o.w;const E=g=>Array.from(g.children).filter(c=>c.tagName==="LI"&&c.classList.contains(r.submenu));let M=0;const b=(g,c)=>{M+=1,E(g).forEach(_=>{const z=c>=o.w?o.w-8:(o.w+8)*-1,d=_.querySelector(`ul.${r.container}`),P=Math.round(this.lineHeight*Array.from(d.children).filter(H=>H.tagName==="LI").length);d.style.left=`${z}px`,d.style.right="auto",d.style.top=s.h>=P+o.h?"0":`-${d.offsetHeight-25}px`,d.style.bottom="auto",d.style.zIndex=String(M),E(d).length>0&&b(d,c-o.w)})};b(this.container.firstElementChild,s.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(e){e.preventDefault(),e.stopPropagation();const s=e.currentTarget,i=this.menuEntries.get(s.id);if(!i)return;const o={coordinate:this.coordinate,data:i.data};this.closeMenu(),i.callback?.(o,this.map)}handleAddMenuEntry(e,s){this.menuEntries.set(e.id,e),this.positionContainer(),"callback"in e&&typeof e.callback=="function"&&s.addEventListener("click",this.entryCallbackEventListener,!1)}}return I}(ol.control.Control,ol);

package/dist/ol-contextmenu.js

@@ -1,242 +1,202 @@
 
   /*!
-  * ol-contextmenu - v5.1.3
+  * ol-contextmenu - v5.1.5
   * https://github.com/jonataswalker/ol-contextmenu
-  * Built: Mon Dec 26 2022 20:57:30 GMT-0300 (Brasilia Standard Time)
+  * Built: Sat Mar 11 2023 15:05:27 GMT-0300 (Brasilia Standard Time)
   */
 
-var S = Object.defineProperty;
-var D = (i, e, t) => e in i ? S(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var c = (i, e, t) => (D(i, typeof e != "symbol" ? e + "" : e, t), t);
-import P from "ol/control/Control";
-class k {
-  constructor(e) {
-    this.propagationStopped, this.defaultPrevented, this.type = e, this.target = null;
-  }
-  preventDefault() {
-    this.defaultPrevented = !0;
-  }
-  stopPropagation() {
-    this.propagationStopped = !0;
-  }
-}
-const T = k;
-class O extends T {
-  constructor(e, t, n) {
-    super(e), this.map = t, this.frameState = n !== void 0 ? n : null;
-  }
-}
-const I = O;
-class z extends I {
-  constructor(e, t, n, s, o, a) {
-    super(e, t, o), this.originalEvent = n, this.pixel_ = null, this.coordinate_ = null, this.dragging = s !== void 0 ? s : !1, this.activePointers = a;
-  }
-  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 H = z;
-var M = /* @__PURE__ */ ((i) => (i.CONTEXTMENU = "contextmenu", i.CLICK = "click", i.DBLCLICK = "dblclick", i))(M || {}), u = /* @__PURE__ */ ((i) => (i.BEFOREOPEN = "beforeopen", i.OPEN = "open", i.CLOSE = "close", i.ADD_MENU_ENTRY = "add-menu-entry", i))(u || {});
-class L extends H {
-  constructor(e) {
-    super(e.type, e.map, e.originalEvent);
+var O = Object.defineProperty;
+var D = (n, t, e) => t in n ? O(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var a = (n, t, e) => (D(n, typeof t != "symbol" ? t + "" : t, e), e);
+import I from "ol/control/Control";
+import { MapBrowserEvent as _ } from "ol";
+var x = /* @__PURE__ */ ((n) => (n.CONTEXTMENU = "contextmenu", n.CLICK = "click", n.DBLCLICK = "dblclick", n))(x || {}), d = /* @__PURE__ */ ((n) => (n.BEFOREOPEN = "beforeopen", n.OPEN = "open", n.CLOSE = "close", n.ADD_MENU_ENTRY = "add-menu-entry", n))(d || {});
+class C extends _ {
+  constructor(t) {
+    super(t.type, t.map, t.originalEvent);
   }
 }
-const U = {
+const z = {
   width: 150,
   scrollAt: 4,
-  eventType: M.CONTEXTMENU,
+  eventType: x.CONTEXTMENU,
   defaultItems: !0,
   items: []
-}, p = "ol-ctx-menu", r = {
-  namespace: p,
-  container: `${p}-container`,
-  separator: `${p}-separator`,
-  submenu: `${p}-submenu`,
-  hidden: `${p}-hidden`,
-  icon: `${p}-icon`,
-  zoomIn: `${p}-zoom-in`,
-  zoomOut: `${p}-zoom-out`,
+}, u = "ol-ctx-menu", r = {
+  namespace: u,
+  container: `${u}-container`,
+  separator: `${u}-separator`,
+  submenu: `${u}-submenu`,
+  hidden: `${u}-hidden`,
+  icon: `${u}-icon`,
+  zoomIn: `${u}-zoom-in`,
+  zoomOut: `${u}-zoom-out`,
   unselectable: "ol-unselectable"
-}, w = [
+}, A = [
   {
     text: "Zoom In",
     classname: `${r.zoomIn} ${r.icon}`,
-    callback: (i, e) => {
-      const t = e.getView();
-      t.animate({
-        zoom: Number(t.getZoom()) + 1,
+    callback: (n, t) => {
+      const e = t.getView();
+      e.animate({
+        zoom: Number(e.getZoom()) + 1,
         duration: 700,
-        center: i.coordinate
+        center: n.coordinate
       });
     }
   },
   {
     text: "Zoom Out",
     classname: `${r.zoomOut} ${r.icon}`,
-    callback: (i, e) => {
-      const t = e.getView();
-      t.animate({
-        zoom: Number(t.getZoom()) - 1,
+    callback: (n, t) => {
+      const e = t.getView();
+      e.animate({
+        zoom: Number(e.getZoom()) - 1,
         duration: 700,
-        center: i.coordinate
+        center: n.coordinate
       });
     }
   }
 ];
-var y = {}, F = {
+var M = {}, P = {
   get exports() {
-    return y;
+    return M;
   },
-  set exports(i) {
-    y = i;
+  set exports(n) {
+    M = n;
   }
 };
-function b() {
+function L() {
 }
-b.prototype = {
-  on: function(i, e, t) {
-    var n = this.e || (this.e = {});
-    return (n[i] || (n[i] = [])).push({
-      fn: e,
-      ctx: t
+L.prototype = {
+  on: function(n, t, e) {
+    var s = this.e || (this.e = {});
+    return (s[n] || (s[n] = [])).push({
+      fn: t,
+      ctx: e
     }), this;
   },
-  once: function(i, e, t) {
-    var n = this;
-    function s() {
-      n.off(i, s), e.apply(t, arguments);
+  once: function(n, t, e) {
+    var s = this;
+    function i() {
+      s.off(n, i), t.apply(e, arguments);
     }
-    return s._ = e, this.on(i, s, t);
+    return i._ = t, this.on(n, i, e);
   },
-  emit: function(i) {
-    var e = [].slice.call(arguments, 1), t = ((this.e || (this.e = {}))[i] || []).slice(), n = 0, s = t.length;
-    for (n; n < s; n++)
-      t[n].fn.apply(t[n].ctx, e);
+  emit: function(n) {
+    var t = [].slice.call(arguments, 1), e = ((this.e || (this.e = {}))[n] || []).slice(), s = 0, i = e.length;
+    for (s; s < i; s++)
+      e[s].fn.apply(e[s].ctx, t);
     return this;
   },
-  off: function(i, e) {
-    var t = this.e || (this.e = {}), n = t[i], s = [];
-    if (n && e)
-      for (var o = 0, a = n.length; o < a; o++)
-        n[o].fn !== e && n[o].fn._ !== e && s.push(n[o]);
-    return s.length ? t[i] = s : delete t[i], this;
+  off: function(n, t) {
+    var e = this.e || (this.e = {}), s = e[n], i = [];
+    if (s && t)
+      for (var o = 0, l = s.length; o < l; o++)
+        s[o].fn !== t && s[o].fn._ !== t && i.push(s[o]);
+    return i.length ? e[n] = i : delete e[n], this;
   }
 };
-F.exports = b;
-var B = y.TinyEmitter = b;
-const E = new B();
-function g(i) {
-  const e = document.createDocumentFragment(), t = document.createElement("div");
-  for (t.innerHTML = i; t.firstChild; )
-    e.append(t.firstChild);
-  return e;
+P.exports = L;
+var H = M.TinyEmitter = L;
+const g = new H();
+function y(n) {
+  const t = document.createDocumentFragment(), e = document.createElement("div");
+  for (e.innerHTML = n; e.firstChild; )
+    t.append(e.firstChild);
+  return t;
 }
-function R(i) {
-  var d, l;
-  const e = document.importNode(i), t = i.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 = g("<span>Foo</span>"), s = g("<span>Foo</span>"), o = document.createElement("li"), a = document.createElement("li");
-  o.append(n), a.append(s), e.append(o), e.append(a), (d = i.parentNode) == null || d.append(e);
-  const m = e.offsetHeight / 2;
-  return (l = i.parentNode) == null || l.removeChild(e), m;
+function U(n) {
+  const t = document.importNode(n), e = n.offsetWidth;
+  t.style.cssText = `position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${e}px`;
+  const s = y("<span>Foo</span>"), i = y("<span>Foo</span>"), o = document.createElement("li"), l = document.createElement("li");
+  o.append(s), l.append(i), t.append(o), t.append(l), n.parentNode?.append(t);
+  const p = t.offsetHeight / 2;
+  return n.parentNode?.removeChild(t), p;
 }
-function C(i, e, t = !1) {
-  const n = `_${Math.random().toString(36).slice(2, 11)}`;
-  if (typeof e != "string" && "text" in e) {
-    const m = `<span>${e.text}</span>`, d = g(m), l = document.createElement("li");
-    return e.classname = e.classname || "", e.icon && (e.classname === "" ? e.classname = r.icon : e.classname.includes(r.icon) === !1 && (e.classname += ` ${r.icon}`), l.setAttribute("style", `background-image:url(${e.icon})`)), l.id = n, l.className = e.classname, l.append(d), i.append(l), E.emit(
-      u.ADD_MENU_ENTRY,
-      {
-        id: n,
-        isSubmenu: t,
-        isSeparator: !1,
-        callback: "callback" in e ? e.callback : null,
-        data: "data" in e ? e.data : null
-      },
-      l
-    ), l;
-  }
-  const s = `<li id="${n}" class="${r.separator}"><hr></li>`, o = g(s);
-  i.append(o);
-  const a = i.lastChild;
-  return E.emit(
-    u.ADD_MENU_ENTRY,
-    {
-      id: n,
-      isSubmenu: t,
-      isSeparator: !0,
-      callback: null,
-      data: null
-    },
-    a
-  ), a;
+function N(n, t, e = !1, s = !1) {
+  const i = `_${Math.random().toString(36).slice(2, 11)}`;
+  if (typeof t != "string" && "text" in t) {
+    const E = `<span>${t.text}</span>`, m = y(E), c = document.createElement("li");
+    t.classname = t.classname || "", t.icon && (t.classname === "" ? t.classname = r.icon : t.classname.includes(r.icon) === !1 && (t.classname += ` ${r.icon}`), c.setAttribute("style", `background-image:url(${t.icon})`)), c.id = i, c.className = t.classname, c.append(m), n.append(c);
+    const w = {
+      id: i,
+      isSubmenu: e,
+      isInsideSubmenu: s,
+      isSeparator: !1,
+      callback: "callback" in t ? t.callback : null,
+      data: "data" in t ? t.data : null
+    };
+    return g.emit(d.ADD_MENU_ENTRY, w, c), c;
+  }
+  const o = `<li id="${i}" class="${r.separator}"><hr></li>`, l = y(o);
+  n.append(l);
+  const p = n.lastChild, f = {
+    id: i,
+    isSubmenu: !1,
+    isInsideSubmenu: !1,
+    isSeparator: !0,
+    callback: null,
+    data: null
+  };
+  return g.emit(d.ADD_MENU_ENTRY, f, p), p;
 }
-function x(i, e, t) {
-  e.forEach((n) => {
-    if (typeof n != "string" && "items" in n && Array.isArray(n.items)) {
-      const s = C(i, n, !0);
-      s.classList.add(r.submenu);
-      const o = document.createElement("ul");
-      o.classList.add(r.container), o.style.width = `${t}px`, s.append(o), x(o, n.items, t);
+function b(n, t, e, s) {
+  t.forEach((i) => {
+    if (typeof i != "string" && "items" in i && Array.isArray(i.items)) {
+      const o = N(n, i, !0);
+      o.classList.add(r.submenu);
+      const l = document.createElement("ul");
+      l.classList.add(r.container), l.style.width = `${e}px`, o.append(l), b(l, i.items, e, !0);
     } else
-      C(i, n);
+      N(n, i, !1, s);
   });
 }
-function v(i, e) {
-  if (!i)
-    throw new Error(e);
+function v(n, t) {
+  if (!n)
+    throw new Error(t);
 }
-class j extends P {
-  constructor(t = {}) {
-    v(typeof t == "object", "@param `opts` should be object type!");
-    const n = document.createElement("div");
-    super({ element: n });
-    c(this, "map");
-    c(this, "container");
-    c(this, "coordinate", []);
-    c(this, "pixel", []);
-    c(this, "contextMenuEventListener");
-    c(this, "entryCallbackEventListener");
-    c(this, "mapMoveListener");
-    c(this, "lineHeight", 0);
-    c(this, "disabled");
-    c(this, "opened");
-    c(this, "items", []);
-    c(this, "menuEntries", /* @__PURE__ */ new Map());
-    c(this, "options");
-    this.options = { ...U, ...t };
-    const s = document.createElement("ul");
-    n.append(s), n.style.width = `${this.options.width}px`, n.classList.add(
+class Y extends I {
+  constructor(e = {}) {
+    v(typeof e == "object", "@param `opts` should be object type!");
+    const s = document.createElement("div");
+    super({ element: s });
+    a(this, "map");
+    a(this, "container");
+    a(this, "coordinate", []);
+    a(this, "pixel", []);
+    a(this, "contextMenuEventListener");
+    a(this, "entryCallbackEventListener");
+    a(this, "mapMoveListener");
+    a(this, "lineHeight", 0);
+    a(this, "disabled");
+    a(this, "opened");
+    a(this, "items", []);
+    a(this, "menuEntries", /* @__PURE__ */ new Map());
+    a(this, "options");
+    this.options = { ...z, ...e };
+    const i = document.createElement("ul");
+    s.append(i), s.style.width = `${this.options.width}px`, s.classList.add(
       r.container,
       r.unselectable,
       r.hidden
-    ), this.container = n, this.contextMenuEventListener = (o) => {
+    ), this.container = s, this.contextMenuEventListener = (o) => {
       this.handleContextMenu(o);
     }, this.entryCallbackEventListener = (o) => {
       this.handleEntryCallback(o);
     }, this.mapMoveListener = () => {
       this.handleMapMove();
-    }, this.disabled = !1, this.opened = !1;
+    }, this.disabled = !1, this.opened = !1, window.addEventListener(
+      "beforeunload",
+      () => {
+        this.removeListeners();
+      },
+      { once: !0 }
+    );
   }
   clear() {
-    for (const t of this.menuEntries.keys())
-      this.removeMenuEntry(t);
+    for (const e of this.menuEntries.keys())
+      this.removeMenuEntry(e);
     this.container.replaceChildren(), this.container.append(document.createElement("ul"));
   }
   enable() {
@@ -246,76 +206,75 @@ class j extends P {
     this.disabled = !0;
   }
   getDefaultItems() {
-    return w;
+    return A;
   }
   countItems() {
     return this.menuEntries.size;
   }
-  extend(t) {
-    v(Array.isArray(t), "@param `items` should be an Array."), x(
+  extend(e) {
+    v(Array.isArray(e), "@param `items` should be an Array."), b(
       this.container.firstElementChild,
-      t,
+      e,
       this.options.width
     );
   }
   closeMenu() {
-    this.opened = !1, this.container.classList.add(r.hidden), this.dispatchEvent(u.CLOSE);
+    this.opened = !1, this.container.classList.add(r.hidden), this.dispatchEvent(d.CLOSE);
   }
   isOpen() {
     return this.opened;
   }
-  updatePosition(t) {
-    v(Array.isArray(t), "@param `pixel` should be an Array."), this.isOpen() && (this.pixel = t, this.positionContainer());
+  updatePosition(e) {
+    v(Array.isArray(e), "@param `pixel` should be an Array."), this.isOpen() && (this.pixel = e, this.positionContainer());
   }
   pop() {
-    const t = Array.from(this.menuEntries.keys()).pop();
-    t && this.removeMenuEntry(t);
+    const e = Array.from(this.menuEntries.keys()).pop();
+    e && this.removeMenuEntry(e);
   }
   shift() {
-    const t = Array.from(this.menuEntries.keys()).shift();
-    t && this.removeMenuEntry(t);
+    const e = Array.from(this.menuEntries.keys()).shift();
+    e && this.removeMenuEntry(e);
   }
-  push(t) {
-    t && this.extend([t]);
+  push(e) {
+    e && this.extend([e]);
   }
-  setMap(t) {
-    if (super.setMap(t), t) {
-      this.map = t, this.map.getViewport().addEventListener(this.options.eventType, this.contextMenuEventListener, !1), this.map.on("movestart", () => {
+  setMap(e) {
+    if (super.setMap(e), e) {
+      this.map = e, this.map.getViewport().addEventListener(this.options.eventType, this.contextMenuEventListener, !1), this.map.on("movestart", () => {
         this.handleMapMove();
-      }), E.on(
-        u.ADD_MENU_ENTRY,
-        (s, o) => {
-          this.handleAddMenuEntry(s, o);
+      }), g.on(
+        d.ADD_MENU_ENTRY,
+        (i, o) => {
+          this.handleAddMenuEntry(i, o);
         },
         this
-      ), this.items = this.options.defaultItems ? this.options.items.concat(w) : this.options.items, x(
+      ), this.items = this.options.defaultItems ? this.options.items.concat(A) : this.options.items, b(
         this.container.firstElementChild,
         this.items,
         this.options.width
       );
-      const n = this.getMenuEntriesLength();
-      this.lineHeight = n > 0 ? this.container.offsetHeight / n : R(this.container);
+      const s = this.getMenuEntriesLength();
+      this.lineHeight = s > 0 ? this.container.offsetHeight / s : U(this.container);
     } else
       this.removeListeners(), this.clear();
   }
   removeListeners() {
-    this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1), E.off(u.ADD_MENU_ENTRY);
+    this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1), g.off(d.ADD_MENU_ENTRY);
   }
-  removeMenuEntry(t) {
-    const n = document.getElementById(t);
-    n == null || n.remove(), n == null || n.removeEventListener("click", this.entryCallbackEventListener), this.menuEntries.delete(t);
+  removeMenuEntry(e) {
+    const s = document.getElementById(e);
+    s?.remove(), s?.removeEventListener("click", this.entryCallbackEventListener), this.menuEntries.delete(e);
   }
-  handleContextMenu(t) {
-    var n;
-    this.coordinate = this.map.getEventCoordinate(t), this.pixel = this.map.getEventPixel(t), this.dispatchEvent(
-      new L({
-        type: u.BEFOREOPEN,
+  handleContextMenu(e) {
+    this.coordinate = this.map.getEventCoordinate(e), this.pixel = this.map.getEventPixel(e), this.dispatchEvent(
+      new C({
+        type: d.BEFOREOPEN,
         map: this.map,
-        originalEvent: t
+        originalEvent: e
       })
-    ), !this.disabled && (this.options.eventType === M.CONTEXTMENU && (t.stopPropagation(), t.preventDefault()), setTimeout(() => {
-      this.openMenu(t);
-    }), (n = t.target) == null || n.addEventListener(
+    ), !this.disabled && (this.options.eventType === x.CONTEXTMENU && (e.stopPropagation(), e.preventDefault()), setTimeout(() => {
+      this.openMenu(e);
+    }), e.target?.addEventListener(
       "pointerdown",
       (s) => {
         this.opened && (s.stopPropagation(), this.closeMenu());
@@ -323,64 +282,65 @@ class j extends P {
       { once: !0 }
     ));
   }
-  openMenu(t) {
-    this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(r.hidden), this.dispatchEvent(
-      new L({
-        type: u.OPEN,
+  openMenu(e) {
+    this.opened = !0, this.positionContainer(), this.container.classList.remove(r.hidden), this.dispatchEvent(
+      new C({
+        type: d.OPEN,
         map: this.map,
-        originalEvent: t
+        originalEvent: e
       })
-    ));
+    );
   }
   getMenuEntriesLength() {
     return Array.from(this.menuEntries).filter(
-      ([, t]) => t.isSeparator === !1 || t.isSubmenu === !1
+      ([, e]) => e.isSeparator === !1 && e.isSubmenu === !1 && e.isInsideSubmenu === !1
     ).length;
   }
   positionContainer() {
-    const t = this.map.getSize() || [0, 0], n = {
-      w: t[0] - this.pixel[0],
-      h: t[1] - this.pixel[1]
-    }, s = {
+    const e = this.map.getSize() || [0, 0], s = {
+      w: e[0] - this.pixel[0],
+      h: e[1] - this.pixel[1]
+    }, i = this.getMenuEntriesLength(), o = {
       w: this.container.offsetWidth,
-      h: Math.round(this.lineHeight * this.getMenuEntriesLength())
-    }, o = n.w >= s.w ? this.pixel[0] + 5 : this.pixel[0] - s.w;
-    this.container.style.left = `${o}px`, this.container.style.top = n.h >= s.h ? `${this.pixel[1] - 10}px` : `${this.pixel[1] - s.h}px`, this.container.style.right = "auto", this.container.style.bottom = "auto", n.w -= s.w;
-    const a = (l) => Array.from(l.children).filter(
-      (f) => f.tagName === "LI" && f.classList.contains(r.submenu)
+      // a cheap way to recalculate container height
+      // since offsetHeight is like cached
+      h: Math.round(this.lineHeight * i)
+    }, l = s.w >= o.w ? this.pixel[0] + 5 : this.pixel[0] - o.w;
+    this.container.style.left = `${l}px`, this.container.style.top = s.h >= o.h ? `${this.pixel[1] - 10}px` : `${this.pixel[1] - o.h}px`, this.container.style.right = "auto", this.container.style.bottom = "auto", s.w -= o.w;
+    const p = (m) => Array.from(m.children).filter(
+      (c) => c.tagName === "LI" && c.classList.contains(r.submenu)
     );
-    let m = 0;
-    const d = (l, f) => {
-      m += 1, a(l).forEach((A) => {
-        const N = f >= s.w ? s.w - 8 : (s.w + 8) * -1, h = A.querySelector(
+    let f = 0;
+    const E = (m, c) => {
+      f += 1, p(m).forEach((S) => {
+        const $ = c >= o.w ? o.w - 8 : (o.w + 8) * -1, h = S.querySelector(
           `ul.${r.container}`
-        ), $ = Math.round(
-          this.lineHeight * Array.from(h.children).filter((_) => _.tagName === "LI").length
+        ), k = Math.round(
+          this.lineHeight * Array.from(h.children).filter((T) => T.tagName === "LI").length
         );
-        h.style.left = `${N}px`, h.style.right = "auto", h.style.top = n.h >= $ + s.h ? "0" : `-${h.offsetHeight - 25}px`, h.style.bottom = "auto", h.style.zIndex = String(m), a(h).length > 0 && d(h, f - s.w);
+        h.style.left = `${$}px`, h.style.right = "auto", h.style.top = s.h >= k + o.h ? "0" : `-${h.offsetHeight - 25}px`, h.style.bottom = "auto", h.style.zIndex = String(f), p(h).length > 0 && E(h, c - o.w);
       });
     };
-    d(this.container.firstElementChild, n.w);
+    E(this.container.firstElementChild, s.w);
   }
   handleMapMove() {
     this.closeMenu();
   }
-  handleEntryCallback(t) {
-    var a;
-    t.preventDefault(), t.stopPropagation();
-    const n = t.currentTarget, s = this.menuEntries.get(n.id);
-    if (!s)
+  handleEntryCallback(e) {
+    e.preventDefault(), e.stopPropagation();
+    const s = e.currentTarget, i = this.menuEntries.get(s.id);
+    if (!i)
       return;
     const o = {
       coordinate: this.coordinate,
-      data: s.data
+      data: i.data
     };
-    this.closeMenu(), (a = s.callback) == null || a.call(s, o, this.map);
+    this.closeMenu(), i.callback?.(o, 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);
+  handleAddMenuEntry(e, s) {
+    this.menuEntries.set(e.id, e), this.positionContainer(), "callback" in e && typeof e.callback == "function" && s.addEventListener("click", this.entryCallbackEventListener, !1);
   }
 }
 export {
-  j as default
+  Y as default
 };

package/dist/ol-contextmenu.umd.cjs

@@ -1,8 +1,8 @@
 
   /*!
-  * ol-contextmenu - v5.1.3
+  * ol-contextmenu - v5.1.5
   * https://github.com/jonataswalker/ol-contextmenu
-  * Built: Mon Dec 26 2022 20:57:30 GMT-0300 (Brasilia Standard Time)
+  * Built: Sat Mar 11 2023 15:05:27 GMT-0300 (Brasilia Standard Time)
   */
 
-(function(p,h){typeof exports=="object"&&typeof module<"u"?module.exports=h(require("ol/control/Control")):typeof define=="function"&&define.amd?define(["ol/control/Control"],h):(p=typeof globalThis<"u"?globalThis:p||self,p.ContextMenu=h(p.ol.control.Control))})(this,function(p){"use strict";var R=Object.defineProperty;var Y=(p,h,m)=>h in p?R(p,h,{enumerable:!0,configurable:!0,writable:!0,value:m}):p[h]=m;var c=(p,h,m)=>(Y(p,typeof h!="symbol"?h+"":h,m),m);class h{constructor(n){this.propagationStopped,this.defaultPrevented,this.type=n,this.target=null}preventDefault(){this.defaultPrevented=!0}stopPropagation(){this.propagationStopped=!0}}const m=h;class _ extends m{constructor(n,t,e){super(n),this.map=t,this.frameState=e!==void 0?e:null}}const S=_;class D extends S{constructor(n,t,e,s,o,a){super(n,t,o),this.originalEvent=e,this.pixel_=null,this.coordinate_=null,this.dragging=s!==void 0?s:!1,this.activePointers=a}get pixel(){return this.pixel_||(this.pixel_=this.map.getEventPixel(this.originalEvent)),this.pixel_}set pixel(n){this.pixel_=n}get coordinate(){return this.coordinate_||(this.coordinate_=this.map.getCoordinateFromPixel(this.pixel)),this.coordinate_}set coordinate(n){this.coordinate_=n}preventDefault(){super.preventDefault(),"preventDefault"in this.originalEvent&&this.originalEvent.preventDefault()}stopPropagation(){super.stopPropagation(),"stopPropagation"in this.originalEvent&&this.originalEvent.stopPropagation()}}const T=D;var M=(i=>(i.CONTEXTMENU="contextmenu",i.CLICK="click",i.DBLCLICK="dblclick",i))(M||{}),d=(i=>(i.BEFOREOPEN="beforeopen",i.OPEN="open",i.CLOSE="close",i.ADD_MENU_ENTRY="add-menu-entry",i))(d||{});class A extends T{constructor(n){super(n.type,n.map,n.originalEvent)}}const P={width:150,scrollAt:4,eventType:M.CONTEXTMENU,defaultItems:!0,items:[]},f="ol-ctx-menu",r={namespace:f,container:`${f}-container`,separator:`${f}-separator`,submenu:`${f}-submenu`,hidden:`${f}-hidden`,icon:`${f}-icon`,zoomIn:`${f}-zoom-in`,zoomOut:`${f}-zoom-out`,unselectable:"ol-unselectable"},N=[{text:"Zoom In",classname:`${r.zoomIn} ${r.icon}`,callback:(i,n)=>{const t=n.getView();t.animate({zoom:Number(t.getZoom())+1,duration:700,center:i.coordinate})}},{text:"Zoom Out",classname:`${r.zoomOut} ${r.icon}`,callback:(i,n)=>{const t=n.getView();t.animate({zoom:Number(t.getZoom())-1,duration:700,center:i.coordinate})}}];var b={},k={get exports(){return b},set exports(i){b=i}};function L(){}L.prototype={on:function(i,n,t){var e=this.e||(this.e={});return(e[i]||(e[i]=[])).push({fn:n,ctx:t}),this},once:function(i,n,t){var e=this;function s(){e.off(i,s),n.apply(t,arguments)}return s._=n,this.on(i,s,t)},emit:function(i){var n=[].slice.call(arguments,1),t=((this.e||(this.e={}))[i]||[]).slice(),e=0,s=t.length;for(e;e<s;e++)t[e].fn.apply(t[e].ctx,n);return this},off:function(i,n){var t=this.e||(this.e={}),e=t[i],s=[];if(e&&n)for(var o=0,a=e.length;o<a;o++)e[o].fn!==n&&e[o].fn._!==n&&s.push(e[o]);return s.length?t[i]=s:delete t[i],this}},k.exports=L;var O=b.TinyEmitter=L;const y=new O;function x(i){const n=document.createDocumentFragment(),t=document.createElement("div");for(t.innerHTML=i;t.firstChild;)n.append(t.firstChild);return n}function I(i){var E,l;const n=document.importNode(i),t=i.offsetWidth;n.style.cssText=`position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${t}px`;const e=x("<span>Foo</span>"),s=x("<span>Foo</span>"),o=document.createElement("li"),a=document.createElement("li");o.append(e),a.append(s),n.append(o),n.append(a),(E=i.parentNode)==null||E.append(n);const g=n.offsetHeight/2;return(l=i.parentNode)==null||l.removeChild(n),g}function $(i,n,t=!1){const e=`_${Math.random().toString(36).slice(2,11)}`;if(typeof n!="string"&&"text"in n){const g=`<span>${n.text}</span>`,E=x(g),l=document.createElement("li");return n.classname=n.classname||"",n.icon&&(n.classname===""?n.classname=r.icon:n.classname.includes(r.icon)===!1&&(n.classname+=` ${r.icon}`),l.setAttribute("style",`background-image:url(${n.icon})`)),l.id=e,l.className=n.classname,l.append(E),i.append(l),y.emit(d.ADD_MENU_ENTRY,{id:e,isSubmenu:t,isSeparator:!1,callback:"callback"in n?n.callback:null,data:"data"in n?n.data:null},l),l}const s=`<li id="${e}" class="${r.separator}"><hr></li>`,o=x(s);i.append(o);const a=i.lastChild;return y.emit(d.ADD_MENU_ENTRY,{id:e,isSubmenu:t,isSeparator:!0,callback:null,data:null},a),a}function C(i,n,t){n.forEach(e=>{if(typeof e!="string"&&"items"in e&&Array.isArray(e.items)){const s=$(i,e,!0);s.classList.add(r.submenu);const o=document.createElement("ul");o.classList.add(r.container),o.style.width=`${t}px`,s.append(o),C(o,e.items,t)}else $(i,e)})}const j="";function w(i,n){if(!i)throw new Error(n)}class z extends p{constructor(t={}){w(typeof t=="object","@param `opts` should be object type!");const e=document.createElement("div");super({element:e});c(this,"map");c(this,"container");c(this,"coordinate",[]);c(this,"pixel",[]);c(this,"contextMenuEventListener");c(this,"entryCallbackEventListener");c(this,"mapMoveListener");c(this,"lineHeight",0);c(this,"disabled");c(this,"opened");c(this,"items",[]);c(this,"menuEntries",new Map);c(this,"options");this.options={...P,...t};const s=document.createElement("ul");e.append(s),e.style.width=`${this.options.width}px`,e.classList.add(r.container,r.unselectable,r.hidden),this.container=e,this.contextMenuEventListener=o=>{this.handleContextMenu(o)},this.entryCallbackEventListener=o=>{this.handleEntryCallback(o)},this.mapMoveListener=()=>{this.handleMapMove()},this.disabled=!1,this.opened=!1}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 N}countItems(){return this.menuEntries.size}extend(t){w(Array.isArray(t),"@param `items` should be an Array."),C(this.container.firstElementChild,t,this.options.width)}closeMenu(){this.opened=!1,this.container.classList.add(r.hidden),this.dispatchEvent(d.CLOSE)}isOpen(){return this.opened}updatePosition(t){w(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()}),y.on(d.ADD_MENU_ENTRY,(s,o)=>{this.handleAddMenuEntry(s,o)},this),this.items=this.options.defaultItems?this.options.items.concat(N):this.options.items,C(this.container.firstElementChild,this.items,this.options.width);const e=this.getMenuEntriesLength();this.lineHeight=e>0?this.container.offsetHeight/e:I(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),y.off(d.ADD_MENU_ENTRY)}removeMenuEntry(t){const e=document.getElementById(t);e==null||e.remove(),e==null||e.removeEventListener("click",this.entryCallbackEventListener),this.menuEntries.delete(t)}handleContextMenu(t){var e;this.coordinate=this.map.getEventCoordinate(t),this.pixel=this.map.getEventPixel(t),this.dispatchEvent(new A({type:d.BEFOREOPEN,map:this.map,originalEvent:t})),!this.disabled&&(this.options.eventType===M.CONTEXTMENU&&(t.stopPropagation(),t.preventDefault()),setTimeout(()=>{this.openMenu(t)}),(e=t.target)==null||e.addEventListener("pointerdown",s=>{this.opened&&(s.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(t){this.menuEntries.size!==0&&(this.opened=!0,this.positionContainer(),this.container.classList.remove(r.hidden),this.dispatchEvent(new A({type:d.OPEN,map:this.map,originalEvent:t})))}getMenuEntriesLength(){return Array.from(this.menuEntries).filter(([,t])=>t.isSeparator===!1||t.isSubmenu===!1).length}positionContainer(){const t=this.map.getSize()||[0,0],e={w:t[0]-this.pixel[0],h:t[1]-this.pixel[1]},s={w:this.container.offsetWidth,h:Math.round(this.lineHeight*this.getMenuEntriesLength())},o=e.w>=s.w?this.pixel[0]+5:this.pixel[0]-s.w;this.container.style.left=`${o}px`,this.container.style.top=e.h>=s.h?`${this.pixel[1]-10}px`:`${this.pixel[1]-s.h}px`,this.container.style.right="auto",this.container.style.bottom="auto",e.w-=s.w;const a=l=>Array.from(l.children).filter(v=>v.tagName==="LI"&&v.classList.contains(r.submenu));let g=0;const E=(l,v)=>{g+=1,a(l).forEach(H=>{const U=v>=s.w?s.w-8:(s.w+8)*-1,u=H.querySelector(`ul.${r.container}`),F=Math.round(this.lineHeight*Array.from(u.children).filter(B=>B.tagName==="LI").length);u.style.left=`${U}px`,u.style.right="auto",u.style.top=e.h>=F+s.h?"0":`-${u.offsetHeight-25}px`,u.style.bottom="auto",u.style.zIndex=String(g),a(u).length>0&&E(u,v-s.w)})};E(this.container.firstElementChild,e.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(t){var a;t.preventDefault(),t.stopPropagation();const e=t.currentTarget,s=this.menuEntries.get(e.id);if(!s)return;const o={coordinate:this.coordinate,data:s.data};this.closeMenu(),(a=s.callback)==null||a.call(s,o,this.map)}handleAddMenuEntry(t,e){this.menuEntries.set(t.id,t),this.positionContainer(),"callback"in t&&typeof t.callback=="function"&&e.addEventListener("click",this.entryCallbackEventListener,!1)}}return z});
+(function(l,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("ol/control/Control"),require("ol")):typeof define=="function"&&define.amd?define(["ol/control/Control","ol"],c):(l=typeof globalThis<"u"?globalThis:l||self,l.ContextMenu=c(l.ol.control.Control,l.ol))})(this,function(l,c){"use strict";var U=Object.defineProperty;var F=(l,c,d)=>c in l?U(l,c,{enumerable:!0,configurable:!0,writable:!0,value:d}):l[c]=d;var a=(l,c,d)=>(F(l,typeof c!="symbol"?c+"":c,d),d);var d=(n=>(n.CONTEXTMENU="contextmenu",n.CLICK="click",n.DBLCLICK="dblclick",n))(d||{}),m=(n=>(n.BEFOREOPEN="beforeopen",n.OPEN="open",n.CLOSE="close",n.ADD_MENU_ENTRY="add-menu-entry",n))(m||{});class A extends c.MapBrowserEvent{constructor(t){super(t.type,t.map,t.originalEvent)}}const T={width:150,scrollAt:4,eventType:d.CONTEXTMENU,defaultItems:!0,items:[]},f="ol-ctx-menu",r={namespace:f,container:`${f}-container`,separator:`${f}-separator`,submenu:`${f}-submenu`,hidden:`${f}-hidden`,icon:`${f}-icon`,zoomIn:`${f}-zoom-in`,zoomOut:`${f}-zoom-out`,unselectable:"ol-unselectable"},N=[{text:"Zoom In",classname:`${r.zoomIn} ${r.icon}`,callback:(n,t)=>{const e=t.getView();e.animate({zoom:Number(e.getZoom())+1,duration:700,center:n.coordinate})}},{text:"Zoom Out",classname:`${r.zoomOut} ${r.icon}`,callback:(n,t)=>{const e=t.getView();e.animate({zoom:Number(e.getZoom())-1,duration:700,center:n.coordinate})}}];var x={},k={get exports(){return x},set exports(n){x=n}};function L(){}L.prototype={on:function(n,t,e){var s=this.e||(this.e={});return(s[n]||(s[n]=[])).push({fn:t,ctx:e}),this},once:function(n,t,e){var s=this;function i(){s.off(n,i),t.apply(e,arguments)}return i._=t,this.on(n,i,e)},emit:function(n){var t=[].slice.call(arguments,1),e=((this.e||(this.e={}))[n]||[]).slice(),s=0,i=e.length;for(s;s<i;s++)e[s].fn.apply(e[s].ctx,t);return this},off:function(n,t){var e=this.e||(this.e={}),s=e[n],i=[];if(s&&t)for(var o=0,h=s.length;o<h;o++)s[o].fn!==t&&s[o].fn._!==t&&i.push(s[o]);return i.length?e[n]=i:delete e[n],this}},k.exports=L;var O=x.TinyEmitter=L;const y=new O;function v(n){const t=document.createDocumentFragment(),e=document.createElement("div");for(e.innerHTML=n;e.firstChild;)t.append(e.firstChild);return t}function D(n){const t=document.importNode(n),e=n.offsetWidth;t.style.cssText=`position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${e}px`;const s=v("<span>Foo</span>"),i=v("<span>Foo</span>"),o=document.createElement("li"),h=document.createElement("li");o.append(s),h.append(i),t.append(o),t.append(h),n.parentNode?.append(t);const E=t.offsetHeight/2;return n.parentNode?.removeChild(t),E}function S(n,t,e=!1,s=!1){const i=`_${Math.random().toString(36).slice(2,11)}`;if(typeof t!="string"&&"text"in t){const b=`<span>${t.text}</span>`,g=v(b),u=document.createElement("li");t.classname=t.classname||"",t.icon&&(t.classname===""?t.classname=r.icon:t.classname.includes(r.icon)===!1&&(t.classname+=` ${r.icon}`),u.setAttribute("style",`background-image:url(${t.icon})`)),u.id=i,u.className=t.classname,u.append(g),n.append(u);const $={id:i,isSubmenu:e,isInsideSubmenu:s,isSeparator:!1,callback:"callback"in t?t.callback:null,data:"data"in t?t.data:null};return y.emit(m.ADD_MENU_ENTRY,$,u),u}const o=`<li id="${i}" class="${r.separator}"><hr></li>`,h=v(o);n.append(h);const E=n.lastChild,M={id:i,isSubmenu:!1,isInsideSubmenu:!1,isSeparator:!0,callback:null,data:null};return y.emit(m.ADD_MENU_ENTRY,M,E),E}function w(n,t,e,s){t.forEach(i=>{if(typeof i!="string"&&"items"in i&&Array.isArray(i.items)){const o=S(n,i,!0);o.classList.add(r.submenu);const h=document.createElement("ul");h.classList.add(r.container),h.style.width=`${e}px`,o.append(h),w(h,i.items,e,!0)}else S(n,i,!1,s)})}const R="";function C(n,t){if(!n)throw new Error(t)}class I extends l{constructor(e={}){C(typeof e=="object","@param `opts` should be object type!");const s=document.createElement("div");super({element:s});a(this,"map");a(this,"container");a(this,"coordinate",[]);a(this,"pixel",[]);a(this,"contextMenuEventListener");a(this,"entryCallbackEventListener");a(this,"mapMoveListener");a(this,"lineHeight",0);a(this,"disabled");a(this,"opened");a(this,"items",[]);a(this,"menuEntries",new Map);a(this,"options");this.options={...T,...e};const i=document.createElement("ul");s.append(i),s.style.width=`${this.options.width}px`,s.classList.add(r.container,r.unselectable,r.hidden),this.container=s,this.contextMenuEventListener=o=>{this.handleContextMenu(o)},this.entryCallbackEventListener=o=>{this.handleEntryCallback(o)},this.mapMoveListener=()=>{this.handleMapMove()},this.disabled=!1,this.opened=!1,window.addEventListener("beforeunload",()=>{this.removeListeners()},{once:!0})}clear(){for(const e of this.menuEntries.keys())this.removeMenuEntry(e);this.container.replaceChildren(),this.container.append(document.createElement("ul"))}enable(){this.disabled=!1}disable(){this.disabled=!0}getDefaultItems(){return N}countItems(){return this.menuEntries.size}extend(e){C(Array.isArray(e),"@param `items` should be an Array."),w(this.container.firstElementChild,e,this.options.width)}closeMenu(){this.opened=!1,this.container.classList.add(r.hidden),this.dispatchEvent(m.CLOSE)}isOpen(){return this.opened}updatePosition(e){C(Array.isArray(e),"@param `pixel` should be an Array."),this.isOpen()&&(this.pixel=e,this.positionContainer())}pop(){const e=Array.from(this.menuEntries.keys()).pop();e&&this.removeMenuEntry(e)}shift(){const e=Array.from(this.menuEntries.keys()).shift();e&&this.removeMenuEntry(e)}push(e){e&&this.extend([e])}setMap(e){if(super.setMap(e),e){this.map=e,this.map.getViewport().addEventListener(this.options.eventType,this.contextMenuEventListener,!1),this.map.on("movestart",()=>{this.handleMapMove()}),y.on(m.ADD_MENU_ENTRY,(i,o)=>{this.handleAddMenuEntry(i,o)},this),this.items=this.options.defaultItems?this.options.items.concat(N):this.options.items,w(this.container.firstElementChild,this.items,this.options.width);const s=this.getMenuEntriesLength();this.lineHeight=s>0?this.container.offsetHeight/s:D(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),y.off(m.ADD_MENU_ENTRY)}removeMenuEntry(e){const s=document.getElementById(e);s?.remove(),s?.removeEventListener("click",this.entryCallbackEventListener),this.menuEntries.delete(e)}handleContextMenu(e){this.coordinate=this.map.getEventCoordinate(e),this.pixel=this.map.getEventPixel(e),this.dispatchEvent(new A({type:m.BEFOREOPEN,map:this.map,originalEvent:e})),!this.disabled&&(this.options.eventType===d.CONTEXTMENU&&(e.stopPropagation(),e.preventDefault()),setTimeout(()=>{this.openMenu(e)}),e.target?.addEventListener("pointerdown",s=>{this.opened&&(s.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(e){this.opened=!0,this.positionContainer(),this.container.classList.remove(r.hidden),this.dispatchEvent(new A({type:m.OPEN,map:this.map,originalEvent:e}))}getMenuEntriesLength(){return Array.from(this.menuEntries).filter(([,e])=>e.isSeparator===!1&&e.isSubmenu===!1&&e.isInsideSubmenu===!1).length}positionContainer(){const e=this.map.getSize()||[0,0],s={w:e[0]-this.pixel[0],h:e[1]-this.pixel[1]},i=this.getMenuEntriesLength(),o={w:this.container.offsetWidth,h:Math.round(this.lineHeight*i)},h=s.w>=o.w?this.pixel[0]+5:this.pixel[0]-o.w;this.container.style.left=`${h}px`,this.container.style.top=s.h>=o.h?`${this.pixel[1]-10}px`:`${this.pixel[1]-o.h}px`,this.container.style.right="auto",this.container.style.bottom="auto",s.w-=o.w;const E=g=>Array.from(g.children).filter(u=>u.tagName==="LI"&&u.classList.contains(r.submenu));let M=0;const b=(g,u)=>{M+=1,E(g).forEach(_=>{const z=u>=o.w?o.w-8:(o.w+8)*-1,p=_.querySelector(`ul.${r.container}`),P=Math.round(this.lineHeight*Array.from(p.children).filter(H=>H.tagName==="LI").length);p.style.left=`${z}px`,p.style.right="auto",p.style.top=s.h>=P+o.h?"0":`-${p.offsetHeight-25}px`,p.style.bottom="auto",p.style.zIndex=String(M),E(p).length>0&&b(p,u-o.w)})};b(this.container.firstElementChild,s.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(e){e.preventDefault(),e.stopPropagation();const s=e.currentTarget,i=this.menuEntries.get(s.id);if(!i)return;const o={coordinate:this.coordinate,data:i.data};this.closeMenu(),i.callback?.(o,this.map)}handleAddMenuEntry(e,s){this.menuEntries.set(e.id,e),this.positionContainer(),"callback"in e&&typeof e.callback=="function"&&s.addEventListener("click",this.entryCallbackEventListener,!1)}}return I});

package/dist/types.d.ts

@@ -18,33 +18,34 @@ export declare class ContextMenuEvent extends MapBrowserEvent<MouseEvent> {
         originalEvent: MouseEvent;
     });
 }
-export declare type CallbackObject = {
+export type CallbackObject = {
     coordinate: Coordinate;
     data: unknown;
 };
-export declare type ItemSeparator = '-';
-export declare type SingleItem = {
+export type ItemSeparator = '-';
+export type SingleItem = {
     text: string;
     classname?: string;
     icon?: string;
     callback: (object: CallbackObject, map: OlMap) => void;
     data?: unknown;
 };
-export declare type MenuEntry = {
+export type MenuEntry = {
     id: string;
     isSubmenu: boolean;
+    isInsideSubmenu: boolean;
     isSeparator: boolean;
     callback: SingleItem['callback'] | null;
     data: unknown;
 };
-export declare type ItemWithNested = {
+export type ItemWithNested = {
     text: string;
     classname?: string;
     icon?: string;
     items: Item[];
 };
-export declare type Item = SingleItem | ItemSeparator | ItemWithNested;
-export declare type Options = {
+export type Item = SingleItem | ItemSeparator | ItemWithNested;
+export type Options = {
     width: number;
     scrollAt: number;
     eventType: `${EventTypes}`;

package/package.json

@@ -1,9 +1,10 @@
 {
     "name": "ol-contextmenu",
-    "version": "5.1.3",
+    "version": "5.1.5",
     "description": "Custom Context Menu for Openlayers",
     "type": "module",
-    "browser": "./dist/ol-contextmenu.umd.cjs",
+    "main": "./dist/ol-contextmenu.umd.cjs",
+    "browser": "./dist/ol-contextmenu.iife.js",
     "module": "./dist/ol-contextmenu.js",
     "exports": {
         ".": {
@@ -13,7 +14,8 @@
         },
         "./ol-contextmenu.css": {
             "import": "./dist/ol-contextmenu.css",
-            "require": "./dist/ol-contextmenu.css"
+            "require": "./dist/ol-contextmenu.css",
+            "style": "./dist/ol-contextmenu.css"
         }
     },
     "files": [
@@ -38,32 +40,33 @@
         "dev": "vite",
         "build": "rimraf ./dist && vite build",
         "preview": "vite preview",
-        "lint": "eslint --cache --ext .js .",
+        "lint": "eslint .",
         "lint:fix": "npm run lint -- --fix",
         "test": "jest",
         "prepublishOnly": "npm run lint && npm test && npm run build",
         "prepare": "husky install"
     },
     "devDependencies": {
-        "@swc/core": "^1.3.24",
+        "@swc/core": "^1.3.39",
         "@swc/jest": "^0.2.24",
-        "@types/jest": "^29.2.4",
-        "eslint": "^8.30.0",
-        "eslint-config-jwalker": "^7.10.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-jest": "^27.1.7",
+        "@types/jest": "^29.4.0",
+        "eslint": "^8.36.0",
+        "eslint-config-jwalker": "^8.0.0",
+        "eslint-config-prettier": "^8.7.0",
+        "eslint-plugin-jest": "^27.2.1",
         "eslint-plugin-prettier": "^4.2.1",
-        "husky": "^8.0.2",
+        "husky": "^8.0.3",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.3.1",
-        "jest-environment-jsdom": "^29.3.1",
-        "ol": "^7.2.2",
-        "prettier": "^2.8.1",
-        "rimraf": "^3.0.2",
-        "typescript": "^4.9.4",
-        "vite": "^4.0.3",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "ol": "^7.3.0",
+        "prettier": "^2.8.4",
+        "rimraf": "^4.4.0",
+        "sass": "^1.59.2",
+        "typescript": "^4.9.5",
+        "vite": "^4.1.4",
         "vite-plugin-banner": "^0.7.0",
-        "vite-plugin-dts": "^1.7.1"
+        "vite-plugin-dts": "^2.1.0"
     },
     "peerDependencies": {
         "ol": "^7.1.0"

package/dist/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />