ol-contextmenu 5.0.8-alpha → 5.1.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/README.md +112 -104
- package/dist/main.d.ts +12 -4
- package/dist/ol-contextmenu.css +8 -1
- package/dist/ol-contextmenu.iife.js +8 -0
- package/dist/ol-contextmenu.js +119 -97
- package/dist/ol-contextmenu.umd.cjs +8 -1
- package/dist/types.d.ts +8 -7
- package/package.json +13 -11
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,8 +1,13 @@
|
|
|
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';
|
|
5
|
-
import
|
|
4
|
+
import Control from 'ol/control/Control';
|
|
5
|
+
import BaseEvent from 'ol/events/Event';
|
|
6
|
+
import { EventsKey } from 'ol/events';
|
|
7
|
+
import { Types as ObjectEventTypes } from 'ol/ObjectEventType';
|
|
8
|
+
import { CombinedOnSignature, EventTypes as OlEventTypes, OnSignature } from 'ol/Observable';
|
|
9
|
+
import { ObjectEvent } from 'ol/Object';
|
|
10
|
+
import { ContextMenuEvent, CustomEventTypes, Item, MenuEntry, Options } from './types';
|
|
6
11
|
export default class ContextMenu extends Control {
|
|
7
12
|
protected map: OlMap;
|
|
8
13
|
protected container: HTMLDivElement;
|
|
@@ -16,12 +21,15 @@ export default class ContextMenu extends Control {
|
|
|
16
21
|
protected opened: boolean;
|
|
17
22
|
protected items: Item[];
|
|
18
23
|
protected menuEntries: Map<string, MenuEntry>;
|
|
24
|
+
on: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, EventsKey> & OnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`, ContextMenuEvent, EventsKey> & OnSignature<ObjectEventTypes, ObjectEvent, EventsKey> & CombinedOnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}` | ObjectEventTypes | `${CustomEventTypes.CLOSE}` | OlEventTypes, EventsKey>;
|
|
25
|
+
once: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, EventsKey> & OnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`, ContextMenuEvent, EventsKey> & OnSignature<ObjectEventTypes, ObjectEvent, EventsKey> & CombinedOnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}` | ObjectEventTypes | `${CustomEventTypes.CLOSE}` | OlEventTypes, EventsKey>;
|
|
26
|
+
un: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, void> & OnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`, ContextMenuEvent, EventsKey> & OnSignature<ObjectEventTypes, ObjectEvent, void> & CombinedOnSignature<`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}` | ObjectEventTypes | `${CustomEventTypes.CLOSE}` | OlEventTypes, void>;
|
|
19
27
|
options: Options;
|
|
20
28
|
constructor(opts?: Partial<Options>);
|
|
21
29
|
clear(): void;
|
|
22
30
|
enable(): void;
|
|
23
31
|
disable(): void;
|
|
24
|
-
getDefaultItems():
|
|
32
|
+
getDefaultItems(): import("./types").SingleItem[];
|
|
25
33
|
countItems(): number;
|
|
26
34
|
extend(items: Item[]): void;
|
|
27
35
|
closeMenu(): void;
|
|
@@ -34,7 +42,7 @@ export default class ContextMenu extends Control {
|
|
|
34
42
|
protected removeListeners(): void;
|
|
35
43
|
protected removeMenuEntry(id: string): void;
|
|
36
44
|
protected handleContextMenu(evt: MouseEvent): void;
|
|
37
|
-
protected openMenu(): void;
|
|
45
|
+
protected openMenu(evt: MouseEvent): void;
|
|
38
46
|
protected getMenuEntriesLength(): number;
|
|
39
47
|
protected positionContainer(): void;
|
|
40
48
|
protected handleMapMove(): void;
|
package/dist/ol-contextmenu.css
CHANGED
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
/*!
|
|
3
|
+
* ol-contextmenu - v5.1.1
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Nov 12 2022 12:41:10 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.1
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Nov 12 2022 12:41:10 GMT-0300 (Brasilia Standard Time)
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
var ContextMenu=function(m,h){"use strict";var H=Object.defineProperty;var U=(m,h,f)=>h in m?H(m,h,{enumerable:!0,configurable:!0,writable:!0,value:f}):m[h]=f;var r=(m,h,f)=>(U(m,typeof h!="symbol"?h+"":h,f),f);const S=(n=>n&&typeof n=="object"&&"default"in n?n:{default:n})(m);var b=(n=>(n.CONTEXTMENU="contextmenu",n.CLICK="click",n.DBLCLICK="dblclick",n))(b||{}),d=(n=>(n.BEFOREOPEN="beforeopen",n.OPEN="open",n.CLOSE="close",n.ADD_MENU_ENTRY="add-menu-entry",n))(d||{});class C extends h.MapBrowserEvent{constructor(s){super(s.type,s.map,s.originalEvent)}}const k={width:150,scrollAt:4,eventType:b.CONTEXTMENU,defaultItems:!0,items:[]},p="ol-ctx-menu",a={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"},A=[{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 N={exports:{}};function x(){}x.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,c=t.length;o<c;o++)t[o].fn!==s&&t[o].fn._!==s&&i.push(t[o]);return i.length?e[n]=i:delete e[n],this}},N.exports=x;var T=N.exports.TinyEmitter=x;const y=new T;function v(n){const s=document.createDocumentFragment(),e=document.createElement("div");for(e.innerHTML=n;e.firstChild;)s.append(e.firstChild);return s}function _(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=v("<span>Foo</span>"),i=v("<span>Foo</span>"),o=document.createElement("li"),c=document.createElement("li");o.append(t),c.append(i),s.append(o),s.append(c),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>`,M=v(E),l=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}`),l.setAttribute("style",`background-image:url(${s.icon})`)),l.id=t,l.className=s.classname,l.append(M),n.append(l),y.emit(d.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!1,callback:"callback"in s?s.callback:null,data:"data"in s?s.data:null},l),l}const i=`<li id="${t}" class="${a.separator}"><hr></li>`,o=v(i);n.append(o);const c=n.lastChild;return y.emit(d.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!0,callback:null,data:null},c),c}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 F="";function w(n,s){if(!n)throw new Error(s)}class D extends S.default{constructor(e={}){w(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={...k,...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}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 A}countItems(){return this.menuEntries.size}extend(e){w(Array.isArray(e),"@param `items` should be an Array."),L(this.container.firstElementChild,e,this.options.width)}closeMenu(){this.opened=!1,this.container.classList.add(a.hidden),this.dispatchEvent(d.CLOSE)}isOpen(){return this.opened}updatePosition(e){w(Array.isArray(e),"@param `pixel` should be an Array."),this.isOpen()&&(this.pixel=e,this.positionContainer())}pop(){const e=Array.from(this.menuEntries.keys()).pop();e&&this.removeMenuEntry(e)}shift(){const e=Array.from(this.menuEntries.keys()).shift();e&&this.removeMenuEntry(e)}push(e){e&&this.extend([e])}setMap(e){if(super.setMap(e),e){this.map=e,this.map.getViewport().addEventListener(this.options.eventType,this.contextMenuEventListener,!1),this.map.on("movestart",()=>{this.handleMapMove()}),y.on(d.ADD_MENU_ENTRY,(i,o)=>{this.handleAddMenuEntry(i,o)},this),this.items=this.options.defaultItems?this.options.items.concat(A):this.options.items,L(this.container.firstElementChild,this.items,this.options.width);const t=this.getMenuEntriesLength();this.lineHeight=t>0?this.container.offsetHeight/t:_(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),y.off(d.ADD_MENU_ENTRY)}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(new C({type:d.BEFOREOPEN,map:this.map,originalEvent:e})),!this.disabled&&(this.options.eventType===b.CONTEXTMENU&&(e.stopPropagation(),e.preventDefault()),setTimeout(()=>{this.openMenu(e)}),e.target?.addEventListener("pointerdown",t=>{this.opened&&(t.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(e){this.menuEntries.size!==0&&(this.opened=!0,this.positionContainer(),this.container.classList.remove(a.hidden),this.dispatchEvent(new C({type:d.OPEN,map:this.map,originalEvent:e})))}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 c=l=>Array.from(l.children).filter(g=>g.tagName==="LI"&&g.classList.contains(a.submenu));let E=0;const M=(l,g)=>{E+=1,c(l).forEach(O=>{const I=g>=i.w?i.w-8:(i.w+8)*-1,u=O.querySelector(`ul.${a.container}`),z=Math.round(this.lineHeight*Array.from(u.children).filter(P=>P.tagName==="LI").length);u.style.left=`${I}px`,u.style.right="auto",u.style.top=t.h>=z+i.h?"0":`-${u.offsetHeight-25}px`,u.style.bottom="auto",u.style.zIndex=String(E),c(u).length>0&&M(u,g-i.w)})};M(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 D}(ol.control.Control,ol);
|
package/dist/ol-contextmenu.js
CHANGED
|
@@ -1,28 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
|
|
2
|
+
/*!
|
|
3
|
+
* ol-contextmenu - v5.1.1
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Nov 12 2022 12:41:10 GMT-0300 (Brasilia Standard Time)
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
var k = Object.defineProperty;
|
|
9
|
+
var T = (s, t, e) => t in s ? k(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
|
|
10
|
+
var r = (s, t, e) => (T(s, typeof t != "symbol" ? t + "" : t, e), e);
|
|
11
|
+
import O from "ol/control/Control";
|
|
12
|
+
import { MapBrowserEvent as D } from "ol";
|
|
13
|
+
var M = /* @__PURE__ */ ((s) => (s.CONTEXTMENU = "contextmenu", s.CLICK = "click", s.DBLCLICK = "dblclick", s))(M || {}), d = /* @__PURE__ */ ((s) => (s.BEFOREOPEN = "beforeopen", s.OPEN = "open", s.CLOSE = "close", s.ADD_MENU_ENTRY = "add-menu-entry", s))(d || {});
|
|
14
|
+
class x extends D {
|
|
15
|
+
constructor(t) {
|
|
16
|
+
super(t.type, t.map, t.originalEvent);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
const _ = {
|
|
7
20
|
width: 150,
|
|
8
21
|
scrollAt: 4,
|
|
9
22
|
eventType: M.CONTEXTMENU,
|
|
10
23
|
defaultItems: !0,
|
|
11
24
|
items: []
|
|
12
|
-
},
|
|
13
|
-
namespace:
|
|
14
|
-
container: `${
|
|
15
|
-
separator: `${
|
|
16
|
-
submenu: `${
|
|
17
|
-
hidden: `${
|
|
18
|
-
icon: `${
|
|
19
|
-
zoomIn: `${
|
|
20
|
-
zoomOut: `${
|
|
25
|
+
}, u = "ol-ctx-menu", a = {
|
|
26
|
+
namespace: u,
|
|
27
|
+
container: `${u}-container`,
|
|
28
|
+
separator: `${u}-separator`,
|
|
29
|
+
submenu: `${u}-submenu`,
|
|
30
|
+
hidden: `${u}-hidden`,
|
|
31
|
+
icon: `${u}-icon`,
|
|
32
|
+
zoomIn: `${u}-zoom-in`,
|
|
33
|
+
zoomOut: `${u}-zoom-out`,
|
|
21
34
|
unselectable: "ol-unselectable"
|
|
22
|
-
},
|
|
35
|
+
}, L = [
|
|
23
36
|
{
|
|
24
37
|
text: "Zoom In",
|
|
25
|
-
classname: `${
|
|
38
|
+
classname: `${a.zoomIn} ${a.icon}`,
|
|
26
39
|
callback: (s, t) => {
|
|
27
40
|
const e = t.getView();
|
|
28
41
|
e.animate({
|
|
@@ -34,7 +47,7 @@ const O = {
|
|
|
34
47
|
},
|
|
35
48
|
{
|
|
36
49
|
text: "Zoom Out",
|
|
37
|
-
classname: `${
|
|
50
|
+
classname: `${a.zoomOut} ${a.icon}`,
|
|
38
51
|
callback: (s, t) => {
|
|
39
52
|
const e = t.getView();
|
|
40
53
|
e.animate({
|
|
@@ -45,7 +58,7 @@ const O = {
|
|
|
45
58
|
}
|
|
46
59
|
}
|
|
47
60
|
];
|
|
48
|
-
var
|
|
61
|
+
var C = { exports: {} };
|
|
49
62
|
function b() {
|
|
50
63
|
}
|
|
51
64
|
b.prototype = {
|
|
@@ -72,34 +85,34 @@ b.prototype = {
|
|
|
72
85
|
off: function(s, t) {
|
|
73
86
|
var e = this.e || (this.e = {}), n = e[s], i = [];
|
|
74
87
|
if (n && t)
|
|
75
|
-
for (var o = 0,
|
|
88
|
+
for (var o = 0, c = n.length; o < c; o++)
|
|
76
89
|
n[o].fn !== t && n[o].fn._ !== t && i.push(n[o]);
|
|
77
90
|
return i.length ? e[s] = i : delete e[s], this;
|
|
78
91
|
}
|
|
79
92
|
};
|
|
80
|
-
|
|
81
|
-
var
|
|
82
|
-
const
|
|
83
|
-
function
|
|
93
|
+
C.exports = b;
|
|
94
|
+
var I = C.exports.TinyEmitter = b;
|
|
95
|
+
const E = new I();
|
|
96
|
+
function g(s) {
|
|
84
97
|
const t = document.createDocumentFragment(), e = document.createElement("div");
|
|
85
98
|
for (e.innerHTML = s; e.firstChild; )
|
|
86
99
|
t.append(e.firstChild);
|
|
87
100
|
return t;
|
|
88
101
|
}
|
|
89
|
-
function
|
|
102
|
+
function z(s) {
|
|
90
103
|
const t = document.importNode(s), e = s.offsetWidth;
|
|
91
104
|
t.style.cssText = `position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${e}px`;
|
|
92
|
-
const n =
|
|
93
|
-
o.append(n),
|
|
94
|
-
const
|
|
95
|
-
return s.parentNode?.removeChild(t),
|
|
105
|
+
const n = g("<span>Foo</span>"), i = g("<span>Foo</span>"), o = document.createElement("li"), c = document.createElement("li");
|
|
106
|
+
o.append(n), c.append(i), t.append(o), t.append(c), s.parentNode?.append(t);
|
|
107
|
+
const p = t.offsetHeight / 2;
|
|
108
|
+
return s.parentNode?.removeChild(t), p;
|
|
96
109
|
}
|
|
97
|
-
function
|
|
110
|
+
function w(s, t, e = !1) {
|
|
98
111
|
const n = `_${Math.random().toString(36).slice(2, 11)}`;
|
|
99
112
|
if (typeof t != "string" && "text" in t) {
|
|
100
|
-
const
|
|
101
|
-
return t.classname = t.classname || "", t.icon && (t.classname === "" ? t.classname =
|
|
102
|
-
|
|
113
|
+
const p = `<span>${t.text}</span>`, f = g(p), l = document.createElement("li");
|
|
114
|
+
return t.classname = t.classname || "", t.icon && (t.classname === "" ? t.classname = a.icon : t.classname.includes(a.icon) === !1 && (t.classname += ` ${a.icon}`), l.setAttribute("style", `background-image:url(${t.icon})`)), l.id = n, l.className = t.classname, l.append(f), s.append(l), E.emit(
|
|
115
|
+
d.ADD_MENU_ENTRY,
|
|
103
116
|
{
|
|
104
117
|
id: n,
|
|
105
118
|
isSubmenu: e,
|
|
@@ -107,14 +120,14 @@ function L(s, t, e = !1) {
|
|
|
107
120
|
callback: "callback" in t ? t.callback : null,
|
|
108
121
|
data: "data" in t ? t.data : null
|
|
109
122
|
},
|
|
110
|
-
|
|
111
|
-
),
|
|
123
|
+
l
|
|
124
|
+
), l;
|
|
112
125
|
}
|
|
113
|
-
const i = `<li id="${n}" class="${
|
|
126
|
+
const i = `<li id="${n}" class="${a.separator}"><hr></li>`, o = g(i);
|
|
114
127
|
s.append(o);
|
|
115
|
-
const
|
|
116
|
-
return
|
|
117
|
-
|
|
128
|
+
const c = s.lastChild;
|
|
129
|
+
return E.emit(
|
|
130
|
+
d.ADD_MENU_ENTRY,
|
|
118
131
|
{
|
|
119
132
|
id: n,
|
|
120
133
|
isSubmenu: e,
|
|
@@ -122,61 +135,55 @@ function L(s, t, e = !1) {
|
|
|
122
135
|
callback: null,
|
|
123
136
|
data: null
|
|
124
137
|
},
|
|
125
|
-
|
|
126
|
-
),
|
|
138
|
+
c
|
|
139
|
+
), c;
|
|
127
140
|
}
|
|
128
141
|
function v(s, t, e) {
|
|
129
142
|
t.forEach((n) => {
|
|
130
143
|
if (typeof n != "string" && "items" in n && Array.isArray(n.items)) {
|
|
131
|
-
const i =
|
|
132
|
-
i.classList.add(
|
|
144
|
+
const i = w(s, n, !0);
|
|
145
|
+
i.classList.add(a.submenu);
|
|
133
146
|
const o = document.createElement("ul");
|
|
134
|
-
o.classList.add(
|
|
147
|
+
o.classList.add(a.container), o.style.width = `${e}px`, i.append(o), v(o, n.items, e);
|
|
135
148
|
} else
|
|
136
|
-
|
|
149
|
+
w(s, n);
|
|
137
150
|
});
|
|
138
151
|
}
|
|
139
|
-
function
|
|
152
|
+
function y(s, t) {
|
|
140
153
|
if (!s)
|
|
141
154
|
throw new Error(t);
|
|
142
155
|
}
|
|
143
|
-
class
|
|
156
|
+
class R extends O {
|
|
144
157
|
constructor(e = {}) {
|
|
145
|
-
|
|
158
|
+
y(typeof e == "object", "@param `opts` should be object type!");
|
|
146
159
|
const n = document.createElement("div");
|
|
147
160
|
super({ element: n });
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
this.options = { ...
|
|
161
|
+
r(this, "map");
|
|
162
|
+
r(this, "container");
|
|
163
|
+
r(this, "coordinate", []);
|
|
164
|
+
r(this, "pixel", []);
|
|
165
|
+
r(this, "contextMenuEventListener");
|
|
166
|
+
r(this, "entryCallbackEventListener");
|
|
167
|
+
r(this, "mapMoveListener");
|
|
168
|
+
r(this, "lineHeight", 0);
|
|
169
|
+
r(this, "disabled");
|
|
170
|
+
r(this, "opened");
|
|
171
|
+
r(this, "items", []);
|
|
172
|
+
r(this, "menuEntries", /* @__PURE__ */ new Map());
|
|
173
|
+
r(this, "options");
|
|
174
|
+
this.options = { ..._, ...e };
|
|
162
175
|
const i = document.createElement("ul");
|
|
163
176
|
n.append(i), n.style.width = `${this.options.width}px`, n.classList.add(
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
177
|
+
a.container,
|
|
178
|
+
a.unselectable,
|
|
179
|
+
a.hidden
|
|
167
180
|
), this.container = n, this.contextMenuEventListener = (o) => {
|
|
168
181
|
this.handleContextMenu(o);
|
|
169
182
|
}, this.entryCallbackEventListener = (o) => {
|
|
170
183
|
this.handleEntryCallback(o);
|
|
171
184
|
}, this.mapMoveListener = () => {
|
|
172
185
|
this.handleMapMove();
|
|
173
|
-
}, this.disabled = !1, this.opened = !1
|
|
174
|
-
p.ADD_MENU_ENTRY,
|
|
175
|
-
(o, l) => {
|
|
176
|
-
this.handleAddMenuEntry(o, l);
|
|
177
|
-
},
|
|
178
|
-
this
|
|
179
|
-
);
|
|
186
|
+
}, this.disabled = !1, this.opened = !1;
|
|
180
187
|
}
|
|
181
188
|
clear() {
|
|
182
189
|
for (const e of this.menuEntries.keys())
|
|
@@ -190,26 +197,26 @@ class z extends T {
|
|
|
190
197
|
this.disabled = !0;
|
|
191
198
|
}
|
|
192
199
|
getDefaultItems() {
|
|
193
|
-
return
|
|
200
|
+
return L;
|
|
194
201
|
}
|
|
195
202
|
countItems() {
|
|
196
203
|
return this.menuEntries.size;
|
|
197
204
|
}
|
|
198
205
|
extend(e) {
|
|
199
|
-
|
|
206
|
+
y(Array.isArray(e), "@param `items` should be an Array."), v(
|
|
200
207
|
this.container.firstElementChild,
|
|
201
208
|
e,
|
|
202
209
|
this.options.width
|
|
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(d.CLOSE);
|
|
207
214
|
}
|
|
208
215
|
isOpen() {
|
|
209
216
|
return this.opened;
|
|
210
217
|
}
|
|
211
218
|
updatePosition(e) {
|
|
212
|
-
|
|
219
|
+
y(Array.isArray(e), "@param `pixel` should be an Array."), this.isOpen() && (this.pixel = e, this.positionContainer());
|
|
213
220
|
}
|
|
214
221
|
pop() {
|
|
215
222
|
const e = Array.from(this.menuEntries.keys()).pop();
|
|
@@ -226,29 +233,39 @@ class z extends T {
|
|
|
226
233
|
if (super.setMap(e), e) {
|
|
227
234
|
this.map = e, this.map.getViewport().addEventListener(this.options.eventType, this.contextMenuEventListener, !1), this.map.on("movestart", () => {
|
|
228
235
|
this.handleMapMove();
|
|
229
|
-
}),
|
|
236
|
+
}), E.on(
|
|
237
|
+
d.ADD_MENU_ENTRY,
|
|
238
|
+
(i, o) => {
|
|
239
|
+
this.handleAddMenuEntry(i, o);
|
|
240
|
+
},
|
|
241
|
+
this
|
|
242
|
+
), this.items = this.options.defaultItems ? this.options.items.concat(L) : this.options.items, v(
|
|
230
243
|
this.container.firstElementChild,
|
|
231
244
|
this.items,
|
|
232
245
|
this.options.width
|
|
233
246
|
);
|
|
234
247
|
const n = this.getMenuEntriesLength();
|
|
235
|
-
this.lineHeight = n > 0 ? this.container.offsetHeight / n :
|
|
248
|
+
this.lineHeight = n > 0 ? this.container.offsetHeight / n : z(this.container);
|
|
236
249
|
} else
|
|
237
250
|
this.removeListeners(), this.clear();
|
|
238
251
|
}
|
|
239
252
|
removeListeners() {
|
|
240
|
-
this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1);
|
|
253
|
+
this.map.getViewport().removeEventListener(this.options.eventType, this.contextMenuEventListener, !1), E.off(d.ADD_MENU_ENTRY);
|
|
241
254
|
}
|
|
242
255
|
removeMenuEntry(e) {
|
|
243
256
|
const n = document.getElementById(e);
|
|
244
257
|
n?.remove(), n?.removeEventListener("click", this.entryCallbackEventListener), this.menuEntries.delete(e);
|
|
245
258
|
}
|
|
246
259
|
handleContextMenu(e) {
|
|
247
|
-
this.coordinate = this.map.getEventCoordinate(e), this.pixel = this.map.getEventPixel(e), this.dispatchEvent(
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
260
|
+
this.coordinate = this.map.getEventCoordinate(e), this.pixel = this.map.getEventPixel(e), this.dispatchEvent(
|
|
261
|
+
new x({
|
|
262
|
+
type: d.BEFOREOPEN,
|
|
263
|
+
map: this.map,
|
|
264
|
+
originalEvent: e
|
|
265
|
+
})
|
|
266
|
+
), !this.disabled && (this.options.eventType === M.CONTEXTMENU && (e.stopPropagation(), e.preventDefault()), setTimeout(() => {
|
|
267
|
+
this.openMenu(e);
|
|
268
|
+
}), e.target?.addEventListener(
|
|
252
269
|
"pointerdown",
|
|
253
270
|
(n) => {
|
|
254
271
|
this.opened && (n.stopPropagation(), this.closeMenu());
|
|
@@ -256,8 +273,14 @@ class z extends T {
|
|
|
256
273
|
{ once: !0 }
|
|
257
274
|
));
|
|
258
275
|
}
|
|
259
|
-
openMenu() {
|
|
260
|
-
this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(
|
|
276
|
+
openMenu(e) {
|
|
277
|
+
this.menuEntries.size !== 0 && (this.opened = !0, this.positionContainer(), this.container.classList.remove(a.hidden), this.dispatchEvent(
|
|
278
|
+
new x({
|
|
279
|
+
type: d.OPEN,
|
|
280
|
+
map: this.map,
|
|
281
|
+
originalEvent: e
|
|
282
|
+
})
|
|
283
|
+
));
|
|
261
284
|
}
|
|
262
285
|
getMenuEntriesLength() {
|
|
263
286
|
return Array.from(this.menuEntries).filter(
|
|
@@ -273,18 +296,18 @@ class z extends T {
|
|
|
273
296
|
h: Math.round(this.lineHeight * this.getMenuEntriesLength())
|
|
274
297
|
}, o = n.w >= i.w ? this.pixel[0] + 5 : this.pixel[0] - i.w;
|
|
275
298
|
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
|
-
const
|
|
277
|
-
(m) => m.tagName === "LI" && m.classList.contains(
|
|
299
|
+
const c = (l) => Array.from(l.children).filter(
|
|
300
|
+
(m) => m.tagName === "LI" && m.classList.contains(a.submenu)
|
|
278
301
|
);
|
|
279
|
-
let
|
|
280
|
-
const f = (
|
|
281
|
-
|
|
282
|
-
const
|
|
283
|
-
`ul.${
|
|
302
|
+
let p = 0;
|
|
303
|
+
const f = (l, m) => {
|
|
304
|
+
p += 1, c(l).forEach((A) => {
|
|
305
|
+
const N = m >= i.w ? i.w - 8 : (i.w + 8) * -1, h = A.querySelector(
|
|
306
|
+
`ul.${a.container}`
|
|
284
307
|
), $ = Math.round(
|
|
285
|
-
this.lineHeight * Array.from(h.children).filter((
|
|
308
|
+
this.lineHeight * Array.from(h.children).filter((S) => S.tagName === "LI").length
|
|
286
309
|
);
|
|
287
|
-
h.style.left = `${
|
|
310
|
+
h.style.left = `${N}px`, h.style.right = "auto", h.style.top = n.h >= $ + i.h ? "0" : `-${h.offsetHeight - 25}px`, h.style.bottom = "auto", h.style.zIndex = String(p), c(h).length > 0 && f(h, m - i.w);
|
|
288
311
|
});
|
|
289
312
|
};
|
|
290
313
|
f(this.container.firstElementChild, n.w);
|
|
@@ -307,7 +330,6 @@ class z extends T {
|
|
|
307
330
|
this.menuEntries.set(e.id, e), "callback" in e && typeof e.callback == "function" && n.addEventListener("click", this.entryCallbackEventListener, !1);
|
|
308
331
|
}
|
|
309
332
|
}
|
|
310
|
-
window.ol?.control && (window.ol.control.ContextMenu = z);
|
|
311
333
|
export {
|
|
312
|
-
|
|
334
|
+
R as default
|
|
313
335
|
};
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
/*!
|
|
3
|
+
* ol-contextmenu - v5.1.1
|
|
4
|
+
* https://github.com/jonataswalker/ol-contextmenu
|
|
5
|
+
* Built: Sat Nov 12 2022 12:41:10 GMT-0300 (Brasilia Standard Time)
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
(function(l,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("ol/control/Control"),require("ol")):typeof define=="function"&&define.amd?define(["ol/control/Control","ol"],c):(l=typeof globalThis<"u"?globalThis:l||self,l.ContextMenu=c(l.ol.control.Control,l.ol))})(this,function(l,c){"use strict";var H=Object.defineProperty;var U=(l,c,f)=>c in l?H(l,c,{enumerable:!0,configurable:!0,writable:!0,value:f}):l[c]=f;var a=(l,c,f)=>(U(l,typeof c!="symbol"?c+"":c,f),f);const S=(n=>n&&typeof n=="object"&&"default"in n?n:{default:n})(l);var x=(n=>(n.CONTEXTMENU="contextmenu",n.CLICK="click",n.DBLCLICK="dblclick",n))(x||{}),p=(n=>(n.BEFOREOPEN="beforeopen",n.OPEN="open",n.CLOSE="close",n.ADD_MENU_ENTRY="add-menu-entry",n))(p||{});class w extends c.MapBrowserEvent{constructor(s){super(s.type,s.map,s.originalEvent)}}const T={width:150,scrollAt:4,eventType:x.CONTEXTMENU,defaultItems:!0,items:[]},m="ol-ctx-menu",r={namespace:m,container:`${m}-container`,separator:`${m}-separator`,submenu:`${m}-submenu`,hidden:`${m}-hidden`,icon:`${m}-icon`,zoomIn:`${m}-zoom-in`,zoomOut:`${m}-zoom-out`,unselectable:"ol-unselectable"},A=[{text:"Zoom In",classname:`${r.zoomIn} ${r.icon}`,callback:(n,s)=>{const e=s.getView();e.animate({zoom:Number(e.getZoom())+1,duration:700,center:n.coordinate})}},{text:"Zoom Out",classname:`${r.zoomOut} ${r.icon}`,callback:(n,s)=>{const e=s.getView();e.animate({zoom:Number(e.getZoom())-1,duration:700,center:n.coordinate})}}];var N={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,u=t.length;o<u;o++)t[o].fn!==s&&t[o].fn._!==s&&i.push(t[o]);return i.length?e[n]=i:delete e[n],this}},N.exports=b;var k=N.exports.TinyEmitter=b;const y=new k;function v(n){const s=document.createDocumentFragment(),e=document.createElement("div");for(e.innerHTML=n;e.firstChild;)s.append(e.firstChild);return s}function _(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=v("<span>Foo</span>"),i=v("<span>Foo</span>"),o=document.createElement("li"),u=document.createElement("li");o.append(t),u.append(i),s.append(o),s.append(u),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>`,M=v(E),h=document.createElement("li");return s.classname=s.classname||"",s.icon&&(s.classname===""?s.classname=r.icon:s.classname.includes(r.icon)===!1&&(s.classname+=` ${r.icon}`),h.setAttribute("style",`background-image:url(${s.icon})`)),h.id=t,h.className=s.classname,h.append(M),n.append(h),y.emit(p.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!1,callback:"callback"in s?s.callback:null,data:"data"in s?s.data:null},h),h}const i=`<li id="${t}" class="${r.separator}"><hr></li>`,o=v(i);n.append(o);const u=n.lastChild;return y.emit(p.ADD_MENU_ENTRY,{id:t,isSubmenu:e,isSeparator:!0,callback:null,data:null},u),u}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(r.submenu);const o=document.createElement("ul");o.classList.add(r.container),o.style.width=`${e}px`,i.append(o),L(o,t.items,e)}else $(n,t)})}const F="";function C(n,s){if(!n)throw new Error(s)}class D extends S.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={...T,...e};const i=document.createElement("ul");t.append(i),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}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 A}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(p.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()}),y.on(p.ADD_MENU_ENTRY,(i,o)=>{this.handleAddMenuEntry(i,o)},this),this.items=this.options.defaultItems?this.options.items.concat(A):this.options.items,L(this.container.firstElementChild,this.items,this.options.width);const t=this.getMenuEntriesLength();this.lineHeight=t>0?this.container.offsetHeight/t:_(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),y.off(p.ADD_MENU_ENTRY)}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(new w({type:p.BEFOREOPEN,map:this.map,originalEvent:e})),!this.disabled&&(this.options.eventType===x.CONTEXTMENU&&(e.stopPropagation(),e.preventDefault()),setTimeout(()=>{this.openMenu(e)}),e.target?.addEventListener("pointerdown",t=>{this.opened&&(t.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(e){this.menuEntries.size!==0&&(this.opened=!0,this.positionContainer(),this.container.classList.remove(r.hidden),this.dispatchEvent(new w({type:p.OPEN,map:this.map,originalEvent:e})))}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 u=h=>Array.from(h.children).filter(g=>g.tagName==="LI"&&g.classList.contains(r.submenu));let E=0;const M=(h,g)=>{E+=1,u(h).forEach(O=>{const I=g>=i.w?i.w-8:(i.w+8)*-1,d=O.querySelector(`ul.${r.container}`),z=Math.round(this.lineHeight*Array.from(d.children).filter(P=>P.tagName==="LI").length);d.style.left=`${I}px`,d.style.right="auto",d.style.top=t.h>=z+i.h?"0":`-${d.offsetHeight-25}px`,d.style.bottom="auto",d.style.zIndex=String(E),u(d).length>0&&M(d,g-i.w)})};M(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 D});
|
package/dist/types.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import BaseEvent from 'ol/events/Event.js';
|
|
4
|
-
import { Pixel } from 'ol/pixel.js';
|
|
1
|
+
import type { Coordinate } from 'ol/coordinate';
|
|
2
|
+
import { Map as OlMap, MapBrowserEvent } from 'ol';
|
|
5
3
|
export declare enum EventTypes {
|
|
6
4
|
CONTEXTMENU = "contextmenu",
|
|
7
5
|
CLICK = "click",
|
|
@@ -13,9 +11,12 @@ export declare enum CustomEventTypes {
|
|
|
13
11
|
CLOSE = "close",
|
|
14
12
|
ADD_MENU_ENTRY = "add-menu-entry"
|
|
15
13
|
}
|
|
16
|
-
export
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
export declare class ContextMenuEvent extends MapBrowserEvent<MouseEvent> {
|
|
15
|
+
constructor(options: {
|
|
16
|
+
type: `${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`;
|
|
17
|
+
map: OlMap;
|
|
18
|
+
originalEvent: MouseEvent;
|
|
19
|
+
});
|
|
19
20
|
}
|
|
20
21
|
export declare type CallbackObject = {
|
|
21
22
|
coordinate: Coordinate;
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ol-contextmenu",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
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,23 +45,24 @@
|
|
|
44
45
|
"prepublishOnly": "npm run lint && npm test && npm run build"
|
|
45
46
|
},
|
|
46
47
|
"devDependencies": {
|
|
47
|
-
"@swc/core": "^1.3.
|
|
48
|
-
"@swc/jest": "^0.2.
|
|
49
|
-
"@types/jest": "^29.
|
|
50
|
-
"eslint": "^8.
|
|
48
|
+
"@swc/core": "^1.3.15",
|
|
49
|
+
"@swc/jest": "^0.2.23",
|
|
50
|
+
"@types/jest": "^29.2.2",
|
|
51
|
+
"eslint": "^8.27.0",
|
|
51
52
|
"eslint-config-jwalker": "^7.9.2",
|
|
52
53
|
"eslint-config-prettier": "^8.5.0",
|
|
53
|
-
"eslint-plugin-jest": "^27.
|
|
54
|
+
"eslint-plugin-jest": "^27.1.5",
|
|
54
55
|
"eslint-plugin-prettier": "^4.2.1",
|
|
55
56
|
"identity-obj-proxy": "^3.0.0",
|
|
56
|
-
"jest": "^29.
|
|
57
|
-
"jest-environment-jsdom": "^29.
|
|
57
|
+
"jest": "^29.3.1",
|
|
58
|
+
"jest-environment-jsdom": "^29.3.1",
|
|
58
59
|
"ol": "^7.1.0",
|
|
59
60
|
"prettier": "^2.7.1",
|
|
60
61
|
"rimraf": "^3.0.2",
|
|
61
|
-
"typescript": "^4.8.
|
|
62
|
-
"vite": "^3.
|
|
63
|
-
"vite-plugin-
|
|
62
|
+
"typescript": "^4.8.4",
|
|
63
|
+
"vite": "^3.2.3",
|
|
64
|
+
"vite-plugin-banner": "^0.6.1",
|
|
65
|
+
"vite-plugin-dts": "^1.7.0"
|
|
64
66
|
},
|
|
65
67
|
"peerDependencies": {
|
|
66
68
|
"ol": "^7.1.0"
|