From 001b62365ec349c1bd7dc68ea499a776aeea1b92 Mon Sep 17 00:00:00 2001
From: Leon Koole <leon@koole.io>
Date: Mon, 3 Jun 2024 20:01:48 +0200
Subject: [PATCH 1/3] Handle canvas resizing

---
 package.json   |  3 ++-
 src/Canvas.tsx | 38 ++++++++++++++++++--------------------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index b89dea4..025a804 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,8 @@
   },
   "homepage": "https://github.com/pmndrs/react-three-csg#readme",
   "dependencies": {
-    "mitt": "^3.0.0"
+    "mitt": "^3.0.0",
+    "react-merge-refs": "^2.1.1"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0.0",
diff --git a/src/Canvas.tsx b/src/Canvas.tsx
index 57060fd..4872bf0 100644
--- a/src/Canvas.tsx
+++ b/src/Canvas.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
-import type { Options as ResizeOptions } from 'react-use-measure'
+import useMeasure, { Options as ResizeOptions } from 'react-use-measure'
+import { mergeRefs } from 'react-merge-refs'
 import { Canvas as CanvasImpl, RenderProps } from '@react-three/fiber'
 import { EVENTS } from './events'
 
@@ -12,7 +13,7 @@ export interface CanvasProps
    * Options to pass to useMeasure.
    * @see https://github.com/pmndrs/react-use-measure#api
    */
-  resize?: ResizeOptions
+  resize?: ResizeOptions // You can define specific types for resize options if necessary
   /** The target where events are being subscribed to, default: the div that wraps canvas */
   eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>
   /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
@@ -25,7 +26,9 @@ function isRefObject<T>(ref: any): ref is React.MutableRefObject<T> {
 
 export function Canvas({ eventSource, worker, fallback, style, className, id, ...props }: CanvasProps) {
   const [shouldFallback, setFallback] = React.useState(false)
+  const [measureRef, bounds] = useMeasure()
   const canvasRef = useRef<HTMLCanvasElement>(null!)
+  const mergedRef = mergeRefs([canvasRef, measureRef])
   const hasTransferredToOffscreen = useRef(false)
 
   useEffect(() => {
@@ -110,25 +113,20 @@ export function Canvas({ eventSource, worker, fallback, style, className, id, ..
         { passive }
       )
     })
-
-    const handleResize = () => {
-      worker.postMessage({
-        type: 'resize',
-        payload: {
-          width: currentEventSource.clientWidth,
-          height: currentEventSource.clientHeight,
-          top: currentEventSource.offsetTop,
-          left: currentEventSource.offsetLeft,
-        },
-      })
-    }
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
   }, [worker])
 
+  useEffect(() => {
+    worker.postMessage({
+      type: 'resize',
+      payload: {
+        width: bounds.width,
+        height: bounds.height,
+        top: bounds.top,
+        left: bounds.left,
+      },
+    })
+  }, [bounds])
+
   useEffect(() => {
     if (!worker) return
     worker.postMessage({ type: 'props', payload: props })
@@ -143,7 +141,7 @@ export function Canvas({ eventSource, worker, fallback, style, className, id, ..
       id={id}
       className={className}
       style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', display: 'block', ...style }}
-      ref={canvasRef}
+      ref={mergedRef}
     />
   )
 }

From 0f90b8933588f7bcaee74742c5dd267b0cce9ebf Mon Sep 17 00:00:00 2001
From: Leon Koole <leon@koole.io>
Date: Mon, 3 Jun 2024 20:17:04 +0200
Subject: [PATCH 2/3] Remove old comment

---
 src/Canvas.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Canvas.tsx b/src/Canvas.tsx
index 4872bf0..094b4d1 100644
--- a/src/Canvas.tsx
+++ b/src/Canvas.tsx
@@ -13,7 +13,7 @@ export interface CanvasProps
    * Options to pass to useMeasure.
    * @see https://github.com/pmndrs/react-use-measure#api
    */
-  resize?: ResizeOptions // You can define specific types for resize options if necessary
+  resize?: ResizeOptions
   /** The target where events are being subscribed to, default: the div that wraps canvas */
   eventSource?: HTMLElement | React.MutableRefObject<HTMLElement>
   /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */

From ff9f9cd7547be9d3422e69520b54e3489c46158c Mon Sep 17 00:00:00 2001
From: Leon Koole <leon@koole.io>
Date: Mon, 3 Jun 2024 20:20:06 +0200
Subject: [PATCH 3/3] Pass resize options to useMeasure

---
 src/Canvas.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Canvas.tsx b/src/Canvas.tsx
index 094b4d1..5d3d9b1 100644
--- a/src/Canvas.tsx
+++ b/src/Canvas.tsx
@@ -26,7 +26,7 @@ function isRefObject<T>(ref: any): ref is React.MutableRefObject<T> {
 
 export function Canvas({ eventSource, worker, fallback, style, className, id, ...props }: CanvasProps) {
   const [shouldFallback, setFallback] = React.useState(false)
-  const [measureRef, bounds] = useMeasure()
+  const [measureRef, bounds] = useMeasure(props.resize)
   const canvasRef = useRef<HTMLCanvasElement>(null!)
   const mergedRef = mergeRefs([canvasRef, measureRef])
   const hasTransferredToOffscreen = useRef(false)