react-three-map 0.7.0 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/main.js +16 -3
  3. package/dist/es/main11.mjs +0 -2
  4. package/dist/es/main11.mjs.map +1 -1
  5. package/dist/es/main12.mjs +16 -1
  6. package/dist/es/main12.mjs.map +1 -1
  7. package/dist/maplibre/cjs/main.js +16 -3
  8. package/dist/maplibre/es/main10.mjs +0 -2
  9. package/dist/maplibre/es/main10.mjs.map +1 -1
  10. package/dist/maplibre/es/main12.mjs +16 -1
  11. package/dist/maplibre/es/main12.mjs.map +1 -1
  12. package/dist/maplibre/types/core/generic-map.d.ts +2 -0
  13. package/dist/types/core/generic-map.d.ts +2 -0
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # react-three-map
2
2
 
3
+ ## 0.7.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 90a4766: Fix bug on DPR change.
8
+
9
+ ## 0.7.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 2115617: Revert 748d7a7: Fix issues on DPR or browser zoom changes.
14
+
3
15
  ## 0.7.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/main.js CHANGED
@@ -251,9 +251,24 @@ function useOnAdd(fromLngLat2, { frameloop, ...renderProps }) {
251
251
  setTimeout(() => setMounted(true));
252
252
  });
253
253
  const onResize = useFunction(() => {
254
+ if (!r3mRef.current.map)
255
+ return;
254
256
  if (!r3mRef.current.state)
255
257
  return;
256
- r3mRef.current.state.set({});
258
+ const map = r3mRef.current.map;
259
+ const canvas = map.getCanvas();
260
+ let updateDPR = canvas.classList.contains("mapboxgl-canvas");
261
+ if (!updateDPR && map.getPixelRatio && map.getPixelRatio() === window.devicePixelRatio) {
262
+ updateDPR = true;
263
+ }
264
+ if (updateDPR) {
265
+ r3mRef.current.state.setDpr(window.devicePixelRatio);
266
+ }
267
+ r3mRef.current.state.setSize(
268
+ canvas.clientWidth,
269
+ canvas.clientHeight,
270
+ false
271
+ );
257
272
  });
258
273
  const onRemove = useFunction(() => {
259
274
  if (!r3mRef.current.root)
@@ -289,8 +304,6 @@ function useRender(origin, r3mRef, frameloop) {
289
304
  const r3m = r3mRef.current;
290
305
  if (!r3m.state || !r3m.map)
291
306
  return;
292
- r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
293
- r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
294
307
  const camera = r3m.state.camera;
295
308
  const gl = r3m.state.gl;
296
309
  const advance = r3m.state.advance;
package/dist/es/main11.mjs CHANGED
@@ -5,8 +5,6 @@ function useRender(origin, r3mRef, frameloop) {
5
5
  const r3m = r3mRef.current;
6
6
  if (!r3m.state || !r3m.map)
7
7
  return;
8
- r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
9
- r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
10
8
  const camera = r3m.state.camera;
11
9
  const gl = r3m.state.gl;
12
10
  const advance = r3m.state.advance;
package/dist/es/main11.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main11.mjs","sources":["../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n const r3m = r3mRef.current;\n if (!r3m.state || !r3m.map) return;\n r3m.state.size.width = r3m.state.gl.domElement.clientWidth;\n r3m.state.size.height = r3m.state.gl.domElement.clientHeight;\n const camera = r3m.state.camera;\n const gl = r3m.state.gl;\n const advance = r3m.state.advance;\n r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (frameloop === 'always') r3m.map.triggerRepaint();\n })\n\n return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AAC5B,QAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,GAAG,WAAW;AAC/C,QAAI,MAAM,KAAK,SAAS,IAAI,MAAM,GAAG,WAAW;AAC1C,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
1
+ {"version":3,"file":"main11.mjs","sources":["../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n const r3m = r3mRef.current;\n if (!r3m.state || !r3m.map) return;\n const camera = r3m.state.camera;\n const gl = r3m.state.gl;\n const advance = r3m.state.advance;\n r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (frameloop === 'always') r3m.map.triggerRepaint();\n })\n\n return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AACtB,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
package/dist/es/main12.mjs CHANGED
@@ -54,9 +54,24 @@ function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
54
54
  setTimeout(() => setMounted(true));
55
55
  });
56
56
  const onResize = useFunction(() => {
57
+ if (!r3mRef.current.map)
58
+ return;
57
59
  if (!r3mRef.current.state)
58
60
  return;
59
- r3mRef.current.state.set({});
61
+ const map = r3mRef.current.map;
62
+ const canvas = map.getCanvas();
63
+ let updateDPR = canvas.classList.contains("mapboxgl-canvas");
64
+ if (!updateDPR && map.getPixelRatio && map.getPixelRatio() === window.devicePixelRatio) {
65
+ updateDPR = true;
66
+ }
67
+ if (updateDPR) {
68
+ r3mRef.current.state.setDpr(window.devicePixelRatio);
69
+ }
70
+ r3mRef.current.state.setSize(
71
+ canvas.clientWidth,
72
+ canvas.clientHeight,
73
+ false
74
+ );
60
75
  });
61
76
  const onRemove = useFunction(() => {
62
77
  if (!r3mRef.current.root)
package/dist/es/main12.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main12.mjs","sources":["../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n updateStyle: false,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n map.on('resize', onResize)\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onResize = useFunction(() => {\n if (!r3mRef.current.state) return;\n // because we update size out of zustand, we just want to let it know that something changed\n r3mRef.current.state.set({});\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n if (!r3mRef.current.map) return;\n r3mRef.current.map.off('resize', onResize)\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAO;AAE3B,WAAO,QAAQ,MAAM,IAAI,CAAE,CAAA;AAAA,EAAA,CAC5B;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
1
+ {"version":3,"file":"main12.mjs","sources":["../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n updateStyle: false,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n map.on('resize', onResize)\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onResize = useFunction(() => {\n if (!r3mRef.current.map) return;\n if (!r3mRef.current.state) return;\n const map = r3mRef.current.map;\n const canvas = map.getCanvas();\n\n // update DPR only on mapbox\n let updateDPR = canvas.classList.contains('mapboxgl-canvas');\n\n // or on newer versions of MapLibre that take this into account\n if(!updateDPR && map.getPixelRatio && map.getPixelRatio() === window.devicePixelRatio) {\n updateDPR = true;\n } \n\n if(updateDPR) {\n r3mRef.current.state.setDpr(window.devicePixelRatio);\n }\n\n r3mRef.current.state.setSize(\n canvas.clientWidth,\n canvas.clientHeight,\n false\n );\n\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n if (!r3mRef.current.map) return;\n r3mRef.current.map.off('resize', onResize)\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAK;AACrB,QAAA,CAAC,OAAO,QAAQ;AAAO;AACrB,UAAA,MAAM,OAAO,QAAQ;AACrB,UAAA,SAAS,IAAI;AAGnB,QAAI,YAAY,OAAO,UAAU,SAAS,iBAAiB;AAGxD,QAAA,CAAC,aAAa,IAAI,iBAAiB,IAAI,cAAc,MAAM,OAAO,kBAAkB;AACzE,kBAAA;AAAA,IACd;AAEA,QAAG,WAAW;AACZ,aAAO,QAAQ,MAAM,OAAO,OAAO,gBAAgB;AAAA,IACrD;AAEA,WAAO,QAAQ,MAAM;AAAA,MACnB,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,IAAA;AAAA,EACF,CAED;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
package/dist/maplibre/cjs/main.js CHANGED
@@ -251,9 +251,24 @@ function useOnAdd(fromLngLat2, { frameloop, ...renderProps }) {
251
251
  setTimeout(() => setMounted(true));
252
252
  });
253
253
  const onResize = useFunction(() => {
254
+ if (!r3mRef.current.map)
255
+ return;
254
256
  if (!r3mRef.current.state)
255
257
  return;
256
- r3mRef.current.state.set({});
258
+ const map = r3mRef.current.map;
259
+ const canvas = map.getCanvas();
260
+ let updateDPR = canvas.classList.contains("mapboxgl-canvas");
261
+ if (!updateDPR && map.getPixelRatio && map.getPixelRatio() === window.devicePixelRatio) {
262
+ updateDPR = true;
263
+ }
264
+ if (updateDPR) {
265
+ r3mRef.current.state.setDpr(window.devicePixelRatio);
266
+ }
267
+ r3mRef.current.state.setSize(
268
+ canvas.clientWidth,
269
+ canvas.clientHeight,
270
+ false
271
+ );
257
272
  });
258
273
  const onRemove = useFunction(() => {
259
274
  if (!r3mRef.current.root)
@@ -289,8 +304,6 @@ function useRender(origin, r3mRef, frameloop) {
289
304
  const r3m = r3mRef.current;
290
305
  if (!r3m.state || !r3m.map)
291
306
  return;
292
- r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
293
- r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
294
307
  const camera = r3m.state.camera;
295
308
  const gl = r3m.state.gl;
296
309
  const advance = r3m.state.advance;
package/dist/maplibre/es/main10.mjs CHANGED
@@ -5,8 +5,6 @@ function useRender(origin, r3mRef, frameloop) {
5
5
  const r3m = r3mRef.current;
6
6
  if (!r3m.state || !r3m.map)
7
7
  return;
8
- r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
9
- r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
10
8
  const camera = r3m.state.camera;
11
9
  const gl = r3m.state.gl;
12
10
  const advance = r3m.state.advance;
package/dist/maplibre/es/main10.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main10.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n const r3m = r3mRef.current;\n if (!r3m.state || !r3m.map) return;\n r3m.state.size.width = r3m.state.gl.domElement.clientWidth;\n r3m.state.size.height = r3m.state.gl.domElement.clientHeight;\n const camera = r3m.state.camera;\n const gl = r3m.state.gl;\n const advance = r3m.state.advance;\n r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (frameloop === 'always') r3m.map.triggerRepaint();\n })\n\n return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AAC5B,QAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,GAAG,WAAW;AAC/C,QAAI,MAAM,KAAK,SAAS,IAAI,MAAM,GAAG,WAAW;AAC1C,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
1
+ {"version":3,"file":"main10.mjs","sources":["../../../src/core/use-render.ts"],"sourcesContent":["import { MutableRefObject } from \"react\";\nimport { Matrix4Tuple, PerspectiveCamera } from \"three\";\nimport { R3mStore } from \"./store\";\nimport { syncCamera } from \"./sync-camera\";\nimport { useFunction } from \"./use-function\";\n\nexport function useRender(\n origin: Matrix4Tuple, r3mRef: MutableRefObject<R3mStore>, frameloop: 'always' | 'demand'\n) {\n\n const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {\n const r3m = r3mRef.current;\n if (!r3m.state || !r3m.map) return;\n const camera = r3m.state.camera;\n const gl = r3m.state.gl;\n const advance = r3m.state.advance;\n r3m.mapCamMx = mapCamMx as Matrix4Tuple;\n syncCamera(camera as PerspectiveCamera, origin, mapCamMx as Matrix4Tuple);\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if (frameloop === 'always') r3m.map.triggerRepaint();\n })\n\n return render;\n\n}"],"names":[],"mappings":";;AAMgB,SAAA,UACd,QAAsB,QAAoC,WAC1D;AAEA,QAAM,SAAS,YAAY,CAAC,KAA6B,aAAuB;AAC9E,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAI,SAAS,CAAC,IAAI;AAAK;AACtB,UAAA,SAAS,IAAI,MAAM;AACnB,UAAA,KAAK,IAAI,MAAM;AACf,UAAA,UAAU,IAAI,MAAM;AAC1B,QAAI,WAAW;AACJ,eAAA,QAA6B,QAAQ,QAAwB;AACxE,OAAG,WAAW;AACd,YAAQ,KAAK,IAAQ,IAAA,MAAO,IAAI;AAChC,QAAI,cAAc;AAAU,UAAI,IAAI;EAAe,CACpD;AAEM,SAAA;AAET;"}
package/dist/maplibre/es/main12.mjs CHANGED
@@ -54,9 +54,24 @@ function useOnAdd(fromLngLat, { frameloop, ...renderProps }) {
54
54
  setTimeout(() => setMounted(true));
55
55
  });
56
56
  const onResize = useFunction(() => {
57
+ if (!r3mRef.current.map)
58
+ return;
57
59
  if (!r3mRef.current.state)
58
60
  return;
59
- r3mRef.current.state.set({});
61
+ const map = r3mRef.current.map;
62
+ const canvas = map.getCanvas();
63
+ let updateDPR = canvas.classList.contains("mapboxgl-canvas");
64
+ if (!updateDPR && map.getPixelRatio && map.getPixelRatio() === window.devicePixelRatio) {
65
+ updateDPR = true;
66
+ }
67
+ if (updateDPR) {
68
+ r3mRef.current.state.setDpr(window.devicePixelRatio);
69
+ }
70
+ r3mRef.current.state.setSize(
71
+ canvas.clientWidth,
72
+ canvas.clientHeight,
73
+ false
74
+ );
60
75
  });
61
76
  const onRemove = useFunction(() => {
62
77
  if (!r3mRef.current.root)
package/dist/maplibre/es/main12.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main12.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n updateStyle: false,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n map.on('resize', onResize)\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onResize = useFunction(() => {\n if (!r3mRef.current.state) return;\n // because we update size out of zustand, we just want to let it know that something changed\n r3mRef.current.state.set({});\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n if (!r3mRef.current.map) return;\n r3mRef.current.map.off('resize', onResize)\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAO;AAE3B,WAAO,QAAQ,MAAM,IAAI,CAAE,CAAA;AAAA,EAAA,CAC5B;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
1
+ {"version":3,"file":"main12.mjs","sources":["../../../src/core/use-on-add.ts"],"sourcesContent":["import { RenderProps, _roots, createRoot } from \"@react-three/fiber\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createEvents } from \"./create-events\";\nimport { FromLngLat, MapInstance } from \"./generic-map\";\nimport { R3mStore } from \"./store\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd(\n fromLngLat: FromLngLat,\n { frameloop, ...renderProps }: RenderProps<HTMLCanvasElement>\n) {\n\n const [mounted, setMounted] = useState(false);\n\n const r3mRef = useRef<R3mStore>({ fromLngLat });\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext) => {\n\n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n dpr: window.devicePixelRatio,\n events: createEvents(),\n ...renderProps,\n frameloop: 'never',\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n near: 0,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n updateStyle: false,\n ...renderProps?.size,\n },\n });\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n const store = _roots.get(canvas)!.store;\n\n r3mRef.current.map = map;\n r3mRef.current.root = root;\n r3mRef.current.state = store.getState();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n store.setState({ r3m: r3mRef.current } as any);\n\n if (frameloop === 'demand') {\n store.setState({\n frameloop,\n invalidate: () => {\n map.triggerRepaint();\n },\n })\n }\n\n map.on('resize', onResize)\n\n setTimeout(() => setMounted(true));\n\n })\n\n const onResize = useFunction(() => {\n if (!r3mRef.current.map) return;\n if (!r3mRef.current.state) return;\n const map = r3mRef.current.map;\n const canvas = map.getCanvas();\n\n // update DPR only on mapbox\n let updateDPR = canvas.classList.contains('mapboxgl-canvas');\n\n // or on newer versions of MapLibre that take this into account\n if(!updateDPR && map.getPixelRatio && map.getPixelRatio() === window.devicePixelRatio) {\n updateDPR = true;\n } \n\n if(updateDPR) {\n r3mRef.current.state.setDpr(window.devicePixelRatio);\n }\n\n r3mRef.current.state.setSize(\n canvas.clientWidth,\n canvas.clientHeight,\n false\n );\n\n })\n\n const onRemove = useFunction(() => {\n if (!r3mRef.current.root) return;\n r3mRef.current.root.unmount();\n r3mRef.current.root = undefined;\n if (!r3mRef.current.map) return;\n r3mRef.current.map.off('resize', onResize)\n })\n\n // on unmount\n useEffect(() => () => onRemove(), [onRemove])\n\n return { onAdd, onRemove, mounted, r3mRef };\n}"],"names":[],"mappings":";;;;AAOO,SAAS,SACd,YACA,EAAE,WAAW,GAAG,eAChB;AAEA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,OAAiB,EAAE,WAAY,CAAA;AAE9C,QAAM,QAAQ,YAAY,CAAC,KAAkB,OAA8B;AAEnE,UAAA,SAAS,IAAI;AACb,UAAA,OAAO,WAAW,MAAM;AAC9B,SAAK,UAAU;AAAA,MACb,KAAK,OAAO;AAAA,MACZ,QAAQ,aAAa;AAAA,MACrB,GAAG;AAAA,MACH,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,2CAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAAC,UAAU;AAEd,cAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,QAClB,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,aAAa;AAAA,QACb,GAAG,2CAAa;AAAA,MAClB;AAAA,IAAA,CACD;AAGD,UAAM,QAAQ,OAAO,IAAI,MAAM,EAAG;AAElC,WAAO,QAAQ,MAAM;AACrB,WAAO,QAAQ,OAAO;AACf,WAAA,QAAQ,QAAQ,MAAM,SAAS;AAGtC,UAAM,SAAS,EAAE,KAAK,OAAO,QAAgB,CAAA;AAE7C,QAAI,cAAc,UAAU;AAC1B,YAAM,SAAS;AAAA,QACb;AAAA,QACA,YAAY,MAAM;AAChB,cAAI,eAAe;AAAA,QACrB;AAAA,MAAA,CACD;AAAA,IACH;AAEI,QAAA,GAAG,UAAU,QAAQ;AAEd,eAAA,MAAM,WAAW,IAAI,CAAC;AAAA,EAAA,CAElC;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAK;AACrB,QAAA,CAAC,OAAO,QAAQ;AAAO;AACrB,UAAA,MAAM,OAAO,QAAQ;AACrB,UAAA,SAAS,IAAI;AAGnB,QAAI,YAAY,OAAO,UAAU,SAAS,iBAAiB;AAGxD,QAAA,CAAC,aAAa,IAAI,iBAAiB,IAAI,cAAc,MAAM,OAAO,kBAAkB;AACzE,kBAAA;AAAA,IACd;AAEA,QAAG,WAAW;AACZ,aAAO,QAAQ,MAAM,OAAO,OAAO,gBAAgB;AAAA,IACrD;AAEA,WAAO,QAAQ,MAAM;AAAA,MACnB,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,IAAA;AAAA,EACF,CAED;AAEK,QAAA,WAAW,YAAY,MAAM;AAC7B,QAAA,CAAC,OAAO,QAAQ;AAAM;AACnB,WAAA,QAAQ,KAAK;AACpB,WAAO,QAAQ,OAAO;AAClB,QAAA,CAAC,OAAO,QAAQ;AAAK;AACzB,WAAO,QAAQ,IAAI,IAAI,UAAU,QAAQ;AAAA,EAAA,CAC1C;AAGD,YAAU,MAAM,MAAM,SAAY,GAAA,CAAC,QAAQ,CAAC;AAE5C,SAAO,EAAE,OAAO,UAAU,SAAS,OAAO;AAC5C;"}
package/dist/maplibre/types/core/generic-map.d.ts CHANGED
@@ -31,6 +31,8 @@ export interface MercatorCoordinate {
31
31
  /** Generic interface of Mapbox/Maplibre `Map` */
32
32
  export interface MapInstance {
33
33
  getCanvas(): HTMLCanvasElement;
34
+ /** MapLibre only */
35
+ getPixelRatio?: () => number;
34
36
  triggerRepaint(): void;
35
37
  on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
36
38
  off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
package/dist/types/core/generic-map.d.ts CHANGED
@@ -31,6 +31,8 @@ export interface MercatorCoordinate {
31
31
  /** Generic interface of Mapbox/Maplibre `Map` */
32
32
  export interface MapInstance {
33
33
  getCanvas(): HTMLCanvasElement;
34
+ /** MapLibre only */
35
+ getPixelRatio?: () => number;
34
36
  triggerRepaint(): void;
35
37
  on<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
36
38
  off<T extends keyof MapEventType>(type: T, listener: (ev: MapEventType[T] & Object) => void): this;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-three-map",
3
- "version": "0.7.0",
3
+ "version": "0.7.2",
4
4
  "description": "Use react-three-fiber inside MapLibre and Mapbox",
5
5
  "main": "dist/cjs/main.js",
6
6
  "module": "dist/es/main.mjs",