react-three-map 0.4.2 → 0.4.3
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 +12 -2
- package/dist/es/main10.mjs +19 -14
- package/dist/es/main10.mjs.map +1 -1
- package/dist/es/main11.mjs +12 -0
- package/dist/es/main11.mjs.map +1 -1
- package/dist/es/main13.mjs +0 -2
- package/dist/es/main13.mjs.map +1 -1
- package/dist/es/main4.mjs +2 -2
- package/dist/es/main7.mjs +1 -1
- package/dist/es/main8.mjs +15 -21
- package/dist/es/main8.mjs.map +1 -1
- package/dist/es/main9.mjs +20 -19
- package/dist/es/main9.mjs.map +1 -1
- package/dist/maplibre/cjs/main.js +12 -2
- package/dist/maplibre/es/main10.mjs +14 -19
- package/dist/maplibre/es/main10.mjs.map +1 -1
- package/dist/maplibre/es/main11.mjs +12 -0
- package/dist/maplibre/es/main11.mjs.map +1 -1
- package/dist/maplibre/es/main13.mjs +0 -2
- package/dist/maplibre/es/main13.mjs.map +1 -1
- package/dist/maplibre/es/main4.mjs +2 -2
- package/dist/maplibre/es/main7.mjs +1 -1
- package/dist/maplibre/es/main8.mjs +21 -15
- package/dist/maplibre/es/main8.mjs.map +1 -1
- package/dist/maplibre/es/main9.mjs +19 -20
- package/dist/maplibre/es/main9.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/favicon.svg +0 -1
- package/dist/cjs/web-ifc.wasm +0 -0
- package/dist/es/favicon.svg +0 -1
- package/dist/es/web-ifc.wasm +0 -0
- package/dist/maplibre/cjs/favicon.svg +0 -1
- package/dist/maplibre/cjs/web-ifc.wasm +0 -0
- package/dist/maplibre/es/favicon.svg +0 -1
- package/dist/maplibre/es/web-ifc.wasm +0 -0
package/CHANGELOG.md
CHANGED
package/dist/cjs/main.js
CHANGED
|
@@ -65,8 +65,6 @@ function createEvents() {
|
|
|
65
65
|
priority: 1,
|
|
66
66
|
enabled: true,
|
|
67
67
|
compute(event, state) {
|
|
68
|
-
state.size.width = state.gl.domElement.width / window.devicePixelRatio;
|
|
69
|
-
state.size.height = state.gl.domElement.height / window.devicePixelRatio;
|
|
70
68
|
state.pointer.x = event.offsetX / state.size.width * 2 - 1;
|
|
71
69
|
state.pointer.y = 1 - event.offsetY / state.size.height * 2;
|
|
72
70
|
if (state.camera.userData.projByViewInv)
|
|
@@ -166,13 +164,25 @@ function useOnAdd(fromLngLat2, { frameloop, ...renderProps }) {
|
|
|
166
164
|
}
|
|
167
165
|
});
|
|
168
166
|
}
|
|
167
|
+
map.on("resize", onResize);
|
|
169
168
|
setTimeout(() => setMounted(true));
|
|
170
169
|
});
|
|
170
|
+
const onResize = useFunction(() => {
|
|
171
|
+
if (!r3mRef.current.map)
|
|
172
|
+
return;
|
|
173
|
+
if (!r3mRef.current.state)
|
|
174
|
+
return;
|
|
175
|
+
const canvas = r3mRef.current.map.getCanvas();
|
|
176
|
+
r3mRef.current.state.setSize(canvas.width, canvas.height);
|
|
177
|
+
});
|
|
171
178
|
const onRemove = useFunction(() => {
|
|
172
179
|
if (!r3mRef.current.root)
|
|
173
180
|
return;
|
|
174
181
|
r3mRef.current.root.unmount();
|
|
175
182
|
r3mRef.current.root = void 0;
|
|
183
|
+
if (!r3mRef.current.map)
|
|
184
|
+
return;
|
|
185
|
+
r3mRef.current.map.off("resize", onResize);
|
|
176
186
|
});
|
|
177
187
|
react.useEffect(() => () => onRemove(), [onRemove]);
|
|
178
188
|
return { onAdd, onRemove, mounted, r3mRef };
|
package/dist/es/main10.mjs
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { syncCamera } from "./main6.mjs";
|
|
2
|
+
import { useFunction } from "./main12.mjs";
|
|
3
|
+
function useRender(origin, r3mRef, frameloop) {
|
|
4
|
+
const render = useFunction((_gl, mapCamMx) => {
|
|
5
|
+
const r3m = r3mRef.current;
|
|
6
|
+
if (!r3m.state || !r3m.map)
|
|
7
|
+
return;
|
|
8
|
+
const camera = r3m.state.camera;
|
|
9
|
+
const gl = r3m.state.gl;
|
|
10
|
+
const advance = r3m.state.advance;
|
|
11
|
+
r3m.mapCamMx = mapCamMx;
|
|
12
|
+
syncCamera(camera, origin, mapCamMx);
|
|
13
|
+
gl.resetState();
|
|
14
|
+
advance(Date.now() * 1e-3, true);
|
|
15
|
+
if (frameloop === "always")
|
|
16
|
+
r3m.map.triggerRepaint();
|
|
17
|
+
});
|
|
18
|
+
return render;
|
|
14
19
|
}
|
|
15
20
|
export {
|
|
16
|
-
|
|
21
|
+
useRender
|
|
17
22
|
};
|
|
18
23
|
//# sourceMappingURL=main10.mjs.map
|
package/dist/es/main10.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main10.mjs","sources":["../../src/core/
|
|
1
|
+
{"version":3,"file":"main10.mjs","sources":["../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n const r3m = r3mRef.current;\n if (!r3m.state || !r3m.map) return;\n const camera = r3m.state.camera;\n const gl = r3m.state.gl;\n const advance = r3m.state.advance;\n r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (frameloop === 'always') r3m.map.triggerRepaint();\n })\n\n return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AACtB,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
|
package/dist/es/main11.mjs
CHANGED
|
@@ -49,13 +49,25 @@ function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
|
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
51
|
}
|
|
52
|
+
map.on("resize", onResize);
|
|
52
53
|
setTimeout(() => setMounted(true));
|
|
53
54
|
});
|
|
55
|
+
const onResize = useFunction(() => {
|
|
56
|
+
if (!r3mRef.current.map)
|
|
57
|
+
return;
|
|
58
|
+
if (!r3mRef.current.state)
|
|
59
|
+
return;
|
|
60
|
+
const canvas = r3mRef.current.map.getCanvas();
|
|
61
|
+
r3mRef.current.state.setSize(canvas.width, canvas.height);
|
|
62
|
+
});
|
|
54
63
|
const onRemove = useFunction(() => {
|
|
55
64
|
if (!r3mRef.current.root)
|
|
56
65
|
return;
|
|
57
66
|
r3mRef.current.root.unmount();
|
|
58
67
|
r3mRef.current.root = void 0;
|
|
68
|
+
if (!r3mRef.current.map)
|
|
69
|
+
return;
|
|
70
|
+
r3mRef.current.map.off("resize", onResize);
|
|
59
71
|
});
|
|
60
72
|
useEffect(() => () => onRemove(), [onRemove]);
|
|
61
73
|
return { onAdd, onRemove, mounted, r3mRef };
|
package/dist/es/main11.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main11.mjs","sources":["../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;
|
|
1
|
+
{"version":3,"file":"main11.mjs","sources":["../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n map.on('resize', onResize)\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onResize = useFunction(() => {\n if (!r3mRef.current.map) return;\n if (!r3mRef.current.state) return;\n const canvas = r3mRef.current.map.getCanvas();\n r3mRef.current.state.setSize(canvas.width, canvas.height);\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n if (!r3mRef.current.map) return;\n r3mRef.current.map.off('resize', onResize)\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAK;AACrB,QAAA,CAAC,OAAO,QAAQ;AAAO;AAC3B,UAAM,SAAS,OAAO,QAAQ,IAAI,UAAU;AAC5C,WAAO,QAAQ,MAAM,QAAQ,OAAO,OAAO,OAAO,MAAM;AAAA,EAAA,CACzD;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
|
package/dist/es/main13.mjs
CHANGED
|
@@ -20,8 +20,6 @@ function createEvents() {
|
|
|
20
20
|
priority: 1,
|
|
21
21
|
enabled: true,
|
|
22
22
|
compute(event, state) {
|
|
23
|
-
state.size.width = state.gl.domElement.width / window.devicePixelRatio;
|
|
24
|
-
state.size.height = state.gl.domElement.height / window.devicePixelRatio;
|
|
25
23
|
state.pointer.x = event.offsetX / state.size.width * 2 - 1;
|
|
26
24
|
state.pointer.y = 1 - event.offsetY / state.size.height * 2;
|
|
27
25
|
if (state.camera.userData.projByViewInv)
|
package/dist/es/main13.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main13.mjs","sources":["../../src/core/create-events.ts"],"sourcesContent":["import { Events, RenderProps, RootState, createEvents as createFiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\nimport { UseBoundStore } from \"zustand\";\n\ntype DomEvent = PointerEvent | MouseEvent | WheelEvent;\n\nconst DOM_EVENTS = {\n onClick: [\"click\", false],\n onContextMenu: [\"contextmenu\", false],\n onDoubleClick: [\"dblclick\", false],\n onWheel: [\"wheel\", true],\n onPointerDown: [\"pointerdown\", true],\n onPointerUp: [\"pointerup\", true],\n onPointerLeave: [\"pointerleave\", true],\n onPointerMove: [\"pointermove\", true],\n onPointerCancel: [\"pointercancel\", true],\n onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\nconst projByViewInv = new Matrix4()\n\n/** ThreeLayer event manager for MapLibre and Mapbox */\nexport function createEvents(): RenderProps<HTMLCanvasElement>[\"events\"] {\n return (store: UseBoundStore<RootState>) => {\n const { handlePointer } = createFiberEvents(store);\n\n return {\n priority: 1,\n enabled: true,\n compute(event: DomEvent, state: RootState) {\n
|
|
1
|
+
{"version":3,"file":"main13.mjs","sources":["../../src/core/create-events.ts"],"sourcesContent":["import { Events, RenderProps, RootState, createEvents as createFiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\nimport { UseBoundStore } from \"zustand\";\n\ntype DomEvent = PointerEvent | MouseEvent | WheelEvent;\n\nconst DOM_EVENTS = {\n onClick: [\"click\", false],\n onContextMenu: [\"contextmenu\", false],\n onDoubleClick: [\"dblclick\", false],\n onWheel: [\"wheel\", true],\n onPointerDown: [\"pointerdown\", true],\n onPointerUp: [\"pointerup\", true],\n onPointerLeave: [\"pointerleave\", true],\n onPointerMove: [\"pointermove\", true],\n onPointerCancel: [\"pointercancel\", true],\n onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\nconst projByViewInv = new Matrix4()\n\n/** ThreeLayer event manager for MapLibre and Mapbox */\nexport function createEvents(): RenderProps<HTMLCanvasElement>[\"events\"] {\n return (store: UseBoundStore<RootState>) => {\n const { handlePointer } = createFiberEvents(store);\n\n return {\n priority: 1,\n enabled: true,\n compute(event: DomEvent, state: RootState) {\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) projByViewInv.fromArray(state.camera.userData.projByViewInv);\n\n state.raycaster.camera = state.camera;\n state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);\n state.raycaster.ray.direction\n .set(state.pointer.x, state.pointer.y, 1)\n .applyMatrix4(projByViewInv)\n .sub(state.raycaster.ray.origin)\n .normalize();\n },\n connected: undefined,\n handlers: Object.keys(DOM_EVENTS).reduce(\n (acc, key) => ({ ...acc, [key]: handlePointer(key) }),\n {}\n ) as unknown as Events,\n update: () => {\n const { events, internal } = store.getState();\n if (internal.lastEvent?.current && events.handlers) {\n events.handlers.onPointerMove(internal.lastEvent.current);\n }\n },\n connect: (target: HTMLElement) => {\n const { set, events } = store.getState();\n events.disconnect?.();\n set((state) => ({ events: { ...state.events, connected: target.parentNode } }));\n Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n target.addEventListener(eventName, event, { passive });\n });\n },\n disconnect: () => {\n const { set, events } = store.getState();\n if (events.connected) {\n Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n if (events && events.connected instanceof HTMLElement) {\n const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n events.connected.removeEventListener(eventName, event);\n }\n });\n set((state) => ({ events: { ...state.events, connected: undefined } }));\n }\n },\n };\n };\n}\n"],"names":["createFiberEvents"],"mappings":";;AAMA,MAAM,aAAa;AAAA,EACjB,SAAS,CAAC,SAAS,KAAK;AAAA,EACxB,eAAe,CAAC,eAAe,KAAK;AAAA,EACpC,eAAe,CAAC,YAAY,KAAK;AAAA,EACjC,SAAS,CAAC,SAAS,IAAI;AAAA,EACvB,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,aAAa,CAAC,aAAa,IAAI;AAAA,EAC/B,gBAAgB,CAAC,gBAAgB,IAAI;AAAA,EACrC,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,iBAAiB,CAAC,iBAAiB,IAAI;AAAA,EACvC,sBAAsB,CAAC,sBAAsB,IAAI;AACnD;AAEA,MAAM,gBAAgB,IAAI;AAGnB,SAAS,eAAyD;AACvE,SAAO,CAAC,UAAoC;AAC1C,UAAM,EAAE,cAAA,IAAkBA,eAAkB,KAAK;AAE1C,WAAA;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ,OAAiB,OAAkB;AAEzC,cAAM,QAAQ,IAAK,MAAM,UAAU,MAAM,KAAK,QAAS,IAAI;AAC3D,cAAM,QAAQ,IAAI,IAAK,MAAM,UAAU,MAAM,KAAK,SAAU;AAExD,YAAA,MAAM,OAAO,SAAS;AAAe,wBAAc,UAAU,MAAM,OAAO,SAAS,aAAa;AAE9F,cAAA,UAAU,SAAS,MAAM;AAC/B,cAAM,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAa,aAAa;AAC5D,cAAA,UAAU,IAAI,UACjB,IAAI,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,CAAC,EACvC,aAAa,aAAa,EAC1B,IAAI,MAAM,UAAU,IAAI,MAAM,EAC9B;MACL;AAAA,MACA,WAAW;AAAA,MACX,UAAU,OAAO,KAAK,UAAU,EAAE;AAAA,QAChC,CAAC,KAAK,SAAS,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG;QACjD,CAAC;AAAA,MACH;AAAA,MACA,QAAQ,MAAM;;AACZ,cAAM,EAAE,QAAQ,SAAS,IAAI,MAAM,SAAS;AAC5C,cAAI,cAAS,cAAT,mBAAoB,YAAW,OAAO,UAAU;AAClD,iBAAO,SAAS,cAAc,SAAS,UAAU,OAAO;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,SAAS,CAAC,WAAwB;;AAChC,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,qBAAO,eAAP;AACA,YAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAO,WAAW,EAAA,EAAI;AACvE,eAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC/D,gBAAM,CAAC,WAAW,OAAO,IAAI,WAAW,IAA+B;AACvE,iBAAO,iBAAiB,WAAW,OAAO,EAAE,QAAS,CAAA;AAAA,QAAA,CACtD;AAAA,MACH;AAAA,MACA,YAAY,MAAM;AAChB,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,YAAI,OAAO,WAAW;AACb,iBAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC3D,gBAAA,UAAU,OAAO,qBAAqB,aAAa;AACrD,oBAAM,CAAC,SAAS,IAAI,WAAW,IAA+B;AACvD,qBAAA,UAAU,oBAAoB,WAAW,KAAK;AAAA,YACvD;AAAA,UAAA,CACD;AACG,cAAA,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAU,EAAA,EAAI;AAAA,QACxE;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
package/dist/es/main4.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCoords } from "./main7.mjs";
|
|
2
|
-
import { useCreateRoot } from "./
|
|
3
|
-
import { useRender } from "./
|
|
2
|
+
import { useCreateRoot } from "./main9.mjs";
|
|
3
|
+
import { useRender } from "./main10.mjs";
|
|
4
4
|
function useCanvas({
|
|
5
5
|
longitude,
|
|
6
6
|
latitude,
|
package/dist/es/main7.mjs
CHANGED
package/dist/es/main8.mjs
CHANGED
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (!r3mRef.current.root)
|
|
16
|
-
return;
|
|
17
|
-
r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
|
|
18
|
-
}, [r3mRef, mounted, children]);
|
|
19
|
-
return { id, onAdd, onRemove, r3mRef };
|
|
20
|
-
};
|
|
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({ longitude, latitude, altitude, fromLngLat }) {
|
|
8
|
+
const center = fromLngLat([longitude, latitude], altitude);
|
|
9
|
+
const scaleUnit = center.meterInMercatorCoordinateUnits();
|
|
10
|
+
pos.set(center.x, center.y, center.z || 0);
|
|
11
|
+
scale.set(scaleUnit, -scaleUnit, scaleUnit);
|
|
12
|
+
quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
|
|
13
|
+
return m4.compose(pos, quat, scale).toArray();
|
|
14
|
+
}
|
|
21
15
|
export {
|
|
22
|
-
|
|
16
|
+
coordsToMatrix
|
|
23
17
|
};
|
|
24
18
|
//# sourceMappingURL=main8.mjs.map
|
package/dist/es/main8.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main8.mjs","sources":["../../src/core/
|
|
1
|
+
{"version":3,"file":"main8.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\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({ longitude, latitude, altitude, fromLngLat }: {\n longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\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":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,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/main9.mjs
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useId, useEffect } from "react";
|
|
3
|
+
import { useOnAdd } from "./main11.mjs";
|
|
4
|
+
const useCreateRoot = ({
|
|
5
|
+
children,
|
|
6
|
+
frameloop,
|
|
7
|
+
fromLngLat,
|
|
8
|
+
...renderProps
|
|
9
|
+
}) => {
|
|
10
|
+
const id = useId();
|
|
11
|
+
const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (!mounted)
|
|
7
14
|
return;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
advance(Date.now() * 1e-3, true);
|
|
15
|
-
if (frameloop === "always")
|
|
16
|
-
r3m.map.triggerRepaint();
|
|
17
|
-
});
|
|
18
|
-
return render;
|
|
19
|
-
}
|
|
15
|
+
if (!r3mRef.current.root)
|
|
16
|
+
return;
|
|
17
|
+
r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
|
|
18
|
+
}, [r3mRef, mounted, children]);
|
|
19
|
+
return { id, onAdd, onRemove, r3mRef };
|
|
20
|
+
};
|
|
20
21
|
export {
|
|
21
|
-
|
|
22
|
+
useCreateRoot
|
|
22
23
|
};
|
|
23
24
|
//# sourceMappingURL=main9.mjs.map
|
package/dist/es/main9.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main9.mjs","sources":["../../src/core/use-
|
|
1
|
+
{"version":3,"file":"main9.mjs","sources":["../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n frameloop: 'always' | 'demand',\n fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n const id = useId();\n\n const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n useEffect(() => {\n if (!mounted) return;\n if (!r3mRef.current.root) return;\n r3mRef.current.root.render(<>\n {children}\n </>);\n }, [r3mRef, mounted, children])\n\n return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
|
|
@@ -65,8 +65,6 @@ function createEvents() {
|
|
|
65
65
|
priority: 1,
|
|
66
66
|
enabled: true,
|
|
67
67
|
compute(event, state) {
|
|
68
|
-
state.size.width = state.gl.domElement.width / window.devicePixelRatio;
|
|
69
|
-
state.size.height = state.gl.domElement.height / window.devicePixelRatio;
|
|
70
68
|
state.pointer.x = event.offsetX / state.size.width * 2 - 1;
|
|
71
69
|
state.pointer.y = 1 - event.offsetY / state.size.height * 2;
|
|
72
70
|
if (state.camera.userData.projByViewInv)
|
|
@@ -166,13 +164,25 @@ function useOnAdd(fromLngLat2, { frameloop, ...renderProps }) {
|
|
|
166
164
|
}
|
|
167
165
|
});
|
|
168
166
|
}
|
|
167
|
+
map.on("resize", onResize);
|
|
169
168
|
setTimeout(() => setMounted(true));
|
|
170
169
|
});
|
|
170
|
+
const onResize = useFunction(() => {
|
|
171
|
+
if (!r3mRef.current.map)
|
|
172
|
+
return;
|
|
173
|
+
if (!r3mRef.current.state)
|
|
174
|
+
return;
|
|
175
|
+
const canvas = r3mRef.current.map.getCanvas();
|
|
176
|
+
r3mRef.current.state.setSize(canvas.width, canvas.height);
|
|
177
|
+
});
|
|
171
178
|
const onRemove = useFunction(() => {
|
|
172
179
|
if (!r3mRef.current.root)
|
|
173
180
|
return;
|
|
174
181
|
r3mRef.current.root.unmount();
|
|
175
182
|
r3mRef.current.root = void 0;
|
|
183
|
+
if (!r3mRef.current.map)
|
|
184
|
+
return;
|
|
185
|
+
r3mRef.current.map.off("resize", onResize);
|
|
176
186
|
});
|
|
177
187
|
react.useEffect(() => () => onRemove(), [onRemove]);
|
|
178
188
|
return { onAdd, onRemove, mounted, r3mRef };
|
|
@@ -1,23 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
advance(Date.now() * 1e-3, true);
|
|
15
|
-
if (frameloop === "always")
|
|
16
|
-
r3m.map.triggerRepaint();
|
|
17
|
-
});
|
|
18
|
-
return render;
|
|
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({ longitude, latitude, altitude, fromLngLat }) {
|
|
8
|
+
const center = fromLngLat([longitude, latitude], altitude);
|
|
9
|
+
const scaleUnit = center.meterInMercatorCoordinateUnits();
|
|
10
|
+
pos.set(center.x, center.y, center.z || 0);
|
|
11
|
+
scale.set(scaleUnit, -scaleUnit, scaleUnit);
|
|
12
|
+
quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
|
|
13
|
+
return m4.compose(pos, quat, scale).toArray();
|
|
19
14
|
}
|
|
20
15
|
export {
|
|
21
|
-
|
|
16
|
+
coordsToMatrix
|
|
22
17
|
};
|
|
23
18
|
//# sourceMappingURL=main10.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main10.mjs","sources":["../../../src/core/
|
|
1
|
+
{"version":3,"file":"main10.mjs","sources":["../../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\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({ longitude, latitude, altitude, fromLngLat }: {\n longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\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":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,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;"}
|
|
@@ -49,13 +49,25 @@ function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
|
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
51
|
}
|
|
52
|
+
map.on("resize", onResize);
|
|
52
53
|
setTimeout(() => setMounted(true));
|
|
53
54
|
});
|
|
55
|
+
const onResize = useFunction(() => {
|
|
56
|
+
if (!r3mRef.current.map)
|
|
57
|
+
return;
|
|
58
|
+
if (!r3mRef.current.state)
|
|
59
|
+
return;
|
|
60
|
+
const canvas = r3mRef.current.map.getCanvas();
|
|
61
|
+
r3mRef.current.state.setSize(canvas.width, canvas.height);
|
|
62
|
+
});
|
|
54
63
|
const onRemove = useFunction(() => {
|
|
55
64
|
if (!r3mRef.current.root)
|
|
56
65
|
return;
|
|
57
66
|
r3mRef.current.root.unmount();
|
|
58
67
|
r3mRef.current.root = void 0;
|
|
68
|
+
if (!r3mRef.current.map)
|
|
69
|
+
return;
|
|
70
|
+
r3mRef.current.map.off("resize", onResize);
|
|
59
71
|
});
|
|
60
72
|
useEffect(() => () => onRemove(), [onRemove]);
|
|
61
73
|
return { onAdd, onRemove, mounted, r3mRef };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main11.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;
|
|
1
|
+
{"version":3,"file":"main11.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n map.on('resize', onResize)\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onResize = useFunction(() => {\n if (!r3mRef.current.map) return;\n if (!r3mRef.current.state) return;\n const canvas = r3mRef.current.map.getCanvas();\n r3mRef.current.state.setSize(canvas.width, canvas.height);\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n if (!r3mRef.current.map) return;\n r3mRef.current.map.off('resize', onResize)\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAK;AACrB,QAAA,CAAC,OAAO,QAAQ;AAAO;AAC3B,UAAM,SAAS,OAAO,QAAQ,IAAI,UAAU;AAC5C,WAAO,QAAQ,MAAM,QAAQ,OAAO,OAAO,OAAO,MAAM;AAAA,EAAA,CACzD;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
|
|
@@ -20,8 +20,6 @@ function createEvents() {
|
|
|
20
20
|
priority: 1,
|
|
21
21
|
enabled: true,
|
|
22
22
|
compute(event, state) {
|
|
23
|
-
state.size.width = state.gl.domElement.width / window.devicePixelRatio;
|
|
24
|
-
state.size.height = state.gl.domElement.height / window.devicePixelRatio;
|
|
25
23
|
state.pointer.x = event.offsetX / state.size.width * 2 - 1;
|
|
26
24
|
state.pointer.y = 1 - event.offsetY / state.size.height * 2;
|
|
27
25
|
if (state.camera.userData.projByViewInv)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main13.mjs","sources":["../../../src/core/create-events.ts"],"sourcesContent":["import { Events, RenderProps, RootState, createEvents as createFiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\nimport { UseBoundStore } from \"zustand\";\n\ntype DomEvent = PointerEvent | MouseEvent | WheelEvent;\n\nconst DOM_EVENTS = {\n onClick: [\"click\", false],\n onContextMenu: [\"contextmenu\", false],\n onDoubleClick: [\"dblclick\", false],\n onWheel: [\"wheel\", true],\n onPointerDown: [\"pointerdown\", true],\n onPointerUp: [\"pointerup\", true],\n onPointerLeave: [\"pointerleave\", true],\n onPointerMove: [\"pointermove\", true],\n onPointerCancel: [\"pointercancel\", true],\n onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\nconst projByViewInv = new Matrix4()\n\n/** ThreeLayer event manager for MapLibre and Mapbox */\nexport function createEvents(): RenderProps<HTMLCanvasElement>[\"events\"] {\n return (store: UseBoundStore<RootState>) => {\n const { handlePointer } = createFiberEvents(store);\n\n return {\n priority: 1,\n enabled: true,\n compute(event: DomEvent, state: RootState) {\n
|
|
1
|
+
{"version":3,"file":"main13.mjs","sources":["../../../src/core/create-events.ts"],"sourcesContent":["import { Events, RenderProps, RootState, createEvents as createFiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\nimport { UseBoundStore } from \"zustand\";\n\ntype DomEvent = PointerEvent | MouseEvent | WheelEvent;\n\nconst DOM_EVENTS = {\n onClick: [\"click\", false],\n onContextMenu: [\"contextmenu\", false],\n onDoubleClick: [\"dblclick\", false],\n onWheel: [\"wheel\", true],\n onPointerDown: [\"pointerdown\", true],\n onPointerUp: [\"pointerup\", true],\n onPointerLeave: [\"pointerleave\", true],\n onPointerMove: [\"pointermove\", true],\n onPointerCancel: [\"pointercancel\", true],\n onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\nconst projByViewInv = new Matrix4()\n\n/** ThreeLayer event manager for MapLibre and Mapbox */\nexport function createEvents(): RenderProps<HTMLCanvasElement>[\"events\"] {\n return (store: UseBoundStore<RootState>) => {\n const { handlePointer } = createFiberEvents(store);\n\n return {\n priority: 1,\n enabled: true,\n compute(event: DomEvent, state: RootState) {\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) projByViewInv.fromArray(state.camera.userData.projByViewInv);\n\n state.raycaster.camera = state.camera;\n state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);\n state.raycaster.ray.direction\n .set(state.pointer.x, state.pointer.y, 1)\n .applyMatrix4(projByViewInv)\n .sub(state.raycaster.ray.origin)\n .normalize();\n },\n connected: undefined,\n handlers: Object.keys(DOM_EVENTS).reduce(\n (acc, key) => ({ ...acc, [key]: handlePointer(key) }),\n {}\n ) as unknown as Events,\n update: () => {\n const { events, internal } = store.getState();\n if (internal.lastEvent?.current && events.handlers) {\n events.handlers.onPointerMove(internal.lastEvent.current);\n }\n },\n connect: (target: HTMLElement) => {\n const { set, events } = store.getState();\n events.disconnect?.();\n set((state) => ({ events: { ...state.events, connected: target.parentNode } }));\n Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n target.addEventListener(eventName, event, { passive });\n });\n },\n disconnect: () => {\n const { set, events } = store.getState();\n if (events.connected) {\n Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n if (events && events.connected instanceof HTMLElement) {\n const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n events.connected.removeEventListener(eventName, event);\n }\n });\n set((state) => ({ events: { ...state.events, connected: undefined } }));\n }\n },\n };\n };\n}\n"],"names":["createFiberEvents"],"mappings":";;AAMA,MAAM,aAAa;AAAA,EACjB,SAAS,CAAC,SAAS,KAAK;AAAA,EACxB,eAAe,CAAC,eAAe,KAAK;AAAA,EACpC,eAAe,CAAC,YAAY,KAAK;AAAA,EACjC,SAAS,CAAC,SAAS,IAAI;AAAA,EACvB,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,aAAa,CAAC,aAAa,IAAI;AAAA,EAC/B,gBAAgB,CAAC,gBAAgB,IAAI;AAAA,EACrC,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,iBAAiB,CAAC,iBAAiB,IAAI;AAAA,EACvC,sBAAsB,CAAC,sBAAsB,IAAI;AACnD;AAEA,MAAM,gBAAgB,IAAI;AAGnB,SAAS,eAAyD;AACvE,SAAO,CAAC,UAAoC;AAC1C,UAAM,EAAE,cAAA,IAAkBA,eAAkB,KAAK;AAE1C,WAAA;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ,OAAiB,OAAkB;AAEzC,cAAM,QAAQ,IAAK,MAAM,UAAU,MAAM,KAAK,QAAS,IAAI;AAC3D,cAAM,QAAQ,IAAI,IAAK,MAAM,UAAU,MAAM,KAAK,SAAU;AAExD,YAAA,MAAM,OAAO,SAAS;AAAe,wBAAc,UAAU,MAAM,OAAO,SAAS,aAAa;AAE9F,cAAA,UAAU,SAAS,MAAM;AAC/B,cAAM,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAa,aAAa;AAC5D,cAAA,UAAU,IAAI,UACjB,IAAI,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,CAAC,EACvC,aAAa,aAAa,EAC1B,IAAI,MAAM,UAAU,IAAI,MAAM,EAC9B;MACL;AAAA,MACA,WAAW;AAAA,MACX,UAAU,OAAO,KAAK,UAAU,EAAE;AAAA,QAChC,CAAC,KAAK,SAAS,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG;QACjD,CAAC;AAAA,MACH;AAAA,MACA,QAAQ,MAAM;;AACZ,cAAM,EAAE,QAAQ,SAAS,IAAI,MAAM,SAAS;AAC5C,cAAI,cAAS,cAAT,mBAAoB,YAAW,OAAO,UAAU;AAClD,iBAAO,SAAS,cAAc,SAAS,UAAU,OAAO;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,SAAS,CAAC,WAAwB;;AAChC,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,qBAAO,eAAP;AACA,YAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAO,WAAW,EAAA,EAAI;AACvE,eAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC/D,gBAAM,CAAC,WAAW,OAAO,IAAI,WAAW,IAA+B;AACvE,iBAAO,iBAAiB,WAAW,OAAO,EAAE,QAAS,CAAA;AAAA,QAAA,CACtD;AAAA,MACH;AAAA,MACA,YAAY,MAAM;AAChB,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,YAAI,OAAO,WAAW;AACb,iBAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC3D,gBAAA,UAAU,OAAO,qBAAqB,aAAa;AACrD,oBAAM,CAAC,SAAS,IAAI,WAAW,IAA+B;AACvD,qBAAA,UAAU,oBAAoB,WAAW,KAAK;AAAA,YACvD;AAAA,UAAA,CACD;AACG,cAAA,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAU,EAAA,EAAI;AAAA,QACxE;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCoords } from "./main7.mjs";
|
|
2
|
-
import { useCreateRoot } from "./
|
|
3
|
-
import { useRender } from "./
|
|
2
|
+
import { useCreateRoot } from "./main8.mjs";
|
|
3
|
+
import { useRender } from "./main9.mjs";
|
|
4
4
|
function useCanvas({
|
|
5
5
|
longitude,
|
|
6
6
|
latitude,
|
|
@@ -1,18 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useId, useEffect } from "react";
|
|
3
|
+
import { useOnAdd } from "./main11.mjs";
|
|
4
|
+
const useCreateRoot = ({
|
|
5
|
+
children,
|
|
6
|
+
frameloop,
|
|
7
|
+
fromLngLat,
|
|
8
|
+
...renderProps
|
|
9
|
+
}) => {
|
|
10
|
+
const id = useId();
|
|
11
|
+
const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (!mounted)
|
|
14
|
+
return;
|
|
15
|
+
if (!r3mRef.current.root)
|
|
16
|
+
return;
|
|
17
|
+
r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
|
|
18
|
+
}, [r3mRef, mounted, children]);
|
|
19
|
+
return { id, onAdd, onRemove, r3mRef };
|
|
20
|
+
};
|
|
15
21
|
export {
|
|
16
|
-
|
|
22
|
+
useCreateRoot
|
|
17
23
|
};
|
|
18
24
|
//# sourceMappingURL=main8.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main8.mjs","sources":["../../../src/core/
|
|
1
|
+
{"version":3,"file":"main8.mjs","sources":["../../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n frameloop: 'always' | 'demand',\n fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n const id = useId();\n\n const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n useEffect(() => {\n if (!mounted) return;\n if (!r3mRef.current.root) return;\n r3mRef.current.root.render(<>\n {children}\n </>);\n }, [r3mRef, mounted, children])\n\n return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
|
|
@@ -1,24 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
fromLngLat,
|
|
8
|
-
...renderProps
|
|
9
|
-
}) => {
|
|
10
|
-
const id = useId();
|
|
11
|
-
const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
if (!mounted)
|
|
1
|
+
import { syncCamera } from "./main6.mjs";
|
|
2
|
+
import { useFunction } from "./main12.mjs";
|
|
3
|
+
function useRender(origin, r3mRef, frameloop) {
|
|
4
|
+
const render = useFunction((_gl, mapCamMx) => {
|
|
5
|
+
const r3m = r3mRef.current;
|
|
6
|
+
if (!r3m.state || !r3m.map)
|
|
14
7
|
return;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
8
|
+
const camera = r3m.state.camera;
|
|
9
|
+
const gl = r3m.state.gl;
|
|
10
|
+
const advance = r3m.state.advance;
|
|
11
|
+
r3m.mapCamMx = mapCamMx;
|
|
12
|
+
syncCamera(camera, origin, mapCamMx);
|
|
13
|
+
gl.resetState();
|
|
14
|
+
advance(Date.now() * 1e-3, true);
|
|
15
|
+
if (frameloop === "always")
|
|
16
|
+
r3m.map.triggerRepaint();
|
|
17
|
+
});
|
|
18
|
+
return render;
|
|
19
|
+
}
|
|
21
20
|
export {
|
|
22
|
-
|
|
21
|
+
useRender
|
|
23
22
|
};
|
|
24
23
|
//# sourceMappingURL=main9.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-
|
|
1
|
+
{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n const r3m = r3mRef.current;\n if (!r3m.state || !r3m.map) return;\n const camera = r3m.state.camera;\n const gl = r3m.state.gl;\n const advance = r3m.state.advance;\n r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (frameloop === 'always') r3m.map.triggerRepaint();\n })\n\n return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AACtB,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
|
package/package.json
CHANGED
package/dist/cjs/favicon.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
package/dist/cjs/web-ifc.wasm
DELETED
|
Binary file
|
package/dist/es/favicon.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
package/dist/es/web-ifc.wasm
DELETED
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#83af9b"></stop><stop offset="100%" stop-color="#fe4365"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path></svg>
|
|
Binary file
|