react-three-map 0.3.5 → 0.4.0

package/dist/maplibre/es/main5.mjs

@@ -1,63 +1,6 @@
-import { createRoot as v } from "@react-three/fiber";
-import { useState as h } from "react";
-import { createEvents as d } from "./main7.mjs";
-import { useFunction as c } from "./main8.mjs";
-function w(e, { frameloop: u, ...n }) {
-  const [l, r] = h(!1), g = c((t, m) => {
-    const o = t.getCanvas(), i = v(o);
-    i.configure({
-      dpr: window.devicePixelRatio,
-      events: d(),
-      ...n,
-      frameloop: "never",
-      gl: {
-        context: m,
-        depth: !0,
-        autoClear: !1,
-        antialias: !0,
-        ...n == null ? void 0 : n.gl
-      },
-      onCreated: (a) => {
-        u === "demand" && a.set({
-          frameloop: u,
-          invalidate: () => {
-            t.triggerRepaint();
-          }
-        }), e.current = {
-          state: a,
-          map: t,
-          root: i
-        }, a.gl.forceContextLoss = () => {
-        };
-      },
-      camera: {
-        matrixAutoUpdate: !1
-      },
-      size: {
-        width: o.clientWidth,
-        height: o.clientHeight,
-        top: 0,
-        left: 0,
-        ...n == null ? void 0 : n.size
-      }
-    }), e.current = {
-      map: t,
-      root: i
-    }, t.on("resize", s), setTimeout(() => r(!0));
-  }), s = c(() => {
-    var i;
-    if (!((i = e.current) != null && i.state))
-      return;
-    const t = e.current.state, o = e.current.map.getCanvas();
-    t.setSize(o.width, o.height);
-  }), f = c((t) => {
-    setTimeout(() => {
-      e.current && (e.current.root.unmount(), t.off("resize", s));
-    });
-  });
-  return { onAdd: g, onRemove: f, mounted: l };
-}
+import { useThree as r } from "@react-three/fiber";
+const m = () => r((e) => e.r3m);
 export {
-  w as useOnAdd
+  m as useR3M
 };
 //# sourceMappingURL=main5.mjs.map

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

@@ -1 +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      },\n      camera: {\n        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;AAAA,MAEpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,MACpB;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;"}
+{"version":3,"file":"main5.mjs","sources":["../../../src/core/store.ts"],"sourcesContent":["import { ReconcilerRoot, RootState, useThree } from \"@react-three/fiber\";\nimport { Matrix4Tuple } from \"three\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\n\n/** react-three-map store */\nexport interface R3mStore {\n  fromLngLat: FromLngLat,\n  map?: MapInstance;\n  mapCamMx?: Matrix4Tuple;\n  state?: RootState\n  root?: ReconcilerRoot<HTMLCanvasElement>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const useR3M = (): R3mStore => useThree((s: any) => s.r3m);"],"names":["useR3M","useThree","s"],"mappings":";AAcO,MAAMA,IAAS,MAAgBC,EAAS,CAACC,MAAWA,EAAE,GAAG;"}

package/dist/maplibre/es/main6.mjs

@@ -1,16 +1,9 @@
-import { Matrix4 as u } from "three";
-import { useFunction as m } from "./main8.mjs";
-const p = new u();
-function g(n, r, o) {
-  return m((l, a) => {
-    var e;
-    if (!((e = r.current) != null && e.state))
-      return;
-    const t = r.current.state.camera, c = r.current.state.gl, i = r.current.state.advance;
-    t.projectionMatrix.fromArray(a).multiply(p.fromArray(n)), t.projectionMatrixInverse.copy(t.projectionMatrix).invert(), c.resetState(), i(Date.now() * 1e-3, !0), o === "always" && r.current.map.triggerRepaint();
-  });
+import { Matrix4 as i } from "three";
+const n = new i();
+function p(r, o, t) {
+  r.projectionMatrix.fromArray(t).multiply(n.fromArray(o)), r.projectionMatrixInverse.copy(r.projectionMatrix).invert();
 }
 export {
-  g as useRender
+  p as syncCamera
 };
 //# sourceMappingURL=main6.mjs.map

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

@@ -1 +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;"}
+{"version":3,"file":"main6.mjs","sources":["../../../src/core/sync-camera.ts"],"sourcesContent":["import { Matrix4, Matrix4Tuple, PerspectiveCamera } from \"three\";\n\nconst mx = new Matrix4();\n\nexport function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple) {\n  camera.projectionMatrix.fromArray(mapCamMx).multiply(mx.fromArray(origin));\n  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n}"],"names":["mx","Matrix4","syncCamera","camera","origin","mapCamMx"],"mappings":";AAEA,MAAMA,IAAK,IAAIC;AAEC,SAAAC,EAAWC,GAA2BC,GAAsBC,GAAwB;AAC3F,EAAAF,EAAA,iBAAiB,UAAUE,CAAQ,EAAE,SAASL,EAAG,UAAUI,CAAM,CAAC,GACzED,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE;AAC/D;"}

package/dist/maplibre/es/main7.mjs

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

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

@@ -1 +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 / window.devicePixelRatio;\n        state.size.height = state.gl.domElement.height / window.devicePixelRatio;\n        state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n        state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;\n        state.raycaster.camera = state.camera;\n        state.raycaster.ray.origin.setScalar(0).applyMatrix4(state.camera.projectionMatrixInverse);\n        state.raycaster.ray.direction\n          .set(state.pointer.x, state.pointer.y, 1)\n          .applyMatrix4(state.camera.projectionMatrixInverse)\n          .sub(state.raycaster.ray.origin)\n          .normalize();\n      },\n      connected: undefined,\n      handlers: Object.keys(DOM_EVENTS).reduce(\n        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),\n        {}\n      ) as unknown as Events,\n      update: () => {\n        const { events, internal } = store.getState();\n        if (internal.lastEvent?.current && events.handlers) {\n          events.handlers.onPointerMove(internal.lastEvent.current);\n        }\n      },\n      connect: (target: HTMLElement) => {\n        const { set, events } = store.getState();\n        events.disconnect?.();\n        set((state) => ({ events: { ...state.events, connected: target.parentNode } }));\n        Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n          const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n          target.addEventListener(eventName, event, { passive });\n        });\n      },\n      disconnect: () => {\n        const { set, events } = store.getState();\n        if (events.connected) {\n          Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n            if (events && events.connected instanceof HTMLElement) {\n              const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n              events.connected.removeEventListener(eventName, event);\n            }\n          });\n          set((state) => ({ events: { ...state.events, connected: undefined } }));\n        }\n      },\n    };\n  };\n}\n"],"names":["DOM_EVENTS","createEvents","store","handlePointer","createFiberEvents","event","state","acc","key","events","internal","_a","target","set","name","eventName","passive"],"mappings":"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"}
+{"version":3,"file":"main7.mjs","sources":["../../../src/core/use-coords.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\n\ntype Props = Parameters<typeof coordsToMatrix>[0];\n\n/** calculate matrix from coordinates */\nexport function useCoords({latitude, longitude, altitude, fromLngLat}: Props) {\n  const m4 = useMemo(() => coordsToMatrix({\n    latitude, longitude, altitude, fromLngLat,\n  }), [latitude, longitude, altitude, fromLngLat]);\n\n  return m4;\n}"],"names":["useCoords","latitude","longitude","altitude","fromLngLat","useMemo","coordsToMatrix"],"mappings":";;AAMO,SAASA,EAAU,EAAC,UAAAC,GAAU,WAAAC,GAAW,UAAAC,GAAU,YAAAC,KAAoB;AAKrE,SAJIC,EAAQ,MAAMC,EAAe;AAAA,IACtC,UAAAL;AAAA,IAAU,WAAAC;AAAA,IAAW,UAAAC;AAAA,IAAU,YAAAC;AAAA,EAAA,CAChC,GAAG,CAACH,GAAUC,GAAWC,GAAUC,CAAU,CAAC;AAGjD;"}

package/dist/maplibre/es/main8.mjs

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

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

@@ -1 +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;"}
+{"version":3,"file":"main8.mjs","sources":["../../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":["useCreateRoot","children","frameloop","fromLngLat","renderProps","id","useId","onAdd","onRemove","mounted","r3mRef","useOnAdd","useEffect","jsx","Fragment"],"mappings":";;;AAUO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,YAAAC;AAAA,EAAY,GAAGC;AACtC,MAAsB;AAEpB,QAAMC,IAAKC,KAEL,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,GAAS,QAAAC,EAAO,IAAIC,EAASR,GAAY,EAAE,WAAAD,GAAW,GAAGE,EAAa,CAAA;AAE/F,SAAAQ,EAAU,MAAM;AACd,IAAKH,KACAC,EAAO,QAAQ,QACpBA,EAAO,QAAQ,KAAK,OAAO,gBAAAG,EAAAC,GAAA,EACxB,UAAAb,EACH,CAAA,CAAG;AAAA,EACF,GAAA,CAACS,GAAQD,GAASR,CAAQ,CAAC,GAEvB,EAAE,IAAAI,GAAI,OAAAE,GAAO,UAAAC,GAAU,QAAAE,EAAO;AACvC;"}

package/dist/maplibre/es/main9.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"main9.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n  origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n  const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n    const r3m = r3mRef.current;\n    if (!r3m.state || !r3m.map) return;\n    const camera = r3m.state.camera;\n    const gl = r3m.state.gl;\n    const advance = r3m.state.advance;\n    r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n    syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n    gl.resetState();\n    advance(Date.now() * 0.001, true);\n    if (frameloop === 'always') r3m.map.triggerRepaint();\n  })\n\n  return render;\n\n}"],"names":["useRender","origin","r3mRef","frameloop","useFunction","_gl","mapCamMx","r3m","camera","gl","advance","syncCamera"],"mappings":";;AAMgB,SAAAA,EACdC,GAAsBC,GAAoCC,GAC1D;AAeO,SAbQC,EAAY,CAACC,GAA6BC,MAAuB;AAC9E,UAAMC,IAAML,EAAO;AACnB,QAAI,CAACK,EAAI,SAAS,CAACA,EAAI;AAAK;AACtB,UAAAC,IAASD,EAAI,MAAM,QACnBE,IAAKF,EAAI,MAAM,IACfG,IAAUH,EAAI,MAAM;AAC1B,IAAAA,EAAI,WAAWD,GACJK,EAAAH,GAA6BP,GAAQK,CAAwB,GACxEG,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAC5BP,MAAc,YAAUI,EAAI,IAAI;EAAe,CACpD;AAIH;"}

package/dist/maplibre/types/api/canvas-props.d.ts

@@ -0,0 +1,8 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    longitude: number;
+    latitude: number;
+    altitude?: number;
+    frameloop?: 'always' | 'demand';
+}

package/dist/maplibre/types/api/coordinates.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+export interface CoordinatesProps extends PropsWithChildren {
+    longitude: number;
+    latitude: number;
+    altitude?: number;
+}
+export declare const Coordinates: import("react").NamedExoticComponent<CoordinatesProps>;

package/dist/maplibre/types/core/store.d.ts

@@ -0,0 +1,12 @@
+import { ReconcilerRoot, RootState } from "@react-three/fiber";
+import { Matrix4Tuple } from "three";
+import { FromLngLat, MapInstance } from "./generic-map";
+/** react-three-map store */
+export interface R3mStore {
+    fromLngLat: FromLngLat;
+    map?: MapInstance;
+    mapCamMx?: Matrix4Tuple;
+    state?: RootState;
+    root?: ReconcilerRoot<HTMLCanvasElement>;
+}
+export declare const useR3M: () => R3mStore;

package/dist/maplibre/types/core/sync-camera.d.ts

@@ -0,0 +1,2 @@
+import { Matrix4Tuple, PerspectiveCamera } from "three";
+export declare function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple): void;

package/dist/maplibre/types/core/use-canvas.d.ts

@@ -1,13 +1,11 @@
-import { RenderProps } from "@react-three/fiber";
-import { PropsWithChildren } from "react";
-import { Matrix4Tuple } from "three";
-export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
-    frameloop: 'always' | 'demand';
-    m4: Matrix4Tuple;
+import { CanvasProps } from "../api/canvas-props";
+import { FromLngLat } from "./generic-map";
+export interface useCanvasProps extends CanvasProps {
+    fromLngLat: FromLngLat;
 }
-export declare const useCanvas: ({ m4, children, frameloop, ...renderProps }: useCanvasProps) => {
+export declare function useCanvas({ longitude, latitude, altitude, frameloop, fromLngLat, ...renderProps }: useCanvasProps): {
     id: string;
     onAdd: (map: import("./generic-map").MapInstance, gl: WebGLRenderingContext) => void;
-    onRemove: (map: import("./generic-map").MapInstance) => void;
-    render: (_gl: WebGL2RenderingContext, matrix: number[]) => void;
+    onRemove: () => void;
+    render: (_gl: WebGL2RenderingContext, mapCamMx: number[]) => void;
 };

package/dist/maplibre/types/core/use-coords.d.ts

@@ -0,0 +1,5 @@
+import { coordsToMatrix } from "./coords-to-matrix";
+type Props = Parameters<typeof coordsToMatrix>[0];
+/** calculate matrix from coordinates */
+export declare function useCoords({ latitude, longitude, altitude, fromLngLat }: Props): import("three").Matrix4Tuple;
+export {};

package/dist/maplibre/types/core/use-create-root.d.ts

@@ -0,0 +1,13 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+import { FromLngLat } from "./generic-map";
+export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    frameloop: 'always' | 'demand';
+    fromLngLat: FromLngLat;
+}
+export declare const useCreateRoot: ({ children, frameloop, fromLngLat, ...renderProps }: useCanvasProps) => {
+    id: string;
+    onAdd: (map: import("./generic-map").MapInstance, gl: WebGLRenderingContext) => void;
+    onRemove: () => void;
+    r3mRef: import("react").MutableRefObject<import("./store").R3mStore>;
+};

package/dist/maplibre/types/core/use-on-add.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import { RenderProps } from "@react-three/fiber";
-import { MapInstance } from "./generic-map";
-import { StateRef } from "./state-ref";
-export declare function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>): {
+import { FromLngLat, MapInstance } from "./generic-map";
+import { R3mStore } from "./store";
+export declare function useOnAdd(fromLngLat: FromLngLat, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>): {
     onAdd: (map: MapInstance, gl: WebGLRenderingContext) => void;
-    onRemove: (map: MapInstance) => void;
+    onRemove: () => void;
     mounted: boolean;
+    r3mRef: import("react").MutableRefObject<R3mStore>;
 };

package/dist/maplibre/types/core/use-render.d.ts

@@ -1,3 +1,4 @@
+import { MutableRefObject } from "react";
 import { Matrix4Tuple } from "three";
-import { StateRef } from "./state-ref";
-export declare function useRender(m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'): (_gl: WebGL2RenderingContext, matrix: number[]) => void;
+import { R3mStore } from "./store";
+export declare function useRender(origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'): (_gl: WebGL2RenderingContext, mapCamMx: number[]) => void;

package/dist/maplibre/types/maplibre/canvas.d.ts

@@ -1,10 +1,4 @@
-import { RenderProps } from "@react-three/fiber";
-import { PropsWithChildren } from "react";
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
-    longitude: number;
-    latitude: number;
-    altitude?: number;
-    frameloop?: 'always' | 'demand';
-}
+/// <reference types="react" />
+import { CanvasProps } from "../api/canvas-props";
 /** react`-three-fiber` canvas inside `MapLibre` */
 export declare const Canvas: import("react").NamedExoticComponent<CanvasProps>;

package/dist/maplibre/types/maplibre.index.d.ts

@@ -1 +1,3 @@
 export * from './maplibre/canvas';
+export * from './api/canvas-props';
+export * from './api/coordinates';

package/dist/types/api/canvas-props.d.ts

@@ -0,0 +1,8 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    longitude: number;
+    latitude: number;
+    altitude?: number;
+    frameloop?: 'always' | 'demand';
+}

package/dist/types/api/coordinates.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+export interface CoordinatesProps extends PropsWithChildren {
+    longitude: number;
+    latitude: number;
+    altitude?: number;
+}
+export declare const Coordinates: import("react").NamedExoticComponent<CoordinatesProps>;

package/dist/types/core/store.d.ts

@@ -0,0 +1,12 @@
+import { ReconcilerRoot, RootState } from "@react-three/fiber";
+import { Matrix4Tuple } from "three";
+import { FromLngLat, MapInstance } from "./generic-map";
+/** react-three-map store */
+export interface R3mStore {
+    fromLngLat: FromLngLat;
+    map?: MapInstance;
+    mapCamMx?: Matrix4Tuple;
+    state?: RootState;
+    root?: ReconcilerRoot<HTMLCanvasElement>;
+}
+export declare const useR3M: () => R3mStore;

package/dist/types/core/sync-camera.d.ts

@@ -0,0 +1,2 @@
+import { Matrix4Tuple, PerspectiveCamera } from "three";
+export declare function syncCamera(camera: PerspectiveCamera, origin: Matrix4Tuple, mapCamMx: Matrix4Tuple): void;

package/dist/types/core/use-canvas.d.ts

@@ -1,13 +1,11 @@
-import { RenderProps } from "@react-three/fiber";
-import { PropsWithChildren } from "react";
-import { Matrix4Tuple } from "three";
-export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
-    frameloop: 'always' | 'demand';
-    m4: Matrix4Tuple;
+import { CanvasProps } from "../api/canvas-props";
+import { FromLngLat } from "./generic-map";
+export interface useCanvasProps extends CanvasProps {
+    fromLngLat: FromLngLat;
 }
-export declare const useCanvas: ({ m4, children, frameloop, ...renderProps }: useCanvasProps) => {
+export declare function useCanvas({ longitude, latitude, altitude, frameloop, fromLngLat, ...renderProps }: useCanvasProps): {
     id: string;
     onAdd: (map: import("./generic-map").MapInstance, gl: WebGLRenderingContext) => void;
-    onRemove: (map: import("./generic-map").MapInstance) => void;
-    render: (_gl: WebGL2RenderingContext, matrix: number[]) => void;
+    onRemove: () => void;
+    render: (_gl: WebGL2RenderingContext, mapCamMx: number[]) => void;
 };

package/dist/types/core/use-coords.d.ts

@@ -0,0 +1,5 @@
+import { coordsToMatrix } from "./coords-to-matrix";
+type Props = Parameters<typeof coordsToMatrix>[0];
+/** calculate matrix from coordinates */
+export declare function useCoords({ latitude, longitude, altitude, fromLngLat }: Props): import("three").Matrix4Tuple;
+export {};

package/dist/types/core/use-create-root.d.ts

@@ -0,0 +1,13 @@
+import { RenderProps } from "@react-three/fiber";
+import { PropsWithChildren } from "react";
+import { FromLngLat } from "./generic-map";
+export interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
+    frameloop: 'always' | 'demand';
+    fromLngLat: FromLngLat;
+}
+export declare const useCreateRoot: ({ children, frameloop, fromLngLat, ...renderProps }: useCanvasProps) => {
+    id: string;
+    onAdd: (map: import("./generic-map").MapInstance, gl: WebGLRenderingContext) => void;
+    onRemove: () => void;
+    r3mRef: import("react").MutableRefObject<import("./store").R3mStore>;
+};

package/dist/types/core/use-on-add.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import { RenderProps } from "@react-three/fiber";
-import { MapInstance } from "./generic-map";
-import { StateRef } from "./state-ref";
-export declare function useOnAdd(ref: StateRef, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>): {
+import { FromLngLat, MapInstance } from "./generic-map";
+import { R3mStore } from "./store";
+export declare function useOnAdd(fromLngLat: FromLngLat, { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>): {
     onAdd: (map: MapInstance, gl: WebGLRenderingContext) => void;
-    onRemove: (map: MapInstance) => void;
+    onRemove: () => void;
     mounted: boolean;
+    r3mRef: import("react").MutableRefObject<R3mStore>;
 };

package/dist/types/core/use-render.d.ts

@@ -1,3 +1,4 @@
+import { MutableRefObject } from "react";
 import { Matrix4Tuple } from "three";
-import { StateRef } from "./state-ref";
-export declare function useRender(m4: Matrix4Tuple, stateRef: StateRef, frameloop: 'always' | 'demand'): (_gl: WebGL2RenderingContext, matrix: number[]) => void;
+import { R3mStore } from "./store";
+export declare function useRender(origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'): (_gl: WebGL2RenderingContext, mapCamMx: number[]) => void;

package/dist/types/mapbox/canvas.d.ts

@@ -1,10 +1,4 @@
-import { RenderProps } from "@react-three/fiber";
-import { PropsWithChildren } from "react";
-export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {
-    longitude: number;
-    latitude: number;
-    altitude?: number;
-    frameloop?: 'always' | 'demand';
-}
-/** react`-three-fiber` canvas inside `MapLibre` */
+/// <reference types="react" />
+import { CanvasProps } from "../api/canvas-props";
+/** react`-three-fiber` canvas inside `Mapbox` */
 export declare const Canvas: import("react").NamedExoticComponent<CanvasProps>;

package/dist/types/mapbox.index.d.ts

@@ -1 +1,3 @@
 export * from './mapbox/canvas';
+export * from './api/canvas-props';
+export * from './api/coordinates';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
@@ -21,11 +21,11 @@
     "build:mapbox": "cross-env LIB_MODE=1 MAP_MODE=1 vite build",
     "postbuild:mapbox": "cross-env LIB_MODE=2 MAP_MODE=1 vite build",
     "release": "yarn build && yarn changeset publish",
-    "lint": "eslint src example-maplibre/src example-mapbox/src --ext ts,tsx --fix",
+    "lint": "eslint src example-maplibre/src example-mapbox/src stories --ext ts,tsx --fix",
     "preview": "vite preview",
     "ts": "tsc -w",
     "ts:check": "tsc",
-    "stories": "yarn ladle serve",
+    "dev": "yarn ladle serve",
     "build:stories": "yarn ladle build"
   },
   "dependencies": {},
@@ -37,7 +37,7 @@
     "@types/node": "^20.3.1",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
-    "@types/three": "^0.152.1",
+    "@types/three": "^0.154.0",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vitejs/plugin-react": "^4.0.0",
@@ -55,7 +55,7 @@
     "three": "^0.153.0",
     "three-stdlib": "^2.23.8",
     "typescript": "~5.0.2",
-    "vite": "^4.3.9",
+    "vite": "^4.4.4",
     "web-ifc-three": "^0.0.125"
   },
   "peerDependencies": {

package/stories/README.md

@@ -0,0 +1 @@
+This folder is being used as both a CodeSandbox CI and also as the main main stories from the root folder.

package/stories/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "stories",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "yarn ladle serve"
+  },
+  "dependencies": {
+    "@ladle/react": "^2.16.0",
+    "@react-three/drei": "^9.78.2",
+    "@react-three/fiber": "^8.13.5",
+    "leva": "^0.9.35",
+    "mapbox-gl": "^2.15.0",
+    "maplibre-gl": "^3.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.2",
+    "react-three-map": "^0.3.5",
+    "three": "^0.154.0",
+    "three-stdlib": "^2.23.13",
+    "web-ifc-three": "^0.0.125"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/three": "^0.154.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.4"
+  }
+}

package/stories/sandbox.config.json

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