react-three-map 0.7.2 → 0.8.1

package/dist/es/main7.mjs.map

@@ -1 +1 @@
-{"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":[],"mappings":";;AAMO,SAAS,UAAU,EAAC,UAAU,WAAW,UAAU,cAAoB;AACtE,QAAA,KAAK,QAAQ,MAAM,eAAe;AAAA,IACtC;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC,GAAG,CAAC,UAAU,WAAW,UAAU,UAAU,CAAC;AAExC,SAAA;AACT;"}
+{"version":3,"file":"main7.mjs","sources":["../../src/api/vector-3-to-coords.ts"],"sourcesContent":["import { MathUtils, Vector3Tuple } from \"three\";\nimport { Coords } from \"./coords\";\nimport { earthRadius } from \"../core/earth-radius\";\n\nexport function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords {\n  const [x, y, z] = position;\n  const latitude = origin.latitude + (-z / earthRadius) * MathUtils.RAD2DEG;\n  const longitude = origin.longitude + (x / earthRadius) * MathUtils.RAD2DEG / Math.cos(origin.latitude * MathUtils.DEG2RAD);\n  const altitude = (origin.altitude || 0) + y;\n  const coords: Coords = { latitude, longitude, altitude };\n  return coords;\n}"],"names":[],"mappings":";;AAIgB,SAAA,gBAAgB,UAAwB,QAAwB;AAC9E,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI;AAClB,QAAM,WAAW,OAAO,WAAY,CAAC,IAAI,cAAe,UAAU;AAClE,QAAM,YAAY,OAAO,YAAa,IAAI,cAAe,UAAU,UAAU,KAAK,IAAI,OAAO,WAAW,UAAU,OAAO;AACnH,QAAA,YAAY,OAAO,YAAY,KAAK;AAC1C,QAAM,SAAiB,EAAE,UAAU,WAAW,SAAS;AAChD,SAAA;AACT;"}

package/dist/es/main8.mjs

@@ -1,25 +1,26 @@
-import { useCoords } from "./main7.mjs";
-import { useCreateRoot } from "./main10.mjs";
-import { useRender } from "./main11.mjs";
-function useCanvas({
-  longitude,
-  latitude,
-  altitude = 0,
-  frameloop = "always",
-  fromLngLat,
-  ...renderProps
-}) {
-  const m4 = useCoords({
+import { useCoordsToMatrix } from "./main12.mjs";
+import { useRender } from "./main16.mjs";
+import { useRoot } from "./main17.mjs";
+function useCanvasInLayer(props, fromLngLat, map) {
+  const { latitude, longitude, altitude, frameloop } = props;
+  const origin = useCoordsToMatrix({
     latitude,
     longitude,
     altitude,
     fromLngLat
   });
-  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });
-  const render = useRender(m4, r3mRef, frameloop);
-  return { id, onAdd, onRemove, render };
+  const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);
+  const render = useRender({ origin, frameloop, useThree, map, r3m });
+  return {
+    id: props.id,
+    beforeId: props.beforeId,
+    onRemove,
+    render,
+    type: "custom",
+    renderingMode: "3d"
+  };
 }
 export {
-  useCanvas
+  useCanvasInLayer
 };
 //# sourceMappingURL=main8.mjs.map

package/dist/es/main8.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main8.mjs","sources":["../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends Omit<CanvasProps, 'id'|'beforeId'> {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main8.mjs","sources":["../../src/core/canvas-in-layer/use-canvas-in-layer.tsx"],"sourcesContent":["import { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { useCoordsToMatrix } from \"../use-coords-to-matrix\";\nimport { useRender } from \"./use-render\";\nimport { useRoot } from \"./use-root\";\n\n/** get all the properties that you need to render as a map `<Layer>` */\nexport function useCanvasInLayer(props: CanvasProps,fromLngLat: FromLngLat, map: MapInstance) {\n\n  const {latitude, longitude, altitude, frameloop } = props;\n\n    const origin = useCoordsToMatrix({\n      latitude, longitude, altitude, fromLngLat,\n    });\n\n    const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);\n  \n    const render = useRender({origin, frameloop, useThree, map, r3m});\n  \n    return {\n      id: props.id,\n      beforeId: props.beforeId,\n      onRemove,\n      render,\n      type: 'custom',\n      renderingMode: '3d'\n    } as const\n\n}"],"names":[],"mappings":";;;AAOgB,SAAA,iBAAiB,OAAmB,YAAwB,KAAkB;AAE5F,QAAM,EAAC,UAAU,WAAW,UAAU,cAAc;AAElD,QAAM,SAAS,kBAAkB;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAEK,QAAA,EAAE,UAAU,UAAU,IAAA,IAAQ,QAAQ,YAAY,KAAK,KAAK;AAE5D,QAAA,SAAS,UAAU,EAAC,QAAQ,WAAW,UAAU,KAAK,KAAI;AAEzD,SAAA;AAAA,IACL,IAAI,MAAM;AAAA,IACV,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,EAAA;AAGrB;"}

package/dist/es/main9.mjs

@@ -1,18 +1,30 @@
-import { Quaternion, Euler, Vector3, Matrix4 } from "three";
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }) {
-  const center = fromLngLat([longitude, latitude], altitude);
-  const scaleUnit = center.meterInMercatorCoordinateUnits();
-  pos.set(center.x, center.y, center.z || 0);
-  scale.set(scaleUnit, -scaleUnit, scaleUnit);
-  quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
-}
+import { jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { CanvasPortal } from "./main18.mjs";
+const InitCanvasFC = memo((props) => {
+  const canvas = props.map.getCanvas();
+  const [el] = useState(() => {
+    const el2 = document.createElement("div");
+    el2.style.position = "absolute";
+    el2.style.top = "0";
+    el2.style.bottom = "0";
+    el2.style.left = "0";
+    el2.style.right = "0";
+    el2.style.pointerEvents = "none";
+    return el2;
+  });
+  useEffect(() => {
+    const parent = canvas.parentElement;
+    parent.appendChild(el);
+    return () => {
+      parent.removeChild(el);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(/* @__PURE__ */ jsx(CanvasPortal, { ...props }), el) });
+});
+InitCanvasFC.displayName = "InitCanvasFC";
 export {
-  coordsToMatrix
+  InitCanvasFC
 };
 //# sourceMappingURL=main9.mjs.map

package/dist/es/main9.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}
+{"version":3,"file":"main9.mjs","sources":["../../src/core/canvas-overlay/init-canvas-fc.tsx"],"sourcesContent":["import { memo, useEffect, useState } from \"react\";\nimport { createPortal } from 'react-dom';\nimport { Matrix4Tuple } from \"three\";\nimport { CanvasProps } from \"../../api/canvas-props\";\nimport { FromLngLat, MapInstance } from \"../generic-map\";\nimport { CanvasPortal } from \"./canvas-portal\";\n\ninterface InitCanvasFCProps extends CanvasProps {\n  map: MapInstance,\n  setOnRender: (callback: () => (mx: Matrix4Tuple) => void) => void,\n  frameloop?: 'always' | 'demand',\n  fromLngLat: FromLngLat,\n}\nexport const InitCanvasFC = memo<InitCanvasFCProps>((props) => {\n  const canvas = props.map.getCanvas() // eslint-disable-line @typescript-eslint/no-non-null-assertion\n\n  const [el] = useState(() => {\n    const el = document.createElement('div');\n    el.style.position = 'absolute';\n    el.style.top = '0';\n    el.style.bottom = '0';\n    el.style.left = '0';\n    el.style.right = '0';\n    el.style.pointerEvents = 'none';\n    return el\n  })\n\n  useEffect(() => {\n    const parent = canvas.parentElement!; // eslint-disable-line @typescript-eslint/no-non-null-assertion\n    parent.appendChild(el);\n    return () => {\n      parent.removeChild(el);\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n  return <>\n    {createPortal((\n      <CanvasPortal {...props} />\n    ), el)}\n  </>\n})\nInitCanvasFC.displayName = 'InitCanvasFC';\n"],"names":["el"],"mappings":";;;;AAaa,MAAA,eAAe,KAAwB,CAAC,UAAU;AACvD,QAAA,SAAS,MAAM,IAAI,UAAU;AAEnC,QAAM,CAAC,EAAE,IAAI,SAAS,MAAM;AACpBA,UAAAA,MAAK,SAAS,cAAc,KAAK;AACvCA,QAAG,MAAM,WAAW;AACpBA,QAAG,MAAM,MAAM;AACfA,QAAG,MAAM,SAAS;AAClBA,QAAG,MAAM,OAAO;AAChBA,QAAG,MAAM,QAAQ;AACjBA,QAAG,MAAM,gBAAgB;AAClBA,WAAAA;AAAAA,EAAA,CACR;AAED,YAAU,MAAM;AACd,UAAM,SAAS,OAAO;AACtB,WAAO,YAAY,EAAE;AACrB,WAAO,MAAM;AACX,aAAO,YAAY,EAAE;AAAA,IAAA;AAAA,EAEzB,GAAG,CAAE,CAAA;AACE,SAAA,oBAAA,UAAA,EACJ,uBACE,oBAAA,cAAA,EAAc,GAAG,MAAO,CAAA,GACxB,EAAE,EACP,CAAA;AACF,CAAC;AACD,aAAa,cAAc;"}