@deck.gl-community/react 9.0.1 → 9.1.0-beta.2
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/LICENSE +19 -0
- package/dist/components/icon.d.ts +1 -0
- package/dist/components/icon.d.ts.map +1 -0
- package/dist/components/icon.js +3 -0
- package/dist/components/long-press-button.d.ts +1 -0
- package/dist/components/long-press-button.d.ts.map +1 -0
- package/dist/components/long-press-button.js +3 -0
- package/dist/components/modal.d.ts +2 -1
- package/dist/components/modal.d.ts.map +1 -0
- package/dist/components/modal.js +4 -1
- package/dist/components/positioned-view-control.d.ts +3 -2
- package/dist/components/positioned-view-control.d.ts.map +1 -0
- package/dist/components/positioned-view-control.js +5 -2
- package/dist/components/view-control.d.ts +7 -6
- package/dist/components/view-control.d.ts.map +1 -0
- package/dist/components/view-control.js +11 -8
- package/dist/index.cjs +27 -20
- package/dist/index.cjs.map +3 -3
- package/dist/index.d.ts +11 -10
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +14 -11
- package/dist/overlays/html-cluster-overlay.d.ts +2 -1
- package/dist/overlays/html-cluster-overlay.d.ts.map +1 -0
- package/dist/overlays/html-cluster-overlay.js +4 -1
- package/dist/overlays/html-overlay-item.d.ts +1 -0
- package/dist/overlays/html-overlay-item.d.ts.map +1 -0
- package/dist/overlays/html-overlay-item.js +4 -1
- package/dist/overlays/html-overlay.d.ts +1 -0
- package/dist/overlays/html-overlay.d.ts.map +1 -0
- package/dist/overlays/html-overlay.js +3 -0
- package/dist/overlays/html-tooltip-overlay.d.ts +2 -1
- package/dist/overlays/html-tooltip-overlay.d.ts.map +1 -0
- package/dist/overlays/html-tooltip-overlay.js +5 -2
- package/package.json +7 -8
- package/src/components/icon.tsx +4 -0
- package/src/components/long-press-button.tsx +4 -0
- package/src/components/modal.tsx +5 -1
- package/src/components/positioned-view-control.tsx +12 -1
- package/src/components/view-control.tsx +16 -7
- package/src/index.ts +5 -1
- package/src/overlays/html-cluster-overlay.ts +4 -0
- package/src/overlays/html-overlay-item.tsx +5 -1
- package/src/overlays/html-overlay.tsx +4 -0
- package/src/overlays/html-tooltip-overlay.tsx +4 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
Copyright (c) 2020 vis.gl a Series of LF Projects, LLC
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
5
|
+
in the Software without restriction, including without limitation the rights
|
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
8
|
+
furnished to do so, subject to the following conditions:
|
|
9
|
+
|
|
10
|
+
The above copyright notice and this permission notice shall be included in
|
|
11
|
+
all copies or substantial portions of the Software.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
19
|
+
THE SOFTWARE.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/components/icon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,CAAC;AAElB,wBAAgB,IAAI,CAAC,KAAK,KAAA,qBAGzB"}
|
package/dist/components/icon.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"long-press-button.d.ts","sourceRoot":"","sources":["../../src/components/long-press-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,SAAS;;;MAId;IAEF,gBAAgB,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAQ;IAE9D,OAAO,aAKL;IAEF,kBAAkB,aAEhB;IAEF,oBAAoB,aAKlB;IAEF,MAAM;CAYP"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export declare const Button: import("styled-components").
|
|
2
|
+
export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
|
|
3
3
|
export type ModalProps = {
|
|
4
4
|
title: any;
|
|
5
5
|
content: any;
|
|
6
6
|
onClose: () => unknown;
|
|
7
7
|
};
|
|
8
8
|
export declare function EditorModal(props: ModalProps): React.JSX.Element;
|
|
9
|
+
//# sourceMappingURL=modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/components/modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,MAAM,qNAUlB,CAAC;AA6CF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,GAAG,CAAC;IACX,OAAO,EAAE,GAAG,CAAC;IACb,OAAO,EAAE,MAAM,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,qBAwB5C"}
|
package/dist/components/modal.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
1
4
|
/* eslint-env browser */
|
|
2
5
|
import * as React from 'react';
|
|
3
6
|
import Modal, { ModalProvider } from 'styled-react-modal';
|
|
4
|
-
import styled from 'styled-components';
|
|
7
|
+
import { styled } from 'styled-components';
|
|
5
8
|
export const Button = styled.button `
|
|
6
9
|
display: inline-block;
|
|
7
10
|
color: #fff;
|
|
@@ -4,6 +4,7 @@ export declare const PositionedViewControl: ({ fitBounds, panBy, zoomBy, zoomLev
|
|
|
4
4
|
panBy: any;
|
|
5
5
|
zoomBy: any;
|
|
6
6
|
zoomLevel: any;
|
|
7
|
-
maxZoom
|
|
8
|
-
minZoom
|
|
7
|
+
maxZoom?: number;
|
|
8
|
+
minZoom?: number;
|
|
9
9
|
}) => React.JSX.Element;
|
|
10
|
+
//# sourceMappingURL=positioned-view-control.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"positioned-view-control.d.ts","sourceRoot":"","sources":["../../src/components/positioned-view-control.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,qBAAqB;;;;;;;uBAkBjC,CAAC"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
4
|
+
import { ViewControl } from "./view-control.js";
|
|
2
5
|
import React from 'react';
|
|
3
6
|
// A wrapper for positioning the ViewControl component
|
|
4
|
-
export const PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom, minZoom }) => (React.createElement("div", { style: { position: 'relative', top: '20px', left: '20px' } },
|
|
7
|
+
export const PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom = 20, minZoom = -20 }) => (React.createElement("div", { style: { position: 'relative', top: '20px', left: '20px' } },
|
|
5
8
|
React.createElement(ViewControl, { fitBounds: fitBounds, panBy: panBy, zoomBy: zoomBy, zoomLevel: zoomLevel, maxZoom: maxZoom, minZoom: minZoom })));
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, { PureComponent } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
export declare const ViewControlWrapper: import("styled-components").
|
|
4
|
-
export declare const NavigationButtonContainer: import("styled-components").
|
|
5
|
-
export declare const NavigationButton: import("styled-components").
|
|
6
|
-
export declare const ZoomControlWrapper: import("styled-components").
|
|
7
|
-
export declare const VerticalSlider: import("styled-components").
|
|
8
|
-
export declare const ZoomControlButton: import("styled-components").
|
|
3
|
+
export declare const ViewControlWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
|
+
export declare const NavigationButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
5
|
+
export declare const NavigationButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
|
+
export declare const ZoomControlWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
|
+
export declare const VerticalSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
|
+
export declare const ZoomControlButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
9
|
export declare class ViewControl extends PureComponent {
|
|
10
10
|
static displayName: string;
|
|
11
11
|
static propTypes: {
|
|
@@ -36,3 +36,4 @@ export declare class ViewControl extends PureComponent {
|
|
|
36
36
|
onChangeZoomLevel: (evt: any) => void;
|
|
37
37
|
render(): React.JSX.Element;
|
|
38
38
|
}
|
|
39
|
+
//# sourceMappingURL=view-control.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"view-control.d.ts","sourceRoot":"","sources":["../../src/components/view-control.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,eAAO,MAAM,kBAAkB,yMAO9B,CAAC;AAEF,eAAO,MAAM,yBAAyB,yMAOrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,yMAY5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,yMAS9B,CAAC;AAEF,eAAO,MAAM,cAAc,yMAa1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,yMAU7B,CAAC;AAEF,qBAAa,WAAY,SAAQ,aAAa;IAC5C,MAAM,CAAC,WAAW,SAAiB;IAEnC,MAAM,CAAC,SAAS;;;;;;;;;MAYd;IAEF,MAAM,CAAC,YAAY;;;;;;;;MAQjB;IAGF,KAAK,YAAoE;IACzE,OAAO,YAAyE;IAChF,OAAO,YAAoE;IAC3E,QAAQ,YAAyE;IAGjF,MAAM,YAAmE;IACzE,OAAO,YAAwE;IAC/E,iBAAiB,qBAGf;IAEF,MAAM;CAiDP"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
1
4
|
// @ts-nocheck TODO
|
|
2
5
|
import React, { PureComponent } from 'react';
|
|
3
6
|
import PropTypes from 'prop-types';
|
|
4
|
-
import styled from 'styled-components';
|
|
5
|
-
import { LongPressButton } from
|
|
7
|
+
import { styled } from 'styled-components';
|
|
8
|
+
import { LongPressButton } from "./long-press-button.js";
|
|
6
9
|
export const ViewControlWrapper = styled.div `
|
|
7
10
|
align-items: center;
|
|
8
11
|
display: flex;
|
|
@@ -22,9 +25,9 @@ export const NavigationButtonContainer = styled.div `
|
|
|
22
25
|
export const NavigationButton = styled.div `
|
|
23
26
|
color: #848484;
|
|
24
27
|
cursor: pointer;
|
|
25
|
-
left: ${(props) => props
|
|
28
|
+
left: ${(props) => props.$left};
|
|
26
29
|
position: absolute;
|
|
27
|
-
top: ${(props) => props
|
|
30
|
+
top: ${(props) => props.$top};
|
|
28
31
|
transform: rotate(${(props) => props.rotate || 0}deg);
|
|
29
32
|
|
|
30
33
|
&:hover,
|
|
@@ -49,7 +52,7 @@ export const VerticalSlider = styled.div `
|
|
|
49
52
|
width: 10px;
|
|
50
53
|
|
|
51
54
|
> input[type='range'][orient='vertical'] {
|
|
52
|
-
-
|
|
55
|
+
writing-mode: vertical-lr;
|
|
53
56
|
height: 100px;
|
|
54
57
|
padding: 0;
|
|
55
58
|
margin: 0;
|
|
@@ -112,15 +115,15 @@ export class ViewControl extends PureComponent {
|
|
|
112
115
|
];
|
|
113
116
|
return (React.createElement(ViewControlWrapper, null,
|
|
114
117
|
React.createElement(NavigationButtonContainer, null,
|
|
115
|
-
buttons.map((b) => (React.createElement(NavigationButton, { key: b.key, top: `${b.top}px`, left: `${b.left}px`, rotate: b.rotate },
|
|
118
|
+
buttons.map((b) => (React.createElement(NavigationButton, { key: b.key, "$top": `${b.top}px`, "$left": `${b.left}px`, rotate: b.rotate },
|
|
116
119
|
React.createElement(LongPressButton, { onClick: b.onClick }, b.content)))),
|
|
117
|
-
React.createElement(NavigationButton, { top: '12px', left: '16px', onClick: this.props.fitBounds }, '¤')),
|
|
120
|
+
React.createElement(NavigationButton, { "$top": '12px', "$left": '16px', onClick: this.props.fitBounds }, '¤')),
|
|
118
121
|
React.createElement(ZoomControlWrapper, null,
|
|
119
122
|
React.createElement(ZoomControlButton, null,
|
|
120
123
|
React.createElement(LongPressButton, { onClick: this.zoomIn }, '+')),
|
|
121
124
|
React.createElement(VerticalSlider, null,
|
|
122
125
|
React.createElement("input", { type: "range", value: this.props.zoomLevel, min: this.props.minZoom, max: this.props.maxZoom, step: this.props.deltaZoom, onChange: this.onChangeZoomLevel,
|
|
123
|
-
/* @ts-expect-error */
|
|
126
|
+
/* @ts-expect-error TODO */
|
|
124
127
|
orient: "vertical" })),
|
|
125
128
|
React.createElement(ZoomControlButton, null,
|
|
126
129
|
React.createElement(LongPressButton, { onClick: this.zoomOut }, '-')))));
|
package/dist/index.cjs
CHANGED
|
@@ -83,8 +83,8 @@ __publicField(LongPressButton, "propTypes", {
|
|
|
83
83
|
// dist/components/view-control.js
|
|
84
84
|
var import_react2 = __toESM(require("react"), 1);
|
|
85
85
|
var import_prop_types2 = __toESM(require("prop-types"), 1);
|
|
86
|
-
var import_styled_components =
|
|
87
|
-
var ViewControlWrapper = import_styled_components.
|
|
86
|
+
var import_styled_components = require("styled-components");
|
|
87
|
+
var ViewControlWrapper = import_styled_components.styled.div`
|
|
88
88
|
align-items: center;
|
|
89
89
|
display: flex;
|
|
90
90
|
flex-direction: column;
|
|
@@ -92,7 +92,7 @@ var ViewControlWrapper = import_styled_components.default.div`
|
|
|
92
92
|
z-index: 99;
|
|
93
93
|
user-select: none;
|
|
94
94
|
`;
|
|
95
|
-
var NavigationButtonContainer = import_styled_components.
|
|
95
|
+
var NavigationButtonContainer = import_styled_components.styled.div`
|
|
96
96
|
background: #f7f7f7;
|
|
97
97
|
border-radius: 23px;
|
|
98
98
|
border: 0.5px solid #eaeaea;
|
|
@@ -100,12 +100,12 @@ var NavigationButtonContainer = import_styled_components.default.div`
|
|
|
100
100
|
height: 46px;
|
|
101
101
|
width: 46px;
|
|
102
102
|
`;
|
|
103
|
-
var NavigationButton = import_styled_components.
|
|
103
|
+
var NavigationButton = import_styled_components.styled.div`
|
|
104
104
|
color: #848484;
|
|
105
105
|
cursor: pointer;
|
|
106
|
-
left: ${(props) => props
|
|
106
|
+
left: ${(props) => props.$left};
|
|
107
107
|
position: absolute;
|
|
108
|
-
top: ${(props) => props
|
|
108
|
+
top: ${(props) => props.$top};
|
|
109
109
|
transform: rotate(${(props) => props.rotate || 0}deg);
|
|
110
110
|
|
|
111
111
|
&:hover,
|
|
@@ -113,7 +113,7 @@ var NavigationButton = import_styled_components.default.div`
|
|
|
113
113
|
color: #00ade6;
|
|
114
114
|
}
|
|
115
115
|
`;
|
|
116
|
-
var ZoomControlWrapper = import_styled_components.
|
|
116
|
+
var ZoomControlWrapper = import_styled_components.styled.div`
|
|
117
117
|
align-items: center;
|
|
118
118
|
background: #f7f7f7;
|
|
119
119
|
border: 0.5px solid #eaeaea;
|
|
@@ -123,21 +123,21 @@ var ZoomControlWrapper = import_styled_components.default.div`
|
|
|
123
123
|
padding: 2px 0;
|
|
124
124
|
width: 18px;
|
|
125
125
|
`;
|
|
126
|
-
var VerticalSlider = import_styled_components.
|
|
126
|
+
var VerticalSlider = import_styled_components.styled.div`
|
|
127
127
|
display: inline-block;
|
|
128
128
|
height: 100px;
|
|
129
129
|
padding: 0;
|
|
130
130
|
width: 10px;
|
|
131
131
|
|
|
132
132
|
> input[type='range'][orient='vertical'] {
|
|
133
|
-
-
|
|
133
|
+
writing-mode: vertical-lr;
|
|
134
134
|
height: 100px;
|
|
135
135
|
padding: 0;
|
|
136
136
|
margin: 0;
|
|
137
137
|
width: 10px;
|
|
138
138
|
}
|
|
139
139
|
`;
|
|
140
|
-
var ZoomControlButton = import_styled_components.
|
|
140
|
+
var ZoomControlButton = import_styled_components.styled.div`
|
|
141
141
|
cursor: pointer;
|
|
142
142
|
font-size: 14px;
|
|
143
143
|
font-weight: 500;
|
|
@@ -176,10 +176,10 @@ var ViewControl = class extends import_react2.PureComponent {
|
|
|
176
176
|
null,
|
|
177
177
|
buttons.map((b) => import_react2.default.createElement(
|
|
178
178
|
NavigationButton,
|
|
179
|
-
{ key: b.key, top: `${b.top}px`, left: `${b.left}px`, rotate: b.rotate },
|
|
179
|
+
{ key: b.key, "$top": `${b.top}px`, "$left": `${b.left}px`, rotate: b.rotate },
|
|
180
180
|
import_react2.default.createElement(LongPressButton, { onClick: b.onClick }, b.content)
|
|
181
181
|
)),
|
|
182
|
-
import_react2.default.createElement(NavigationButton, { top: "12px", left: "16px", onClick: this.props.fitBounds }, "\xA4")
|
|
182
|
+
import_react2.default.createElement(NavigationButton, { "$top": "12px", "$left": "16px", onClick: this.props.fitBounds }, "\xA4")
|
|
183
183
|
),
|
|
184
184
|
import_react2.default.createElement(
|
|
185
185
|
ZoomControlWrapper,
|
|
@@ -199,7 +199,7 @@ var ViewControl = class extends import_react2.PureComponent {
|
|
|
199
199
|
max: this.props.maxZoom,
|
|
200
200
|
step: this.props.deltaZoom,
|
|
201
201
|
onChange: this.onChangeZoomLevel,
|
|
202
|
-
/* @ts-expect-error */
|
|
202
|
+
/* @ts-expect-error TODO */
|
|
203
203
|
orient: "vertical"
|
|
204
204
|
})
|
|
205
205
|
),
|
|
@@ -241,7 +241,7 @@ __publicField(ViewControl, "defaultProps", {
|
|
|
241
241
|
|
|
242
242
|
// dist/components/positioned-view-control.js
|
|
243
243
|
var import_react3 = __toESM(require("react"), 1);
|
|
244
|
-
var PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom, minZoom }) => import_react3.default.createElement(
|
|
244
|
+
var PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom = 20, minZoom = -20 }) => import_react3.default.createElement(
|
|
245
245
|
"div",
|
|
246
246
|
{ style: { position: "relative", top: "20px", left: "20px" } },
|
|
247
247
|
import_react3.default.createElement(ViewControl, { fitBounds, panBy, zoomBy, zoomLevel, maxZoom, minZoom })
|
|
@@ -250,8 +250,8 @@ var PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom, min
|
|
|
250
250
|
// dist/components/modal.js
|
|
251
251
|
var React4 = __toESM(require("react"), 1);
|
|
252
252
|
var import_styled_react_modal = __toESM(require("styled-react-modal"), 1);
|
|
253
|
-
var import_styled_components2 =
|
|
254
|
-
var Button = import_styled_components2.
|
|
253
|
+
var import_styled_components2 = require("styled-components");
|
|
254
|
+
var Button = import_styled_components2.styled.button`
|
|
255
255
|
display: inline-block;
|
|
256
256
|
color: #fff;
|
|
257
257
|
background-color: rgb(90, 98, 94);
|
|
@@ -277,7 +277,7 @@ var StyledModal = import_styled_react_modal.default.styled`
|
|
|
277
277
|
line-height: 1.5;
|
|
278
278
|
text-align: left;
|
|
279
279
|
`;
|
|
280
|
-
var Content = import_styled_components2.
|
|
280
|
+
var Content = import_styled_components2.styled.div`
|
|
281
281
|
position: relative;
|
|
282
282
|
display: flex;
|
|
283
283
|
flex-direction: column;
|
|
@@ -289,14 +289,14 @@ var Content = import_styled_components2.default.div`
|
|
|
289
289
|
border-radius: 0.3rem;
|
|
290
290
|
outline: 0;
|
|
291
291
|
`;
|
|
292
|
-
var HeaderRow = import_styled_components2.
|
|
292
|
+
var HeaderRow = import_styled_components2.styled.div`
|
|
293
293
|
display: flex;
|
|
294
294
|
align-items: flex-start;
|
|
295
295
|
justify-content: space-between;
|
|
296
296
|
padding: 0.75rem 0.75rem;
|
|
297
297
|
border-bottom: 1px solid rgb(222, 226, 230);
|
|
298
298
|
`;
|
|
299
|
-
var Header = import_styled_components2.
|
|
299
|
+
var Header = import_styled_components2.styled.h5`
|
|
300
300
|
font-size: 1.25rem;
|
|
301
301
|
font-weight: 500;
|
|
302
302
|
margin: 0;
|
|
@@ -406,7 +406,14 @@ __publicField(HtmlOverlay, "deckGLViewProps", true);
|
|
|
406
406
|
var React7 = __toESM(require("react"), 1);
|
|
407
407
|
var HtmlOverlayItem = class extends React7.Component {
|
|
408
408
|
render() {
|
|
409
|
-
const {
|
|
409
|
+
const {
|
|
410
|
+
x,
|
|
411
|
+
y,
|
|
412
|
+
children,
|
|
413
|
+
style,
|
|
414
|
+
/* coordinates, */
|
|
415
|
+
...props
|
|
416
|
+
} = this.props;
|
|
410
417
|
const { zIndex = "auto", ...remainingStyle } = style || {};
|
|
411
418
|
return (
|
|
412
419
|
// Using transform translate to position overlay items will result in a smooth zooming
|
package/dist/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.js", "components/long-press-button.js", "components/view-control.js", "components/positioned-view-control.js", "components/modal.js", "components/icon.js", "overlays/html-overlay.js", "overlays/html-overlay-item.js", "overlays/html-cluster-overlay.js", "overlays/html-tooltip-overlay.js"],
|
|
4
|
-
"sourcesContent": ["// Components (originally from @deck.gl-community/react-graph-layers)\nexport { LongPressButton } from './components/long-press-button';\nexport { ViewControl } from './components/view-control';\nexport { PositionedViewControl } from './components/positioned-view-control';\n// Components (originally from @nebula.gl/editor)\nexport { EditorModal as Modal } from './components/modal';\nexport { Button } from './components/modal';\nexport { Icon } from './components/icon';\n// Overlays (originally from @nebula.gl/overlays)\nexport { HtmlOverlay } from './overlays/html-overlay';\nexport { HtmlOverlayItem } from './overlays/html-overlay-item';\nexport { HtmlClusterOverlay } from './overlays/html-cluster-overlay';\nexport { HtmlTooltipOverlay } from './overlays/html-tooltip-overlay';\n", "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nexport class LongPressButton extends PureComponent {\n static propTypes = {\n onClick: PropTypes.func.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n children: PropTypes.any.isRequired\n };\n buttonPressTimer = null;\n _repeat = () => {\n if (this.buttonPressTimer) {\n this.props.onClick();\n this.buttonPressTimer = setTimeout(this._repeat, 100);\n }\n };\n _handleButtonPress = () => {\n this.buttonPressTimer = setTimeout(this._repeat, 100);\n };\n _handleButtonRelease = () => {\n if (this.buttonPressTimer) {\n clearTimeout(this.buttonPressTimer);\n }\n this.buttonPressTimer = null;\n };\n render() {\n return (React.createElement(\"div\", { onMouseDown: (event) => {\n this._handleButtonPress();\n document.addEventListener('mouseup', this._handleButtonRelease, { once: true });\n } }, this.props.children));\n }\n}\n", "// @ts-nocheck TODO\nimport React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { LongPressButton } from './long-press-button';\nexport const ViewControlWrapper = styled.div `\n align-items: center;\n display: flex;\n flex-direction: column;\n position: absolute;\n z-index: 99;\n user-select: none;\n`;\nexport const NavigationButtonContainer = styled.div `\n background: #f7f7f7;\n border-radius: 23px;\n border: 0.5px solid #eaeaea;\n box-shadow: inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49);\n height: 46px;\n width: 46px;\n`;\nexport const NavigationButton = styled.div `\n color: #848484;\n cursor: pointer;\n left: ${(props) => props.left};\n position: absolute;\n top: ${(props) => props.top};\n transform: rotate(${(props) => props.rotate || 0}deg);\n\n &:hover,\n &:active {\n color: #00ade6;\n }\n`;\nexport const ZoomControlWrapper = styled.div `\n align-items: center;\n background: #f7f7f7;\n border: 0.5px solid #eaeaea;\n display: flex;\n flex-direction: column;\n margin-top: 6px;\n padding: 2px 0;\n width: 18px;\n`;\nexport const VerticalSlider = styled.div `\n display: inline-block;\n height: 100px;\n padding: 0;\n width: 10px;\n\n > input[type='range'][orient='vertical'] {\n -webkit-appearance: slider-vertical;\n height: 100px;\n padding: 0;\n margin: 0;\n width: 10px;\n }\n`;\nexport const ZoomControlButton = styled.div `\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n margin: -4px;\n\n &:hover,\n &:active {\n color: #00ade6;\n }\n`;\nexport class ViewControl extends PureComponent {\n static displayName = 'ViewControl';\n static propTypes = {\n // functions\n fitBounds: PropTypes.func,\n panBy: PropTypes.func,\n zoomBy: PropTypes.func,\n // current zoom level\n zoomLevel: PropTypes.number,\n // configuration\n minZoom: PropTypes.number,\n maxZoom: PropTypes.number,\n deltaPan: PropTypes.number,\n deltaZoom: PropTypes.number\n };\n static defaultProps = {\n fitBounds: () => { },\n panBy: () => { },\n zoomBy: () => { },\n deltaPan: 10,\n deltaZoom: 0.1,\n minZoom: 0.1,\n maxZoom: 1\n };\n // pan actions\n panUp = () => this.props.panBy(0, this.props.deltaPan);\n panDown = () => this.props.panBy(0, -1 * this.props.deltaPan);\n panLeft = () => this.props.panBy(this.props.deltaPan, 0);\n panRight = () => this.props.panBy(-1 * this.props.deltaPan, 0);\n // zoom actions\n zoomIn = () => this.props.zoomBy(this.props.deltaZoom);\n zoomOut = () => this.props.zoomBy(-1 * this.props.deltaZoom);\n onChangeZoomLevel = (evt) => {\n const delta = evt.target.value - this.props.zoomLevel;\n this.props.zoomBy(delta);\n };\n render() {\n const buttons = [\n { top: -2, left: 14, rotate: 0, onClick: this.panUp, content: '\u25B2', key: 'up' },\n { top: 12, left: 0, rotate: -90, onClick: this.panLeft, content: '\u25C0', key: 'left' },\n { top: 12, left: 28, rotate: 90, onClick: this.panRight, content: '\u25B6', key: 'right' },\n { top: 25, left: 14, rotate: 180, onClick: this.panDown, content: '\u25BC', key: 'down' }\n ];\n return (React.createElement(ViewControlWrapper, null,\n React.createElement(NavigationButtonContainer, null,\n buttons.map((b) => (React.createElement(NavigationButton, { key: b.key, top: `${b.top}px`, left: `${b.left}px`, rotate: b.rotate },\n React.createElement(LongPressButton, { onClick: b.onClick }, b.content)))),\n React.createElement(NavigationButton, { top: '12px', left: '16px', onClick: this.props.fitBounds }, '\u00A4')),\n React.createElement(ZoomControlWrapper, null,\n React.createElement(ZoomControlButton, null,\n React.createElement(LongPressButton, { onClick: this.zoomIn }, '+')),\n React.createElement(VerticalSlider, null,\n React.createElement(\"input\", { type: \"range\", value: this.props.zoomLevel, min: this.props.minZoom, max: this.props.maxZoom, step: this.props.deltaZoom, onChange: this.onChangeZoomLevel, \n /* @ts-expect-error */\n orient: \"vertical\" })),\n React.createElement(ZoomControlButton, null,\n React.createElement(LongPressButton, { onClick: this.zoomOut }, '-')))));\n }\n}\n", "import { ViewControl } from './view-control';\nimport React from 'react';\n// A wrapper for positioning the ViewControl component\nexport const PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom, minZoom }) => (React.createElement(\"div\", { style: { position: 'relative', top: '20px', left: '20px' } },\n React.createElement(ViewControl, { fitBounds: fitBounds, panBy: panBy, zoomBy: zoomBy, zoomLevel: zoomLevel, maxZoom: maxZoom, minZoom: minZoom })));\n", "/* eslint-env browser */\nimport * as React from 'react';\nimport Modal, { ModalProvider } from 'styled-react-modal';\nimport styled from 'styled-components';\nexport const Button = styled.button `\n display: inline-block;\n color: #fff;\n background-color: rgb(90, 98, 94);\n font-size: 1em;\n margin: 0.25em;\n padding: 0.375em 0.75em;\n border: 1px solid transparent;\n border-radius: 0.25em;\n display: block;\n`;\nconst StyledModal = Modal.styled `\n position: relative;\n display: block;\n width: 50rem;\n height: auto;\n max-width: 500px;\n margin: 1.75rem auto;\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 1rem;\n font-weight: 400;\n color: rgb(21, 25, 29);\n line-height: 1.5;\n text-align: left;\n`;\nconst Content = styled.div `\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 0.3rem;\n outline: 0;\n`;\nconst HeaderRow = styled.div `\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 0.75rem 0.75rem;\n border-bottom: 1px solid rgb(222, 226, 230);\n`;\nconst Header = styled.h5 `\n font-size: 1.25rem;\n font-weight: 500;\n margin: 0;\n`;\nexport function EditorModal(props) {\n const [isOpen, setIsOpen] = React.useState(true);\n function toggleModal() {\n if (isOpen) {\n props.onClose();\n }\n setIsOpen(!isOpen);\n }\n return (React.createElement(React.Fragment, null,\n React.createElement(ModalProvider, null,\n React.createElement(StyledModal, { isOpen: isOpen, onBackgroundClick: toggleModal, onEscapeKeydown: toggleModal },\n React.createElement(Content, null,\n React.createElement(HeaderRow, null,\n React.createElement(Header, null, props.title)),\n props.content)))));\n}\n", "import * as React from 'react';\nimport 'boxicons';\nexport function Icon(props) {\n // @ts-expect-error TODO\n return React.createElement(\"box-icon\", { color: \"currentColor\", ...props });\n}\n", "import * as React from 'react';\nconst styles = {\n mainContainer: {\n width: '100%',\n height: '100%',\n position: 'absolute',\n pointerEvents: 'none',\n overflow: 'hidden'\n }\n};\nexport class HtmlOverlay extends React.Component {\n // This is needed for Deck.gl 8.0+\n static deckGLViewProps = true;\n // Override this to provide your items\n getItems() {\n const { children } = this.props;\n if (children) {\n return Array.isArray(children) ? children : [children];\n }\n return [];\n }\n getCoords(coordinates) {\n const pos = this.props.viewport.project(coordinates);\n if (!pos)\n return [-1, -1];\n return pos;\n }\n inView([x, y]) {\n const { viewport, overflowMargin = 0 } = this.props;\n const { width, height } = viewport;\n return !(x < -overflowMargin ||\n y < -overflowMargin ||\n x > width + overflowMargin ||\n y > height + overflowMargin);\n }\n scaleWithZoom(n) {\n const { zoom } = this.props.viewport;\n return n / Math.pow(2, 20 - zoom);\n }\n breakpointWithZoom(threshold, a, b) {\n const { zoom } = this.props.viewport;\n return zoom > threshold ? a : b;\n }\n getViewport() {\n return this.props.viewport;\n }\n getZoom() {\n return this.props.viewport.zoom;\n }\n render() {\n const { zIndex = 1 } = this.props;\n const style = Object.assign({ zIndex }, styles.mainContainer);\n const renderItems = [];\n this.getItems()\n .filter(Boolean)\n .forEach((item, index) => {\n const [x, y] = this.getCoords(item.props.coordinates);\n if (this.inView([x, y])) {\n const key = item.key === null || item.key === undefined ? index : item.key;\n renderItems.push(React.cloneElement(item, { x, y, key }));\n }\n });\n return React.createElement(\"div\", { style: style }, renderItems);\n }\n}\n", "import * as React from 'react';\nexport class HtmlOverlayItem extends React.Component {\n render() {\n const { x, y, children, style, coordinates, ...props } = this.props;\n const { zIndex = 'auto', ...remainingStyle } = style || {};\n return (\n // Using transform translate to position overlay items will result in a smooth zooming\n // effect, whereas using the top/left css properties will cause overlay items to\n // jiggle when zooming\n React.createElement(\"div\", { style: { transform: `translate(${x}px, ${y}px)`, position: 'absolute', zIndex } },\n React.createElement(\"div\", { style: { userSelect: 'none', ...remainingStyle }, ...props }, children)));\n }\n}\n", "import { point } from '@turf/helpers';\nimport Supercluster from 'supercluster';\nimport { HtmlOverlay } from './html-overlay';\nexport class HtmlClusterOverlay extends HtmlOverlay {\n _superCluster;\n _lastObjects = null;\n getItems() {\n // supercluster().load() is expensive and we want to run it only\n // when necessary and not for every frame.\n // TODO: Warn if this is running many times / sec\n const newObjects = this.getAllObjects();\n if (newObjects !== this._lastObjects) {\n this._superCluster = new Supercluster(this.getClusterOptions());\n this._superCluster.load(newObjects.map((object) => point(this.getObjectCoordinates(object), { object })));\n this._lastObjects = newObjects;\n // console.log('new Supercluster() run');\n }\n const clusters = this._superCluster.getClusters([-180, -90, 180, 90], Math.round(this.getZoom()));\n return clusters.map(({ geometry: { coordinates }, properties: { cluster, point_count: pointCount, cluster_id: clusterId, object } }) => cluster\n ? this.renderCluster(coordinates, clusterId, pointCount)\n : this.renderObject(coordinates, object));\n }\n getClusterObjects(clusterId) {\n return this._superCluster\n .getLeaves(clusterId, Infinity)\n .map((object) => object.properties.object);\n }\n // Override to provide items that need clustering.\n // If the items have not changed please provide the same array to avoid\n // regeneration of the cluster which causes performance issues.\n getAllObjects() {\n return [];\n }\n // override to provide coordinates for each object of getAllObjects()\n getObjectCoordinates(obj) {\n return [0, 0];\n }\n // Get options object used when instantiating supercluster\n getClusterOptions() {\n return {\n maxZoom: 20\n };\n }\n // override to return an HtmlOverlayItem\n renderObject(coordinates, obj) {\n return null;\n }\n // override to return an HtmlOverlayItem\n // use getClusterObjects() to get cluster contents\n renderCluster(coordinates, clusterId, pointCount) {\n return null;\n }\n}\n", "import * as React from 'react';\nimport { HtmlOverlay } from './html-overlay';\nimport { HtmlOverlayItem } from './html-overlay-item';\nconst styles = {\n tooltip: {\n transform: 'translate(-50%,-100%)',\n backgroundColor: 'rgba(0, 0, 0, 0.3)',\n padding: '4px 8px',\n borderRadius: 8,\n color: 'white'\n }\n};\nconst SHOW_TOOLTIP_TIMEOUT = 250;\nexport class HtmlTooltipOverlay extends HtmlOverlay {\n constructor(props) {\n super(props);\n this.state = { visible: false, pickingInfo: null };\n }\n componentWillMount() {\n this.context.nebula.queryObjectEvents.on('pick', ({ event, pickingInfo }) => {\n if (this.timeoutID !== null) {\n window.clearTimeout(this.timeoutID);\n }\n this.timeoutID = null;\n if (pickingInfo && this._getTooltip(pickingInfo)) {\n this.timeoutID = window.setTimeout(() => {\n this.setState({ visible: true, pickingInfo });\n }, SHOW_TOOLTIP_TIMEOUT);\n }\n else {\n this.setState({ visible: false });\n }\n });\n }\n timeoutID = null;\n state = undefined;\n _getTooltip(pickingInfo) {\n return pickingInfo.object.style.tooltip;\n }\n _makeOverlay() {\n const { pickingInfo } = this.state;\n if (pickingInfo) {\n return (React.createElement(HtmlOverlayItem, { key: 0, coordinates: pickingInfo.lngLat, style: styles.tooltip }, this._getTooltip(pickingInfo)));\n }\n return null;\n }\n getItems() {\n if (this.state.visible) {\n return [this._makeOverlay()];\n }\n return [];\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;
|
|
6
|
-
"names": ["React", "PropTypes", "import_react", "import_prop_types", "
|
|
4
|
+
"sourcesContent": ["// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n// Components (originally from @deck.gl-community/graph-layers)\nexport { LongPressButton } from \"./components/long-press-button.js\";\nexport { ViewControl } from \"./components/view-control.js\";\nexport { PositionedViewControl } from \"./components/positioned-view-control.js\";\n// Components (originally from @nebula.gl/editor)\nexport { EditorModal as Modal } from \"./components/modal.js\";\nexport { Button } from \"./components/modal.js\";\nexport { Icon } from \"./components/icon.js\";\n// Overlays (originally from @nebula.gl/overlays)\nexport { HtmlOverlay } from \"./overlays/html-overlay.js\";\nexport { HtmlOverlayItem } from \"./overlays/html-overlay-item.js\";\nexport { HtmlClusterOverlay } from \"./overlays/html-cluster-overlay.js\";\nexport { HtmlTooltipOverlay } from \"./overlays/html-tooltip-overlay.js\";\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\nimport React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nexport class LongPressButton extends PureComponent {\n static propTypes = {\n onClick: PropTypes.func.isRequired,\n // eslint-disable-next-line react/forbid-prop-types\n children: PropTypes.any.isRequired\n };\n buttonPressTimer = null;\n _repeat = () => {\n if (this.buttonPressTimer) {\n this.props.onClick();\n this.buttonPressTimer = setTimeout(this._repeat, 100);\n }\n };\n _handleButtonPress = () => {\n this.buttonPressTimer = setTimeout(this._repeat, 100);\n };\n _handleButtonRelease = () => {\n if (this.buttonPressTimer) {\n clearTimeout(this.buttonPressTimer);\n }\n this.buttonPressTimer = null;\n };\n render() {\n return (React.createElement(\"div\", { onMouseDown: (event) => {\n this._handleButtonPress();\n document.addEventListener('mouseup', this._handleButtonRelease, { once: true });\n } }, this.props.children));\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n// @ts-nocheck TODO\nimport React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from 'styled-components';\nimport { LongPressButton } from \"./long-press-button.js\";\nexport const ViewControlWrapper = styled.div `\n align-items: center;\n display: flex;\n flex-direction: column;\n position: absolute;\n z-index: 99;\n user-select: none;\n`;\nexport const NavigationButtonContainer = styled.div `\n background: #f7f7f7;\n border-radius: 23px;\n border: 0.5px solid #eaeaea;\n box-shadow: inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49);\n height: 46px;\n width: 46px;\n`;\nexport const NavigationButton = styled.div `\n color: #848484;\n cursor: pointer;\n left: ${(props) => props.$left};\n position: absolute;\n top: ${(props) => props.$top};\n transform: rotate(${(props) => props.rotate || 0}deg);\n\n &:hover,\n &:active {\n color: #00ade6;\n }\n`;\nexport const ZoomControlWrapper = styled.div `\n align-items: center;\n background: #f7f7f7;\n border: 0.5px solid #eaeaea;\n display: flex;\n flex-direction: column;\n margin-top: 6px;\n padding: 2px 0;\n width: 18px;\n`;\nexport const VerticalSlider = styled.div `\n display: inline-block;\n height: 100px;\n padding: 0;\n width: 10px;\n\n > input[type='range'][orient='vertical'] {\n writing-mode: vertical-lr;\n height: 100px;\n padding: 0;\n margin: 0;\n width: 10px;\n }\n`;\nexport const ZoomControlButton = styled.div `\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n margin: -4px;\n\n &:hover,\n &:active {\n color: #00ade6;\n }\n`;\nexport class ViewControl extends PureComponent {\n static displayName = 'ViewControl';\n static propTypes = {\n // functions\n fitBounds: PropTypes.func,\n panBy: PropTypes.func,\n zoomBy: PropTypes.func,\n // current zoom level\n zoomLevel: PropTypes.number,\n // configuration\n minZoom: PropTypes.number,\n maxZoom: PropTypes.number,\n deltaPan: PropTypes.number,\n deltaZoom: PropTypes.number\n };\n static defaultProps = {\n fitBounds: () => { },\n panBy: () => { },\n zoomBy: () => { },\n deltaPan: 10,\n deltaZoom: 0.1,\n minZoom: 0.1,\n maxZoom: 1\n };\n // pan actions\n panUp = () => this.props.panBy(0, this.props.deltaPan);\n panDown = () => this.props.panBy(0, -1 * this.props.deltaPan);\n panLeft = () => this.props.panBy(this.props.deltaPan, 0);\n panRight = () => this.props.panBy(-1 * this.props.deltaPan, 0);\n // zoom actions\n zoomIn = () => this.props.zoomBy(this.props.deltaZoom);\n zoomOut = () => this.props.zoomBy(-1 * this.props.deltaZoom);\n onChangeZoomLevel = (evt) => {\n const delta = evt.target.value - this.props.zoomLevel;\n this.props.zoomBy(delta);\n };\n render() {\n const buttons = [\n { top: -2, left: 14, rotate: 0, onClick: this.panUp, content: '\u25B2', key: 'up' },\n { top: 12, left: 0, rotate: -90, onClick: this.panLeft, content: '\u25C0', key: 'left' },\n { top: 12, left: 28, rotate: 90, onClick: this.panRight, content: '\u25B6', key: 'right' },\n { top: 25, left: 14, rotate: 180, onClick: this.panDown, content: '\u25BC', key: 'down' }\n ];\n return (React.createElement(ViewControlWrapper, null,\n React.createElement(NavigationButtonContainer, null,\n buttons.map((b) => (React.createElement(NavigationButton, { key: b.key, \"$top\": `${b.top}px`, \"$left\": `${b.left}px`, rotate: b.rotate },\n React.createElement(LongPressButton, { onClick: b.onClick }, b.content)))),\n React.createElement(NavigationButton, { \"$top\": '12px', \"$left\": '16px', onClick: this.props.fitBounds }, '\u00A4')),\n React.createElement(ZoomControlWrapper, null,\n React.createElement(ZoomControlButton, null,\n React.createElement(LongPressButton, { onClick: this.zoomIn }, '+')),\n React.createElement(VerticalSlider, null,\n React.createElement(\"input\", { type: \"range\", value: this.props.zoomLevel, min: this.props.minZoom, max: this.props.maxZoom, step: this.props.deltaZoom, onChange: this.onChangeZoomLevel, \n /* @ts-expect-error TODO */\n orient: \"vertical\" })),\n React.createElement(ZoomControlButton, null,\n React.createElement(LongPressButton, { onClick: this.zoomOut }, '-')))));\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\nimport { ViewControl } from \"./view-control.js\";\nimport React from 'react';\n// A wrapper for positioning the ViewControl component\nexport const PositionedViewControl = ({ fitBounds, panBy, zoomBy, zoomLevel, maxZoom = 20, minZoom = -20 }) => (React.createElement(\"div\", { style: { position: 'relative', top: '20px', left: '20px' } },\n React.createElement(ViewControl, { fitBounds: fitBounds, panBy: panBy, zoomBy: zoomBy, zoomLevel: zoomLevel, maxZoom: maxZoom, minZoom: minZoom })));\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\n/* eslint-env browser */\nimport * as React from 'react';\nimport Modal, { ModalProvider } from 'styled-react-modal';\nimport { styled } from 'styled-components';\nexport const Button = styled.button `\n display: inline-block;\n color: #fff;\n background-color: rgb(90, 98, 94);\n font-size: 1em;\n margin: 0.25em;\n padding: 0.375em 0.75em;\n border: 1px solid transparent;\n border-radius: 0.25em;\n display: block;\n`;\nconst StyledModal = Modal.styled `\n position: relative;\n display: block;\n width: 50rem;\n height: auto;\n max-width: 500px;\n margin: 1.75rem auto;\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 1rem;\n font-weight: 400;\n color: rgb(21, 25, 29);\n line-height: 1.5;\n text-align: left;\n`;\nconst Content = styled.div `\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 0.3rem;\n outline: 0;\n`;\nconst HeaderRow = styled.div `\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 0.75rem 0.75rem;\n border-bottom: 1px solid rgb(222, 226, 230);\n`;\nconst Header = styled.h5 `\n font-size: 1.25rem;\n font-weight: 500;\n margin: 0;\n`;\nexport function EditorModal(props) {\n const [isOpen, setIsOpen] = React.useState(true);\n function toggleModal() {\n if (isOpen) {\n props.onClose();\n }\n setIsOpen(!isOpen);\n }\n return (React.createElement(React.Fragment, null,\n React.createElement(ModalProvider, null,\n React.createElement(StyledModal, { isOpen: isOpen, onBackgroundClick: toggleModal, onEscapeKeydown: toggleModal },\n React.createElement(Content, null,\n React.createElement(HeaderRow, null,\n React.createElement(Header, null, props.title)),\n props.content)))));\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\nimport * as React from 'react';\nimport 'boxicons';\nexport function Icon(props) {\n // @ts-expect-error TODO\n return React.createElement(\"box-icon\", { color: \"currentColor\", ...props });\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\nimport * as React from 'react';\nconst styles = {\n mainContainer: {\n width: '100%',\n height: '100%',\n position: 'absolute',\n pointerEvents: 'none',\n overflow: 'hidden'\n }\n};\nexport class HtmlOverlay extends React.Component {\n // This is needed for Deck.gl 8.0+\n static deckGLViewProps = true;\n // Override this to provide your items\n getItems() {\n const { children } = this.props;\n if (children) {\n return Array.isArray(children) ? children : [children];\n }\n return [];\n }\n getCoords(coordinates) {\n const pos = this.props.viewport.project(coordinates);\n if (!pos)\n return [-1, -1];\n return pos;\n }\n inView([x, y]) {\n const { viewport, overflowMargin = 0 } = this.props;\n const { width, height } = viewport;\n return !(x < -overflowMargin ||\n y < -overflowMargin ||\n x > width + overflowMargin ||\n y > height + overflowMargin);\n }\n scaleWithZoom(n) {\n const { zoom } = this.props.viewport;\n return n / Math.pow(2, 20 - zoom);\n }\n breakpointWithZoom(threshold, a, b) {\n const { zoom } = this.props.viewport;\n return zoom > threshold ? a : b;\n }\n getViewport() {\n return this.props.viewport;\n }\n getZoom() {\n return this.props.viewport.zoom;\n }\n render() {\n const { zIndex = 1 } = this.props;\n const style = Object.assign({ zIndex }, styles.mainContainer);\n const renderItems = [];\n this.getItems()\n .filter(Boolean)\n .forEach((item, index) => {\n const [x, y] = this.getCoords(item.props.coordinates);\n if (this.inView([x, y])) {\n const key = item.key === null || item.key === undefined ? index : item.key;\n renderItems.push(React.cloneElement(item, { x, y, key }));\n }\n });\n return React.createElement(\"div\", { style: style }, renderItems);\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\nimport * as React from 'react';\nexport class HtmlOverlayItem extends React.Component {\n render() {\n const { x, y, children, style, /* coordinates, */ ...props } = this.props;\n const { zIndex = 'auto', ...remainingStyle } = style || {};\n return (\n // Using transform translate to position overlay items will result in a smooth zooming\n // effect, whereas using the top/left css properties will cause overlay items to\n // jiggle when zooming\n React.createElement(\"div\", { style: { transform: `translate(${x}px, ${y}px)`, position: 'absolute', zIndex } },\n React.createElement(\"div\", { style: { userSelect: 'none', ...remainingStyle }, ...props }, children)));\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\nimport { point } from '@turf/helpers';\nimport Supercluster from 'supercluster';\nimport { HtmlOverlay } from \"./html-overlay.js\";\nexport class HtmlClusterOverlay extends HtmlOverlay {\n _superCluster;\n _lastObjects = null;\n getItems() {\n // supercluster().load() is expensive and we want to run it only\n // when necessary and not for every frame.\n // TODO: Warn if this is running many times / sec\n const newObjects = this.getAllObjects();\n if (newObjects !== this._lastObjects) {\n this._superCluster = new Supercluster(this.getClusterOptions());\n this._superCluster.load(newObjects.map((object) => point(this.getObjectCoordinates(object), { object })));\n this._lastObjects = newObjects;\n // console.log('new Supercluster() run');\n }\n const clusters = this._superCluster.getClusters([-180, -90, 180, 90], Math.round(this.getZoom()));\n return clusters.map(({ geometry: { coordinates }, properties: { cluster, point_count: pointCount, cluster_id: clusterId, object } }) => cluster\n ? this.renderCluster(coordinates, clusterId, pointCount)\n : this.renderObject(coordinates, object));\n }\n getClusterObjects(clusterId) {\n return this._superCluster\n .getLeaves(clusterId, Infinity)\n .map((object) => object.properties.object);\n }\n // Override to provide items that need clustering.\n // If the items have not changed please provide the same array to avoid\n // regeneration of the cluster which causes performance issues.\n getAllObjects() {\n return [];\n }\n // override to provide coordinates for each object of getAllObjects()\n getObjectCoordinates(obj) {\n return [0, 0];\n }\n // Get options object used when instantiating supercluster\n getClusterOptions() {\n return {\n maxZoom: 20\n };\n }\n // override to return an HtmlOverlayItem\n renderObject(coordinates, obj) {\n return null;\n }\n // override to return an HtmlOverlayItem\n // use getClusterObjects() to get cluster contents\n renderCluster(coordinates, clusterId, pointCount) {\n return null;\n }\n}\n", "// deck.gl-community\n// SPDX-License-Identifier: MIT\n// Copyright (c) vis.gl contributors\nimport * as React from 'react';\nimport { HtmlOverlay } from \"./html-overlay.js\";\nimport { HtmlOverlayItem } from \"./html-overlay-item.js\";\nconst styles = {\n tooltip: {\n transform: 'translate(-50%,-100%)',\n backgroundColor: 'rgba(0, 0, 0, 0.3)',\n padding: '4px 8px',\n borderRadius: 8,\n color: 'white'\n }\n};\nconst SHOW_TOOLTIP_TIMEOUT = 250;\nexport class HtmlTooltipOverlay extends HtmlOverlay {\n constructor(props) {\n super(props);\n this.state = { visible: false, pickingInfo: null };\n }\n componentWillMount() {\n this.context.nebula.queryObjectEvents.on('pick', ({ event, pickingInfo }) => {\n if (this.timeoutID !== null) {\n window.clearTimeout(this.timeoutID);\n }\n this.timeoutID = null;\n if (pickingInfo && this._getTooltip(pickingInfo)) {\n this.timeoutID = window.setTimeout(() => {\n this.setState({ visible: true, pickingInfo });\n }, SHOW_TOOLTIP_TIMEOUT);\n }\n else {\n this.setState({ visible: false });\n }\n });\n }\n timeoutID = null;\n state = undefined;\n _getTooltip(pickingInfo) {\n return pickingInfo.object.style.tooltip;\n }\n _makeOverlay() {\n const { pickingInfo } = this.state;\n if (pickingInfo) {\n return (React.createElement(HtmlOverlayItem, { key: 0, coordinates: pickingInfo.lngLat, style: styles.tooltip }, this._getTooltip(pickingInfo)));\n }\n return null;\n }\n getItems() {\n if (this.state.visible) {\n return [this._makeOverlay()];\n }\n return [];\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "PropTypes", "import_react", "import_prop_types", "React", "PropTypes", "import_react", "React", "React", "import_styled_components", "Modal", "React", "React", "React", "Supercluster", "React", "styles"]
|
|
7
7
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
export { LongPressButton } from
|
|
2
|
-
export { ViewControl } from
|
|
3
|
-
export { PositionedViewControl } from
|
|
4
|
-
export { EditorModal as Modal } from
|
|
5
|
-
export { Button } from
|
|
6
|
-
export { Icon } from
|
|
7
|
-
export { HtmlOverlay } from
|
|
8
|
-
export { HtmlOverlayItem } from
|
|
9
|
-
export { HtmlClusterOverlay } from
|
|
10
|
-
export { HtmlTooltipOverlay } from
|
|
1
|
+
export { LongPressButton } from "./components/long-press-button.js";
|
|
2
|
+
export { ViewControl } from "./components/view-control.js";
|
|
3
|
+
export { PositionedViewControl } from "./components/positioned-view-control.js";
|
|
4
|
+
export { EditorModal as Modal } from "./components/modal.js";
|
|
5
|
+
export { Button } from "./components/modal.js";
|
|
6
|
+
export { Icon } from "./components/icon.js";
|
|
7
|
+
export { HtmlOverlay } from "./overlays/html-overlay.js";
|
|
8
|
+
export { HtmlOverlayItem } from "./overlays/html-overlay-item.js";
|
|
9
|
+
export { HtmlClusterOverlay } from "./overlays/html-cluster-overlay.js";
|
|
10
|
+
export { HtmlTooltipOverlay } from "./overlays/html-tooltip-overlay.js";
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,eAAe,EAAC,0CAAuC;AAC/D,OAAO,EAAC,WAAW,EAAC,qCAAkC;AACtD,OAAO,EAAC,qBAAqB,EAAC,gDAA6C;AAI3E,OAAO,EAAC,WAAW,IAAI,KAAK,EAAC,8BAA2B;AACxD,OAAO,EAAC,MAAM,EAAC,8BAA2B;AAC1C,OAAO,EAAC,IAAI,EAAC,6BAA0B;AAIvC,OAAO,EAAC,WAAW,EAAC,mCAAgC;AACpD,OAAO,EAAC,eAAe,EAAC,wCAAqC;AAC7D,OAAO,EAAC,kBAAkB,EAAC,2CAAwC;AAEnE,OAAO,EAAC,kBAAkB,EAAC,2CAAwC"}
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
//
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
4
|
+
// Components (originally from @deck.gl-community/graph-layers)
|
|
5
|
+
export { LongPressButton } from "./components/long-press-button.js";
|
|
6
|
+
export { ViewControl } from "./components/view-control.js";
|
|
7
|
+
export { PositionedViewControl } from "./components/positioned-view-control.js";
|
|
5
8
|
// Components (originally from @nebula.gl/editor)
|
|
6
|
-
export { EditorModal as Modal } from
|
|
7
|
-
export { Button } from
|
|
8
|
-
export { Icon } from
|
|
9
|
+
export { EditorModal as Modal } from "./components/modal.js";
|
|
10
|
+
export { Button } from "./components/modal.js";
|
|
11
|
+
export { Icon } from "./components/icon.js";
|
|
9
12
|
// Overlays (originally from @nebula.gl/overlays)
|
|
10
|
-
export { HtmlOverlay } from
|
|
11
|
-
export { HtmlOverlayItem } from
|
|
12
|
-
export { HtmlClusterOverlay } from
|
|
13
|
-
export { HtmlTooltipOverlay } from
|
|
13
|
+
export { HtmlOverlay } from "./overlays/html-overlay.js";
|
|
14
|
+
export { HtmlOverlayItem } from "./overlays/html-overlay-item.js";
|
|
15
|
+
export { HtmlClusterOverlay } from "./overlays/html-cluster-overlay.js";
|
|
16
|
+
export { HtmlTooltipOverlay } from "./overlays/html-tooltip-overlay.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Supercluster from 'supercluster';
|
|
2
|
-
import { HtmlOverlay } from
|
|
2
|
+
import { HtmlOverlay } from "./html-overlay.js";
|
|
3
3
|
export declare class HtmlClusterOverlay<ObjType> extends HtmlOverlay {
|
|
4
4
|
_superCluster: Supercluster;
|
|
5
5
|
_lastObjects: ObjType[] | null | undefined;
|
|
@@ -11,3 +11,4 @@ export declare class HtmlClusterOverlay<ObjType> extends HtmlOverlay {
|
|
|
11
11
|
renderObject(coordinates: number[], obj: ObjType): Record<string, any> | null | undefined;
|
|
12
12
|
renderCluster(coordinates: number[], clusterId: number, pointCount: number): Record<string, any> | null | undefined;
|
|
13
13
|
}
|
|
14
|
+
//# sourceMappingURL=html-cluster-overlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"html-cluster-overlay.d.ts","sourceRoot":"","sources":["../../src/overlays/html-cluster-overlay.ts"],"names":[],"mappings":"AAKA,OAAO,YAAY,MAAM,cAAc,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,0BAAuB;AAE3C,qBAAa,kBAAkB,CAAC,OAAO,CAAE,SAAQ,WAAW;IAC1D,aAAa,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAQ;IAElD,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE;IAgCjC,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,EAAE;IAS/C,aAAa,IAAI,OAAO,EAAE;IAK1B,oBAAoB,CAAC,GAAG,EAAE,OAAO,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAKpD,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS;IAO3D,YAAY,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS;IAMzF,aAAa,CACX,WAAW,EAAE,MAAM,EAAE,EACrB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,GACjB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS;CAG1C"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
1
4
|
import { point } from '@turf/helpers';
|
|
2
5
|
import Supercluster from 'supercluster';
|
|
3
|
-
import { HtmlOverlay } from
|
|
6
|
+
import { HtmlOverlay } from "./html-overlay.js";
|
|
4
7
|
export class HtmlClusterOverlay extends HtmlOverlay {
|
|
5
8
|
_superCluster;
|
|
6
9
|
_lastObjects = null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"html-overlay-item.d.ts","sourceRoot":"","sources":["../../src/overlays/html-overlay-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,KAAK,GAAG;IAEX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IAGX,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC7B,CAAC;AAEF,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACzD,MAAM;CAeP"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
1
4
|
import * as React from 'react';
|
|
2
5
|
export class HtmlOverlayItem extends React.Component {
|
|
3
6
|
render() {
|
|
4
|
-
const { x, y, children, style, coordinates, ...props } = this.props;
|
|
7
|
+
const { x, y, children, style, /* coordinates, */ ...props } = this.props;
|
|
5
8
|
const { zIndex = 'auto', ...remainingStyle } = style || {};
|
|
6
9
|
return (
|
|
7
10
|
// Using transform translate to position overlay items will result in a smooth zooming
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"html-overlay.d.ts","sourceRoot":"","sources":["../../src/overlays/html-overlay.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAO3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,qBAAa,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IAErD,MAAM,CAAC,eAAe,UAAQ;IAG9B,QAAQ,IAAI,KAAK,CAAC,GAAG,CAAC;IAQtB,SAAS,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAMlD,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,OAAO;IAWjC,aAAa,CAAC,CAAC,EAAE,MAAM;IAKvB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,GAAG,GAAG;IAK1D,WAAW;IAIX,OAAO;IAIP,MAAM;CAiBP"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { HtmlOverlay } from
|
|
2
|
+
import { HtmlOverlay } from "./html-overlay.js";
|
|
3
3
|
type State = {
|
|
4
4
|
visible: boolean;
|
|
5
5
|
pickingInfo: Record<string, any> | null | undefined;
|
|
@@ -14,3 +14,4 @@ export declare class HtmlTooltipOverlay extends HtmlOverlay {
|
|
|
14
14
|
getItems(): Array<Record<string, any> | null | undefined>;
|
|
15
15
|
}
|
|
16
16
|
export {};
|
|
17
|
+
//# sourceMappingURL=html-tooltip-overlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"html-tooltip-overlay.d.ts","sourceRoot":"","sources":["../../src/overlays/html-tooltip-overlay.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,WAAW,EAAC,0BAAuB;AAG3C,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACrD,CAAC;AAcF,qBAAa,kBAAmB,SAAQ,WAAW;gBACrC,KAAK,EAAE,GAAG;IAKtB,kBAAkB;IAiBlB,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAQ;IAC5C,KAAK,EAAE,KAAK,CAAc;IAE1B,WAAW,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM;IAIrD,YAAY;IAcZ,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAO1D"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
1
4
|
import * as React from 'react';
|
|
2
|
-
import { HtmlOverlay } from
|
|
3
|
-
import { HtmlOverlayItem } from
|
|
5
|
+
import { HtmlOverlay } from "./html-overlay.js";
|
|
6
|
+
import { HtmlOverlayItem } from "./html-overlay-item.js";
|
|
4
7
|
const styles = {
|
|
5
8
|
tooltip: {
|
|
6
9
|
transform: 'translate(-50%,-100%)',
|
package/package.json
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"name": "@deck.gl-community/react",
|
|
3
3
|
"description": "React components for deck.gl",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"version": "9.0.
|
|
5
|
+
"version": "9.1.0-beta.2",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "https://github.com/
|
|
8
|
+
"url": "https://github.com/visgl/deck.gl-community"
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "vitest run",
|
|
@@ -37,14 +37,13 @@
|
|
|
37
37
|
"@turf/helpers": "^6.5.0",
|
|
38
38
|
"@types/styled-react-modal": "^1.2.5",
|
|
39
39
|
"boxicons": "^2.1.4",
|
|
40
|
+
"preact": "^10.17.0",
|
|
40
41
|
"prop-types": "^15.8.1",
|
|
41
|
-
"
|
|
42
|
+
"react": "^18.2.0",
|
|
43
|
+
"react-dom": "^18.2.0",
|
|
44
|
+
"styled-components": "^6.1.1",
|
|
42
45
|
"styled-react-modal": "^3.1.1",
|
|
43
46
|
"supercluster": "^8.0.1"
|
|
44
47
|
},
|
|
45
|
-
"
|
|
46
|
-
"react": "^16.14 || ^17",
|
|
47
|
-
"react-dom": "^16.14 || ^17"
|
|
48
|
-
},
|
|
49
|
-
"gitHead": "646f8328d27d67d596f05c9154072051ec5cf4f0"
|
|
48
|
+
"gitHead": "80b6a3b1fafe0765f2070928ae360fc52bd57a46"
|
|
50
49
|
}
|
package/src/components/icon.tsx
CHANGED
package/src/components/modal.tsx
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
4
|
+
|
|
1
5
|
/* eslint-env browser */
|
|
2
6
|
|
|
3
7
|
import * as React from 'react';
|
|
4
8
|
import Modal, {ModalProvider} from 'styled-react-modal';
|
|
5
|
-
import styled from 'styled-components';
|
|
9
|
+
import {styled} from 'styled-components';
|
|
6
10
|
|
|
7
11
|
export const Button = styled.button`
|
|
8
12
|
display: inline-block;
|
|
@@ -1,8 +1,19 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
4
|
+
|
|
1
5
|
import {ViewControl} from './view-control';
|
|
2
6
|
import React from 'react';
|
|
3
7
|
|
|
4
8
|
// A wrapper for positioning the ViewControl component
|
|
5
|
-
export const PositionedViewControl = ({
|
|
9
|
+
export const PositionedViewControl = ({
|
|
10
|
+
fitBounds,
|
|
11
|
+
panBy,
|
|
12
|
+
zoomBy,
|
|
13
|
+
zoomLevel,
|
|
14
|
+
maxZoom = 20,
|
|
15
|
+
minZoom = -20
|
|
16
|
+
}) => (
|
|
6
17
|
<div style={{position: 'relative', top: '20px', left: '20px'}}>
|
|
7
18
|
<ViewControl
|
|
8
19
|
fitBounds={fitBounds}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
4
|
+
|
|
1
5
|
// @ts-nocheck TODO
|
|
2
6
|
|
|
3
7
|
import React, {PureComponent} from 'react';
|
|
4
8
|
import PropTypes from 'prop-types';
|
|
5
|
-
import styled from 'styled-components';
|
|
9
|
+
import {styled} from 'styled-components';
|
|
6
10
|
import {LongPressButton} from './long-press-button';
|
|
7
11
|
|
|
8
12
|
export const ViewControlWrapper = styled.div`
|
|
@@ -26,9 +30,9 @@ export const NavigationButtonContainer = styled.div`
|
|
|
26
30
|
export const NavigationButton = styled.div`
|
|
27
31
|
color: #848484;
|
|
28
32
|
cursor: pointer;
|
|
29
|
-
left: ${(props: any) => props
|
|
33
|
+
left: ${(props: any) => props.$left};
|
|
30
34
|
position: absolute;
|
|
31
|
-
top: ${(props: any) => props
|
|
35
|
+
top: ${(props: any) => props.$top};
|
|
32
36
|
transform: rotate(${(props: any) => props.rotate || 0}deg);
|
|
33
37
|
|
|
34
38
|
&:hover,
|
|
@@ -55,7 +59,7 @@ export const VerticalSlider = styled.div`
|
|
|
55
59
|
width: 10px;
|
|
56
60
|
|
|
57
61
|
> input[type='range'][orient='vertical'] {
|
|
58
|
-
-
|
|
62
|
+
writing-mode: vertical-lr;
|
|
59
63
|
height: 100px;
|
|
60
64
|
padding: 0;
|
|
61
65
|
margin: 0;
|
|
@@ -128,12 +132,17 @@ export class ViewControl extends PureComponent {
|
|
|
128
132
|
<ViewControlWrapper>
|
|
129
133
|
<NavigationButtonContainer>
|
|
130
134
|
{buttons.map((b: any) => (
|
|
131
|
-
<NavigationButton
|
|
135
|
+
<NavigationButton
|
|
136
|
+
key={b.key}
|
|
137
|
+
$top={`${b.top}px`}
|
|
138
|
+
$left={`${b.left}px`}
|
|
139
|
+
rotate={b.rotate}
|
|
140
|
+
>
|
|
132
141
|
<LongPressButton onClick={b.onClick}>{b.content}</LongPressButton>
|
|
133
142
|
</NavigationButton>
|
|
134
143
|
))}
|
|
135
144
|
{/* @ts-expect-error TODO */}
|
|
136
|
-
<NavigationButton top={'12px'} left={'16px'} onClick={this.props.fitBounds}>
|
|
145
|
+
<NavigationButton $top={'12px'} $left={'16px'} onClick={this.props.fitBounds}>
|
|
137
146
|
{'¤'}
|
|
138
147
|
</NavigationButton>
|
|
139
148
|
</NavigationButtonContainer>
|
|
@@ -149,7 +158,7 @@ export class ViewControl extends PureComponent {
|
|
|
149
158
|
max={(this.props as any).maxZoom}
|
|
150
159
|
step={(this.props as any).deltaZoom}
|
|
151
160
|
onChange={this.onChangeZoomLevel}
|
|
152
|
-
/* @ts-expect-error */
|
|
161
|
+
/* @ts-expect-error TODO */
|
|
153
162
|
orient="vertical"
|
|
154
163
|
/>
|
|
155
164
|
</VerticalSlider>
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
//
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
4
|
+
|
|
5
|
+
// Components (originally from @deck.gl-community/graph-layers)
|
|
2
6
|
|
|
3
7
|
export {LongPressButton} from './components/long-press-button';
|
|
4
8
|
export {ViewControl} from './components/view-control';
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
// deck.gl-community
|
|
2
|
+
// SPDX-License-Identifier: MIT
|
|
3
|
+
// Copyright (c) vis.gl contributors
|
|
4
|
+
|
|
1
5
|
import * as React from 'react';
|
|
2
6
|
|
|
3
7
|
type Props = {
|
|
@@ -13,7 +17,7 @@ type Props = {
|
|
|
13
17
|
|
|
14
18
|
export class HtmlOverlayItem extends React.Component<Props> {
|
|
15
19
|
render() {
|
|
16
|
-
const {x, y, children, style, coordinates, ...props} = this.props;
|
|
20
|
+
const {x, y, children, style, /* coordinates, */ ...props} = this.props;
|
|
17
21
|
const {zIndex = 'auto', ...remainingStyle} = style || {};
|
|
18
22
|
|
|
19
23
|
return (
|