From 8a8abe01f27e6d77b8c36e9752f355efea31cf97 Mon Sep 17 00:00:00 2001 From: Raykosan <71210053+Raykosan@users.noreply.github.com> Date: Thu, 3 Sep 2026 18:59:49 +0300 Subject: [PATCH] Modification of the RS Decode Save Image node --- web/rs_vae_save_image.js | 252 ++++++++++++++++++++++++++++++++++----- 1 file changed, 219 insertions(+), 33 deletions(-) diff --git a/web/rs_vae_save_image.js b/web/rs_vae_save_image.js index 4e4eb9f..d976c62 100644 --- a/web/rs_vae_save_image.js +++ b/web/rs_vae_save_image.js @@ -8,19 +8,53 @@ app.registerExtension({ async beforeRegisterNodeDef(nodeType, nodeData, app) { if (nodeData.name !== NODE_TYPE) return; - const onNodeCreated = nodeType.prototype.onNodeCreated; + const originalOnNodeCreated = nodeType.prototype.onNodeCreated; + nodeType.prototype.onNodeCreated = function () { - const result = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined; + let result; + if (originalOnNodeCreated) { + result = originalOnNodeCreated.apply(this, arguments); + } + const self = this; - if (this.widgets) this.widgets.forEach(w => w.hidden = true); + if (this.widgets) { + for (let i = 0; i < this.widgets.length; i++) { + this.widgets[i].hidden = true; + } + } - this.rs_data = { filename_prefix: "ComfyUI", format: "png" }; - - const prefixW = this.widgets?.find(w => w.name === "filename_prefix"); + this.rs_data = { save_path: "", file_prefix: "img", format: "png" }; + + const dataW = this.widgets?.find(w => w.name === "node_data"); + const pathW = this.widgets?.find(w => w.name === "save_path"); + const prefixW = this.widgets?.find(w => w.name === "file_prefix"); const formatW = this.widgets?.find(w => w.name === "format"); - if (prefixW) this.rs_data.filename_prefix = prefixW.value || "ComfyUI"; - if (formatW) this.rs_data.format = formatW.value || "png"; + + this.applyState = function() { + if (pathW) pathW.value = self.rs_data.save_path; + if (prefixW) prefixW.value = self.rs_data.file_prefix; + if (formatW) formatW.value = self.rs_data.format; + if (dataW) dataW.value = JSON.stringify(self.rs_data); + self.updateUI(); + }; + + this.persistState = function () { + if (dataW) { + dataW.value = JSON.stringify(self.rs_data); + } + if (pathW) pathW.value = self.rs_data.save_path; + if (prefixW) prefixW.value = self.rs_data.file_prefix; + if (formatW) formatW.value = self.rs_data.format; + }; + + this.getDisplayPath = function () { + const path = self.rs_data.save_path; + if (!path) return "ComfyUI"; + const isAbsolute = (path.length > 1 && path[1] === ':') || path.startsWith('/'); + if (!isAbsolute) return `ComfyUI/${path}`; + return path; + }; this.rowHeight = 24; this.padding = 10; @@ -30,13 +64,26 @@ app.registerExtension({ this.widgetsHeight = 0; this.imgs = []; this.imageIndex = 0; + this.outputFolders = []; + this.foldersLoaded = false; + this.setSize([this.targetWidth, 300]); - this.widgets_start_y = 107; + this.widgets_start_y = 131; - this.syncToWidgets = function () { - if (prefixW) prefixW.value = self.rs_data.filename_prefix; - if (formatW) formatW.value = self.rs_data.format; + this.loadOutputFolders = async function () { + if (self.foldersLoaded) return; + try { + const resp = await fetch("/rs_folders"); + if (resp.ok) { + const data = await resp.json(); + self.outputFolders = data.subfolders || []; + self.foldersLoaded = true; + } + } catch (e) { + self.outputFolders = []; + } }; + this.loadOutputFolders(); const onExecuted = this.onExecuted; this.onExecuted = function (message) { @@ -47,10 +94,11 @@ app.registerExtension({ for (const image of message.images) { const img = new Image(); img.onload = () => { + this.imgs.push(img); if (this.graph) this.graph.setDirtyCanvas(true, true); }; + img.onerror = () => {}; img.src = `/view?filename=${encodeURIComponent(image.filename)}&type=${image.type}&subfolder=${encodeURIComponent(image.subfolder || '')}`; - this.imgs.push(img); } } return r; @@ -64,8 +112,18 @@ app.registerExtension({ const iW = this.size[0] - p * 2 - lW; let y = 45; + const btnW = 30; + const fieldW = iW - btnW - 4; + + this.drawLabel(ctx, "PATH", p, y, lW, rH); + this.drawStringField(ctx, this.getDisplayPath(), p + lW, y, fieldW, rH); + this.drawBrowseButton(ctx, p + lW + fieldW + 4, y, btnW, rH); + this.clickZones.push({ type: "path", x: p + lW, y, w: fieldW, h: rH }); + this.clickZones.push({ type: "browse", x: p + lW + fieldW + 4, y, w: btnW, h: rH }); + y += rH + 4; + this.drawLabel(ctx, "PREFIX", p, y, lW, rH); - this.drawStringField(ctx, this.rs_data.filename_prefix, p + lW, y, iW, rH); + this.drawStringField(ctx, this.rs_data.file_prefix, p + lW, y, iW, rH); this.clickZones.push({ type: "prefix", x: p + lW, y, w: iW, h: rH }); y += rH + 4; @@ -93,7 +151,18 @@ app.registerExtension({ ctx.font = "11px sans-serif"; ctx.textAlign = "left"; const d = v || ""; - ctx.fillText(d.length > 28 ? d.substring(0, 25) + "..." : d, x + 5, y + h / 2 + 4); + ctx.fillText(d.length > 25 ? d.substring(0, 22) + "..." : d, x + 5, y + h / 2 + 4); + }; + + this.drawBrowseButton = function (ctx, x, y, w, h) { + ctx.fillStyle = "#333"; + ctx.fillRect(x, y, w, h); + ctx.strokeStyle = "#555"; + ctx.strokeRect(x, y, w, h); + ctx.fillStyle = "#ccc"; + ctx.font = "bold 14px sans-serif"; + ctx.textAlign = "center"; + ctx.fillText("📁", x + w / 2, y + h / 2 + 5); }; this.drawComboField = function (ctx, v, x, y, w, h) { @@ -117,6 +186,8 @@ app.registerExtension({ for (const z of this.clickZones) { if (pos[0] >= z.x && pos[0] <= z.x + z.w && pos[1] >= z.y && pos[1] <= z.y + z.h) { + if (z.type === "path") { self.showPathInput(e); return true; } + if (z.type === "browse") { self.showFolderSelector(e); return true; } if (z.type === "prefix") { self.showPrefixInput(e); return true; } if (z.type === "format") { self.showFormatSelector(e); return true; } } @@ -124,8 +195,121 @@ app.registerExtension({ return false; }; + this.showFolderSelector = function (ev) { + if (!self.foldersLoaded) { + self.loadOutputFolders().then(() => self.showFolderSelector(ev)); + return; + } + + const menu = document.createElement("div"); + menu.style.cssText = 'position:fixed;background:#1a1a1a;border:1px solid #444;border-radius:6px;overflow:hidden;z-index:10001;box-shadow:0 4px 20px rgba(0,0,0,0.5);min-width:200px;max-height:350px;overflow-y:auto;'; + + const rootItem = document.createElement("div"); + rootItem.textContent = "ComfyUI"; + rootItem.style.cssText = 'padding:8px 15px;cursor:pointer;color:#ddd;font-size:12px;border-bottom:1px solid #333;'; + if (!self.rs_data.save_path) { + rootItem.style.background = "#333"; + rootItem.style.color = "#4CAF50"; + } + rootItem.onmouseover = () => { if (self.rs_data.save_path) rootItem.style.background = "#333"; }; + rootItem.onmouseout = () => { if (self.rs_data.save_path) rootItem.style.background = "#1a1a1a"; }; + rootItem.onclick = (e) => { + e.stopPropagation(); e.preventDefault(); + self.rs_data.save_path = ""; + self.persistState(); self.updateUI(); menu.remove(); + }; + menu.appendChild(rootItem); + + const customItem = document.createElement("div"); + customItem.textContent = "✏️ Custom path..."; + customItem.style.cssText = 'padding:8px 15px;cursor:pointer;color:#aaa;font-size:12px;border-bottom:1px solid #333;'; + customItem.onmouseover = () => customItem.style.background = "#333"; + customItem.onmouseout = () => customItem.style.background = "#1a1a1a"; + customItem.onclick = (e) => { + e.stopPropagation(); e.preventDefault(); + menu.remove(); + self.showPathInput(ev); + }; + menu.appendChild(customItem); + + const sep = document.createElement("div"); + sep.style.cssText = 'height:1px;background:#333;margin:4px 0;'; + menu.appendChild(sep); + + if (self.outputFolders.length === 0) { + const emptyItem = document.createElement("div"); + emptyItem.textContent = "(no subfolders)"; + emptyItem.style.cssText = 'padding:8px 15px;color:#666;font-size:12px;cursor:default;'; + menu.appendChild(emptyItem); + } else { + self.outputFolders.forEach(folder => { + const item = document.createElement("div"); + item.textContent = folder; + item.style.cssText = 'padding:8px 15px;cursor:pointer;color:#ddd;font-size:12px;border-bottom:1px solid #333;'; + if (folder === self.rs_data.save_path) { + item.style.background = "#333"; + item.style.color = "#4CAF50"; + } + item.onmouseover = () => { if (folder !== self.rs_data.save_path) item.style.background = "#333"; }; + item.onmouseout = () => { if (folder !== self.rs_data.save_path) item.style.background = "#1a1a1a"; }; + item.onclick = (e) => { + e.stopPropagation(); e.preventDefault(); + self.rs_data.save_path = folder; + self.persistState(); self.updateUI(); menu.remove(); + }; + menu.appendChild(item); + }); + } + + if (ev) { + menu.style.left = (ev.clientX + 8) + "px"; + menu.style.top = (ev.clientY + 8) + "px"; + } + document.body.appendChild(menu); + + setTimeout(() => { + const closeHandler = (e) => { if (!menu.contains(e.target)) { cleanup(); } }; + const mouseLeaveHandler = () => { cleanup(); }; + const cleanup = () => { + menu.remove(); + document.removeEventListener("mousedown", closeHandler); + menu.removeEventListener("mouseleave", mouseLeaveHandler); + }; + document.addEventListener("mousedown", closeHandler); + menu.addEventListener("mouseleave", mouseLeaveHandler); + }, 100); + }; + + this.showPathInput = function (ev) { + const cv = self.rs_data.save_path || ''; + const pop = document.createElement('div'); + pop.style.cssText = 'position:fixed;z-index:10002;background:#1a1a1a;border:1px solid #444;border-radius:6px;padding:8px 12px;box-shadow:0 4px 20px rgba(0,0,0,0.5);display:flex;align-items:center;gap:8px;'; + const inp = document.createElement('input'); + inp.type = 'text'; + inp.value = cv; + inp.placeholder = 'e.g. I:/Renders or project_v2'; + inp.style.cssText = 'width:220px;background:#222;color:#fff;border:1px solid #444;border-radius:4px;padding:6px 10px;font-size:12px;font-family:sans-serif;outline:none;'; + const btn = document.createElement('button'); + btn.textContent = 'OK'; + btn.style.cssText = 'background:#4CAF50;color:#fff;border:none;border-radius:4px;padding:6px 12px;font-size:12px;cursor:pointer;min-width:28px;'; + btn.onmouseover = () => btn.style.background = "#45a049"; + btn.onmouseout = () => btn.style.background = "#4CAF50"; + pop.appendChild(inp); + pop.appendChild(btn); + if (ev) { pop.style.left = (ev.clientX + 8) + 'px'; pop.style.top = (ev.clientY + 8) + 'px'; } + document.body.appendChild(pop); + setTimeout(() => { inp.focus(); if (cv.length) inp.select(); }, 50); + + const save = () => { self.rs_data.save_path = inp.value; self.persistState(); self.updateUI(); cleanup(); }; + const cleanup = () => { pop.remove(); document.removeEventListener("mousedown", cl); }; + btn.onclick = (e) => { e.stopPropagation(); e.preventDefault(); save(); }; + inp.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); save(); } }; + const cl = (e) => { if (!pop.contains(e.target)) { cleanup(); } }; + setTimeout(() => { document.addEventListener("mousedown", cl); }, 50); + }; + this.showPrefixInput = function (ev) { - const cv = self.rs_data.filename_prefix || ''; + const cv = self.rs_data.file_prefix || 'img'; const pop = document.createElement('div'); pop.style.cssText = 'position:fixed;z-index:10002;background:#1a1a1a;border:1px solid #444;border-radius:6px;padding:8px 12px;box-shadow:0 4px 20px rgba(0,0,0,0.5);display:flex;align-items:center;gap:8px;'; const inp = document.createElement('input'); @@ -142,13 +326,13 @@ app.registerExtension({ if (ev) { pop.style.left = (ev.clientX + 8) + 'px'; pop.style.top = (ev.clientY + 8) + 'px'; } document.body.appendChild(pop); setTimeout(() => { inp.focus(); if (cv.length) inp.select(); }, 50); - const save = () => { self.rs_data.filename_prefix = inp.value; self.syncToWidgets(); self.updateUI(); pop.remove(); }; + + const save = () => { self.rs_data.file_prefix = inp.value; self.persistState(); self.updateUI(); cleanup(); }; + const cleanup = () => { pop.remove(); document.removeEventListener("mousedown", cl); }; btn.onclick = (e) => { e.stopPropagation(); e.preventDefault(); save(); }; inp.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); save(); } }; - setTimeout(() => { - const cl = (e) => { if (!pop.contains(e.target)) { pop.remove(); document.removeEventListener("mousedown", cl); } }; - document.addEventListener("mousedown", cl); - }, 50); + const cl = (e) => { if (!pop.contains(e.target)) { cleanup(); } }; + setTimeout(() => { document.addEventListener("mousedown", cl); }, 50); }; this.showFormatSelector = function (ev) { @@ -165,7 +349,7 @@ app.registerExtension({ it.onclick = (e) => { e.stopPropagation(); e.preventDefault(); self.rs_data.format = f; - self.syncToWidgets(); + self.persistState(); self.updateUI(); menu.remove(); }; @@ -180,20 +364,22 @@ app.registerExtension({ }; this.updateUI = function () { - self.syncToWidgets(); if (self.graph) self.graph.setDirtyCanvas(true, true); }; - const onSerialize = this.onSerialize; - this.onSerialize = function (o) { - self.syncToWidgets(); - return onSerialize ? onSerialize.apply(this, arguments) : undefined; - }; - - const onExecute = this.onExecute; - this.onExecute = function () { - self.syncToWidgets(); - return onExecute ? onExecute.apply(this, arguments) : undefined; + const originalOnConfigure = this.onConfigure; + this.onConfigure = function(info) { + const r = originalOnConfigure ? originalOnConfigure.apply(this, arguments) : undefined; + + const savedDataW = this.widgets?.find(w => w.name === "node_data"); + if (savedDataW && savedDataW.value && savedDataW.value !== "{}") { + try { + const parsed = JSON.parse(savedDataW.value); + this.rs_data = { ...this.rs_data, ...parsed }; + this.applyState(); + } catch (e) { console.warn("[RS] Restore error", e); } + } + return r; }; return result;