react-three-map 0.8.0 → 0.8.1

package/dist/maplibre/es/main8.mjs

@@ -1,30 +1,26 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { memo, useState, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { CanvasPortal } from "./main16.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;
+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
   });
-  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";
+  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 {
-  InitCanvasFC
+  useCanvasInLayer
 };
 //# sourceMappingURL=main8.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main8.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;"}
+{"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/maplibre/es/main9.mjs

@@ -1,12 +1,30 @@
-import { useRef, useCallback } from "react";
-const useFunction = (callback) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  return useCallback((...args) => {
-    return callbackRef.current(...args);
+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 {
-  useFunction
+  InitCanvasFC
 };
 //# sourceMappingURL=main9.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"main9.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":[],"mappings":";AAGa,MAAA,cAAc,CAAoC,aAAmB;AAC1E,QAAA,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACf,SAAA,YAAY,IAAI,SAAgB;AAC9B,WAAA,YAAY,QAAQ,GAAG,IAAI;AAAA,EACpC,GAAG,CAAE,CAAA;AACP;"}
+{"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;"}

package/dist/maplibre/types/api/coords-to-vector-3.d.ts

@@ -1,4 +1,3 @@
-import { Vector3Tuple } from "three";
-import { Coords } from "./coords";
-/** converts geo coordinates `point` to a `Vector3Tuple` (represented in meters) using `origin` as the origin. */
+import { Vector3Tuple } from 'three';
+import { Coords } from './coords';
 export declare function coordsToVector3(point: Coords, origin: Coords): Vector3Tuple;

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

@@ -1,5 +1,6 @@
 export * from './canvas-props';
 export * from './coordinates';
-export * from './near-coordinates';
 export * from './coords';
 export * from './coords-to-vector-3';
+export * from './near-coordinates';
+export * from './vector-3-to-coords';

package/dist/maplibre/types/api/vector-3-to-coords.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from "three";
+import { Coords } from "./coords";
+export declare function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords;

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Matrix4Tuple } from "three";
 import { Coords } from "../../api/coords";
+import { MapInstance } from "../generic-map";
 interface SyncCameraFCProps extends Coords {
     setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void;
     /** on `useFrame` it will manually render (used by `<Coordinates>`) */
     manualRender?: boolean;
     onReady?: () => void;
-    mapCanvas: HTMLCanvasElement;
+    map: MapInstance;
 }
 /** React Component (FC) to sync the Three camera with the map provider */
 export declare const SyncCameraFC: import("react").NamedExoticComponent<SyncCameraFCProps>;

package/dist/maplibre/types/core/earth-radius.d.ts

@@ -0,0 +1 @@
+export declare const earthRadius = 6378137;

package/dist/types/api/coords-to-vector-3.d.ts

@@ -1,4 +1,3 @@
-import { Vector3Tuple } from "three";
-import { Coords } from "./coords";
-/** converts geo coordinates `point` to a `Vector3Tuple` (represented in meters) using `origin` as the origin. */
+import { Vector3Tuple } from 'three';
+import { Coords } from './coords';
 export declare function coordsToVector3(point: Coords, origin: Coords): Vector3Tuple;

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

@@ -1,5 +1,6 @@
 export * from './canvas-props';
 export * from './coordinates';
-export * from './near-coordinates';
 export * from './coords';
 export * from './coords-to-vector-3';
+export * from './near-coordinates';
+export * from './vector-3-to-coords';

package/dist/types/api/vector-3-to-coords.d.ts

@@ -0,0 +1,3 @@
+import { Vector3Tuple } from "three";
+import { Coords } from "./coords";
+export declare function vector3ToCoords(position: Vector3Tuple, origin: Coords): Coords;

package/dist/types/core/canvas-overlay/sync-camera-fc.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Matrix4Tuple } from "three";
 import { Coords } from "../../api/coords";
+import { MapInstance } from "../generic-map";
 interface SyncCameraFCProps extends Coords {
     setOnRender?: (callback: () => (mx: Matrix4Tuple) => void) => void;
     /** on `useFrame` it will manually render (used by `<Coordinates>`) */
     manualRender?: boolean;
     onReady?: () => void;
-    mapCanvas: HTMLCanvasElement;
+    map: MapInstance;
 }
 /** React Component (FC) to sync the Three camera with the map provider */
 export declare const SyncCameraFC: import("react").NamedExoticComponent<SyncCameraFCProps>;

package/dist/types/core/earth-radius.d.ts

@@ -0,0 +1 @@
+export declare const earthRadius = 6378137;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
@@ -29,13 +29,11 @@
     "build:stories": "yarn ladle build",
     "test": "yarn vitest"
   },
-  "dependencies": {
-    "@turf/turf": "^7.0.0-alpha.2"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
-    "@ladle/react": "^2.13.0",
-    "@react-three/drei": "^9.92.3",
+    "@ladle/react": "^4.0.2",
+    "@react-three/drei": "^9.97.6",
     "@react-three/fiber": "^8.15.12",
     "@react-three/postprocessing": "^2.15.11",
     "@types/luxon": "^3.3.1",
@@ -48,7 +46,6 @@
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-v8": "^0.33.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -56,11 +53,11 @@
     "happy-dom": "^10.5.2",
     "leva": "^0.9.35",
     "luxon": "^3.3.0",
-    "mapbox-gl": "^2.15.0",
+    "mapbox-gl": "^3.1.2",
     "maplibre-gl": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.0",
+    "react-map-gl": "^7.1.7",
     "suncalc": "^1.9.0",
     "suspend-react": "^0.1.3",
     "three": "^0.159.0",

package/stories/package.json

@@ -6,8 +6,8 @@
     "dev": "yarn ladle serve"
   },
   "dependencies": {
-    "@ladle/react": "^2.16.0",
-    "@react-three/drei": "^9.92.3",
+    "@ladle/react": "^4.0.2",
+    "@react-three/drei": "^9.97.6",
     "@react-three/fiber": "^8.15.12",
     "@react-three/postprocessing": "^2.15.11",
     "@types/luxon": "^3.3.7",
@@ -15,11 +15,11 @@
     "@types/tz-lookup": "^6.1.2",
     "leva": "^0.9.35",
     "luxon": "^3.4.4",
-    "mapbox-gl": "^2.15.0",
+    "mapbox-gl": "^3.1.2",
     "maplibre-gl": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.2",
+    "react-map-gl": "^7.1.7",
     "react-three-map": "^0.6.1",
     "suncalc": "^1.9.0",
     "three": "^0.159.0",