alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-25 14:25:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

Improve canvas editor modal open/close logic

Browse Source 
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.
This commit is contained in:
Dariusz L
2025-06-24 19:16:14 +02:00
parent d5e35f4cfc
commit ec3e07f4c4
1 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
js/Canvas_view.js
View File

@@ -670,39 +670,52 @@ async function createCanvasWidget(node, widget, app) {
node.size = [500, 500]; node.size = [500, 500];
const openEditorBtn = controlPanel.querySelector(`#open-editor-btn-${node.id}`); const openEditorBtn = controlPanel.querySelector(`#open-editor-btn-${node.id}`);
let backdrop = null;
let modalContent = null;
let originalParent = null;
let isEditorOpen = false;
const closeEditor = () => {
originalParent.appendChild(mainContainer);
document.body.removeChild(backdrop);
isEditorOpen = false;
openEditorBtn.textContent = "⛶";
openEditorBtn.title = "Open in Editor";
canvas.render();
if (node.onResize) {
node.onResize();
}
};
openEditorBtn.onclick = () => { openEditorBtn.onclick = () => {
const originalParent = mainContainer.parentNode; if (isEditorOpen) {
closeEditor();
return;
}
originalParent = mainContainer.parentNode;
if (!originalParent) { if (!originalParent) {
console.error("Could not find original parent of the canvas container!"); console.error("Could not find original parent of the canvas container!");
return; return;
} }
const backdrop = $el("div.painter-modal-backdrop");
const modalContent = $el("div.painter-modal-content"); backdrop = $el("div.painter-modal-backdrop");
modalContent = $el("div.painter-modal-content");
modalContent.appendChild(mainContainer); modalContent.appendChild(mainContainer);
backdrop.appendChild(modalContent); backdrop.appendChild(modalContent);
document.body.appendChild(backdrop); document.body.appendChild(backdrop);
openEditorBtn.disabled = true;
isEditorOpen = true;
openEditorBtn.textContent = "X";
openEditorBtn.title = "Close Editor";
canvas.render(); canvas.render();
if (node.onResize) { if (node.onResize) {
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);
}; };
api.addEventListener("execution_start", async () => { api.addEventListener("execution_start", async () => {