From ec3389b51a46178270b1f1acadc2df59dfc701be Mon Sep 17 00:00:00 2001
From: Jono Brandel <developer@jono.fyi>
Date: Tue, 13 Jan 2026 21:21:06 -0800
Subject: [PATCH] Improve Two.js resize handling in Provider

Refactored the Provider component to better handle Two.js instance resizing, distinguishing between fitted and non-fitted modes. Also updated baseline-browser-mapping to version 2.9.14 in dependencies.
---
 lib/Provider.tsx  | 54 +++++++++++++++++++++++++++--------------------
 package-lock.json |  7 +++---
 package.json      |  3 ++-
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/lib/Provider.tsx b/lib/Provider.tsx
index 153610d..8885f06 100644
--- a/lib/Provider.tsx
+++ b/lib/Provider.tsx
@@ -163,43 +163,51 @@ export const Provider: React.FC<ComponentProps> = (props) => {
     }
   }, [two, twoState, props.width, props.height]);
 
-  // Auto-update dimensions if fullscreen / fitted
+  // Auto-update dimensions when Two.js instance resizes
   useEffect(() => {
     const isRoot = !two;
 
-    if (isRoot) {
-      // Only update root instance
-      if (twoState) {
-        const instance = twoState;
-        let width = instance.width;
-        let height = instance.height;
-
-        if (props.fullscreen || props.fitted) {
-          instance.bind('update', update);
-        }
+    if (isRoot && twoState) {
+      const instance = twoState;
 
-        function update() {
-          const widthFlagged = instance.width !== width;
-          const heightFlagged = instance.height !== height;
+      // Handler for Two.js resize events
+      function handleResize() {
+        setWidth(instance.width);
+        setHeight(instance.height);
+      }
 
-          if (widthFlagged) {
-            width = instance.width;
-          }
-          if (heightFlagged) {
-            height = instance.height;
-          }
-          if (widthFlagged || heightFlagged) {
+      // Handler for resizing Two.js canvas based on fitted
+      function handleUpdate() {
+        const parent = instance.renderer.domElement.parentElement;
+        if (parent) {
+          const width = parent.offsetWidth;
+          const height = parent.offsetHeight;
+          if (instance.width !== width) {
             setWidth(width);
+          }
+          if (instance.height !== height) {
             setHeight(height);
           }
         }
+      }
+
+      if (props.fitted) {
+        // Catch renderer size change on fitted
+        instance.bind('update', handleUpdate);
+
+        return () => {
+          instance.unbind('update', handleUpdate);
+        };
+      } else {
+        // Bind to renderer's resize event (fired by setSize(), etc.)
+        instance.renderer.bind('resize', handleResize);
 
         return () => {
-          instance.unbind('update', update);
+          instance.renderer.unbind('resize', handleResize);
         };
       }
     }
-  }, [two, twoState, props.fullscreen, props.fitted]);
+  }, [two, twoState, props.fitted]);
 
   // Validate children in development mode
   useEffect(() => {
diff --git a/package-lock.json b/package-lock.json
index b02e571..ce80fa7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.3",
         "@vitest/ui": "^3.2.4",
+        "baseline-browser-mapping": "^2.9.14",
         "clsx": "^2.1.1",
         "eslint": "^9.13.0",
         "eslint-plugin-react-hooks": "^5.0.0",
@@ -3371,9 +3372,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.10",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.10.tgz",
-      "integrity": "sha512-uLfgBi+7IBNay8ECBO2mVMGZAc1VgZWEChxm4lv+TobGdG82LnXMjuNGo/BSSZZL4UmkWhxEHP2f5ziLNwGWMA==",
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.14.tgz",
+      "integrity": "sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/package.json b/package.json
index 6c65ef6..4cc9a4a 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/ui": "^3.2.4",
+    "baseline-browser-mapping": "^2.9.14",
     "clsx": "^2.1.1",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
@@ -82,4 +83,4 @@
     "react-dom": ">=19",
     "two.js": ">=v0.8.23"
   }
-}
\ No newline at end of file
+}