78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
// @ts-check
|
|
|
|
import { $el } from "../../ui.js";
|
|
import { prop } from "../../utils.js";
|
|
|
|
export class ComfyQueueOptions extends EventTarget {
|
|
element = $el("div.comfyui-queue-options");
|
|
|
|
constructor(app) {
|
|
super();
|
|
this.app = app;
|
|
|
|
this.batchCountInput = $el("input", {
|
|
className: "comfyui-queue-batch-value",
|
|
type: "number",
|
|
min: "1",
|
|
value: "1",
|
|
oninput: () => (this.batchCount = +this.batchCountInput.value),
|
|
});
|
|
|
|
this.batchCountRange = $el("input", {
|
|
type: "range",
|
|
min: "1",
|
|
max: "100",
|
|
value: "1",
|
|
oninput: () => (this.batchCount = +this.batchCountRange.value),
|
|
});
|
|
|
|
this.element.append(
|
|
$el("div.comfyui-queue-batch", [
|
|
$el(
|
|
"label",
|
|
{
|
|
textContent: "Batch count: ",
|
|
},
|
|
this.batchCountInput
|
|
),
|
|
this.batchCountRange,
|
|
])
|
|
);
|
|
|
|
const createOption = (text, value, checked = false) =>
|
|
$el(
|
|
"label",
|
|
{ textContent: text },
|
|
$el("input", {
|
|
type: "radio",
|
|
name: "AutoQueueMode",
|
|
checked,
|
|
value,
|
|
oninput: (e) => (this.autoQueueMode = e.target["value"]),
|
|
})
|
|
);
|
|
|
|
this.autoQueueEl = $el("div.comfyui-queue-mode", [
|
|
$el("span", "Auto Queue:"),
|
|
createOption("Disabled", "", true),
|
|
createOption("Instant", "instant"),
|
|
createOption("On Change", "change"),
|
|
]);
|
|
|
|
this.element.append(this.autoQueueEl);
|
|
|
|
this.batchCount = prop(this, "batchCount", 1, () => {
|
|
this.batchCountInput.value = this.batchCount + "";
|
|
this.batchCountRange.value = this.batchCount + "";
|
|
});
|
|
|
|
this.autoQueueMode = prop(this, "autoQueueMode", "Disabled", () => {
|
|
this.dispatchEvent(
|
|
new CustomEvent("autoQueueMode", {
|
|
detail: this.autoQueueMode,
|
|
})
|
|
);
|
|
});
|
|
}
|
|
}
|