From 7dbde17bcd2f42f023033774f6e1c5060f010ebb Mon Sep 17 00:00:00 2001 From: M0rtus59 Date: Sat, 18 Jul 2026 14:11:04 +0500 Subject: [PATCH] Minor optimizations --- js/layout.js | 26 ++++++++++++++++++++++---- js/queue.js | 13 +++++++++++-- js/styles.js | 6 ++++-- js/ui.js | 3 ++- 4 files changed, 39 insertions(+), 9 deletions(-) diff --git a/js/layout.js b/js/layout.js index b1479f0..8b5cc6d 100644 --- a/js/layout.js +++ b/js/layout.js @@ -88,6 +88,7 @@ export function applyClassicLayout(enable) { let savedButtonData = null; let domObserver = null; +let syncScheduled = false; function findOriginalButton() { const icon = document.querySelector('[class*="lucide--panel-right"], [class*="lucide--panel-left"]'); @@ -308,8 +309,6 @@ export function syncClassicLayout() { if (nativeBtn) nativeBtn.click(); }); - container.appendChild(customBtn); - } else if (customBtn && container && container.lastChild !== customBtn) { container.appendChild(customBtn); } @@ -345,6 +344,7 @@ export function setupPropertiesPanelToggleFix() { display: none !important; } .comfy-sidebar-custom-properties-toggle { + order: 99999 !important; margin-left: -8px !important; margin-right: 0px !important; display: inline-flex !important; @@ -353,6 +353,7 @@ export function setupPropertiesPanelToggleFix() { padding: 0 !important; } .comfy-sidebar-custom-properties-toggle.comfy-panel-open { + order: 99999 !important; margin-left: 0px !important; margin-right: 0px !important; display: inline-flex !important; @@ -374,12 +375,29 @@ export function setupPropertiesPanelToggleFix() { let shouldSync = false; for (const mutation of mutations) { if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) { + // Ensure mutation is on an actual Element node (nodeType 1) and not just text node updates + const hasElementMutation = Array.from(mutation.addedNodes).some(node => node.nodeType === 1) || + Array.from(mutation.removedNodes).some(node => node.nodeType === 1); + + if (!hasElementMutation) continue; + + // Ignore mutations on our own components to avoid feedback loops + const isOurNode = Array.from(mutation.addedNodes).some(node => + node.classList?.contains?.("comfy-sidebar-custom-properties-toggle") || + node.id === "comfy-sidebar-layout-fix-styles" + ); + if (isOurNode) continue; + shouldSync = true; break; } } - if (shouldSync) { - syncClassicLayout(); + if (shouldSync && !syncScheduled) { + syncScheduled = true; + requestAnimationFrame(() => { + syncClassicLayout(); + syncScheduled = false; + }); } }); diff --git a/js/queue.js b/js/queue.js index 3d832cf..04882bd 100644 --- a/js/queue.js +++ b/js/queue.js @@ -122,6 +122,7 @@ export function setupApiListeners() { workflow: activeWorkspaceWorkflow, startTime: Date.now(), duration: null }); } + renderDOMFn(); // Render immediately to prevent pop-in delay! syncQueue(); }); @@ -162,9 +163,17 @@ export function setupApiListeners() { api.addEventListener("executed", (e) => { if (promptStates.has(e.detail.prompt_id)) { + const st = promptStates.get(e.detail.prompt_id); const finalImgs = findImagesInOutputs({ output: e.detail.output }); - if (finalImgs.length > 0) promptStates.get(e.detail.prompt_id).images = finalImgs; - promptStates.get(e.detail.prompt_id).texts = findTextsInOutputs({ output: e.detail.output }); + if (finalImgs.length > 0) { + // Overwrite with latest images to avoid accumulation across sequential nodes + st.images = finalImgs; + } + const finalTexts = findTextsInOutputs({ output: e.detail.output }); + if (finalTexts.length > 0) { + // Overwrite with latest texts to avoid clearing previously set text outputs + st.texts = finalTexts; + } renderDOMFn(); } }); diff --git a/js/styles.js b/js/styles.js index a568354..d9a6e63 100644 --- a/js/styles.js +++ b/js/styles.js @@ -7,11 +7,13 @@ export function injectStyles() { border-radius: 4px; padding: 8px; position: relative; min-height: 80px; margin-bottom: 12px; break-inside: avoid; user-select: none; -webkit-user-select: none; - transition: border-color 0.2s, background-color 0.2s; border: 2px solid var(--border-color, #333); color: var(--comfy-input-color, var(--fg-color, #eee)); } - .comfy-sidebar-card:hover { border-color: var(--p-primary-color, var(--primary-color, #555)) !important; } + .comfy-sidebar-card:hover { + border-color: var(--p-primary-color, var(--primary-color, #555)) !important; + transition: border-color 0.2s, background-color 0.2s; + } .comfy-sidebar-card.active { --border-color: #3b82f6; --hover-color: #60a5fa; } .comfy-sidebar-card.pending { --border-color: #6c757d; --hover-color: #adb5bd; } .comfy-sidebar-card.cancelled { --border-color: #ffc107; --hover-color: #ffe082; } diff --git a/js/ui.js b/js/ui.js index ca20aad..46113b0 100644 --- a/js/ui.js +++ b/js/ui.js @@ -426,7 +426,7 @@ export function renderDOM() { cardObj.grid.innerHTML = ""; cardObj.firstImgElement = null; cardObj.placeholder.style.display = "block"; } else { cardObj.placeholder.style.display = "none"; -// Check if we can reuse elements (count matches AND tag types match) + // Check if we can reuse elements (count matches AND tag types match) let canReuse = cardObj.grid.children.length === state.images.length; if (canReuse) { state.images.forEach((img, idx) => { @@ -524,6 +524,7 @@ export function renderDOM() { } if (state.images.length === 0) { + // Correctly display accumulated texts (like workflow prompts) while running as requested if (state.texts && state.texts.length > 0) { cardObj.placeholder.textContent = state.texts.join("\n"); Object.assign(cardObj.placeholder.style, { whiteSpace: "pre-wrap", textAlign: "left" }); } else {