@ztwoint/z-ui 0.1.122 → 0.1.124
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/assets/icons/index.d.ts +2 -0
- package/dist/components/assets/icons/left-square-bracket.d.ts +6 -0
- package/dist/components/assets/icons/left-square-bracket.js +23 -0
- package/dist/components/assets/icons/right-square-bracket.d.ts +6 -0
- package/dist/components/assets/icons/right-square-bracket.js +23 -0
- package/dist/components/table/components/cell/avatar-cell.js +13 -6
- package/dist/components/table/table-provider.js +7 -0
- package/dist/components/table-card/table-card.js +52 -45
- package/dist/components/z2map/components/index.d.ts +5 -0
- package/dist/components/z2map/components/map-controls.d.ts +12 -0
- package/dist/components/z2map/components/map-controls.js +29 -0
- package/dist/components/z2map/components/map-empty-state.d.ts +2 -0
- package/dist/components/z2map/components/map-empty-state.js +10 -0
- package/dist/components/z2map/components/map-loading-state.d.ts +8 -0
- package/dist/components/z2map/components/map-loading-state.js +45 -0
- package/dist/components/z2map/components/map-pin-content.d.ts +8 -0
- package/dist/components/z2map/components/map-pin-content.js +27 -0
- package/dist/components/z2map/components/map-pin.d.ts +19 -0
- package/dist/components/z2map/components/map-pin.js +116 -0
- package/dist/components/z2map/components/map-style-control.d.ts +8 -0
- package/dist/components/z2map/components/map-style-control.js +45 -0
- package/dist/components/z2map/components/map-zoom-control.d.ts +8 -0
- package/dist/components/z2map/components/map-zoom-control.js +49 -0
- package/dist/components/z2map/index.d.ts +9 -0
- package/dist/components/z2map/map.constants.d.ts +47 -0
- package/dist/components/z2map/map.constants.js +40 -0
- package/dist/components/z2map/map.d.ts +4 -0
- package/dist/components/z2map/map.hook.d.ts +33 -0
- package/dist/components/z2map/map.hook.js +99 -0
- package/dist/components/z2map/map.js +161 -0
- package/dist/components/z2map/map.type.d.ts +45 -0
- package/dist/components/z2map/map.utils.d.ts +10 -0
- package/dist/components/z2map/map.utils.js +37 -0
- package/dist/css/node_modules/mapbox-gl/dist/mapbox-gl.css +1 -0
- package/dist/css/styles/tailwind.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +221 -201
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/attribution-control.js +12 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/fullscreen-control.js +12 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/geolocate-control.js +30 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/map.js +54 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/marker.js +56 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/navigation-control.js +12 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/popup.js +35 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/scale-control.js +14 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/use-control.js +14 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/components/use-map.js +6 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/mapbox/create-ref.js +77 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/mapbox/mapbox.js +315 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/mapbox/proxy-transform.js +35 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/utils/apply-react-style.js +13 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/utils/compare-class-names.js +16 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/utils/deep-equal.js +33 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/utils/set-globals.js +18 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/utils/style-utils.js +25 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/utils/transform.js +40 -0
- package/dist/node_modules/@vis.gl/react-mapbox/dist/utils/use-isomorphic-layout-effect.js +5 -0
- package/dist/routes/map.d.ts +2 -0
- package/dist/types/components/assets/icons/index.d.ts +2 -0
- package/dist/types/components/assets/icons/left-square-bracket.d.ts +6 -0
- package/dist/types/components/assets/icons/right-square-bracket.d.ts +6 -0
- package/dist/types/components/z2map/components/index.d.ts +5 -0
- package/dist/types/components/z2map/components/map-controls.d.ts +12 -0
- package/dist/types/components/z2map/components/map-empty-state.d.ts +2 -0
- package/dist/types/components/z2map/components/map-loading-state.d.ts +8 -0
- package/dist/types/components/z2map/components/map-pin-content.d.ts +8 -0
- package/dist/types/components/z2map/components/map-pin.d.ts +19 -0
- package/dist/types/components/z2map/components/map-style-control.d.ts +8 -0
- package/dist/types/components/z2map/components/map-zoom-control.d.ts +8 -0
- package/dist/types/components/z2map/index.d.ts +9 -0
- package/dist/types/components/z2map/map.constants.d.ts +47 -0
- package/dist/types/components/z2map/map.d.ts +5 -0
- package/dist/types/components/z2map/map.hook.d.ts +33 -0
- package/dist/types/components/z2map/map.type.d.ts +45 -0
- package/dist/types/components/z2map/map.utils.d.ts +10 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/routes/map.d.ts +2 -0
- package/package.json +5 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { memo as l, forwardRef as f, useRef as p, useImperativeHandle as m, useEffect as d } from "react";
|
|
2
|
+
import { applyReactStyle as U } from "../utils/apply-react-style.js";
|
|
3
|
+
import { useControl as _ } from "./use-control.js";
|
|
4
|
+
function k(n, a) {
|
|
5
|
+
const c = p({ props: n }), s = _(({ mapLib: u }) => {
|
|
6
|
+
const e = new u.GeolocateControl(n), i = e._setupUI.bind(e);
|
|
7
|
+
return e._setupUI = (r) => {
|
|
8
|
+
e._container.hasChildNodes() || i(r);
|
|
9
|
+
}, e.on("geolocate", (r) => {
|
|
10
|
+
var o, t;
|
|
11
|
+
(t = (o = c.current.props).onGeolocate) == null || t.call(o, r);
|
|
12
|
+
}), e.on("error", (r) => {
|
|
13
|
+
var o, t;
|
|
14
|
+
(t = (o = c.current.props).onError) == null || t.call(o, r);
|
|
15
|
+
}), e.on("outofmaxbounds", (r) => {
|
|
16
|
+
var o, t;
|
|
17
|
+
(t = (o = c.current.props).onOutOfMaxBounds) == null || t.call(o, r);
|
|
18
|
+
}), e.on("trackuserlocationstart", (r) => {
|
|
19
|
+
var o, t;
|
|
20
|
+
(t = (o = c.current.props).onTrackUserLocationStart) == null || t.call(o, r);
|
|
21
|
+
}), e.on("trackuserlocationend", (r) => {
|
|
22
|
+
var o, t;
|
|
23
|
+
(t = (o = c.current.props).onTrackUserLocationEnd) == null || t.call(o, r);
|
|
24
|
+
}), e;
|
|
25
|
+
}, { position: n.position });
|
|
26
|
+
return c.current.props = n, m(a, () => s, []), d(() => {
|
|
27
|
+
U(s._container, n.style);
|
|
28
|
+
}, [n.style]), null;
|
|
29
|
+
}
|
|
30
|
+
l(f(k));
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import * as o from "react";
|
|
2
|
+
import { useContext as b, useState as E, useRef as s, useEffect as v, useImperativeHandle as y, useMemo as L } from "react";
|
|
3
|
+
import { MountedMapsContext as I } from "./use-map.js";
|
|
4
|
+
import f from "../mapbox/mapbox.js";
|
|
5
|
+
import w from "../mapbox/create-ref.js";
|
|
6
|
+
import x from "../utils/use-isomorphic-layout-effect.js";
|
|
7
|
+
import R from "../utils/set-globals.js";
|
|
8
|
+
const g = o.createContext(null);
|
|
9
|
+
function C(e, u) {
|
|
10
|
+
const a = b(I), [l, M] = E(null), c = s(), { current: i } = s({ mapLib: null, map: null });
|
|
11
|
+
v(() => {
|
|
12
|
+
const p = e.mapLib;
|
|
13
|
+
let m = !0, t;
|
|
14
|
+
return Promise.resolve(p || import("mapbox-gl")).then((r) => {
|
|
15
|
+
if (!m)
|
|
16
|
+
return;
|
|
17
|
+
if (!r)
|
|
18
|
+
throw new Error("Invalid mapLib");
|
|
19
|
+
const n = "Map" in r ? r : r.default;
|
|
20
|
+
if (!n.Map)
|
|
21
|
+
throw new Error("Invalid mapLib");
|
|
22
|
+
R(n, e), e.reuseMaps && (t = f.reuse(e, c.current)), t || (t = new f(n.Map, e, c.current)), i.map = w(t), i.mapLib = n, M(t), a == null || a.onMapMount(i.map, e.id);
|
|
23
|
+
}).catch((r) => {
|
|
24
|
+
const { onError: n } = e;
|
|
25
|
+
n ? n({
|
|
26
|
+
type: "error",
|
|
27
|
+
target: null,
|
|
28
|
+
error: r
|
|
29
|
+
}) : console.error(r);
|
|
30
|
+
}), () => {
|
|
31
|
+
m = !1, t && (a == null || a.onMapUnmount(e.id), e.reuseMaps ? t.recycle() : t.destroy());
|
|
32
|
+
};
|
|
33
|
+
}, []), x(() => {
|
|
34
|
+
l && l.setProps(e);
|
|
35
|
+
}), y(u, () => i.map, [l]);
|
|
36
|
+
const d = L(() => ({
|
|
37
|
+
position: "relative",
|
|
38
|
+
width: "100%",
|
|
39
|
+
height: "100%",
|
|
40
|
+
...e.style
|
|
41
|
+
}), [e.style]), h = {
|
|
42
|
+
height: "100%"
|
|
43
|
+
};
|
|
44
|
+
return o.createElement("div", { id: e.id, ref: c, style: d }, l && o.createElement(
|
|
45
|
+
g.Provider,
|
|
46
|
+
{ value: i },
|
|
47
|
+
o.createElement("div", { "mapboxgl-children": "", style: h }, e.children)
|
|
48
|
+
));
|
|
49
|
+
}
|
|
50
|
+
const A = o.forwardRef(C);
|
|
51
|
+
export {
|
|
52
|
+
A as Map,
|
|
53
|
+
g as MapContext
|
|
54
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as D from "react";
|
|
2
|
+
import { memo as M, forwardRef as N, useContext as b, useRef as y, useMemo as x, useEffect as R, useImperativeHandle as w } from "react";
|
|
3
|
+
import { createPortal as O } from "react-dom";
|
|
4
|
+
import { applyReactStyle as S } from "../utils/apply-react-style.js";
|
|
5
|
+
import { MapContext as q } from "./map.js";
|
|
6
|
+
import { arePointsEqual as H } from "../utils/deep-equal.js";
|
|
7
|
+
import { compareClassNames as I } from "../utils/compare-class-names.js";
|
|
8
|
+
const J = M(N((a, v) => {
|
|
9
|
+
const { map: k, mapLib: C } = b(q), l = y({ props: a }), t = x(() => {
|
|
10
|
+
let s = !1;
|
|
11
|
+
D.Children.forEach(a.children, (o) => {
|
|
12
|
+
o && (s = !0);
|
|
13
|
+
});
|
|
14
|
+
const A = {
|
|
15
|
+
...a,
|
|
16
|
+
element: s ? document.createElement("div") : null
|
|
17
|
+
}, i = new C.Marker(A);
|
|
18
|
+
return i.setLngLat([a.longitude, a.latitude]), i.getElement().addEventListener("click", (o) => {
|
|
19
|
+
var e, n;
|
|
20
|
+
(n = (e = l.current.props).onClick) == null || n.call(e, {
|
|
21
|
+
type: "click",
|
|
22
|
+
target: i,
|
|
23
|
+
originalEvent: o
|
|
24
|
+
});
|
|
25
|
+
}), i.on("dragstart", (o) => {
|
|
26
|
+
var n, r;
|
|
27
|
+
const e = o;
|
|
28
|
+
e.lngLat = t.getLngLat(), (r = (n = l.current.props).onDragStart) == null || r.call(n, e);
|
|
29
|
+
}), i.on("drag", (o) => {
|
|
30
|
+
var n, r;
|
|
31
|
+
const e = o;
|
|
32
|
+
e.lngLat = t.getLngLat(), (r = (n = l.current.props).onDrag) == null || r.call(n, e);
|
|
33
|
+
}), i.on("dragend", (o) => {
|
|
34
|
+
var n, r;
|
|
35
|
+
const e = o;
|
|
36
|
+
e.lngLat = t.getLngLat(), (r = (n = l.current.props).onDragEnd) == null || r.call(n, e);
|
|
37
|
+
}), i;
|
|
38
|
+
}, []);
|
|
39
|
+
R(() => (t.addTo(k.getMap()), () => {
|
|
40
|
+
t.remove();
|
|
41
|
+
}), []);
|
|
42
|
+
const { longitude: c, latitude: m, offset: g, style: f, draggable: u = !1, popup: d = null, rotation: p = 0, rotationAlignment: L = "auto", pitchAlignment: h = "auto" } = a;
|
|
43
|
+
R(() => {
|
|
44
|
+
S(t.getElement(), f);
|
|
45
|
+
}, [f]), w(v, () => t, []);
|
|
46
|
+
const P = l.current.props;
|
|
47
|
+
(t.getLngLat().lng !== c || t.getLngLat().lat !== m) && t.setLngLat([c, m]), g && !H(t.getOffset(), g) && t.setOffset(g), t.isDraggable() !== u && t.setDraggable(u), t.getRotation() !== p && t.setRotation(p), t.getRotationAlignment() !== L && t.setRotationAlignment(L), t.getPitchAlignment() !== h && t.setPitchAlignment(h), t.getPopup() !== d && t.setPopup(d);
|
|
48
|
+
const E = I(P.className, a.className);
|
|
49
|
+
if (E)
|
|
50
|
+
for (const s of E)
|
|
51
|
+
t.toggleClassName(s);
|
|
52
|
+
return l.current.props = a, O(a.children, t.getElement());
|
|
53
|
+
}));
|
|
54
|
+
export {
|
|
55
|
+
J as Marker
|
|
56
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { memo as i, useEffect as e } from "react";
|
|
2
|
+
import { applyReactStyle as l } from "../utils/apply-react-style.js";
|
|
3
|
+
import { useControl as r } from "./use-control.js";
|
|
4
|
+
function m(t) {
|
|
5
|
+
const o = r(({ mapLib: n }) => new n.NavigationControl(t), {
|
|
6
|
+
position: t.position
|
|
7
|
+
});
|
|
8
|
+
return e(() => {
|
|
9
|
+
l(o._container, t.style);
|
|
10
|
+
}, [t.style]), null;
|
|
11
|
+
}
|
|
12
|
+
i(m);
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { createPortal as g } from "react-dom";
|
|
2
|
+
import { memo as h, forwardRef as L, useContext as C, useMemo as m, useRef as x, useEffect as l, useImperativeHandle as M } from "react";
|
|
3
|
+
import { applyReactStyle as N } from "../utils/apply-react-style.js";
|
|
4
|
+
import { MapContext as O } from "./map.js";
|
|
5
|
+
import { deepEqual as y } from "../utils/deep-equal.js";
|
|
6
|
+
import { compareClassNames as E } from "../utils/compare-class-names.js";
|
|
7
|
+
h(L((e, r) => {
|
|
8
|
+
const { map: u, mapLib: d } = C(O), i = m(() => document.createElement("div"), []), c = x({ props: e }), t = m(() => {
|
|
9
|
+
const n = { ...e }, o = new d.Popup(n);
|
|
10
|
+
return o.setLngLat([e.longitude, e.latitude]), o.once("open", (a) => {
|
|
11
|
+
var f, s;
|
|
12
|
+
(s = (f = c.current.props).onOpen) == null || s.call(f, a);
|
|
13
|
+
}), o;
|
|
14
|
+
}, []);
|
|
15
|
+
if (l(() => {
|
|
16
|
+
const n = (o) => {
|
|
17
|
+
var a, f;
|
|
18
|
+
(f = (a = c.current.props).onClose) == null || f.call(a, o);
|
|
19
|
+
};
|
|
20
|
+
return t.on("close", n), t.setDOMContent(i).addTo(u.getMap()), () => {
|
|
21
|
+
t.off("close", n), t.isOpen() && t.remove();
|
|
22
|
+
};
|
|
23
|
+
}, []), l(() => {
|
|
24
|
+
N(t.getElement(), e.style);
|
|
25
|
+
}, [e.style]), M(r, () => t, []), t.isOpen()) {
|
|
26
|
+
const n = c.current.props;
|
|
27
|
+
(t.getLngLat().lng !== e.longitude || t.getLngLat().lat !== e.latitude) && t.setLngLat([e.longitude, e.latitude]), e.offset && !y(n.offset, e.offset) && (t.options.anchor = e.anchor, t.setOffset(e.offset)), (n.anchor !== e.anchor || n.maxWidth !== e.maxWidth) && t.setMaxWidth(e.maxWidth);
|
|
28
|
+
const o = E(n.className, e.className);
|
|
29
|
+
if (o)
|
|
30
|
+
for (const a of o)
|
|
31
|
+
t.toggleClassName(a);
|
|
32
|
+
c.current.props = e;
|
|
33
|
+
}
|
|
34
|
+
return g(e.children, i);
|
|
35
|
+
}));
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { memo as c, useRef as m, useEffect as f } from "react";
|
|
2
|
+
import { applyReactStyle as l } from "../utils/apply-react-style.js";
|
|
3
|
+
import { useControl as a } from "./use-control.js";
|
|
4
|
+
function r(t) {
|
|
5
|
+
const n = a(({ mapLib: u }) => new u.ScaleControl(t), {
|
|
6
|
+
position: t.position
|
|
7
|
+
}), i = m(t), e = i.current;
|
|
8
|
+
i.current = t;
|
|
9
|
+
const { style: o } = t;
|
|
10
|
+
return t.maxWidth !== void 0 && t.maxWidth !== e.maxWidth && (n.options.maxWidth = t.maxWidth), t.unit !== void 0 && t.unit !== e.unit && n.setUnit(t.unit), f(() => {
|
|
11
|
+
l(n._container, o);
|
|
12
|
+
}, [o]), null;
|
|
13
|
+
}
|
|
14
|
+
c(r);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { useContext as u, useMemo as s, useEffect as l } from "react";
|
|
2
|
+
import { MapContext as m } from "./map.js";
|
|
3
|
+
function x(i, n, p, C) {
|
|
4
|
+
const t = u(m), o = s(() => i(t), []);
|
|
5
|
+
return l(() => {
|
|
6
|
+
const r = n, f = null, c = typeof n == "function" ? n : null, { map: e } = t;
|
|
7
|
+
return e.hasControl(o) || (e.addControl(o, r == null ? void 0 : r.position), f && f(t)), () => {
|
|
8
|
+
c && c(t), e.hasControl(o) && e.removeControl(o);
|
|
9
|
+
};
|
|
10
|
+
}, []), o;
|
|
11
|
+
}
|
|
12
|
+
export {
|
|
13
|
+
x as useControl
|
|
14
|
+
};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
const a = [
|
|
2
|
+
"setMaxBounds",
|
|
3
|
+
"setMinZoom",
|
|
4
|
+
"setMaxZoom",
|
|
5
|
+
"setMinPitch",
|
|
6
|
+
"setMaxPitch",
|
|
7
|
+
"setRenderWorldCopies",
|
|
8
|
+
"setProjection",
|
|
9
|
+
"setStyle",
|
|
10
|
+
"addSource",
|
|
11
|
+
"removeSource",
|
|
12
|
+
"addLayer",
|
|
13
|
+
"removeLayer",
|
|
14
|
+
"setLayerZoomRange",
|
|
15
|
+
"setFilter",
|
|
16
|
+
"setPaintProperty",
|
|
17
|
+
"setLayoutProperty",
|
|
18
|
+
"setLight",
|
|
19
|
+
"setTerrain",
|
|
20
|
+
"setFog",
|
|
21
|
+
"remove"
|
|
22
|
+
];
|
|
23
|
+
function u(e) {
|
|
24
|
+
if (!e)
|
|
25
|
+
return null;
|
|
26
|
+
const r = e.map, o = {
|
|
27
|
+
getMap: () => r,
|
|
28
|
+
// Overwrite getters to use our shadow transform
|
|
29
|
+
getCenter: () => e.transform.center,
|
|
30
|
+
getZoom: () => e.transform.zoom,
|
|
31
|
+
getBearing: () => e.transform.bearing,
|
|
32
|
+
getPitch: () => e.transform.pitch,
|
|
33
|
+
getPadding: () => e.transform.padding,
|
|
34
|
+
getBounds: () => e.transform.getBounds(),
|
|
35
|
+
project: (t) => {
|
|
36
|
+
const n = r.transform;
|
|
37
|
+
r.transform = e.transform;
|
|
38
|
+
const s = r.project(t);
|
|
39
|
+
return r.transform = n, s;
|
|
40
|
+
},
|
|
41
|
+
unproject: (t) => {
|
|
42
|
+
const n = r.transform;
|
|
43
|
+
r.transform = e.transform;
|
|
44
|
+
const s = r.unproject(t);
|
|
45
|
+
return r.transform = n, s;
|
|
46
|
+
},
|
|
47
|
+
// options diverge between mapbox and maplibre
|
|
48
|
+
queryTerrainElevation: (t, n) => {
|
|
49
|
+
const s = r.transform;
|
|
50
|
+
r.transform = e.transform;
|
|
51
|
+
const f = r.queryTerrainElevation(t, n);
|
|
52
|
+
return r.transform = s, f;
|
|
53
|
+
},
|
|
54
|
+
queryRenderedFeatures: (t, n) => {
|
|
55
|
+
const s = r.transform;
|
|
56
|
+
r.transform = e.transform;
|
|
57
|
+
const f = r.queryRenderedFeatures(t, n);
|
|
58
|
+
return r.transform = s, f;
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
for (const t of i(r))
|
|
62
|
+
!(t in o) && !a.includes(t) && (o[t] = r[t].bind(r));
|
|
63
|
+
return o;
|
|
64
|
+
}
|
|
65
|
+
function i(e) {
|
|
66
|
+
const r = /* @__PURE__ */ new Set();
|
|
67
|
+
let o = e;
|
|
68
|
+
for (; o; ) {
|
|
69
|
+
for (const t of Object.getOwnPropertyNames(o))
|
|
70
|
+
t[0] !== "_" && typeof e[t] == "function" && t !== "fire" && t !== "setEventedParent" && r.add(t);
|
|
71
|
+
o = Object.getPrototypeOf(o);
|
|
72
|
+
}
|
|
73
|
+
return Array.from(r);
|
|
74
|
+
}
|
|
75
|
+
export {
|
|
76
|
+
u as default
|
|
77
|
+
};
|
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
import { transformToViewState as g, compareViewStateWithTransform as S } from "../utils/transform.js";
|
|
2
|
+
import { createProxyTransform as T } from "./proxy-transform.js";
|
|
3
|
+
import { normalizeStyle as m } from "../utils/style-utils.js";
|
|
4
|
+
import { deepEqual as u } from "../utils/deep-equal.js";
|
|
5
|
+
const p = { version: 8, sources: {}, layers: [] }, f = {
|
|
6
|
+
mousedown: "onMouseDown",
|
|
7
|
+
mouseup: "onMouseUp",
|
|
8
|
+
mouseover: "onMouseOver",
|
|
9
|
+
mousemove: "onMouseMove",
|
|
10
|
+
click: "onClick",
|
|
11
|
+
dblclick: "onDblClick",
|
|
12
|
+
mouseenter: "onMouseEnter",
|
|
13
|
+
mouseleave: "onMouseLeave",
|
|
14
|
+
mouseout: "onMouseOut",
|
|
15
|
+
contextmenu: "onContextMenu",
|
|
16
|
+
touchstart: "onTouchStart",
|
|
17
|
+
touchend: "onTouchEnd",
|
|
18
|
+
touchmove: "onTouchMove",
|
|
19
|
+
touchcancel: "onTouchCancel"
|
|
20
|
+
}, _ = {
|
|
21
|
+
movestart: "onMoveStart",
|
|
22
|
+
move: "onMove",
|
|
23
|
+
moveend: "onMoveEnd",
|
|
24
|
+
dragstart: "onDragStart",
|
|
25
|
+
drag: "onDrag",
|
|
26
|
+
dragend: "onDragEnd",
|
|
27
|
+
zoomstart: "onZoomStart",
|
|
28
|
+
zoom: "onZoom",
|
|
29
|
+
zoomend: "onZoomEnd",
|
|
30
|
+
rotatestart: "onRotateStart",
|
|
31
|
+
rotate: "onRotate",
|
|
32
|
+
rotateend: "onRotateEnd",
|
|
33
|
+
pitchstart: "onPitchStart",
|
|
34
|
+
pitch: "onPitch",
|
|
35
|
+
pitchend: "onPitchEnd"
|
|
36
|
+
}, v = {
|
|
37
|
+
wheel: "onWheel",
|
|
38
|
+
boxzoomstart: "onBoxZoomStart",
|
|
39
|
+
boxzoomend: "onBoxZoomEnd",
|
|
40
|
+
boxzoomcancel: "onBoxZoomCancel",
|
|
41
|
+
resize: "onResize",
|
|
42
|
+
load: "onLoad",
|
|
43
|
+
render: "onRender",
|
|
44
|
+
idle: "onIdle",
|
|
45
|
+
remove: "onRemove",
|
|
46
|
+
data: "onData",
|
|
47
|
+
styledata: "onStyleData",
|
|
48
|
+
sourcedata: "onSourceData",
|
|
49
|
+
error: "onError"
|
|
50
|
+
}, E = [
|
|
51
|
+
"minZoom",
|
|
52
|
+
"maxZoom",
|
|
53
|
+
"minPitch",
|
|
54
|
+
"maxPitch",
|
|
55
|
+
"maxBounds",
|
|
56
|
+
"projection",
|
|
57
|
+
"renderWorldCopies"
|
|
58
|
+
], C = [
|
|
59
|
+
"scrollZoom",
|
|
60
|
+
"boxZoom",
|
|
61
|
+
"dragRotate",
|
|
62
|
+
"dragPan",
|
|
63
|
+
"keyboard",
|
|
64
|
+
"doubleClickZoom",
|
|
65
|
+
"touchZoomRotate",
|
|
66
|
+
"touchPitch"
|
|
67
|
+
];
|
|
68
|
+
class h {
|
|
69
|
+
constructor(e, o, s) {
|
|
70
|
+
this._map = null, this._internalUpdate = !1, this._inRender = !1, this._hoveredFeatures = null, this._deferredEvents = {
|
|
71
|
+
move: !1,
|
|
72
|
+
zoom: !1,
|
|
73
|
+
pitch: !1,
|
|
74
|
+
rotate: !1
|
|
75
|
+
}, this._onEvent = (t) => {
|
|
76
|
+
const r = this.props[v[t.type]];
|
|
77
|
+
r ? r(t) : t.type === "error" && console.error(t.error);
|
|
78
|
+
}, this._onPointerEvent = (t) => {
|
|
79
|
+
(t.type === "mousemove" || t.type === "mouseout") && this._updateHover(t);
|
|
80
|
+
const r = this.props[f[t.type]];
|
|
81
|
+
r && (this.props.interactiveLayerIds && t.type !== "mouseover" && t.type !== "mouseout" && (t.features = this._hoveredFeatures || this._queryRenderedFeatures(t.point)), r(t), delete t.features);
|
|
82
|
+
}, this._onCameraEvent = (t) => {
|
|
83
|
+
if (!this._internalUpdate) {
|
|
84
|
+
const r = this.props[_[t.type]], n = this._proxyTransform;
|
|
85
|
+
r && (t.viewState = g(n.$proposedTransform ?? n), r(t)), t.type === "moveend" && (n.$proposedTransform = null);
|
|
86
|
+
}
|
|
87
|
+
t.type in this._deferredEvents && (this._deferredEvents[t.type] = !1);
|
|
88
|
+
}, this._MapClass = e, this.props = o, this._initialize(s);
|
|
89
|
+
}
|
|
90
|
+
get map() {
|
|
91
|
+
return this._map;
|
|
92
|
+
}
|
|
93
|
+
get transform() {
|
|
94
|
+
return this._map.transform;
|
|
95
|
+
}
|
|
96
|
+
setProps(e) {
|
|
97
|
+
const o = this.props;
|
|
98
|
+
this.props = e;
|
|
99
|
+
const s = this._updateSettings(e, o);
|
|
100
|
+
s && this._createProxyTransform(this._map);
|
|
101
|
+
const t = this._updateSize(e), r = this._updateViewState(e, !0);
|
|
102
|
+
this._updateStyle(e, o), this._updateStyleComponents(e, o), this._updateHandlers(e, o), (s || t || r && !this._map.isMoving()) && this.redraw();
|
|
103
|
+
}
|
|
104
|
+
static reuse(e, o) {
|
|
105
|
+
const s = h.savedMaps.pop();
|
|
106
|
+
if (!s)
|
|
107
|
+
return null;
|
|
108
|
+
const t = s.map, r = t.getContainer();
|
|
109
|
+
for (o.className = r.className; r.childNodes.length > 0; )
|
|
110
|
+
o.appendChild(r.childNodes[0]);
|
|
111
|
+
t._container = o, s.setProps({ ...e, styleDiffing: !1 }), t.resize();
|
|
112
|
+
const { initialViewState: n } = e;
|
|
113
|
+
return n && (n.bounds ? t.fitBounds(n.bounds, { ...n.fitBoundsOptions, duration: 0 }) : s._updateViewState(n, !1)), t.isStyleLoaded() ? t.fire("load") : t.once("styledata", () => t.fire("load")), t._update(), s;
|
|
114
|
+
}
|
|
115
|
+
/* eslint-disable complexity,max-statements */
|
|
116
|
+
_initialize(e) {
|
|
117
|
+
const { props: o } = this, { mapStyle: s = p } = o, t = {
|
|
118
|
+
...o,
|
|
119
|
+
...o.initialViewState,
|
|
120
|
+
accessToken: o.mapboxAccessToken || M() || null,
|
|
121
|
+
container: e,
|
|
122
|
+
style: m(s)
|
|
123
|
+
}, r = t.initialViewState || t.viewState || t;
|
|
124
|
+
if (Object.assign(t, {
|
|
125
|
+
center: [r.longitude || 0, r.latitude || 0],
|
|
126
|
+
zoom: r.zoom || 0,
|
|
127
|
+
pitch: r.pitch || 0,
|
|
128
|
+
bearing: r.bearing || 0
|
|
129
|
+
}), o.gl) {
|
|
130
|
+
const a = HTMLCanvasElement.prototype.getContext;
|
|
131
|
+
HTMLCanvasElement.prototype.getContext = () => (HTMLCanvasElement.prototype.getContext = a, o.gl);
|
|
132
|
+
}
|
|
133
|
+
const n = new this._MapClass(t);
|
|
134
|
+
r.padding && n.setPadding(r.padding), o.cursor && (n.getCanvas().style.cursor = o.cursor), this._createProxyTransform(n);
|
|
135
|
+
const c = n._render;
|
|
136
|
+
n._render = (a) => {
|
|
137
|
+
this._inRender = !0, c.call(n, a), this._inRender = !1;
|
|
138
|
+
};
|
|
139
|
+
const l = n._renderTaskQueue.run;
|
|
140
|
+
n._renderTaskQueue.run = (a) => {
|
|
141
|
+
this._proxyTransform.$internalUpdate = !0, l.call(n._renderTaskQueue, a), this._proxyTransform.$internalUpdate = !1, this._fireDefferedEvents();
|
|
142
|
+
};
|
|
143
|
+
const i = n.jumpTo;
|
|
144
|
+
n.jumpTo = (...a) => (this._proxyTransform.$internalUpdate = !0, i.apply(n, a), this._proxyTransform.$internalUpdate = !1, n);
|
|
145
|
+
const y = n.fire;
|
|
146
|
+
n.fire = this._fireEvent.bind(this, y), n.on("styledata", () => {
|
|
147
|
+
this._updateStyleComponents(this.props, {});
|
|
148
|
+
}), n.on("sourcedata", () => {
|
|
149
|
+
this._updateStyleComponents(this.props, {});
|
|
150
|
+
});
|
|
151
|
+
for (const a in f)
|
|
152
|
+
n.on(a, this._onPointerEvent);
|
|
153
|
+
for (const a in _)
|
|
154
|
+
n.on(a, this._onCameraEvent);
|
|
155
|
+
for (const a in v)
|
|
156
|
+
n.on(a, this._onEvent);
|
|
157
|
+
this._map = n;
|
|
158
|
+
}
|
|
159
|
+
/* eslint-enable complexity,max-statements */
|
|
160
|
+
recycle() {
|
|
161
|
+
const o = this.map.getContainer().querySelector("[mapboxgl-children]");
|
|
162
|
+
o == null || o.remove(), h.savedMaps.push(this);
|
|
163
|
+
}
|
|
164
|
+
destroy() {
|
|
165
|
+
this._map.remove();
|
|
166
|
+
}
|
|
167
|
+
// Force redraw the map now. Typically resize() and jumpTo() is reflected in the next
|
|
168
|
+
// render cycle, which is managed by Mapbox's animation loop.
|
|
169
|
+
// This removes the synchronization issue caused by requestAnimationFrame.
|
|
170
|
+
redraw() {
|
|
171
|
+
const e = this._map;
|
|
172
|
+
!this._inRender && e.style && (e._frame && (e._frame.cancel(), e._frame = null), e._render());
|
|
173
|
+
}
|
|
174
|
+
_createProxyTransform(e) {
|
|
175
|
+
const o = T(e.transform);
|
|
176
|
+
e.transform = o, e.painter.transform = o, this._proxyTransform = o;
|
|
177
|
+
}
|
|
178
|
+
/* Trigger map resize if size is controlled
|
|
179
|
+
@param {object} nextProps
|
|
180
|
+
@returns {bool} true if size has changed
|
|
181
|
+
*/
|
|
182
|
+
_updateSize(e) {
|
|
183
|
+
const { viewState: o } = e;
|
|
184
|
+
if (o) {
|
|
185
|
+
const s = this._map;
|
|
186
|
+
if (o.width !== s.transform.width || o.height !== s.transform.height)
|
|
187
|
+
return s.resize(), !0;
|
|
188
|
+
}
|
|
189
|
+
return !1;
|
|
190
|
+
}
|
|
191
|
+
// Adapted from map.jumpTo
|
|
192
|
+
/* Update camera to match props
|
|
193
|
+
@param {object} nextProps
|
|
194
|
+
@param {bool} triggerEvents - should fire camera events
|
|
195
|
+
@returns {bool} true if anything is changed
|
|
196
|
+
*/
|
|
197
|
+
_updateViewState(e, o) {
|
|
198
|
+
const s = e.viewState || e, t = this._proxyTransform, { zoom: r, pitch: n, bearing: c } = t, l = S(this._proxyTransform, s);
|
|
199
|
+
if (t.$reactViewState = s, l && o) {
|
|
200
|
+
const i = this._deferredEvents;
|
|
201
|
+
i.move = !0, i.zoom || (i.zoom = r !== t.zoom), i.rotate || (i.rotate = c !== t.bearing), i.pitch || (i.pitch = n !== t.pitch);
|
|
202
|
+
}
|
|
203
|
+
return l;
|
|
204
|
+
}
|
|
205
|
+
/* Update camera constraints and projection settings to match props
|
|
206
|
+
@param {object} nextProps
|
|
207
|
+
@param {object} currProps
|
|
208
|
+
@returns {bool} true if anything is changed
|
|
209
|
+
*/
|
|
210
|
+
_updateSettings(e, o) {
|
|
211
|
+
const s = this._map;
|
|
212
|
+
let t = !1;
|
|
213
|
+
for (const r of E)
|
|
214
|
+
if (r in e && !u(e[r], o[r])) {
|
|
215
|
+
t = !0;
|
|
216
|
+
const n = s[`set${r[0].toUpperCase()}${r.slice(1)}`];
|
|
217
|
+
n == null || n.call(s, e[r]);
|
|
218
|
+
}
|
|
219
|
+
return t;
|
|
220
|
+
}
|
|
221
|
+
/* Update map style to match props
|
|
222
|
+
@param {object} nextProps
|
|
223
|
+
@param {object} currProps
|
|
224
|
+
@returns {bool} true if style is changed
|
|
225
|
+
*/
|
|
226
|
+
_updateStyle(e, o) {
|
|
227
|
+
if (e.cursor !== o.cursor && (this._map.getCanvas().style.cursor = e.cursor || ""), e.mapStyle !== o.mapStyle) {
|
|
228
|
+
const { mapStyle: s = p, styleDiffing: t = !0 } = e, r = {
|
|
229
|
+
diff: t
|
|
230
|
+
};
|
|
231
|
+
return "localIdeographFontFamily" in e && (r.localIdeographFontFamily = e.localIdeographFontFamily), this._map.setStyle(m(s), r), !0;
|
|
232
|
+
}
|
|
233
|
+
return !1;
|
|
234
|
+
}
|
|
235
|
+
/* Update fog, light and terrain to match props
|
|
236
|
+
@param {object} nextProps
|
|
237
|
+
@param {object} currProps
|
|
238
|
+
@returns {bool} true if anything is changed
|
|
239
|
+
*/
|
|
240
|
+
_updateStyleComponents(e, o) {
|
|
241
|
+
const s = this._map;
|
|
242
|
+
let t = !1;
|
|
243
|
+
return s.isStyleLoaded() && ("light" in e && s.setLight && !u(e.light, o.light) && (t = !0, s.setLight(e.light)), "fog" in e && s.setFog && !u(e.fog, o.fog) && (t = !0, s.setFog(e.fog)), "terrain" in e && s.setTerrain && !u(e.terrain, o.terrain) && (!e.terrain || s.getSource(e.terrain.source)) && (t = !0, s.setTerrain(e.terrain))), t;
|
|
244
|
+
}
|
|
245
|
+
/* Update interaction handlers to match props
|
|
246
|
+
@param {object} nextProps
|
|
247
|
+
@param {object} currProps
|
|
248
|
+
@returns {bool} true if anything is changed
|
|
249
|
+
*/
|
|
250
|
+
_updateHandlers(e, o) {
|
|
251
|
+
const s = this._map;
|
|
252
|
+
let t = !1;
|
|
253
|
+
for (const r of C) {
|
|
254
|
+
const n = e[r] ?? !0, c = o[r] ?? !0;
|
|
255
|
+
u(n, c) || (t = !0, n ? s[r].enable(n) : s[r].disable());
|
|
256
|
+
}
|
|
257
|
+
return t;
|
|
258
|
+
}
|
|
259
|
+
_queryRenderedFeatures(e) {
|
|
260
|
+
const o = this._map, { interactiveLayerIds: s = [] } = this.props;
|
|
261
|
+
try {
|
|
262
|
+
return o.queryRenderedFeatures(e, {
|
|
263
|
+
layers: s.filter(o.getLayer.bind(o))
|
|
264
|
+
});
|
|
265
|
+
} catch {
|
|
266
|
+
return [];
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
_updateHover(e) {
|
|
270
|
+
var t;
|
|
271
|
+
const { props: o } = this;
|
|
272
|
+
if (o.interactiveLayerIds && (o.onMouseMove || o.onMouseEnter || o.onMouseLeave)) {
|
|
273
|
+
const r = e.type, n = ((t = this._hoveredFeatures) == null ? void 0 : t.length) > 0, c = this._queryRenderedFeatures(e.point), l = c.length > 0;
|
|
274
|
+
!l && n && (e.type = "mouseleave", this._onPointerEvent(e)), this._hoveredFeatures = c, l && !n && (e.type = "mouseenter", this._onPointerEvent(e)), e.type = r;
|
|
275
|
+
} else
|
|
276
|
+
this._hoveredFeatures = null;
|
|
277
|
+
}
|
|
278
|
+
_fireEvent(e, o, s) {
|
|
279
|
+
const t = this._map, r = this._proxyTransform, n = r.$internalUpdate;
|
|
280
|
+
try {
|
|
281
|
+
r.$internalUpdate = !1, e.call(t, o, s);
|
|
282
|
+
} finally {
|
|
283
|
+
r.$internalUpdate = n;
|
|
284
|
+
}
|
|
285
|
+
return t;
|
|
286
|
+
}
|
|
287
|
+
// If there are camera changes driven by props, invoke camera events so that DOM controls are synced
|
|
288
|
+
_fireDefferedEvents() {
|
|
289
|
+
const e = this._map;
|
|
290
|
+
this._internalUpdate = !0;
|
|
291
|
+
for (const o in this._deferredEvents)
|
|
292
|
+
this._deferredEvents[o] && e.fire(o);
|
|
293
|
+
this._internalUpdate = !1;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
h.savedMaps = [];
|
|
297
|
+
function M() {
|
|
298
|
+
let d = null;
|
|
299
|
+
if (typeof location < "u") {
|
|
300
|
+
const e = /access_token=([^&\/]*)/.exec(location.search);
|
|
301
|
+
d = e && e[1];
|
|
302
|
+
}
|
|
303
|
+
try {
|
|
304
|
+
d = d || process.env.MapboxAccessToken;
|
|
305
|
+
} catch {
|
|
306
|
+
}
|
|
307
|
+
try {
|
|
308
|
+
d = d || process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;
|
|
309
|
+
} catch {
|
|
310
|
+
}
|
|
311
|
+
return d;
|
|
312
|
+
}
|
|
313
|
+
export {
|
|
314
|
+
h as default
|
|
315
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { applyViewStateToTransform as s, isViewStateControlled as m } from "../utils/transform.js";
|
|
2
|
+
const d = /* @__PURE__ */ new Set([
|
|
3
|
+
"_calcMatrices",
|
|
4
|
+
"_calcFogMatrices",
|
|
5
|
+
"_updateCameraState",
|
|
6
|
+
"_updateSeaLevelZoom"
|
|
7
|
+
]);
|
|
8
|
+
function _(f) {
|
|
9
|
+
let r = !1, n = {};
|
|
10
|
+
const a = f;
|
|
11
|
+
let t = null;
|
|
12
|
+
const u = {
|
|
13
|
+
get(c, e) {
|
|
14
|
+
return e === "$reactViewState" ? n : e === "$proposedTransform" ? t : e === "$internalUpdate" ? r : e === "_setZoom" ? (i) => {
|
|
15
|
+
r && (t == null || t[e](i)), Number.isFinite(n.zoom) || a[e](i);
|
|
16
|
+
} : (r && e === "_translateCameraConstrained" && m(n) && (t = t || a.clone()), d.has(e) ? function(...i) {
|
|
17
|
+
t == null || t[e](...i), a[e](...i);
|
|
18
|
+
} : r && t ? t[e] : a[e]);
|
|
19
|
+
},
|
|
20
|
+
set(c, e, i) {
|
|
21
|
+
if (e === "$reactViewState")
|
|
22
|
+
return n = i, s(a, n), !0;
|
|
23
|
+
if (e === "$proposedTransform")
|
|
24
|
+
return t = i, !0;
|
|
25
|
+
if (e === "$internalUpdate")
|
|
26
|
+
return r = i, !0;
|
|
27
|
+
let l = i;
|
|
28
|
+
return e === "center" || e === "_center" ? (Number.isFinite(n.longitude) || Number.isFinite(n.latitude)) && (l = new i.constructor(n.longitude ?? i.lng, n.latitude ?? i.lat)) : e === "zoom" || e === "_zoom" || e === "_seaLevelZoom" ? Number.isFinite(n.zoom) && (l = a[e]) : e === "_centerAltitude" ? Number.isFinite(n.elevation) && (l = a[e]) : e === "pitch" || e === "_pitch" ? Number.isFinite(n.pitch) && (l = a[e]) : (e === "bearing" || e === "rotation" || e === "angle") && Number.isFinite(n.bearing) && (l = a[e]), r && l !== i && (t = t || a.clone()), r && t && (t[e] = i), a[e] = l, !0;
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
return new Proxy(f, u);
|
|
32
|
+
}
|
|
33
|
+
export {
|
|
34
|
+
_ as createProxyTransform
|
|
35
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const r = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;
|
|
2
|
+
function c(n, t) {
|
|
3
|
+
if (!n || !t)
|
|
4
|
+
return;
|
|
5
|
+
const o = n.style;
|
|
6
|
+
for (const e in t) {
|
|
7
|
+
const i = t[e];
|
|
8
|
+
Number.isFinite(i) && !r.test(e) ? o[e] = `${i}px` : o[e] = i;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
export {
|
|
12
|
+
c as applyReactStyle
|
|
13
|
+
};
|