ol-contextmenu - npm Package Compare versions

Comparing version 5.1.0 to 5.1.1

dist/main.d.ts

@@ -5,3 +5,8 @@ import type { Pixel } from 'ol/pixel';
 import Control from 'ol/control/Control';
-import { Item, MenuEntry, Options } from './types';
+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 {
@@ -20,2 +25,5 @@ protected map: OlMap;
     protected menuEntries: Map<string, MenuEntry>;
+    on: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, EventsKey> & OnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`, ContextMenuEvent, EventsKey> & OnSignature<ObjectEventTypes, ObjectEvent, EventsKey> & CombinedOnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}` | ObjectEventTypes | `${CustomEventTypes.CLOSE}` | OlEventTypes, EventsKey>;
+    once: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, EventsKey> & OnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`, ContextMenuEvent, EventsKey> & OnSignature<ObjectEventTypes, ObjectEvent, EventsKey> & CombinedOnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}` | ObjectEventTypes | `${CustomEventTypes.CLOSE}` | OlEventTypes, EventsKey>;
+    un: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, void> & OnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`, ContextMenuEvent, EventsKey> & OnSignature<ObjectEventTypes, ObjectEvent, void> & CombinedOnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}` | ObjectEventTypes | `${CustomEventTypes.CLOSE}` | OlEventTypes, void>;
     options: Options;
@@ -39,3 +47,3 @@ constructor(opts?: Partial<Options>);
     protected handleContextMenu(evt: MouseEvent): void;
-    protected openMenu(): void;
+    protected openMenu(evt: MouseEvent): void;
     protected getMenuEntriesLength(): number;
@@ -42,0 +50,0 @@ protected positionContainer(): void;

dist/ol-contextmenu.iife.js

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

dist/ol-contextmenu.js

 
   /*!
-  * ol-contextmenu - v5.1.0
+  * ol-contextmenu - v5.1.1
   * https://github.com/jonataswalker/ol-contextmenu
-  * Built: Sat Sep 24 2022 09:56:34 GMT-0300 (Brasilia Standard Time)
+  * Built: Sat Nov 12 2022 12:41:10 GMT-0300 (Brasilia Standard Time)
   */
 
-var S = Object.defineProperty;
-var k = (s, t, e) => t in s ? S(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var r = (s, t, e) => (k(s, typeof t != "symbol" ? t + "" : t, e), e);
-import T from "ol/control/Control";
-var M = /* @__PURE__ */ ((s) => (s.CONTEXTMENU = "contextmenu", s.CLICK = "click", s.DBLCLICK = "dblclick", s))(M || {}), p = /* @__PURE__ */ ((s) => (s.BEFOREOPEN = "beforeopen", s.OPEN = "open", s.CLOSE = "close", s.ADD_MENU_ENTRY = "add-menu-entry", s))(p || {});
-const O = {
+var k = Object.defineProperty;
+var T = (s, t, e) => t in s ? k(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var r = (s, t, e) => (T(s, typeof t != "symbol" ? t + "" : t, e), e);
+import O from "ol/control/Control";
+import { MapBrowserEvent as D } from "ol";
+var M = /* @__PURE__ */ ((s) => (s.CONTEXTMENU = "contextmenu", s.CLICK = "click", s.DBLCLICK = "dblclick", s))(M || {}), d = /* @__PURE__ */ ((s) => (s.BEFOREOPEN = "beforeopen", s.OPEN = "open", s.CLOSE = "close", s.ADD_MENU_ENTRY = "add-menu-entry", s))(d || {});
+class x extends D {
+  constructor(t) {
+    super(t.type, t.map, t.originalEvent);
+  }
+}
+const _ = {
   width: 150,
@@ -19,13 +25,13 @@ scrollAt: 4,
   items: []
-}, d = "ol-ctx-menu", a = {
-  namespace: d,
-  container: `${d}-container`,
-  separator: `${d}-separator`,
-  submenu: `${d}-submenu`,
-  hidden: `${d}-hidden`,
-  icon: `${d}-icon`,
-  zoomIn: `${d}-zoom-in`,
-  zoomOut: `${d}-zoom-out`,
+}, u = "ol-ctx-menu", a = {
+  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"
-}, x = [
+}, L = [
   {
@@ -56,3 +62,3 @@ text: "Zoom In",
 ];
-var w = { exports: {} };
+var C = { exports: {} };
 function b() {
@@ -84,3 +90,3 @@ }
     if (n && t)
-      for (var o = 0, l = n.length; o < l; o++)
+      for (var o = 0, c = n.length; o < c; o++)
         n[o].fn !== t && n[o].fn._ !== t && i.push(n[o]);
@@ -90,6 +96,6 @@ return i.length ? e[s] = i : delete e[s], this;
 };
-w.exports = b;
-var D = w.exports.TinyEmitter = b;
-const y = new D();
-function E(s) {
+C.exports = b;
+var I = C.exports.TinyEmitter = b;
+const E = new I();
+function g(s) {
   const t = document.createDocumentFragment(), e = document.createElement("div");
@@ -100,16 +106,16 @@ for (e.innerHTML = s; e.firstChild; )
 }
-function I(s) {
+function z(s) {
   const t = document.importNode(s), e = s.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 n = E("<span>Foo</span>"), i = E("<span>Foo</span>"), o = document.createElement("li"), l = document.createElement("li");
-  o.append(n), l.append(i), t.append(o), t.append(l), s.parentNode?.append(t);
-  const u = t.offsetHeight / 2;
-  return s.parentNode?.removeChild(t), u;
+  const n = g("<span>Foo</span>"), i = g("<span>Foo</span>"), o = document.createElement("li"), c = document.createElement("li");
+  o.append(n), c.append(i), t.append(o), t.append(c), s.parentNode?.append(t);
+  const p = t.offsetHeight / 2;
+  return s.parentNode?.removeChild(t), p;
 }
-function L(s, t, e = !1) {
+function w(s, t, e = !1) {
   const n = `_${Math.random().toString(36).slice(2, 11)}`;
   if (typeof t != "string" && "text" in t) {
-    const u = `<span>${t.text}</span>`, f = E(u), c = document.createElement("li");
-    return t.classname = t.classname || "", t.icon && (t.classname === "" ? t.classname = a.icon : t.classname.includes(a.icon) === !1 && (t.classname += ` ${a.icon}`), c.setAttribute("style", `background-image:url(${t.icon})`)), c.id = n, c.className = t.classname, c.append(f), s.append(c), y.emit(
-      p.ADD_MENU_ENTRY,
+    const p = `<span>${t.text}</span>`, f = g(p), l = document.createElement("li");
+    return t.classname = t.classname || "", t.icon && (t.classname === "" ? t.classname = a.icon : t.classname.includes(a.icon) === !1 && (t.classname += ` ${a.icon}`), l.setAttribute("style", `background-image:url(${t.icon})`)), l.id = n, l.className = t.classname, l.append(f), s.append(l), E.emit(
+      d.ADD_MENU_ENTRY,
       {
@@ -122,10 +128,10 @@ id: n,
       },
-      c
-    ), c;
+      l
+    ), l;
   }
-  const i = `<li id="${n}" class="${a.separator}"><hr></li>`, o = E(i);
+  const i = `<li id="${n}" class="${a.separator}"><hr></li>`, o = g(i);
   s.append(o);
-  const l = s.lastChild;
-  return y.emit(
-    p.ADD_MENU_ENTRY,
+  const c = s.lastChild;
+  return E.emit(
+    d.ADD_MENU_ENTRY,
     {
@@ -138,4 +144,4 @@ id: n,
     },
-    l
-  ), l;
+    c
+  ), c;
 }
@@ -145,3 +151,3 @@ function v(s, t, e) {
     if (typeof n != "string" && "items" in n && Array.isArray(n.items)) {
-      const i = L(s, n, !0);
+      const i = w(s, n, !0);
       i.classList.add(a.submenu);
@@ -151,12 +157,12 @@ const o = document.createElement("ul");
     } else
-      L(s, n);
+      w(s, n);
   });
 }
-function g(s, t) {
+function y(s, t) {
   if (!s)
     throw new Error(t);
 }
-class P extends T {
+class R extends O {
   constructor(e = {}) {
-    g(typeof e == "object", "@param `opts` should be object type!");
+    y(typeof e == "object", "@param `opts` should be object type!");
     const n = document.createElement("div");
@@ -177,3 +183,3 @@ super({ element: n });
     r(this, "options");
-    this.options = { ...O, ...e };
+    this.options = { ..._, ...e };
     const i = document.createElement("ul");
@@ -190,9 +196,3 @@ n.append(i), n.style.width = `${this.options.width}px`, n.classList.add(
       this.handleMapMove();
-    }, this.disabled = !1, this.opened = !1, y.on(
-      p.ADD_MENU_ENTRY,
-      (o, l) => {
-        this.handleAddMenuEntry(o, l);
-      },
-      this
-    );
+    }, this.disabled = !1, this.opened = !1;
   }
@@ -211,3 +211,3 @@ clear() {
   getDefaultItems() {
-    return x;
+    return L;
   }
@@ -218,3 +218,3 @@ countItems() {
   extend(e) {
-    g(Array.isArray(e), "@param `items` should be an Array."), v(
+    y(Array.isArray(e), "@param `items` should be an Array."), v(
       this.container.firstElementChild,
@@ -226,3 +226,3 @@ e,
   closeMenu() {
-    this.opened = !1, this.container.classList.add(a.hidden), this.dispatchEvent(p.CLOSE);
+    this.opened = !1, this.container.classList.add(a.hidden), this.dispatchEvent(d.CLOSE);
   }
@@ -233,3 +233,3 @@ isOpen() {
   updatePosition(e) {
-    g(Array.isArray(e), "@param `pixel` should be an Array."), this.isOpen() && (this.pixel = e, this.positionContainer());
+    y(Array.isArray(e), "@param `pixel` should be an Array."), this.isOpen() && (this.pixel = e, this.positionContainer());
   }
@@ -251,3 +251,9 @@ pop() {
         this.handleMapMove();
-      }), this.items = this.options.defaultItems ? this.options.items.concat(x) : this.options.items, v(
+      }), E.on(
+        d.ADD_MENU_ENTRY,
+        (i, o) => {
+          this.handleAddMenuEntry(i, o);
+        },
+        this
+      ), this.items = this.options.defaultItems ? this.options.items.concat(L) : this.options.items, v(
         this.container.firstElementChild,
@@ -258,3 +264,3 @@ this.items,
       const n = this.getMenuEntriesLength();
-      this.lineHeight = n > 0 ? this.container.offsetHeight / n : I(this.container);
+      this.lineHeight = n > 0 ? this.container.offsetHeight / n : z(this.container);
     } else
@@ -264,3 +270,3 @@ this.removeListeners(), this.clear();
   removeListeners() {
-    this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1);
+    this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1), E.off(d.ADD_MENU_ENTRY);
   }
@@ -272,7 +278,11 @@ removeMenuEntry(e) {
   handleContextMenu(e) {
-    this.coordinate = this.map.getEventCoordinate(e), this.pixel = this.map.getEventPixel(e), this.dispatchEvent({
-      type: p.BEFOREOPEN,
-      pixel: this.pixel,
-      coordinate: this.coordinate
-    }), !this.disabled && (this.options.eventType === M.CONTEXTMENU && (e.stopPropagation(), e.preventDefault()), this.openMenu(), e.target?.addEventListener(
+    this.coordinate = this.map.getEventCoordinate(e), this.pixel = this.map.getEventPixel(e), this.dispatchEvent(
+      new x({
+        type: d.BEFOREOPEN,
+        map: this.map,
+        originalEvent: e
+      })
+    ), !this.disabled && (this.options.eventType === M.CONTEXTMENU && (e.stopPropagation(), e.preventDefault()), setTimeout(() => {
+      this.openMenu(e);
+    }), e.target?.addEventListener(
       "pointerdown",
@@ -285,4 +295,10 @@ (n) => {
   }
-  openMenu() {
-    this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(a.hidden));
+  openMenu(e) {
+    this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(a.hidden), this.dispatchEvent(
+      new x({
+        type: d.OPEN,
+        map: this.map,
+        originalEvent: e
+      })
+    ));
   }
@@ -303,14 +319,14 @@ getMenuEntriesLength() {
     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 = (c) => Array.from(c.children).filter(
+    const c = (l) => Array.from(l.children).filter(
       (m) => m.tagName === "LI" && m.classList.contains(a.submenu)
     );
-    let u = 0;
-    const f = (c, m) => {
-      u += 1, l(c).forEach((C) => {
-        const A = m >= i.w ? i.w - 8 : (i.w + 8) * -1, h = C.querySelector(
+    let p = 0;
+    const f = (l, m) => {
+      p += 1, c(l).forEach((A) => {
+        const N = m >= i.w ? i.w - 8 : (i.w + 8) * -1, h = A.querySelector(
           `ul.${a.container}`
         ), $ = Math.round(
-          this.lineHeight * Array.from(h.children).filter((N) => N.tagName === "LI").length
+          this.lineHeight * Array.from(h.children).filter((S) => S.tagName === "LI").length
         );
-        h.style.left = `${A}px`, h.style.right = "auto", h.style.top = n.h >= $ + i.h ? "0" : `-${h.offsetHeight - 25}px`, h.style.bottom = "auto", h.style.zIndex = String(u), l(h).length > 0 && f(h, m - i.w);
+        h.style.left = `${N}px`, h.style.right = "auto", h.style.top = n.h >= $ + i.h ? "0" : `-${h.offsetHeight - 25}px`, h.style.bottom = "auto", h.style.zIndex = String(p), c(h).length > 0 && f(h, m - i.w);
       });
@@ -339,3 +355,3 @@ };
 export {
-  P as default
+  R as default
 };

dist/types.d.ts

 import type { Coordinate } from 'ol/coordinate';
-import type { Pixel } from 'ol/pixel';
-import { Map as OlMap } from 'ol';
-import BaseEvent from 'ol/events/Event';
+import { Map as OlMap, MapBrowserEvent } from 'ol';
 export declare enum EventTypes {
@@ -16,5 +14,8 @@ CONTEXTMENU = "contextmenu",
 }
-export interface ContextMenuEvent extends BaseEvent {
-    coordinate: Coordinate;
-    pixel: Pixel;
+export declare class ContextMenuEvent extends MapBrowserEvent<MouseEvent> {
+    constructor(options: {
+        type: `${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`;
+        map: OlMap;
+        originalEvent: MouseEvent;
+    });
 }
@@ -21,0 +22,0 @@ export declare type CallbackObject = {

package.json

 {
     "name": "ol-contextmenu",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "description": "Custom Context Menu for Openlayers",
@@ -48,20 +48,20 @@ "type": "module",
     "devDependencies": {
-        "@swc/core": "^1.3.3",
-        "@swc/jest": "^0.2.22",
-        "@types/jest": "^29.0.3",
-        "eslint": "^8.24.0",
+        "@swc/core": "^1.3.15",
+        "@swc/jest": "^0.2.23",
+        "@types/jest": "^29.2.2",
+        "eslint": "^8.27.0",
         "eslint-config-jwalker": "^7.9.2",
         "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-jest": "^27.0.4",
+        "eslint-plugin-jest": "^27.1.5",
         "eslint-plugin-prettier": "^4.2.1",
         "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.0.3",
-        "jest-environment-jsdom": "^29.0.3",
+        "jest": "^29.3.1",
+        "jest-environment-jsdom": "^29.3.1",
         "ol": "^7.1.0",
         "prettier": "^2.7.1",
         "rimraf": "^3.0.2",
-        "typescript": "^4.8.3",
-        "vite": "^3.1.3",
-        "vite-plugin-banner": "^0.5.0",
-        "vite-plugin-dts": "^1.5.0"
+        "typescript": "^4.8.4",
+        "vite": "^3.2.3",
+        "vite-plugin-banner": "^0.6.1",
+        "vite-plugin-dts": "^1.7.0"
     },
@@ -68,0 +68,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

47508

increased by5.26%

Lines of code

565

increased by5.61%

No dependency changes