react-three-map 0.4.3 → 0.5.0

package/dist/es/main4.mjs

@@ -1,25 +1,56 @@
-import { useCoords } from "./main7.mjs";
-import { useCreateRoot } from "./main9.mjs";
-import { useRender } from "./main10.mjs";
-function useCanvas({
-  longitude,
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { createPortal, useThree, useFrame } from "@react-three/fiber";
+import { memo, useState, useRef, useLayoutEffect } from "react";
+import { Scene } from "three";
+import { useR3M } from "./main6.mjs";
+import { syncCamera } from "./main7.mjs";
+import { useCoords } from "./main8.mjs";
+const Coordinates = memo(({
   latitude,
+  longitude,
   altitude = 0,
-  frameloop = "always",
-  fromLngLat,
-  ...renderProps
-}) {
-  const m4 = useCoords({
+  children
+}) => {
+  const [scene] = useState(() => new Scene());
+  const r3m = useR3M();
+  const origin = useCoords({
     latitude,
     longitude,
     altitude,
-    fromLngLat
+    fromLngLat: r3m.fromLngLat
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RenderAtCoords, { r3m, origin }),
+    children
+  ] }), scene, { events: { priority: 2 } }) });
+});
+Coordinates.displayName = "Coordinates";
+function RenderAtCoords({ r3m, origin }) {
+  const { gl, scene, set } = useThree();
+  const cameraRef = useRef(null);
+  useFrame(() => {
+    if (!r3m.mapCamMx)
+      return;
+    if (!cameraRef.current)
+      return;
+    syncCamera(cameraRef.current, origin, r3m.mapCamMx);
+    gl.render(scene, cameraRef.current);
   });
-  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });
-  const render = useRender(m4, r3mRef, frameloop);
-  return { id, onAdd, onRemove, render };
+  useLayoutEffect(() => {
+    if (!cameraRef.current)
+      return;
+    set({
+      invalidate: () => {
+        if (!r3m.map)
+          return;
+        r3m.map.triggerRepaint();
+      },
+      camera: cameraRef.current
+    });
+  }, [set, r3m]);
+  return /* @__PURE__ */ jsx("perspectiveCamera", { ref: cameraRef });
 }
 export {
-  useCanvas
+  Coordinates
 };
 //# sourceMappingURL=main4.mjs.map

package/dist/es/main4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main4.mjs","sources":["../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends CanvasProps {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main4.mjs","sources":["../../src/api/coordinates.tsx"],"sourcesContent":["import { createPortal, useFrame, useThree } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useLayoutEffect, useRef, useState } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera, Scene } from \"three\";\nimport { R3mStore, useR3M } from \"../core/store\";\nimport { syncCamera } from \"../core/sync-camera\";\nimport { useCoords } from \"../core/use-coords\";\n\nexport interface CoordinatesProps extends PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number,\n}\n\nexport const Coordinates = memo<CoordinatesProps>(({\n  latitude, longitude, altitude = 0, children\n}) => {\n\n  const [scene] = useState(() => new Scene())\n\n  const r3m = useR3M();\n\n  const origin = useCoords({\n    latitude, longitude, altitude, fromLngLat: r3m.fromLngLat,\n  });\n\n\n  return <>{createPortal(<>\n    <RenderAtCoords r3m={r3m} origin={origin} />\n    {children}\n  </>, scene, { events: { priority: 2 } })}</>\n})\n\nCoordinates.displayName = 'Coordinates';\n\ninterface RenderAtCoordsProps {\n  r3m: R3mStore,\n  origin: Matrix4Tuple\n}\n\nfunction RenderAtCoords({ r3m, origin }: RenderAtCoordsProps) {\n\n  const { gl, scene, set } = useThree()\n\n  const cameraRef = useRef<PerspectiveCamera>(null)\n\n  useFrame(() => {\n    if (!r3m.mapCamMx) return;\n    if (!cameraRef.current) return;\n    syncCamera(cameraRef.current, origin, r3m.mapCamMx);\n    gl.render(scene, cameraRef.current);\n  })\n\n  useLayoutEffect(() => {\n    if (!cameraRef.current) return;\n    set({\n      invalidate: () => {\n        if (!r3m.map) return;\n        r3m.map.triggerRepaint();\n      },\n      camera: cameraRef.current,\n    });\n  }, [set, r3m])\n\n  return <perspectiveCamera ref={cameraRef} />\n}"],"names":[],"mappings":";;;;;;;AAaa,MAAA,cAAc,KAAuB,CAAC;AAAA,EACjD;AAAA,EAAU;AAAA,EAAW,WAAW;AAAA,EAAG;AACrC,MAAM;AAEJ,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM,IAAI,MAAO,CAAA;AAE1C,QAAM,MAAM;AAEZ,QAAM,SAAS,UAAU;AAAA,IACvB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU,YAAY,IAAI;AAAA,EAAA,CAChD;AAGM,SAAA,oBAAA,UAAA,EAAG,uBACR,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,gBAAA,EAAe,KAAU,OAAgB,CAAA;AAAA,IACzC;AAAA,EAAA,GACH,GAAK,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAA,GAAK,EAAE,CAAA;AAC3C,CAAC;AAED,YAAY,cAAc;AAO1B,SAAS,eAAe,EAAE,KAAK,UAA+B;AAE5D,QAAM,EAAE,IAAI,OAAO,QAAQ,SAAS;AAE9B,QAAA,YAAY,OAA0B,IAAI;AAEhD,WAAS,MAAM;AACb,QAAI,CAAC,IAAI;AAAU;AACnB,QAAI,CAAC,UAAU;AAAS;AACxB,eAAW,UAAU,SAAS,QAAQ,IAAI,QAAQ;AAC/C,OAAA,OAAO,OAAO,UAAU,OAAO;AAAA,EAAA,CACnC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,UAAU;AAAS;AACpB,QAAA;AAAA,MACF,YAAY,MAAM;AAChB,YAAI,CAAC,IAAI;AAAK;AACd,YAAI,IAAI;MACV;AAAA,MACA,QAAQ,UAAU;AAAA,IAAA,CACnB;AAAA,EAAA,GACA,CAAC,KAAK,GAAG,CAAC;AAEN,SAAA,oBAAC,qBAAkB,EAAA,KAAK,UAAW,CAAA;AAC5C;"}

package/dist/es/main5.mjs

@@ -1,6 +1,25 @@
-import { useThree } from "@react-three/fiber";
-const useR3M = () => useThree((s) => s.r3m);
+import { useCoords } from "./main8.mjs";
+import { useCreateRoot } from "./main9.mjs";
+import { useRender } from "./main10.mjs";
+function useCanvas({
+  longitude,
+  latitude,
+  altitude = 0,
+  frameloop = "always",
+  fromLngLat,
+  ...renderProps
+}) {
+  const m4 = useCoords({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
+  });
+  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });
+  const render = useRender(m4, r3mRef, frameloop);
+  return { id, onAdd, onRemove, render };
+}
 export {
-  useR3M
+  useCanvas
 };
 //# sourceMappingURL=main5.mjs.map

package/dist/es/main5.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main5.mjs","sources":["../../src/core/store.ts"],"sourcesContent":["import { ReconcilerRoot, RootState, useThree } from \"@react-three/fiber\";\nimport { Matrix4Tuple } from \"three\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\n/** react-three-map store */\nexport interface R3mStore {\n  fromLngLat: FromLngLat,\n  map?: MapInstance;\n  mapCamMx?: Matrix4Tuple;\n  state?: RootState\n  root?: ReconcilerRoot<HTMLCanvasElement>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const useR3M = (): R3mStore => useThree((s: any) => s.r3m);"],"names":[],"mappings":";AAcO,MAAM,SAAS,MAAgB,SAAS,CAAC,MAAW,EAAE,GAAG;"}
+{"version":3,"file":"main5.mjs","sources":["../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends CanvasProps {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}

package/dist/es/main6.mjs

@@ -1,37 +1,6 @@
-import { Matrix4, Vector3 } from "three";
-const originMx = new Matrix4();
-const projByView = new Matrix4();
-const projByViewInv = new Matrix4();
-const fwd = new Vector3();
-function syncCamera(camera, origin, mapCamMx) {
-  projByView.fromArray(mapCamMx).multiply(originMx.fromArray(origin));
-  projByViewInv.copy(projByView).invert();
-  updateCamera(camera, projByViewInv);
-  camera.updateMatrix();
-  camera.updateMatrixWorld(true);
-  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);
-  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
-  camera.far = calculateFar(
-    camera.matrix.elements[10],
-    camera.matrix.elements[14],
-    camera.near
-  );
-  camera.userData.projByView = projByView.toArray();
-  camera.userData.projByViewInv = projByViewInv.toArray();
-}
-const updateCamera = (target, projByViewInv2) => {
-  target.position.setScalar(0).applyMatrix4(projByViewInv2);
-  target.up.set(0, -1, 0).applyMatrix4(projByViewInv2).negate().add(target.position).normalize();
-  fwd.set(0, 0, 1).applyMatrix4(projByViewInv2);
-  target.lookAt(fwd);
-};
-function calculateFar(c, d, near) {
-  const numerator = d * (c - 1);
-  const denominator = c * near + near;
-  const far = numerator / denominator;
-  return far;
-}
+import { useThree } from "@react-three/fiber";
+const useR3M = () => useThree((s) => s.r3m);
 export {
-  syncCamera
+  useR3M
 };
 //# sourceMappingURL=main6.mjs.map

package/dist/es/main6.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main6.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;"}
+{"version":3,"file":"main6.mjs","sources":["../../src/core/store.ts"],"sourcesContent":["import { ReconcilerRoot, RootState, useThree } from \"@react-three/fiber\";\nimport { Matrix4Tuple } from \"three\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\n/** react-three-map store */\nexport interface R3mStore {\n  fromLngLat: FromLngLat,\n  map?: MapInstance;\n  mapCamMx?: Matrix4Tuple;\n  state?: RootState\n  root?: ReconcilerRoot<HTMLCanvasElement>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const useR3M = (): R3mStore => useThree((s: any) => s.r3m);"],"names":[],"mappings":";AAcO,MAAM,SAAS,MAAgB,SAAS,CAAC,MAAW,EAAE,GAAG;"}

package/dist/es/main7.mjs

@@ -1,15 +1,37 @@
-import { useMemo } from "react";
-import { coordsToMatrix } from "./main8.mjs";
-function useCoords({ latitude, longitude, altitude, fromLngLat }) {
-  const m4 = useMemo(() => coordsToMatrix({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat
-  }), [latitude, longitude, altitude, fromLngLat]);
-  return m4;
+import { Matrix4, Vector3 } from "three";
+const originMx = new Matrix4();
+const projByView = new Matrix4();
+const projByViewInv = new Matrix4();
+const fwd = new Vector3();
+function syncCamera(camera, origin, mapCamMx) {
+  projByView.fromArray(mapCamMx).multiply(originMx.fromArray(origin));
+  projByViewInv.copy(projByView).invert();
+  updateCamera(camera, projByViewInv);
+  camera.updateMatrix();
+  camera.updateMatrixWorld(true);
+  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);
+  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+  camera.far = calculateFar(
+    camera.matrix.elements[10],
+    camera.matrix.elements[14],
+    camera.near
+  );
+  camera.userData.projByView = projByView.toArray();
+  camera.userData.projByViewInv = projByViewInv.toArray();
+}
+const updateCamera = (target, projByViewInv2) => {
+  target.position.setScalar(0).applyMatrix4(projByViewInv2);
+  target.up.set(0, -1, 0).applyMatrix4(projByViewInv2).negate().add(target.position).normalize();
+  fwd.set(0, 0, 1).applyMatrix4(projByViewInv2);
+  target.lookAt(fwd);
+};
+function calculateFar(c, d, near) {
+  const numerator = d * (c - 1);
+  const denominator = c * near + near;
+  const far = numerator / denominator;
+  return far;
 }
 export {
-  useCoords
+  syncCamera
 };
 //# sourceMappingURL=main7.mjs.map

package/dist/es/main7.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main7.mjs","sources":["../../src/core/use-coords.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 useCoords({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,UAAU,EAAC,UAAU,WAAW,UAAU,cAAoB;AACtE,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;"}
+{"version":3,"file":"main7.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/main8.mjs

@@ -1,18 +1,15 @@
-import { Quaternion, Euler, Vector3, Matrix4 } from "three";
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }) {
-  const center = fromLngLat([longitude, latitude], altitude);
-  const scaleUnit = center.meterInMercatorCoordinateUnits();
-  pos.set(center.x, center.y, center.z || 0);
-  scale.set(scaleUnit, -scaleUnit, scaleUnit);
-  quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
+import { useMemo } from "react";
+import { coordsToMatrix } from "./main11.mjs";
+function useCoords({ latitude, longitude, altitude, fromLngLat }) {
+  const m4 = useMemo(() => coordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
+  }), [latitude, longitude, altitude, fromLngLat]);
+  return m4;
 }
 export {
-  coordsToMatrix
+  useCoords
 };
 //# sourceMappingURL=main8.mjs.map

package/dist/es/main8.mjs.map

@@ -1 +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;"}
+{"version":3,"file":"main8.mjs","sources":["../../src/core/use-coords.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 useCoords({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,UAAU,EAAC,UAAU,WAAW,UAAU,cAAoB;AACtE,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/main9.mjs

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useId, useEffect } from "react";
-import { useOnAdd } from "./main11.mjs";
+import { useOnAdd } from "./main12.mjs";
 const useCreateRoot = ({
   children,
   frameloop,

package/dist/maplibre/cjs/main.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
 const fiber = require("@react-three/fiber");
+const jsxRuntime = require("react/jsx-runtime");
 const maplibreGl = require("maplibre-gl");
 const react = require("react");
 const maplibre = require("react-map-gl/maplibre");
@@ -23,6 +23,10 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
+const useMap$1 = () => fiber.useThree((s) => {
+  var _a;
+  return (_a = s.r3m) == null ? void 0 : _a.map;
+});
 const quat = new THREE.Quaternion();
 const euler = new THREE.Euler();
 const pos = new THREE.Vector3();
@@ -333,5 +337,7 @@ function RenderAtCoords({ r3m, origin }) {
   }, [set, r3m]);
   return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
 }
+const useMap = useMap$1;
 exports.Canvas = Canvas;
 exports.Coordinates = Coordinates;
+exports.useMap = useMap;

package/dist/maplibre/es/main.mjs

@@ -1,7 +1,10 @@
-import { Canvas } from "./main2.mjs";
-import { Coordinates } from "./main3.mjs";
+import { useMap as useMap$1 } from "./main2.mjs";
+import { Canvas } from "./main3.mjs";
+import { Coordinates } from "./main4.mjs";
+const useMap = useMap$1;
 export {
   Canvas,
-  Coordinates
+  Coordinates,
+  useMap
 };
 //# sourceMappingURL=main.mjs.map

package/dist/maplibre/es/main.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"main.mjs","sources":["../../../src/maplibre.index.ts"],"sourcesContent":["import { MapInstance } from 'react-map-gl/maplibre';\nimport { useMap as useMapGeneric } from './api/use-map';\n\nexport * from './maplibre/canvas';\nexport * from './api/canvas-props';\nexport * from './api/coordinates';\n\nexport const useMap = useMapGeneric<MapInstance>;"],"names":["useMapGeneric"],"mappings":";;;AAOO,MAAM,SAASA;"}

package/dist/maplibre/es/main10.mjs

@@ -1,18 +1,24 @@
-import { Quaternion, Euler, Vector3, Matrix4 } from "three";
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }) {
-  const center = fromLngLat([longitude, latitude], altitude);
-  const scaleUnit = center.meterInMercatorCoordinateUnits();
-  pos.set(center.x, center.y, center.z || 0);
-  scale.set(scaleUnit, -scaleUnit, scaleUnit);
-  quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
-}
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useId, useEffect } from "react";
+import { useOnAdd } from "./main12.mjs";
+const useCreateRoot = ({
+  children,
+  frameloop,
+  fromLngLat,
+  ...renderProps
+}) => {
+  const id = useId();
+  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
+  useEffect(() => {
+    if (!mounted)
+      return;
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
+  }, [r3mRef, mounted, children]);
+  return { id, onAdd, onRemove, r3mRef };
+};
 export {
-  coordsToMatrix
+  useCreateRoot
 };
 //# sourceMappingURL=main10.mjs.map

package/dist/maplibre/es/main10.mjs.map

@@ -1 +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;"}
+{"version":3,"file":"main10.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;"}

package/dist/maplibre/es/main11.mjs

@@ -1,78 +1,23 @@
-import { createRoot, _roots } from "@react-three/fiber";
-import { useState, useRef, useEffect } from "react";
-import { createEvents } from "./main13.mjs";
-import { useFunction } from "./main12.mjs";
-function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
-  const [mounted, setMounted] = useState(false);
-  const r3mRef = useRef({ fromLngLat });
-  const onAdd = useFunction((map, gl) => {
-    const canvas = map.getCanvas();
-    const root = createRoot(canvas);
-    root.configure({
-      dpr: window.devicePixelRatio,
-      events: createEvents(),
-      ...renderProps,
-      frameloop: "never",
-      gl: {
-        context: gl,
-        depth: true,
-        autoClear: false,
-        antialias: true,
-        ...renderProps == null ? void 0 : renderProps.gl
-      },
-      onCreated: (state) => {
-        state.gl.forceContextLoss = () => {
-        };
-      },
-      camera: {
-        matrixAutoUpdate: false,
-        near: 0
-      },
-      size: {
-        width: canvas.clientWidth,
-        height: canvas.clientHeight,
-        top: 0,
-        left: 0,
-        ...renderProps == null ? void 0 : renderProps.size
-      }
-    });
-    const store = _roots.get(canvas).store;
-    r3mRef.current.map = map;
-    r3mRef.current.root = root;
-    r3mRef.current.state = store.getState();
-    store.setState({ r3m: r3mRef.current });
-    if (frameloop === "demand") {
-      store.setState({
-        frameloop,
-        invalidate: () => {
-          map.triggerRepaint();
-        }
-      });
-    }
-    map.on("resize", onResize);
-    setTimeout(() => setMounted(true));
-  });
-  const onResize = useFunction(() => {
-    if (!r3mRef.current.map)
-      return;
-    if (!r3mRef.current.state)
-      return;
-    const canvas = r3mRef.current.map.getCanvas();
-    r3mRef.current.state.setSize(canvas.width, canvas.height);
-  });
-  const onRemove = useFunction(() => {
-    if (!r3mRef.current.root)
-      return;
-    r3mRef.current.root.unmount();
-    r3mRef.current.root = void 0;
-    if (!r3mRef.current.map)
+import { syncCamera } from "./main7.mjs";
+import { useFunction } from "./main13.mjs";
+function useRender(origin, r3mRef, frameloop) {
+  const render = useFunction((_gl, mapCamMx) => {
+    const r3m = r3mRef.current;
+    if (!r3m.state || !r3m.map)
       return;
-    r3mRef.current.map.off("resize", onResize);
+    const camera = r3m.state.camera;
+    const gl = r3m.state.gl;
+    const advance = r3m.state.advance;
+    r3m.mapCamMx = mapCamMx;
+    syncCamera(camera, origin, mapCamMx);
+    gl.resetState();
+    advance(Date.now() * 1e-3, true);
+    if (frameloop === "always")
+      r3m.map.triggerRepaint();
   });
-  useEffect(() => () => onRemove(), [onRemove]);
-  return { onAdd, onRemove, mounted, r3mRef };
+  return render;
 }
 export {
-  useOnAdd
+  useRender
 };
 //# sourceMappingURL=main11.mjs.map

package/dist/maplibre/es/main11.mjs.map

@@ -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    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;"}
+{"version":3,"file":"main11.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/maplibre/es/main12.mjs

@@ -1,12 +1,78 @@
-import { useRef, useCallback } from "react";
-const useFunction = (callback) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-};
+import { createRoot, _roots } from "@react-three/fiber";
+import { useState, useRef, useEffect } from "react";
+import { createEvents } from "./main14.mjs";
+import { useFunction } from "./main13.mjs";
+function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
+  const [mounted, setMounted] = useState(false);
+  const r3mRef = useRef({ fromLngLat });
+  const onAdd = useFunction((map, gl) => {
+    const canvas = map.getCanvas();
+    const root = createRoot(canvas);
+    root.configure({
+      dpr: window.devicePixelRatio,
+      events: createEvents(),
+      ...renderProps,
+      frameloop: "never",
+      gl: {
+        context: gl,
+        depth: true,
+        autoClear: false,
+        antialias: true,
+        ...renderProps == null ? void 0 : renderProps.gl
+      },
+      onCreated: (state) => {
+        state.gl.forceContextLoss = () => {
+        };
+      },
+      camera: {
+        matrixAutoUpdate: false,
+        near: 0
+      },
+      size: {
+        width: canvas.clientWidth,
+        height: canvas.clientHeight,
+        top: 0,
+        left: 0,
+        ...renderProps == null ? void 0 : renderProps.size
+      }
+    });
+    const store = _roots.get(canvas).store;
+    r3mRef.current.map = map;
+    r3mRef.current.root = root;
+    r3mRef.current.state = store.getState();
+    store.setState({ r3m: r3mRef.current });
+    if (frameloop === "demand") {
+      store.setState({
+        frameloop,
+        invalidate: () => {
+          map.triggerRepaint();
+        }
+      });
+    }
+    map.on("resize", onResize);
+    setTimeout(() => setMounted(true));
+  });
+  const onResize = useFunction(() => {
+    if (!r3mRef.current.map)
+      return;
+    if (!r3mRef.current.state)
+      return;
+    const canvas = r3mRef.current.map.getCanvas();
+    r3mRef.current.state.setSize(canvas.width, canvas.height);
+  });
+  const onRemove = useFunction(() => {
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.unmount();
+    r3mRef.current.root = void 0;
+    if (!r3mRef.current.map)
+      return;
+    r3mRef.current.map.off("resize", onResize);
+  });
+  useEffect(() => () => onRemove(), [onRemove]);
+  return { onAdd, onRemove, mounted, r3mRef };
+}
 export {
-  useFunction
+  useOnAdd
 };
 //# sourceMappingURL=main12.mjs.map

package/dist/maplibre/es/main12.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main12.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;"}
+{"version":3,"file":"main12.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;"}