ol-contextmenu 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ol-contextmenu.js +30 -31
- package/dist/ol-contextmenu.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/ol-contextmenu.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var S = Object.defineProperty;
|
|
2
2
|
var k = (s, t, e) => t in s ? S(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
|
|
3
|
-
var
|
|
3
|
+
var r = (s, t, e) => (k(s, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
4
|
import T from "ol/control/Control";
|
|
5
5
|
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 || {});
|
|
6
6
|
const O = {
|
|
@@ -9,7 +9,7 @@ const O = {
|
|
|
9
9
|
eventType: M.CONTEXTMENU,
|
|
10
10
|
defaultItems: !0,
|
|
11
11
|
items: []
|
|
12
|
-
}, d = "ol-ctx-menu",
|
|
12
|
+
}, d = "ol-ctx-menu", a = {
|
|
13
13
|
namespace: d,
|
|
14
14
|
container: `${d}-container`,
|
|
15
15
|
separator: `${d}-separator`,
|
|
@@ -22,7 +22,7 @@ const O = {
|
|
|
22
22
|
}, x = [
|
|
23
23
|
{
|
|
24
24
|
text: "Zoom In",
|
|
25
|
-
classname: `${
|
|
25
|
+
classname: `${a.zoomIn} ${a.icon}`,
|
|
26
26
|
callback: (s, t) => {
|
|
27
27
|
const e = t.getView();
|
|
28
28
|
e.animate({
|
|
@@ -34,7 +34,7 @@ const O = {
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
text: "Zoom Out",
|
|
37
|
-
classname: `${
|
|
37
|
+
classname: `${a.zoomOut} ${a.icon}`,
|
|
38
38
|
callback: (s, t) => {
|
|
39
39
|
const e = t.getView();
|
|
40
40
|
e.animate({
|
|
@@ -98,7 +98,7 @@ function L(s, t, e = !1) {
|
|
|
98
98
|
const n = `_${Math.random().toString(36).slice(2, 11)}`;
|
|
99
99
|
if (typeof t != "string" && "text" in t) {
|
|
100
100
|
const u = `<span>${t.text}</span>`, f = E(u), c = document.createElement("li");
|
|
101
|
-
return t.classname = t.classname || "", t.icon && (t.classname === "" ? t.classname =
|
|
101
|
+
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(
|
|
102
102
|
p.ADD_MENU_ENTRY,
|
|
103
103
|
{
|
|
104
104
|
id: n,
|
|
@@ -110,7 +110,7 @@ function L(s, t, e = !1) {
|
|
|
110
110
|
c
|
|
111
111
|
), c;
|
|
112
112
|
}
|
|
113
|
-
const i = `<li id="${n}" class="${
|
|
113
|
+
const i = `<li id="${n}" class="${a.separator}"><hr></li>`, o = E(i);
|
|
114
114
|
s.append(o);
|
|
115
115
|
const l = s.lastChild;
|
|
116
116
|
return y.emit(
|
|
@@ -129,9 +129,9 @@ function v(s, t, e) {
|
|
|
129
129
|
t.forEach((n) => {
|
|
130
130
|
if (typeof n != "string" && "items" in n && Array.isArray(n.items)) {
|
|
131
131
|
const i = L(s, n, !0);
|
|
132
|
-
i.classList.add(
|
|
132
|
+
i.classList.add(a.submenu);
|
|
133
133
|
const o = document.createElement("ul");
|
|
134
|
-
o.classList.add(
|
|
134
|
+
o.classList.add(a.container), o.style.width = `${e}px`, i.append(o), v(o, n.items, e);
|
|
135
135
|
} else
|
|
136
136
|
L(s, n);
|
|
137
137
|
});
|
|
@@ -140,30 +140,30 @@ function g(s, t) {
|
|
|
140
140
|
if (!s)
|
|
141
141
|
throw new Error(t);
|
|
142
142
|
}
|
|
143
|
-
class
|
|
143
|
+
class P extends T {
|
|
144
144
|
constructor(e = {}) {
|
|
145
145
|
g(typeof e == "object", "@param `opts` should be object type!");
|
|
146
146
|
const n = document.createElement("div");
|
|
147
147
|
super({ element: n });
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
148
|
+
r(this, "map");
|
|
149
|
+
r(this, "container");
|
|
150
|
+
r(this, "coordinate", []);
|
|
151
|
+
r(this, "pixel", []);
|
|
152
|
+
r(this, "contextMenuEventListener");
|
|
153
|
+
r(this, "entryCallbackEventListener");
|
|
154
|
+
r(this, "mapMoveListener");
|
|
155
|
+
r(this, "lineHeight", 0);
|
|
156
|
+
r(this, "disabled");
|
|
157
|
+
r(this, "opened");
|
|
158
|
+
r(this, "items", []);
|
|
159
|
+
r(this, "menuEntries", /* @__PURE__ */ new Map());
|
|
160
|
+
r(this, "options");
|
|
161
161
|
this.options = { ...O, ...e };
|
|
162
162
|
const i = document.createElement("ul");
|
|
163
163
|
n.append(i), n.style.width = `${this.options.width}px`, n.classList.add(
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
164
|
+
a.container,
|
|
165
|
+
a.unselectable,
|
|
166
|
+
a.hidden
|
|
167
167
|
), this.container = n, this.contextMenuEventListener = (o) => {
|
|
168
168
|
this.handleContextMenu(o);
|
|
169
169
|
}, this.entryCallbackEventListener = (o) => {
|
|
@@ -203,7 +203,7 @@ class z extends T {
|
|
|
203
203
|
);
|
|
204
204
|
}
|
|
205
205
|
closeMenu() {
|
|
206
|
-
this.opened = !1, this.container.classList.add(
|
|
206
|
+
this.opened = !1, this.container.classList.add(a.hidden), this.dispatchEvent(p.CLOSE);
|
|
207
207
|
}
|
|
208
208
|
isOpen() {
|
|
209
209
|
return this.opened;
|
|
@@ -257,7 +257,7 @@ class z extends T {
|
|
|
257
257
|
));
|
|
258
258
|
}
|
|
259
259
|
openMenu() {
|
|
260
|
-
this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(
|
|
260
|
+
this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(a.hidden));
|
|
261
261
|
}
|
|
262
262
|
getMenuEntriesLength() {
|
|
263
263
|
return Array.from(this.menuEntries).filter(
|
|
@@ -274,13 +274,13 @@ class z extends T {
|
|
|
274
274
|
}, o = n.w >= i.w ? this.pixel[0] + 5 : this.pixel[0] - i.w;
|
|
275
275
|
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;
|
|
276
276
|
const l = (c) => Array.from(c.children).filter(
|
|
277
|
-
(m) => m.tagName === "LI" && m.classList.contains(
|
|
277
|
+
(m) => m.tagName === "LI" && m.classList.contains(a.submenu)
|
|
278
278
|
);
|
|
279
279
|
let u = 0;
|
|
280
280
|
const f = (c, m) => {
|
|
281
281
|
u += 1, l(c).forEach((C) => {
|
|
282
282
|
const A = m >= i.w ? i.w - 8 : (i.w + 8) * -1, h = C.querySelector(
|
|
283
|
-
`ul.${
|
|
283
|
+
`ul.${a.container}`
|
|
284
284
|
), $ = Math.round(
|
|
285
285
|
this.lineHeight * Array.from(h.children).filter((N) => N.tagName === "LI").length
|
|
286
286
|
);
|
|
@@ -307,7 +307,6 @@ class z extends T {
|
|
|
307
307
|
this.menuEntries.set(e.id, e), "callback" in e && typeof e.callback == "function" && n.addEventListener("click", this.entryCallbackEventListener, !1);
|
|
308
308
|
}
|
|
309
309
|
}
|
|
310
|
-
window.ol?.control && (window.ol.control.ContextMenu = z);
|
|
311
310
|
export {
|
|
312
|
-
|
|
311
|
+
P as default
|
|
313
312
|
};
|
|
@@ -1 +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
|
|
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 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});
|