react-three-map 0.6.3 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # react-three-map
 
+## 0.7.1
+
+### Patch Changes
+
+- 2115617: Revert 748d7a7: Fix issues on DPR or browser zoom changes.
+
+## 0.7.0
+
+### Minor Changes
+
+- 1c52c0f: `<Canvas>` props accepts `id?: string` and `beforeId?: string` to set the MapLibre/Mapbox layer.
+
+### Patch Changes
+
+- 748d7a7: Fix issues on DPR or browser zoom changes.
+
 ## 0.6.3
 
 ### Patch Changes

package/dist/cjs/main.js

@@ -328,12 +328,13 @@ function useCanvas({
 }
 fiber.extend(THREE__namespace);
 const fromLngLat = mapboxGl.MercatorCoordinate.fromLngLat;
-const Canvas = react.memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = react.memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactMapGl.Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

package/dist/es/main4.mjs

@@ -7,12 +7,13 @@ import * as THREE from "three";
 import { useCanvas } from "./main8.mjs";
 extend(THREE);
 const fromLngLat = MercatorCoordinate.fromLngLat;
-const Canvas = memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsx(
     Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

package/dist/es/main4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main4.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\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":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,UAAU;AAE3C,QAAA,EAAE,IAAI,OAAO,UAAU,OAAA,IAAW,UAAU,EAAE,GAAG,OAAO,WAAA,CAAY;AAEnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main4.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>(({id, beforeId, ...props}) => {\n\n  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id || reactId}\n    beforeId={beforeId}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})\n"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,EAAC,IAAI,UAAU,GAAG,YAAW;AAEpE,QAAM,EAAE,IAAI,SAAS,OAAO,UAAU,WAAW,UAAU,EAAE,GAAG,OAAO,WAAY,CAAA;AAE5E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN,IAAI,MAAM;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}

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 CanvasProps {\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/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;"}

package/dist/maplibre/cjs/main.js

@@ -328,12 +328,13 @@ function useCanvas({
 }
 fiber.extend(THREE__namespace);
 const fromLngLat = maplibreGl.MercatorCoordinate.fromLngLat;
-const Canvas = react.memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = react.memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsxRuntime.jsx(
     maplibre.Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

package/dist/maplibre/es/main4.mjs

@@ -7,12 +7,13 @@ import * as THREE from "three";
 import { useCanvas } from "./main8.mjs";
 extend(THREE);
 const fromLngLat = MercatorCoordinate.fromLngLat;
-const Canvas = memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+const Canvas = memo(({ id, beforeId, ...props }) => {
+  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
   return /* @__PURE__ */ jsx(
     Layer,
     {
-      id,
+      id: id || reactId,
+      beforeId,
       type: "custom",
       renderingMode: "3d",
       onAdd,

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

@@ -1 +1 @@
-{"version":3,"file":"main4.mjs","sources":["../../../src/maplibre/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"maplibre-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { useCanvas } from \"../core/use-canvas\";\nimport { CanvasProps } from \"../api/canvas-props\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\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":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,UAAU;AAE3C,QAAA,EAAE,IAAI,OAAO,UAAU,OAAA,IAAW,UAAU,EAAE,GAAG,OAAO,WAAA,CAAY;AAEnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main4.mjs","sources":["../../../src/maplibre/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"maplibre-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl/maplibre\";\nimport * as THREE from \"three\";\nimport { useCanvas } from \"../core/use-canvas\";\nimport { CanvasProps } from \"../api/canvas-props\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `MapLibre` */\nexport const Canvas = memo<CanvasProps>(({id, beforeId, ...props}) => {\n\n  const { id: reactId, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id || reactId}\n    beforeId={beforeId}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})\n"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,EAAC,IAAI,UAAU,GAAG,YAAW;AAEpE,QAAM,EAAE,IAAI,SAAS,OAAO,UAAU,WAAW,UAAU,EAAE,GAAG,OAAO,WAAY,CAAA;AAE5E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN,IAAI,MAAM;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/maplibre/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 CanvasProps {\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/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;"}

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

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

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

@@ -1,6 +1,6 @@
 import { CanvasProps } from "../api/canvas-props";
 import { FromLngLat } from "./generic-map";
-export interface useCanvasProps extends CanvasProps {
+export interface useCanvasProps extends Omit<CanvasProps, 'id' | 'beforeId'> {
     fromLngLat: FromLngLat;
 }
 export declare function useCanvas({ longitude, latitude, altitude, frameloop, fromLngLat, ...renderProps }: useCanvasProps): {

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

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

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

@@ -1,6 +1,6 @@
 import { CanvasProps } from "../api/canvas-props";
 import { FromLngLat } from "./generic-map";
-export interface useCanvasProps extends CanvasProps {
+export interface useCanvasProps extends Omit<CanvasProps, 'id' | 'beforeId'> {
     fromLngLat: FromLngLat;
 }
 export declare function useCanvas({ longitude, latitude, altitude, frameloop, fromLngLat, ...renderProps }: useCanvasProps): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-map",
-  "version": "0.6.3",
+  "version": "0.7.1",
   "description": "Use react-three-fiber inside MapLibre and Mapbox",
   "main": "dist/cjs/main.js",
   "module": "dist/es/main.mjs",
@@ -33,12 +33,15 @@
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
     "@ladle/react": "^2.13.0",
-    "@react-three/drei": "^9.74.5",
-    "@react-three/fiber": "^8.13.4",
+    "@react-three/drei": "^9.88.0",
+    "@react-three/fiber": "^8.14.5",
+    "@types/luxon": "^3.3.1",
     "@types/node": "^20.3.1",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
+    "@types/suncalc": "^1.9.0",
     "@types/three": "^0.154.0",
+    "@types/tz-lookup": "^6.1.0",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
     "@vitejs/plugin-react": "^4.0.0",
@@ -49,15 +52,18 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "happy-dom": "^10.5.2",
     "leva": "^0.9.35",
+    "luxon": "^3.3.0",
     "mapbox-gl": "^2.15.0",
     "maplibre-gl": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.0",
+    "suncalc": "^1.9.0",
     "suspend-react": "^0.1.3",
-    "three": "^0.153.0",
+    "three": "^0.154.0",
     "three-stdlib": "^2.23.8",
     "typescript": "~5.0.2",
+    "tz-lookup": "^6.1.25",
     "vite": "^4.4.4",
     "vitest": "^0.33.0",
     "web-ifc-three": "^0.0.125"

package/stories/package.json

@@ -15,7 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.2",
-    "react-three-map": "^0.4.1",
+    "react-three-map": "^0.6.1",
     "three": "^0.154.0",
     "three-stdlib": "^2.23.13",
     "web-ifc-three": "^0.0.125"

package/stories/yarn.lock

@@ -3473,10 +3473,10 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-three-map@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.4.1.tgz#4849aba8d907f1a0782c269f623f81675d144fbb"
-  integrity sha512-ctVVZwhkDH33yjM2r8zQ2URXxK3OimuJJgwTDJBEmuhRMTwqqseGvPPC/enqXhI2KWeGmUKySSeonpDq2LjB4Q==
+react-three-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/react-three-map/-/react-three-map-0.6.1.tgz#566811527242bb8964586c405a5816a84f75cb40"
+  integrity sha512-DSL7fyeR+MqiB1f6fG8FHwMb0NoDhj6Yjyc5T9jU6Yo/dpxQdY9Mfjs++J0j8HofcEDTsgiQz2GXh2r4iSPmhA==
 
 react-use-measure@^2.1.1:
   version "2.1.1"