react-three-map 0.1.5 → 0.2.0

package/dist/es/main.js10.mjs

@@ -0,0 +1,56 @@
+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, e.size.height = e.gl.domElement.height, e.pointer.x = n.offsetX / (e.size.width / window.devicePixelRatio) * 2 - 1, e.pointer.y = 1 - n.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(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 } })));
+      }
+    };
+  };
+}
+export {
+  u as createEvents
+};
+//# sourceMappingURL=main.js10.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main.js10.mjs","sources":["../../src/canvas/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

@@ -0,0 +1,9 @@
+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), []);
+};
+export {
+  o as useFunction
+};
+//# sourceMappingURL=main.js11.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"main.js11.mjs","sources":["../../src/canvas/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/es/main.js2.mjs

@@ -1,39 +1,34 @@
-import { jsx as s, Fragment as a } from "react/jsx-runtime";
-import { extend as x } from "@react-three/fiber";
-import { memo as R, useId as E, useRef as M, useMemo as v, useEffect as y } from "react";
-import { Layer as A } from "react-map-gl/maplibre";
-import * as T from "three";
-import { coordsToMatrix as g } from "./main.js3.mjs";
-import { useOnAdd as j } from "./main.js4.mjs";
-import { useRender as C } from "./main.js5.mjs";
-x(T);
-const q = R(({
+import { jsx as n } from "react/jsx-runtime";
+import { extend as p } from "@react-three/fiber";
+import { memo as f, useMemo as e } from "react";
+import * as i from "three";
+import { coordsToMatrix as x } from "./main.js3.mjs";
+import { InternalCanvas as c } from "./main.js4.mjs";
+import { m as L } from "./main.js5.mjs";
+p(i);
+const g = f(({
   longitude: o,
-  latitude: e,
+  latitude: r,
   altitude: m = 0,
-  children: t,
-  ...f
+  frameloop: t = "always",
+  ...a
 }) => {
-  const d = E(), r = M(), c = v(() => g({
-    latitude: e,
+  const s = e(() => x({
+    latitude: r,
     longitude: o,
-    altitude: m
-  }), [e, o, m]), { onAdd: p, onRemove: u, mounted: n } = j(r, f), i = C(c, r);
-  return y(() => {
-    n && r.current && r.current.root.render(/* @__PURE__ */ s(a, { children: t }));
-  }, [r, n, t]), /* @__PURE__ */ s(
-    A,
+    altitude: m,
+    fromLngLat: L.MercatorCoordinate.fromLngLat
+  }), [r, o, m]);
+  return /* @__PURE__ */ n(
+    c,
     {
-      id: d,
-      type: "custom",
-      renderingMode: "3d",
-      onAdd: p,
-      onRemove: u,
-      render: i
+      frameloop: t,
+      m4: s,
+      ...a
     }
   );
 });
 export {
-  q as Canvas
+  g as Canvas
 };
 //# sourceMappingURL=main.js2.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main.js2.mjs","sources":["../../src/canvas/canvas.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useEffect, useId, useMemo, useRef } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"./coords-to-matrix\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nextend(THREE);\n\nexport interface CanvasProps extends RenderProps<HTMLCanvasElement>, PropsWithChildren {\n  longitude: number,\n  latitude: number,\n  altitude?: number\n}\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({\n  longitude, latitude, altitude = 0,\n  children, ...renderProps\n})=>{\n  const id = useId();\n  \n  const ref : StateRef = useRef();\n\n  const m4 = useMemo(()=>coordsToMatrix({\n    latitude, longitude, altitude\n  }), [latitude, longitude, altitude])\n\n  const {onAdd, onRemove, mounted} = useOnAdd(ref, renderProps);\n\n  const render = useRender(m4, ref);\n\n  useEffect(()=>{\n    if(!mounted) return;\n    if(!ref.current) return;\n    ref.current.root.render(<>{children}</>);\n  }, [ref, mounted, children])\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","children","renderProps","id","useId","ref","useRef","m4","useMemo","coordsToMatrix","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment","Layer"],"mappings":";;;;;;;;AASAA,EAAOC,CAAK;AASC,MAAAC,IAASC,EAAkB,CAAC;AAAA,EACvC,WAAAC;AAAA,EAAW,UAAAC;AAAA,EAAU,UAAAC,IAAW;AAAA,EAChC,UAAAC;AAAA,EAAU,GAAGC;AACf,MAAI;AACF,QAAMC,IAAKC,KAELC,IAAiBC,KAEjBC,IAAKC,EAAQ,MAAIC,EAAe;AAAA,IACpC,UAAAV;AAAA,IAAU,WAAAD;AAAA,IAAW,UAAAE;AAAA,EACtB,CAAA,GAAG,CAACD,GAAUD,GAAWE,CAAQ,CAAC,GAE7B,EAAC,OAAAU,GAAO,UAAAC,GAAU,SAAAC,EAAW,IAAAC,EAASR,GAAKH,CAAW,GAEtDY,IAASC,EAAUR,GAAIF,CAAG;AAEhC,SAAAW,EAAU,MAAI;AACZ,IAAIJ,KACAP,EAAI,WACRA,EAAI,QAAQ,KAAK,OAAO,gBAAAY,EAAAC,GAAA,EAAG,UAAAjB,EAAS,CAAA,CAAG;AAAA,EACtC,GAAA,CAACI,GAAKO,GAASX,CAAQ,CAAC,GAEpB,gBAAAgB;AAAA,IAACE;AAAA,IAAA;AAAA,MACN,IAAAhB;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd,OAAAO;AAAA,MACA,UAAAC;AAAA,MACA,QAAAG;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main.js2.mjs","sources":["../../src/canvas/canvas-mapbox.tsx"],"sourcesContent":["import { RenderProps, extend } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { coordsToMatrix } from \"./core/coords-to-matrix\";\nimport { InternalCanvas } from \"./core/internal-canvas\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\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 `Mapbox` */\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  return <InternalCanvas\n    frameloop={frameloop}\n    m4={m4}\n    {...renderProps}\n  />\n})"],"names":["extend","THREE","Canvas","memo","longitude","latitude","altitude","frameloop","renderProps","m4","useMemo","coordsToMatrix","MercatorCoordinate","jsx","InternalCanvas"],"mappings":";;;;;;;AAOAA,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,mBAAA;AAAA,EAC/D,CAAA,GAAG,CAACP,GAAUD,GAAWE,CAAQ,CAAC;AAE5B,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACN,WAAAP;AAAA,MACA,IAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAER,CAAC;"}

package/dist/es/main.js3.mjs

@@ -1,11 +1,10 @@
-import { MercatorCoordinate as m } from "maplibre-gl";
-import { Quaternion as u, Euler as l, Vector3 as s, Matrix4 as p } from "three";
-const o = new u(), w = new l(), r = new s(), n = new s();
-function x({ longitude: c, latitude: a, altitude: i }) {
-  const t = m.fromLngLat([c, a], i), e = t.meterInMercatorCoordinateUnits();
-  return r.set(t.x, t.y, t.z || 0), n.set(e, -e, e), o.setFromEuler(w.set(-Math.PI * 0.5, 0, 0)), new p().compose(r, o, n);
+import { Quaternion as m, Euler as l, Vector3 as s, Matrix4 as w } from "three";
+const o = new m(), p = new l(), n = new s(), r = new s(), x = new w();
+function d({ longitude: c, latitude: a, altitude: i, fromLngLat: u }) {
+  const t = u([c, a], i), e = t.meterInMercatorCoordinateUnits();
+  return n.set(t.x, t.y, t.z || 0), r.set(e, -e, e), o.setFromEuler(p.set(-Math.PI * 0.5, 0, 0)), x.compose(n, o, r).toArray();
 }
 export {
-  x as coordsToMatrix
+  d as coordsToMatrix
 };
 //# sourceMappingURL=main.js3.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main.js3.mjs","sources":["../../src/canvas/coords-to-matrix.ts"],"sourcesContent":["import { MercatorCoordinate } from \"maplibre-gl\";\nimport { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix ({ longitude, latitude, altitude }: {\n  longitude: number, latitude: number, altitude: number\n}) {\n  const center = MercatorCoordinate.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 new Matrix4().compose(pos, quat, scale);\n}\n"],"names":["quat","Quaternion","euler","Euler","pos","Vector3","scale","coordsToMatrix","longitude","latitude","altitude","center","MercatorCoordinate","scaleUnit","Matrix4"],"mappings":";;AAGA,MAAMA,IAAO,IAAIC,KACXC,IAAQ,IAAIC,KACZC,IAAM,IAAIC,KACVC,IAAQ,IAAID;AAGX,SAASE,EAAgB,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,KAEpD;AACD,QAAMC,IAASC,EAAmB,WAAW,CAACJ,GAAWC,CAAQ,GAAGC,CAAQ,GACtEG,IAAYF,EAAO;AACzB,SAAAP,EAAI,IAAIO,EAAO,GAAGA,EAAO,GAAGA,EAAO,KAAK,CAAC,GACzCL,EAAM,IAAIO,GAAW,CAACA,GAAWA,CAAS,GACrCb,EAAA,aAAaE,EAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC,GACzC,IAAIY,EAAQ,EAAE,QAAQV,GAAKJ,GAAMM,CAAK;AAC/C;"}
+{"version":3,"file":"main.js3.mjs","sources":["../../src/canvas/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/main.js4.mjs

@@ -1,59 +1,31 @@
-import { createRoot as r } from "@react-three/fiber";
-import { useState as g } from "react";
-import { createEvents as d } from "./main.js6.mjs";
-import { useFunction as a } from "./main.js7.mjs";
-function C(e, o) {
-  const [m, l] = g(!1), f = a((t, u) => {
-    const n = t.getCanvas(), i = r(n);
-    i.configure({
-      frameloop: "demand",
-      dpr: window.devicePixelRatio,
-      shadows: !0,
-      events: d(),
-      ...o,
-      gl: {
-        context: u,
-        depth: !0,
-        autoClear: !1,
-        antialias: !0,
-        ...o == null ? void 0 : o.gl
-      },
-      onCreated: (s) => {
-        e.current = {
-          state: s,
-          map: t,
-          root: i
-        }, s.gl.forceContextLoss = () => {
-        };
-      },
-      camera: {
-        matrixAutoUpdate: !1
-      },
-      size: {
-        width: n.clientWidth,
-        height: n.clientHeight,
-        top: 0,
-        left: 0,
-        ...o == null ? void 0 : o.size
-      }
-    }), e.current = {
-      map: t,
-      root: i
-    }, t.on("resize", h), setTimeout(() => l(!0));
-  }), h = a(() => {
-    var i;
-    if (!((i = e.current) != null && i.state))
-      return;
-    const t = e.current.state, n = e.current.map.getCanvas();
-    t.setSize(n.width, n.height);
-  }), c = a((t) => {
-    setTimeout(() => {
-      e.current && (e.current.root.unmount(), t.off(c));
-    });
-  });
-  return { onAdd: f, onRemove: c, mounted: m };
-}
+import { jsx as o, Fragment as i } from "react/jsx-runtime";
+import { memo as c, useId as p, useRef as R, useEffect as v } from "react";
+import { Layer as y } from "react-map-gl";
+import { useOnAdd as I } from "./main.js8.mjs";
+import { useRender as g } from "./main.js9.mjs";
+const x = c(({
+  m4: m,
+  children: r,
+  frameloop: t,
+  ...s
+}) => {
+  const d = p(), e = R(), { onAdd: u, onRemove: a, mounted: n } = I(e, { frameloop: t, ...s }), f = g(m, e, t);
+  return v(() => {
+    n && e.current && e.current.root.render(/* @__PURE__ */ o(i, { children: r }));
+  }, [e, n, r]), /* @__PURE__ */ o(
+    y,
+    {
+      id: d,
+      type: "custom",
+      renderingMode: "3d",
+      onAdd: u,
+      onRemove: a,
+      render: f
+    }
+  );
+});
+x.displayName = "InternalCanvas";
 export {
-  C as useOnAdd
+  x as InternalCanvas
 };
 //# sourceMappingURL=main.js4.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { MapInstance } from \"react-map-gl\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd (ref: StateRef, 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      frameloop: \"demand\",\n      dpr: window.devicePixelRatio,\n      shadows: true,\n      events: createEvents(),\n      ...renderProps,\n      gl: {\n        context: gl,\n        depth: true,\n        autoClear: false,\n        antialias: true,\n        ...renderProps?.gl,\n      },\n      onCreated: (state) => {\n        ref.current = {\n          state,\n          map,\n          root,\n        }\n        // eslint-disable-next-line @typescript-eslint/no-empty-function\n        state.gl.forceContextLoss = () => { };\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(onRemove);\n    })\n  })\n\n  return {onAdd, onRemove, mounted};\n}"],"names":["useOnAdd","ref","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onResize","_a","onRemove"],"mappings":";;;;AAOgB,SAAAA,EAAUC,GAAeC,GAA6C;AAEpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA4B;AAEjE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,WAAW;AAAA,MACX,KAAK,OAAO;AAAA,MACZ,SAAS;AAAA,MACT,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,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;AACpB,QAAAb,EAAI,UAAU;AAAA,UACZ,OAAAa;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAGIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;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,GAEDD,EAAI,UAAU;AAAA,MACZ,KAAAO;AAAA,MACA,MAAAG;AAAA,IAAA,GAGEH,EAAA,GAAG,UAAUO,CAAQ,GAEd,WAAA,MAAIX,EAAW,EAAI,CAAC;AAAA,EAAA,CAEhC,GAEKW,IAAWR,EAAY,MAAI;;AAC5B,QAAA,GAACS,IAAAf,EAAI,YAAJ,QAAAe,EAAa;AAAO;AAClB,UAAAF,IAAQb,EAAI,QAAQ,OAEpBS,IADMT,EAAI,QAAQ,IACL;AACnB,IAAAa,EAAM,QAAQJ,EAAO,OAAOA,EAAO,MAAM;AAAA,EAAA,CAC1C,GAEKO,IAAWV,EAAY,CAACC,MAAmB;AAC/C,eAAW,MAAI;AACb,MAAIP,EAAI,YACJA,EAAA,QAAQ,KAAK,WACjBO,EAAI,IAAIS,CAAQ;AAAA,IAAA,CACjB;AAAA,EAAA,CACF;AAEM,SAAA,EAAC,OAAAX,GAAO,UAAAW,GAAU,SAAAd;AAC3B;"}
+{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/core/internal-canvas.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, memo, useEffect, useId, useRef } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport { Matrix4Tuple } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useOnAdd } from \"./use-on-add\";\nimport { useRender } from \"./use-render\";\n\nexport interface InternalCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  m4: Matrix4Tuple;\n}\n\nexport const InternalCanvas = memo<InternalCanvasProps>(({\n  m4, children, frameloop, ...renderProps\n}) => {\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 <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onAdd={onAdd as any}\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    onRemove={onRemove as any}\n    render={render}\n  />\n})\n\nInternalCanvas.displayName = 'InternalCanvas';"],"names":["InternalCanvas","memo","m4","children","frameloop","renderProps","id","useId","stateRef","useRef","onAdd","onRemove","mounted","useOnAdd","render","useRender","useEffect","jsx","Fragment","Layer"],"mappings":";;;;;AAaa,MAAAA,IAAiBC,EAA0B,CAAC;AAAA,EACvD,IAAAC;AAAA,EAAI,UAAAC;AAAA,EAAU,WAAAC;AAAA,EAAW,GAAGC;AAC9B,MAAM;AACJ,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,gBAAAc;AAAA,IAACE;AAAA,IAAA;AAAA,MACN,IAAAb;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MAEd,OAAAI;AAAA,MAEA,UAAAC;AAAA,MACA,QAAAG;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;AAEDd,EAAe,cAAc;"}