ol-contextmenu 5.0.7-alpha → 5.1.0
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 +112 -104
- package/dist/main.d.ts +2 -2
- package/dist/ol-contextmenu.css +8 -1
- package/dist/ol-contextmenu.iife.js +8 -0
- package/dist/ol-contextmenu.js +37 -31
- package/dist/ol-contextmenu.umd.cjs +8 -1
- package/dist/types.d.ts +4 -4
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -1,24 +1,18 @@
|
|
|
1
1
|
# OpenLayers Custom Context Menu
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<img src="https://david-dm.org/jonataswalker/ol-contextmenu/status.svg"
|
|
17
|
-
alt="dependency status">
|
|
18
|
-
</a>
|
|
19
|
-
<a href="https://david-dm.org/jonataswalker/ol-contextmenu">
|
|
20
|
-
<img src="https://david-dm.org/jonataswalker/ol-contextmenu/dev-status.svg" alt="devDependency status">
|
|
21
|
-
</a>
|
|
4
|
+
<a href="https://github.com/jonataswalker/ol-contextmenu/actions/workflows/test.yml">
|
|
5
|
+
<img src="https://github.com/jonataswalker/ol-contextmenu/actions/workflows/test.yml/badge.svg?branch=master" alt="Build Status">
|
|
6
|
+
</a>
|
|
7
|
+
<a href="https://www.npmjs.com/package/ol-contextmenu">
|
|
8
|
+
<img src="https://img.shields.io/npm/v/ol-contextmenu.svg" alt="npm version">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://img.shields.io/npm/dm/ol-contextmenu">
|
|
11
|
+
<img alt="npm" src="https://img.shields.io/npm/dm/ol-contextmenu">
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://github.com/jonataswalker/ol-contextmenu/blob/master/LICENSE">
|
|
14
|
+
<img src="https://img.shields.io/npm/l/ol-contextmenu.svg" alt="license">
|
|
15
|
+
</a>
|
|
22
16
|
</p>
|
|
23
17
|
|
|
24
18
|
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**
|
|
|
26
20
|
|
|
27
21
|
|
|
28
22
|
## Demo
|
|
29
|
-
|
|
23
|
+
|
|
24
|
+
[JSFiddle](https://jsfiddle.net/jonataswalker/ooxs1w5d/).
|
|
30
25
|
|
|
31
26
|
## How to use it?
|
|
27
|
+
|
|
32
28
|
##### NPM
|
|
29
|
+
|
|
33
30
|
`npm install ol-contextmenu`
|
|
34
31
|
|
|
35
32
|
##### CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/npm/ol-contextmenu)
|
|
33
|
+
|
|
36
34
|
Load CSS and Javascript:
|
|
35
|
+
|
|
37
36
|
```HTML
|
|
38
|
-
<link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.
|
|
37
|
+
<link href="https://cdn.jsdelivr.net/npm/ol-contextmenu@latest/dist/ol-contextmenu.css" rel="stylesheet">
|
|
39
38
|
<script src="https://cdn.jsdelivr.net/npm/ol-contextmenu"></script>
|
|
40
39
|
```
|
|
41
40
|
|
|
42
41
|
##### CDN Hosted - UNPKG
|
|
42
|
+
|
|
43
43
|
Load CSS and Javascript:
|
|
44
|
+
|
|
44
45
|
```HTML
|
|
45
|
-
<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.
|
|
46
|
+
<link href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.css" rel="stylesheet">
|
|
46
47
|
<script src="https://unpkg.com/ol-contextmenu"></script>
|
|
47
48
|
```
|
|
49
|
+
|
|
48
50
|
##### Self hosted
|
|
51
|
+
|
|
49
52
|
Download [latest release](https://github.com/jonataswalker/ol-contextmenu/releases/latest) and (obviously) load CSS and Javascript.
|
|
50
53
|
|
|
51
54
|
##### Instantiate with some options and add the Control
|
|
55
|
+
|
|
52
56
|
```javascript
|
|
53
57
|
var contextmenu = new ContextMenu({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
58
|
+
width: 170,
|
|
59
|
+
defaultItems: true, // defaultItems are (for now) Zoom In/Zoom Out
|
|
60
|
+
items: [
|
|
61
|
+
{
|
|
62
|
+
text: 'Center map here',
|
|
63
|
+
classname: 'some-style-class', // add some CSS rules
|
|
64
|
+
callback: center, // `center` is your callback function
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
text: 'Add a Marker',
|
|
68
|
+
classname: 'some-style-class', // you can add this icon with a CSS class
|
|
69
|
+
// instead of `icon` property (see next line)
|
|
70
|
+
icon: 'img/marker.png', // this can be relative or absolute
|
|
71
|
+
callback: marker,
|
|
72
|
+
},
|
|
73
|
+
'-', // this is a separator
|
|
74
|
+
],
|
|
71
75
|
});
|
|
72
76
|
map.addControl(contextmenu);
|
|
73
77
|
```
|
|
@@ -78,55 +82,57 @@ If you provide `items {Array}` a submenu will be created as a child of the curre
|
|
|
78
82
|
|
|
79
83
|
```javascript
|
|
80
84
|
var all_items = [
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
85
|
+
{
|
|
86
|
+
text: 'Some Actions',
|
|
87
|
+
items: [
|
|
88
|
+
// <== this is a submenu
|
|
89
|
+
{
|
|
90
|
+
text: 'Action 1',
|
|
91
|
+
callback: action,
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
text: 'Other action',
|
|
95
|
+
callback: action2,
|
|
96
|
+
},
|
|
97
|
+
],
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
text: 'Add a Marker',
|
|
101
|
+
icon: 'img/marker.png',
|
|
102
|
+
callback: marker,
|
|
103
|
+
},
|
|
104
|
+
'-', // this is a separator
|
|
100
105
|
];
|
|
101
106
|
```
|
|
102
107
|
|
|
103
108
|
##### Would you like to propagate custom data to the callback handler?
|
|
109
|
+
|
|
104
110
|
```javascript
|
|
105
111
|
var removeMarker = function (obj) {
|
|
106
|
-
|
|
112
|
+
vectorLayer.getSource().removeFeature(obj.data.marker);
|
|
107
113
|
};
|
|
108
114
|
var removeMarkerItem = {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
115
|
+
text: 'Remove this Marker',
|
|
116
|
+
icon: 'img/marker.png',
|
|
117
|
+
callback: removeMarker,
|
|
112
118
|
};
|
|
113
119
|
|
|
114
120
|
var restore = false;
|
|
115
121
|
contextmenu.on('open', function (evt) {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
122
|
+
var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
|
|
123
|
+
return ft;
|
|
124
|
+
});
|
|
125
|
+
if (feature) {
|
|
126
|
+
contextmenu.clear();
|
|
127
|
+
removeMarkerItem.data = { marker: feature };
|
|
128
|
+
contextmenu.push(removeMarkerItem);
|
|
129
|
+
restore = true;
|
|
130
|
+
} else if (restore) {
|
|
131
|
+
contextmenu.clear();
|
|
132
|
+
contextmenu.extend(contextmenu_items);
|
|
133
|
+
contextmenu.extend(contextmenu.getDefaultItems());
|
|
134
|
+
restore = false;
|
|
135
|
+
}
|
|
130
136
|
});
|
|
131
137
|
```
|
|
132
138
|
|
|
@@ -137,10 +143,11 @@ contextmenu.on('open', function (evt) {
|
|
|
137
143
|
#### `new ContextMenu(options)`
|
|
138
144
|
|
|
139
145
|
###### `options` is an object with the following possible properties:
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
146
|
+
|
|
147
|
+
- `eventType`: `contextmenu`; The listening event type (You could use `'click'`, `'dblclick'`)
|
|
148
|
+
- `defaultItems`: `true`; Whether the default items (which are: Zoom In/Out) are enabled
|
|
149
|
+
- `width`: `150`; The menu's width
|
|
150
|
+
- `items`: `[]`; An array of object|string
|
|
144
151
|
|
|
145
152
|
## Methods
|
|
146
153
|
|
|
@@ -159,17 +166,18 @@ Close the menu programmatically.
|
|
|
159
166
|
Add items to the menu. This pushes each item in the provided array to the end of the menu.
|
|
160
167
|
|
|
161
168
|
Example:
|
|
169
|
+
|
|
162
170
|
```js
|
|
163
171
|
var contextmenu = new ContextMenu();
|
|
164
172
|
map.addControl(contextmenu);
|
|
165
173
|
|
|
166
174
|
var add_later = [
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
175
|
+
'-', // this is a separator
|
|
176
|
+
{
|
|
177
|
+
text: 'Add a Marker',
|
|
178
|
+
icon: 'img/marker.png',
|
|
179
|
+
callback: marker,
|
|
180
|
+
},
|
|
173
181
|
];
|
|
174
182
|
contextmenu.extend(add_later);
|
|
175
183
|
```
|
|
@@ -202,36 +210,36 @@ Whether the menu is open.
|
|
|
202
210
|
|
|
203
211
|
Update menu's position.
|
|
204
212
|
|
|
205
|
-
|
|
206
213
|
## Events
|
|
207
214
|
|
|
208
215
|
#### If you want to disable this plugin under certain circumstances, listen to `beforeopen`
|
|
209
216
|
|
|
210
217
|
```javascript
|
|
211
218
|
contextmenu.on('beforeopen', function (evt) {
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
219
|
+
var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
|
|
220
|
+
return ft;
|
|
221
|
+
});
|
|
222
|
+
|
|
223
|
+
if (feature) {
|
|
224
|
+
// open only on features
|
|
225
|
+
contextmenu.enable();
|
|
226
|
+
} else {
|
|
227
|
+
contextmenu.disable();
|
|
228
|
+
}
|
|
221
229
|
});
|
|
222
230
|
```
|
|
223
231
|
|
|
224
232
|
#### Listen and make some changes when context menu opens
|
|
225
233
|
|
|
226
234
|
```javascript
|
|
227
|
-
contextmenu.on('open', function(evt){
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
+
contextmenu.on('open', function (evt) {
|
|
236
|
+
var feature = map.forEachFeatureAtPixel(evt.pixel, function (ft, l) {
|
|
237
|
+
return ft;
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
if (feature) {
|
|
241
|
+
// add some other items to the menu
|
|
242
|
+
}
|
|
235
243
|
});
|
|
236
244
|
```
|
|
237
245
|
|
|
@@ -239,6 +247,6 @@ contextmenu.on('open', function(evt){
|
|
|
239
247
|
|
|
240
248
|
```javascript
|
|
241
249
|
contextmenu.on('close', function (evt) {
|
|
242
|
-
|
|
250
|
+
// it's upon you
|
|
243
251
|
});
|
|
244
252
|
```
|
package/dist/main.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Pixel } from 'ol/pixel';
|
|
2
2
|
import type { Coordinate } from 'ol/coordinate';
|
|
3
|
-
import Control from 'ol/control/Control';
|
|
4
3
|
import OlMap from 'ol/Map';
|
|
4
|
+
import Control from 'ol/control/Control';
|
|
5
5
|
import { Item, MenuEntry, Options } from './types';
|
|
6
6
|
export default class ContextMenu extends Control {
|
|
7
7
|
protected map: OlMap;
|
|
@@ -21,7 +21,7 @@ export default class ContextMenu extends Control {
|
|
|
21
21
|
clear(): void;
|
|
22
22
|
enable(): void;
|
|
23
23
|
disable(): void;
|
|
24
|
-
getDefaultItems():
|
|
24
|
+
getDefaultItems(): import("./types").SingleItem[];
|
|
25
25
|
countItems(): number;
|
|
26
26
|
extend(items: Item[]): void;
|
|
27
27
|
closeMenu(): void;
|
package/dist/ol-contextmenu.css
CHANGED
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
/*!
|
|
3
|
+
* ol-contextmenu - v5.1.0
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Sep 24 2022 09:56:34 GMT-0300 (Brasilia Standard Time)
|
|
6
|
+
*/
|
|
7
|
+
|
|
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: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,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)}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
/*!
|
|
3
|
+
* ol-contextmenu - v5.1.0
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Sep 24 2022 09:56:34 GMT-0300 (Brasilia Standard Time)
|
|
6
|
+
*/
|
|
7
|
+
|
|
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,6 +1,13 @@
|
|
|
1
|
+
|
|
2
|
+
/*!
|
|
3
|
+
* ol-contextmenu - v5.1.0
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Sep 24 2022 09:56:34 GMT-0300 (Brasilia Standard Time)
|
|
6
|
+
*/
|
|
7
|
+
|
|
1
8
|
var S = Object.defineProperty;
|
|
2
9
|
var k = (s, t, e) => t in s ? S(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
|
|
3
|
-
var
|
|
10
|
+
var r = (s, t, e) => (k(s, typeof t != "symbol" ? t + "" : t, e), e);
|
|
4
11
|
import T from "ol/control/Control";
|
|
5
12
|
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
13
|
const O = {
|
|
@@ -9,7 +16,7 @@ const O = {
|
|
|
9
16
|
eventType: M.CONTEXTMENU,
|
|
10
17
|
defaultItems: !0,
|
|
11
18
|
items: []
|
|
12
|
-
}, d = "ol-ctx-menu",
|
|
19
|
+
}, d = "ol-ctx-menu", a = {
|
|
13
20
|
namespace: d,
|
|
14
21
|
container: `${d}-container`,
|
|
15
22
|
separator: `${d}-separator`,
|
|
@@ -22,7 +29,7 @@ const O = {
|
|
|
22
29
|
}, x = [
|
|
23
30
|
{
|
|
24
31
|
text: "Zoom In",
|
|
25
|
-
classname: `${
|
|
32
|
+
classname: `${a.zoomIn} ${a.icon}`,
|
|
26
33
|
callback: (s, t) => {
|
|
27
34
|
const e = t.getView();
|
|
28
35
|
e.animate({
|
|
@@ -34,7 +41,7 @@ const O = {
|
|
|
34
41
|
},
|
|
35
42
|
{
|
|
36
43
|
text: "Zoom Out",
|
|
37
|
-
classname: `${
|
|
44
|
+
classname: `${a.zoomOut} ${a.icon}`,
|
|
38
45
|
callback: (s, t) => {
|
|
39
46
|
const e = t.getView();
|
|
40
47
|
e.animate({
|
|
@@ -98,7 +105,7 @@ function L(s, t, e = !1) {
|
|
|
98
105
|
const n = `_${Math.random().toString(36).slice(2, 11)}`;
|
|
99
106
|
if (typeof t != "string" && "text" in t) {
|
|
100
107
|
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 =
|
|
108
|
+
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
109
|
p.ADD_MENU_ENTRY,
|
|
103
110
|
{
|
|
104
111
|
id: n,
|
|
@@ -110,7 +117,7 @@ function L(s, t, e = !1) {
|
|
|
110
117
|
c
|
|
111
118
|
), c;
|
|
112
119
|
}
|
|
113
|
-
const i = `<li id="${n}" class="${
|
|
120
|
+
const i = `<li id="${n}" class="${a.separator}"><hr></li>`, o = E(i);
|
|
114
121
|
s.append(o);
|
|
115
122
|
const l = s.lastChild;
|
|
116
123
|
return y.emit(
|
|
@@ -129,9 +136,9 @@ function v(s, t, e) {
|
|
|
129
136
|
t.forEach((n) => {
|
|
130
137
|
if (typeof n != "string" && "items" in n && Array.isArray(n.items)) {
|
|
131
138
|
const i = L(s, n, !0);
|
|
132
|
-
i.classList.add(
|
|
139
|
+
i.classList.add(a.submenu);
|
|
133
140
|
const o = document.createElement("ul");
|
|
134
|
-
o.classList.add(
|
|
141
|
+
o.classList.add(a.container), o.style.width = `${e}px`, i.append(o), v(o, n.items, e);
|
|
135
142
|
} else
|
|
136
143
|
L(s, n);
|
|
137
144
|
});
|
|
@@ -140,30 +147,30 @@ function g(s, t) {
|
|
|
140
147
|
if (!s)
|
|
141
148
|
throw new Error(t);
|
|
142
149
|
}
|
|
143
|
-
class
|
|
150
|
+
class P extends T {
|
|
144
151
|
constructor(e = {}) {
|
|
145
152
|
g(typeof e == "object", "@param `opts` should be object type!");
|
|
146
153
|
const n = document.createElement("div");
|
|
147
154
|
super({ element: n });
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
155
|
+
r(this, "map");
|
|
156
|
+
r(this, "container");
|
|
157
|
+
r(this, "coordinate", []);
|
|
158
|
+
r(this, "pixel", []);
|
|
159
|
+
r(this, "contextMenuEventListener");
|
|
160
|
+
r(this, "entryCallbackEventListener");
|
|
161
|
+
r(this, "mapMoveListener");
|
|
162
|
+
r(this, "lineHeight", 0);
|
|
163
|
+
r(this, "disabled");
|
|
164
|
+
r(this, "opened");
|
|
165
|
+
r(this, "items", []);
|
|
166
|
+
r(this, "menuEntries", /* @__PURE__ */ new Map());
|
|
167
|
+
r(this, "options");
|
|
161
168
|
this.options = { ...O, ...e };
|
|
162
169
|
const i = document.createElement("ul");
|
|
163
170
|
n.append(i), n.style.width = `${this.options.width}px`, n.classList.add(
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
171
|
+
a.container,
|
|
172
|
+
a.unselectable,
|
|
173
|
+
a.hidden
|
|
167
174
|
), this.container = n, this.contextMenuEventListener = (o) => {
|
|
168
175
|
this.handleContextMenu(o);
|
|
169
176
|
}, this.entryCallbackEventListener = (o) => {
|
|
@@ -203,7 +210,7 @@ class z extends T {
|
|
|
203
210
|
);
|
|
204
211
|
}
|
|
205
212
|
closeMenu() {
|
|
206
|
-
this.opened = !1, this.container.classList.add(
|
|
213
|
+
this.opened = !1, this.container.classList.add(a.hidden), this.dispatchEvent(p.CLOSE);
|
|
207
214
|
}
|
|
208
215
|
isOpen() {
|
|
209
216
|
return this.opened;
|
|
@@ -257,7 +264,7 @@ class z extends T {
|
|
|
257
264
|
));
|
|
258
265
|
}
|
|
259
266
|
openMenu() {
|
|
260
|
-
this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(
|
|
267
|
+
this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(a.hidden));
|
|
261
268
|
}
|
|
262
269
|
getMenuEntriesLength() {
|
|
263
270
|
return Array.from(this.menuEntries).filter(
|
|
@@ -274,13 +281,13 @@ class z extends T {
|
|
|
274
281
|
}, o = n.w >= i.w ? this.pixel[0] + 5 : this.pixel[0] - i.w;
|
|
275
282
|
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
283
|
const l = (c) => Array.from(c.children).filter(
|
|
277
|
-
(m) => m.tagName === "LI" && m.classList.contains(
|
|
284
|
+
(m) => m.tagName === "LI" && m.classList.contains(a.submenu)
|
|
278
285
|
);
|
|
279
286
|
let u = 0;
|
|
280
287
|
const f = (c, m) => {
|
|
281
288
|
u += 1, l(c).forEach((C) => {
|
|
282
289
|
const A = m >= i.w ? i.w - 8 : (i.w + 8) * -1, h = C.querySelector(
|
|
283
|
-
`ul.${
|
|
290
|
+
`ul.${a.container}`
|
|
284
291
|
), $ = Math.round(
|
|
285
292
|
this.lineHeight * Array.from(h.children).filter((N) => N.tagName === "LI").length
|
|
286
293
|
);
|
|
@@ -307,7 +314,6 @@ class z extends T {
|
|
|
307
314
|
this.menuEntries.set(e.id, e), "callback" in e && typeof e.callback == "function" && n.addEventListener("click", this.entryCallbackEventListener, !1);
|
|
308
315
|
}
|
|
309
316
|
}
|
|
310
|
-
window.ol?.control && (window.ol.control.ContextMenu = z);
|
|
311
317
|
export {
|
|
312
|
-
|
|
318
|
+
P as default
|
|
313
319
|
};
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
/*!
|
|
3
|
+
* ol-contextmenu - v5.1.0
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Sep 24 2022 09:56:34 GMT-0300 (Brasilia Standard Time)
|
|
6
|
+
*/
|
|
7
|
+
|
|
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/dist/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import type { Coordinate } from 'ol/coordinate';
|
|
2
|
+
import type { Pixel } from 'ol/pixel';
|
|
1
3
|
import { Map as OlMap } from 'ol';
|
|
2
|
-
import
|
|
3
|
-
import BaseEvent from 'ol/events/Event.js';
|
|
4
|
-
import { Pixel } from 'ol/pixel.js';
|
|
4
|
+
import BaseEvent from 'ol/events/Event';
|
|
5
5
|
export declare enum EventTypes {
|
|
6
6
|
CONTEXTMENU = "contextmenu",
|
|
7
7
|
CLICK = "click",
|
|
@@ -40,7 +40,7 @@ export declare type ItemWithNested = {
|
|
|
40
40
|
text: string;
|
|
41
41
|
classname?: string;
|
|
42
42
|
icon?: string;
|
|
43
|
-
items:
|
|
43
|
+
items: Item[];
|
|
44
44
|
};
|
|
45
45
|
export declare type Item = SingleItem | ItemSeparator | ItemWithNested;
|
|
46
46
|
export declare type Options = {
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ol-contextmenu",
|
|
3
|
-
"version": "5.0
|
|
3
|
+
"version": "5.1.0",
|
|
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
|
".": {
|
|
@@ -44,10 +45,10 @@
|
|
|
44
45
|
"prepublishOnly": "npm run lint && npm test && npm run build"
|
|
45
46
|
},
|
|
46
47
|
"devDependencies": {
|
|
47
|
-
"@swc/core": "^1.3.
|
|
48
|
+
"@swc/core": "^1.3.3",
|
|
48
49
|
"@swc/jest": "^0.2.22",
|
|
49
50
|
"@types/jest": "^29.0.3",
|
|
50
|
-
"eslint": "^8.
|
|
51
|
+
"eslint": "^8.24.0",
|
|
51
52
|
"eslint-config-jwalker": "^7.9.2",
|
|
52
53
|
"eslint-config-prettier": "^8.5.0",
|
|
53
54
|
"eslint-plugin-jest": "^27.0.4",
|
|
@@ -60,6 +61,7 @@
|
|
|
60
61
|
"rimraf": "^3.0.2",
|
|
61
62
|
"typescript": "^4.8.3",
|
|
62
63
|
"vite": "^3.1.3",
|
|
64
|
+
"vite-plugin-banner": "^0.5.0",
|
|
63
65
|
"vite-plugin-dts": "^1.5.0"
|
|
64
66
|
},
|
|
65
67
|
"peerDependencies": {
|