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

.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);
  });