Skip to content

Commit c602f66

Browse files
GastonZalbaGastonZalba
committed
Fixed event types and moved emitter
1 parent d5f2d6a commit c602f66

File tree

5 files changed

+133
-20
lines changed

5 files changed

+133
-20
lines changed

‎index.html

+4
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,10 @@
156156
console.log({ evt });
157157
});
158158

159+
contextmenu.on('open', function (evt) {
160+
console.log({ evt });
161+
});
162+
159163
map.on('moveend', () => {
160164
console.log('moveend', contextmenu.isOpen());
161165
});

‎src/main.ts

+86-14
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,21 @@ import type { Coordinate } from 'ol/coordinate';
33
import OlMap from 'ol/Map';
44
import Control from 'ol/control/Control';
55
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';
610

711
import { CSS_CLASSES, DEFAULT_ITEMS, DEFAULT_OPTIONS } from './constants';
8-
import { CallbackObject, CustomEventTypes, EventTypes, Item, MenuEntry, Options } from './types';
12+
import {
13+
CallbackObject,
14+
ContextMenuEvent,
15+
CustomEventTypes,
16+
EventTypes,
17+
Item,
18+
MenuEntry,
19+
Options,
20+
} from './types';
921
import emitter from './emitter';
1022
import { addMenuEntries, getLineHeight } from './helpers/dom';
1123

@@ -40,6 +52,54 @@ export default class ContextMenu extends Control {
4052

4153
protected menuEntries: Map<string, MenuEntry> = new Map();
4254

55+
declare on: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, EventsKey> &
56+
OnSignature<
57+
`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`,
58+
ContextMenuEvent,
59+
EventsKey
60+
> &
61+
OnSignature<ObjectEventTypes, ObjectEvent, EventsKey> &
62+
CombinedOnSignature<
63+
| `${CustomEventTypes.BEFOREOPEN}`
64+
| `${CustomEventTypes.OPEN}`
65+
| ObjectEventTypes
66+
| `${CustomEventTypes.CLOSE}`
67+
| OlEventTypes,
68+
EventsKey
69+
>;
70+
71+
declare once: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, EventsKey> &
72+
OnSignature<
73+
`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`,
74+
ContextMenuEvent,
75+
EventsKey
76+
> &
77+
OnSignature<ObjectEventTypes, ObjectEvent, EventsKey> &
78+
CombinedOnSignature<
79+
| `${CustomEventTypes.BEFOREOPEN}`
80+
| `${CustomEventTypes.OPEN}`
81+
| ObjectEventTypes
82+
| `${CustomEventTypes.CLOSE}`
83+
| OlEventTypes,
84+
EventsKey
85+
>;
86+
87+
declare un: OnSignature<OlEventTypes | `${CustomEventTypes.CLOSE}`, BaseEvent, void> &
88+
OnSignature<
89+
`${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`,
90+
ContextMenuEvent,
91+
EventsKey
92+
> &
93+
OnSignature<ObjectEventTypes, ObjectEvent, void> &
94+
CombinedOnSignature<
95+
| `${CustomEventTypes.BEFOREOPEN}`
96+
| `${CustomEventTypes.OPEN}`
97+
| ObjectEventTypes
98+
| `${CustomEventTypes.CLOSE}`
99+
| OlEventTypes,
100+
void
101+
>;
102+
43103
options: Options;
44104

45105
constructor(opts: Partial<Options> = {}) {
@@ -72,14 +132,6 @@ export default class ContextMenu extends Control {
72132
};
73133
this.disabled = false;
74134
this.opened = false;
75-
76-
emitter.on(
77-
CustomEventTypes.ADD_MENU_ENTRY,
78-
(item: MenuEntry, element: HTMLLIElement) => {
79-
this.handleAddMenuEntry(item, element);
80-
},
81-
this
82-
);
83135
}
84136

85137
clear() {
@@ -164,6 +216,14 @@ export default class ContextMenu extends Control {
164216
this.handleMapMove();
165217
});
166218

219+
emitter.on(
220+
CustomEventTypes.ADD_MENU_ENTRY,
221+
(item: MenuEntry, element: HTMLLIElement) => {
222+
this.handleAddMenuEntry(item, element);
223+
},
224+
this
225+
);
226+
167227
this.items = this.options.defaultItems
168228
? this.options.items.concat(DEFAULT_ITEMS)
169229
: this.options.items;
@@ -190,6 +250,8 @@ export default class ContextMenu extends Control {
190250
this.map
191251
.getViewport()
192252
.removeEventListener(this.options.eventType, this.contextMenuEventListener, false);
253+
254+
emitter.off(CustomEventTypes.ADD_MENU_ENTRY);
193255
}
194256

195257
protected removeMenuEntry(id: string) {
@@ -203,11 +265,13 @@ export default class ContextMenu extends Control {
203265
protected handleContextMenu(evt: MouseEvent) {
204266
this.coordinate = this.map.getEventCoordinate(evt);
205267
this.pixel = this.map.getEventPixel(evt);
206-
this.dispatchEvent({
207-
type: CustomEventTypes.BEFOREOPEN,
208-
pixel: this.pixel,
209-
coordinate: this.coordinate,
210-
} as unknown as BaseEvent);
268+
this.dispatchEvent(
269+
new ContextMenuEvent({
270+
type: CustomEventTypes.BEFOREOPEN,
271+
pixel: this.pixel,
272+
coordinate: this.coordinate,
273+
})
274+
);
211275

212276
if (this.disabled) return;
213277

@@ -238,6 +302,14 @@ export default class ContextMenu extends Control {
238302
this.opened = true;
239303
this.positionContainer();
240304
this.container.classList.remove(CSS_CLASSES.hidden);
305+
306+
this.dispatchEvent(
307+
new ContextMenuEvent({
308+
type: CustomEventTypes.OPEN,
309+
pixel: this.pixel,
310+
coordinate: this.coordinate,
311+
})
312+
);
241313
}
242314

243315
protected getMenuEntriesLength(): number {

‎src/types.ts

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Coordinate } from 'ol/coordinate';
22
import type { Pixel } from 'ol/pixel';
33
import { Map as OlMap } from 'ol';
4-
import BaseEvent from 'ol/events/Event';
4+
import BaseEvent from 'ol/events/Event.js';
55

66
export enum EventTypes {
77
CONTEXTMENU = 'contextmenu',
@@ -16,9 +16,19 @@ export enum CustomEventTypes {
1616
ADD_MENU_ENTRY = 'add-menu-entry',
1717
}
1818

19-
export interface ContextMenuEvent extends BaseEvent {
20-
coordinate: Coordinate;
21-
pixel: Pixel;
19+
export class ContextMenuEvent extends BaseEvent {
20+
public coordinate: Coordinate;
21+
public pixel: Pixel;
22+
23+
constructor(options: {
24+
type: `${CustomEventTypes.BEFOREOPEN}` | `${CustomEventTypes.OPEN}`;
25+
coordinate: Coordinate;
26+
pixel: Pixel;
27+
}) {
28+
super(options.type);
29+
this.pixel = options.pixel;
30+
this.coordinate = options.coordinate;
31+
}
2232
}
2333

2434
export type CallbackObject = {

‎test/instance.spec.ts

+27-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
import OlMap from 'ol/Map';
2+
import BaseEvent from 'ol/events/Event';
3+
14
import { DEFAULT_ITEMS, DEFAULT_OPTIONS } from '../src/constants';
25
import ContextMenu from '../src/main';
3-
import { Item } from '../src/types';
6+
import { ContextMenuEvent, Item } from '../src/types';
47

58
const items: Item[] = [
69
'-',
@@ -46,6 +49,11 @@ describe('Instance options', () => {
4649
describe('Instance methods', () => {
4750
const menu = new ContextMenu();
4851

52+
// Add map to initialize the emitter
53+
new OlMap({
54+
controls: [menu],
55+
});
56+
4957
test('getDefaultItems()', () => {
5058
expect(toJSON(menu.getDefaultItems())).toEqual(toJSON(DEFAULT_ITEMS));
5159
});
@@ -103,3 +111,21 @@ describe('Throw errors', () => {
103111
}).toThrow();
104112
});
105113
});
114+
115+
// EVENTS
116+
// The lines below are not a test per se, but as an ESLint indicator if the events are not correctly declared
117+
const context = new ContextMenu();
118+
119+
context.on('beforeopen', (evt: ContextMenuEvent) => {
120+
evt.pixel;
121+
evt.coordinate;
122+
});
123+
124+
context.on('open', (evt: ContextMenuEvent) => {
125+
evt.pixel;
126+
evt.coordinate;
127+
});
128+
129+
context.on('close', (evt: BaseEvent) => {
130+
evt.target;
131+
});

‎vite.config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import { CSS_CLASSES } from './src/constants';
99
const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
1010

1111
// eslint-disable-next-line @typescript-eslint/no-shadow
12-
const external = ['ol/control/Control', 'ol/PluggableMap', 'ol'];
12+
const external = ['ol/control/Control', 'ol/events/Event', 'ol/PluggableMap', 'ol'];
1313
const globals = {
1414
'ol/control/Control': 'ol.control.Control',
15+
'ol/events/Event': 'ol.events.Event',
1516
ol: 'ol',
1617
};
1718

0 commit comments

Comments
 (0)