From ec3e07f4c43ed4a535e2c8d4db92a58c3bab1800 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Tue, 24 Jun 2025 19:16:14 +0200
Subject: [PATCH] Improve canvas editor modal open/close logic

Refactored the canvas editor modal to allow toggling open and close with the same button. Updated button text and title to reflect the editor state, removed the separate close button, and improved state management for better user experience.
---
 js/Canvas_view.js | 65 ++++++++++++++++++++++++++++-------------------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/js/Canvas_view.js b/js/Canvas_view.js
index d9657c9..fde86a4 100644
--- a/js/Canvas_view.js
+++ b/js/Canvas_view.js
@@ -670,39 +670,52 @@ async function createCanvasWidget(node, widget, app) {
     node.size = [500, 500];
 
     const openEditorBtn = controlPanel.querySelector(`#open-editor-btn-${node.id}`);
-    openEditorBtn.onclick = () => {
-        const originalParent = mainContainer.parentNode;
-        if (!originalParent) {
-            console.error("Could not find original parent of the canvas container!");
-            return;
-        }
-        const backdrop = $el("div.painter-modal-backdrop");
-        const modalContent = $el("div.painter-modal-content");
+    let backdrop = null;
+    let modalContent = null;
+    let originalParent = null;
+    let isEditorOpen = false;
+
+    const closeEditor = () => {
+        originalParent.appendChild(mainContainer);
+        document.body.removeChild(backdrop);
         
-        modalContent.appendChild(mainContainer);
-        backdrop.appendChild(modalContent);
-        document.body.appendChild(backdrop);
-        openEditorBtn.disabled = true;
+        isEditorOpen = false;
+        openEditorBtn.textContent = "⛶";
+        openEditorBtn.title = "Open in Editor";
 
         canvas.render();
         if (node.onResize) {
             node.onResize();
         }
+    };
 
-        const closeButton = $el("button", {
-            textContent: "Close",
-            style: { position: 'absolute', top: '10px', right: '10px', zIndex: 100 },
-            onclick: () => {
-                originalParent.appendChild(mainContainer);
-                document.body.removeChild(backdrop);
-                openEditorBtn.disabled = false;
-                canvas.render();
-                if (node.onResize) {
-                    node.onResize();
-                }
-            }
-        });
-        modalContent.appendChild(closeButton);
+    openEditorBtn.onclick = () => {
+        if (isEditorOpen) {
+            closeEditor();
+            return;
+        }
+
+        originalParent = mainContainer.parentNode;
+        if (!originalParent) {
+            console.error("Could not find original parent of the canvas container!");
+            return;
+        }
+
+        backdrop = $el("div.painter-modal-backdrop");
+        modalContent = $el("div.painter-modal-content");
+        
+        modalContent.appendChild(mainContainer);
+        backdrop.appendChild(modalContent);
+        document.body.appendChild(backdrop);
+        
+        isEditorOpen = true;
+        openEditorBtn.textContent = "X";
+        openEditorBtn.title = "Close Editor";
+
+        canvas.render();
+        if (node.onResize) {
+            node.onResize();
+        }
     };
 
     api.addEventListener("execution_start", async () => {