From 7c3a6f72c72498fc3a58a96651cb2d33226f4756 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sat, 28 Jun 2025 08:07:10 +0200
Subject: [PATCH] Defer canvas rendering with setTimeout for UI updates

Replaces direct calls to canvas.render() and node.onResize() with setTimeout to defer execution, ensuring UI updates occur after DOM changes. This helps prevent rendering issues and improves responsiveness when toggling mask controls and editor view.
---
 js/CanvasView.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/js/CanvasView.js b/js/CanvasView.js
index 4c0fde6..86fac2c 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -772,6 +772,8 @@ async function createCanvasWidget(node, widget, app) {
                             maskBtn.classList.add('primary');
                             maskControls.querySelectorAll('.mask-control').forEach(c => c.style.display = 'flex');
                         }
+
+                        setTimeout(() => canvas.render(), 0);
                     }
                 }),
                 $el("div.painter-slider-container.mask-control", {style: {display: 'none'}}, [
@@ -1023,10 +1025,12 @@ async function createCanvasWidget(node, widget, app) {
         openEditorBtn.textContent = "⛶";
         openEditorBtn.title = "Open in Editor";
 
-        canvas.render();
-        if (node.onResize) {
-            node.onResize();
-        }
+        setTimeout(() => {
+            canvas.render();
+            if (node.onResize) {
+                node.onResize();
+            }
+        }, 0);
     };
 
     openEditorBtn.onclick = () => {
@@ -1052,10 +1056,12 @@ async function createCanvasWidget(node, widget, app) {
         openEditorBtn.textContent = "X";
         openEditorBtn.title = "Close Editor";
 
-        canvas.render();
-        if (node.onResize) {
-            node.onResize();
-        }
+        setTimeout(() => {
+            canvas.render();
+            if (node.onResize) {
+                node.onResize();
+            }
+        }, 0);
     };
     if (!window.canvasExecutionStates) {
         window.canvasExecutionStates = new Map();