@deck.gl/widgets 9.1.11 → 9.2.0-alpha.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/dist/compass-widget.d.ts +11 -34
- package/dist/compass-widget.d.ts.map +1 -1
- package/dist/compass-widget.js +27 -62
- package/dist/compass-widget.js.map +1 -1
- package/dist/context-menu-widget.d.ts +37 -0
- package/dist/context-menu-widget.d.ts.map +1 -0
- package/dist/context-menu-widget.js +74 -0
- package/dist/context-menu-widget.js.map +1 -0
- package/dist/dist.dev.js +2271 -581
- package/dist/fps-widget.d.ts +29 -0
- package/dist/fps-widget.d.ts.map +1 -0
- package/dist/fps-widget.js +51 -0
- package/dist/fps-widget.js.map +1 -0
- package/dist/fullscreen-widget.d.ts +15 -33
- package/dist/fullscreen-widget.d.ts.map +1 -1
- package/dist/fullscreen-widget.js +20 -51
- package/dist/fullscreen-widget.js.map +1 -1
- package/dist/geocoder-widget.d.ts +51 -0
- package/dist/geocoder-widget.d.ts.map +1 -0
- package/dist/geocoder-widget.js +138 -0
- package/dist/geocoder-widget.js.map +1 -0
- package/dist/gimbal-widget.d.ts +33 -0
- package/dist/gimbal-widget.d.ts.map +1 -0
- package/dist/gimbal-widget.js +116 -0
- package/dist/gimbal-widget.js.map +1 -0
- package/dist/index.cjs +1587 -341
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.ts +37 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +27 -7
- package/dist/index.js.map +1 -1
- package/dist/info-widget.d.ts +37 -0
- package/dist/info-widget.d.ts.map +1 -0
- package/dist/info-widget.js +183 -0
- package/dist/info-widget.js.map +1 -0
- package/dist/lib/components/button-group.d.ts +8 -0
- package/dist/lib/components/button-group.d.ts.map +1 -0
- package/dist/lib/components/button-group.js +7 -0
- package/dist/lib/components/button-group.js.map +1 -0
- package/dist/lib/components/dropdown-menu.d.ts +8 -0
- package/dist/lib/components/dropdown-menu.d.ts.map +1 -0
- package/dist/lib/components/dropdown-menu.js +55 -0
- package/dist/lib/components/dropdown-menu.js.map +1 -0
- package/dist/lib/components/grouped-icon-button.d.ts +8 -0
- package/dist/lib/components/grouped-icon-button.d.ts.map +1 -0
- package/dist/lib/components/grouped-icon-button.js +7 -0
- package/dist/lib/components/grouped-icon-button.js.map +1 -0
- package/dist/lib/components/icon-button.d.ts +11 -0
- package/dist/lib/components/icon-button.d.ts.map +1 -0
- package/dist/lib/components/icon-button.js +7 -0
- package/dist/lib/components/icon-button.js.map +1 -0
- package/dist/lib/components/icon-menu.d.ts +16 -0
- package/dist/lib/components/icon-menu.d.ts.map +1 -0
- package/dist/lib/components/icon-menu.js +49 -0
- package/dist/lib/components/icon-menu.js.map +1 -0
- package/dist/lib/components/simple-menu.d.ts +16 -0
- package/dist/lib/components/simple-menu.d.ts.map +1 -0
- package/dist/lib/components/simple-menu.js +30 -0
- package/dist/lib/components/simple-menu.js.map +1 -0
- package/dist/lib/geocode/geocoder-history.d.ts +23 -0
- package/dist/lib/geocode/geocoder-history.d.ts.map +1 -0
- package/dist/lib/geocode/geocoder-history.js +64 -0
- package/dist/lib/geocode/geocoder-history.js.map +1 -0
- package/dist/lib/geocode/geocoder.d.ts +15 -0
- package/dist/lib/geocode/geocoder.d.ts.map +1 -0
- package/dist/lib/geocode/geocoder.js +5 -0
- package/dist/lib/geocode/geocoder.js.map +1 -0
- package/dist/lib/geocode/geocoders.d.ts +68 -0
- package/dist/lib/geocode/geocoders.d.ts.map +1 -0
- package/dist/lib/geocode/geocoders.js +182 -0
- package/dist/lib/geocode/geocoders.js.map +1 -0
- package/dist/loading-widget.d.ts +26 -0
- package/dist/loading-widget.d.ts.map +1 -0
- package/dist/loading-widget.js +41 -0
- package/dist/loading-widget.js.map +1 -0
- package/dist/reset-view-widget.d.ts +4 -4
- package/dist/reset-view-widget.d.ts.map +1 -1
- package/dist/reset-view-widget.js +7 -10
- package/dist/reset-view-widget.js.map +1 -1
- package/dist/scale-widget.d.ts +28 -0
- package/dist/scale-widget.d.ts.map +1 -0
- package/dist/scale-widget.js +111 -0
- package/dist/scale-widget.js.map +1 -0
- package/dist/screenshot-widget.d.ts +4 -4
- package/dist/screenshot-widget.d.ts.map +1 -1
- package/dist/screenshot-widget.js +7 -14
- package/dist/screenshot-widget.js.map +1 -1
- package/dist/splitter-widget.d.ts +32 -0
- package/dist/splitter-widget.d.ts.map +1 -0
- package/dist/splitter-widget.js +123 -0
- package/dist/splitter-widget.js.map +1 -0
- package/dist/stats-widget.d.ts +36 -0
- package/dist/stats-widget.d.ts.map +1 -0
- package/dist/stats-widget.js +115 -0
- package/dist/stats-widget.js.map +1 -0
- package/dist/stylesheet.css +121 -4
- package/dist/theme-widget.d.ts +31 -0
- package/dist/theme-widget.d.ts.map +1 -0
- package/dist/theme-widget.js +83 -0
- package/dist/theme-widget.js.map +1 -0
- package/dist/themes.d.ts +65 -36
- package/dist/themes.d.ts.map +1 -1
- package/dist/themes.js +20 -8
- package/dist/themes.js.map +1 -1
- package/dist/timeline-widget.d.ts +59 -0
- package/dist/timeline-widget.d.ts.map +1 -0
- package/dist/timeline-widget.js +83 -0
- package/dist/timeline-widget.js.map +1 -0
- package/dist/view-selector-widget.d.ts +33 -0
- package/dist/view-selector-widget.d.ts.map +1 -0
- package/dist/view-selector-widget.js +62 -0
- package/dist/view-selector-widget.js.map +1 -0
- package/dist/zoom-widget.d.ts +14 -43
- package/dist/zoom-widget.d.ts.map +1 -1
- package/dist/zoom-widget.js +14 -56
- package/dist/zoom-widget.js.map +1 -1
- package/dist.min.js +3 -1
- package/package.json +4 -3
- package/src/compass-widget.tsx +44 -106
- package/src/context-menu-widget.tsx +115 -0
- package/src/fps-widget.tsx +67 -0
- package/src/fullscreen-widget.tsx +33 -86
- package/src/geocoder-widget.tsx +209 -0
- package/src/gimbal-widget.tsx +188 -0
- package/src/index.ts +58 -8
- package/src/info-widget.tsx +225 -0
- package/src/lib/components/button-group.tsx +16 -0
- package/src/lib/components/dropdown-menu.tsx +98 -0
- package/src/lib/components/grouped-icon-button.tsx +24 -0
- package/src/lib/components/icon-button.tsx +30 -0
- package/src/lib/components/icon-menu.tsx +89 -0
- package/src/lib/components/simple-menu.tsx +52 -0
- package/src/lib/geocode/geocoder-history.ts +73 -0
- package/src/lib/geocode/geocoder.ts +15 -0
- package/src/lib/geocode/geocoders.ts +199 -0
- package/src/loading-widget.tsx +67 -0
- package/src/reset-view-widget.tsx +8 -11
- package/src/scale-widget.tsx +183 -0
- package/src/screenshot-widget.tsx +9 -11
- package/src/splitter-widget.tsx +179 -0
- package/src/stats-widget.tsx +166 -0
- package/src/stylesheet.css +121 -4
- package/src/theme-widget.tsx +120 -0
- package/src/themes.ts +45 -12
- package/src/timeline-widget.tsx +155 -0
- package/src/view-selector-widget.tsx +108 -0
- package/src/zoom-widget.tsx +39 -113
- package/dist/components.d.ts +0 -4
- package/dist/components.d.ts.map +0 -1
- package/dist/components.js +0 -17
- package/dist/components.js.map +0 -1
- package/dist/widget-impl.d.ts +0 -29
- package/dist/widget-impl.d.ts.map +0 -1
- package/dist/widget-impl.js +0 -60
- package/dist/widget-impl.js.map +0 -1
- package/src/components.tsx +0 -38
- package/src/widget-impl.ts +0 -88
package/dist/compass-widget.d.ts
CHANGED
|
@@ -1,50 +1,27 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Widget positioning within the view. Default 'top-left'.
|
|
6
|
-
*/
|
|
1
|
+
import { Widget } from '@deck.gl/core';
|
|
2
|
+
import type { Viewport, WidgetPlacement, WidgetProps } from '@deck.gl/core';
|
|
3
|
+
export type CompassWidgetProps = WidgetProps & {
|
|
7
4
|
placement?: WidgetPlacement;
|
|
8
|
-
/**
|
|
9
|
-
* View to attach to and interact with. Required when using multiple views.
|
|
10
|
-
*/
|
|
5
|
+
/** View to attach to and interact with. Required when using multiple views. */
|
|
11
6
|
viewId?: string | null;
|
|
12
|
-
/**
|
|
13
|
-
* Tooltip message.
|
|
14
|
-
*/
|
|
7
|
+
/** Tooltip message. */
|
|
15
8
|
label?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Bearing and pitch reset transition duration in ms.
|
|
18
|
-
*/
|
|
9
|
+
/** Bearing and pitch reset transition duration in ms. */
|
|
19
10
|
transitionDuration?: number;
|
|
20
|
-
/**
|
|
21
|
-
* CSS inline style overrides.
|
|
22
|
-
*/
|
|
23
|
-
style?: Partial<CSSStyleDeclaration>;
|
|
24
|
-
/**
|
|
25
|
-
* Additional CSS class.
|
|
26
|
-
*/
|
|
27
|
-
className?: string;
|
|
28
11
|
};
|
|
29
|
-
export declare class CompassWidget
|
|
30
|
-
|
|
31
|
-
|
|
12
|
+
export declare class CompassWidget extends Widget<CompassWidgetProps> {
|
|
13
|
+
static defaultProps: Required<CompassWidgetProps>;
|
|
14
|
+
className: string;
|
|
32
15
|
placement: WidgetPlacement;
|
|
33
16
|
viewId?: string | null;
|
|
34
17
|
viewports: {
|
|
35
18
|
[id: string]: Viewport;
|
|
36
19
|
};
|
|
37
|
-
|
|
38
|
-
element?: HTMLDivElement;
|
|
39
|
-
constructor(props: CompassWidgetProps);
|
|
20
|
+
constructor(props?: CompassWidgetProps);
|
|
40
21
|
setProps(props: Partial<CompassWidgetProps>): void;
|
|
22
|
+
onRenderHTML(rootElement: HTMLElement): void;
|
|
41
23
|
onViewportChange(viewport: Viewport): void;
|
|
42
|
-
onAdd({ deck }: {
|
|
43
|
-
deck: Deck<any>;
|
|
44
|
-
}): HTMLDivElement;
|
|
45
24
|
getRotation(viewport?: Viewport): number[];
|
|
46
|
-
private update;
|
|
47
|
-
onRemove(): void;
|
|
48
25
|
handleCompassReset(viewport: Viewport): void;
|
|
49
26
|
}
|
|
50
27
|
//# sourceMappingURL=compass-widget.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass-widget.d.ts","sourceRoot":"","sources":["../src/compass-widget.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"compass-widget.d.ts","sourceRoot":"","sources":["../src/compass-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,MAAM,EAAyD,MAAM,eAAe,CAAC;AAC7F,OAAO,KAAK,EAAC,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1E,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,qBAAa,aAAc,SAAQ,MAAM,CAAC,kBAAkB,CAAC;IAC3D,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAO/C;IAEF,SAAS,SAAyB;IAClC,SAAS,EAAE,eAAe,CAAc;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,SAAS,EAAE;QAAC,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAA;KAAC,CAAM;gBAE7B,KAAK,GAAE,kBAAuB;IAK1C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC;IAM3C,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAoC5C,gBAAgB,CAAC,QAAQ,EAAE,QAAQ;IAQnC,WAAW,CAAC,QAAQ,CAAC,EAAE,QAAQ;IAS/B,kBAAkB,CAAC,QAAQ,EAAE,QAAQ;CActC"}
|
package/dist/compass-widget.js
CHANGED
|
@@ -2,64 +2,40 @@ import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
|
|
|
2
2
|
// deck.gl
|
|
3
3
|
// SPDX-License-Identifier: MIT
|
|
4
4
|
// Copyright (c) vis.gl contributors
|
|
5
|
-
|
|
6
|
-
import { FlyToInterpolator, WebMercatorViewport, _GlobeViewport, _deepEqual as deepEqual, _applyStyles as applyStyles, _removeStyles as removeStyles } from '@deck.gl/core';
|
|
5
|
+
import { Widget, FlyToInterpolator, WebMercatorViewport, _GlobeViewport } from '@deck.gl/core';
|
|
7
6
|
import { render } from 'preact';
|
|
8
|
-
export class CompassWidget {
|
|
9
|
-
constructor(props) {
|
|
10
|
-
|
|
7
|
+
export class CompassWidget extends Widget {
|
|
8
|
+
constructor(props = {}) {
|
|
9
|
+
super(props, CompassWidget.defaultProps);
|
|
10
|
+
this.className = 'deck-widget-compass';
|
|
11
11
|
this.placement = 'top-left';
|
|
12
12
|
this.viewId = null;
|
|
13
13
|
this.viewports = {};
|
|
14
|
-
this.
|
|
15
|
-
this.viewId = props.viewId ?? this.viewId;
|
|
16
|
-
this.placement = props.placement ?? this.placement;
|
|
17
|
-
this.props = {
|
|
18
|
-
...props,
|
|
19
|
-
transitionDuration: props.transitionDuration ?? 200,
|
|
20
|
-
label: props.label ?? 'Reset Compass',
|
|
21
|
-
style: props.style ?? {}
|
|
22
|
-
};
|
|
14
|
+
this.setProps(this.props);
|
|
23
15
|
}
|
|
24
16
|
setProps(props) {
|
|
25
17
|
this.placement = props.placement ?? this.placement;
|
|
26
18
|
this.viewId = props.viewId ?? this.viewId;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
Object.assign(this.props, props);
|
|
42
|
-
this.update();
|
|
19
|
+
super.setProps(props);
|
|
20
|
+
}
|
|
21
|
+
onRenderHTML(rootElement) {
|
|
22
|
+
const viewId = this.viewId || Object.values(this.viewports)[0]?.id || 'default-view';
|
|
23
|
+
const widgetViewport = this.viewports[viewId];
|
|
24
|
+
const [rz, rx] = this.getRotation(widgetViewport);
|
|
25
|
+
const ui = (_jsx("div", { className: "deck-widget-button", style: { perspective: 100 }, children: _jsx("button", { type: "button", onClick: () => {
|
|
26
|
+
for (const viewport of Object.values(this.viewports)) {
|
|
27
|
+
this.handleCompassReset(viewport);
|
|
28
|
+
}
|
|
29
|
+
}, title: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: _jsx("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: _jsxs("g", { transform: `rotate(${rz},13,13)`, children: [_jsx("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, rgb(240, 92, 68))" }), _jsx("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, rgb(204, 204, 204))" })] }) }) }) }));
|
|
30
|
+
render(ui, rootElement);
|
|
43
31
|
}
|
|
44
32
|
onViewportChange(viewport) {
|
|
45
33
|
// no need to update if viewport is the same
|
|
46
34
|
if (!viewport.equals(this.viewports[viewport.id])) {
|
|
47
35
|
this.viewports[viewport.id] = viewport;
|
|
48
|
-
this.
|
|
36
|
+
this.updateHTML();
|
|
49
37
|
}
|
|
50
38
|
}
|
|
51
|
-
onAdd({ deck }) {
|
|
52
|
-
const { style, className } = this.props;
|
|
53
|
-
const element = document.createElement('div');
|
|
54
|
-
element.classList.add('deck-widget', 'deck-widget-compass');
|
|
55
|
-
if (className)
|
|
56
|
-
element.classList.add(className);
|
|
57
|
-
applyStyles(element, style);
|
|
58
|
-
this.deck = deck;
|
|
59
|
-
this.element = element;
|
|
60
|
-
this.update();
|
|
61
|
-
return element;
|
|
62
|
-
}
|
|
63
39
|
getRotation(viewport) {
|
|
64
40
|
if (viewport instanceof WebMercatorViewport) {
|
|
65
41
|
return [-viewport.bearing, viewport.pitch];
|
|
@@ -69,25 +45,6 @@ export class CompassWidget {
|
|
|
69
45
|
}
|
|
70
46
|
return [0, 0];
|
|
71
47
|
}
|
|
72
|
-
update() {
|
|
73
|
-
const viewId = this.viewId || Object.values(this.viewports)[0]?.id || 'default-view';
|
|
74
|
-
const viewport = this.viewports[viewId];
|
|
75
|
-
const [rz, rx] = this.getRotation(viewport);
|
|
76
|
-
const element = this.element;
|
|
77
|
-
if (!element) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
const ui = (_jsx("div", { className: "deck-widget-button", style: { perspective: 100 }, children: _jsx("button", { type: "button", onClick: () => {
|
|
81
|
-
for (const viewport of Object.values(this.viewports)) {
|
|
82
|
-
this.handleCompassReset(viewport);
|
|
83
|
-
}
|
|
84
|
-
}, title: this.props.label, style: { transform: `rotateX(${rx}deg)` }, children: _jsx("svg", { fill: "none", width: "100%", height: "100%", viewBox: "0 0 26 26", children: _jsxs("g", { transform: `rotate(${rz},13,13)`, children: [_jsx("path", { d: "M10 13.0001L12.9999 5L15.9997 13.0001H10Z", fill: "var(--icon-compass-north-color, #F05C44)" }), _jsx("path", { d: "M16.0002 12.9999L13.0004 21L10.0005 12.9999H16.0002Z", fill: "var(--icon-compass-south-color, #C2C2CC)" })] }) }) }) }));
|
|
85
|
-
render(ui, element);
|
|
86
|
-
}
|
|
87
|
-
onRemove() {
|
|
88
|
-
this.deck = undefined;
|
|
89
|
-
this.element = undefined;
|
|
90
|
-
}
|
|
91
48
|
handleCompassReset(viewport) {
|
|
92
49
|
const viewId = this.viewId || viewport.id || 'default-view';
|
|
93
50
|
if (viewport instanceof WebMercatorViewport) {
|
|
@@ -103,4 +60,12 @@ export class CompassWidget {
|
|
|
103
60
|
}
|
|
104
61
|
}
|
|
105
62
|
}
|
|
63
|
+
CompassWidget.defaultProps = {
|
|
64
|
+
...Widget.defaultProps,
|
|
65
|
+
id: 'compass',
|
|
66
|
+
placement: 'top-left',
|
|
67
|
+
viewId: null,
|
|
68
|
+
label: 'Reset Compass',
|
|
69
|
+
transitionDuration: 200
|
|
70
|
+
};
|
|
106
71
|
//# sourceMappingURL=compass-widget.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compass-widget.js","sourceRoot":"","sources":["../src/compass-widget.tsx"],"names":[],"mappings":";AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,
|
|
1
|
+
{"version":3,"file":"compass-widget.js","sourceRoot":"","sources":["../src/compass-widget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Widget, WidgetProps } from '@deck.gl/core';
|
|
2
|
+
import type { Deck, PickingInfo } from '@deck.gl/core';
|
|
3
|
+
export type ContextWidgetMenuItem = {
|
|
4
|
+
label: string;
|
|
5
|
+
key: string;
|
|
6
|
+
};
|
|
7
|
+
export type ContextMenuWidgetProps = WidgetProps & {
|
|
8
|
+
/** View to attach to and interact with. Required when using multiple views. */
|
|
9
|
+
viewId?: string | null;
|
|
10
|
+
/** Controls visibility of the context menu */
|
|
11
|
+
visible?: boolean;
|
|
12
|
+
/** Screen position at which to place the menu */
|
|
13
|
+
position: {
|
|
14
|
+
x: number;
|
|
15
|
+
y: number;
|
|
16
|
+
};
|
|
17
|
+
/** Items to render */
|
|
18
|
+
menuItems: ContextWidgetMenuItem[];
|
|
19
|
+
/** Provide menu items for the menu given the picked object */
|
|
20
|
+
getMenuItems: (info: PickingInfo, widget: ContextMenuWidget) => ContextWidgetMenuItem[] | null;
|
|
21
|
+
/** Callback with the selected item */
|
|
22
|
+
onMenuItemSelected?: (key: string, pickInfo: PickingInfo | null) => void;
|
|
23
|
+
};
|
|
24
|
+
export declare class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
|
|
25
|
+
static defaultProps: Required<ContextMenuWidgetProps>;
|
|
26
|
+
className: string;
|
|
27
|
+
placement: "fill";
|
|
28
|
+
pickInfo: PickingInfo | null;
|
|
29
|
+
constructor(props: ContextMenuWidgetProps);
|
|
30
|
+
onAdd({ deck }: {
|
|
31
|
+
deck: Deck<any>;
|
|
32
|
+
}): HTMLDivElement;
|
|
33
|
+
onRenderHTML(rootElement: HTMLElement): void;
|
|
34
|
+
handleContextMenu(srcEvent: MouseEvent): boolean;
|
|
35
|
+
hide(): void;
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=context-menu-widget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context-menu-widget.d.ts","sourceRoot":"","sources":["../src/context-menu-widget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAClD,OAAO,KAAK,EAAC,IAAI,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AASrD,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACjC,sBAAsB;IACtB,SAAS,EAAE,qBAAqB,EAAE,CAAC;IACnC,8DAA8D;IAC9D,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,KAAK,qBAAqB,EAAE,GAAG,IAAI,CAAC;IAC/F,sCAAsC;IACtC,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1E,CAAC;AAEF,qBAAa,iBAAkB,SAAQ,MAAM,CAAC,sBAAsB,CAAC;IACnE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CASnD;IAEF,SAAS,SAA8B;IACvC,SAAS,SAAmB;IAE5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAQ;gBAExB,KAAK,EAAE,sBAAsB;IAMzC,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA;KAAC,GAAG,cAAc;IAiBhD,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAe5C,iBAAiB,CAAC,QAAQ,EAAE,UAAU,GAAG,OAAO;IAyBhD,IAAI,IAAI,IAAI;CAGb"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
|
+
/* global document */
|
|
3
|
+
import { Widget } from '@deck.gl/core';
|
|
4
|
+
import { render } from 'preact';
|
|
5
|
+
import { SimpleMenu } from "./lib/components/simple-menu.js";
|
|
6
|
+
/** The standard, modern way is to use event.button === 2, where button is the standardized property (0 = left, 1 = middle, 2 = right). */
|
|
7
|
+
const MOUSE_BUTTON_RIGHT = 2;
|
|
8
|
+
/** A name for the legacy MouseEvent.which value that corresponds to the right-mouse button. In older browsers, the check is: if (event.which === 3) */
|
|
9
|
+
const MOUSE_WHICH_RIGHT = 3;
|
|
10
|
+
export class ContextMenuWidget extends Widget {
|
|
11
|
+
constructor(props) {
|
|
12
|
+
super(props, ContextMenuWidget.defaultProps);
|
|
13
|
+
this.className = 'deck-widget-context-menu';
|
|
14
|
+
this.placement = 'fill';
|
|
15
|
+
this.pickInfo = null;
|
|
16
|
+
this.pickInfo = null;
|
|
17
|
+
this.setProps(props);
|
|
18
|
+
}
|
|
19
|
+
onAdd({ deck }) {
|
|
20
|
+
const element = document.createElement('div');
|
|
21
|
+
element.classList.add('deck-widget', 'deck-widget-context-menu');
|
|
22
|
+
const style = {
|
|
23
|
+
margin: '0px',
|
|
24
|
+
top: '0px',
|
|
25
|
+
left: '0px',
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
pointerEvents: 'auto'
|
|
28
|
+
};
|
|
29
|
+
Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
|
|
30
|
+
deck.getCanvas()?.addEventListener('click', () => this.hide());
|
|
31
|
+
deck.getCanvas()?.addEventListener('contextmenu', event => this.handleContextMenu(event));
|
|
32
|
+
return element;
|
|
33
|
+
}
|
|
34
|
+
onRenderHTML(rootElement) {
|
|
35
|
+
const { visible, position, menuItems } = this.props;
|
|
36
|
+
const ui = visible && menuItems.length ? (_jsx(SimpleMenu, { menuItems: menuItems, onItemSelected: key => this.props.onMenuItemSelected(key, this.pickInfo), position: position, style: { pointerEvents: 'auto' } })) : null;
|
|
37
|
+
render(ui, rootElement);
|
|
38
|
+
}
|
|
39
|
+
handleContextMenu(srcEvent) {
|
|
40
|
+
if (srcEvent &&
|
|
41
|
+
(srcEvent.button === MOUSE_BUTTON_RIGHT || srcEvent.which === MOUSE_WHICH_RIGHT)) {
|
|
42
|
+
this.pickInfo =
|
|
43
|
+
this.deck?.pickObject({
|
|
44
|
+
x: srcEvent.clientX,
|
|
45
|
+
y: srcEvent.clientY
|
|
46
|
+
}) || null;
|
|
47
|
+
const menuItems = (this.pickInfo && this.props.getMenuItems?.(this.pickInfo, this)) || [];
|
|
48
|
+
const visible = menuItems.length > 0;
|
|
49
|
+
this.setProps({
|
|
50
|
+
visible,
|
|
51
|
+
position: { x: srcEvent.clientX, y: srcEvent.clientY },
|
|
52
|
+
menuItems
|
|
53
|
+
});
|
|
54
|
+
this.updateHTML();
|
|
55
|
+
srcEvent.preventDefault();
|
|
56
|
+
return visible;
|
|
57
|
+
}
|
|
58
|
+
return false;
|
|
59
|
+
}
|
|
60
|
+
hide() {
|
|
61
|
+
this.setProps({ visible: false });
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
ContextMenuWidget.defaultProps = {
|
|
65
|
+
...Widget.defaultProps,
|
|
66
|
+
viewId: null,
|
|
67
|
+
visible: false,
|
|
68
|
+
position: { x: 0, y: 0 },
|
|
69
|
+
getMenuItems: undefined,
|
|
70
|
+
menuItems: [],
|
|
71
|
+
// eslint-disable-next-line no-console
|
|
72
|
+
onMenuItemSelected: (key, pickInfo) => console.log('Context menu item selected:', key, pickInfo)
|
|
73
|
+
};
|
|
74
|
+
//# sourceMappingURL=context-menu-widget.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context-menu-widget.js","sourceRoot":"","sources":["../src/context-menu-widget.tsx"],"names":[],"mappings":";AAAA,qBAAqB;AACrB,OAAO,EAAC,MAAM,EAAc,MAAM,eAAe,CAAC;AAElD,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAC,UAAU,EAAC,wCAAqC;AAExD,0IAA0I;AAC1I,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC7B,uJAAuJ;AACvJ,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAsB5B,MAAM,OAAO,iBAAkB,SAAQ,MAA8B;IAiBnE,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;QAN/C,cAAS,GAAG,0BAA0B,CAAC;QACvC,cAAS,GAAG,MAAe,CAAC;QAE5B,aAAQ,GAAuB,IAAI,CAAC;QAIlC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,EAAC,IAAI,EAAoB;QAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,EAAE,0BAA0B,CAAC,CAAC;QACjE,MAAM,KAAK,GAAG;YACZ,MAAM,EAAE,KAAK;YACb,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,UAAU;YACpB,aAAa,EAAE,MAAM;SACtB,CAAC;QACF,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;QAEvF,IAAI,CAAC,SAAS,EAAE,EAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,IAAI,CAAC,SAAS,EAAE,EAAE,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1F,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,YAAY,CAAC,WAAwB;QACnC,MAAM,EAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAElD,MAAM,EAAE,GACN,OAAO,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAC5B,KAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,EACxE,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAC,aAAa,EAAE,MAAM,EAAC,GAC9B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;QACX,MAAM,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;IAC1B,CAAC;IAED,iBAAiB,CAAC,QAAoB;QACpC,IACE,QAAQ;YACR,CAAC,QAAQ,CAAC,MAAM,KAAK,kBAAkB,IAAI,QAAQ,CAAC,KAAK,KAAK,iBAAiB,CAAC,EAChF,CAAC;YACD,IAAI,CAAC,QAAQ;gBACX,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC;oBACpB,CAAC,EAAE,QAAQ,CAAC,OAAO;oBACnB,CAAC,EAAE,QAAQ,CAAC,OAAO;iBACpB,CAAC,IAAI,IAAI,CAAC;YACb,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;YAC1F,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;YACrC,IAAI,CAAC,QAAQ,CAAC;gBACZ,OAAO;gBACP,QAAQ,EAAE,EAAC,CAAC,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,CAAC,OAAO,EAAC;gBACpD,SAAS;aACV,CAAC,CAAC;YACH,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,QAAQ,CAAC,cAAc,EAAE,CAAC;YAC1B,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI;QACF,IAAI,CAAC,QAAQ,CAAC,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC,CAAC;IAClC,CAAC;;AAjFM,8BAAY,GAAqC;IACtD,GAAG,MAAM,CAAC,YAAY;IACtB,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC;IACtB,YAAY,EAAE,SAAU;IACxB,SAAS,EAAE,EAAE;IACb,sCAAsC;IACtC,kBAAkB,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,GAAG,EAAE,QAAQ,CAAC;CACjG,AATkB,CASjB"}
|