ol-contextmenu 5.0.2 → 5.0.3
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/README.md
CHANGED
|
@@ -21,7 +21,7 @@ A `contextmenu` extension for [OpenLayers](http://openlayers.org/). **Requires**
|
|
|
21
21
|
|
|
22
22
|
## Demo
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
[JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
|
|
25
25
|
|
|
26
26
|
## How to use it?
|
|
27
27
|
|
package/dist/ol-contextmenu.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
/*!
|
|
3
|
-
* ol-contextmenu - v5.0.
|
|
3
|
+
* ol-contextmenu - v5.0.3
|
|
4
4
|
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
-
* Built: Thu Sep 22 2022 11:
|
|
5
|
+
* Built: Thu Sep 22 2022 11:25:20 GMT-0300 (Brasilia Standard Time)
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
.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:hover>.ol-ctx-menu-container{opacity:1;visibility:visible;transition-delay:0s}.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 li.ol-ctx-menu-separator{padding:0}.ol-ctx-menu-container li.ol-ctx-menu-separator hr{border:0;height:1px;background-image:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,.75),rgba(0,0,0,0))}.ol-ctx-menu-icon{text-indent:20px;background-size:20px auto;background-repeat:no-repeat;background-position:left center}.ol-ctx-menu-zoom-in{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABaUlEQVQ4T72U7VHCQBCGn90GtAMuNGCswFiBWIFQgWMFxg6wArECsQKhArEBiB1Qwa1zgQn5IAYcxv13k71n3919L8KJQ07M47+BzgG9TRfZ/JBuWhS6BJFHRJICYrZGZIz3z5Ct2+B7gG6I6kt+wewdkQVwjtkAkR5mC8yu26A1oItR/cTsOweQBdgutD8G7jGm2PJ2n8oqUKIpIjd4HxTM8gvaT/F+AlmWnyWaIXKF95eNguFzTYFhNsdWu9kFgFlaFMANUH3D8wDLoLgSTSD2il8NCe2ZXQBxWDGwxmyUzzOMBZ7wy7Qb2K0wQfXjMOBuhlFpZtNty5sFaTQBuTusZdymeqs1SpYKcO9HkE3KbTd9WFijMHJQ5hBNEAYNq5Qd0dhyke0GiE4QzjqfW23mHT8Hl4DG4Lce3FPE7AtbBSdsbNqpoJLgYkRnNeUV+xwJDHTnUEkxHGbhBXUs5TjJjew/KPy94g+NRaIVRYmMXwAAAABJRU5ErkJggg==)}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-in{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABc0lEQVQ4T71U21ECQRDsJgGdvQDECMQIxAjECMQILCPwzAAjECIQI0AiEDPQAPaWCBhrcKHuCUcV5f7dY3v6tUscefHIePhfwBBCF8CZqRCReRs1tQxDCH1VfQLQz4EsSY4AvIjIsgm8AhhCGKrqa9zwrqoLAKckB5HtguR1E2gBMITQU9VPAD8GICIGtl3e+xHJBwBT59xtHcsCYJZlUwA3kcGHbfDep51OZywi3/acZZm9vyJ5WR5o38uACmDunNt6ZwAkUxFZDwghDFT1jeSjiJinhVUBVNVJkiTDKO8CQA+AsbNQ7s1Ps0VVn5MkSfcCtmBoDZi1Bdx4eJ7zbBolrwPy3o9J3rWSHPs3A1BbjVKlYBaIyDgvu9LDXDU2RTZmXVW1oKyLxRD+OrkOrJLy5mVM0iaftDhuhVbsvBzMglzKUNW6IV/OOWtCM8MmVvEkmbwt83LaB19fdgOtVquUZJeknaDdobTwbOcvBzPcN/AXH1DFFWP7u9oAAAAASUVORK5CYII=)}.ol-ctx-menu-zoom-out{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABU0lEQVQ4T72U7VECMRRFz3sNaAdkacC1AtcKxApcKnCsQOwAK3CtQKxAqEBsANYOqCDPyTIC+8WCw5jfybn33dxEOPGSE/P4b6BzQG89RT47ZJoWhy5B5BGRZAMxWyEyxvtnyFdt8AagS1F9KQ6YvSMyB84xGyDSw2yO2XUbtAJ0MaqfmH0XAPIA2y7tj4F7jAm2uG1yWQZKNEHkBu+Dg2njWBJNEbnC+8uaIFRuWfuG2QxbbrOrUd0A1Tc8D7AIjkur7DAAsVf8MiWMZ3ZR2m02LPIMscATfjHqBnY7TFD9OAy4zTCCPG/MUKMM5O6wkXFr9dZq7FQqqHk/hDzbFa73cFONTZFDdRyiCcKg5rrSiLaXkiI6RjjrfG6VzDs+B5eAxuDXeYpmNRGzL2wZ/wof+du4GNFpBVqqz5HA4MM5VEYYDrOs+1I6Q9u/4Q8O9wN/AGgWjBVqQjjgAAAAAElFTkSuQmCC)}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-out{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABYklEQVQ4T72U4VHCQBCF36tA91KAWIFYgViBWIFYgWMFYgdYgVCBWAFSgdiBFpAsFWSdxcDkQoBkhnF/ZjbfvX377ogjF4/Mw/8CVbUD4MynEJF5k2lqFapqz8yeAPRKkCXJEYAXEVnugm8BVXVgZq/FD+9mtgBwSrJfqF2QvN4FjYCq2jWzTwA/DhARh20qTdMRyQcA0xDCbZ3KCJhl2RTATaHgo+6HLMv8+xXJy+qB3l8FGoB5CKHsXcRV1b6ZvZF8FBH3NKotoJlNkiQZFONdlLtJ3rufbouZPSdJMjwIbKDQEzBrClx7eC4i33Uepmk6JnnXaOQifzMAtdGoRApugYiMI1uqKkrRWAfZo9MxM1+UZzFewl8mN4nYdVM83L7BkwbXLUrF3sfBLQDQBbDy08x8vOohXyEE71lVq9emuEk+3gZa3XYroCvwFyjP8yHJDsnxwaU08GxvS2uFhw78BbzWrxXgMbsHAAAAAElFTkSuQmCC)}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
/*!
|
|
3
|
-
* ol-contextmenu - v5.0.
|
|
3
|
+
* ol-contextmenu - v5.0.3
|
|
4
4
|
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
-
* Built: Thu Sep 22 2022 11:
|
|
5
|
+
* Built: Thu Sep 22 2022 11:25:20 GMT-0300 (Brasilia Standard Time)
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
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);
|
package/dist/ol-contextmenu.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
/*!
|
|
3
|
-
* ol-contextmenu - v5.0.
|
|
3
|
+
* ol-contextmenu - v5.0.3
|
|
4
4
|
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
-
* Built: Thu Sep 22 2022 11:
|
|
5
|
+
* Built: Thu Sep 22 2022 11:25:20 GMT-0300 (Brasilia Standard Time)
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
var S = Object.defineProperty;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
/*!
|
|
3
|
-
* ol-contextmenu - v5.0.
|
|
3
|
+
* ol-contextmenu - v5.0.3
|
|
4
4
|
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
-
* Built: Thu Sep 22 2022 11:
|
|
5
|
+
* Built: Thu Sep 22 2022 11:25:20 GMT-0300 (Brasilia Standard Time)
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
(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/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ol-contextmenu",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3",
|
|
4
4
|
"description": "Custom Context Menu for Openlayers",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/ol-contextmenu.umd.cjs",
|
|
7
|
+
"browser": "./dist/ol-contextmenu.iife.js",
|
|
7
8
|
"module": "./dist/ol-contextmenu.js",
|
|
8
9
|
"exports": {
|
|
9
10
|
".": {
|