From ea2f96b0150b8bd0460d7667d0779bb8cd7f5311 Mon Sep 17 00:00:00 2001
From: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
Date: Sun, 18 Jan 2026 21:37:06 -0800
Subject: [PATCH] perf: optimize magnified view update by caching canvas rect
 to avoid layout thrashing

---
 web/magnify-glass/EventHandler.js |  4 ++--
 web/magnify-glass/MagnifyGlass.js | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/magnify-glass/EventHandler.js b/web/magnify-glass/EventHandler.js
index 679a17f..397e489 100644
--- a/web/magnify-glass/EventHandler.js
+++ b/web/magnify-glass/EventHandler.js
@@ -190,7 +190,7 @@ class EventHandler {
           this.magnifyGlass.state.x = pixelX;
           this.magnifyGlass.state.y = pixelY;
           this.magnifyGlass.ui.positionGlass(clientX, clientY);
-          this.magnifyGlass.updateMagnifiedView();
+          this.magnifyGlass.updateMagnifiedView(rect);
         }
       });
     }
@@ -223,7 +223,7 @@ class EventHandler {
       } else {
         this.magnifyGlass.ui.positionGlass(clientX, clientY);
       }
-      this.magnifyGlass.updateMagnifiedView();
+      this.magnifyGlass.updateMagnifiedView(rect);
     }
   }
 }
diff --git a/web/magnify-glass/MagnifyGlass.js b/web/magnify-glass/MagnifyGlass.js
index 3930c62..4cc1121 100644
--- a/web/magnify-glass/MagnifyGlass.js
+++ b/web/magnify-glass/MagnifyGlass.js
@@ -161,8 +161,9 @@ class MagnifyGlass {
   }
   /**
    * Update the magnified view.
+   * @param rect - Optional pre-calculated bounding rect of the canvas to avoid layout thrashing
    */
-  updateMagnifiedView() {
+  updateMagnifiedView(rect) {
     if (!this.state.active || !this.renderer || !this.litegraphCanvas) {
       return;
     }
@@ -170,7 +171,7 @@ class MagnifyGlass {
       return;
     }
     this.updateCanvasTransformation();
-    this.calculateSourceRegion();
+    this.calculateSourceRegion(rect);
     if (!this.state.isRenderScheduled) {
       this.state.isRenderScheduled = true;
       requestAnimationFrame(() => {
@@ -216,8 +217,9 @@ class MagnifyGlass {
   }
   /**
    * Calculate the source region for magnification.
+   * @param cachedRect - Optional pre-calculated bounding rect of the canvas to avoid layout thrashing
    */
-  calculateSourceRegion() {
+  calculateSourceRegion(cachedRect) {
     const cursorPixelX = this.state.x;
     const cursorPixelY = this.state.y;
     const canvasScale = this.state.canvasScale;
@@ -225,7 +227,7 @@ class MagnifyGlass {
     const canvasOffsetY = this.state.canvasOffsetY;
     if (canvasScale === 0) return;
     if (!this.litegraphCanvas) return;
-    const rect = this.litegraphCanvas.getBoundingClientRect();
+    const rect = cachedRect || this.litegraphCanvas.getBoundingClientRect();
     const dpr = rect.width > 0 ? this.litegraphCanvas.width / rect.width : 1;
     const cursorCssX = cursorPixelX / dpr;
     const cursorCssY = cursorPixelY / dpr;