react-three-map 0.2.1 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # react-three-map
 
+## 0.3.1
+
+### Patch Changes
+
+- 39acb3b: Fix build typo and add more detailed peer dependencies.
+
+## 0.3.0
+
+### Minor Changes
+
+- f3155c6: Upgrade to `react-map-gl@7.1.0`, which changes how to use Maplibre. Find more in their [changelog](https://github.com/visgl/react-map-gl/releases/tag/v7.1.0).
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -1,9 +1,8 @@
 # React Three Map
 
-[![Version](https://img.shields.io/npm/v/react-three-map?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/@react-three/fiber)
-
-
-⚠️ **Alpha Warning: This library is currently in its alpha phase. While functional, it's still under active development and may have bugs. Please use with caution in production and feel free to report any issues you encounter. Thank you for your understanding!**
+[![Version](https://img.shields.io/npm/v/react-three-map)](https://npmjs.com/package/@react-three/fiber)
+[![Build Size](https://img.shields.io/bundlephobia/minzip/react-three-map?label=size)](https://bundlephobia.com/result?p=react-three-map)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/RodrigoHamuy/react-three-map/release.yml?branch=main)](https://github.com/RodrigoHamuy/react-three-map/actions?query=workflow%3Arelease)
 
 `react-three-map` is a bridge to use [`react-three-fiber`](https://github.com/pmndrs/react-three-fiber) inside [`react-map-gl`](https://github.com/visgl/react-map-gl).
 
@@ -14,15 +13,17 @@ Until now you had:
 | Mapbox GL JS | react-map-gl |
 | THREE.js | react-three-fiber |
 
-Now with `react-three-map`, you can use them together :fist_right::fist_left:.
+Now with `react-three-map`, you can use them together :fist_right::star::fist_left:.
 
 ```sh
 npm install react-three-map
 ```
 
-Find use examples in our [Stories :book:](https://rodrigohamuy.github.io/react-three-map).
+## :book: Examples
 
-## What does it look like?
+Check out our examples [here](https://rodrigohamuy.github.io/react-three-map) (powered by [Ladle](https://ladle.dev/)).
+
+## :mag: What does it look like?
 
 
 <table>
@@ -77,7 +78,7 @@ function BasicExample() {
 }
 ```
 
-# Why we build this?
+## :thinking: Why we build this?
 
 Look [how complex](https://maplibre.org/maplibre-gl-js-docs/example/add-3d-model/) is to add just one ThreeJS object to a map.
 
@@ -85,7 +86,7 @@ Look [how complex](https://docs.pmnd.rs/react-three-fiber/api/canvas#createroot)
 
 You can now replace all that complexity and hundreds of lines of code with the `<Canvas>` component exported by `react-three-map`, which includes a tone of extra features and seamless integration, supporting pointer events, raycasting, and much more, all out of the box.
 
-## API
+## :gear: API
 
 ### Canvas
 
@@ -116,17 +117,19 @@ It shares most of the props from R3F `<Canvas>`, so you can check them directly
 
 #### Render Props
 
-| PROP       | 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`      |
-| frameloop  | Render mode: always, demand.                     | `always` |
+| Prop       | 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`        |
+| frameloop  | Render mode: `"always"`, `"demand"`.             | `"always"` |
 
 #### Render Props removed from `@react-three/fiber`
 
 Because the scene now lives in a map, we leave a lot of the render and camera control to the map, rather than to R3F.
 
+Therefore, the following `<Canvas>` props are ignored:
+
 - gl
 - camera
 - resize

package/dist/cjs/main.js

@@ -0,0 +1 @@
+"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,e.size.height=e.gl.domElement.height,e.pointer.x=t.offsetX/(e.size.width/window.devicePixelRatio)*2-1,e.pointer.y=1-t.offsetY/(e.size.height/window.devicePixelRatio)*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 p=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=p((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:f=>{r==="demand"&&f.set({frameloop:r,invalidate:()=>{i.triggerRepaint()}}),n.current={state:f,map:i,root:v},f.gl.forceContextLoss=()=>{},f.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=p(()=>{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=p(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 p((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;

package/dist/es/main.mjs

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

package/dist/es/main.mjs.map

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

package/dist/es/main2.mjs

@@ -0,0 +1,38 @@
+import { jsx as i } from "react/jsx-runtime";
+import { extend as d } from "@react-three/fiber";
+import { MercatorCoordinate as c } from "mapbox-gl";
+import { memo as L, useMemo as x } from "react";
+import { Layer as M } from "react-map-gl";
+import * as v from "three";
+import { coordsToMatrix as y } from "./main3.mjs";
+import { useCanvas as C } from "./main4.mjs";
+d(v);
+const A = L(({
+  longitude: o,
+  latitude: r,
+  altitude: m = 0,
+  frameloop: e = "always",
+  ...t
+}) => {
+  const n = x(() => y({
+    latitude: r,
+    longitude: o,
+    altitude: m,
+    fromLngLat: c.fromLngLat
+  }), [r, o, m]), { id: s, onAdd: a, onRemove: f, render: p } = C({ m4: n, frameloop: e, ...t });
+  return /* @__PURE__ */ i(
+    M,
+    {
+      id: s,
+      type: "custom",
+      renderingMode: "3d",
+      onAdd: a,
+      onRemove: f,
+      render: p
+    }
+  );
+});
+export {
+  A as Canvas
+};
+//# sourceMappingURL=main2.mjs.map

package/dist/es/main2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main2.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { PropsWithChildren, memo, useMemo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"../core/coords-to-matrix\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nexport interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number,\n  frameloop?: 'always' | 'demand',\n}\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always', ...renderProps\n}) => {\n\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,\n  }), [latitude, longitude, altitude]);\n\n  const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });\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","Canvas","memo","longitude","latitude","altitude","frameloop","renderProps","m4","useMemo","coordsToMatrix","MercatorCoordinate","id","onAdd","onRemove","render","useCanvas","jsx","Layer"],"mappings":";;;;;;;;AAQAA,EAAOC,CAAK;AAUC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,WAAAC,IAAY;AAAA,EAAU,GAAGC;AAC3B,MAAM;AAEE,QAAAC,IAAKC,EAAQ,MAAMC,EAAe;AAAA,IACtC,UAAAN;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,IAAU,YAAYM,EAAmB;AAAA,EAC/D,CAAA,GAAG,CAACP,GAAUD,GAAWE,CAAQ,CAAC,GAE7B,EAAE,IAAAO,GAAI,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAO,IAAIC,EAAU,EAAE,IAAAR,GAAI,WAAAF,GAAW,GAAGC,EAAa,CAAA;AAE5E,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;"}

package/dist/{maplibre/es/main.js3.mjs → es/main3.mjs}

@@ -7,4 +7,4 @@ function d({ longitude: c, latitude: a, altitude: i, fromLngLat: u }) {
 export {
   d as coordsToMatrix
 };
-//# sourceMappingURL=main.js3.mjs.map
+//# sourceMappingURL=main3.mjs.map

package/dist/es/main3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main3.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":["quat","Quaternion","euler","Euler","pos","Vector3","scale","m4","Matrix4","coordsToMatrix","longitude","latitude","altitude","fromLngLat","center","scaleUnit"],"mappings":";AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID,KACZE,IAAK,IAAIC;AAGR,SAASC,EAAe,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,YAAAC,KAE7D;AACD,QAAMC,IAASD,EAAW,CAACH,GAAWC,CAAQ,GAAGC,CAAQ,GACnDG,IAAYD,EAAO;AACzB,SAAAV,EAAI,IAAIU,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCR,EAAM,IAAIS,GAAW,CAACA,GAAWA,CAAS,GACrCf,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzCK,EAAG,QAAQH,GAAKJ,GAAMM,CAAK,EAAE;AACtC;"}

package/dist/es/main4.mjs

@@ -0,0 +1,19 @@
+import { jsx as c, Fragment as i } from "react/jsx-runtime";
+import { useId as p, useRef as R, useEffect as a } from "react";
+import { useOnAdd as v } from "./main5.mjs";
+import { useRender as x } from "./main6.mjs";
+const E = ({
+  m4: o,
+  children: r,
+  frameloop: t,
+  ...s
+}) => {
+  const u = p(), e = R(), { onAdd: m, onRemove: d, mounted: n } = v(e, { frameloop: t, ...s }), f = x(o, e, t);
+  return a(() => {
+    n && e.current && e.current.root.render(/* @__PURE__ */ c(i, { children: r }));
+  }, [e, n, r]), { id: u, onAdd: m, onRemove: d, render: f };
+};
+export {
+  E as useCanvas
+};
+//# sourceMappingURL=main4.mjs.map

package/dist/es/main4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main4.mjs","sources":["../../src/core/use-canvas.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId, useRef } from \"react\";\nimport { Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  m4: Matrix4Tuple;\n}\n\nexport const useCanvas = (({\n  m4, children, frameloop, ...renderProps\n}: useCanvasProps) => {\n  const id = useId();\n\n  const stateRef: StateRef = useRef();\n\n  const { onAdd, onRemove, mounted } = useOnAdd(stateRef, { frameloop, ...renderProps });\n\n  const render = useRender(m4, stateRef, frameloop);\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!stateRef.current) return;\n    stateRef.current.root.render(<>{children}</>);\n  }, [stateRef, mounted, children])\n\n  return { id, onAdd, onRemove, render }\n})"],"names":["useCanvas","m4","children","frameloop","renderProps","id","useId","stateRef","useRef","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment"],"mappings":";;;;AAYO,MAAMA,IAAa,CAAC;AAAA,EACzB,IAAAC;AAAA,EAAI,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,GAAGC;AAC9B,MAAsB;AACpB,QAAMC,IAAKC,KAELC,IAAqBC,KAErB,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,MAAYC,EAASL,GAAU,EAAE,WAAAJ,GAAW,GAAGC,EAAA,CAAa,GAE/ES,IAASC,EAAUb,GAAIM,GAAUJ,CAAS;AAEhD,SAAAY,EAAU,MAAM;AACd,IAAKJ,KACAJ,EAAS,WACdA,EAAS,QAAQ,KAAK,OAAO,gBAAAS,EAAAC,GAAA,EAAG,UAAAf,EAAS,CAAA,CAAG;AAAA,EAC3C,GAAA,CAACK,GAAUI,GAAST,CAAQ,CAAC,GAEzB,EAAE,IAAAG,GAAI,OAAAI,GAAO,UAAAC,GAAU,QAAAG,EAAO;AACvC;"}

package/dist/{maplibre/es/main.js5.mjs → es/main5.mjs}

@@ -1,7 +1,7 @@
 import { createRoot as v } from "@react-three/fiber";
 import { useState as h } from "react";
-import { createEvents as d } from "./main.js7.mjs";
-import { useFunction as a } from "./main.js8.mjs";
+import { createEvents as d } from "./main7.mjs";
+import { useFunction as a } from "./main8.mjs";
 function w(e, { frameloop: u, ...n }) {
   const [l, r] = h(!1), g = a((t, m) => {
     const o = t.getCanvas(), i = v(o);
@@ -57,4 +57,4 @@ function w(e, { frameloop: u, ...n }) {
 export {
   w as useOnAdd
 };
-//# sourceMappingURL=main.js5.mjs.map
+//# sourceMappingURL=main5.mjs.map

package/dist/es/main5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main5.mjs","sources":["../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { MapInstance } from \"./generic-map\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>) {\n\n  const [mounted, setMounted] = useState(false);\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\n        if (frameloop === 'demand') {\n          state.set({\n            frameloop,\n            invalidate: () => {\n              map.triggerRepaint();\n            }\n          })\n        }\n\n        ref.current = {\n          state,\n          map,\n          root,\n        }\n\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n\n        // we update the camera on create rather than on config\n        // because otherwise some components may use it too early\n        // and get NaN values they can't recover from (drei HTML)\n        state.camera.matrixAutoUpdate = false;\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        ...renderProps?.size,\n      },\n    });\n\n    ref.current = {\n      map,\n      root,\n    }\n\n    map.on('resize', onResize)\n\n    setTimeout(() => setMounted(true));\n\n  })\n\n  const onResize = useFunction(() => {\n    if (!ref.current?.state) return;\n    const state = ref.current.state;\n    const map = ref.current.map;\n    const canvas = map.getCanvas();\n    state.setSize(canvas.width, canvas.height);\n  })\n\n  const onRemove = useFunction((map: MapInstance) => {\n    setTimeout(() => {\n      if (!ref.current) return;\n      ref.current.root.unmount();\n      map.off('resize', onResize)\n    })\n  })\n\n  return { onAdd, onRemove, mounted };\n}"],"names":["useOnAdd","ref","frameloop","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onResize","_a","onRemove"],"mappings":";;;;AAOO,SAASA,EAASC,GAAe,EAAE,WAAAC,GAAW,GAAGC,KAA+C;AAErG,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA8B;AAEnE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAASO;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAGP,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAACY,MAAU;AAEpB,QAAIb,MAAc,YAChBa,EAAM,IAAI;AAAA,UACR,WAAAb;AAAA,UACA,YAAY,MAAM;AAChB,YAAAO,EAAI,eAAe;AAAA,UACrB;AAAA,QAAA,CACD,GAGHR,EAAI,UAAU;AAAA,UACZ,OAAAc;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAIIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA,GAKlCA,EAAM,OAAO,mBAAmB;AAAA,MAClC;AAAA,MACA,MAAM;AAAA,QACJ,OAAOJ,EAAO;AAAA,QACd,QAAQA,EAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAGR,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,IAAA,CACD,GAEDF,EAAI,UAAU;AAAA,MACZ,KAAAQ;AAAA,MACA,MAAAG;AAAA,IAAA,GAGEH,EAAA,GAAG,UAAUO,CAAQ,GAEd,WAAA,MAAMX,EAAW,EAAI,CAAC;AAAA,EAAA,CAElC,GAEKW,IAAWR,EAAY,MAAM;;AAC7B,QAAA,GAACS,IAAAhB,EAAI,YAAJ,QAAAgB,EAAa;AAAO;AACnB,UAAAF,IAAQd,EAAI,QAAQ,OAEpBU,IADMV,EAAI,QAAQ,IACL;AACnB,IAAAc,EAAM,QAAQJ,EAAO,OAAOA,EAAO,MAAM;AAAA,EAAA,CAC1C,GAEKO,IAAWV,EAAY,CAACC,MAAqB;AACjD,eAAW,MAAM;AACf,MAAKR,EAAI,YACLA,EAAA,QAAQ,KAAK,WACbQ,EAAA,IAAI,UAAUO,CAAQ;AAAA,IAAA,CAC3B;AAAA,EAAA,CACF;AAEM,SAAA,EAAE,OAAAT,GAAO,UAAAW,GAAU,SAAAd;AAC5B;"}

package/dist/{maplibre/es/main.js6.mjs → es/main6.mjs}

@@ -1,5 +1,5 @@
 import { Matrix4 as u } from "three";
-import { useFunction as m } from "./main.js8.mjs";
+import { useFunction as m } from "./main8.mjs";
 const p = new u();
 function g(n, r, o) {
   return m((l, a) => {
@@ -13,4 +13,4 @@ function g(n, r, o) {
 export {
   g as useRender
 };
-//# sourceMappingURL=main.js6.mjs.map
+//# sourceMappingURL=main6.mjs.map

package/dist/es/main6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main6.mjs","sources":["../../src/core/use-render.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nconst mx = new Matrix4();\n\nexport function useRender(\n  m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[]) => {\n    if (!stateRef.current?.state) return;\n    const camera = stateRef.current.state.camera;\n    const gl = stateRef.current.state.gl;\n    const advance = stateRef.current.state.advance;\n    camera.projectionMatrix.fromArray(matrix).multiply(mx.fromArray(m4));\n    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') stateRef.current.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":["mx","Matrix4","useRender","m4","stateRef","frameloop","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAIA,MAAMA,IAAK,IAAIC;AAEC,SAAAC,EACdC,GAAkBC,GAAoBC,GACtC;AAcO,SAZQC,EAAY,CAACC,GAA6BC,MAAqB;;AACxE,QAAA,GAACC,IAAAL,EAAS,YAAT,QAAAK,EAAkB;AAAO;AACxB,UAAAC,IAASN,EAAS,QAAQ,MAAM,QAChCO,IAAKP,EAAS,QAAQ,MAAM,IAC5BQ,IAAUR,EAAS,QAAQ,MAAM;AAChC,IAAAM,EAAA,iBAAiB,UAAUF,CAAM,EAAE,SAASR,EAAG,UAAUG,CAAE,CAAC,GACnEO,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAC5BP,MAAc,YAAmBD,EAAA,QAAQ,IAAI;EAAe,CACjE;AAIH;"}

package/dist/{maplibre/es/main.js7.mjs → es/main7.mjs}

@@ -53,4 +53,4 @@ function u() {
 export {
   u as createEvents
 };
-//# sourceMappingURL=main.js7.mjs.map
+//# sourceMappingURL=main7.mjs.map

package/dist/es/main7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main7.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;\n        state.size.height = state.gl.domElement.height;\n        state.pointer.x = (event.offsetX / (state.size.width / window.devicePixelRatio)) * 2 - 1;\n        state.pointer.y = 1 - (event.offsetY / (state.size.height / window.devicePixelRatio)) * 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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"}

package/dist/{maplibre/es/main.js8.mjs → es/main8.mjs}

@@ -6,4 +6,4 @@ const o = (r) => {
 export {
   o as useFunction
 };
-//# sourceMappingURL=main.js8.mjs.map
+//# sourceMappingURL=main8.mjs.map

package/dist/es/main8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main8.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":["useFunction","callback","callbackRef","useRef","useCallback","args"],"mappings":";AAGa,MAAAA,IAAc,CAAoCC,MAAmB;AAC1E,QAAAC,IAAcC,EAAOF,CAAQ;AACnC,SAAAC,EAAY,UAAUD,GACfG,EAAY,IAAIC,MACdH,EAAY,QAAQ,GAAGG,CAAI,GACjC,CAAE,CAAA;AACP;"}

package/dist/maplibre/cjs/main.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),y=require("@react-three/fiber"),E=require("maplibre-gl"),l=require("react"),b=require("react-map-gl/maplibre"),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),x=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),x.setFromEuler(R.set(-Math.PI*.5,0,0)),z.compose(w,x,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}=y.createEvents(n);return{priority:1,enabled:!0,compute(t,e){e.size.width=e.gl.domElement.width,e.size.height=e.gl.domElement.height,e.pointer.x=t.offsetX/(e.size.width/window.devicePixelRatio)*2-1,e.pointer.y=1-t.offsetY/(e.size.height/window.devicePixelRatio)*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 p=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=p((i,s)=>{const m=i.getCanvas(),v=y.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:f=>{r==="demand"&&f.set({frameloop:r,invalidate:()=>{i.triggerRepaint()}}),n.current={state:f,map:i,root:v},f.gl.forceContextLoss=()=>{},f.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=p(()=>{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=p(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 p((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}};y.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;

package/dist/maplibre/es/main.mjs

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

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

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

package/dist/maplibre/es/main2.mjs

@@ -0,0 +1,38 @@
+import { jsx as i } from "react/jsx-runtime";
+import { extend as d } from "@react-three/fiber";
+import { MercatorCoordinate as c } from "maplibre-gl";
+import { memo as L, useMemo as x } from "react";
+import { Layer as M } from "react-map-gl/maplibre";
+import * as v from "three";
+import { coordsToMatrix as y } from "./main3.mjs";
+import { useCanvas as C } from "./main4.mjs";
+d(v);
+const A = L(({
+  longitude: o,
+  latitude: r,
+  altitude: m = 0,
+  frameloop: e = "always",
+  ...t
+}) => {
+  const n = x(() => y({
+    latitude: r,
+    longitude: o,
+    altitude: m,
+    fromLngLat: c.fromLngLat
+  }), [r, o, m]), { id: s, onAdd: a, onRemove: f, render: p } = C({ m4: n, frameloop: e, ...t });
+  return /* @__PURE__ */ i(
+    M,
+    {
+      id: s,
+      type: "custom",
+      renderingMode: "3d",
+      onAdd: a,
+      onRemove: f,
+      render: p
+    }
+  );
+});
+export {
+  A as Canvas
+};
+//# sourceMappingURL=main2.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main2.mjs","sources":["../../../src/maplibre/canvas.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"maplibre-gl\";\nimport { PropsWithChildren, memo, useMemo } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"../core/coords-to-matrix\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nexport interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number,\n  frameloop?: 'always' | 'demand',\n}\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always', ...renderProps\n}) => {\n\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat: MercatorCoordinate.fromLngLat,\n  }), [latitude, longitude, altitude]);\n\n  const { id, onAdd, onRemove, render } = useCanvas({ m4, frameloop, ...renderProps });\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","Canvas","memo","longitude","latitude","altitude","frameloop","renderProps","m4","useMemo","coordsToMatrix","MercatorCoordinate","id","onAdd","onRemove","render","useCanvas","jsx","Layer"],"mappings":";;;;;;;;AAQAA,EAAOC,CAAK;AAUC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,WAAAC,IAAY;AAAA,EAAU,GAAGC;AAC3B,MAAM;AAEE,QAAAC,IAAKC,EAAQ,MAAMC,EAAe;AAAA,IACtC,UAAAN;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,IAAU,YAAYM,EAAmB;AAAA,EAC/D,CAAA,GAAG,CAACP,GAAUD,GAAWE,CAAQ,CAAC,GAE7B,EAAE,IAAAO,GAAI,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAO,IAAIC,EAAU,EAAE,IAAAR,GAAI,WAAAF,GAAW,GAAGC,EAAa,CAAA;AAE5E,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;"}

package/dist/{es/main.js3.mjs → maplibre/es/main3.mjs}

@@ -7,4 +7,4 @@ function d({ longitude: c, latitude: a, altitude: i, fromLngLat: u }) {
 export {
   d as coordsToMatrix
 };
-//# sourceMappingURL=main.js3.mjs.map
+//# sourceMappingURL=main3.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main3.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":["quat","Quaternion","euler","Euler","pos","Vector3","scale","m4","Matrix4","coordsToMatrix","longitude","latitude","altitude","fromLngLat","center","scaleUnit"],"mappings":";AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID,KACZE,IAAK,IAAIC;AAGR,SAASC,EAAe,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,YAAAC,KAE7D;AACD,QAAMC,IAASD,EAAW,CAACH,GAAWC,CAAQ,GAAGC,CAAQ,GACnDG,IAAYD,EAAO;AACzB,SAAAV,EAAI,IAAIU,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCR,EAAM,IAAIS,GAAW,CAACA,GAAWA,CAAS,GACrCf,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzCK,EAAG,QAAQH,GAAKJ,GAAMM,CAAK,EAAE;AACtC;"}

package/dist/maplibre/es/main4.mjs

@@ -0,0 +1,19 @@
+import { jsx as c, Fragment as i } from "react/jsx-runtime";
+import { useId as p, useRef as R, useEffect as a } from "react";
+import { useOnAdd as v } from "./main5.mjs";
+import { useRender as x } from "./main6.mjs";
+const E = ({
+  m4: o,
+  children: r,
+  frameloop: t,
+  ...s
+}) => {
+  const u = p(), e = R(), { onAdd: m, onRemove: d, mounted: n } = v(e, { frameloop: t, ...s }), f = x(o, e, t);
+  return a(() => {
+    n && e.current && e.current.root.render(/* @__PURE__ */ c(i, { children: r }));
+  }, [e, n, r]), { id: u, onAdd: m, onRemove: d, render: f };
+};
+export {
+  E as useCanvas
+};
+//# sourceMappingURL=main4.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main4.mjs","sources":["../../../src/core/use-canvas.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId, useRef } from \"react\";\nimport { Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  m4: Matrix4Tuple;\n}\n\nexport const useCanvas = (({\n  m4, children, frameloop, ...renderProps\n}: useCanvasProps) => {\n  const id = useId();\n\n  const stateRef: StateRef = useRef();\n\n  const { onAdd, onRemove, mounted } = useOnAdd(stateRef, { frameloop, ...renderProps });\n\n  const render = useRender(m4, stateRef, frameloop);\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!stateRef.current) return;\n    stateRef.current.root.render(<>{children}</>);\n  }, [stateRef, mounted, children])\n\n  return { id, onAdd, onRemove, render }\n})"],"names":["useCanvas","m4","children","frameloop","renderProps","id","useId","stateRef","useRef","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment"],"mappings":";;;;AAYO,MAAMA,IAAa,CAAC;AAAA,EACzB,IAAAC;AAAA,EAAI,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,GAAGC;AAC9B,MAAsB;AACpB,QAAMC,IAAKC,KAELC,IAAqBC,KAErB,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,MAAYC,EAASL,GAAU,EAAE,WAAAJ,GAAW,GAAGC,EAAA,CAAa,GAE/ES,IAASC,EAAUb,GAAIM,GAAUJ,CAAS;AAEhD,SAAAY,EAAU,MAAM;AACd,IAAKJ,KACAJ,EAAS,WACdA,EAAS,QAAQ,KAAK,OAAO,gBAAAS,EAAAC,GAAA,EAAG,UAAAf,EAAS,CAAA,CAAG;AAAA,EAC3C,GAAA,CAACK,GAAUI,GAAST,CAAQ,CAAC,GAEzB,EAAE,IAAAG,GAAI,OAAAI,GAAO,UAAAC,GAAU,QAAAG,EAAO;AACvC;"}

package/dist/{es/main.js8.mjs → maplibre/es/main5.mjs}

@@ -1,7 +1,7 @@
 import { createRoot as v } from "@react-three/fiber";
 import { useState as h } from "react";
-import { createEvents as d } from "./main.js10.mjs";
-import { useFunction as a } from "./main.js11.mjs";
+import { createEvents as d } from "./main7.mjs";
+import { useFunction as a } from "./main8.mjs";
 function w(e, { frameloop: u, ...n }) {
   const [l, r] = h(!1), g = a((t, m) => {
     const o = t.getCanvas(), i = v(o);
@@ -57,4 +57,4 @@ function w(e, { frameloop: u, ...n }) {
 export {
   w as useOnAdd
 };
-//# sourceMappingURL=main.js8.mjs.map
+//# sourceMappingURL=main5.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main5.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { MapInstance } from \"./generic-map\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>) {\n\n  const [mounted, setMounted] = useState(false);\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\n        if (frameloop === 'demand') {\n          state.set({\n            frameloop,\n            invalidate: () => {\n              map.triggerRepaint();\n            }\n          })\n        }\n\n        ref.current = {\n          state,\n          map,\n          root,\n        }\n\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\n\n        // we update the camera on create rather than on config\n        // because otherwise some components may use it too early\n        // and get NaN values they can't recover from (drei HTML)\n        state.camera.matrixAutoUpdate = false;\n      },\n      size: {\n        width: canvas.clientWidth,\n        height: canvas.clientHeight,\n        top: 0,\n        left: 0,\n        ...renderProps?.size,\n      },\n    });\n\n    ref.current = {\n      map,\n      root,\n    }\n\n    map.on('resize', onResize)\n\n    setTimeout(() => setMounted(true));\n\n  })\n\n  const onResize = useFunction(() => {\n    if (!ref.current?.state) return;\n    const state = ref.current.state;\n    const map = ref.current.map;\n    const canvas = map.getCanvas();\n    state.setSize(canvas.width, canvas.height);\n  })\n\n  const onRemove = useFunction((map: MapInstance) => {\n    setTimeout(() => {\n      if (!ref.current) return;\n      ref.current.root.unmount();\n      map.off('resize', onResize)\n    })\n  })\n\n  return { onAdd, onRemove, mounted };\n}"],"names":["useOnAdd","ref","frameloop","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onResize","_a","onRemove"],"mappings":";;;;AAOO,SAASA,EAASC,GAAe,EAAE,WAAAC,GAAW,GAAGC,KAA+C;AAErG,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA8B;AAEnE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAASO;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAGP,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAACY,MAAU;AAEpB,QAAIb,MAAc,YAChBa,EAAM,IAAI;AAAA,UACR,WAAAb;AAAA,UACA,YAAY,MAAM;AAChB,YAAAO,EAAI,eAAe;AAAA,UACrB;AAAA,QAAA,CACD,GAGHR,EAAI,UAAU;AAAA,UACZ,OAAAc;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAIIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA,GAKlCA,EAAM,OAAO,mBAAmB;AAAA,MAClC;AAAA,MACA,MAAM;AAAA,QACJ,OAAOJ,EAAO;AAAA,QACd,QAAQA,EAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAGR,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,IAAA,CACD,GAEDF,EAAI,UAAU;AAAA,MACZ,KAAAQ;AAAA,MACA,MAAAG;AAAA,IAAA,GAGEH,EAAA,GAAG,UAAUO,CAAQ,GAEd,WAAA,MAAMX,EAAW,EAAI,CAAC;AAAA,EAAA,CAElC,GAEKW,IAAWR,EAAY,MAAM;;AAC7B,QAAA,GAACS,IAAAhB,EAAI,YAAJ,QAAAgB,EAAa;AAAO;AACnB,UAAAF,IAAQd,EAAI,QAAQ,OAEpBU,IADMV,EAAI,QAAQ,IACL;AACnB,IAAAc,EAAM,QAAQJ,EAAO,OAAOA,EAAO,MAAM;AAAA,EAAA,CAC1C,GAEKO,IAAWV,EAAY,CAACC,MAAqB;AACjD,eAAW,MAAM;AACf,MAAKR,EAAI,YACLA,EAAA,QAAQ,KAAK,WACbQ,EAAA,IAAI,UAAUO,CAAQ;AAAA,IAAA,CAC3B;AAAA,EAAA,CACF;AAEM,SAAA,EAAE,OAAAT,GAAO,UAAAW,GAAU,SAAAd;AAC5B;"}

package/dist/{es/main.js9.mjs → maplibre/es/main6.mjs}

@@ -1,5 +1,5 @@
 import { Matrix4 as u } from "three";
-import { useFunction as m } from "./main.js11.mjs";
+import { useFunction as m } from "./main8.mjs";
 const p = new u();
 function g(n, r, o) {
   return m((l, a) => {
@@ -13,4 +13,4 @@ function g(n, r, o) {
 export {
   g as useRender
 };
-//# sourceMappingURL=main.js9.mjs.map
+//# sourceMappingURL=main6.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main6.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nconst mx = new Matrix4();\n\nexport function useRender(\n  m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[]) => {\n    if (!stateRef.current?.state) return;\n    const camera = stateRef.current.state.camera;\n    const gl = stateRef.current.state.gl;\n    const advance = stateRef.current.state.advance;\n    camera.projectionMatrix.fromArray(matrix).multiply(mx.fromArray(m4));\n    camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') stateRef.current.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":["mx","Matrix4","useRender","m4","stateRef","frameloop","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAIA,MAAMA,IAAK,IAAIC;AAEC,SAAAC,EACdC,GAAkBC,GAAoBC,GACtC;AAcO,SAZQC,EAAY,CAACC,GAA6BC,MAAqB;;AACxE,QAAA,GAACC,IAAAL,EAAS,YAAT,QAAAK,EAAkB;AAAO;AACxB,UAAAC,IAASN,EAAS,QAAQ,MAAM,QAChCO,IAAKP,EAAS,QAAQ,MAAM,IAC5BQ,IAAUR,EAAS,QAAQ,MAAM;AAChC,IAAAM,EAAA,iBAAiB,UAAUF,CAAM,EAAE,SAASR,EAAG,UAAUG,CAAE,CAAC,GACnEO,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAC5BP,MAAc,YAAmBD,EAAA,QAAQ,IAAI;EAAe,CACjE;AAIH;"}

package/dist/{es/main.js10.mjs → maplibre/es/main7.mjs}

@@ -53,4 +53,4 @@ function u() {
 export {
   u as createEvents
 };
-//# sourceMappingURL=main.js10.mjs.map
+//# sourceMappingURL=main7.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main7.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;\n        state.size.height = state.gl.domElement.height;\n        state.pointer.x = (event.offsetX / (state.size.width / window.devicePixelRatio)) * 2 - 1;\n        state.pointer.y = 1 - (event.offsetY / (state.size.height / window.devicePixelRatio)) * 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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"}

package/dist/{es/main.js11.mjs → maplibre/es/main8.mjs}

@@ -6,4 +6,4 @@ const o = (r) => {
 export {
   o as useFunction
 };
-//# sourceMappingURL=main.js11.mjs.map
+//# sourceMappingURL=main8.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main8.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":["useFunction","callback","callbackRef","useRef","useCallback","args"],"mappings":";AAGa,MAAAA,IAAc,CAAoCC,MAAmB;AAC1E,QAAAC,IAAcC,EAAOF,CAAQ;AACnC,SAAAC,EAAY,UAAUD,GACfG,EAAY,IAAIC,MACdH,EAAY,QAAQ,GAAGG,CAAI,GACjC,CAAE,CAAA;AACP;"}

package/example-mapbox/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "example-mapbox",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "yarn ladle serve",
+    "ts": "tsc -w"
+  },
+  "dependencies": {
+    "@ladle/react": "^2.15.0",
+    "@react-three/drei": "^9.77.10",
+    "@react-three/fiber": "^8.13.4",
+    "leva": "^0.9.35",
+    "mapbox-gl": "^2.15.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.0",
+    "react-three-map": "^0.2.1",
+    "three": "~0.153.0",
+    "three-stdlib": "^2.23.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/three": "^0.152.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9"
+  }
+}

package/example-mapbox/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "port": 61000
+}

package/example-mapbox/src/canvas.basic.stories.tsx

@@ -0,0 +1,84 @@
+import { useFrame, Vector3 } from "@react-three/fiber";
+import { useControls } from "leva";
+import Mapbox from "mapbox-gl";
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { FC, PropsWithChildren, useRef, useState } from "react";
+import Map from 'react-map-gl';
+import { Canvas } from "react-three-map";
+import { Mesh } from "three";
+
+export default { title: 'Canvas' }
+
+const Box: FC<{ position: Vector3 }> = (props) => {
+  // This reference gives us direct access to the THREE.Mesh object
+  const ref = useRef<Mesh>(null)
+  // Hold state for hovered and clicked events
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((_state, delta) => {
+    if (!ref.current) return;
+    ref.current.rotation.x += delta;
+    ref.current.rotation.z -= delta;
+  })
+  // Return the view, these are regular Threejs elements expressed in JSX
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={() => click(!clicked)}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+export function BasicExample() {
+
+  const { mapboxToken } = useControls({
+    mapboxToken: {
+      value: import.meta.env.VITE_MAPBOX_TOKEN || '',
+      label: 'mapbox token',
+    }
+  })
+
+  Mapbox.accessToken = mapboxToken;
+
+  return <div style={{ height: '100vh' }}>
+    {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
+    {mapboxToken && <Map
+      antialias
+      initialViewState={{
+        latitude: 51,
+        longitude: 0,
+        zoom: 13,
+        pitch: 60,
+      }}
+      mapStyle="mapbox://styles/mapbox/streets-v12"
+    >
+      <Canvas latitude={51} longitude={0}>
+        <hemisphereLight
+          args={["#ffffff", "#60666C"]}
+          position={[1, 4.5, 3]}
+        />
+        <object3D scale={500}>
+          <Box position={[-1.2, 1, 0]} />
+          <Box position={[1.2, 1, 0]} />
+        </object3D>
+      </Canvas>
+    </Map>}
+  </div>
+}
+
+const Center = ({ children }: PropsWithChildren) => (
+  <div style={{
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }}>{children}</div>
+)