Fix issues on DPR or browser zoom changes (#74)

Author: RodrigoHamuy

.changeset/gold-numbers-march.md

@@ -0,0 +1,5 @@
+---
+"react-three-map": patch
+---
+
+Fix issues on DPR or browser zoom changes.

src/core/use-on-add.ts

@@ -74,15 +74,9 @@ export function useOnAdd(
   })
 
   const onResize = useFunction(() => {
-    if (!r3mRef.current.map) return;
     if (!r3mRef.current.state) return;
-    const canvas = r3mRef.current.map.getCanvas();
-    r3mRef.current.state.setSize(
-      canvas.clientWidth,
-      canvas.clientHeight,
-      false
-    );
-
+    // because we update size out of zustand, we just want to let it know that something changed
+    r3mRef.current.state.set({});
   })
 
   const onRemove = useFunction(() => {

src/core/use-render.ts

@@ -11,6 +11,8 @@ export function useRender(
   const render = useFunction((_gl: WebGL2RenderingContext, mapCamMx: number[]) => {
     const r3m = r3mRef.current;
     if (!r3m.state || !r3m.map) return;
+    r3m.state.size.width = r3m.state.gl.domElement.clientWidth;
+    r3m.state.size.height = r3m.state.gl.domElement.clientHeight;
     const camera = r3m.state.camera;
     const gl = r3m.state.gl;
     const advance = r3m.state.advance;

stories/src/screen-sizer.tsx

@@ -8,10 +8,11 @@ const worldPos = new Vector3();
 export const ScreenSizer = memo<Omit<Object3DProps, 'scale'> & {scale?: number}>(({
   scale = 1, ...props
 }) => {
-  const container = useRef<Object3D>(null as any);
+  const container = useRef<Object3D>(null);
 
   useFrame((state) => {
     const obj = container.current;
+    if(!obj) return;
     const sf = calculateScaleFactor(obj.getWorldPosition(worldPos), scale, state.camera, state.size);
     obj.scale.setScalar(sf * scale);
   });