alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-24 22:12:17 -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

65
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}`);
openEditorBtn.onclick = () => { let backdrop = null;
const originalParent = mainContainer.parentNode; let modalContent = null;
if (!originalParent) { let originalParent = null;
console.error("Could not find original parent of the canvas container!"); let isEditorOpen = false;
return;
} const closeEditor = () => {
const backdrop = $el("div.painter-modal-backdrop"); originalParent.appendChild(mainContainer);
const modalContent = $el("div.painter-modal-content"); document.body.removeChild(backdrop);
modalContent.appendChild(mainContainer); isEditorOpen = false;
backdrop.appendChild(modalContent); openEditorBtn.textContent = "⛶";
document.body.appendChild(backdrop); openEditorBtn.title = "Open in Editor";
openEditorBtn.disabled = true;
canvas.render(); canvas.render();
if (node.onResize) { if (node.onResize) {
node.onResize(); node.onResize();
} }
};
const closeButton = $el("button", { openEditorBtn.onclick = () => {
textContent: "Close", if (isEditorOpen) {
style: { position: 'absolute', top: '10px', right: '10px', zIndex: 100 }, closeEditor();
onclick: () => { return;
originalParent.appendChild(mainContainer); }
document.body.removeChild(backdrop);
openEditorBtn.disabled = false; originalParent = mainContainer.parentNode;
canvas.render(); if (!originalParent) {
if (node.onResize) { console.error("Could not find original parent of the canvas container!");
node.onResize(); return;
} }
}
}); backdrop = $el("div.painter-modal-backdrop");
modalContent.appendChild(closeButton); 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 () => { api.addEventListener("execution_start", async () => {