wangbo/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2026-05-08 00:02:31 +08:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

clean state when loading another workflow

Browse Source
This commit is contained in:
Farid Safi 2023-03-28 18:32:12 +02:00
parent 31dd6c0531
commit 24d251ef15
2 changed files with 166 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
web/scripts/app.js
View File

@ -90,7 +90,10 @@ class ComfyApp {
callback: () => { callback: () => {
const a = document.createElement("a"); const a = document.createElement("a");
a.href = img.src; a.href = img.src;
a.setAttribute("download", new URLSearchParams(new URL(img.src).search).get("filename")); a.setAttribute(
"download",
new URLSearchParams(new URL(img.src).search).get("filename")
);
document.body.append(a); document.body.append(a);
a.click(); a.click();
requestAnimationFrame(() => a.remove()); requestAnimationFrame(() => a.remove());
@ -247,7 +250,14 @@ class ComfyApp {
ctx.drawImage(this.imgs[imageIndex], x, y, w, h); ctx.drawImage(this.imgs[imageIndex], x, y, w, h);
const drawButton = (x, y, sz, text) => { const drawButton = (x, y, sz, text) => {
const hovered = LiteGraph.isInsideRectangle(mouse[0], mouse[1], x + this.pos[0], y + this.pos[1], sz, sz); const hovered = LiteGraph.isInsideRectangle(
mouse[0],
mouse[1],
x + this.pos[0],
y + this.pos[1],
sz,
sz
);
let fill = "#333"; let fill = "#333";
let textFill = "#fff"; let textFill = "#fff";
let isClicking = false; let isClicking = false;
@ -380,27 +390,35 @@ class ComfyApp {
const self = this; const self = this;
const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown; const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown;
LGraphCanvas.prototype.processMouseDown = function(e) { LGraphCanvas.prototype.processMouseDown = function (e) {
const res = origProcessMouseDown.apply(this, arguments); const res = origProcessMouseDown.apply(this, arguments);
this.selected_group_moving = false; this.selected_group_moving = false;
if (this.selected_group && !this.selected_group_resizing) { if (this.selected_group && !this.selected_group_resizing) {
var font_size = var font_size = this.selected_group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
this.selected_group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
var height = font_size * 1.4; var height = font_size * 1.4;
// Move group by header // Move group by header
if (LiteGraph.isInsideRectangle(e.canvasX, e.canvasY, this.selected_group.pos[0], this.selected_group.pos[1], this.selected_group.size[0], height)) { if (
LiteGraph.isInsideRectangle(
e.canvasX,
e.canvasY,
this.selected_group.pos[0],
this.selected_group.pos[1],
this.selected_group.size[0],
height
)
) {
this.selected_group_moving = true; this.selected_group_moving = true;
} }
} }
return res; return res;
} };
const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove; const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove;
LGraphCanvas.prototype.processMouseMove = function(e) { LGraphCanvas.prototype.processMouseMove = function (e) {
const orig_selected_group = this.selected_group; const orig_selected_group = this.selected_group;
if (this.selected_group && !this.selected_group_resizing && !this.selected_group_moving) { if (this.selected_group && !this.selected_group_resizing && !this.selected_group_moving) {
@ -424,7 +442,7 @@ class ComfyApp {
const self = this; const self = this;
const origDrawGroups = LGraphCanvas.prototype.drawGroups; const origDrawGroups = LGraphCanvas.prototype.drawGroups;
LGraphCanvas.prototype.drawGroups = function(canvas, ctx) { LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
if (!this.graph) { if (!this.graph) {
return; return;
} }
@ -447,8 +465,7 @@ class ComfyApp {
var size = group._size; var size = group._size;
ctx.globalAlpha = 0.25 * this.editor_alpha; ctx.globalAlpha = 0.25 * this.editor_alpha;
ctx.beginPath(); ctx.beginPath();
var font_size = var font_size = group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
ctx.rect(pos[0] + 0.5, pos[1] + 0.5, size[0], font_size * 1.4); ctx.rect(pos[0] + 0.5, pos[1] + 0.5, size[0], font_size * 1.4);
ctx.fill(); ctx.fill();
ctx.globalAlpha = this.editor_alpha; ctx.globalAlpha = this.editor_alpha;
@ -458,7 +475,7 @@ class ComfyApp {
const res = origDrawGroups.apply(this, arguments); const res = origDrawGroups.apply(this, arguments);
return res; return res;
} };
} }
/** /**
@ -467,7 +484,15 @@ class ComfyApp {
#addDrawNodeHandler() { #addDrawNodeHandler() {
const orig = LGraphCanvas.prototype.drawNodeShape; const orig = LGraphCanvas.prototype.drawNodeShape;
const self = this; const self = this;
LGraphCanvas.prototype.drawNodeShape = function (node, ctx, size, fgcolor, bgcolor, selected, mouse_over) { LGraphCanvas.prototype.drawNodeShape = function (
node,
ctx,
size,
fgcolor,
bgcolor,
selected,
mouse_over
) {
const res = orig.apply(this, arguments); const res = orig.apply(this, arguments);
let color = null; let color = null;
@ -483,8 +508,16 @@ class ComfyApp {
ctx.globalAlpha = 0.8; ctx.globalAlpha = 0.8;
ctx.beginPath(); ctx.beginPath();
if (shape == LiteGraph.BOX_SHAPE) if (shape == LiteGraph.BOX_SHAPE)
ctx.rect(-6, -6 + LiteGraph.NODE_TITLE_HEIGHT, 12 + size[0] + 1, 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT); ctx.rect(
else if (shape == LiteGraph.ROUND_SHAPE || (shape == LiteGraph.CARD_SHAPE && node.flags.collapsed)) -6,
-6 + LiteGraph.NODE_TITLE_HEIGHT,
12 + size[0] + 1,
12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT
);
else if (
shape == LiteGraph.ROUND_SHAPE ||
(shape == LiteGraph.CARD_SHAPE && node.flags.collapsed)
)
ctx.roundRect( ctx.roundRect(
-6, -6,
-6 - LiteGraph.NODE_TITLE_HEIGHT, -6 - LiteGraph.NODE_TITLE_HEIGHT,
@ -583,7 +616,9 @@ class ComfyApp {
await this.#loadExtensions(); await this.#loadExtensions();
// Create and mount the LiteGraph in the DOM // Create and mount the LiteGraph in the DOM
const canvasEl = (this.canvasEl = Object.assign(document.createElement("canvas"), { id: "graph-canvas" })); const canvasEl = (this.canvasEl = Object.assign(document.createElement("canvas"), {
id: "graph-canvas",
}));
canvasEl.tabIndex = "1"; canvasEl.tabIndex = "1";
document.body.prepend(canvasEl); document.body.prepend(canvasEl);
@ -627,7 +662,10 @@ class ComfyApp {
} }
// Save current workflow automatically // Save current workflow automatically
setInterval(() => localStorage.setItem("workflow", JSON.stringify(this.graph.serialize())), 1000); setInterval(
() => localStorage.setItem("workflow", JSON.stringify(this.graph.serialize())),
1000
);
this.#addDrawNodeHandler(); this.#addDrawNodeHandler();
this.#addDrawGroupsHandler(); this.#addDrawGroupsHandler();
@ -661,8 +699,12 @@ class ComfyApp {
const node = Object.assign( const node = Object.assign(
function ComfyNode() { function ComfyNode() {
var inputs = nodeData["input"]["required"]; var inputs = nodeData["input"]["required"];
if (nodeData["input"]["optional"] != undefined){ if (nodeData["input"]["optional"] != undefined) {
inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"]) inputs = Object.assign(
{},
nodeData["input"]["required"],
nodeData["input"]["optional"]
);
} }
const config = { minWidth: 1, minHeight: 1 }; const config = { minWidth: 1, minHeight: 1 };
for (const inputName in inputs) { for (const inputName in inputs) {
@ -674,7 +716,10 @@ class ComfyApp {
Object.assign(config, widgets.COMBO(this, inputName, inputData, app) || {}); Object.assign(config, widgets.COMBO(this, inputName, inputData, app) || {});
} else if (`${type}:${inputName}` in widgets) { } else if (`${type}:${inputName}` in widgets) {
// Support custom widgets by Type:Name // Support custom widgets by Type:Name
Object.assign(config, widgets[`${type}:${inputName}`](this, inputName, inputData, app) || {}); Object.assign(
config,
widgets[`${type}:${inputName}`](this, inputName, inputData, app) || {}
);
} else if (type in widgets) { } else if (type in widgets) {
// Standard type widgets // Standard type widgets
Object.assign(config, widgets[type](this, inputName, inputData, app) || {}); Object.assign(config, widgets[type](this, inputName, inputData, app) || {});
@ -783,7 +828,9 @@ class ComfyApp {
for (const i in widgets) { for (const i in widgets) {
const widget = widgets[i]; const widget = widgets[i];
if (!widget.options || widget.options.serialize !== false) { if (!widget.options || widget.options.serialize !== false) {
inputs[widget.name] = widget.serializeValue ? await widget.serializeValue(n, i) : widget.value; inputs[widget.name] = widget.serializeValue
? await widget.serializeValue(n, i)
: widget.value;
} }
} }
} }
@ -885,24 +932,31 @@ class ComfyApp {
async refreshComboInNodes() { async refreshComboInNodes() {
const defs = await api.getNodeDefs(); const defs = await api.getNodeDefs();
for(let nodeNum in this.graph._nodes) { for (let nodeNum in this.graph._nodes) {
const node = this.graph._nodes[nodeNum]; const node = this.graph._nodes[nodeNum];
const def = defs[node.type]; const def = defs[node.type];
for(const widgetNum in node.widgets) { for (const widgetNum in node.widgets) {
const widget = node.widgets[widgetNum] const widget = node.widgets[widgetNum];
if(widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) { if (widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
widget.options.values = def["input"]["required"][widget.name][0]; widget.options.values = def["input"]["required"][widget.name][0];
if(!widget.options.values.includes(widget.value)) { if (!widget.options.values.includes(widget.value)) {
widget.value = widget.options.values[0]; widget.value = widget.options.values[0];
} }
} }
} }
} }
} }
/**
* Clean current state
*/
clean() {
this.nodeOutputs = {};
}
} }
export const app = new ComfyApp(); export const app = new ComfyApp();

120
web/scripts/ui.js
View File

@ -42,9 +42,9 @@ function dragElement(dragEl) {
posStartY = 0, posStartY = 0,
newPosX = 0, newPosX = 0,
newPosY = 0; newPosY = 0;
if (dragEl.getElementsByClassName('drag-handle')[0]) { if (dragEl.getElementsByClassName("drag-handle")[0]) {
// if present, the handle is where you move the DIV from: // if present, the handle is where you move the DIV from:
dragEl.getElementsByClassName('drag-handle')[0].onmousedown = dragMouseDown; dragEl.getElementsByClassName("drag-handle")[0].onmousedown = dragMouseDown;
} else { } else {
// otherwise, move the DIV from anywhere inside the DIV: // otherwise, move the DIV from anywhere inside the DIV:
dragEl.onmousedown = dragMouseDown; dragEl.onmousedown = dragMouseDown;
@ -69,8 +69,14 @@ function dragElement(dragEl) {
posDiffY = e.clientY - posStartY; posDiffY = e.clientY - posStartY;
posStartX = e.clientX; posStartX = e.clientX;
posStartY = e.clientY; posStartY = e.clientY;
newPosX = Math.min((document.body.clientWidth - dragEl.clientWidth), Math.max(0, (dragEl.offsetLeft + posDiffX))); newPosX = Math.min(
newPosY = Math.min((document.body.clientHeight - dragEl.clientHeight), Math.max(0, (dragEl.offsetTop + posDiffY))); document.body.clientWidth - dragEl.clientWidth,
Math.max(0, dragEl.offsetLeft + posDiffX)
);
newPosY = Math.min(
document.body.clientHeight - dragEl.clientHeight,
Math.max(0, dragEl.offsetTop + posDiffY)
);
// set the element's new position: // set the element's new position:
dragEl.style.top = newPosY + "px"; dragEl.style.top = newPosY + "px";
dragEl.style.left = newPosX + "px"; dragEl.style.left = newPosX + "px";
@ -306,6 +312,7 @@ export class ComfyUI {
style: { display: "none" }, style: { display: "none" },
parent: document.body, parent: document.body,
onchange: () => { onchange: () => {
app.clean();
app.handleFile(fileInput.files[0]); app.handleFile(fileInput.files[0]);
}, },
}); });
@ -314,40 +321,68 @@ export class ComfyUI {
$el("div", { style: { overflow: "hidden", position: "relative", width: "100%" } }, [ $el("div", { style: { overflow: "hidden", position: "relative", width: "100%" } }, [
$el("span.drag-handle"), $el("span.drag-handle"),
$el("span", { $: (q) => (this.queueSize = q) }), $el("span", { $: (q) => (this.queueSize = q) }),
$el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }), $el("button.comfy-settings-btn", {
textContent: "⚙️",
onclick: () => this.settings.show(),
}),
]), ]),
$el("button.comfy-queue-btn", { textContent: "Queue Prompt", onclick: () => app.queuePrompt(0, this.batchCount) }), $el("button.comfy-queue-btn", {
textContent: "Queue Prompt",
onclick: () => app.queuePrompt(0, this.batchCount),
}),
$el("div", {}, [ $el("div", {}, [
$el("label", { innerHTML: "Extra options"}, [ $el("label", { innerHTML: "Extra options" }, [
$el("input", { type: "checkbox", $el("input", {
onchange: (i) => { type: "checkbox",
document.getElementById('extraOptions').style.display = i.srcElement.checked ? "block" : "none"; onchange: (i) => {
this.batchCount = i.srcElement.checked ? document.getElementById('batchCountInputRange').value : 1; document.getElementById("extraOptions").style.display = i.srcElement.checked
document.getElementById('autoQueueCheckbox').checked = false; ? "block"
} : "none";
}) this.batchCount = i.srcElement.checked
]) ? document.getElementById("batchCountInputRange").value
]), : 1;
$el("div", { id: "extraOptions", style: { width: "100%", display: "none" }}, [ document.getElementById("autoQueueCheckbox").checked = false;
$el("label", { innerHTML: "Batch count" }, [ },
$el("input", { id: "batchCountInputNumber", type: "number", value: this.batchCount, min: "1", style: { width: "35%", "margin-left": "0.4em" },
oninput: (i) => {
this.batchCount = i.target.value;
document.getElementById('batchCountInputRange').value = this.batchCount;
}
}), }),
$el("input", { id: "batchCountInputRange", type: "range", min: "1", max: "100", value: this.batchCount, ]),
]),
$el("div", { id: "extraOptions", style: { width: "100%", display: "none" } }, [
$el("label", { innerHTML: "Batch count" }, [
$el("input", {
id: "batchCountInputNumber",
type: "number",
value: this.batchCount,
min: "1",
style: { width: "35%", "margin-left": "0.4em" },
oninput: (i) => {
this.batchCount = i.target.value;
document.getElementById("batchCountInputRange").value = this.batchCount;
},
}),
$el("input", {
id: "batchCountInputRange",
type: "range",
min: "1",
max: "100",
value: this.batchCount,
oninput: (i) => { oninput: (i) => {
this.batchCount = i.srcElement.value; this.batchCount = i.srcElement.value;
document.getElementById('batchCountInputNumber').value = i.srcElement.value; document.getElementById("batchCountInputNumber").value = i.srcElement.value;
} },
}),
$el("input", {
id: "autoQueueCheckbox",
type: "checkbox",
checked: false,
title: "automatically queue prompt when the queue size hits 0",
}), }),
$el("input", { id: "autoQueueCheckbox", type: "checkbox", checked: false, title: "automatically queue prompt when the queue size hits 0",
})
]), ]),
]), ]),
$el("div.comfy-menu-btns", [ $el("div.comfy-menu-btns", [
$el("button", { textContent: "Queue Front", onclick: () => app.queuePrompt(-1, this.batchCount) }), $el("button", {
textContent: "Queue Front",
onclick: () => app.queuePrompt(-1, this.batchCount),
}),
$el("button", { $el("button", {
$: (b) => (this.queue.button = b), $: (b) => (this.queue.button = b),
textContent: "View Queue", textContent: "View Queue",
@ -388,8 +423,20 @@ export class ComfyUI {
}), }),
$el("button", { textContent: "Load", onclick: () => fileInput.click() }), $el("button", { textContent: "Load", onclick: () => fileInput.click() }),
$el("button", { textContent: "Refresh", onclick: () => app.refreshComboInNodes() }), $el("button", { textContent: "Refresh", onclick: () => app.refreshComboInNodes() }),
$el("button", { textContent: "Clear", onclick: () => app.graph.clear() }), $el("button", {
$el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }), textContent: "Clear",
onclick: () => {
app.clean();
app.graph.clear();
},
}),
$el("button", {
textContent: "Load Default",
onclick: () => {
app.clean();
app.loadGraphData();
},
}),
]); ]);
dragElement(this.menuContainer); dragElement(this.menuContainer);
@ -398,12 +445,17 @@ export class ComfyUI {
} }
setStatus(status) { setStatus(status) {
this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR"); this.queueSize.textContent =
"Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
if (status) { if (status) {
if (this.lastQueueSize != 0 && status.exec_info.queue_remaining == 0 && document.getElementById('autoQueueCheckbox').checked) { if (
this.lastQueueSize != 0 &&
status.exec_info.queue_remaining == 0 &&
document.getElementById("autoQueueCheckbox").checked
) {
app.queuePrompt(0, this.batchCount); app.queuePrompt(0, this.batchCount);
} }
this.lastQueueSize = status.exec_info.queue_remaining this.lastQueueSize = status.exec_info.queue_remaining;
} }
} }
} }