react-three-map 1.0.0-next.0 → 1.0.0-next.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/CHANGELOG.md +12 -0
- package/dist/cjs/main.js +41 -1263
- 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 +58 -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/dist/maplibre/cjs/main.js +0 -4
- package/dist/maplibre/es/main18.mjs +0 -4
- package/dist/maplibre/es/main18.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/main27.mjs
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { createRoot, _roots } from "@react-three/fiber";
|
|
3
|
-
import { useState, useEffect } from "react";
|
|
4
|
-
import { events } from "./main30.mjs";
|
|
5
|
-
import { setCoords, useSetRootCoords } from "./main25.mjs";
|
|
6
|
-
import { useFunction } from "./main20.mjs";
|
|
7
|
-
import { initR3M } from "./main23.mjs";
|
|
8
|
-
function useRoot(fromLngLat, map, { frameloop, longitude, latitude, altitude, ...props }) {
|
|
9
|
-
const [{ root, useThree, canvas, r3m }] = useState(() => {
|
|
10
|
-
const canvas2 = map.getCanvas();
|
|
11
|
-
const gl = canvas2.getContext("webgl2") || canvas2.getContext("webgl");
|
|
12
|
-
const root2 = createRoot(canvas2);
|
|
13
|
-
root2.configure({
|
|
14
|
-
dpr: window.devicePixelRatio,
|
|
15
|
-
events,
|
|
16
|
-
...props,
|
|
17
|
-
frameloop: "never",
|
|
18
|
-
gl: {
|
|
19
|
-
context: gl,
|
|
20
|
-
autoClear: false,
|
|
21
|
-
antialias: true,
|
|
22
|
-
...props == null ? void 0 : props.gl
|
|
23
|
-
},
|
|
24
|
-
onCreated: (state) => {
|
|
25
|
-
state.gl.forceContextLoss = () => {
|
|
26
|
-
};
|
|
27
|
-
},
|
|
28
|
-
camera: {
|
|
29
|
-
matrixAutoUpdate: false,
|
|
30
|
-
near: 0
|
|
31
|
-
},
|
|
32
|
-
size: {
|
|
33
|
-
width: canvas2.clientWidth,
|
|
34
|
-
height: canvas2.clientHeight,
|
|
35
|
-
top: canvas2.offsetTop,
|
|
36
|
-
left: canvas2.offsetLeft,
|
|
37
|
-
updateStyle: false,
|
|
38
|
-
...props == null ? void 0 : props.size
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
const store = _roots.get(canvas2).store;
|
|
42
|
-
const r3m2 = initR3M({ map, fromLngLat, store });
|
|
43
|
-
setCoords(store, { longitude, latitude, altitude });
|
|
44
|
-
if (frameloop === "demand") {
|
|
45
|
-
store.setState({
|
|
46
|
-
frameloop,
|
|
47
|
-
invalidate: () => {
|
|
48
|
-
map.triggerRepaint();
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
return { root: root2, useThree: store, map, canvas: canvas2, r3m: r3m2 };
|
|
53
|
-
});
|
|
54
|
-
const onResize = useFunction(() => {
|
|
55
|
-
const { setDpr, setSize } = useThree.getState();
|
|
56
|
-
setDpr(window.devicePixelRatio);
|
|
57
|
-
setSize(
|
|
58
|
-
canvas.clientWidth,
|
|
59
|
-
canvas.clientHeight,
|
|
60
|
-
false,
|
|
61
|
-
canvas.offsetTop,
|
|
62
|
-
canvas.offsetLeft
|
|
63
|
-
);
|
|
64
|
-
});
|
|
65
|
-
const onRemove = useFunction(() => {
|
|
66
|
-
root.unmount();
|
|
67
|
-
});
|
|
68
|
-
useSetRootCoords(useThree, { longitude, latitude, altitude });
|
|
69
|
-
useEffect(() => {
|
|
70
|
-
if (frameloop !== "demand")
|
|
71
|
-
return;
|
|
72
|
-
const setState = useThree.setState;
|
|
73
|
-
const { invalidate } = useThree.getState();
|
|
74
|
-
setState({
|
|
75
|
-
frameloop,
|
|
76
|
-
invalidate: () => {
|
|
77
|
-
map.triggerRepaint();
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
return () => {
|
|
81
|
-
setState({ frameloop: "never", invalidate });
|
|
82
|
-
};
|
|
83
|
-
}, [frameloop]);
|
|
84
|
-
useEffect(() => {
|
|
85
|
-
map.on("resize", onResize);
|
|
86
|
-
return () => {
|
|
87
|
-
map.off("resize", onResize);
|
|
88
|
-
};
|
|
89
|
-
}, []);
|
|
90
|
-
useEffect(() => {
|
|
91
|
-
root.render(/* @__PURE__ */ jsx(Fragment, { children: props.children }));
|
|
92
|
-
}, [props.children]);
|
|
93
|
-
return { onRemove, useThree, r3m };
|
|
94
|
-
}
|
|
95
|
-
export {
|
|
96
|
-
useRoot
|
|
97
|
-
};
|
|
98
|
-
//# sourceMappingURL=main27.mjs.map
|
package/dist/es/main27.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main27.mjs","sources":["../../src/core/canvas-in-layer/use-root.tsx"],"sourcesContent":["import { _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useState } from \"react\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { events } from \"../events\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { setCoords, useSetRootCoords } from \"../use-coords\";\nimport { useFunction } from \"../use-function\";\nimport { initR3M } from \"../use-r3m\";\n\nexport function useRoot(\n fromLngLat: FromLngLat,\n map: MapInstance,\n { frameloop, longitude, latitude, altitude, ...props }: CanvasProps\n) {\n\n const [{ root, useThree, canvas, r3m }] = useState(() => {\n const canvas = map.getCanvas();\n const gl = (canvas.getContext('webgl2') || canvas.getContext('webgl')) as WebGLRenderingContext;\n\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events,\n ...props,\n frameloop: 'never',\n gl: {\n context: gl,\n autoClear: false,\n antialias: true,\n ...props?.gl,\n },\n onCreated: (state) => {\n state.gl.forceContextLoss = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: canvas.offsetTop,\n left: canvas.offsetLeft,\n updateStyle: false,\n ...props?.size,\n },\n });\n\n const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n const r3m = initR3M({ map, fromLngLat, store });\n setCoords(store, {longitude, latitude, altitude});\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n return { root, useThree: store, map, canvas, r3m }\n\n })\n\n const onResize = useFunction(() => {\n\n const { setDpr, setSize } = useThree.getState();\n\n setDpr(window.devicePixelRatio);\n\n setSize(\n canvas.clientWidth,\n canvas.clientHeight,\n false,\n canvas.offsetTop,\n canvas.offsetLeft,\n );\n\n })\n\n const onRemove = useFunction(() => {\n root.unmount();\n })\n\n useSetRootCoords(useThree, {longitude, latitude, altitude});\n\n // on `frameloop` change\n useEffect(() => {\n if (frameloop !== 'demand') return;\n const setState = useThree.setState;\n const { invalidate } = useThree.getState();\n setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n }\n });\n return () => {\n setState({ frameloop: 'never', invalidate })\n }\n }, [frameloop]) // eslint-disable-line react-hooks/exhaustive-deps\n\n // on mount / unmount\n useEffect(() => {\n map.on('resize', onResize);\n return () => {\n map.off('resize', onResize)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n // root.render\n useEffect(() => {\n root.render(<>\n {props.children}\n </>);\n }, [props.children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { onRemove, useThree, r3m };\n}"],"names":["canvas","root","r3m"],"mappings":";;;;;;;AASgB,SAAA,QACd,YACA,KACA,EAAE,WAAW,WAAW,UAAU,UAAU,GAAG,SAC/C;AAEM,QAAA,CAAC,EAAE,MAAM,UAAU,QAAQ,IAAK,CAAA,IAAI,SAAS,MAAM;AACjDA,UAAAA,UAAS,IAAI;AACnB,UAAM,KAAMA,QAAO,WAAW,QAAQ,KAAKA,QAAO,WAAW,OAAO;AAE9DC,UAAAA,QAAO,WAAWD,OAAM;AAC9BC,UAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ;AAAA,MACA,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,+BAAO;AAAA,MACZ;AAAA,MACA,WAAW,CAAC,UAAU;AACd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAOD,QAAO;AAAA,QACd,QAAQA,QAAO;AAAA,QACf,KAAKA,QAAO;AAAA,QACZ,MAAMA,QAAO;AAAA,QACb,aAAa;AAAA,QACb,GAAG,+BAAO;AAAA,MACZ;AAAA,IAAA,CACD;AAED,UAAM,QAAQ,OAAO,IAAIA,OAAM,EAAG;AAElC,UAAME,OAAM,QAAQ,EAAE,KAAK,YAAY,OAAO;AAC9C,cAAU,OAAO,EAAC,WAAW,UAAU,SAAS,CAAA;AAEhD,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEO,WAAA,EAAE,MAAAD,OAAM,UAAU,OAAO,KAAK,QAAAD,SAAQ,KAAAE;EAAI,CAElD;AAEK,QAAA,WAAW,YAAY,MAAM;AAEjC,UAAM,EAAE,QAAQ,QAAQ,IAAI,SAAS,SAAS;AAE9C,WAAO,OAAO,gBAAgB;AAE9B;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EACT,CAED;AAEK,QAAA,WAAW,YAAY,MAAM;AACjC,SAAK,QAAQ;AAAA,EAAA,CACd;AAED,mBAAiB,UAAU,EAAC,WAAW,UAAU,SAAS,CAAA;AAG1D,YAAU,MAAM;AACd,QAAI,cAAc;AAAU;AAC5B,UAAM,WAAW,SAAS;AAC1B,UAAM,EAAE,WAAA,IAAe,SAAS,SAAS;AAChC,aAAA;AAAA,MACP;AAAA,MACA,YAAY,MAAM;AAChB,YAAI,eAAe;AAAA,MACrB;AAAA,IAAA,CACD;AACD,WAAO,MAAM;AACX,eAAS,EAAE,WAAW,SAAS,WAAY,CAAA;AAAA,IAAA;AAAA,EAC7C,GACC,CAAC,SAAS,CAAC;AAGd,YAAU,MAAM;AACV,QAAA,GAAG,UAAU,QAAQ;AACzB,WAAO,MAAM;AACP,UAAA,IAAI,UAAU,QAAQ;AAAA,IAAA;AAAA,EAE9B,GAAG,CAAE,CAAA;AAGL,YAAU,MAAM;AACd,SAAK,OAAO,oBAAA,UAAA,EACT,UAAM,MAAA,SACT,CAAA,CAAG;AAAA,EAAA,GACF,CAAC,MAAM,QAAQ,CAAC;AAEZ,SAAA,EAAE,UAAU,UAAU;AAC/B;"}
|
package/dist/es/main28.mjs
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Canvas } from "@react-three/fiber";
|
|
3
|
-
import { memo, useState } from "react";
|
|
4
|
-
import { events } from "./main30.mjs";
|
|
5
|
-
import { useFunction } from "./main20.mjs";
|
|
6
|
-
import { InitR3M } from "./main31.mjs";
|
|
7
|
-
import { SyncCameraFC } from "./main32.mjs";
|
|
8
|
-
const CanvasPortal = memo(({
|
|
9
|
-
children,
|
|
10
|
-
latitude,
|
|
11
|
-
longitude,
|
|
12
|
-
altitude,
|
|
13
|
-
setOnRender,
|
|
14
|
-
map,
|
|
15
|
-
fromLngLat,
|
|
16
|
-
...props
|
|
17
|
-
}) => {
|
|
18
|
-
const mapCanvas = map.getCanvas();
|
|
19
|
-
const eventSource = mapCanvas.parentElement;
|
|
20
|
-
const [ready, setReady] = useState(false);
|
|
21
|
-
const onReady = useFunction(() => {
|
|
22
|
-
setReady(true);
|
|
23
|
-
});
|
|
24
|
-
return /* @__PURE__ */ jsxs(
|
|
25
|
-
Canvas,
|
|
26
|
-
{
|
|
27
|
-
camera: {
|
|
28
|
-
matrixAutoUpdate: false,
|
|
29
|
-
matrixWorldAutoUpdate: false
|
|
30
|
-
},
|
|
31
|
-
events,
|
|
32
|
-
eventSource,
|
|
33
|
-
...props,
|
|
34
|
-
gl: { autoClear: false, ...props.gl },
|
|
35
|
-
children: [
|
|
36
|
-
/* @__PURE__ */ jsx(
|
|
37
|
-
InitR3M,
|
|
38
|
-
{
|
|
39
|
-
map,
|
|
40
|
-
fromLngLat,
|
|
41
|
-
latitude,
|
|
42
|
-
longitude,
|
|
43
|
-
altitude
|
|
44
|
-
}
|
|
45
|
-
),
|
|
46
|
-
/* @__PURE__ */ jsx(
|
|
47
|
-
SyncCameraFC,
|
|
48
|
-
{
|
|
49
|
-
latitude,
|
|
50
|
-
longitude,
|
|
51
|
-
altitude,
|
|
52
|
-
setOnRender,
|
|
53
|
-
onReady,
|
|
54
|
-
map
|
|
55
|
-
}
|
|
56
|
-
),
|
|
57
|
-
ready && children
|
|
58
|
-
]
|
|
59
|
-
}
|
|
60
|
-
);
|
|
61
|
-
});
|
|
62
|
-
CanvasPortal.displayName = "CanvasPortal";
|
|
63
|
-
export {
|
|
64
|
-
CanvasPortal
|
|
65
|
-
};
|
|
66
|
-
//# sourceMappingURL=main28.mjs.map
|
package/dist/es/main28.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main28.mjs","sources":["../../src/core/canvas-overlay/canvas-portal.tsx"],"sourcesContent":["import { Canvas } from \"@react-three/fiber\";\nimport { memo, useState } from \"react\";\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { events } from \"../events\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useFunction } from \"../use-function\";\nimport { InitR3M } from \"./init-r3m\";\nimport { SyncCameraFC } from \"./sync-camera-fc\";\n\ninterface CanvasPortalProps extends CanvasProps {\n setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void,\n map: MapInstance,\n fromLngLat: FromLngLat,\n}\n\nexport const CanvasPortal = memo<CanvasPortalProps>(({\n children, latitude, longitude, altitude,\n setOnRender, map, fromLngLat, ...props\n}) => {\n\n const mapCanvas = map.getCanvas();\n const eventSource = mapCanvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n const [ready, setReady] = useState(false);\n\n const onReady = useFunction(() => {\n setReady(true);\n })\n\n return <Canvas\n camera={{\n matrixAutoUpdate: false,\n matrixWorldAutoUpdate: false,\n }}\n events={events}\n eventSource={eventSource}\n {...props}\n gl={{ autoClear: false, ...props.gl }}\n >\n <InitR3M\n map={map}\n fromLngLat={fromLngLat}\n latitude={latitude}\n longitude={longitude}\n altitude={altitude}\n />\n <SyncCameraFC\n latitude={latitude}\n longitude={longitude}\n altitude={altitude}\n setOnRender={setOnRender}\n onReady={onReady}\n map={map}\n />\n {ready && children}\n </Canvas>\n})\nCanvasPortal.displayName = 'CanvasPortal';\n"],"names":[],"mappings":";;;;;;;AAgBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAU;AAAA,EAAW;AAAA,EAC/B;AAAA,EAAa;AAAA,EAAK;AAAA,EAAY,GAAG;AACnC,MAAM;AAEE,QAAA,YAAY,IAAI;AACtB,QAAM,cAAc,UAAU;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAElC,QAAA,UAAU,YAAY,MAAM;AAChC,aAAS,IAAI;AAAA,EAAA,CACd;AAEM,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,uBAAuB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,IAAI,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG;AAAA,MAEpC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAEd,CAAC;AACD,aAAa,cAAc;"}
|
package/dist/es/main29.mjs
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { Quaternion, Euler, Vector3, Matrix4 } from "three";
|
|
2
|
-
const quat = new Quaternion();
|
|
3
|
-
const euler = new Euler();
|
|
4
|
-
const pos = new Vector3();
|
|
5
|
-
const scale = new Vector3();
|
|
6
|
-
const m4 = new Matrix4();
|
|
7
|
-
function coordsToMatrix({
|
|
8
|
-
longitude,
|
|
9
|
-
latitude,
|
|
10
|
-
altitude,
|
|
11
|
-
fromLngLat
|
|
12
|
-
}) {
|
|
13
|
-
const center = fromLngLat([longitude, latitude], altitude);
|
|
14
|
-
const scaleUnit = center.meterInMercatorCoordinateUnits();
|
|
15
|
-
pos.set(center.x, center.y, center.z || 0);
|
|
16
|
-
scale.set(scaleUnit, -scaleUnit, scaleUnit);
|
|
17
|
-
quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
|
|
18
|
-
return m4.compose(pos, quat, scale).toArray();
|
|
19
|
-
}
|
|
20
|
-
export {
|
|
21
|
-
coordsToMatrix
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=main29.mjs.map
|
package/dist/es/main29.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main29.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\nimport { Coords } from \"../api/coords\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({\n longitude, latitude, altitude, fromLngLat\n}: Coords & { fromLngLat: FromLngLat }) {\n const center = fromLngLat([longitude, latitude], altitude);\n const scaleUnit = center.meterInMercatorCoordinateUnits();\n pos.set(center.x, center.y, center.z || 0);\n scale.set(scaleUnit, -scaleUnit, scaleUnit);\n quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAIA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe;AAAA,EAC7B;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AACjC,GAAwC;AACtC,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}
|
package/dist/es/main30.mjs
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { events as events$1 } from "@react-three/fiber";
|
|
2
|
-
import { Matrix4 } from "three";
|
|
3
|
-
const projViewInv = new Matrix4();
|
|
4
|
-
const events = (store) => {
|
|
5
|
-
const originalEvents = events$1(store);
|
|
6
|
-
return {
|
|
7
|
-
...originalEvents,
|
|
8
|
-
connect: (target) => {
|
|
9
|
-
if (!originalEvents.connect)
|
|
10
|
-
return;
|
|
11
|
-
originalEvents.connect(target.parentElement);
|
|
12
|
-
},
|
|
13
|
-
compute: (event, state) => {
|
|
14
|
-
state.pointer.x = event.offsetX / state.size.width * 2 - 1;
|
|
15
|
-
state.pointer.y = 1 - event.offsetY / state.size.height * 2;
|
|
16
|
-
if (state.camera.userData.projByViewInv)
|
|
17
|
-
projViewInv.fromArray(state.camera.userData.projByViewInv);
|
|
18
|
-
state.raycaster.camera = state.camera;
|
|
19
|
-
state.raycaster.ray.origin.setScalar(0).applyMatrix4(projViewInv);
|
|
20
|
-
state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projViewInv).sub(state.raycaster.ray.origin).normalize();
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
export {
|
|
25
|
-
events
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=main30.mjs.map
|
package/dist/es/main30.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main30.mjs","sources":["../../src/core/events.ts"],"sourcesContent":["import { Canvas, events as fiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\n\n/** projection * view matrix inverted */\nconst projViewInv = new Matrix4()\n\ntype Events = Parameters<typeof Canvas>[0]['events'];\n\nexport const events: Events = (store) => {\n const originalEvents = fiberEvents(store);\n return {\n ...originalEvents,\n connect: target => {\n if (!originalEvents.connect) return;\n originalEvents.connect(target.parentElement!); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n },\n compute: (event, state) => {\n\n state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;\n\n if (state.camera.userData.projByViewInv) projViewInv.fromArray(state.camera.userData.projByViewInv);\n\n state.raycaster.camera = state.camera;\n state.raycaster.ray.origin.setScalar(0).applyMatrix4(projViewInv);\n state.raycaster.ray.direction\n .set(state.pointer.x, state.pointer.y, 1)\n .applyMatrix4(projViewInv)\n .sub(state.raycaster.ray.origin)\n .normalize();\n\n },\n };\n};"],"names":["fiberEvents"],"mappings":";;AAIA,MAAM,cAAc,IAAI;AAIX,MAAA,SAAiB,CAAC,UAAU;AACjC,QAAA,iBAAiBA,SAAY,KAAK;AACjC,SAAA;AAAA,IACL,GAAG;AAAA,IACH,SAAS,CAAU,WAAA;AACjB,UAAI,CAAC,eAAe;AAAS;AACd,qBAAA,QAAQ,OAAO,aAAc;AAAA,IAC9C;AAAA,IACA,SAAS,CAAC,OAAO,UAAU;AAEzB,YAAM,QAAQ,IAAK,MAAM,UAAU,MAAM,KAAK,QAAS,IAAI;AAC3D,YAAM,QAAQ,IAAI,IAAK,MAAM,UAAU,MAAM,KAAK,SAAU;AAExD,UAAA,MAAM,OAAO,SAAS;AAAe,oBAAY,UAAU,MAAM,OAAO,SAAS,aAAa;AAE5F,YAAA,UAAU,SAAS,MAAM;AAC/B,YAAM,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAa,WAAW;AAC1D,YAAA,UAAU,IAAI,UACjB,IAAI,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,CAAC,EACvC,aAAa,WAAW,EACxB,IAAI,MAAM,UAAU,IAAI,MAAM,EAC9B;IAEL;AAAA,EAAA;AAEJ;"}
|
package/dist/es/main31.mjs
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from "react";
|
|
3
|
-
import { useInitR3M } from "./main23.mjs";
|
|
4
|
-
import { useSetCoords } from "./main25.mjs";
|
|
5
|
-
const InitR3M = memo(({
|
|
6
|
-
longitude,
|
|
7
|
-
latitude,
|
|
8
|
-
altitude,
|
|
9
|
-
...props
|
|
10
|
-
}) => {
|
|
11
|
-
useInitR3M(props);
|
|
12
|
-
useSetCoords({ longitude, latitude, altitude });
|
|
13
|
-
return /* @__PURE__ */ jsx(Fragment, {});
|
|
14
|
-
});
|
|
15
|
-
InitR3M.displayName = "InitR3M";
|
|
16
|
-
export {
|
|
17
|
-
InitR3M
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=main31.mjs.map
|
package/dist/es/main31.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main31.mjs","sources":["../../src/core/canvas-overlay/init-r3m.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useInitR3M } from \"../use-r3m\";\nimport { useSetCoords } from \"../use-coords\";\nimport { Coords } from \"../../api/coords\";\n\ninterface InitR3MProps extends Coords {\n map: MapInstance,\n fromLngLat: FromLngLat,\n}\n\n/** Initialises the `R3M` hook */\nexport const InitR3M = memo<InitR3MProps>(({\n longitude, latitude, altitude, ...props\n}) => {\n useInitR3M(props);\n useSetCoords({longitude, latitude, altitude});\n return <></>\n})\nInitR3M.displayName = 'InitR3M';"],"names":[],"mappings":";;;;AAYa,MAAA,UAAU,KAAmB,CAAC;AAAA,EACzC;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU,GAAG;AACpC,MAAM;AACJ,aAAW,KAAK;AAChB,eAAa,EAAC,WAAW,UAAU,SAAS,CAAA;AAC5C,SAAS,oBAAA,UAAA,CAAA,CAAA;AACX,CAAC;AACD,QAAQ,cAAc;"}
|
package/dist/es/main32.mjs
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useThree, useFrame } from "@react-three/fiber";
|
|
3
|
-
import { memo, useRef, useMemo, useEffect, useLayoutEffect } from "react";
|
|
4
|
-
import { syncCamera } from "./main21.mjs";
|
|
5
|
-
import { useCoordsToMatrix } from "./main22.mjs";
|
|
6
|
-
import { useFunction } from "./main20.mjs";
|
|
7
|
-
import { useR3M } from "./main23.mjs";
|
|
8
|
-
const SyncCameraFC = memo(({
|
|
9
|
-
latitude,
|
|
10
|
-
longitude,
|
|
11
|
-
altitude = 0,
|
|
12
|
-
setOnRender,
|
|
13
|
-
manualRender,
|
|
14
|
-
onReady,
|
|
15
|
-
map
|
|
16
|
-
}) => {
|
|
17
|
-
const mapCanvas = map.getCanvas();
|
|
18
|
-
const r3m = useR3M();
|
|
19
|
-
const camRef = useRef(null);
|
|
20
|
-
const camera = useThree((s) => s.camera);
|
|
21
|
-
const gl = useThree((s) => s.gl);
|
|
22
|
-
const threeCanvas = useThree((s) => s.gl.domElement);
|
|
23
|
-
const scene = useThree((s) => s.scene);
|
|
24
|
-
const advance = useThree((s) => s.advance);
|
|
25
|
-
const setSize = useThree((s) => s.setSize);
|
|
26
|
-
const set = useThree((s) => s.set);
|
|
27
|
-
const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });
|
|
28
|
-
const ready = useRef(false);
|
|
29
|
-
const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);
|
|
30
|
-
const mapPaintRequests = useRef(0);
|
|
31
|
-
const triggerRepaintOff = useFunction(() => {
|
|
32
|
-
mapPaintRequests.current++;
|
|
33
|
-
});
|
|
34
|
-
useFrame(() => {
|
|
35
|
-
syncCamera(camera, origin, r3m.viewProjMx);
|
|
36
|
-
if (manualRender)
|
|
37
|
-
gl.render(scene, camera);
|
|
38
|
-
map.triggerRepaint = triggerRepaint;
|
|
39
|
-
if (mapPaintRequests.current > 0) {
|
|
40
|
-
mapPaintRequests.current = 0;
|
|
41
|
-
map.triggerRepaint();
|
|
42
|
-
}
|
|
43
|
-
}, -Infinity);
|
|
44
|
-
const onRender = useFunction((viewProjMx) => {
|
|
45
|
-
map.triggerRepaint = triggerRepaintOff;
|
|
46
|
-
if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {
|
|
47
|
-
setSize(
|
|
48
|
-
mapCanvas.clientWidth,
|
|
49
|
-
mapCanvas.clientHeight,
|
|
50
|
-
true,
|
|
51
|
-
mapCanvas.offsetTop,
|
|
52
|
-
mapCanvas.offsetLeft
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
r3m.viewProjMx = viewProjMx;
|
|
56
|
-
if (!ready.current && onReady) {
|
|
57
|
-
ready.current = true;
|
|
58
|
-
onReady();
|
|
59
|
-
}
|
|
60
|
-
advance(Date.now() * 1e-3, true);
|
|
61
|
-
});
|
|
62
|
-
useEffect(() => {
|
|
63
|
-
setOnRender && setOnRender(() => onRender);
|
|
64
|
-
}, [setOnRender, onRender]);
|
|
65
|
-
useLayoutEffect(() => {
|
|
66
|
-
if (!manualRender)
|
|
67
|
-
return;
|
|
68
|
-
set({ camera: camRef.current });
|
|
69
|
-
}, []);
|
|
70
|
-
return /* @__PURE__ */ jsx(Fragment, { children: manualRender && /* @__PURE__ */ jsx(
|
|
71
|
-
"perspectiveCamera",
|
|
72
|
-
{
|
|
73
|
-
ref: camRef,
|
|
74
|
-
matrixAutoUpdate: false,
|
|
75
|
-
matrixWorldAutoUpdate: false
|
|
76
|
-
}
|
|
77
|
-
) });
|
|
78
|
-
});
|
|
79
|
-
SyncCameraFC.displayName = "SyncCameraFC";
|
|
80
|
-
export {
|
|
81
|
-
SyncCameraFC
|
|
82
|
-
};
|
|
83
|
-
//# sourceMappingURL=main32.mjs.map
|
package/dist/es/main32.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main32.mjs","sources":["../../src/core/canvas-overlay/sync-camera-fc.tsx"],"sourcesContent":["import { useFrame, useThree } from \"@react-three/fiber\";\nimport { memo, useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { Coords } from \"../../api/coords\";\nimport { MapInstance } from \"../generic-map\";\nimport { syncCamera } from \"../sync-camera\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useFunction } from \"../use-function\";\nimport { useR3M } from \"../use-r3m\";\n\ninterface SyncCameraFCProps extends Coords {\n setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void,\n /** on `useFrame` it will manually render (used by `<Coordinates>`) */\n manualRender?: boolean,\n onReady?: () => void,\n map: MapInstance,\n}\n\n/** React Component (FC) to sync the Three camera with the map provider */\nexport const SyncCameraFC = memo<SyncCameraFCProps>(({\n latitude, longitude, altitude = 0, setOnRender, manualRender, onReady, map\n}) => {\n\n const mapCanvas = map.getCanvas();\n\n const r3m = useR3M();\n\n const camRef = useRef<PerspectiveCamera>(null);\n\n const camera = useThree(s => s.camera) as PerspectiveCamera;\n const gl = useThree(s => s.gl);\n const threeCanvas = useThree(s => s.gl.domElement);\n const scene = useThree(s => s.scene);\n const advance = useThree(s => s.advance);\n const setSize = useThree(s => s.setSize);\n const set = useThree(s => s.set);\n\n const origin = useCoordsToMatrix({ latitude, longitude, altitude, fromLngLat: r3m.fromLngLat });\n\n const ready = useRef(false);\n\n const triggerRepaint = useMemo(() => map.triggerRepaint, [map]);\n const mapPaintRequests = useRef(0);\n const triggerRepaintOff = useFunction(() => {\n mapPaintRequests.current++;\n })\n\n useFrame(() => {\n syncCamera(camera, origin, r3m.viewProjMx)\n\n if (manualRender) gl.render(scene, camera);\n\n map.triggerRepaint = triggerRepaint;\n if (mapPaintRequests.current > 0) {\n mapPaintRequests.current = 0;\n map.triggerRepaint();\n }\n }, -Infinity)\n\n const onRender = useFunction((viewProjMx: Matrix4Tuple) => {\n map.triggerRepaint = triggerRepaintOff;\n\n if (threeCanvas.width !== mapCanvas.width || threeCanvas.height !== mapCanvas.height) {\n setSize(\n mapCanvas.clientWidth,\n mapCanvas.clientHeight,\n true,\n mapCanvas.offsetTop,\n mapCanvas.offsetLeft,\n );\n }\n\n r3m.viewProjMx = viewProjMx;\n if (!ready.current && onReady) {\n ready.current = true;\n onReady();\n }\n advance(Date.now() * .001, true);\n })\n\n useEffect(() => {\n setOnRender && setOnRender(() => onRender)\n }, [setOnRender, onRender])\n\n useLayoutEffect(() => {\n if (!manualRender) return;\n set({ camera: camRef.current! }); // eslint-disable-line @typescript-eslint/no-non-null-assertion\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return <>\n {manualRender && <perspectiveCamera\n ref={camRef}\n matrixAutoUpdate={false}\n matrixWorldAutoUpdate={false}\n />}\n </>\n})\n\nSyncCameraFC.displayName = 'SyncCameraFC';"],"names":[],"mappings":";;;;;;;AAmBa,MAAA,eAAe,KAAwB,CAAC;AAAA,EACnD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AAAA,EAAa;AAAA,EAAc;AAAA,EAAS;AACzE,MAAM;AAEE,QAAA,YAAY,IAAI;AAEtB,QAAM,MAAM;AAEN,QAAA,SAAS,OAA0B,IAAI;AAE7C,QAAM,SAAS,SAAS,CAAK,MAAA,EAAE,MAAM;AACrC,QAAM,KAAK,SAAS,CAAK,MAAA,EAAE,EAAE;AAC7B,QAAM,cAAc,SAAS,CAAK,MAAA,EAAE,GAAG,UAAU;AACjD,QAAM,QAAQ,SAAS,CAAK,MAAA,EAAE,KAAK;AACnC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,UAAU,SAAS,CAAK,MAAA,EAAE,OAAO;AACvC,QAAM,MAAM,SAAS,CAAK,MAAA,EAAE,GAAG;AAEzB,QAAA,SAAS,kBAAkB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,WAAA,CAAY;AAExF,QAAA,QAAQ,OAAO,KAAK;AAE1B,QAAM,iBAAiB,QAAQ,MAAM,IAAI,gBAAgB,CAAC,GAAG,CAAC;AACxD,QAAA,mBAAmB,OAAO,CAAC;AAC3B,QAAA,oBAAoB,YAAY,MAAM;AACzB,qBAAA;AAAA,EAAA,CAClB;AAED,WAAS,MAAM;AACF,eAAA,QAAQ,QAAQ,IAAI,UAAU;AAErC,QAAA;AAAiB,SAAA,OAAO,OAAO,MAAM;AAEzC,QAAI,iBAAiB;AACjB,QAAA,iBAAiB,UAAU,GAAG;AAChC,uBAAiB,UAAU;AAC3B,UAAI,eAAe;AAAA,IACrB;AAAA,EAAA,GACC,SAAS;AAEN,QAAA,WAAW,YAAY,CAAC,eAA6B;AACzD,QAAI,iBAAiB;AAErB,QAAI,YAAY,UAAU,UAAU,SAAS,YAAY,WAAW,UAAU,QAAQ;AACpF;AAAA,QACE,UAAU;AAAA,QACV,UAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA,IAEd;AAEA,QAAI,aAAa;AACb,QAAA,CAAC,MAAM,WAAW,SAAS;AAC7B,YAAM,UAAU;AACR;IACV;AACA,YAAQ,KAAK,IAAQ,IAAA,MAAM,IAAI;AAAA,EAAA,CAChC;AAED,YAAU,MAAM;AACC,mBAAA,YAAY,MAAM,QAAQ;AAAA,EAAA,GACxC,CAAC,aAAa,QAAQ,CAAC;AAE1B,kBAAgB,MAAM;AACpB,QAAI,CAAC;AAAc;AACnB,QAAI,EAAE,QAAQ,OAAO,QAAU,CAAA;AAAA,EACjC,GAAG,CAAE,CAAA;AAEL,yCACG,UAAgB,gBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAChB,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,uBAAuB;AAAA,IAAA;AAAA,EAE3B,EAAA,CAAA;AACF,CAAC;AAED,aAAa,cAAc;"}
|