Rename to ts (#92)

Rename Remove ts-nocheck, fix errors Update state when graph cleared via UI (#88) Convert to ts, fix imports Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
2026-02-19 22:34:15 +00:00 · 2024-07-05 21:18:32 -04:00
parent 84c939cf71
commit e05a33cb17
21 changed files with 305 additions and 300 deletions
--- a/src/scripts/ui/menu/queueButton.ts
+++ b/src/scripts/ui/menu/queueButton.ts
@@ -0,0 +1,107 @@
+import { ComfyButton } from "../components/button";
+import { $el } from "../../ui";
+import { api } from "../../api";
+import { ComfySplitButton } from "../components/splitButton";
+import { ComfyQueueOptions } from "./queueOptions";
+import { prop } from "../../utils";
+import type { ComfyApp } from "scripts/app";
+
+export class ComfyQueueButton {
+  element = $el("div.comfyui-queue-button");
+  #internalQueueSize = 0;
+
+  queuePrompt = async (e?: MouseEvent) => {
+    this.#internalQueueSize += this.queueOptions.batchCount;
+    // Hold shift to queue front, event is undefined when auto-queue is enabled
+    await this.app.queuePrompt(
+      e?.shiftKey ? -1 : 0,
+      this.queueOptions.batchCount
+    );
+  };
+  queueOptions: ComfyQueueOptions;
+  app: ComfyApp;
+  queueSizeElement: HTMLElement;
+  autoQueueMode: string;
+  graphHasChanged: boolean;
+
+  constructor(app: ComfyApp) {
+    this.app = app;
+    this.queueSizeElement = $el("span.comfyui-queue-count", {
+      textContent: "?",
+    });
+
+    const queue = new ComfyButton({
+      content: $el("div", [
+        $el("span", {
+          textContent: "Queue",
+        }),
+        this.queueSizeElement,
+      ]),
+      icon: "play",
+      classList: "comfyui-button",
+      action: this.queuePrompt,
+    });
+
+    this.queueOptions = new ComfyQueueOptions(app);
+
+    const btn = new ComfySplitButton(
+      {
+        primary: queue,
+        mode: "click",
+        position: "absolute",
+        horizontal: "right",
+      },
+      this.queueOptions.element
+    );
+    btn.element.classList.add("primary");
+    this.element.append(btn.element);
+
+    this.autoQueueMode = prop(this, "autoQueueMode", "", () => {
+      switch (this.autoQueueMode) {
+        case "instant":
+          queue.icon = "infinity";
+          break;
+        case "change":
+          queue.icon = "auto-mode";
+          break;
+        default:
+          queue.icon = "play";
+          break;
+      }
+    });
+
+    this.queueOptions.addEventListener(
+      "autoQueueMode",
+      (e) => (this.autoQueueMode = e["detail"])
+    );
+
+    api.addEventListener("graphChanged", () => {
+      if (this.autoQueueMode === "change") {
+        if (this.#internalQueueSize) {
+          this.graphHasChanged = true;
+        } else {
+          this.graphHasChanged = false;
+          this.queuePrompt();
+        }
+      }
+    });
+
+    api.addEventListener("status", ({ detail }) => {
+      this.#internalQueueSize = detail?.exec_info?.queue_remaining;
+      if (this.#internalQueueSize != null) {
+        this.queueSizeElement.textContent =
+          this.#internalQueueSize > 99 ? "99+" : this.#internalQueueSize + "";
+        this.queueSizeElement.title = `${this.#internalQueueSize} prompts in queue`;
+        if (!this.#internalQueueSize && !app.lastExecutionError) {
+          if (
+            this.autoQueueMode === "instant" ||
+            (this.autoQueueMode === "change" && this.graphHasChanged)
+          ) {
+            this.graphHasChanged = false;
+            this.queuePrompt();
+          }
+        }
+      }
+    });
+  }
+}