ol-contextmenu
Version:
Custom Context Menu for Openlayers
384 lines (381 loc) • 17.1 kB
JavaScript
/*!
* ol-contextmenu - v6.0.0
* https://github.com/jonataswalker/ol-contextmenu
* Built: 2026-01-05T22:44:21.378Z
*/
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.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,#0000,#000000bf,#0000)}.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)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
var D = Object.defineProperty;
var S = (o, i, t) => i in o ? D(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
var c = (o, i, t) => S(o, typeof i != "symbol" ? i + "" : i, t);
import P from "ol/control/Control";
import k from "ol/MapBrowserEvent";
var y = { exports: {} }, w;
function H() {
if (w) return y.exports;
w = 1;
function o() {
}
return o.prototype = {
on: function(i, t, e) {
var s = this.e || (this.e = {});
return (s[i] || (s[i] = [])).push({
fn: t,
ctx: e
}), this;
},
once: function(i, t, e) {
var s = this;
function n() {
s.off(i, n), t.apply(e, arguments);
}
return n._ = t, this.on(i, n, e);
},
emit: function(i) {
var t = [].slice.call(arguments, 1), e = ((this.e || (this.e = {}))[i] || []).slice(), s = 0, n = e.length;
for (s; s < n; s++)
e[s].fn.apply(e[s].ctx, t);
return this;
},
off: function(i, t) {
var e = this.e || (this.e = {}), s = e[i], n = [];
if (s && t)
for (var a = 0, h = s.length; a < h; a++)
s[a].fn !== t && s[a].fn._ !== t && n.push(s[a]);
return n.length ? e[i] = n : delete e[i], this;
}
}, y.exports = o, y.exports.TinyEmitter = o, y.exports;
}
var R = H(), L = /* @__PURE__ */ ((o) => (o.CONTEXTMENU = "contextmenu", o.CLICK = "click", o.DBLCLICK = "dblclick", o))(L || {}), d = /* @__PURE__ */ ((o) => (o.BEFOREOPEN = "beforeopen", o.OPEN = "open", o.CLOSE = "close", o.ADD_MENU_ENTRY = "add-menu-entry", o))(d || {});
class A extends k {
constructor(i) {
super(i.type, i.map, i.originalEvent);
}
}
const U = {
defaultItems: !0,
eventType: L.CONTEXTMENU,
items: [],
scrollAt: 4,
width: 150
}, p = "ol-ctx-menu", r = {
container: `${p}-container`,
hidden: `${p}-hidden`,
icon: `${p}-icon`,
separator: `${p}-separator`,
submenu: `${p}-submenu`,
unselectable: "ol-unselectable",
zoomIn: `${p}-zoom-in`,
zoomOut: `${p}-zoom-out`
}, F = 8, V = F * 2, B = 10, M = 2, C = [
{
callback: (o, i) => {
const t = i.getView();
t.animate({
center: o.coordinate,
duration: 700,
zoom: Number(t.getZoom()) + 1
});
},
classname: `${r.zoomIn} ${r.icon}`,
text: "Zoom In"
},
{
callback: (o, i) => {
const t = i.getView();
t.animate({
center: o.coordinate,
duration: 700,
zoom: Number(t.getZoom()) - 1
});
},
classname: `${r.zoomOut} ${r.icon}`,
text: "Zoom Out"
}
];
function v(o) {
const i = document.createDocumentFragment(), t = document.createElement("div");
for (t.innerHTML = o; t.firstChild; )
i.append(t.firstChild);
return i;
}
function j(o) {
const i = document.importNode(o), t = o.offsetWidth;
i.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 = v("<span>Foo</span>"), s = v("<span>Foo</span>"), n = document.createElement("li"), a = document.createElement("li");
n.append(e), a.append(s), i.append(n), i.append(a), o.parentNode?.append(i);
const h = i.offsetHeight / 2;
return o.parentNode?.removeChild(i), h;
}
function T({
emitter: o,
isInsideSubmenu: i = !1,
isSubmenu: t = !1,
item: e,
parentNode: s
}) {
const n = `_${Math.random().toString(36).slice(2, 11)}`;
if (typeof e != "string" && "text" in e) {
const g = `<span>${e.text}</span>`, f = v(g), l = document.createElement("li");
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(f), s.append(l);
const N = {
callback: "callback" in e ? e.callback : null,
data: "data" in e ? e.data : null,
id: n,
isInsideSubmenu: i,
isSeparator: !1,
isSubmenu: t
};
return o.emit(d.ADD_MENU_ENTRY, N, l), l;
}
const a = `<li id="${n}" class="${r.separator}"><hr></li>`, h = v(a);
s.append(h);
const m = s.lastChild, E = {
callback: null,
data: null,
id: n,
isInsideSubmenu: !1,
isSeparator: !0,
isSubmenu: !1
};
return o.emit(d.ADD_MENU_ENTRY, E, m), m;
}
function x({
container: o,
emitter: i,
isInsideSubmenu: t,
items: e,
menuWidth: s
}) {
e.forEach((n) => {
if (typeof n != "string" && "items" in n && Array.isArray(n.items)) {
const a = T({ emitter: i, isSubmenu: !0, item: n, parentNode: o });
a.classList.add(r.submenu);
const h = document.createElement("ul");
h.classList.add(r.container), h.style.width = `${s}px`, a.append(h), x({
container: h,
emitter: i,
isInsideSubmenu: !0,
items: n.items,
menuWidth: s
});
} else
T({
emitter: i,
isInsideSubmenu: t,
isSubmenu: !1,
item: n,
parentNode: o
});
});
}
function b(o, i) {
if (!o) throw new Error(i);
}
class X extends P {
constructor(t = {}) {
b(typeof t == "object", "@param `opts` should be object type!");
const e = document.createElement("div");
super({ element: e });
c(this, "map");
c(this, "emitter", new R.TinyEmitter());
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");
e.append(s), e.style.width = `${this.options.width}px`, e.classList.add(
r.container,
r.unselectable,
r.hidden
), this.container = e, this.contextMenuEventListener = (n) => {
this.handleContextMenu(n);
}, this.entryCallbackEventListener = (n) => {
this.handleEntryCallback(n);
}, this.mapMoveListener = () => {
this.handleMapMove();
}, this.disabled = !1, this.opened = !1, window.addEventListener(
"beforeunload",
() => {
this.removeListeners();
},
{ once: !0 }
);
}
clear() {
for (const t of this.menuEntries.keys())
this.removeMenuEntry(t);
this.container.replaceChildren(), this.container.append(document.createElement("ul"));
}
enable() {
this.disabled = !1;
}
disable() {
this.disabled = !0;
}
getDefaultItems() {
return C;
}
countItems() {
return this.menuEntries.size;
}
extend(t) {
b(Array.isArray(t), "@param `items` should be an Array."), x({
container: this.container.firstElementChild,
emitter: this.emitter,
items: t,
menuWidth: this.options.width
});
}
closeMenu() {
this.opened = !1, this.container.classList.add(r.hidden), this.dispatchEvent(d.CLOSE);
}
isOpen() {
return this.opened;
}
updatePosition(t) {
b(Array.isArray(t), "@param `pixel` should be an Array."), this.isOpen() && (this.pixel = t, this.positionContainer());
}
pop() {
const t = Array.from(this.menuEntries.keys()).pop();
t && this.removeMenuEntry(t);
}
shift() {
const t = Array.from(this.menuEntries.keys()).shift();
t && this.removeMenuEntry(t);
}
push(t) {
t && this.extend([t]);
}
setMap(t) {
if (super.setMap(t), t) {
this.map = t, t.getViewport().addEventListener(
this.options.eventType,
this.contextMenuEventListener,
!1
), t.on("movestart", () => {
this.handleMapMove();
}), this.emitter.on(
d.ADD_MENU_ENTRY,
(s, n) => {
this.handleAddMenuEntry(s, n);
},
this
), this.items = this.options.defaultItems ? this.options.items.concat(C) : this.options.items, x({
container: this.container.firstElementChild,
emitter: this.emitter,
items: this.items,
menuWidth: this.options.width
});
const e = this.getMenuEntriesLength();
this.lineHeight = e > 0 ? this.container.offsetHeight / e : j(this.container);
} else
this.removeListeners(), this.clear();
}
removeListeners() {
this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1), this.emitter.off(d.ADD_MENU_ENTRY);
}
removeMenuEntry(t) {
let e = document.getElementById(t);
e?.remove(), e = null, this.menuEntries.delete(t);
}
handleContextMenu(t) {
this.coordinate = this.map.getEventCoordinate(t), this.pixel = this.map.getEventPixel(t), this.dispatchEvent(
new A({
map: this.map,
originalEvent: t,
type: d.BEFOREOPEN
})
), !this.disabled && (this.options.eventType === L.CONTEXTMENU && (t.stopPropagation(), t.preventDefault()), setTimeout(() => {
this.openMenu(t);
}), t.target?.addEventListener(
"pointerdown",
(e) => {
this.opened && (e.stopPropagation(), this.closeMenu());
},
{ once: !0 }
));
}
openMenu(t) {
this.opened = !0, this.positionContainer(), this.container.classList.remove(r.hidden), this.dispatchEvent(
new A({
map: this.map,
originalEvent: t,
type: d.OPEN
})
);
}
getMenuEntriesLength() {
return Array.from(this.menuEntries).filter(
([, t]) => t.isSeparator === !1 && t.isSubmenu === !1 && t.isInsideSubmenu === !1
).length;
}
calculateMenuSize() {
const t = this.getMenuEntriesLength(), s = Math.round(this.lineHeight * t) + V, n = this.container.offsetHeight, a = !this.container.classList.contains(r.hidden);
return {
h: n > 0 && a ? n : s,
w: this.container.offsetWidth
};
}
calculateVerticalPosition(t, e, s) {
let n;
return e.h >= s.h ? (n = this.pixel[1] - B, n + s.h > t[1] && (n = Math.max(0, t[1] - s.h - M))) : (n = this.pixel[1] - s.h, n < 0 && (n = s.h <= t[1] ? 0 : Math.max(0, t[1] - s.h)), n + s.h > t[1] && (n = Math.max(0, t[1] - s.h - M))), Math.max(0, Math.min(n, t[1] - s.h - M));
}
adjustPositionAfterRender(t, e) {
if (!this.container.classList.contains(r.hidden)) {
const s = this.container.offsetHeight;
s > 0 && s !== e.h && (Number.parseInt(this.container.style.top, 10) || 0) + s > t[1] && (this.container.style.top = `${Math.max(0, t[1] - s - M)}px`);
}
}
positionContainer() {
const t = this.map.getSize() || [0, 0], e = [t[0] || 0, t[1] || 0], s = {
h: e[1] - this.pixel[1],
w: e[0] - this.pixel[0]
}, n = this.calculateMenuSize(), a = s.w >= n.w ? this.pixel[0] + 5 : this.pixel[0] - n.w;
this.container.style.left = `${a}px`;
const h = this.calculateVerticalPosition(e, s, n);
this.container.style.top = `${h}px`, this.container.style.right = "auto", this.container.style.bottom = "auto", this.adjustPositionAfterRender(e, n), s.w -= n.w;
const m = (f) => Array.from(f.children).filter(
(l) => l.tagName === "LI" && l.classList.contains(r.submenu)
);
let E = 0;
const g = (f, l) => {
E += 1, m(f).forEach((I) => {
const O = l >= n.w ? n.w - 8 : (n.w + 8) * -1, u = I.querySelector(
`ul.${r.container}`
), $ = Math.round(
this.lineHeight * Array.from(u.children).filter((_) => _.tagName === "LI").length
);
u.style.left = `${O}px`, u.style.right = "auto", u.style.top = s.h >= $ + n.h ? "0" : `-${u.offsetHeight - 25}px`, u.style.bottom = "auto", u.style.zIndex = String(E), m(u).length > 0 && g(u, l - n.w);
});
};
g(this.container.firstElementChild, s.w);
}
handleMapMove() {
this.closeMenu();
}
handleEntryCallback(t) {
t.preventDefault(), t.stopPropagation();
const e = t.currentTarget, s = this.menuEntries.get(e.id);
if (!s) return;
const n = {
coordinate: this.coordinate,
data: s.data
};
this.closeMenu(), s.callback?.(n, 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);
}
}
export {
X as default
};