react-three-map 1.0.0-next.0 → 1.0.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/main.js +41 -1259
- package/dist/es/main10.mjs +10 -71
- package/dist/es/main10.mjs.map +1 -1
- package/dist/es/main11.mjs +35 -12
- package/dist/es/main11.mjs.map +1 -1
- package/dist/es/main12.mjs +13 -12
- package/dist/es/main12.mjs.map +1 -1
- package/dist/es/main13.mjs +24 -42
- package/dist/es/main13.mjs.map +1 -1
- package/dist/es/main14.mjs +4 -13
- package/dist/es/main14.mjs.map +1 -1
- package/dist/es/main15.mjs +31 -22
- package/dist/es/main15.mjs.map +1 -1
- package/dist/es/main16.mjs +23 -87
- package/dist/es/main16.mjs.map +1 -1
- package/dist/es/main17.mjs +94 -14
- package/dist/es/main17.mjs.map +1 -1
- package/dist/es/main18.mjs +62 -22
- package/dist/es/main18.mjs.map +1 -1
- package/dist/es/main19.mjs +20 -27
- package/dist/es/main19.mjs.map +1 -1
- package/dist/es/main20.mjs +23 -8
- package/dist/es/main20.mjs.map +1 -1
- package/dist/es/main21.mjs +16 -34
- package/dist/es/main21.mjs.map +1 -1
- package/dist/es/main22.mjs +80 -12
- package/dist/es/main22.mjs.map +1 -1
- package/dist/es/main3.mjs +4 -13
- package/dist/es/main3.mjs.map +1 -1
- package/dist/es/main4.mjs +3 -3
- package/dist/es/main5.mjs +1 -1
- package/dist/es/main6.mjs +1 -1
- package/dist/es/main7.mjs +1 -1
- package/dist/es/main8.mjs +20 -87
- package/dist/es/main8.mjs.map +1 -1
- package/dist/es/main9.mjs +24 -80
- package/dist/es/main9.mjs.map +1 -1
- package/package.json +1 -1
- package/stories/package.json +1 -1
- package/stories/yarn.lock +19 -14
- package/dist/es/main23.mjs +0 -26
- package/dist/es/main23.mjs.map +0 -1
- package/dist/es/main24.mjs +0 -5
- package/dist/es/main24.mjs.map +0 -1
- package/dist/es/main25.mjs +0 -33
- package/dist/es/main25.mjs.map +0 -1
- package/dist/es/main26.mjs +0 -27
- package/dist/es/main26.mjs.map +0 -1
- package/dist/es/main27.mjs +0 -98
- package/dist/es/main27.mjs.map +0 -1
- package/dist/es/main28.mjs +0 -66
- package/dist/es/main28.mjs.map +0 -1
- package/dist/es/main29.mjs +0 -23
- package/dist/es/main29.mjs.map +0 -1
- package/dist/es/main30.mjs +0 -27
- package/dist/es/main30.mjs.map +0 -1
- package/dist/es/main31.mjs +0 -19
- package/dist/es/main31.mjs.map +0 -1
- package/dist/es/main32.mjs +0 -83
- package/dist/es/main32.mjs.map +0 -1
- package/dist/es/main33.mjs +0 -501
- package/dist/es/main33.mjs.map +0 -1
- package/dist/es/main34.mjs +0 -90
- package/dist/es/main34.mjs.map +0 -1
- package/dist/es/main35.mjs +0 -6
- package/dist/es/main35.mjs.map +0 -1
- package/dist/es/main36.mjs +0 -26
- package/dist/es/main36.mjs.map +0 -1
- package/dist/es/main37.mjs +0 -19
- package/dist/es/main37.mjs.map +0 -1
- package/dist/es/main38.mjs +0 -50
- package/dist/es/main38.mjs.map +0 -1
- package/dist/es/main39.mjs +0 -31
- package/dist/es/main39.mjs.map +0 -1
- package/dist/es/main40.mjs +0 -9
- package/dist/es/main40.mjs.map +0 -1
- package/dist/es/main41.mjs +0 -62
- package/dist/es/main41.mjs.map +0 -1
- package/dist/es/main42.mjs +0 -42
- package/dist/es/main42.mjs.map +0 -1
package/dist/es/main10.mjs
CHANGED
|
@@ -1,73 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
return new Set(className ? className.trim().split(/\s+/) : []);
|
|
8
|
-
}
|
|
9
|
-
memo(forwardRef((props, ref) => {
|
|
10
|
-
const { map, mapLib } = useContext(MapContext);
|
|
11
|
-
const container = useMemo(() => {
|
|
12
|
-
return document.createElement("div");
|
|
1
|
+
import { useRef, useCallback } from "react";
|
|
2
|
+
const useFunction = (callback) => {
|
|
3
|
+
const callbackRef = useRef(callback);
|
|
4
|
+
callbackRef.current = callback;
|
|
5
|
+
return useCallback((...args) => {
|
|
6
|
+
return callbackRef.current(...args);
|
|
13
7
|
}, []);
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const pp = new mapLib.Popup(options);
|
|
19
|
-
pp.setLngLat([props.longitude, props.latitude]);
|
|
20
|
-
pp.once("open", (e) => {
|
|
21
|
-
var _a, _b;
|
|
22
|
-
(_b = (_a = thisRef.current.props).onOpen) == null ? void 0 : _b.call(_a, e);
|
|
23
|
-
});
|
|
24
|
-
return pp;
|
|
25
|
-
}, []);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
const onClose = (e) => {
|
|
28
|
-
var _a, _b;
|
|
29
|
-
(_b = (_a = thisRef.current.props).onClose) == null ? void 0 : _b.call(_a, e);
|
|
30
|
-
};
|
|
31
|
-
popup.on("close", onClose);
|
|
32
|
-
popup.setDOMContent(container).addTo(map.getMap());
|
|
33
|
-
return () => {
|
|
34
|
-
popup.off("close", onClose);
|
|
35
|
-
if (popup.isOpen()) {
|
|
36
|
-
popup.remove();
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
}, []);
|
|
40
|
-
useEffect(() => {
|
|
41
|
-
applyReactStyle(popup.getElement(), props.style);
|
|
42
|
-
}, [props.style]);
|
|
43
|
-
useImperativeHandle(ref, () => popup, []);
|
|
44
|
-
if (popup.isOpen()) {
|
|
45
|
-
if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
|
|
46
|
-
popup.setLngLat([props.longitude, props.latitude]);
|
|
47
|
-
}
|
|
48
|
-
if (props.offset && !deepEqual(popup.options.offset, props.offset)) {
|
|
49
|
-
popup.setOffset(props.offset);
|
|
50
|
-
}
|
|
51
|
-
if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {
|
|
52
|
-
popup.options.anchor = props.anchor;
|
|
53
|
-
popup.setMaxWidth(props.maxWidth);
|
|
54
|
-
}
|
|
55
|
-
if (popup.options.className !== props.className) {
|
|
56
|
-
const prevClassList = getClassList(popup.options.className);
|
|
57
|
-
const nextClassList = getClassList(props.className);
|
|
58
|
-
for (const c of prevClassList) {
|
|
59
|
-
if (!nextClassList.has(c)) {
|
|
60
|
-
popup.removeClassName(c);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
for (const c of nextClassList) {
|
|
64
|
-
if (!prevClassList.has(c)) {
|
|
65
|
-
popup.addClassName(c);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
popup.options.className = props.className;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
return createPortal(props.children, container);
|
|
72
|
-
}));
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
useFunction
|
|
11
|
+
};
|
|
73
12
|
//# sourceMappingURL=main10.mjs.map
|
package/dist/es/main10.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main10.mjs","sources":["../../
|
|
1
|
+
{"version":3,"file":"main10.mjs","sources":["../../src/core/use-function.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {\n const callbackRef = useRef(callback);\n callbackRef.current = callback;\n return useCallback((...args: any[]) => {\n return callbackRef.current(...args);\n }, []) as T;\n};\n"],"names":[],"mappings":";AAGa,MAAA,cAAc,CAAoC,aAAmB;AAC1E,QAAA,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACf,SAAA,YAAY,IAAI,SAAgB;AAC9B,WAAA,YAAY,QAAQ,GAAG,IAAI;AAAA,EACpC,GAAG,CAAE,CAAA;AACP;"}
|
package/dist/es/main11.mjs
CHANGED
|
@@ -1,14 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import { Matrix4, Vector3 } from "three";
|
|
2
|
+
const originMx = new Matrix4();
|
|
3
|
+
const projByView = new Matrix4();
|
|
4
|
+
const projByViewInv = new Matrix4();
|
|
5
|
+
const fwd = new Vector3();
|
|
6
|
+
function syncCamera(camera, origin, mapCamMx) {
|
|
7
|
+
projByView.fromArray(mapCamMx).multiply(originMx.fromArray(origin));
|
|
8
|
+
projByViewInv.copy(projByView).invert();
|
|
9
|
+
updateCamera(camera, projByViewInv);
|
|
10
|
+
camera.updateMatrix();
|
|
11
|
+
camera.updateMatrixWorld(true);
|
|
12
|
+
camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);
|
|
13
|
+
camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
|
|
14
|
+
camera.far = calculateFar(
|
|
15
|
+
camera.matrix.elements[10],
|
|
16
|
+
camera.matrix.elements[14],
|
|
17
|
+
camera.near
|
|
18
|
+
);
|
|
19
|
+
camera.userData.projByView = projByView.toArray();
|
|
20
|
+
camera.userData.projByViewInv = projByViewInv.toArray();
|
|
12
21
|
}
|
|
13
|
-
|
|
22
|
+
const updateCamera = (target, projByViewInv2) => {
|
|
23
|
+
target.position.setScalar(0).applyMatrix4(projByViewInv2);
|
|
24
|
+
target.up.set(0, -1, 0).applyMatrix4(projByViewInv2).negate().add(target.position).normalize();
|
|
25
|
+
fwd.set(0, 0, 1).applyMatrix4(projByViewInv2);
|
|
26
|
+
target.lookAt(fwd);
|
|
27
|
+
};
|
|
28
|
+
function calculateFar(c, d, near) {
|
|
29
|
+
const numerator = d * (c - 1);
|
|
30
|
+
const denominator = c * near + near;
|
|
31
|
+
const far = numerator / denominator;
|
|
32
|
+
return far;
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
syncCamera
|
|
36
|
+
};
|
|
14
37
|
//# sourceMappingURL=main11.mjs.map
|
package/dist/es/main11.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main11.mjs","sources":["../../
|
|
1
|
+
{"version":3,"file":"main11.mjs","sources":["../../src/core/sync-camera.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple, Object3D, PerspectiveCamera, Vector3 } from \"three\";\n\nconst originMx = new Matrix4();\n\n/** projection * view matrix */\nconst projByView = new Matrix4();\n/** projection * view matrix inverted */\nconst projByViewInv = new Matrix4();\n\n/** forward */\nconst fwd = new Vector3();\n\n\nexport function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple) {\n\n projByView\n .fromArray(mapCamMx)\n .multiply(originMx.fromArray(origin));\n projByViewInv\n .copy(projByView)\n .invert();\n\n updateCamera(camera, projByViewInv);\n camera.updateMatrix();\n camera.updateMatrixWorld(true); \n\n camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);\n camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n\n camera.far = calculateFar(\n camera.matrix.elements[10], camera.matrix.elements[14], camera.near\n )\n\n camera.userData.projByView = projByView.toArray();\n camera.userData.projByViewInv = projByViewInv.toArray();\n\n}\n\nconst updateCamera = (target: Object3D, projByViewInv: Matrix4) => {\n\n target.position\n .setScalar(0)\n .applyMatrix4(projByViewInv)\n\n target.up\n .set(0, -1, 0)\n .applyMatrix4(projByViewInv)\n .negate()\n .add(target.position)\n .normalize()\n\n fwd\n .set(0, 0, 1)\n .applyMatrix4(projByViewInv)\n\n target.lookAt(fwd);\n\n}\n\nfunction calculateFar(c: number, d: number, near: number): number {\n const numerator = d * (c - 1);\n const denominator = c * near + near;\n const far = numerator / denominator;\n return far;\n}"],"names":["projByViewInv"],"mappings":";AAEA,MAAM,WAAW,IAAI;AAGrB,MAAM,aAAa,IAAI;AAEvB,MAAM,gBAAgB,IAAI;AAG1B,MAAM,MAAM,IAAI;AAGA,SAAA,WAAW,QAA2B,QAAsB,UAAwB;AAElG,aACG,UAAU,QAAQ,EAClB,SAAS,SAAS,UAAU,MAAM,CAAC;AAEnC,gBAAA,KAAK,UAAU,EACf,OAAO;AAEV,eAAa,QAAQ,aAAa;AAClC,SAAO,aAAa;AACpB,SAAO,kBAAkB,IAAI;AAE7B,SAAO,iBAAiB,KAAK,OAAO,MAAM,EAAE,YAAY,UAAU;AAClE,SAAO,wBAAwB,KAAK,OAAO,gBAAgB,EAAE;AAE7D,SAAO,MAAM;AAAA,IACX,OAAO,OAAO,SAAS,EAAE;AAAA,IAAG,OAAO,OAAO,SAAS,EAAE;AAAA,IAAG,OAAO;AAAA,EAAA;AAG1D,SAAA,SAAS,aAAa,WAAW,QAAQ;AACzC,SAAA,SAAS,gBAAgB,cAAc,QAAQ;AAExD;AAEA,MAAM,eAAe,CAAC,QAAkBA,mBAA2B;AAEjE,SAAO,SACJ,UAAU,CAAC,EACX,aAAaA,cAAa;AAE7B,SAAO,GACJ,IAAI,GAAG,IAAI,CAAC,EACZ,aAAaA,cAAa,EAC1B,SACA,IAAI,OAAO,QAAQ,EACnB;AAEH,MACG,IAAI,GAAG,GAAG,CAAC,EACX,aAAaA,cAAa;AAE7B,SAAO,OAAO,GAAG;AAEnB;AAEA,SAAS,aAAa,GAAW,GAAW,MAAsB;AAC1D,QAAA,YAAY,KAAK,IAAI;AACrB,QAAA,cAAc,IAAI,OAAO;AAC/B,QAAM,MAAM,YAAY;AACjB,SAAA;AACT;"}
|
package/dist/es/main12.mjs
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
return null;
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { coordsToMatrix } from "./main19.mjs";
|
|
3
|
+
function useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat }) {
|
|
4
|
+
const m4 = useMemo(() => coordsToMatrix({
|
|
5
|
+
latitude,
|
|
6
|
+
longitude,
|
|
7
|
+
altitude,
|
|
8
|
+
fromLngLat
|
|
9
|
+
}), [latitude, longitude, altitude, fromLngLat]);
|
|
10
|
+
return m4;
|
|
12
11
|
}
|
|
13
|
-
|
|
12
|
+
export {
|
|
13
|
+
useCoordsToMatrix
|
|
14
|
+
};
|
|
14
15
|
//# sourceMappingURL=main12.mjs.map
|
package/dist/es/main12.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main12.mjs","sources":["../../
|
|
1
|
+
{"version":3,"file":"main12.mjs","sources":["../../src/core/use-coords-to-matrix.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\n\ntype Props = Parameters<typeof coordsToMatrix>[0];\n\n/** calculate matrix from coordinates */\nexport function useCoordsToMatrix({latitude, longitude, altitude, fromLngLat}: Props) {\n const m4 = useMemo(() => coordsToMatrix({\n latitude, longitude, altitude, fromLngLat,\n }), [latitude, longitude, altitude, fromLngLat]);\n\n return m4;\n}"],"names":[],"mappings":";;AAMO,SAAS,kBAAkB,EAAC,UAAU,WAAW,UAAU,cAAoB;AAC9E,QAAA,KAAK,QAAQ,MAAM,eAAe;AAAA,IACtC;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC,GAAG,CAAC,UAAU,WAAW,UAAU,UAAU,CAAC;AAExC,SAAA;AACT;"}
|
package/dist/es/main13.mjs
CHANGED
|
@@ -1,44 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
function
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
const gc = new mapLib.GeolocateControl(props);
|
|
8
|
-
const setupUI = gc._setupUI.bind(gc);
|
|
9
|
-
gc._setupUI = (args) => {
|
|
10
|
-
if (!gc._container.hasChildNodes()) {
|
|
11
|
-
setupUI(args);
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
gc.on("geolocate", (e) => {
|
|
15
|
-
var _a, _b;
|
|
16
|
-
(_b = (_a = thisRef.current.props).onGeolocate) == null ? void 0 : _b.call(_a, e);
|
|
17
|
-
});
|
|
18
|
-
gc.on("error", (e) => {
|
|
19
|
-
var _a, _b;
|
|
20
|
-
(_b = (_a = thisRef.current.props).onError) == null ? void 0 : _b.call(_a, e);
|
|
21
|
-
});
|
|
22
|
-
gc.on("outofmaxbounds", (e) => {
|
|
23
|
-
var _a, _b;
|
|
24
|
-
(_b = (_a = thisRef.current.props).onOutOfMaxBounds) == null ? void 0 : _b.call(_a, e);
|
|
25
|
-
});
|
|
26
|
-
gc.on("trackuserlocationstart", (e) => {
|
|
27
|
-
var _a, _b;
|
|
28
|
-
(_b = (_a = thisRef.current.props).onTrackUserLocationStart) == null ? void 0 : _b.call(_a, e);
|
|
29
|
-
});
|
|
30
|
-
gc.on("trackuserlocationend", (e) => {
|
|
31
|
-
var _a, _b;
|
|
32
|
-
(_b = (_a = thisRef.current.props).onTrackUserLocationEnd) == null ? void 0 : _b.call(_a, e);
|
|
33
|
-
});
|
|
34
|
-
return gc;
|
|
35
|
-
}, { position: props.position });
|
|
36
|
-
thisRef.current.props = props;
|
|
37
|
-
useImperativeHandle(ref, () => ctrl, []);
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
applyReactStyle(ctrl._container, props.style);
|
|
40
|
-
}, [props.style]);
|
|
41
|
-
return null;
|
|
1
|
+
import { useThree, _roots } from "@react-three/fiber";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { Matrix4 } from "three";
|
|
4
|
+
function useR3M() {
|
|
5
|
+
const r3m = useThree((s) => s.r3m);
|
|
6
|
+
return r3m;
|
|
42
7
|
}
|
|
43
|
-
|
|
8
|
+
function useInitR3M(props) {
|
|
9
|
+
const canvas = useThree((s) => s.gl.domElement);
|
|
10
|
+
useState(() => {
|
|
11
|
+
const store = _roots.get(canvas).store;
|
|
12
|
+
initR3M({ ...props, store });
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function initR3M({ store, ...props }) {
|
|
16
|
+
const viewProjMx = new Matrix4().identity().toArray();
|
|
17
|
+
const r3m = { ...props, viewProjMx };
|
|
18
|
+
store.setState({ r3m });
|
|
19
|
+
return r3m;
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
initR3M,
|
|
23
|
+
useInitR3M,
|
|
24
|
+
useR3M
|
|
25
|
+
};
|
|
44
26
|
//# sourceMappingURL=main13.mjs.map
|
package/dist/es/main13.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main13.mjs","sources":["../../
|
|
1
|
+
{"version":3,"file":"main13.mjs","sources":["../../src/core/use-r3m.ts"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { Matrix4, Matrix4Tuple } from \"three\";\nimport { UseBoundStore } from 'zustand';\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\nexport interface R3M<T extends MapInstance = MapInstance> {\n /** Map provider */\n map: T,\n /** view projection matrix coming from the map provider */\n viewProjMx: Matrix4Tuple,\n fromLngLat: FromLngLat,\n}\n\nexport function useR3M<T extends MapInstance> () {\n const r3m = useThree(s=>(s as any).r3m) as R3M<T>; // eslint-disable-line @typescript-eslint/no-explicit-any\n return r3m;\n}\n\n/** init `useR3M` hook */\nexport function useInitR3M<T extends MapInstance>(props: {\n map: T; fromLngLat: FromLngLat;\n}) {\n const canvas = useThree(s => s.gl.domElement);\n // to run only once\n useState(()=>{\n const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n initR3M({...props, store})\n })\n}\n\nexport function initR3M<T extends MapInstance>({store, ...props}: {\n map: T;\n fromLngLat: FromLngLat;\n store: UseBoundStore<RootState>;\n}) {\n const viewProjMx = new Matrix4().identity().toArray();\n const r3m : R3M<T> = { ...props, viewProjMx };\n store.setState({r3m} as any); // eslint-disable-line @typescript-eslint/no-explicit-any\n return r3m;\n}"],"names":[],"mappings":";;;AAcO,SAAS,SAAiC;AAC/C,QAAM,MAAM,SAAS,CAAI,MAAA,EAAU,GAAG;AAC/B,SAAA;AACT;AAGO,SAAS,WAAkC,OAE/C;AACD,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAE5C,WAAS,MAAI;AACX,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,YAAQ,EAAC,GAAG,OAAO,MAAM,CAAA;AAAA,EAAA,CAC1B;AACH;AAEO,SAAS,QAA+B,EAAC,OAAO,GAAG,SAIvD;AACD,QAAM,aAAa,IAAI,QAAA,EAAU,WAAW,QAAQ;AACpD,QAAM,MAAe,EAAE,GAAG,OAAO,WAAW;AACtC,QAAA,SAAS,EAAC,IAAA,CAAW;AACpB,SAAA;AACT;"}
|
package/dist/es/main14.mjs
CHANGED
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {
|
|
6
|
-
position: props.position
|
|
7
|
-
});
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
applyReactStyle(ctrl._container, props.style);
|
|
10
|
-
}, [props.style]);
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
13
|
-
memo(_NavigationControl);
|
|
1
|
+
const earthRadius = 63710088e-1;
|
|
2
|
+
export {
|
|
3
|
+
earthRadius
|
|
4
|
+
};
|
|
14
5
|
//# sourceMappingURL=main14.mjs.map
|
package/dist/es/main14.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main14.mjs","sources":["../../
|
|
1
|
+
{"version":3,"file":"main14.mjs","sources":["../../src/core/earth-radius.ts"],"sourcesContent":["export const earthRadius = 6371008.8;\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;"}
|
package/dist/es/main15.mjs
CHANGED
|
@@ -1,24 +1,33 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
position: props.position
|
|
7
|
-
});
|
|
8
|
-
const propsRef = useRef(props);
|
|
9
|
-
const prevProps = propsRef.current;
|
|
10
|
-
propsRef.current = props;
|
|
11
|
-
const { style } = props;
|
|
12
|
-
if (props.maxWidth !== void 0 && props.maxWidth !== prevProps.maxWidth) {
|
|
13
|
-
ctrl.options.maxWidth = props.maxWidth;
|
|
14
|
-
}
|
|
15
|
-
if (props.unit !== void 0 && props.unit !== prevProps.unit) {
|
|
16
|
-
ctrl.setUnit(props.unit);
|
|
17
|
-
}
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
applyReactStyle(ctrl._container, style);
|
|
20
|
-
}, [style]);
|
|
21
|
-
return null;
|
|
1
|
+
import { useThree, _roots } from "@react-three/fiber";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
function useCoords() {
|
|
4
|
+
const coords = useThree((s) => s.coords);
|
|
5
|
+
return coords;
|
|
22
6
|
}
|
|
23
|
-
|
|
7
|
+
function useSetCoords({ longitude, latitude, altitude }) {
|
|
8
|
+
const canvas = useThree((s) => s.gl.domElement);
|
|
9
|
+
useMemo(() => {
|
|
10
|
+
const store = _roots.get(canvas).store;
|
|
11
|
+
const coords = { longitude, latitude, altitude };
|
|
12
|
+
setCoords(store, coords);
|
|
13
|
+
}, [longitude, latitude, altitude]);
|
|
14
|
+
}
|
|
15
|
+
function useSetRootCoords(store, {
|
|
16
|
+
longitude,
|
|
17
|
+
latitude,
|
|
18
|
+
altitude
|
|
19
|
+
}) {
|
|
20
|
+
useMemo(() => {
|
|
21
|
+
setCoords(store, { longitude, latitude, altitude });
|
|
22
|
+
}, [longitude, latitude, altitude]);
|
|
23
|
+
}
|
|
24
|
+
function setCoords(store, coords) {
|
|
25
|
+
store.setState({ coords });
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
setCoords,
|
|
29
|
+
useCoords,
|
|
30
|
+
useSetCoords,
|
|
31
|
+
useSetRootCoords
|
|
32
|
+
};
|
|
24
33
|
//# sourceMappingURL=main15.mjs.map
|
package/dist/es/main15.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main15.mjs","sources":["../../
|
|
1
|
+
{"version":3,"file":"main15.mjs","sources":["../../src/core/use-coords.tsx"],"sourcesContent":["import { RootState, _roots, useThree } from \"@react-three/fiber\";\nimport { useMemo } from \"react\";\nimport { UseBoundStore } from 'zustand';\nimport { Coords } from \"../api/coords\";\n\nexport function useCoords() {\n const coords = useThree(s=>(s as any).coords) as Coords; // eslint-disable-line @typescript-eslint/no-explicit-any\n return coords;\n}\n\nexport function useSetCoords({longitude, latitude, altitude}: Coords) {\n \n const canvas = useThree(s => s.gl.domElement);\n useMemo(()=>{\n const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n const coords : Coords = { longitude, latitude, altitude };\n setCoords(store, coords);\n }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function useSetRootCoords(store:UseBoundStore<RootState>, {\n longitude, latitude, altitude\n}: Coords) {\n useMemo(()=>{\n setCoords(store, {longitude, latitude, altitude});\n }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nexport function setCoords(store:UseBoundStore<RootState>, coords: Coords) {\n store.setState({coords} as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n}"],"names":[],"mappings":";;AAKO,SAAS,YAAY;AAC1B,QAAM,SAAS,SAAS,CAAI,MAAA,EAAU,MAAM;AACrC,SAAA;AACT;AAEO,SAAS,aAAa,EAAC,WAAW,UAAU,YAAmB;AAEpE,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AAC5C,UAAQ,MAAI;AACV,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAClC,UAAM,SAAkB,EAAE,WAAW,UAAU,SAAS;AACxD,cAAU,OAAO,MAAM;AAAA,EACtB,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEO,SAAS,iBAAiB,OAAgC;AAAA,EAC/D;AAAA,EAAW;AAAA,EAAU;AACvB,GAAW;AACT,UAAQ,MAAI;AACV,cAAU,OAAO,EAAC,WAAW,UAAU,SAAS,CAAA;AAAA,EAC/C,GAAA,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;AAEgB,SAAA,UAAU,OAAgC,QAAgB;AAClE,QAAA,SAAS,EAAC,OAAA,CAAc;AAChC;"}
|
package/dist/es/main16.mjs
CHANGED
|
@@ -1,91 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
if (!layout.hasOwnProperty(key)) {
|
|
24
|
-
map.setLayoutProperty(id, key, void 0);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
if (paint !== prevProps.paint) {
|
|
29
|
-
const prevPaint = prevProps.paint || {};
|
|
30
|
-
for (const key in paint) {
|
|
31
|
-
if (!deepEqual(paint[key], prevPaint[key])) {
|
|
32
|
-
map.setPaintProperty(id, key, paint[key]);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
for (const key in prevPaint) {
|
|
36
|
-
if (!paint.hasOwnProperty(key)) {
|
|
37
|
-
map.setPaintProperty(id, key, void 0);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
if (!deepEqual(filter, prevProps.filter)) {
|
|
42
|
-
map.setFilter(id, filter);
|
|
43
|
-
}
|
|
44
|
-
if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
|
|
45
|
-
map.setLayerZoomRange(id, minzoom, maxzoom);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
function createLayer(map, id, props) {
|
|
49
|
-
if (map.style && map.style._loaded && (!("source" in props) || map.getSource(props.source))) {
|
|
50
|
-
const options = { ...props, id };
|
|
51
|
-
delete options.beforeId;
|
|
52
|
-
map.addLayer(options, props.beforeId);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
let layerCounter = 0;
|
|
56
|
-
function Layer(props) {
|
|
57
|
-
const map = useContext(MapContext).map.getMap();
|
|
58
|
-
const propsRef = useRef(props);
|
|
59
|
-
const [, setStyleLoaded] = useState(0);
|
|
60
|
-
const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
if (map) {
|
|
63
|
-
const forceUpdate = () => setStyleLoaded((version) => version + 1);
|
|
64
|
-
map.on("styledata", forceUpdate);
|
|
65
|
-
forceUpdate();
|
|
66
|
-
return () => {
|
|
67
|
-
map.off("styledata", forceUpdate);
|
|
68
|
-
if (map.style && map.style._loaded && map.getLayer(id)) {
|
|
69
|
-
map.removeLayer(id);
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
}
|
|
73
|
-
return void 0;
|
|
74
|
-
}, [map]);
|
|
75
|
-
const layer = map && map.style && map.getLayer(id);
|
|
76
|
-
if (layer) {
|
|
77
|
-
try {
|
|
78
|
-
updateLayer(map, id, props, propsRef.current);
|
|
79
|
-
} catch (error) {
|
|
80
|
-
console.warn(error);
|
|
81
|
-
}
|
|
82
|
-
} else {
|
|
83
|
-
createLayer(map, id, props);
|
|
84
|
-
}
|
|
85
|
-
propsRef.current = props;
|
|
86
|
-
return null;
|
|
1
|
+
import { syncCamera } from "./main11.mjs";
|
|
2
|
+
import { useFunction } from "./main10.mjs";
|
|
3
|
+
function useRender({
|
|
4
|
+
map,
|
|
5
|
+
origin,
|
|
6
|
+
useThree,
|
|
7
|
+
frameloop,
|
|
8
|
+
r3m
|
|
9
|
+
}) {
|
|
10
|
+
const render = useFunction((_gl, projViewMx) => {
|
|
11
|
+
const pVMx = "defaultProjectionData" in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;
|
|
12
|
+
r3m.viewProjMx.splice(0, 16, ...pVMx);
|
|
13
|
+
const state = useThree.getState();
|
|
14
|
+
const camera = state.camera;
|
|
15
|
+
const { gl, advance } = state;
|
|
16
|
+
syncCamera(camera, origin, projViewMx);
|
|
17
|
+
gl.resetState();
|
|
18
|
+
advance(Date.now() * 1e-3, true);
|
|
19
|
+
if (!frameloop || frameloop === "always")
|
|
20
|
+
map.triggerRepaint();
|
|
21
|
+
});
|
|
22
|
+
return render;
|
|
87
23
|
}
|
|
88
24
|
export {
|
|
89
|
-
|
|
25
|
+
useRender
|
|
90
26
|
};
|
|
91
27
|
//# sourceMappingURL=main16.mjs.map
|
package/dist/es/main16.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main16.mjs","sources":["../../
|
|
1
|
+
{"version":3,"file":"main16.mjs","sources":["../../src/core/canvas-in-layer/use-render.ts"],"sourcesContent":["import { RootState } from \"@react-three/fiber\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { UseBoundStore } from \"zustand\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useFunction } from \"../use-function\";\nimport { R3M } from \"../use-r3m\";\n\nexport function useRender({\n map, origin, useThree, frameloop, r3m,\n} :{\n map: MapInstance,\n origin: Matrix4Tuple,\n useThree: UseBoundStore<RootState>,\n frameloop?: 'always' | 'demand',\n r3m: R3M\n}) {\n const render = useFunction((_gl: WebGL2RenderingContext, projViewMx: number[] | {defaultProjectionData: {mainMatrix: Record<string, number>}}) => {\n const pVMx = 'defaultProjectionData' in projViewMx ? Object.values(projViewMx.defaultProjectionData.mainMatrix) : projViewMx;\n r3m.viewProjMx.splice(0, 16, ...pVMx)\n const state = useThree.getState();\n const camera = state.camera as PerspectiveCamera;\n const {gl, advance} = state;\n syncCamera(camera as PerspectiveCamera, origin, projViewMx as Matrix4Tuple);\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (!frameloop || frameloop === 'always') map.triggerRepaint();\n })\n return render;\n}"],"names":[],"mappings":";;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAK;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAW;AACpC,GAMG;AACD,QAAM,SAAS,YAAY,CAAC,KAA6B,eAAyF;AAC1I,UAAA,OAAO,2BAA2B,aAAa,OAAO,OAAO,WAAW,sBAAsB,UAAU,IAAI;AAClH,QAAI,WAAW,OAAO,GAAG,IAAI,GAAG,IAAI;AAC9B,UAAA,QAAQ,SAAS;AACvB,UAAM,SAAS,MAAM;AACf,UAAA,EAAC,IAAI,QAAW,IAAA;AACX,eAAA,QAA6B,QAAQ,UAA0B;AAC1E,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAC5B,QAAA,CAAC,aAAa,cAAc;AAAU,UAAI,eAAe;AAAA,EAAA,CAC9D;AACM,SAAA;AACT;"}
|