298977887/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-04-19 10:53:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support dataset when creating elements

Browse Source 
Allow dialog to show element and override buttons
This commit is contained in:
pythongosssss 2023-04-08 14:38:45 +01:00
parent ebd7f9bf80
commit 357c0753f8
1 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/scripts/ui.js
View File

@ -8,14 +8,18 @@ export function $el(tag, propsOrChildren, children) {
if (Array.isArray(propsOrChildren)) { if (Array.isArray(propsOrChildren)) {
element.append(...propsOrChildren); element.append(...propsOrChildren);
} else { } else {
const parent = propsOrChildren.parent; const { parent, $: cb, dataset, style } = propsOrChildren;
delete propsOrChildren.parent; delete propsOrChildren.parent;
const cb = propsOrChildren.$;
delete propsOrChildren.$; delete propsOrChildren.$;
delete propsOrChildren.dataset;
delete propsOrChildren.style;
if (propsOrChildren.style) { if (style) {
Object.assign(element.style, propsOrChildren.style); Object.assign(element.style, style);
delete propsOrChildren.style; }
if (dataset) {
Object.assign(element.dataset, dataset);
} }
Object.assign(element, propsOrChildren); Object.assign(element, propsOrChildren);
@ -76,7 +80,7 @@ function dragElement(dragEl, settings) {
dragEl.style.left = newPosX + "px"; dragEl.style.left = newPosX + "px";
dragEl.style.right = "unset"; dragEl.style.right = "unset";
} }
dragEl.style.top = newPosY + "px"; dragEl.style.top = newPosY + "px";
dragEl.style.bottom = "unset"; dragEl.style.bottom = "unset";
@ -145,7 +149,7 @@ function dragElement(dragEl, settings) {
} }
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
ensureInBounds(); ensureInBounds();
}); });
function closeDragElement() { function closeDragElement() {
@ -155,26 +159,33 @@ function dragElement(dragEl, settings) {
} }
} }
class ComfyDialog { export class ComfyDialog {
constructor() { constructor() {
this.element = $el("div.comfy-modal", { parent: document.body }, [ this.element = $el("div.comfy-modal", { parent: document.body }, [
$el("div.comfy-modal-content", [ $el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
$el("p", { $: (p) => (this.textElement = p) }),
$el("button", {
type: "button",
textContent: "Close",
onclick: () => this.close(),
}),
]),
]); ]);
} }
createButtons() {
return [
$el("button", {
type: "button",
textContent: "Close",
onclick: () => this.close(),
}),
];
}
close() { close() {
this.element.style.display = "none"; this.element.style.display = "none";
} }
show(html) { show(html) {
this.textElement.innerHTML = html; if (typeof html === "string") {
this.textElement.innerHTML = html;
} else {
this.textElement.replaceChildren(html);
}
this.element.style.display = "flex"; this.element.style.display = "flex";
} }
} }
@ -419,7 +430,7 @@ export class ComfyUI {
type: "boolean", type: "boolean",
defaultValue: true, defaultValue: true,
}); });
const fileInput = $el("input", { const fileInput = $el("input", {
type: "file", type: "file",
accept: ".json,image/png", accept: ".json,image/png",