react-three-map 0.4.0 → 0.4.2

package/dist/es/main13.mjs

@@ -1,56 +1,73 @@
-import { createEvents as p } from "@react-three/fiber";
-const c = {
-  onClick: ["click", !1],
-  onContextMenu: ["contextmenu", !1],
-  onDoubleClick: ["dblclick", !1],
-  onWheel: ["wheel", !0],
-  onPointerDown: ["pointerdown", !0],
-  onPointerUp: ["pointerup", !0],
-  onPointerLeave: ["pointerleave", !0],
-  onPointerMove: ["pointermove", !0],
-  onPointerCancel: ["pointercancel", !0],
-  onLostPointerCapture: ["lostpointercapture", !0]
+import { createEvents as createEvents$1 } from "@react-three/fiber";
+import { Matrix4 } from "three";
+const DOM_EVENTS = {
+  onClick: ["click", false],
+  onContextMenu: ["contextmenu", false],
+  onDoubleClick: ["dblclick", false],
+  onWheel: ["wheel", true],
+  onPointerDown: ["pointerdown", true],
+  onPointerUp: ["pointerup", true],
+  onPointerLeave: ["pointerleave", true],
+  onPointerMove: ["pointermove", true],
+  onPointerCancel: ["pointercancel", true],
+  onLostPointerCapture: ["lostpointercapture", true]
 };
-function u() {
-  return (o) => {
-    const { handlePointer: a } = p(o);
+const projByViewInv = new Matrix4();
+function createEvents() {
+  return (store) => {
+    const { handlePointer } = createEvents$1(store);
     return {
       priority: 1,
-      enabled: !0,
-      compute(n, e) {
-        e.size.width = e.gl.domElement.width / window.devicePixelRatio, e.size.height = e.gl.domElement.height / window.devicePixelRatio, e.pointer.x = n.offsetX / e.size.width * 2 - 1, e.pointer.y = 1 - n.offsetY / e.size.height * 2, e.raycaster.camera = e.camera, e.raycaster.ray.origin.setScalar(0).applyMatrix4(e.camera.projectionMatrixInverse), e.raycaster.ray.direction.set(e.pointer.x, e.pointer.y, 1).applyMatrix4(e.camera.projectionMatrixInverse).sub(e.raycaster.ray.origin).normalize();
+      enabled: true,
+      compute(event, state) {
+        state.size.width = state.gl.domElement.width / window.devicePixelRatio;
+        state.size.height = state.gl.domElement.height / window.devicePixelRatio;
+        state.pointer.x = event.offsetX / state.size.width * 2 - 1;
+        state.pointer.y = 1 - event.offsetY / state.size.height * 2;
+        if (state.camera.userData.projByViewInv)
+          projByViewInv.fromArray(state.camera.userData.projByViewInv);
+        state.raycaster.camera = state.camera;
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);
+        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projByViewInv).sub(state.raycaster.ray.origin).normalize();
       },
       connected: void 0,
-      handlers: Object.keys(c).reduce(
-        (n, e) => ({ ...n, [e]: a(e) }),
+      handlers: Object.keys(DOM_EVENTS).reduce(
+        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
         {}
       ),
       update: () => {
-        var t;
-        const { events: n, internal: e } = o.getState();
-        (t = e.lastEvent) != null && t.current && n.handlers && n.handlers.onPointerMove(e.lastEvent.current);
+        var _a;
+        const { events, internal } = store.getState();
+        if (((_a = internal.lastEvent) == null ? void 0 : _a.current) && events.handlers) {
+          events.handlers.onPointerMove(internal.lastEvent.current);
+        }
       },
-      connect: (n) => {
-        var i;
-        const { set: e, events: t } = o.getState();
-        (i = t.disconnect) == null || i.call(t), e((r) => ({ events: { ...r.events, connected: n.parentNode } })), Object.entries(t.handlers ?? []).forEach(([r, l]) => {
-          const [s, d] = c[r];
-          n.addEventListener(s, l, { passive: d });
+      connect: (target) => {
+        var _a;
+        const { set, events } = store.getState();
+        (_a = events.disconnect) == null ? void 0 : _a.call(events);
+        set((state) => ({ events: { ...state.events, connected: target.parentNode } }));
+        Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, { passive });
         });
       },
       disconnect: () => {
-        const { set: n, events: e } = o.getState();
-        e.connected && (Object.entries(e.handlers ?? []).forEach(([t, i]) => {
-          if (e && e.connected instanceof HTMLElement) {
-            const [r] = c[t];
-            e.connected.removeEventListener(r, i);
-          }
-        }), n((t) => ({ events: { ...t.events, connected: void 0 } })));
+        const { set, events } = store.getState();
+        if (events.connected) {
+          Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+            if (events && events.connected instanceof HTMLElement) {
+              const [eventName] = DOM_EVENTS[name];
+              events.connected.removeEventListener(eventName, event);
+            }
+          });
+          set((state) => ({ events: { ...state.events, connected: void 0 } }));
+        }
       }
     };
   };
 }
 export {
-  u as createEvents
+  createEvents
 };
 //# sourceMappingURL=main13.mjs.map

package/dist/es/main13.mjs.map

@@ -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 { 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\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    return {\n      priority: 1,\n      enabled: true,\n      compute(event: DomEvent, state: RootState) {\n        state.size.width = state.gl.domElement.width / window.devicePixelRatio;\n        state.size.height = state.gl.domElement.height / window.devicePixelRatio;\n        state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n        state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;\n        state.raycaster.camera = state.camera;\n        state.raycaster.ray.origin.setScalar(0).applyMatrix4(state.camera.projectionMatrixInverse);\n        state.raycaster.ray.direction\n          .set(state.pointer.x, state.pointer.y, 1)\n          .applyMatrix4(state.camera.projectionMatrixInverse)\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":["DOM_EVENTS","createEvents","store","handlePointer","createFiberEvents","event","state","acc","key","events","internal","_a","target","set","name","eventName","passive"],"mappings":"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"}
+{"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        state.size.width = state.gl.domElement.width / window.devicePixelRatio;\n        state.size.height = state.gl.domElement.height / window.devicePixelRatio;\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":"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"}

package/dist/es/main2.mjs

@@ -1,26 +1,27 @@
-import { jsx as n } from "react/jsx-runtime";
-import { extend as a } from "@react-three/fiber";
-import { MercatorCoordinate as i } from "mapbox-gl";
-import { memo as d } from "react";
-import { Layer as f } from "react-map-gl";
-import * as p from "three";
-import { useCanvas as s } from "./main4.mjs";
-a(p);
-const c = i.fromLngLat, y = d((o) => {
-  const { id: r, onAdd: m, onRemove: t, render: e } = s({ ...o, fromLngLat: c });
-  return /* @__PURE__ */ n(
-    f,
+import { jsx } from "react/jsx-runtime";
+import { extend } from "@react-three/fiber";
+import { MercatorCoordinate } from "mapbox-gl";
+import { memo } from "react";
+import { Layer } from "react-map-gl";
+import * as THREE from "three";
+import { useCanvas } from "./main4.mjs";
+extend(THREE);
+const fromLngLat = MercatorCoordinate.fromLngLat;
+const Canvas = memo((props) => {
+  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+  return /* @__PURE__ */ jsx(
+    Layer,
     {
-      id: r,
+      id,
       type: "custom",
       renderingMode: "3d",
-      onAdd: m,
-      onRemove: t,
-      render: e
+      onAdd,
+      onRemove,
+      render
     }
   );
 });
 export {
-  y as Canvas
+  Canvas
 };
 //# sourceMappingURL=main2.mjs.map

package/dist/es/main2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main2.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":["extend","THREE","fromLngLat","MercatorCoordinate","Canvas","memo","props","id","onAdd","onRemove","render","useCanvas","jsx","Layer"],"mappings":";;;;;;;AAQAA,EAAOC,CAAK;AAEZ,MAAMC,IAAaC,EAAmB,YAGzBC,IAASC,EAAkB,CAACC,MAAU;AAE3C,QAAA,EAAE,IAAAC,GAAI,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAU,EAAE,GAAGL,GAAO,YAAAJ,EAAA,CAAY;AAEnE,SAAA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACN,IAAAN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAC;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main2.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,UAAU;AAE3C,QAAA,EAAE,IAAI,OAAO,UAAU,OAAA,IAAW,UAAU,EAAE,GAAG,OAAO,WAAA,CAAY;AAEnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/es/main3.mjs

@@ -1,42 +1,56 @@
-import { jsx as m, Fragment as s, jsxs as c } from "react/jsx-runtime";
-import { createPortal as u, useThree as f, useFrame as p } from "@react-three/fiber";
-import { memo as d, useState as l, useRef as C, useLayoutEffect as g } from "react";
-import { Scene as x } from "three";
-import { useR3M as L } from "./main5.mjs";
-import { syncCamera as R } from "./main6.mjs";
-import { useCoords as y } from "./main7.mjs";
-const h = d(({
-  latitude: e,
-  longitude: n,
-  altitude: o = 0,
-  children: a
+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 "./main5.mjs";
+import { syncCamera } from "./main6.mjs";
+import { useCoords } from "./main7.mjs";
+const Coordinates = memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  children
 }) => {
-  const [t] = l(() => new x()), r = L(), i = y({
-    latitude: e,
-    longitude: n,
-    altitude: o,
-    fromLngLat: r.fromLngLat
+  const [scene] = useState(() => new Scene());
+  const r3m = useR3M();
+  const origin = useCoords({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: r3m.fromLngLat
   });
-  return /* @__PURE__ */ m(s, { children: u(/* @__PURE__ */ c(s, { children: [
-    /* @__PURE__ */ m(v, { r3m: r, origin: i }),
-    a
-  ] }), t, { events: { priority: 2 } }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RenderAtCoords, { r3m, origin }),
+    children
+  ] }), scene, { events: { priority: 2 } }) });
 });
-h.displayName = "Coordinates";
-function v({ r3m: e, origin: n }) {
-  const { gl: o, scene: a, set: t } = f(), r = C(null);
-  return p(() => {
-    e.mapCamMx && r.current && (R(r.current, n, e.mapCamMx), o.render(a, r.current));
-  }), g(() => {
-    r.current && t({
+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);
+  });
+  useLayoutEffect(() => {
+    if (!cameraRef.current)
+      return;
+    set({
       invalidate: () => {
-        e.map && e.map.triggerRepaint();
+        if (!r3m.map)
+          return;
+        r3m.map.triggerRepaint();
       },
-      camera: r.current
+      camera: cameraRef.current
     });
-  }, [t, e]), /* @__PURE__ */ m("perspectiveCamera", { ref: r });
+  }, [set, r3m]);
+  return /* @__PURE__ */ jsx("perspectiveCamera", { ref: cameraRef });
 }
 export {
-  h as Coordinates
+  Coordinates
 };
 //# sourceMappingURL=main3.mjs.map

package/dist/es/main3.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main3.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":["Coordinates","memo","latitude","longitude","altitude","children","scene","useState","Scene","r3m","useR3M","origin","useCoords","jsx","Fragment","jsxs","RenderAtCoords","gl","set","useThree","cameraRef","useRef","useFrame","syncCamera","useLayoutEffect"],"mappings":";;;;;;;AAaa,MAAAA,IAAcC,EAAuB,CAAC;AAAA,EACjD,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,UAAAC,IAAW;AAAA,EAAG,UAAAC;AACrC,MAAM;AAEJ,QAAM,CAACC,CAAK,IAAIC,EAAS,MAAM,IAAIC,EAAO,CAAA,GAEpCC,IAAMC,KAENC,IAASC,EAAU;AAAA,IACvB,UAAAV;AAAA,IAAU,WAAAC;AAAA,IAAW,UAAAC;AAAA,IAAU,YAAYK,EAAI;AAAA,EAAA,CAChD;AAGM,SAAA,gBAAAI,EAAAC,GAAA,EAAG,YACR,gBAAAC,EAAAD,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAD,EAAAG,GAAA,EAAe,KAAAP,GAAU,QAAAE,EAAgB,CAAA;AAAA,IACzCN;AAAA,EAAA,GACH,GAAKC,GAAO,EAAE,QAAQ,EAAE,UAAU,EAAA,GAAK,EAAE,CAAA;AAC3C,CAAC;AAEDN,EAAY,cAAc;AAO1B,SAASgB,EAAe,EAAE,KAAAP,GAAK,QAAAE,KAA+B;AAE5D,QAAM,EAAE,IAAAM,GAAI,OAAAX,GAAO,KAAAY,MAAQC,EAAS,GAE9BC,IAAYC,EAA0B,IAAI;AAEhD,SAAAC,EAAS,MAAM;AACb,IAAKb,EAAI,YACJW,EAAU,YACfG,EAAWH,EAAU,SAAST,GAAQF,EAAI,QAAQ,GAC/CQ,EAAA,OAAOX,GAAOc,EAAU,OAAO;AAAA,EAAA,CACnC,GAEDI,EAAgB,MAAM;AACpB,IAAKJ,EAAU,WACXF,EAAA;AAAA,MACF,YAAY,MAAM;AAChB,QAAKT,EAAI,OACTA,EAAI,IAAI;MACV;AAAA,MACA,QAAQW,EAAU;AAAA,IAAA,CACnB;AAAA,EAAA,GACA,CAACF,GAAKT,CAAG,CAAC,GAEN,gBAAAI,EAAC,qBAAkB,EAAA,KAAKO,EAAW,CAAA;AAC5C;"}
+{"version":3,"file":"main3.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/main4.mjs

@@ -1,23 +1,25 @@
-import { useCoords as a } from "./main7.mjs";
-import { useCreateRoot as f } from "./main8.mjs";
-import { useRender as p } from "./main9.mjs";
-function x({
-  longitude: r,
-  latitude: n,
-  altitude: s = 0,
-  frameloop: o = "always",
-  fromLngLat: e,
-  ...t
+import { useCoords } from "./main7.mjs";
+import { useCreateRoot } from "./main8.mjs";
+import { useRender } from "./main9.mjs";
+function useCanvas({
+  longitude,
+  latitude,
+  altitude = 0,
+  frameloop = "always",
+  fromLngLat,
+  ...renderProps
 }) {
-  const m = a({
-    latitude: n,
-    longitude: r,
-    altitude: s,
-    fromLngLat: e
-  }), { id: d, onAdd: u, onRemove: i, r3mRef: c } = f({ frameloop: o, fromLngLat: e, ...t }), R = p(m, c, o);
-  return { id: d, onAdd: u, onRemove: i, render: R };
+  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 {
-  x as useCanvas
+  useCanvas
 };
 //# 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":["useCanvas","longitude","latitude","altitude","frameloop","fromLngLat","renderProps","m4","useCoords","id","onAdd","onRemove","r3mRef","useCreateRoot","render","useRender"],"mappings":";;;AAUO,SAASA,EAAU;AAAA,EACxB,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,GAAGC;AACL,GAAmB;AAEjB,QAAMC,IAAKC,EAAU;AAAA,IACnB,UAAAN;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,IAAU,YAAAE;AAAA,EAAA,CAChC,GAEK,EAAE,IAAAI,GAAI,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAO,IAAIC,EAAc,EAAE,WAAAT,GAAW,YAAAC,GAAY,GAAGC,EAAa,CAAA,GAEzFQ,IAASC,EAAUR,GAAIK,GAAQR,CAAS;AAE9C,SAAO,EAAE,IAAAK,GAAI,OAAAC,GAAO,UAAAC,GAAU,QAAAG,EAAO;AACvC;"}
+{"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;"}

package/dist/es/main5.mjs

@@ -1,6 +1,6 @@
-import { useThree as r } from "@react-three/fiber";
-const m = () => r((e) => e.r3m);
+import { useThree } from "@react-three/fiber";
+const useR3M = () => useThree((s) => s.r3m);
 export {
-  m as useR3M
+  useR3M
 };
 //# 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":["useR3M","useThree","s"],"mappings":";AAcO,MAAMA,IAAS,MAAgBC,EAAS,CAACC,MAAWA,EAAE,GAAG;"}
+{"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;"}

package/dist/es/main6.mjs

@@ -1,9 +1,37 @@
-import { Matrix4 as i } from "three";
-const n = new i();
-function p(r, o, t) {
-  r.projectionMatrix.fromArray(t).multiply(n.fromArray(o)), r.projectionMatrixInverse.copy(r.projectionMatrix).invert();
+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 {
-  p as syncCamera
+  syncCamera
 };
 //# 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, PerspectiveCamera } from \"three\";\n\nconst mx = new Matrix4();\n\nexport function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple) {\n  camera.projectionMatrix.fromArray(mapCamMx).multiply(mx.fromArray(origin));\n  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n}"],"names":["mx","Matrix4","syncCamera","camera","origin","mapCamMx"],"mappings":";AAEA,MAAMA,IAAK,IAAIC;AAEC,SAAAC,EAAWC,GAA2BC,GAAsBC,GAAwB;AAC3F,EAAAF,EAAA,iBAAiB,UAAUE,CAAQ,EAAE,SAASL,EAAG,UAAUI,CAAM,CAAC,GACzED,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE;AAC/D;"}
+{"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;"}

package/dist/es/main7.mjs

@@ -1,14 +1,15 @@
-import { useMemo as c } from "react";
-import { coordsToMatrix as p } from "./main10.mjs";
-function x({ latitude: o, longitude: r, altitude: m, fromLngLat: s }) {
-  return c(() => p({
-    latitude: o,
-    longitude: r,
-    altitude: m,
-    fromLngLat: s
-  }), [o, r, m, s]);
+import { useMemo } from "react";
+import { coordsToMatrix } from "./main10.mjs";
+function useCoords({ latitude, longitude, altitude, fromLngLat }) {
+  const m4 = useMemo(() => coordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
+  }), [latitude, longitude, altitude, fromLngLat]);
+  return m4;
 }
 export {
-  x as useCoords
+  useCoords
 };
 //# 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":["useCoords","latitude","longitude","altitude","fromLngLat","useMemo","coordsToMatrix"],"mappings":";;AAMO,SAASA,EAAU,EAAC,UAAAC,GAAU,WAAAC,GAAW,UAAAC,GAAU,YAAAC,KAAoB;AAKrE,SAJIC,EAAQ,MAAMC,EAAe;AAAA,IACtC,UAAAL;AAAA,IAAU,WAAAC;AAAA,IAAW,UAAAC;AAAA,IAAU,YAAAC;AAAA,EAAA,CAChC,GAAG,CAACH,GAAUC,GAAWC,GAAUC,CAAU,CAAC;AAGjD;"}
+{"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;"}

package/dist/es/main8.mjs

@@ -1,18 +1,24 @@
-import { jsx as d, Fragment as c } from "react/jsx-runtime";
-import { useId as i, useEffect as p } from "react";
-import { useOnAdd as R } from "./main11.mjs";
-const g = ({
-  children: o,
-  frameloop: t,
-  fromLngLat: n,
-  ...m
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useId, useEffect } from "react";
+import { useOnAdd } from "./main11.mjs";
+const useCreateRoot = ({
+  children,
+  frameloop,
+  fromLngLat,
+  ...renderProps
 }) => {
-  const u = i(), { onAdd: f, onRemove: s, mounted: e, r3mRef: r } = R(n, { frameloop: t, ...m });
-  return p(() => {
-    e && r.current.root && r.current.root.render(/* @__PURE__ */ d(c, { children: o }));
-  }, [r, e, o]), { id: u, onAdd: f, onRemove: s, r3mRef: r };
+  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 {
-  g as useCreateRoot
+  useCreateRoot
 };
 //# sourceMappingURL=main8.mjs.map

package/dist/es/main8.mjs.map

@@ -1 +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":["useCreateRoot","children","frameloop","fromLngLat","renderProps","id","useId","onAdd","onRemove","mounted","r3mRef","useOnAdd","useEffect","jsx","Fragment"],"mappings":";;;AAUO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,YAAAC;AAAA,EAAY,GAAGC;AACtC,MAAsB;AAEpB,QAAMC,IAAKC,KAEL,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,GAAS,QAAAC,EAAO,IAAIC,EAASR,GAAY,EAAE,WAAAD,GAAW,GAAGE,EAAa,CAAA;AAE/F,SAAAQ,EAAU,MAAM;AACd,IAAKH,KACAC,EAAO,QAAQ,QACpBA,EAAO,QAAQ,KAAK,OAAO,gBAAAG,EAAAC,GAAA,EACxB,UAAAb,EACH,CAAA,CAAG;AAAA,EACF,GAAA,CAACS,GAAQD,GAASR,CAAQ,CAAC,GAEvB,EAAE,IAAAI,GAAI,OAAAE,GAAO,UAAAC,GAAU,QAAAE,EAAO;AACvC;"}
+{"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;"}

package/dist/es/main9.mjs

@@ -1,15 +1,23 @@
-import { syncCamera as m } from "./main6.mjs";
-import { useFunction as i } from "./main12.mjs";
-function g(r, a, n) {
-  return i((p, t) => {
-    const e = a.current;
-    if (!e.state || !e.map)
+import { syncCamera } from "./main6.mjs";
+import { useFunction } from "./main12.mjs";
+function useRender(origin, r3mRef, frameloop) {
+  const render = useFunction((_gl, mapCamMx) => {
+    const r3m = r3mRef.current;
+    if (!r3m.state || !r3m.map)
       return;
-    const s = e.state.camera, c = e.state.gl, o = e.state.advance;
-    e.mapCamMx = t, m(s, r, t), c.resetState(), o(Date.now() * 1e-3, !0), n === "always" && e.map.triggerRepaint();
+    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();
   });
+  return render;
 }
 export {
-  g as useRender
+  useRender
 };
 //# sourceMappingURL=main9.mjs.map

package/dist/es/main9.mjs.map

@@ -1 +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":["useRender","origin","r3mRef","frameloop","useFunction","_gl","mapCamMx","r3m","camera","gl","advance","syncCamera"],"mappings":";;AAMgB,SAAAA,EACdC,GAAsBC,GAAoCC,GAC1D;AAeO,SAbQC,EAAY,CAACC,GAA6BC,MAAuB;AAC9E,UAAMC,IAAML,EAAO;AACnB,QAAI,CAACK,EAAI,SAAS,CAACA,EAAI;AAAK;AACtB,UAAAC,IAASD,EAAI,MAAM,QACnBE,IAAKF,EAAI,MAAM,IACfG,IAAUH,EAAI,MAAM;AAC1B,IAAAA,EAAI,WAAWD,GACJK,EAAAH,GAA6BP,GAAQK,CAAwB,GACxEG,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAC5BP,MAAc,YAAUI,EAAI,IAAI;EAAe,CACpD;AAIH;"}
+{"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;"}