@dxos/react-ui-geo 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced
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 +102 -5
- package/dist/lib/browser/{countries-110m-ZM3ZIEFS.mjs → countries-110m-RE5RNRQG.mjs} +1 -1
- package/dist/lib/browser/data.mjs +4 -3
- package/dist/lib/browser/data.mjs.map +4 -4
- package/dist/lib/browser/index.mjs +111 -120
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/translations.mjs +19 -0
- package/dist/lib/browser/translations.mjs.map +7 -0
- package/dist/lib/node-esm/{countries-110m-3SFASWVD.mjs → countries-110m-4EDBXSFJ.mjs} +1 -1
- package/dist/lib/node-esm/data.mjs +5 -3
- package/dist/lib/node-esm/data.mjs.map +4 -4
- package/dist/lib/node-esm/index.mjs +111 -119
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/translations.mjs +21 -0
- package/dist/lib/node-esm/translations.mjs.map +7 -0
- package/dist/types/data/airports.d.ts +4 -4
- package/dist/types/data/airports.d.ts.map +1 -1
- package/dist/types/data/cities.d.ts.map +1 -1
- package/dist/types/data/countries-110m.d.ts.map +1 -1
- package/dist/types/data/countries-dots-3.d.ts.map +1 -1
- package/dist/types/data/countries-dots-4.d.ts.map +1 -1
- package/dist/types/src/components/Globe/Globe.d.ts +5 -3
- package/dist/types/src/components/Globe/Globe.d.ts.map +1 -1
- package/dist/types/src/components/Globe/Globe.stories.d.ts +6 -4
- package/dist/types/src/components/Globe/Globe.stories.d.ts.map +1 -1
- package/dist/types/src/components/Map/Map.d.ts +20 -4
- package/dist/types/src/components/Map/Map.d.ts.map +1 -1
- package/dist/types/src/components/Map/Map.stories.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Controls.d.ts.map +1 -1
- package/dist/types/src/hooks/context.d.ts +1 -3
- package/dist/types/src/hooks/context.d.ts.map +1 -1
- package/dist/types/src/hooks/useDrag.d.ts.map +1 -1
- package/dist/types/src/hooks/useGlobeZoomHandler.d.ts +1 -1
- package/dist/types/src/hooks/useGlobeZoomHandler.d.ts.map +1 -1
- package/dist/types/src/hooks/useMapZoomHandler.d.ts +1 -1
- package/dist/types/src/hooks/useMapZoomHandler.d.ts.map +1 -1
- package/dist/types/src/hooks/useSpinner.d.ts.map +1 -1
- package/dist/types/src/hooks/useTour.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +0 -2
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +4 -4
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/util/debug.d.ts.map +1 -1
- package/dist/types/src/util/inertia.d.ts.map +1 -1
- package/dist/types/src/util/path.d.ts.map +1 -1
- package/dist/types/src/util/render.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +27 -24
- package/src/components/Globe/Globe.stories.tsx +5 -6
- package/src/components/Globe/Globe.tsx +56 -21
- package/src/components/Map/Map.stories.tsx +7 -6
- package/src/components/Map/Map.tsx +76 -31
- package/src/components/Toolbar/Controls.tsx +5 -5
- package/src/hooks/context.tsx +5 -34
- package/src/hooks/useSpinner.ts +0 -1
- package/src/index.ts +0 -2
- package/src/translations.ts +4 -4
- package/src/util/render.ts +0 -1
- package/dist/lib/browser/chunk-GMWLKTLN.mjs +0 -9
- package/dist/lib/browser/chunk-GMWLKTLN.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-JODBF4CC.mjs +0 -11
- package/dist/lib/node-esm/chunk-JODBF4CC.mjs.map +0 -7
- /package/dist/lib/browser/{countries-110m-ZM3ZIEFS.mjs.map → countries-110m-RE5RNRQG.mjs.map} +0 -0
- /package/dist/lib/node-esm/{countries-110m-3SFASWVD.mjs.map → countries-110m-4EDBXSFJ.mjs.map} +0 -0
package/LICENSE
CHANGED
|
@@ -1,8 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
Copyright (c) 2022 DXOS
|
|
1
|
+
# Functional Source License, Version 1.1, ALv2 Future License
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
## Abbreviation
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
FSL-1.1-Apache-2.0
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
## Notice
|
|
8
|
+
|
|
9
|
+
Copyright 2026 DXOS
|
|
10
|
+
|
|
11
|
+
## Terms and Conditions
|
|
12
|
+
|
|
13
|
+
### Licensor ("We")
|
|
14
|
+
|
|
15
|
+
The party offering the Software under these Terms and Conditions.
|
|
16
|
+
|
|
17
|
+
### The Software
|
|
18
|
+
|
|
19
|
+
The "Software" is each version of the software that we make available under
|
|
20
|
+
these Terms and Conditions, as indicated by our inclusion of these Terms and
|
|
21
|
+
Conditions with the Software.
|
|
22
|
+
|
|
23
|
+
### License Grant
|
|
24
|
+
|
|
25
|
+
Subject to your compliance with this License Grant and the Patents,
|
|
26
|
+
Redistribution and Trademark clauses below, we hereby grant you the right to
|
|
27
|
+
use, copy, modify, create derivative works, publicly perform, publicly display
|
|
28
|
+
and redistribute the Software for any Permitted Purpose identified below.
|
|
29
|
+
|
|
30
|
+
### Permitted Purpose
|
|
31
|
+
|
|
32
|
+
A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
|
|
33
|
+
means making the Software available to others in a commercial product or
|
|
34
|
+
service that:
|
|
35
|
+
|
|
36
|
+
1. substitutes for the Software;
|
|
37
|
+
|
|
38
|
+
2. substitutes for any other product or service we offer using the Software
|
|
39
|
+
that exists as of the date we make the Software available; or
|
|
40
|
+
|
|
41
|
+
3. offers the same or substantially similar functionality as the Software.
|
|
42
|
+
|
|
43
|
+
Permitted Purposes specifically include using the Software:
|
|
44
|
+
|
|
45
|
+
1. for your internal use and access;
|
|
46
|
+
|
|
47
|
+
2. for non-commercial education;
|
|
48
|
+
|
|
49
|
+
3. for non-commercial research; and
|
|
50
|
+
|
|
51
|
+
4. in connection with professional services that you provide to a licensee
|
|
52
|
+
using the Software in accordance with these Terms and Conditions.
|
|
53
|
+
|
|
54
|
+
### Patents
|
|
55
|
+
|
|
56
|
+
To the extent your use for a Permitted Purpose would necessarily infringe our
|
|
57
|
+
patents, the license grant above includes a license under our patents. If you
|
|
58
|
+
make a claim against any party that the Software infringes or contributes to
|
|
59
|
+
the infringement of any patent, then your patent license to the Software ends
|
|
60
|
+
immediately.
|
|
61
|
+
|
|
62
|
+
### Redistribution
|
|
63
|
+
|
|
64
|
+
The Terms and Conditions apply to all copies, modifications and derivatives of
|
|
65
|
+
the Software.
|
|
66
|
+
|
|
67
|
+
If you redistribute any copies, modifications or derivatives of the Software,
|
|
68
|
+
you must include a copy of or a link to these Terms and Conditions and not
|
|
69
|
+
remove any copyright notices provided in or with the Software.
|
|
70
|
+
|
|
71
|
+
### Disclaimer
|
|
72
|
+
|
|
73
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
|
|
74
|
+
IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
|
|
75
|
+
PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
|
|
76
|
+
|
|
77
|
+
IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
|
|
78
|
+
SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
|
|
79
|
+
EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
|
|
80
|
+
|
|
81
|
+
### Trademarks
|
|
82
|
+
|
|
83
|
+
Except for displaying the License Details and identifying us as the origin of
|
|
84
|
+
the Software, you have no right under these Terms and Conditions to use our
|
|
85
|
+
trademarks, trade names, service marks or product names.
|
|
86
|
+
|
|
87
|
+
## Grant of Future License
|
|
88
|
+
|
|
89
|
+
We hereby irrevocably grant you an additional license to use the Software under
|
|
90
|
+
the Apache License, Version 2.0 that is effective on the second anniversary of
|
|
91
|
+
the date we make the Software available. On or after that date, you may use the
|
|
92
|
+
Software under the Apache License, Version 2.0, in which case the following
|
|
93
|
+
will apply:
|
|
94
|
+
|
|
95
|
+
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
96
|
+
this file except in compliance with the License.
|
|
97
|
+
|
|
98
|
+
You may obtain a copy of the License at
|
|
99
|
+
|
|
100
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
101
|
+
|
|
102
|
+
Unless required by applicable law or agreed to in writing, software distributed
|
|
103
|
+
under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
|
|
104
|
+
CONDITIONS OF ANY KIND, either express or implied. See the License for the
|
|
105
|
+
specific language governing permissions and limitations under the License.
|
|
@@ -37856,4 +37856,4 @@ var countries_110m_default = {
|
|
|
37856
37856
|
export {
|
|
37857
37857
|
countries_110m_default as default
|
|
37858
37858
|
};
|
|
37859
|
-
//# sourceMappingURL=countries-110m-
|
|
37859
|
+
//# sourceMappingURL=countries-110m-RE5RNRQG.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [],
|
|
4
|
-
"sourcesContent": [],
|
|
5
|
-
"mappings": "",
|
|
6
|
-
"names": []
|
|
3
|
+
"sources": ["../../../src/data.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Topology } from 'topojson-specification';\n\nexport const loadTopology = async (): Promise<Topology> => {\n return (await import('../data/countries-110m.ts')).default;\n};\n"],
|
|
5
|
+
"mappings": ";AAMO,IAAMA,eAAe,YAAA;AAC1B,UAAQ,MAAM,OAAO,+BAAA,GAA8BC;AACrD;",
|
|
6
|
+
"names": ["loadTopology", "default"]
|
|
7
7
|
}
|
|
@@ -1,45 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
loadTopology
|
|
3
|
-
} from "./chunk-GMWLKTLN.mjs";
|
|
4
|
-
|
|
5
1
|
// src/components/Globe/Globe.tsx
|
|
6
2
|
import { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
|
|
7
|
-
import
|
|
3
|
+
import React2, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
|
|
8
4
|
import { useResizeDetector } from "react-resize-detector";
|
|
9
|
-
import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
|
|
10
|
-
import { mx } from "@dxos/ui-theme";
|
|
5
|
+
import { useComposedRefs, useControlledState, useDynamicRef, useThemeContext } from "@dxos/react-ui";
|
|
6
|
+
import { composable, composableProps, mx } from "@dxos/ui-theme";
|
|
11
7
|
|
|
12
8
|
// src/hooks/context.tsx
|
|
13
|
-
import
|
|
9
|
+
import { createContext, useContext } from "react";
|
|
14
10
|
import { raise } from "@dxos/debug";
|
|
15
|
-
import { useControlledState } from "@dxos/react-ui";
|
|
16
|
-
var defaults = {
|
|
17
|
-
center: {
|
|
18
|
-
lat: 51,
|
|
19
|
-
lng: 0
|
|
20
|
-
},
|
|
21
|
-
zoom: 4
|
|
22
|
-
};
|
|
23
11
|
var GlobeContext = /* @__PURE__ */ createContext(void 0);
|
|
24
|
-
var GlobeContextProvider = ({ children, size, center: centerProp = defaults.center, zoom: zoomProp = defaults.zoom, translation: translationProp, rotation: rotationProp }) => {
|
|
25
|
-
const [center, setCenter] = useControlledState(centerProp);
|
|
26
|
-
const [zoom, setZoom] = useControlledState(zoomProp);
|
|
27
|
-
const [translation, setTranslation] = useControlledState(translationProp);
|
|
28
|
-
const [rotation, setRotation] = useControlledState(rotationProp);
|
|
29
|
-
return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
|
|
30
|
-
value: {
|
|
31
|
-
size,
|
|
32
|
-
center,
|
|
33
|
-
zoom,
|
|
34
|
-
translation,
|
|
35
|
-
rotation,
|
|
36
|
-
setCenter,
|
|
37
|
-
setZoom,
|
|
38
|
-
setTranslation,
|
|
39
|
-
setRotation
|
|
40
|
-
}
|
|
41
|
-
}, children);
|
|
42
|
-
};
|
|
43
12
|
var useGlobeContext = () => {
|
|
44
13
|
return useContext(GlobeContext) ?? raise(new Error("Missing GlobeContext"));
|
|
45
14
|
};
|
|
@@ -624,25 +593,9 @@ var useTour = (controller, points, options = {}) => {
|
|
|
624
593
|
};
|
|
625
594
|
|
|
626
595
|
// src/components/Toolbar/Controls.tsx
|
|
627
|
-
import
|
|
596
|
+
import React from "react";
|
|
628
597
|
import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
|
|
629
|
-
|
|
630
|
-
// src/translations.ts
|
|
631
|
-
var translationKey = "@dxos/react-ui-geo";
|
|
632
|
-
var translations = [
|
|
633
|
-
{
|
|
634
|
-
"en-US": {
|
|
635
|
-
[translationKey]: {
|
|
636
|
-
"zoom in icon button": "Zoom in",
|
|
637
|
-
"zoom out icon button": "Zoom out",
|
|
638
|
-
"start icon button": "Start",
|
|
639
|
-
"toggle icon button": "Toggle"
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
}
|
|
643
|
-
];
|
|
644
|
-
|
|
645
|
-
// src/components/Toolbar/Controls.tsx
|
|
598
|
+
import { translationKey } from "#translations";
|
|
646
599
|
var controlPositions = {
|
|
647
600
|
topleft: "top-2 left-2",
|
|
648
601
|
topright: "top-2 right-2",
|
|
@@ -651,39 +604,39 @@ var controlPositions = {
|
|
|
651
604
|
};
|
|
652
605
|
var ZoomControls = ({ classNames, onAction }) => {
|
|
653
606
|
const { t } = useTranslation(translationKey);
|
|
654
|
-
return /* @__PURE__ */
|
|
607
|
+
return /* @__PURE__ */ React.createElement(Toolbar.Root, {
|
|
655
608
|
classNames: [
|
|
656
609
|
"gap-2",
|
|
657
610
|
classNames
|
|
658
611
|
]
|
|
659
|
-
}, /* @__PURE__ */
|
|
612
|
+
}, /* @__PURE__ */ React.createElement(IconButton, {
|
|
660
613
|
icon: "ph--plus--regular",
|
|
661
614
|
iconOnly: true,
|
|
662
|
-
label: t("zoom
|
|
615
|
+
label: t("zoom-in-icon.button"),
|
|
663
616
|
onClick: () => onAction?.("zoom-in")
|
|
664
|
-
}), /* @__PURE__ */
|
|
617
|
+
}), /* @__PURE__ */ React.createElement(IconButton, {
|
|
665
618
|
icon: "ph--minus--regular",
|
|
666
619
|
iconOnly: true,
|
|
667
|
-
label: t("zoom
|
|
620
|
+
label: t("zoom-out-icon.button"),
|
|
668
621
|
onClick: () => onAction?.("zoom-out")
|
|
669
622
|
}));
|
|
670
623
|
};
|
|
671
624
|
var ActionControls = ({ classNames, onAction }) => {
|
|
672
625
|
const { t } = useTranslation(translationKey);
|
|
673
|
-
return /* @__PURE__ */
|
|
626
|
+
return /* @__PURE__ */ React.createElement(Toolbar.Root, {
|
|
674
627
|
classNames: [
|
|
675
628
|
"gap-2",
|
|
676
629
|
classNames
|
|
677
630
|
]
|
|
678
|
-
}, /* @__PURE__ */
|
|
631
|
+
}, /* @__PURE__ */ React.createElement(IconButton, {
|
|
679
632
|
icon: "ph--path--regular",
|
|
680
633
|
iconOnly: true,
|
|
681
|
-
label: t("start
|
|
634
|
+
label: t("start-icon.button"),
|
|
682
635
|
onClick: () => onAction?.("start")
|
|
683
|
-
}), /* @__PURE__ */
|
|
636
|
+
}), /* @__PURE__ */ React.createElement(IconButton, {
|
|
684
637
|
icon: "ph--globe-hemisphere-west--regular",
|
|
685
638
|
iconOnly: true,
|
|
686
|
-
label: t("toggle
|
|
639
|
+
label: t("toggle-icon.button"),
|
|
687
640
|
onClick: () => onAction?.("toggle")
|
|
688
641
|
}));
|
|
689
642
|
};
|
|
@@ -743,19 +696,39 @@ var getProjection = (type = "orthographic") => {
|
|
|
743
696
|
}
|
|
744
697
|
return type ?? geoOrthographic();
|
|
745
698
|
};
|
|
746
|
-
var
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
699
|
+
var DEFAULT_ZOOM = 1.5;
|
|
700
|
+
var GlobeRoot = composable(({ children, center: centerProp, zoom: zoomProp = DEFAULT_ZOOM, translation: translationProp, rotation: rotationProp, ...props }, forwardedRef) => {
|
|
701
|
+
const localRef = useRef(null);
|
|
702
|
+
const composedRef = useComposedRefs(localRef, forwardedRef);
|
|
703
|
+
const { width, height } = useResizeDetector({
|
|
704
|
+
targetRef: localRef
|
|
705
|
+
});
|
|
706
|
+
const [center, setCenter] = useControlledState(centerProp);
|
|
707
|
+
const [zoom, setZoom] = useControlledState(zoomProp);
|
|
708
|
+
const [translation, setTranslation] = useControlledState(translationProp);
|
|
709
|
+
const [rotation, setRotation] = useControlledState(rotationProp);
|
|
710
|
+
return /* @__PURE__ */ React2.createElement(GlobeContext.Provider, {
|
|
711
|
+
value: {
|
|
712
|
+
size: {
|
|
713
|
+
width,
|
|
714
|
+
height
|
|
715
|
+
},
|
|
716
|
+
center,
|
|
717
|
+
zoom,
|
|
718
|
+
translation,
|
|
719
|
+
rotation,
|
|
720
|
+
setCenter,
|
|
721
|
+
setZoom,
|
|
722
|
+
setTranslation,
|
|
723
|
+
setRotation
|
|
724
|
+
}
|
|
725
|
+
}, /* @__PURE__ */ React2.createElement("div", {
|
|
726
|
+
...composableProps(props, {
|
|
727
|
+
classNames: "relative dx-container"
|
|
728
|
+
}),
|
|
729
|
+
ref: composedRef
|
|
757
730
|
}, children));
|
|
758
|
-
};
|
|
731
|
+
});
|
|
759
732
|
var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topology, features, styles: stylesProp }, forwardRef3) => {
|
|
760
733
|
const { themeMode } = useThemeContext();
|
|
761
734
|
const styles = useMemo2(() => stylesProp ?? defaultStyles[themeMode], [
|
|
@@ -778,7 +751,6 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
|
|
|
778
751
|
const zoomRef = useDynamicRef(zoom);
|
|
779
752
|
useEffect4(() => {
|
|
780
753
|
if (center) {
|
|
781
|
-
setZoom(1);
|
|
782
754
|
setRotation(positionToRotation(geoToPosition(center)));
|
|
783
755
|
}
|
|
784
756
|
}, [
|
|
@@ -843,7 +815,7 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
|
|
|
843
815
|
if (!size.width || !size.height) {
|
|
844
816
|
return null;
|
|
845
817
|
}
|
|
846
|
-
return /* @__PURE__ */
|
|
818
|
+
return /* @__PURE__ */ React2.createElement("canvas", {
|
|
847
819
|
ref: canvasRef,
|
|
848
820
|
width: size.width,
|
|
849
821
|
height: size.height
|
|
@@ -851,9 +823,9 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
|
|
|
851
823
|
});
|
|
852
824
|
var GlobeDebug = ({ position = "topleft" }) => {
|
|
853
825
|
const { size, zoom, translation, rotation } = useGlobeContext();
|
|
854
|
-
return /* @__PURE__ */
|
|
826
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
855
827
|
className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm", controlPositions[position])
|
|
856
|
-
}, /* @__PURE__ */
|
|
828
|
+
}, /* @__PURE__ */ React2.createElement("pre", {
|
|
857
829
|
className: "font-mono text-xs text-green-700"
|
|
858
830
|
}, JSON.stringify({
|
|
859
831
|
size,
|
|
@@ -863,25 +835,25 @@ var GlobeDebug = ({ position = "topleft" }) => {
|
|
|
863
835
|
}, null, 2)));
|
|
864
836
|
};
|
|
865
837
|
var GlobePanel = ({ position, classNames, children }) => {
|
|
866
|
-
return /* @__PURE__ */
|
|
838
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
867
839
|
className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
|
|
868
840
|
}, children);
|
|
869
841
|
};
|
|
870
842
|
var CustomControl = ({ position, children }) => {
|
|
871
|
-
return /* @__PURE__ */
|
|
843
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
872
844
|
className: mx("z-10 absolute overflow-hidden", controlPositions[position])
|
|
873
845
|
}, children);
|
|
874
846
|
};
|
|
875
|
-
var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */
|
|
847
|
+
var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
|
|
876
848
|
position,
|
|
877
849
|
...props
|
|
878
|
-
}, /* @__PURE__ */
|
|
850
|
+
}, /* @__PURE__ */ React2.createElement(ZoomControls, {
|
|
879
851
|
onAction
|
|
880
852
|
}));
|
|
881
|
-
var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */
|
|
853
|
+
var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
|
|
882
854
|
position,
|
|
883
855
|
...props
|
|
884
|
-
}, /* @__PURE__ */
|
|
856
|
+
}, /* @__PURE__ */ React2.createElement(ActionControls, {
|
|
885
857
|
onAction
|
|
886
858
|
}));
|
|
887
859
|
var Globe = {
|
|
@@ -897,24 +869,47 @@ var Globe = {
|
|
|
897
869
|
import "leaflet/dist/leaflet.css";
|
|
898
870
|
import { createContext as createContext2 } from "@radix-ui/react-context";
|
|
899
871
|
import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
|
|
900
|
-
import
|
|
872
|
+
import React3, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2 } from "react";
|
|
901
873
|
import { createRoot } from "react-dom/client";
|
|
902
874
|
import { MapContainer, Marker, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
|
|
903
875
|
import { ThemeProvider, Tooltip } from "@dxos/react-ui";
|
|
904
|
-
import { defaultTx, mx as mx2 } from "@dxos/ui-theme";
|
|
905
|
-
var
|
|
876
|
+
import { composable as composable2, composableProps as composableProps2, defaultTx, mx as mx2 } from "@dxos/ui-theme";
|
|
877
|
+
var defaults = {
|
|
906
878
|
center: {
|
|
907
879
|
lat: 51,
|
|
908
880
|
lng: 0
|
|
909
881
|
},
|
|
910
882
|
zoom: 4
|
|
911
883
|
};
|
|
912
|
-
var [
|
|
913
|
-
var MapRoot =
|
|
914
|
-
const
|
|
884
|
+
var [MapContextProvider, useMapContext] = createContext2("Map");
|
|
885
|
+
var MapRoot = composable2(({ children, onChange, ...props }, forwardedRef) => {
|
|
886
|
+
const attention = false;
|
|
887
|
+
return /* @__PURE__ */ React3.createElement(MapContextProvider, {
|
|
888
|
+
attention,
|
|
889
|
+
onChange
|
|
890
|
+
}, /* @__PURE__ */ React3.createElement("div", {
|
|
891
|
+
...composableProps2(props, {
|
|
892
|
+
role: "none",
|
|
893
|
+
classNames: "dx-container grid dx-focus-ring-inset"
|
|
894
|
+
}),
|
|
895
|
+
ref: forwardedRef
|
|
896
|
+
}, children));
|
|
897
|
+
});
|
|
898
|
+
MapRoot.displayName = "Map.Root";
|
|
899
|
+
var MAP_CONTENT_NAME = "Map.Content";
|
|
900
|
+
var MapContent = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props }, forwardedRef) => {
|
|
901
|
+
const { attention } = useMapContext(MAP_CONTENT_NAME);
|
|
915
902
|
const mapRef = useRef2(null);
|
|
916
903
|
const map = mapRef.current;
|
|
917
904
|
useImperativeHandle2(forwardedRef, () => ({
|
|
905
|
+
getCenter: () => {
|
|
906
|
+
const center2 = mapRef.current?.getCenter();
|
|
907
|
+
return center2 ? {
|
|
908
|
+
lat: center2.lat,
|
|
909
|
+
lng: center2.lng
|
|
910
|
+
} : void 0;
|
|
911
|
+
},
|
|
912
|
+
getZoom: () => mapRef.current?.getZoom(),
|
|
918
913
|
setCenter: (center2, zoom2) => {
|
|
919
914
|
mapRef.current?.setView(center2, zoom2);
|
|
920
915
|
},
|
|
@@ -935,29 +930,28 @@ var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true,
|
|
|
935
930
|
map,
|
|
936
931
|
attention
|
|
937
932
|
]);
|
|
938
|
-
return /* @__PURE__ */
|
|
939
|
-
attention,
|
|
940
|
-
onChange
|
|
941
|
-
}, /* @__PURE__ */ React4.createElement(MapContainer, {
|
|
933
|
+
return /* @__PURE__ */ React3.createElement(MapContainer, {
|
|
942
934
|
...props,
|
|
943
|
-
|
|
944
|
-
className: mx2("group relative grid h-full w-full !bg-base-surface dx-focus-ring-inset", classNames),
|
|
935
|
+
className: mx2("group relative grid bg-base-surface!", classNames),
|
|
945
936
|
attributionControl: false,
|
|
946
937
|
zoomControl: false,
|
|
947
938
|
scrollWheelZoom,
|
|
948
939
|
doubleClickZoom,
|
|
949
940
|
touchZoom,
|
|
950
|
-
center: center ??
|
|
951
|
-
zoom: zoom ??
|
|
952
|
-
|
|
941
|
+
center: center ?? defaults.center,
|
|
942
|
+
zoom: zoom ?? defaults.zoom,
|
|
943
|
+
whenReady: () => {
|
|
944
|
+
},
|
|
945
|
+
ref: mapRef
|
|
946
|
+
}, children);
|
|
953
947
|
});
|
|
954
|
-
|
|
948
|
+
MapContent.displayName = "Map.Content";
|
|
955
949
|
var MAP_TILES_NAME = "Map.Tiles";
|
|
956
950
|
var MapTiles = (_props) => {
|
|
957
951
|
const ref = useRef2(null);
|
|
958
952
|
const { onChange } = useMapContext(MAP_TILES_NAME);
|
|
959
953
|
useMapEvents({
|
|
960
|
-
|
|
954
|
+
moveend: (ev) => {
|
|
961
955
|
onChange?.({
|
|
962
956
|
center: ev.target.getCenter(),
|
|
963
957
|
zoom: ev.target.getZoom()
|
|
@@ -972,7 +966,7 @@ var MapTiles = (_props) => {
|
|
|
972
966
|
}, [
|
|
973
967
|
attention
|
|
974
968
|
]);
|
|
975
|
-
return /* @__PURE__ */
|
|
969
|
+
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(TileLayer, {
|
|
976
970
|
ref,
|
|
977
971
|
"data-attention": attention,
|
|
978
972
|
detectRetina: true,
|
|
@@ -985,17 +979,16 @@ MapTiles.displayName = MAP_TILES_NAME;
|
|
|
985
979
|
var MapMarkers = ({ selected, markers }) => {
|
|
986
980
|
const map = useMap();
|
|
987
981
|
useEffect5(() => {
|
|
988
|
-
if (markers.length > 0) {
|
|
982
|
+
if (markers && markers.length > 0) {
|
|
989
983
|
const bounds = latLngBounds(markers.map((marker) => marker.location));
|
|
990
984
|
map.fitBounds(bounds);
|
|
991
|
-
} else {
|
|
992
|
-
map.setView(defaults2.center, defaults2.zoom);
|
|
993
985
|
}
|
|
994
986
|
}, [
|
|
995
|
-
markers
|
|
987
|
+
markers,
|
|
988
|
+
map
|
|
996
989
|
]);
|
|
997
|
-
return /* @__PURE__ */
|
|
998
|
-
return /* @__PURE__ */
|
|
990
|
+
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
|
|
991
|
+
return /* @__PURE__ */ React3.createElement(Marker, {
|
|
999
992
|
key: id,
|
|
1000
993
|
position: {
|
|
1001
994
|
lat,
|
|
@@ -1026,7 +1019,7 @@ var MapMarkers = ({ selected, markers }) => {
|
|
|
1026
1019
|
]
|
|
1027
1020
|
})
|
|
1028
1021
|
)
|
|
1029
|
-
}, title && /* @__PURE__ */
|
|
1022
|
+
}, title && /* @__PURE__ */ React3.createElement(Popup, null, title));
|
|
1030
1023
|
}));
|
|
1031
1024
|
};
|
|
1032
1025
|
MapMarkers.displayName = "Map.Markers";
|
|
@@ -1041,9 +1034,9 @@ var CustomControl2 = ({ position, children }) => {
|
|
|
1041
1034
|
DomEvent.disableClickPropagation(container);
|
|
1042
1035
|
DomEvent.disableScrollPropagation(container);
|
|
1043
1036
|
const root = createRoot(container);
|
|
1044
|
-
root.render(/* @__PURE__ */
|
|
1037
|
+
root.render(/* @__PURE__ */ React3.createElement(ThemeProvider, {
|
|
1045
1038
|
tx: defaultTx
|
|
1046
|
-
}, /* @__PURE__ */
|
|
1039
|
+
}, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, children)));
|
|
1047
1040
|
return container;
|
|
1048
1041
|
};
|
|
1049
1042
|
control.addTo(map);
|
|
@@ -1057,20 +1050,21 @@ var CustomControl2 = ({ position, children }) => {
|
|
|
1057
1050
|
]);
|
|
1058
1051
|
return null;
|
|
1059
1052
|
};
|
|
1060
|
-
var MapZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */
|
|
1053
|
+
var MapZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl2, {
|
|
1061
1054
|
position,
|
|
1062
1055
|
...props
|
|
1063
|
-
}, /* @__PURE__ */
|
|
1056
|
+
}, /* @__PURE__ */ React3.createElement(ZoomControls, {
|
|
1064
1057
|
onAction
|
|
1065
1058
|
}));
|
|
1066
|
-
var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */
|
|
1059
|
+
var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl2, {
|
|
1067
1060
|
position,
|
|
1068
1061
|
...props
|
|
1069
|
-
}, /* @__PURE__ */
|
|
1062
|
+
}, /* @__PURE__ */ React3.createElement(ActionControls, {
|
|
1070
1063
|
onAction
|
|
1071
1064
|
}));
|
|
1072
1065
|
var Map = {
|
|
1073
1066
|
Root: MapRoot,
|
|
1067
|
+
Content: MapContent,
|
|
1074
1068
|
Tiles: MapTiles,
|
|
1075
1069
|
Markers: MapMarkers,
|
|
1076
1070
|
Zoom: MapZoom,
|
|
@@ -1079,7 +1073,7 @@ var Map = {
|
|
|
1079
1073
|
export {
|
|
1080
1074
|
ActionControls,
|
|
1081
1075
|
Globe,
|
|
1082
|
-
|
|
1076
|
+
GlobeContext,
|
|
1083
1077
|
Map,
|
|
1084
1078
|
ZoomControls,
|
|
1085
1079
|
closestPoint,
|
|
@@ -1091,13 +1085,10 @@ export {
|
|
|
1091
1085
|
geoPoint,
|
|
1092
1086
|
geoToPosition,
|
|
1093
1087
|
getDistance,
|
|
1094
|
-
loadTopology,
|
|
1095
1088
|
positionToRotation,
|
|
1096
1089
|
renderLayers,
|
|
1097
1090
|
restrictAxis,
|
|
1098
1091
|
timer,
|
|
1099
|
-
translationKey,
|
|
1100
|
-
translations,
|
|
1101
1092
|
useDrag,
|
|
1102
1093
|
useGlobeContext,
|
|
1103
1094
|
useGlobeZoomHandler,
|