File size: 1,785 Bytes
e26a977
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// @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,
				})
			);
		});
	}
}