react-three-map 0.2.0 → 0.3.0

package/dist/es/main.js2.mjs

@@ -1,34 +1,38 @@
-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(({
+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 "./main.js3.mjs";
+import { useCanvas as C } from "./main.js4.mjs";
+d(v);
+const A = L(({
   longitude: o,
   latitude: r,
   altitude: m = 0,
-  frameloop: t = "always",
-  ...a
+  frameloop: e = "always",
+  ...t
 }) => {
-  const s = e(() => x({
+  const n = x(() => y({
     latitude: r,
     longitude: o,
     altitude: m,
-    fromLngLat: L.MercatorCoordinate.fromLngLat
-  }), [r, o, m]);
-  return /* @__PURE__ */ n(
-    c,
+    fromLngLat: c.fromLngLat
+  }), [r, o, m]), { id: s, onAdd: a, onRemove: f, render: p } = C({ m4: n, frameloop: e, ...t });
+  return /* @__PURE__ */ i(
+    M,
     {
-      frameloop: t,
-      m4: s,
-      ...a
+      id: s,
+      type: "custom",
+      renderingMode: "3d",
+      onAdd: a,
+      onRemove: f,
+      render: p
     }
   );
 });
 export {
-  g as Canvas
+  A 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-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;"}
+{"version":3,"file":"main.js2.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/es/main.js3.mjs.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"main.js3.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/main.js4.mjs

@@ -1,31 +1,19 @@
-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,
+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 "./main.js5.mjs";
+import { useRender as x } from "./main.js6.mjs";
+const E = ({
+  m4: o,
   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";
+  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 {
-  x as InternalCanvas
+  E as useCanvas
 };
 //# sourceMappingURL=main.js4.mjs.map

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"main.js4.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;"}