react-three-map 0.3.5 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-three-map
 
+## 0.4.1
+
+### Patch Changes
+
+- 41dd225: Improve camera decomposition so the camera matrix and world matrix have more useful values.
+
+## 0.4.0
+
+### Minor Changes
+
+- bad8670: Add `<Coordinates>` component to render multiple 3D objects at different coordiantes.
+
 ## 0.3.5
 
 ### Patch Changes

package/README.md

@@ -138,3 +138,28 @@ Therefore, the following `<Canvas>` props are ignored:
 - orthographic
 - dpr
 
+### Coordinates
+
+[![Coordinates example](docs/coordinates.png)](https://rodrigohamuy.github.io/react-three-map/?story=multi-coordinates--default)
+
+This component allows you to have 3D objects at different coordinates.
+
+
+```tsx
+import { Canvas, Coordinates } from 'react-three-map'
+
+<Canvas latitude={51} longitude={0}>
+  <Coordinates latitude={50} longitude={0}>
+    <mesh><sphereGeometry /></mesh>
+  </Coordinates>
+  <Coordinates latitude={52} longitude={0}>
+    <mesh><sphereGeometry /></mesh>
+  </Coordinates>
+</Canvas>
+```
+
+| Props       | Description                                      | Default    |
+| ---------  | ------------------------------------------------ | ---------- |
+| latitude   | The latitude coordinate where to add the scene.  |            |
+| longitude  | The longitude coordinate where to add the scene. |            |
+| altitude   | The altitude coordinate where to add the scene.  | `0`        |

package/dist/cjs/main.js

@@ -1 +1,337 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),x=require("@react-three/fiber"),E=require("mapbox-gl"),l=require("react"),b=require("react-map-gl"),d=require("three");function j(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(r,t,e.get?e:{enumerable:!0,get:()=>n[t]})}}return r.default=n,Object.freeze(r)}const C=j(d),y=new d.Quaternion,R=new d.Euler,w=new d.Vector3,M=new d.Vector3,z=new d.Matrix4;function S({longitude:n,latitude:r,altitude:t,fromLngLat:e}){const o=e([n,r],t),c=o.meterInMercatorCoordinateUnits();return w.set(o.x,o.y,o.z||0),M.set(c,-c,c),y.setFromEuler(R.set(-Math.PI*.5,0,0)),z.compose(w,y,M).toArray()}const g={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]};function L(){return n=>{const{handlePointer:r}=x.createEvents(n);return{priority:1,enabled:!0,compute(t,e){e.size.width=e.gl.domElement.width/window.devicePixelRatio,e.size.height=e.gl.domElement.height/window.devicePixelRatio,e.pointer.x=t.offsetX/e.size.width*2-1,e.pointer.y=1-t.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()},connected:void 0,handlers:Object.keys(g).reduce((t,e)=>({...t,[e]:r(e)}),{}),update:()=>{var o;const{events:t,internal:e}=n.getState();(o=e.lastEvent)!=null&&o.current&&t.handlers&&t.handlers.onPointerMove(e.lastEvent.current)},connect:t=>{var c;const{set:e,events:o}=n.getState();(c=o.disconnect)==null||c.call(o),e(a=>({events:{...a.events,connected:t.parentNode}})),Object.entries(o.handlers??[]).forEach(([a,u])=>{const[i,s]=g[a];t.addEventListener(i,u,{passive:s})})},disconnect:()=>{const{set:t,events:e}=n.getState();e.connected&&(Object.entries(e.handlers??[]).forEach(([o,c])=>{if(e&&e.connected instanceof HTMLElement){const[a]=g[o];e.connected.removeEventListener(a,c)}}),t(o=>({events:{...o.events,connected:void 0}})))}}}}const f=n=>{const r=l.useRef(n);return r.current=n,l.useCallback((...t)=>r.current(...t),[])};function O(n,{frameloop:r,...t}){const[e,o]=l.useState(!1),c=f((i,s)=>{const m=i.getCanvas(),v=x.createRoot(m);v.configure({dpr:window.devicePixelRatio,events:L(),...t,frameloop:"never",gl:{context:s,depth:!0,autoClear:!1,antialias:!0,...t==null?void 0:t.gl},onCreated:p=>{r==="demand"&&p.set({frameloop:r,invalidate:()=>{i.triggerRepaint()}}),n.current={state:p,map:i,root:v},p.gl.forceContextLoss=()=>{}},camera:{matrixAutoUpdate:!1},size:{width:m.clientWidth,height:m.clientHeight,top:0,left:0,...t==null?void 0:t.size}}),n.current={map:i,root:v},i.on("resize",a),setTimeout(()=>o(!0))}),a=f(()=>{var v;if(!((v=n.current)!=null&&v.state))return;const i=n.current.state,m=n.current.map.getCanvas();i.setSize(m.width,m.height)}),u=f(i=>{setTimeout(()=>{n.current&&(n.current.root.unmount(),i.off("resize",a))})});return{onAdd:c,onRemove:u,mounted:e}}const T=new d.Matrix4;function A(n,r,t){return f((o,c)=>{var s;if(!((s=r.current)!=null&&s.state))return;const a=r.current.state.camera,u=r.current.state.gl,i=r.current.state.advance;a.projectionMatrix.fromArray(c).multiply(T.fromArray(n)),a.projectionMatrixInverse.copy(a.projectionMatrix).invert(),u.resetState(),i(Date.now()*.001,!0),t==="always"&&r.current.map.triggerRepaint()})}const q=({m4:n,children:r,frameloop:t,...e})=>{const o=l.useId(),c=l.useRef(),{onAdd:a,onRemove:u,mounted:i}=O(c,{frameloop:t,...e}),s=A(n,c,t);return l.useEffect(()=>{i&&c.current&&c.current.root.render(h.jsx(h.Fragment,{children:r}))},[c,i,r]),{id:o,onAdd:a,onRemove:u,render:s}};x.extend(C);const k=l.memo(({longitude:n,latitude:r,altitude:t=0,frameloop:e="always",...o})=>{const c=l.useMemo(()=>S({latitude:r,longitude:n,altitude:t,fromLngLat:E.MercatorCoordinate.fromLngLat}),[r,n,t]),{id:a,onAdd:u,onRemove:i,render:s}=q({m4:c,frameloop:e,...o});return h.jsx(b.Layer,{id:a,type:"custom",renderingMode:"3d",onAdd:u,onRemove:i,render:s})});exports.Canvas=k;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const fiber = require("@react-three/fiber");
+const mapboxGl = require("mapbox-gl");
+const react = require("react");
+const reactMapGl = require("react-map-gl");
+const THREE = require("three");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
+const quat = new THREE.Quaternion();
+const euler = new THREE.Euler();
+const pos = new THREE.Vector3();
+const scale = new THREE.Vector3();
+const m4 = new THREE.Matrix4();
+function coordsToMatrix({ longitude, latitude, altitude, fromLngLat: fromLngLat2 }) {
+  const center = fromLngLat2([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();
+}
+function useCoords({ latitude, longitude, altitude, fromLngLat: fromLngLat2 }) {
+  const m42 = react.useMemo(() => coordsToMatrix({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: fromLngLat2
+  }), [latitude, longitude, altitude, fromLngLat2]);
+  return m42;
+}
+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]
+};
+const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+function createEvents() {
+  return (store) => {
+    const { handlePointer } = fiber.createEvents(store);
+    const rayCamera = new THREE.PerspectiveCamera();
+    rayCamera.position.z = 5;
+    rayCamera.matrixAutoUpdate = false;
+    rayCamera.matrixWorldAutoUpdate = false;
+    rayCamera.lookAt(0, 0, 0);
+    return {
+      priority: 1,
+      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;
+        rayCamera.copy(state.camera);
+        const projByViewInv2 = rayCamera.userData.projByViewInv || identity;
+        rayCamera.matrix.identity();
+        rayCamera.matrixWorld.identity();
+        rayCamera.matrixWorldInverse.copy(rayCamera.matrixWorld).invert();
+        rayCamera.projectionMatrixInverse.fromArray(projByViewInv2);
+        rayCamera.projectionMatrix.fromArray(rayCamera.userData.projByView);
+        state.raycaster.camera = state.camera;
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(rayCamera.projectionMatrixInverse);
+        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(rayCamera.projectionMatrixInverse).sub(state.raycaster.ray.origin).normalize();
+      },
+      connected: void 0,
+      handlers: Object.keys(DOM_EVENTS).reduce(
+        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
+        {}
+      ),
+      update: () => {
+        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: (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, 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 } }));
+        }
+      }
+    };
+  };
+}
+const useFunction = (callback) => {
+  const callbackRef = react.useRef(callback);
+  callbackRef.current = callback;
+  return react.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+};
+function useOnAdd(fromLngLat2, { frameloop, ...renderProps }) {
+  const [mounted, setMounted] = react.useState(false);
+  const r3mRef = react.useRef({ fromLngLat: fromLngLat2 });
+  const onAdd = useFunction((map, gl) => {
+    const canvas = map.getCanvas();
+    const root = fiber.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 = fiber._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();
+        }
+      });
+    }
+    setTimeout(() => setMounted(true));
+  });
+  const onRemove = useFunction(() => {
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.unmount();
+    r3mRef.current.root = void 0;
+  });
+  react.useEffect(() => () => onRemove(), [onRemove]);
+  return { onAdd, onRemove, mounted, r3mRef };
+}
+const useCreateRoot = ({
+  children,
+  frameloop,
+  fromLngLat: fromLngLat2,
+  ...renderProps
+}) => {
+  const id = react.useId();
+  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat2, { frameloop, ...renderProps });
+  react.useEffect(() => {
+    if (!mounted)
+      return;
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.render(/* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }));
+  }, [r3mRef, mounted, children]);
+  return { id, onAdd, onRemove, r3mRef };
+};
+const originMx = new THREE.Matrix4();
+const projByView = new THREE.Matrix4();
+const projByViewInv = new THREE.Matrix4();
+const fwd = new THREE.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;
+}
+function useRender(origin, r3mRef, frameloop) {
+  const render = useFunction((_gl, mapCamMx) => {
+    const r3m = r3mRef.current;
+    if (!r3m.state || !r3m.map)
+      return;
+    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;
+}
+function useCanvas({
+  longitude,
+  latitude,
+  altitude = 0,
+  frameloop = "always",
+  fromLngLat: fromLngLat2,
+  ...renderProps
+}) {
+  const m42 = useCoords({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: fromLngLat2
+  });
+  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat: fromLngLat2, ...renderProps });
+  const render = useRender(m42, r3mRef, frameloop);
+  return { id, onAdd, onRemove, render };
+}
+fiber.extend(THREE__namespace);
+const fromLngLat = mapboxGl.MercatorCoordinate.fromLngLat;
+const Canvas = react.memo((props) => {
+  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactMapGl.Layer,
+    {
+      id,
+      type: "custom",
+      renderingMode: "3d",
+      onAdd,
+      onRemove,
+      render
+    }
+  );
+});
+const useR3M = () => fiber.useThree((s) => s.r3m);
+const Coordinates = react.memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  children
+}) => {
+  const [scene] = react.useState(() => new THREE.Scene());
+  const r3m = useR3M();
+  const origin = useCoords({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: r3m.fromLngLat
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fiber.createPortal(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RenderAtCoords, { r3m, origin }),
+    children
+  ] }), scene, { events: { priority: 2 } }) });
+});
+Coordinates.displayName = "Coordinates";
+function RenderAtCoords({ r3m, origin }) {
+  const { gl, scene, set } = fiber.useThree();
+  const cameraRef = react.useRef(null);
+  fiber.useFrame(() => {
+    if (!r3m.mapCamMx)
+      return;
+    if (!cameraRef.current)
+      return;
+    syncCamera(cameraRef.current, origin, r3m.mapCamMx);
+    gl.render(scene, cameraRef.current);
+  });
+  react.useLayoutEffect(() => {
+    if (!cameraRef.current)
+      return;
+    set({
+      invalidate: () => {
+        if (!r3m.map)
+          return;
+        r3m.map.triggerRepaint();
+      },
+      camera: cameraRef.current
+    });
+  }, [set, r3m]);
+  return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
+}
+exports.Canvas = Canvas;
+exports.Coordinates = Coordinates;

package/dist/es/main.mjs

@@ -1,5 +1,7 @@
-import { Canvas as r } from "./main2.mjs";
+import { Canvas } from "./main2.mjs";
+import { Coordinates } from "./main3.mjs";
 export {
-  r as Canvas
+  Canvas,
+  Coordinates
 };
 //# sourceMappingURL=main.mjs.map

package/dist/es/main.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"main.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/es/main10.mjs

@@ -0,0 +1,18 @@
+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();
+}
+export {
+  coordsToMatrix
+};
+//# sourceMappingURL=main10.mjs.map

package/dist/es/main10.mjs.map

@@ -0,0 +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;"}

package/dist/es/main11.mjs

@@ -0,0 +1,66 @@
+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();
+        }
+      });
+    }
+    setTimeout(() => setMounted(true));
+  });
+  const onRemove = useFunction(() => {
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.unmount();
+    r3mRef.current.root = void 0;
+  });
+  useEffect(() => () => onRemove(), [onRemove]);
+  return { onAdd, onRemove, mounted, r3mRef };
+}
+export {
+  useOnAdd
+};
+//# sourceMappingURL=main11.mjs.map

package/dist/es/main11.mjs.map

@@ -0,0 +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;AAEW,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAAA,EAAA,CACvB;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}

package/dist/es/main12.mjs

@@ -0,0 +1,12 @@
+import { useRef, useCallback } from "react";
+const useFunction = (callback) => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+};
+export {
+  useFunction
+};
+//# sourceMappingURL=main12.mjs.map

package/dist/es/main12.mjs.map

@@ -0,0 +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;"}

package/dist/es/main13.mjs

@@ -0,0 +1,83 @@
+import { createEvents as createEvents$1 } from "@react-three/fiber";
+import { PerspectiveCamera } 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]
+};
+const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+function createEvents() {
+  return (store) => {
+    const { handlePointer } = createEvents$1(store);
+    const rayCamera = new PerspectiveCamera();
+    rayCamera.position.z = 5;
+    rayCamera.matrixAutoUpdate = false;
+    rayCamera.matrixWorldAutoUpdate = false;
+    rayCamera.lookAt(0, 0, 0);
+    return {
+      priority: 1,
+      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;
+        rayCamera.copy(state.camera);
+        const projByViewInv = rayCamera.userData.projByViewInv || identity;
+        rayCamera.matrix.identity();
+        rayCamera.matrixWorld.identity();
+        rayCamera.matrixWorldInverse.copy(rayCamera.matrixWorld).invert();
+        rayCamera.projectionMatrixInverse.fromArray(projByViewInv);
+        rayCamera.projectionMatrix.fromArray(rayCamera.userData.projByView);
+        state.raycaster.camera = state.camera;
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(rayCamera.projectionMatrixInverse);
+        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(rayCamera.projectionMatrixInverse).sub(state.raycaster.ray.origin).normalize();
+      },
+      connected: void 0,
+      handlers: Object.keys(DOM_EVENTS).reduce(
+        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
+        {}
+      ),
+      update: () => {
+        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: (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, 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 {
+  createEvents
+};
+//# sourceMappingURL=main13.mjs.map

package/dist/es/main13.mjs.map

@@ -0,0 +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 { PerspectiveCamera } 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 identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]\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    const rayCamera = new PerspectiveCamera();\n    rayCamera.position.z = 5\n    rayCamera.matrixAutoUpdate = false;\n    rayCamera.matrixWorldAutoUpdate = false;\n    rayCamera.lookAt(0, 0, 0)\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        rayCamera.copy(state.camera as PerspectiveCamera);\n\n        const projByViewInv = rayCamera.userData.projByViewInv || identity;\n\n        rayCamera.matrix.identity();\n        rayCamera.matrixWorld.identity();\n        rayCamera.matrixWorldInverse.copy(rayCamera.matrixWorld).invert();\n        rayCamera.projectionMatrixInverse.fromArray(projByViewInv)\n        rayCamera.projectionMatrix.fromArray(rayCamera.userData.projByView)\n\n        state.raycaster.camera = state.camera;\n        state.raycaster.ray.origin.setScalar(0).applyMatrix4(rayCamera.projectionMatrixInverse);\n        state.raycaster.ray.direction\n          .set(state.pointer.x, state.pointer.y, 1)\n          .applyMatrix4(rayCamera.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":["createFiberEvents"],"mappings":"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"}