mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-09 01:20:09 +00:00
Apply new code format standard (#217)
This commit is contained in:
Chenlei Hu
@@ -1,64 +1,64 @@
|
||||
import { ComfyDialog } from "../dialog";
|
||||
import { $el } from "../../ui";
|
||||
import { ComfyDialog } from '../dialog'
|
||||
import { $el } from '../../ui'
|
||||
|
||||
export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
|
||||
#resolve: (value: any) => void;
|
||||
#resolve: (value: any) => void
|
||||
|
||||
constructor(actions?: Array<string | { value?: any; text: string }>) {
|
||||
super(
|
||||
"dialog.comfy-dialog.comfyui-dialog",
|
||||
'dialog.comfy-dialog.comfyui-dialog',
|
||||
actions?.map((opt) => {
|
||||
if (typeof opt === "string") {
|
||||
opt = { text: opt };
|
||||
if (typeof opt === 'string') {
|
||||
opt = { text: opt }
|
||||
}
|
||||
return $el("button.comfyui-button", {
|
||||
type: "button",
|
||||
return $el('button.comfyui-button', {
|
||||
type: 'button',
|
||||
textContent: opt.text,
|
||||
onclick: () => this.close(opt.value ?? opt.text),
|
||||
});
|
||||
onclick: () => this.close(opt.value ?? opt.text)
|
||||
})
|
||||
})
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
show(html: string | HTMLElement | HTMLElement[]) {
|
||||
this.element.addEventListener("close", () => {
|
||||
this.close();
|
||||
});
|
||||
this.element.addEventListener('close', () => {
|
||||
this.close()
|
||||
})
|
||||
|
||||
super.show(html);
|
||||
super.show(html)
|
||||
|
||||
return new Promise((resolve) => {
|
||||
this.#resolve = resolve;
|
||||
});
|
||||
this.#resolve = resolve
|
||||
})
|
||||
}
|
||||
|
||||
showModal(html: string | HTMLElement | HTMLElement[]) {
|
||||
this.element.addEventListener("close", () => {
|
||||
this.close();
|
||||
});
|
||||
this.element.addEventListener('close', () => {
|
||||
this.close()
|
||||
})
|
||||
|
||||
super.show(html);
|
||||
this.element.showModal();
|
||||
super.show(html)
|
||||
this.element.showModal()
|
||||
|
||||
return new Promise((resolve) => {
|
||||
this.#resolve = resolve;
|
||||
});
|
||||
this.#resolve = resolve
|
||||
})
|
||||
}
|
||||
|
||||
close(result = null) {
|
||||
this.#resolve(result);
|
||||
this.element.close();
|
||||
super.close();
|
||||
this.#resolve(result)
|
||||
this.element.close()
|
||||
super.close()
|
||||
}
|
||||
|
||||
static async prompt({ title = null, message, actions }) {
|
||||
const dialog = new ComfyAsyncDialog(actions);
|
||||
const content = [$el("span", message)];
|
||||
const dialog = new ComfyAsyncDialog(actions)
|
||||
const content = [$el('span', message)]
|
||||
if (title) {
|
||||
content.unshift($el("h3", title));
|
||||
content.unshift($el('h3', title))
|
||||
}
|
||||
const res = await dialog.showModal(content);
|
||||
dialog.element.remove();
|
||||
return res;
|
||||
const res = await dialog.showModal(content)
|
||||
dialog.element.remove()
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
import { $el } from "../../ui";
|
||||
import { applyClasses, ClassList, toggleElement } from "../utils";
|
||||
import { prop } from "../../utils";
|
||||
import type { ComfyPopup } from "./popup";
|
||||
import type { ComfyComponent } from ".";
|
||||
import type { ComfyApp } from "@/scripts/app";
|
||||
import { $el } from '../../ui'
|
||||
import { applyClasses, ClassList, toggleElement } from '../utils'
|
||||
import { prop } from '../../utils'
|
||||
import type { ComfyPopup } from './popup'
|
||||
import type { ComfyComponent } from '.'
|
||||
import type { ComfyApp } from '@/scripts/app'
|
||||
|
||||
type ComfyButtonProps = {
|
||||
icon?: string;
|
||||
overIcon?: string;
|
||||
iconSize?: number;
|
||||
content?: string | HTMLElement;
|
||||
tooltip?: string;
|
||||
enabled?: boolean;
|
||||
action?: (e: Event, btn: ComfyButton) => void;
|
||||
classList?: ClassList;
|
||||
visibilitySetting?: { id: string; showValue: any };
|
||||
app?: ComfyApp;
|
||||
};
|
||||
icon?: string
|
||||
overIcon?: string
|
||||
iconSize?: number
|
||||
content?: string | HTMLElement
|
||||
tooltip?: string
|
||||
enabled?: boolean
|
||||
action?: (e: Event, btn: ComfyButton) => void
|
||||
classList?: ClassList
|
||||
visibilitySetting?: { id: string; showValue: any }
|
||||
app?: ComfyApp
|
||||
}
|
||||
|
||||
export class ComfyButton implements ComfyComponent<HTMLElement> {
|
||||
#over = 0;
|
||||
#popupOpen = false;
|
||||
isOver = false;
|
||||
iconElement = $el("i.mdi");
|
||||
contentElement = $el("span");
|
||||
popup: ComfyPopup;
|
||||
element: HTMLElement;
|
||||
overIcon: string;
|
||||
iconSize: number;
|
||||
content: string | HTMLElement;
|
||||
icon: string;
|
||||
tooltip: string;
|
||||
classList: ClassList;
|
||||
hidden: boolean;
|
||||
enabled: boolean;
|
||||
action: (e: Event, btn: ComfyButton) => void;
|
||||
#over = 0
|
||||
#popupOpen = false
|
||||
isOver = false
|
||||
iconElement = $el('i.mdi')
|
||||
contentElement = $el('span')
|
||||
popup: ComfyPopup
|
||||
element: HTMLElement
|
||||
overIcon: string
|
||||
iconSize: number
|
||||
content: string | HTMLElement
|
||||
icon: string
|
||||
tooltip: string
|
||||
classList: ClassList
|
||||
hidden: boolean
|
||||
enabled: boolean
|
||||
action: (e: Event, btn: ComfyButton) => void
|
||||
|
||||
constructor({
|
||||
icon,
|
||||
@@ -43,134 +43,134 @@ export class ComfyButton implements ComfyComponent<HTMLElement> {
|
||||
content,
|
||||
tooltip,
|
||||
action,
|
||||
classList = "comfyui-button",
|
||||
classList = 'comfyui-button',
|
||||
visibilitySetting,
|
||||
app,
|
||||
enabled = true,
|
||||
enabled = true
|
||||
}: ComfyButtonProps) {
|
||||
this.element = $el(
|
||||
"button",
|
||||
'button',
|
||||
{
|
||||
onmouseenter: () => {
|
||||
this.isOver = true;
|
||||
this.isOver = true
|
||||
if (this.overIcon) {
|
||||
this.updateIcon();
|
||||
this.updateIcon()
|
||||
}
|
||||
},
|
||||
onmouseleave: () => {
|
||||
this.isOver = false;
|
||||
this.isOver = false
|
||||
if (this.overIcon) {
|
||||
this.updateIcon();
|
||||
this.updateIcon()
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
[this.iconElement, this.contentElement]
|
||||
);
|
||||
)
|
||||
|
||||
this.icon = prop(
|
||||
this,
|
||||
"icon",
|
||||
'icon',
|
||||
icon,
|
||||
toggleElement(this.iconElement, { onShow: this.updateIcon })
|
||||
);
|
||||
this.overIcon = prop(this, "overIcon", overIcon, () => {
|
||||
)
|
||||
this.overIcon = prop(this, 'overIcon', overIcon, () => {
|
||||
if (this.isOver) {
|
||||
this.updateIcon();
|
||||
this.updateIcon()
|
||||
}
|
||||
});
|
||||
this.iconSize = prop(this, "iconSize", iconSize, this.updateIcon);
|
||||
})
|
||||
this.iconSize = prop(this, 'iconSize', iconSize, this.updateIcon)
|
||||
this.content = prop(
|
||||
this,
|
||||
"content",
|
||||
'content',
|
||||
content,
|
||||
toggleElement(this.contentElement, {
|
||||
onShow: (el, v) => {
|
||||
if (typeof v === "string") {
|
||||
el.textContent = v;
|
||||
if (typeof v === 'string') {
|
||||
el.textContent = v
|
||||
} else {
|
||||
el.replaceChildren(v);
|
||||
el.replaceChildren(v)
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
);
|
||||
)
|
||||
|
||||
this.tooltip = prop(this, "tooltip", tooltip, (v) => {
|
||||
this.tooltip = prop(this, 'tooltip', tooltip, (v) => {
|
||||
if (v) {
|
||||
this.element.title = v;
|
||||
this.element.title = v
|
||||
} else {
|
||||
this.element.removeAttribute("title");
|
||||
this.element.removeAttribute('title')
|
||||
}
|
||||
});
|
||||
this.classList = prop(this, "classList", classList, this.updateClasses);
|
||||
this.hidden = prop(this, "hidden", false, this.updateClasses);
|
||||
this.enabled = prop(this, "enabled", enabled, () => {
|
||||
this.updateClasses();
|
||||
(this.element as HTMLButtonElement).disabled = !this.enabled;
|
||||
});
|
||||
this.action = prop(this, "action", action);
|
||||
this.element.addEventListener("click", (e) => {
|
||||
})
|
||||
this.classList = prop(this, 'classList', classList, this.updateClasses)
|
||||
this.hidden = prop(this, 'hidden', false, this.updateClasses)
|
||||
this.enabled = prop(this, 'enabled', enabled, () => {
|
||||
this.updateClasses()
|
||||
;(this.element as HTMLButtonElement).disabled = !this.enabled
|
||||
})
|
||||
this.action = prop(this, 'action', action)
|
||||
this.element.addEventListener('click', (e) => {
|
||||
if (this.popup) {
|
||||
// we are either a touch device or triggered by click not hover
|
||||
if (!this.#over) {
|
||||
this.popup.toggle();
|
||||
this.popup.toggle()
|
||||
}
|
||||
}
|
||||
this.action?.(e, this);
|
||||
});
|
||||
this.action?.(e, this)
|
||||
})
|
||||
|
||||
if (visibilitySetting?.id) {
|
||||
const settingUpdated = () => {
|
||||
this.hidden =
|
||||
app.ui.settings.getSettingValue(visibilitySetting.id) !==
|
||||
visibilitySetting.showValue;
|
||||
};
|
||||
visibilitySetting.showValue
|
||||
}
|
||||
app.ui.settings.addEventListener(
|
||||
visibilitySetting.id + ".change",
|
||||
visibilitySetting.id + '.change',
|
||||
settingUpdated
|
||||
);
|
||||
settingUpdated();
|
||||
)
|
||||
settingUpdated()
|
||||
}
|
||||
}
|
||||
|
||||
updateIcon = () =>
|
||||
(this.iconElement.className = `mdi mdi-${(this.isOver && this.overIcon) || this.icon}${this.iconSize ? " mdi-" + this.iconSize + "px" : ""}`);
|
||||
(this.iconElement.className = `mdi mdi-${(this.isOver && this.overIcon) || this.icon}${this.iconSize ? ' mdi-' + this.iconSize + 'px' : ''}`)
|
||||
updateClasses = () => {
|
||||
const internalClasses = [];
|
||||
const internalClasses = []
|
||||
if (this.hidden) {
|
||||
internalClasses.push("hidden");
|
||||
internalClasses.push('hidden')
|
||||
}
|
||||
if (!this.enabled) {
|
||||
internalClasses.push("disabled");
|
||||
internalClasses.push('disabled')
|
||||
}
|
||||
if (this.popup) {
|
||||
if (this.#popupOpen) {
|
||||
internalClasses.push("popup-open");
|
||||
internalClasses.push('popup-open')
|
||||
} else {
|
||||
internalClasses.push("popup-closed");
|
||||
internalClasses.push('popup-closed')
|
||||
}
|
||||
}
|
||||
applyClasses(this.element, this.classList, ...internalClasses);
|
||||
};
|
||||
applyClasses(this.element, this.classList, ...internalClasses)
|
||||
}
|
||||
|
||||
withPopup(popup: ComfyPopup, mode: "click" | "hover" = "click") {
|
||||
this.popup = popup;
|
||||
withPopup(popup: ComfyPopup, mode: 'click' | 'hover' = 'click') {
|
||||
this.popup = popup
|
||||
|
||||
if (mode === "hover") {
|
||||
if (mode === 'hover') {
|
||||
for (const el of [this.element, this.popup.element]) {
|
||||
el.addEventListener("mouseenter", () => {
|
||||
this.popup.open = !!++this.#over;
|
||||
});
|
||||
el.addEventListener("mouseleave", () => {
|
||||
this.popup.open = !!--this.#over;
|
||||
});
|
||||
el.addEventListener('mouseenter', () => {
|
||||
this.popup.open = !!++this.#over
|
||||
})
|
||||
el.addEventListener('mouseleave', () => {
|
||||
this.popup.open = !!--this.#over
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
popup.addEventListener("change", () => {
|
||||
this.#popupOpen = popup.open;
|
||||
this.updateClasses();
|
||||
});
|
||||
popup.addEventListener('change', () => {
|
||||
this.#popupOpen = popup.open
|
||||
this.updateClasses()
|
||||
})
|
||||
|
||||
return this;
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import { $el } from "../../ui";
|
||||
import { ComfyButton } from "./button";
|
||||
import { prop } from "../../utils";
|
||||
import { $el } from '../../ui'
|
||||
import { ComfyButton } from './button'
|
||||
import { prop } from '../../utils'
|
||||
|
||||
export class ComfyButtonGroup {
|
||||
element = $el("div.comfyui-button-group");
|
||||
buttons: (HTMLElement | ComfyButton)[];
|
||||
element = $el('div.comfyui-button-group')
|
||||
buttons: (HTMLElement | ComfyButton)[]
|
||||
|
||||
constructor(...buttons: (HTMLElement | ComfyButton)[]) {
|
||||
this.buttons = prop(this, "buttons", buttons, () => this.update());
|
||||
this.buttons = prop(this, 'buttons', buttons, () => this.update())
|
||||
}
|
||||
|
||||
insert(button: ComfyButton, index: number) {
|
||||
this.buttons.splice(index, 0, button);
|
||||
this.update();
|
||||
this.buttons.splice(index, 0, button)
|
||||
this.update()
|
||||
}
|
||||
|
||||
append(button: ComfyButton) {
|
||||
this.buttons.push(button);
|
||||
this.update();
|
||||
this.buttons.push(button)
|
||||
this.update()
|
||||
}
|
||||
|
||||
remove(indexOrButton: ComfyButton | number) {
|
||||
if (typeof indexOrButton !== "number") {
|
||||
indexOrButton = this.buttons.indexOf(indexOrButton);
|
||||
if (typeof indexOrButton !== 'number') {
|
||||
indexOrButton = this.buttons.indexOf(indexOrButton)
|
||||
}
|
||||
if (indexOrButton > -1) {
|
||||
const r = this.buttons.splice(indexOrButton, 1);
|
||||
this.update();
|
||||
return r;
|
||||
const r = this.buttons.splice(indexOrButton, 1)
|
||||
this.update()
|
||||
return r
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
this.element.replaceChildren(...this.buttons.map((b) => b["element"] ?? b));
|
||||
this.element.replaceChildren(...this.buttons.map((b) => b['element'] ?? b))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export interface ComfyComponent<T extends HTMLElement = HTMLElement> {
|
||||
element: T;
|
||||
element: T
|
||||
}
|
||||
|
||||
@@ -1,140 +1,140 @@
|
||||
import { prop } from "../../utils";
|
||||
import { $el } from "../../ui";
|
||||
import { applyClasses, ClassList } from "../utils";
|
||||
import { prop } from '../../utils'
|
||||
import { $el } from '../../ui'
|
||||
import { applyClasses, ClassList } from '../utils'
|
||||
|
||||
export class ComfyPopup extends EventTarget {
|
||||
element = $el("div.comfyui-popup");
|
||||
open: boolean;
|
||||
children: HTMLElement[];
|
||||
target: HTMLElement;
|
||||
ignoreTarget: boolean;
|
||||
container: HTMLElement;
|
||||
position: string;
|
||||
closeOnEscape: boolean;
|
||||
horizontal: string;
|
||||
classList: ClassList;
|
||||
element = $el('div.comfyui-popup')
|
||||
open: boolean
|
||||
children: HTMLElement[]
|
||||
target: HTMLElement
|
||||
ignoreTarget: boolean
|
||||
container: HTMLElement
|
||||
position: string
|
||||
closeOnEscape: boolean
|
||||
horizontal: string
|
||||
classList: ClassList
|
||||
|
||||
constructor(
|
||||
{
|
||||
target,
|
||||
container = document.body,
|
||||
classList = "",
|
||||
classList = '',
|
||||
ignoreTarget = true,
|
||||
closeOnEscape = true,
|
||||
position = "absolute",
|
||||
horizontal = "left",
|
||||
position = 'absolute',
|
||||
horizontal = 'left'
|
||||
}: {
|
||||
target: HTMLElement;
|
||||
container?: HTMLElement;
|
||||
classList?: ClassList;
|
||||
ignoreTarget?: boolean;
|
||||
closeOnEscape?: boolean;
|
||||
position?: "absolute" | "relative";
|
||||
horizontal?: "left" | "right";
|
||||
target: HTMLElement
|
||||
container?: HTMLElement
|
||||
classList?: ClassList
|
||||
ignoreTarget?: boolean
|
||||
closeOnEscape?: boolean
|
||||
position?: 'absolute' | 'relative'
|
||||
horizontal?: 'left' | 'right'
|
||||
},
|
||||
...children: HTMLElement[]
|
||||
) {
|
||||
super();
|
||||
this.target = target;
|
||||
this.ignoreTarget = ignoreTarget;
|
||||
this.container = container;
|
||||
this.position = position;
|
||||
this.closeOnEscape = closeOnEscape;
|
||||
this.horizontal = horizontal;
|
||||
super()
|
||||
this.target = target
|
||||
this.ignoreTarget = ignoreTarget
|
||||
this.container = container
|
||||
this.position = position
|
||||
this.closeOnEscape = closeOnEscape
|
||||
this.horizontal = horizontal
|
||||
|
||||
container.append(this.element);
|
||||
container.append(this.element)
|
||||
|
||||
this.children = prop(this, "children", children, () => {
|
||||
this.element.replaceChildren(...this.children);
|
||||
this.update();
|
||||
});
|
||||
this.classList = prop(this, "classList", classList, () =>
|
||||
applyClasses(this.element, this.classList, "comfyui-popup", horizontal)
|
||||
);
|
||||
this.open = prop(this, "open", false, (v, o) => {
|
||||
if (v === o) return;
|
||||
this.children = prop(this, 'children', children, () => {
|
||||
this.element.replaceChildren(...this.children)
|
||||
this.update()
|
||||
})
|
||||
this.classList = prop(this, 'classList', classList, () =>
|
||||
applyClasses(this.element, this.classList, 'comfyui-popup', horizontal)
|
||||
)
|
||||
this.open = prop(this, 'open', false, (v, o) => {
|
||||
if (v === o) return
|
||||
if (v) {
|
||||
this.#show();
|
||||
this.#show()
|
||||
} else {
|
||||
this.#hide();
|
||||
this.#hide()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.open = !this.open;
|
||||
this.open = !this.open
|
||||
}
|
||||
|
||||
#hide() {
|
||||
this.element.classList.remove("open");
|
||||
window.removeEventListener("resize", this.update);
|
||||
window.removeEventListener("click", this.#clickHandler, { capture: true });
|
||||
window.removeEventListener("keydown", this.#escHandler, { capture: true });
|
||||
this.element.classList.remove('open')
|
||||
window.removeEventListener('resize', this.update)
|
||||
window.removeEventListener('click', this.#clickHandler, { capture: true })
|
||||
window.removeEventListener('keydown', this.#escHandler, { capture: true })
|
||||
|
||||
this.dispatchEvent(new CustomEvent("close"));
|
||||
this.dispatchEvent(new CustomEvent("change"));
|
||||
this.dispatchEvent(new CustomEvent('close'))
|
||||
this.dispatchEvent(new CustomEvent('change'))
|
||||
}
|
||||
|
||||
#show() {
|
||||
this.element.classList.add("open");
|
||||
this.update();
|
||||
this.element.classList.add('open')
|
||||
this.update()
|
||||
|
||||
window.addEventListener("resize", this.update);
|
||||
window.addEventListener("click", this.#clickHandler, { capture: true });
|
||||
window.addEventListener('resize', this.update)
|
||||
window.addEventListener('click', this.#clickHandler, { capture: true })
|
||||
if (this.closeOnEscape) {
|
||||
window.addEventListener("keydown", this.#escHandler, { capture: true });
|
||||
window.addEventListener('keydown', this.#escHandler, { capture: true })
|
||||
}
|
||||
|
||||
this.dispatchEvent(new CustomEvent("open"));
|
||||
this.dispatchEvent(new CustomEvent("change"));
|
||||
this.dispatchEvent(new CustomEvent('open'))
|
||||
this.dispatchEvent(new CustomEvent('change'))
|
||||
}
|
||||
|
||||
#escHandler = (e) => {
|
||||
if (e.key === "Escape") {
|
||||
this.open = false;
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
if (e.key === 'Escape') {
|
||||
this.open = false
|
||||
e.preventDefault()
|
||||
e.stopImmediatePropagation()
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
#clickHandler = (e) => {
|
||||
/** @type {any} */
|
||||
const target = e.target;
|
||||
const target = e.target
|
||||
if (
|
||||
!this.element.contains(target) &&
|
||||
this.ignoreTarget &&
|
||||
!this.target.contains(target)
|
||||
) {
|
||||
this.open = false;
|
||||
this.open = false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
update = () => {
|
||||
const rect = this.target.getBoundingClientRect();
|
||||
this.element.style.setProperty("--bottom", "unset");
|
||||
if (this.position === "absolute") {
|
||||
if (this.horizontal === "left") {
|
||||
this.element.style.setProperty("--left", rect.left + "px");
|
||||
const rect = this.target.getBoundingClientRect()
|
||||
this.element.style.setProperty('--bottom', 'unset')
|
||||
if (this.position === 'absolute') {
|
||||
if (this.horizontal === 'left') {
|
||||
this.element.style.setProperty('--left', rect.left + 'px')
|
||||
} else {
|
||||
this.element.style.setProperty(
|
||||
"--left",
|
||||
rect.right - this.element.clientWidth + "px"
|
||||
);
|
||||
'--left',
|
||||
rect.right - this.element.clientWidth + 'px'
|
||||
)
|
||||
}
|
||||
this.element.style.setProperty("--top", rect.bottom + "px");
|
||||
this.element.style.setProperty("--limit", rect.bottom + "px");
|
||||
this.element.style.setProperty('--top', rect.bottom + 'px')
|
||||
this.element.style.setProperty('--limit', rect.bottom + 'px')
|
||||
} else {
|
||||
this.element.style.setProperty("--left", 0 + "px");
|
||||
this.element.style.setProperty("--top", rect.height + "px");
|
||||
this.element.style.setProperty("--limit", rect.height + "px");
|
||||
this.element.style.setProperty('--left', 0 + 'px')
|
||||
this.element.style.setProperty('--top', rect.height + 'px')
|
||||
this.element.style.setProperty('--limit', rect.height + 'px')
|
||||
}
|
||||
|
||||
const thisRect = this.element.getBoundingClientRect();
|
||||
const thisRect = this.element.getBoundingClientRect()
|
||||
if (thisRect.height < 30) {
|
||||
// Move up instead
|
||||
this.element.style.setProperty("--top", "unset");
|
||||
this.element.style.setProperty("--bottom", rect.height + 5 + "px");
|
||||
this.element.style.setProperty("--limit", rect.height + 5 + "px");
|
||||
this.element.style.setProperty('--top', 'unset')
|
||||
this.element.style.setProperty('--bottom', rect.height + 5 + 'px')
|
||||
this.element.style.setProperty('--limit', rect.height + 5 + 'px')
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
import { $el } from "../../ui";
|
||||
import { ComfyButton } from "./button";
|
||||
import { prop } from "../../utils";
|
||||
import { ComfyPopup } from "./popup";
|
||||
import { $el } from '../../ui'
|
||||
import { ComfyButton } from './button'
|
||||
import { prop } from '../../utils'
|
||||
import { ComfyPopup } from './popup'
|
||||
|
||||
export class ComfySplitButton {
|
||||
arrow: ComfyButton;
|
||||
element: HTMLElement;
|
||||
popup: ComfyPopup;
|
||||
items: Array<HTMLElement | ComfyButton>;
|
||||
arrow: ComfyButton
|
||||
element: HTMLElement
|
||||
popup: ComfyPopup
|
||||
items: Array<HTMLElement | ComfyButton>
|
||||
|
||||
constructor(
|
||||
{
|
||||
primary,
|
||||
mode,
|
||||
horizontal = "left",
|
||||
position = "relative",
|
||||
horizontal = 'left',
|
||||
position = 'relative'
|
||||
}: {
|
||||
primary: ComfyButton;
|
||||
mode?: "hover" | "click";
|
||||
horizontal?: "left" | "right";
|
||||
position?: "relative" | "absolute";
|
||||
primary: ComfyButton
|
||||
mode?: 'hover' | 'click'
|
||||
horizontal?: 'left' | 'right'
|
||||
position?: 'relative' | 'absolute'
|
||||
},
|
||||
...items: Array<HTMLElement | ComfyButton>
|
||||
) {
|
||||
this.arrow = new ComfyButton({
|
||||
icon: "chevron-down",
|
||||
});
|
||||
icon: 'chevron-down'
|
||||
})
|
||||
this.element = $el(
|
||||
"div.comfyui-split-button" + (mode === "hover" ? ".hover" : ""),
|
||||
'div.comfyui-split-button' + (mode === 'hover' ? '.hover' : ''),
|
||||
[
|
||||
$el("div.comfyui-split-primary", primary.element),
|
||||
$el("div.comfyui-split-arrow", this.arrow.element),
|
||||
$el('div.comfyui-split-primary', primary.element),
|
||||
$el('div.comfyui-split-arrow', this.arrow.element)
|
||||
]
|
||||
);
|
||||
)
|
||||
this.popup = new ComfyPopup({
|
||||
target: this.element,
|
||||
container: position === "relative" ? this.element : document.body,
|
||||
container: position === 'relative' ? this.element : document.body,
|
||||
classList:
|
||||
"comfyui-split-button-popup" + (mode === "hover" ? " hover" : ""),
|
||||
closeOnEscape: mode === "click",
|
||||
'comfyui-split-button-popup' + (mode === 'hover' ? ' hover' : ''),
|
||||
closeOnEscape: mode === 'click',
|
||||
position,
|
||||
horizontal,
|
||||
});
|
||||
horizontal
|
||||
})
|
||||
|
||||
this.arrow.withPopup(this.popup, mode);
|
||||
this.arrow.withPopup(this.popup, mode)
|
||||
|
||||
this.items = prop(this, "items", items, () => this.update());
|
||||
this.items = prop(this, 'items', items, () => this.update())
|
||||
}
|
||||
|
||||
update() {
|
||||
this.popup.element.replaceChildren(
|
||||
...this.items.map((b) => ("element" in b ? b.element : b))
|
||||
);
|
||||
...this.items.map((b) => ('element' in b ? b.element : b))
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user