react-three-map 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-three-map
 
+## 0.4.2
+
+### Patch Changes
+
+- bd62ef9: Simplify raycaster calculations.
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/cjs/main.js

@@ -57,15 +57,10 @@ const DOM_EVENTS = {
   onPointerCancel: ["pointercancel", true],
   onLostPointerCapture: ["lostpointercapture", true]
 };
-const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+const projByViewInv$1 = new THREE.Matrix4();
 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,
@@ -74,16 +69,11 @@ function createEvents() {
         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);
+        if (state.camera.userData.projByViewInv)
+          projByViewInv$1.fromArray(state.camera.userData.projByViewInv);
         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();
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv$1);
+        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projByViewInv$1).sub(state.raycaster.ray.origin).normalize();
       },
       connected: void 0,
       handlers: Object.keys(DOM_EVENTS).reduce(

package/dist/es/main13.mjs

@@ -1,5 +1,5 @@
 import { createEvents as createEvents$1 } from "@react-three/fiber";
-import { PerspectiveCamera } from "three";
+import { Matrix4 } from "three";
 const DOM_EVENTS = {
   onClick: ["click", false],
   onContextMenu: ["contextmenu", false],
@@ -12,15 +12,10 @@ const DOM_EVENTS = {
   onPointerCancel: ["pointercancel", true],
   onLostPointerCapture: ["lostpointercapture", true]
 };
-const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+const projByViewInv = new Matrix4();
 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,
@@ -29,16 +24,11 @@ function createEvents() {
         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);
+        if (state.camera.userData.projByViewInv)
+          projByViewInv.fromArray(state.camera.userData.projByViewInv);
         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();
+        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(DOM_EVENTS).reduce(

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 { 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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"}
+{"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/maplibre/cjs/main.js

@@ -57,15 +57,10 @@ const DOM_EVENTS = {
   onPointerCancel: ["pointercancel", true],
   onLostPointerCapture: ["lostpointercapture", true]
 };
-const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+const projByViewInv$1 = new THREE.Matrix4();
 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,
@@ -74,16 +69,11 @@ function createEvents() {
         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);
+        if (state.camera.userData.projByViewInv)
+          projByViewInv$1.fromArray(state.camera.userData.projByViewInv);
         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();
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv$1);
+        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projByViewInv$1).sub(state.raycaster.ray.origin).normalize();
       },
       connected: void 0,
       handlers: Object.keys(DOM_EVENTS).reduce(

package/dist/maplibre/es/main10.mjs

@@ -1,18 +1,23 @@
-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 { 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 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 {
-  coordsToMatrix
+  useRender
 };
 //# 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-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/main13.mjs

@@ -1,5 +1,5 @@
 import { createEvents as createEvents$1 } from "@react-three/fiber";
-import { PerspectiveCamera } from "three";
+import { Matrix4 } from "three";
 const DOM_EVENTS = {
   onClick: ["click", false],
   onContextMenu: ["contextmenu", false],
@@ -12,15 +12,10 @@ const DOM_EVENTS = {
   onPointerCancel: ["pointercancel", true],
   onLostPointerCapture: ["lostpointercapture", true]
 };
-const identity = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+const projByViewInv = new Matrix4();
 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,
@@ -29,16 +24,11 @@ function createEvents() {
         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);
+        if (state.camera.userData.projByViewInv)
+          projByViewInv.fromArray(state.camera.userData.projByViewInv);
         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();
+        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(DOM_EVENTS).reduce(

package/dist/maplibre/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 { 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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"}
+{"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":";;AAMA,MAAM,aAAa;AAAA,EACjB,SAAS,CAAC,SAAS,KAAK;AAAA,EACxB,eAAe,CAAC,eAAe,KAAK;AAAA,EACpC,eAAe,CAAC,YAAY,KAAK;AAAA,EACjC,SAAS,CAAC,SAAS,IAAI;AAAA,EACvB,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,aAAa,CAAC,aAAa,IAAI;AAAA,EAC/B,gBAAgB,CAAC,gBAAgB,IAAI;AAAA,EACrC,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,iBAAiB,CAAC,iBAAiB,IAAI;AAAA,EACvC,sBAAsB,CAAC,sBAAsB,IAAI;AACnD;AAEA,MAAM,gBAAgB,IAAI;AAGnB,SAAS,eAAyD;AACvE,SAAO,CAAC,UAAoC;AAC1C,UAAM,EAAE,cAAA,IAAkBA,eAAkB,KAAK;AAE1C,WAAA;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ,OAAiB,OAAkB;AACzC,cAAM,KAAK,QAAQ,MAAM,GAAG,WAAW,QAAQ,OAAO;AACtD,cAAM,KAAK,SAAS,MAAM,GAAG,WAAW,SAAS,OAAO;AACxD,cAAM,QAAQ,IAAK,MAAM,UAAU,MAAM,KAAK,QAAS,IAAI;AAC3D,cAAM,QAAQ,IAAI,IAAK,MAAM,UAAU,MAAM,KAAK,SAAU;AAEzD,YAAA,MAAM,OAAO,SAAS;AAAe,wBAAc,UAAU,MAAM,OAAO,SAAS,aAAa;AAE7F,cAAA,UAAU,SAAS,MAAM;AAC/B,cAAM,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAa,aAAa;AAC5D,cAAA,UAAU,IAAI,UACjB,IAAI,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,CAAC,EACvC,aAAa,aAAa,EAC1B,IAAI,MAAM,UAAU,IAAI,MAAM,EAC9B;MACL;AAAA,MACA,WAAW;AAAA,MACX,UAAU,OAAO,KAAK,UAAU,EAAE;AAAA,QAChC,CAAC,KAAK,SAAS,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG;QACjD,CAAC;AAAA,MACH;AAAA,MACA,QAAQ,MAAM;;AACZ,cAAM,EAAE,QAAQ,SAAS,IAAI,MAAM,SAAS;AAC5C,cAAI,cAAS,cAAT,mBAAoB,YAAW,OAAO,UAAU;AAClD,iBAAO,SAAS,cAAc,SAAS,UAAU,OAAO;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,SAAS,CAAC,WAAwB;;AAChC,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,qBAAO,eAAP;AACA,YAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAO,WAAW,EAAA,EAAI;AACvE,eAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC/D,gBAAM,CAAC,WAAW,OAAO,IAAI,WAAW,IAA+B;AACvE,iBAAO,iBAAiB,WAAW,OAAO,EAAE,QAAS,CAAA;AAAA,QAAA,CACtD;AAAA,MACH;AAAA,MACA,YAAY,MAAM;AAChB,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,YAAI,OAAO,WAAW;AACb,iBAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC3D,gBAAA,UAAU,OAAO,qBAAqB,aAAa;AACrD,oBAAM,CAAC,SAAS,IAAI,WAAW,IAA+B;AACvD,qBAAA,UAAU,oBAAoB,WAAW,KAAK;AAAA,YACvD;AAAA,UAAA,CACD;AACG,cAAA,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAU,EAAA,EAAI;AAAA,QACxE;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/maplibre/es/main4.mjs

@@ -1,6 +1,6 @@
 import { useCoords } from "./main7.mjs";
-import { useCreateRoot } from "./main8.mjs";
-import { useRender } from "./main9.mjs";
+import { useCreateRoot } from "./main9.mjs";
+import { useRender } from "./main10.mjs";
 function useCanvas({
   longitude,
   latitude,

package/dist/maplibre/es/main7.mjs

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { coordsToMatrix } from "./main10.mjs";
+import { coordsToMatrix } from "./main8.mjs";
 function useCoords({ latitude, longitude, altitude, fromLngLat }) {
   const m4 = useMemo(() => coordsToMatrix({
     latitude,

package/dist/maplibre/es/main8.mjs

@@ -1,24 +1,18 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useId, useEffect } from "react";
-import { useOnAdd } from "./main11.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 };
-};
+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 {
-  useCreateRoot
+  coordsToMatrix
 };
 //# sourceMappingURL=main8.mjs.map

package/dist/maplibre/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":[],"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;"}
+{"version":3,"file":"main8.mjs","sources":["../../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}

package/dist/maplibre/es/main9.mjs

@@ -1,23 +1,24 @@
-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)
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useId, useEffect } from "react";
+import { useOnAdd } from "./main11.mjs";
+const useCreateRoot = ({
+  children,
+  frameloop,
+  fromLngLat,
+  ...renderProps
+}) => {
+  const id = useId();
+  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
+  useEffect(() => {
+    if (!mounted)
       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;
-}
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
+  }, [r3mRef, mounted, children]);
+  return { id, onAdd, onRemove, r3mRef };
+};
 export {
-  useRender
+  useCreateRoot
 };
 //# sourceMappingURL=main9.mjs.map

package/dist/maplibre/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":[],"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;"}
+{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",

package/stories/package.json

@@ -15,7 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.2",
-    "react-three-map": "^0.3.5",
+    "react-three-map": "^0.4.1",
     "three": "^0.154.0",
     "three-stdlib": "^2.23.13",
     "web-ifc-three": "^0.0.125"

package/stories/yarn.lock

@@ -3473,10 +3473,10 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-three-map@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.3.5.tgz#ca35fba24a81cc84b8252b5d607be390be069b95"
-  integrity sha512-BVji1OgyEf7RxMWuYWuOl3k3Ro1wxJ+NZ+tBtWbzl1jp5QIKkQnOZ+cJOKA5XFr/6OMi2xI8yY9g2WFp2TlMtA==
+react-three-map@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.4.1.tgz#4849aba8d907f1a0782c269f623f81675d144fbb"
+  integrity sha512-ctVVZwhkDH33yjM2r8zQ2URXxK3OimuJJgwTDJBEmuhRMTwqqseGvPPC/enqXhI2KWeGmUKySSeonpDq2LjB4Q==
 
 react-use-measure@^2.1.1:
   version "2.1.1"