Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 19:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

format code

Browse Source
This commit is contained in:
huchenlei
2024-06-12 21:39:31 -04:00
parent 428e9dd50e
commit b4ff842058
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/scripts/ui.js
View File

@@ -34,7 +34,7 @@ export function $el(tag, propsOrChildren, children) {
if (Array.isArray(propsOrChildren)) { if (Array.isArray(propsOrChildren)) {
element.append(...propsOrChildren); element.append(...propsOrChildren);
} else { } else {
const {parent, $: cb, dataset, style} = propsOrChildren; const { parent, $: cb, dataset, style } = propsOrChildren;
delete propsOrChildren.parent; delete propsOrChildren.parent;
delete propsOrChildren.$; delete propsOrChildren.$;
delete propsOrChildren.dataset; delete propsOrChildren.dataset;
@@ -96,7 +96,7 @@ function dragElement(dragEl, settings) {
positionElement(); positionElement();
} }
catch(exception){ catch (exception) {
// robust // robust
} }
} }
@@ -224,7 +224,7 @@ class ComfyList {
name: "Delete", name: "Delete",
cb: () => api.deleteItem(this.#type, item.prompt[1]), cb: () => api.deleteItem(this.#type, item.prompt[1]),
}; };
return $el("div", {textContent: item.prompt[0] + ": "}, [ return $el("div", { textContent: item.prompt[0] + ": " }, [
$el("button", { $el("button", {
textContent: "Load", textContent: "Load",
onclick: async () => { onclick: async () => {
@@ -253,7 +253,7 @@ class ComfyList {
await this.load(); await this.load();
}, },
}), }),
$el("button", {textContent: "Refresh", onclick: () => this.load()}), $el("button", { textContent: "Refresh", onclick: () => this.load() }),
]) ])
); );
} }
@@ -365,7 +365,7 @@ export class ComfyUI {
id: "comfy-file-input", id: "comfy-file-input",
type: "file", type: "file",
accept: ".json,image/png,.latent,.safetensors,image/webp", accept: ".json,image/png,.latent,.safetensors,image/webp",
style: {display: "none"}, style: { display: "none" },
parent: document.body, parent: document.body,
onchange: () => { onchange: () => {
app.handleFile(fileInput.files[0]); app.handleFile(fileInput.files[0]);
@@ -417,7 +417,7 @@ export class ComfyUI {
width: "100%", width: "100%",
cursor: "default" cursor: "default"
} }
}, [ }, [
$el("span.drag-handle"), $el("span.drag-handle"),
$el("span.comfy-menu-queue-size", { $: (q) => (this.queueSize = q) }), $el("span.comfy-menu-queue-size", { $: (q) => (this.queueSize = q) }),
$el("div.comfy-menu-actions", [ $el("div.comfy-menu-actions", [
@@ -440,7 +440,7 @@ export class ComfyUI {
onclick: () => app.queuePrompt(0, this.batchCount), onclick: () => app.queuePrompt(0, this.batchCount),
}), }),
$el("div", {}, [ $el("div", {}, [
$el("label", {innerHTML: "Extra options"}, [ $el("label", { innerHTML: "Extra options" }, [
$el("input", { $el("input", {
type: "checkbox", type: "checkbox",
onchange: (i) => { onchange: (i) => {
@@ -452,16 +452,16 @@ export class ComfyUI {
}), }),
]), ]),
]), ]),
$el("div", {id: "extraOptions", style: {width: "100%", display: "none"}}, [ $el("div", { id: "extraOptions", style: { width: "100%", display: "none" } }, [
$el("div",[ $el("div", [
$el("label", {innerHTML: "Batch count"}), $el("label", { innerHTML: "Batch count" }),
$el("input", { $el("input", {
id: "batchCountInputNumber", id: "batchCountInputNumber",
type: "number", type: "number",
value: this.batchCount, value: this.batchCount,
min: "1", min: "1",
style: {width: "35%", "margin-left": "0.4em"}, style: { width: "35%", "margin-left": "0.4em" },
oninput: (i) => { oninput: (i) => {
this.batchCount = i.target.value; this.batchCount = i.target.value;
document.getElementById("batchCountInputRange").value = this.batchCount; document.getElementById("batchCountInputRange").value = this.batchCount;
@@ -477,11 +477,11 @@ export class ComfyUI {
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("div",[ $el("div", [
$el("label",{ $el("label", {
for:"autoQueueCheckbox", for: "autoQueueCheckbox",
innerHTML: "Auto Queue" innerHTML: "Auto Queue"
}), }),
$el("input", { $el("input", {
@@ -536,14 +536,14 @@ export class ComfyUI {
filename += ".json"; filename += ".json";
} }
} }
app.graphToPrompt().then(p=>{ app.graphToPrompt().then(p => {
const json = JSON.stringify(p.workflow, null, 2); // convert the data to a JSON string const json = JSON.stringify(p.workflow, null, 2); // convert the data to a JSON string
const blob = new Blob([json], {type: "application/json"}); const blob = new Blob([json], { type: "application/json" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = $el("a", { const a = $el("a", {
href: url, href: url,
download: filename, download: filename,
style: {display: "none"}, style: { display: "none" },
parent: document.body, parent: document.body,
}); });
a.click(); a.click();
@@ -557,7 +557,7 @@ export class ComfyUI {
$el("button", { $el("button", {
id: "comfy-dev-save-api-button", id: "comfy-dev-save-api-button",
textContent: "Save (API Format)", textContent: "Save (API Format)",
style: {width: "100%", display: "none"}, style: { width: "100%", display: "none" },
onclick: () => { onclick: () => {
let filename = "workflow_api.json"; let filename = "workflow_api.json";
if (promptFilename.value) { if (promptFilename.value) {
@@ -567,14 +567,14 @@ export class ComfyUI {
filename += ".json"; filename += ".json";
} }
} }
app.graphToPrompt().then(p=>{ app.graphToPrompt().then(p => {
const json = JSON.stringify(p.output, null, 2); // convert the data to a JSON string const json = JSON.stringify(p.output, null, 2); // convert the data to a JSON string
const blob = new Blob([json], {type: "application/json"}); const blob = new Blob([json], { type: "application/json" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = $el("a", { const a = $el("a", {
href: url, href: url,
download: filename, download: filename,
style: {display: "none"}, style: { display: "none" },
parent: document.body, parent: document.body,
}); });
a.click(); a.click();
@@ -585,13 +585,13 @@ export class ComfyUI {
}); });
}, },
}), }),
$el("button", {id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click()}), $el("button", { id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click() }),
$el("button", { $el("button", {
id: "comfy-refresh-button", id: "comfy-refresh-button",
textContent: "Refresh", textContent: "Refresh",
onclick: () => app.refreshComboInNodes() onclick: () => app.refreshComboInNodes()
}), }),
$el("button", {id: "comfy-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace()}), $el("button", { id: "comfy-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace() }),
$el("button", { $el("button", {
id: "comfy-clear-button", textContent: "Clear", onclick: () => { id: "comfy-clear-button", textContent: "Clear", onclick: () => {
if (!confirmClear.value || confirm("Clear workflow?")) { if (!confirmClear.value || confirm("Clear workflow?")) {
@@ -621,12 +621,12 @@ export class ComfyUI {
name: "Enable Dev mode Options", name: "Enable Dev mode Options",
type: "boolean", type: "boolean",
defaultValue: false, defaultValue: false,
onChange: function(value) { document.getElementById("comfy-dev-save-api-button").style.display = value ? "block" : "none"}, onChange: function (value) { document.getElementById("comfy-dev-save-api-button").style.display = value ? "block" : "none" },
}); });
dragElement(this.menuContainer, this.settings); dragElement(this.menuContainer, this.settings);
this.setStatus({exec_info: {queue_remaining: "X"}}); this.setStatus({ exec_info: { queue_remaining: "X" } });
} }
setStatus(status) { setStatus(status) {