nodes/Raykosan-ComfyUI_RaykoStudio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modification of the RS Decode Save Image node

Browse Source
This commit is contained in:
Raykosan
2026-09-03 18:59:49 +03:00
parent 6358b90da3
commit 8a8abe01f2
1 changed files with 219 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/rs_vae_save_image.js
+219 -33
View File
@@ -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;