ol-contextmenu 5.0.1-alpha → 5.0.1

package/README.md

@@ -1,24 +1,18 @@
 # OpenLayers Custom Context Menu
 
 <p align="center">
-  <a href="https://travis-ci.org/jonataswalker/ol-contextmenu">
-    <img src="https://travis-ci.org/jonataswalker/ol-contextmenu.svg?branch=master" alt="build status">
-  </a>
-  <a href="https://www.npmjs.com/package/ol-contextmenu">
-    <img src="https://img.shields.io/npm/v/ol-contextmenu.svg"
-      alt="npm version">
-  </a>
-  <a href="https://github.com/jonataswalker/ol-contextmenu/blob/master/LICENSE">
-    <img src="https://img.shields.io/npm/l/ol-contextmenu.svg"
-      alt="license">
-  </a>
-  <a href="https://david-dm.org/jonataswalker/ol-contextmenu">
-    <img src="https://david-dm.org/jonataswalker/ol-contextmenu/status.svg"
-      alt="dependency status">
-  </a>
-  <a href="https://david-dm.org/jonataswalker/ol-contextmenu">
-    <img src="https://david-dm.org/jonataswalker/ol-contextmenu/dev-status.svg" alt="devDependency status">
-  </a>
+    <a href="https://github.com/jonataswalker/ol-contextmenu/actions/workflows/test.yml">
+        <img src="https://github.com/jonataswalker/ol-contextmenu/actions/workflows/test.yml/badge.svg?branch=master" alt="Build Status">
+    </a>
+    <a href="https://www.npmjs.com/package/ol-contextmenu">
+        <img src="https://img.shields.io/npm/v/ol-contextmenu.svg" alt="npm version">
+    </a>
+    <a href="https://img.shields.io/npm/dm/ol-contextmenu">
+        <img alt="npm" src="https://img.shields.io/npm/dm/ol-contextmenu">
+    </a>
+    <a href="https://github.com/jonataswalker/ol-contextmenu/blob/master/LICENSE">
+        <img src="https://img.shields.io/npm/l/ol-contextmenu.svg" alt="license">
+    </a>
 </p>
 
 A `contextmenu` extension for [OpenLayers](http://openlayers.org/). **Requires** OpenLayers **v3.11.0** or higher.
@@ -26,48 +20,58 @@ A `contextmenu` extension for [OpenLayers](http://openlayers.org/). **Requires**
 ![contextmenu anim](https://raw.githubusercontent.com/jonataswalker/ol-contextmenu/screenshot/images/anim.gif)
 
 ## Demo
+
 You can see [here a demo](http://rawgit.com/jonataswalker/ol-contextmenu/master/examples/contextmenu.html) or [JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
 
 ## How to use it?
+
 ##### NPM
+
 `npm install ol-contextmenu`
 
 ##### CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/npm/ol-contextmenu)
+
 Load CSS and Javascript:
+
 ```HTML
-<link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/ol-contextmenu"></script>
 ```
 
 ##### CDN Hosted - UNPKG
+
 Load CSS and Javascript:
+
 ```HTML
-<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.min.css" rel="stylesheet">
+<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.css" rel="stylesheet">
 <script src="https://unpkg.com/ol-contextmenu"></script>
 ```
+
 ##### Self hosted
+
 Download [latest release](https://github.com/jonataswalker/ol-contextmenu/releases/latest) and (obviously) load CSS and Javascript.
 
 ##### Instantiate with some options and add the Control
+
 ```javascript
 var contextmenu = new ContextMenu({
-  width: 170,
-  defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out
-  items: [
-    {
-      text: 'Center map here',
-      classname: 'some-style-class', // add some CSS rules
-      callback: center // `center` is your callback function
-    },
-    {
-      text: 'Add a Marker',
-      classname: 'some-style-class', // you can add this icon with a CSS class
-                                     // instead of `icon` property (see next line)
-      icon: 'img/marker.png',  // this can be relative or absolute
-      callback: marker
-    },
-    '-' // this is a separator
-  ]
+    width: 170,
+    defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out
+    items: [
+        {
+            text: 'Center map here',
+            classname: 'some-style-class', // add some CSS rules
+            callback: center, // `center` is your callback function
+        },
+        {
+            text: 'Add a Marker',
+            classname: 'some-style-class', // you can add this icon with a CSS class
+            // instead of `icon` property (see next line)
+            icon: 'img/marker.png', // this can be relative or absolute
+            callback: marker,
+        },
+        '-', // this is a separator
+    ],
 });
 map.addControl(contextmenu);
 ```
@@ -78,55 +82,57 @@ If you provide `items {Array}` a submenu will be created as a child of the curre
 
 ```javascript
 var all_items = [
-  {
-    text: 'Some Actions',
-    items: [ // <== this is a submenu
-      {
-        text: 'Action 1',
-        callback: action
-      },
-      {
-        text: 'Other action',
-        callback: action2
-      }
-    ]
-  },
-  {
-    text: 'Add a Marker',
-    icon: 'img/marker.png',
-    callback: marker
-  },
-  '-' // this is a separator
+    {
+        text: 'Some Actions',
+        items: [
+            // <== this is a submenu
+            {
+                text: 'Action 1',
+                callback: action,
+            },
+            {
+                text: 'Other action',
+                callback: action2,
+            },
+        ],
+    },
+    {
+        text: 'Add a Marker',
+        icon: 'img/marker.png',
+        callback: marker,
+    },
+    '-', // this is a separator
 ];
 ```
 
 ##### Would you like to propagate custom data to the callback handler?
+
 ```javascript
 var removeMarker = function (obj) {
-  vectorLayer.getSource().removeFeature(obj.data.marker);
+    vectorLayer.getSource().removeFeature(obj.data.marker);
 };
 var removeMarkerItem = {
-  text: 'Remove this Marker',
-  icon: 'img/marker.png',
-  callback: removeMarker
+    text: 'Remove this Marker',
+    icon: 'img/marker.png',
+    callback: removeMarker,
 };
 
 var restore = false;
 contextmenu.on('open', function (evt) {
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
-    return ft;
-  });
-  if (feature) {
-    contextmenu.clear();
-    removeMarkerItem.data = { marker: feature };
-    contextmenu.push(removeMarkerItem);
-    restore = true;
-  } else if (restore) {
-    contextmenu.clear();
-    contextmenu.extend(contextmenu_items);
-    contextmenu.extend(contextmenu.getDefaultItems());
-    restore = false;
-  }
+    var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
+        return ft;
+    });
+    if (feature) {
+        contextmenu.clear();
+        removeMarkerItem.data = { marker: feature };
+        contextmenu.push(removeMarkerItem);
+        restore = true;
+    } else if (restore) {
+        contextmenu.clear();
+        contextmenu.extend(contextmenu_items);
+        contextmenu.extend(contextmenu.getDefaultItems());
+        restore = false;
+    }
 });
 ```
 
@@ -137,10 +143,11 @@ contextmenu.on('open', function (evt) {
 #### `new ContextMenu(options)`
 
 ###### `options` is an object with the following possible properties:
-* `eventType`: `contextmenu`; The listening event type (You could use `'click'`, `'dblclick'`)
-* `defaultItems`: `true`; Whether the default items (which are: Zoom In/Out) are enabled
-* `width`: `150`; The menu's width
-* `items`: `[]`; An array of object|string
+
+-   `eventType`: `contextmenu`; The listening event type (You could use `'click'`, `'dblclick'`)
+-   `defaultItems`: `true`; Whether the default items (which are: Zoom In/Out) are enabled
+-   `width`: `150`; The menu's width
+-   `items`: `[]`; An array of object|string
 
 ## Methods
 
@@ -159,17 +166,18 @@ Close the menu programmatically.
 Add items to the menu. This pushes each item in the provided array to the end of the menu.
 
 Example:
+
 ```js
 var contextmenu = new ContextMenu();
 map.addControl(contextmenu);
 
 var add_later = [
-  '-', // this is a separator
-  {
-    text: 'Add a Marker',
-    icon: 'img/marker.png',
-    callback: marker
-  }
+    '-', // this is a separator
+    {
+        text: 'Add a Marker',
+        icon: 'img/marker.png',
+        callback: marker,
+    },
 ];
 contextmenu.extend(add_later);
 ```
@@ -202,36 +210,36 @@ Whether the menu is open.
 
 Update menu's position.
 
-
 ## Events
 
 #### If you want to disable this plugin under certain circumstances, listen to `beforeopen`
 
 ```javascript
 contextmenu.on('beforeopen', function (evt) {
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
-    return ft;
-  });
-
-  if (feature) { // open only on features
-    contextmenu.enable();
-  } else {
-    contextmenu.disable();
-  }
+    var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
+        return ft;
+    });
+
+    if (feature) {
+        // open only on features
+        contextmenu.enable();
+    } else {
+        contextmenu.disable();
+    }
 });
 ```
 
 #### Listen and make some changes when context menu opens
 
 ```javascript
-contextmenu.on('open', function(evt){
-  var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
-    return ft;
-  });
-
-  if (feature) {
-    // add some other items to the menu
-  }
+contextmenu.on('open', function (evt) {
+    var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
+        return ft;
+    });
+
+    if (feature) {
+        // add some other items to the menu
+    }
 });
 ```
 
@@ -239,6 +247,6 @@ contextmenu.on('open', function(evt){
 
 ```javascript
 contextmenu.on('close', function (evt) {
-  // it's upon you
+    // it's upon you
 });
 ```

package/dist/constants.d.ts

@@ -0,0 +1,14 @@
+import { SingleItem, Options } from './types';
+export declare const DEFAULT_OPTIONS: Options;
+export declare const CSS_CLASSES: {
+    namespace: string;
+    container: string;
+    separator: string;
+    submenu: string;
+    hidden: string;
+    icon: string;
+    zoomIn: string;
+    zoomOut: string;
+    unselectable: string;
+};
+export declare const DEFAULT_ITEMS: SingleItem[];

package/dist/emitter.d.ts

@@ -0,0 +1,3 @@
+import { TinyEmitter } from 'tiny-emitter';
+declare const emitter: TinyEmitter;
+export default emitter;

package/dist/helpers/dom.d.ts

@@ -0,0 +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;

package/dist/main.d.ts

@@ -0,0 +1,43 @@
+import type { Pixel } from 'ol/pixel';
+import type { Coordinate } from 'ol/coordinate';
+import OlMap from 'ol/Map';
+import Control from 'ol/control/Control';
+import { Item, MenuEntry, Options } from './types';
+export default class ContextMenu extends Control {
+    protected map: OlMap;
+    protected container: HTMLDivElement;
+    protected coordinate: Coordinate;
+    protected pixel: Pixel;
+    protected contextMenuEventListener: (evt: MouseEvent) => void;
+    protected entryCallbackEventListener: (evt: MouseEvent) => void;
+    protected mapMoveListener: () => void;
+    protected lineHeight: number;
+    protected disabled: boolean;
+    protected opened: boolean;
+    protected items: Item[];
+    protected menuEntries: Map<string, MenuEntry>;
+    options: Options;
+    constructor(opts?: Partial<Options>);
+    clear(): void;
+    enable(): void;
+    disable(): void;
+    getDefaultItems(): import("./types").SingleItem[];
+    countItems(): number;
+    extend(items: Item[]): void;
+    closeMenu(): void;
+    isOpen(): boolean;
+    updatePosition(pixel: Pixel): void;
+    pop(): void;
+    shift(): void;
+    push(item: Item): void;
+    setMap(map: OlMap): void;
+    protected removeListeners(): void;
+    protected removeMenuEntry(id: string): void;
+    protected handleContextMenu(evt: MouseEvent): void;
+    protected openMenu(): void;
+    protected getMenuEntriesLength(): number;
+    protected positionContainer(): void;
+    protected handleMapMove(): void;
+    protected handleEntryCallback(evt: MouseEvent): void;
+    protected handleAddMenuEntry(item: MenuEntry, element: HTMLLIElement): void;
+}

package/dist/ol-contextmenu.d.ts

@@ -0,0 +1,3 @@
+export * from './main'
+import ContextMenu from './main'
+export default ContextMenu

package/dist/ol-contextmenu.js

@@ -1,6 +1,6 @@
 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 a = (s, t, e) => (k(s, typeof t != "symbol" ? t + "" : t, e), 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 = {
@@ -9,7 +9,7 @@ const O = {
   eventType: M.CONTEXTMENU,
   defaultItems: !0,
   items: []
-}, d = "ol-ctx-menu", r = {
+}, d = "ol-ctx-menu", a = {
   namespace: d,
   container: `${d}-container`,
   separator: `${d}-separator`,
@@ -22,7 +22,7 @@ const O = {
 }, x = [
   {
     text: "Zoom In",
-    classname: `${r.zoomIn} ${r.icon}`,
+    classname: `${a.zoomIn} ${a.icon}`,
     callback: (s, t) => {
       const e = t.getView();
       e.animate({
@@ -34,7 +34,7 @@ const O = {
   },
   {
     text: "Zoom Out",
-    classname: `${r.zoomOut} ${r.icon}`,
+    classname: `${a.zoomOut} ${a.icon}`,
     callback: (s, t) => {
       const e = t.getView();
       e.animate({
@@ -98,7 +98,7 @@ function L(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 = r.icon : t.classname.includes(r.icon) === !1 && (t.classname += ` ${r.icon}`), c.setAttribute("style", `background-image:url(${t.icon})`)), c.id = n, c.className = t.classname, c.append(f), s.append(c), y.emit(
+    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,
       {
         id: n,
@@ -110,7 +110,7 @@ function L(s, t, e = !1) {
       c
     ), c;
   }
-  const i = `<li id="${n}" class="${r.separator}"><hr></li>`, o = E(i);
+  const i = `<li id="${n}" class="${a.separator}"><hr></li>`, o = E(i);
   s.append(o);
   const l = s.lastChild;
   return y.emit(
@@ -129,9 +129,9 @@ function v(s, t, e) {
   t.forEach((n) => {
     if (typeof n != "string" && "items" in n && Array.isArray(n.items)) {
       const i = L(s, n, !0);
-      i.classList.add(r.submenu);
+      i.classList.add(a.submenu);
       const o = document.createElement("ul");
-      o.classList.add(r.container), o.style.width = `${e}px`, i.append(o), v(o, n.items, e);
+      o.classList.add(a.container), o.style.width = `${e}px`, i.append(o), v(o, n.items, e);
     } else
       L(s, n);
   });
@@ -140,30 +140,30 @@ function g(s, t) {
   if (!s)
     throw new Error(t);
 }
-class z extends T {
+class P extends T {
   constructor(e = {}) {
     g(typeof e == "object", "@param `opts` should be object type!");
     const n = document.createElement("div");
     super({ element: n });
-    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");
+    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", /* @__PURE__ */ new Map());
+    r(this, "options");
     this.options = { ...O, ...e };
     const i = document.createElement("ul");
     n.append(i), n.style.width = `${this.options.width}px`, n.classList.add(
-      r.container,
-      r.unselectable,
-      r.hidden
+      a.container,
+      a.unselectable,
+      a.hidden
     ), this.container = n, this.contextMenuEventListener = (o) => {
       this.handleContextMenu(o);
     }, this.entryCallbackEventListener = (o) => {
@@ -181,7 +181,7 @@ class z extends T {
   clear() {
     for (const e of this.menuEntries.keys())
       this.removeMenuEntry(e);
-    this.container.replaceChildren();
+    this.container.replaceChildren(), this.container.append(document.createElement("ul"));
   }
   enable() {
     this.disabled = !1;
@@ -203,7 +203,7 @@ class z extends T {
     );
   }
   closeMenu() {
-    this.opened = !1, this.container.classList.add(r.hidden), this.dispatchEvent(p.CLOSE);
+    this.opened = !1, this.container.classList.add(a.hidden), this.dispatchEvent(p.CLOSE);
   }
   isOpen() {
     return this.opened;
@@ -257,7 +257,7 @@ class z extends T {
     ));
   }
   openMenu() {
-    this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(r.hidden));
+    this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(a.hidden));
   }
   getMenuEntriesLength() {
     return Array.from(this.menuEntries).filter(
@@ -274,13 +274,13 @@ class z extends T {
     }, 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 = (c) => Array.from(c.children).filter(
-      (m) => m.tagName === "LI" && m.classList.contains(r.submenu)
+      (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(
-          `ul.${r.container}`
+          `ul.${a.container}`
         ), $ = Math.round(
           this.lineHeight * Array.from(h.children).filter((N) => N.tagName === "LI").length
         );
@@ -307,7 +307,6 @@ class z extends T {
     this.menuEntries.set(e.id, e), "callback" in e && typeof e.callback == "function" && n.addEventListener("click", this.entryCallbackEventListener, !1);
   }
 }
-window.ol?.control && (window.ol.control.ContextMenu = z);
 export {
-  z as default
+  P as default
 };

package/dist/ol-contextmenu.umd.cjs

@@ -1 +1 @@
-(function(l,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("ol/control/Control")):typeof define=="function"&&define.amd?define(["ol/control/Control"],c):(l=typeof globalThis<"u"?globalThis:l||self,l.ContextMenu=c(l.ol.control.Control))})(this,function(l){"use strict";var z=Object.defineProperty;var H=(l,c,f)=>c in l?z(l,c,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[c]=f;var a=(l,c,f)=>(H(l,typeof c!="symbol"?c+"":c,f),f);const f=(n=>n&&typeof n=="object"&&"default"in n?n:{default:n})(l);var M=(n=>(n.CONTEXTMENU="contextmenu",n.CLICK="click",n.DBLCLICK="dblclick",n))(M||{}),m=(n=>(n.BEFOREOPEN="beforeopen",n.OPEN="open",n.CLOSE="close",n.ADD_MENU_ENTRY="add-menu-entry",n))(m||{});const S={width:150,scrollAt:4,eventType:M.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`,unselectable:"ol-unselectable"},C=[{text:"Zoom In",classname:`${r.zoomIn} ${r.icon}`,callback:(n,i)=>{const e=i.getView();e.animate({zoom:Number(e.getZoom())+1,duration:700,center:n.coordinate})}},{text:"Zoom Out",classname:`${r.zoomOut} ${r.icon}`,callback:(n,i)=>{const e=i.getView();e.animate({zoom:Number(e.getZoom())-1,duration:700,center:n.coordinate})}}];var A={exports:{}};function x(){}x.prototype={on:function(n,i,e){var t=this.e||(this.e={});return(t[n]||(t[n]=[])).push({fn:i,ctx:e}),this},once:function(n,i,e){var t=this;function s(){t.off(n,s),i.apply(e,arguments)}return s._=i,this.on(n,s,e)},emit:function(n){var i=[].slice.call(arguments,1),e=((this.e||(this.e={}))[n]||[]).slice(),t=0,s=e.length;for(t;t<s;t++)e[t].fn.apply(e[t].ctx,i);return this},off:function(n,i){var e=this.e||(this.e={}),t=e[n],s=[];if(t&&i)for(var o=0,h=t.length;o<h;o++)t[o].fn!==i&&t[o].fn._!==i&&s.push(t[o]);return s.length?e[n]=s:delete e[n],this}},A.exports=x;var k=A.exports.TinyEmitter=x;const b=new k;function y(n){const i=document.createDocumentFragment(),e=document.createElement("div");for(e.innerHTML=n;e.firstChild;)i.append(e.firstChild);return i}function T(n){const i=document.importNode(n),e=n.offsetWidth;i.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>"),s=y("<span>Foo</span>"),o=document.createElement("li"),h=document.createElement("li");o.append(t),h.append(s),i.append(o),i.append(h),n.parentNode?.append(i);const E=i.offsetHeight/2;return n.parentNode?.removeChild(i),E}function $(n,i,e=!1){const t=`_${Math.random().toString(36).slice(2,11)}`;if(typeof i!="string"&&"text"in i){const E=`<span>${i.text}</span>`,v=y(E),u=document.createElement("li");return i.classname=i.classname||"",i.icon&&(i.classname===""?i.classname=r.icon:i.classname.includes(r.icon)===!1&&(i.classname+=` ${r.icon}`),u.setAttribute("style",`background-image:url(${i.icon})`)),u.id=t,u.className=i.classname,u.append(v),n.append(u),b.emit(m.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!1,callback:"callback"in i?i.callback:null,data:"data"in i?i.data:null},u),u}const s=`<li id="${t}" class="${r.separator}"><hr></li>`,o=y(s);n.append(o);const h=n.lastChild;return b.emit(m.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!0,callback:null,data:null},h),h}function L(n,i,e){i.forEach(t=>{if(typeof t!="string"&&"items"in t&&Array.isArray(t.items)){const s=$(n,t,!0);s.classList.add(r.submenu);const o=document.createElement("ul");o.classList.add(r.container),o.style.width=`${e}px`,s.append(o),L(o,t.items,e)}else $(n,t)})}const P="";function w(n,i){if(!n)throw new Error(i)}class N extends f.default{constructor(e={}){w(typeof e=="object","@param `opts` should be object type!");const t=document.createElement("div");super({element:t});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={...S,...e};const s=document.createElement("ul");t.append(s),t.style.width=`${this.options.width}px`,t.classList.add(r.container,r.unselectable,r.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,b.on(m.ADD_MENU_ENTRY,(o,h)=>{this.handleAddMenuEntry(o,h)},this)}clear(){for(const e of this.menuEntries.keys())this.removeMenuEntry(e);this.container.replaceChildren()}enable(){this.disabled=!1}disable(){this.disabled=!0}getDefaultItems(){return C}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(r.hidden),this.dispatchEvent(m.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()}),this.items=this.options.defaultItems?this.options.items.concat(C):this.options.items,L(this.container.firstElementChild,this.items,this.options.width);const t=this.getMenuEntriesLength();this.lineHeight=t>0?this.container.offsetHeight/t:T(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:m.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(r.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]},s={w:this.container.offsetWidth,h:Math.round(this.lineHeight*this.getMenuEntriesLength())},o=t.w>=s.w?this.pixel[0]+5:this.pixel[0]-s.w;this.container.style.left=`${o}px`,this.container.style.top=t.h>=s.h?`${this.pixel[1]-10}px`:`${this.pixel[1]-s.h}px`,this.container.style.right="auto",this.container.style.bottom="auto",t.w-=s.w;const h=u=>Array.from(u.children).filter(g=>g.tagName==="LI"&&g.classList.contains(r.submenu));let E=0;const v=(u,g)=>{E+=1,h(u).forEach(_=>{const D=g>=s.w?s.w-8:(s.w+8)*-1,d=_.querySelector(`ul.${r.container}`),O=Math.round(this.lineHeight*Array.from(d.children).filter(I=>I.tagName==="LI").length);d.style.left=`${D}px`,d.style.right="auto",d.style.top=t.h>=O+s.h?"0":`-${d.offsetHeight-25}px`,d.style.bottom="auto",d.style.zIndex=String(E),h(d).length>0&&v(d,g-s.w)})};v(this.container.firstElementChild,t.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(e){e.preventDefault(),e.stopPropagation();const t=e.currentTarget,s=this.menuEntries.get(t.id);if(!s)return;const o={coordinate:this.coordinate,data:s.data};this.closeMenu(),s.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 window.ol?.control&&(window.ol.control.ContextMenu=N),N});
+(function(l,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("ol/control/Control")):typeof define=="function"&&define.amd?define(["ol/control/Control"],c):(l=typeof globalThis<"u"?globalThis:l||self,l.ContextMenu=c(l.ol.control.Control))})(this,function(l){"use strict";var z=Object.defineProperty;var H=(l,c,f)=>c in l?z(l,c,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[c]=f;var a=(l,c,f)=>(H(l,typeof c!="symbol"?c+"":c,f),f);const f=(n=>n&&typeof n=="object"&&"default"in n?n:{default:n})(l);var M=(n=>(n.CONTEXTMENU="contextmenu",n.CLICK="click",n.DBLCLICK="dblclick",n))(M||{}),m=(n=>(n.BEFOREOPEN="beforeopen",n.OPEN="open",n.CLOSE="close",n.ADD_MENU_ENTRY="add-menu-entry",n))(m||{});const N={width:150,scrollAt:4,eventType:M.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`,unselectable:"ol-unselectable"},w=[{text:"Zoom In",classname:`${r.zoomIn} ${r.icon}`,callback:(n,i)=>{const e=i.getView();e.animate({zoom:Number(e.getZoom())+1,duration:700,center:n.coordinate})}},{text:"Zoom Out",classname:`${r.zoomOut} ${r.icon}`,callback:(n,i)=>{const e=i.getView();e.animate({zoom:Number(e.getZoom())-1,duration:700,center:n.coordinate})}}];var A={exports:{}};function b(){}b.prototype={on:function(n,i,e){var t=this.e||(this.e={});return(t[n]||(t[n]=[])).push({fn:i,ctx:e}),this},once:function(n,i,e){var t=this;function s(){t.off(n,s),i.apply(e,arguments)}return s._=i,this.on(n,s,e)},emit:function(n){var i=[].slice.call(arguments,1),e=((this.e||(this.e={}))[n]||[]).slice(),t=0,s=e.length;for(t;t<s;t++)e[t].fn.apply(e[t].ctx,i);return this},off:function(n,i){var e=this.e||(this.e={}),t=e[n],s=[];if(t&&i)for(var o=0,h=t.length;o<h;o++)t[o].fn!==i&&t[o].fn._!==i&&s.push(t[o]);return s.length?e[n]=s:delete e[n],this}},A.exports=b;var S=A.exports.TinyEmitter=b;const x=new S;function y(n){const i=document.createDocumentFragment(),e=document.createElement("div");for(e.innerHTML=n;e.firstChild;)i.append(e.firstChild);return i}function k(n){const i=document.importNode(n),e=n.offsetWidth;i.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>"),s=y("<span>Foo</span>"),o=document.createElement("li"),h=document.createElement("li");o.append(t),h.append(s),i.append(o),i.append(h),n.parentNode?.append(i);const E=i.offsetHeight/2;return n.parentNode?.removeChild(i),E}function $(n,i,e=!1){const t=`_${Math.random().toString(36).slice(2,11)}`;if(typeof i!="string"&&"text"in i){const E=`<span>${i.text}</span>`,v=y(E),u=document.createElement("li");return i.classname=i.classname||"",i.icon&&(i.classname===""?i.classname=r.icon:i.classname.includes(r.icon)===!1&&(i.classname+=` ${r.icon}`),u.setAttribute("style",`background-image:url(${i.icon})`)),u.id=t,u.className=i.classname,u.append(v),n.append(u),x.emit(m.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!1,callback:"callback"in i?i.callback:null,data:"data"in i?i.data:null},u),u}const s=`<li id="${t}" class="${r.separator}"><hr></li>`,o=y(s);n.append(o);const h=n.lastChild;return x.emit(m.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!0,callback:null,data:null},h),h}function L(n,i,e){i.forEach(t=>{if(typeof t!="string"&&"items"in t&&Array.isArray(t.items)){const s=$(n,t,!0);s.classList.add(r.submenu);const o=document.createElement("ul");o.classList.add(r.container),o.style.width=`${e}px`,s.append(o),L(o,t.items,e)}else $(n,t)})}const P="";function C(n,i){if(!n)throw new Error(i)}class T extends f.default{constructor(e={}){C(typeof e=="object","@param `opts` should be object type!");const t=document.createElement("div");super({element:t});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={...N,...e};const s=document.createElement("ul");t.append(s),t.style.width=`${this.options.width}px`,t.classList.add(r.container,r.unselectable,r.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(m.ADD_MENU_ENTRY,(o,h)=>{this.handleAddMenuEntry(o,h)},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(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()}),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:m.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(r.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]},s={w:this.container.offsetWidth,h:Math.round(this.lineHeight*this.getMenuEntriesLength())},o=t.w>=s.w?this.pixel[0]+5:this.pixel[0]-s.w;this.container.style.left=`${o}px`,this.container.style.top=t.h>=s.h?`${this.pixel[1]-10}px`:`${this.pixel[1]-s.h}px`,this.container.style.right="auto",this.container.style.bottom="auto",t.w-=s.w;const h=u=>Array.from(u.children).filter(g=>g.tagName==="LI"&&g.classList.contains(r.submenu));let E=0;const v=(u,g)=>{E+=1,h(u).forEach(_=>{const D=g>=s.w?s.w-8:(s.w+8)*-1,d=_.querySelector(`ul.${r.container}`),O=Math.round(this.lineHeight*Array.from(d.children).filter(I=>I.tagName==="LI").length);d.style.left=`${D}px`,d.style.right="auto",d.style.top=t.h>=O+s.h?"0":`-${d.offsetHeight-25}px`,d.style.bottom="auto",d.style.zIndex=String(E),h(d).length>0&&v(d,g-s.w)})};v(this.container.firstElementChild,t.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(e){e.preventDefault(),e.stopPropagation();const t=e.currentTarget,s=this.menuEntries.get(t.id);if(!s)return;const o={coordinate:this.coordinate,data:s.data};this.closeMenu(),s.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});

package/dist/types.d.ts

@@ -0,0 +1,52 @@
+import type { Coordinate } from 'ol/coordinate';
+import type { Pixel } from 'ol/pixel';
+import { Map as OlMap } from 'ol';
+import BaseEvent from 'ol/events/Event';
+export declare enum EventTypes {
+    CONTEXTMENU = "contextmenu",
+    CLICK = "click",
+    DBLCLICK = "dblclick"
+}
+export declare enum CustomEventTypes {
+    BEFOREOPEN = "beforeopen",
+    OPEN = "open",
+    CLOSE = "close",
+    ADD_MENU_ENTRY = "add-menu-entry"
+}
+export interface ContextMenuEvent extends BaseEvent {
+    coordinate: Coordinate;
+    pixel: Pixel;
+}
+export declare type CallbackObject = {
+    coordinate: Coordinate;
+    data: unknown;
+};
+export declare type ItemSeparator = '-';
+export declare type SingleItem = {
+    text: string;
+    classname?: string;
+    icon?: string;
+    callback: (object: CallbackObject, map: OlMap) => void;
+    data?: unknown;
+};
+export declare type MenuEntry = {
+    id: string;
+    isSubmenu: boolean;
+    isSeparator: boolean;
+    callback: SingleItem['callback'] | null;
+    data: unknown;
+};
+export declare type ItemWithNested = {
+    text: string;
+    classname?: string;
+    icon?: string;
+    items: Item[];
+};
+export declare type Item = SingleItem | ItemSeparator | ItemWithNested;
+export declare type Options = {
+    width: number;
+    scrollAt: number;
+    eventType: `${EventTypes}`;
+    defaultItems: boolean;
+    items: Item[];
+};

package/dist/vite-env.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ol-contextmenu",
-    "version": "5.0.1-alpha",
+    "version": "5.0.1",
     "description": "Custom Context Menu for Openlayers",
     "type": "module",
     "main": "./dist/ol-contextmenu.umd.cjs",
@@ -8,9 +8,17 @@
     "exports": {
         ".": {
             "import": "./dist/ol-contextmenu.js",
-            "require": "./dist/ol-contextmenu.umd.cjs"
+            "require": "./dist/ol-contextmenu.umd.cjs",
+            "types": "./dist/ol-contextmenu.d.ts"
+        },
+        "./ol-contextmenu.css": {
+            "import": "./dist/ol-contextmenu.css",
+            "require": "./dist/ol-contextmenu.css"
         }
     },
+    "files": [
+        "./dist"
+    ],
     "types": "./dist/ol-contextmenu.d.ts",
     "author": "Jonatas Walker",
     "homepage": "https://github.com/jonataswalker/ol-contextmenu",
@@ -26,24 +34,19 @@
         "node": "^16 || ^18",
         "npm": ">=8"
     },
-    "files": [
-        "dist/"
-    ],
     "scripts": {
         "dev": "vite",
-        "build": "npm run generate-types && tsc && vite build",
+        "build": "rimraf ./dist && vite build",
         "preview": "vite preview",
         "lint": "eslint --cache --ext .js .",
         "lint:fix": "npm run lint -- --fix",
-        "generate-types": "tsc src/**/*.ts --declaration --declarationMap --emitDeclarationOnly --outdir dist",
-        "test": "jest"
+        "test": "jest",
+        "prepublishOnly": "npm run lint && npm test && npm run build"
     },
     "devDependencies": {
-        "@swc/core": "^1.3.0",
+        "@swc/core": "^1.3.2",
         "@swc/jest": "^0.2.22",
-        "@types/jest": "^29.0.2",
-        "@vitejs/plugin-legacy": "^2.1.0",
-        "canvas": "^2.10.1",
+        "@types/jest": "^29.0.3",
         "eslint": "^8.23.1",
         "eslint-config-jwalker": "^7.9.2",
         "eslint-config-prettier": "^8.5.0",
@@ -54,8 +57,10 @@
         "jest-environment-jsdom": "^29.0.3",
         "ol": "^7.1.0",
         "prettier": "^2.7.1",
+        "rimraf": "^3.0.2",
         "typescript": "^4.8.3",
-        "vite": "^3.1.0"
+        "vite": "^3.1.3",
+        "vite-plugin-dts": "^1.5.0"
     },
     "peerDependencies": {
         "ol": "^7.1.0"