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 <[email protected]>

Author: huchenlei

src/scripts/app.ts

@@ -20,9 +20,9 @@ import {
   parseComfyWorkflow,
 } from "../types/comfyWorkflow";
 import { ComfyNodeDef } from "/types/apiTypes";
-import { ComfyAppMenu } from "./ui/menu/index.js";
-import { getStorageValue, setStorageValue } from "./utils.js";
-import { ComfyWorkflowManager } from "./workflows.js";
+import { ComfyAppMenu } from "./ui/menu/index";
+import { getStorageValue } from "./utils";
+import { ComfyWorkflowManager, ComfyWorkflow } from "./workflows";
 import {
   LGraphCanvas,
   LGraph,
@@ -2179,16 +2179,11 @@ export class ComfyApp {
     }
   }
 
-  /**
-   * Populates the graph with the specified workflow data
-   * @param {*} graphData A serialized graph object
-   * @param { boolean } clean If the graph state, e.g. images, should be cleared
-   */
   async loadGraphData(
     graphData?: ComfyWorkflowJSON,
     clean: boolean = true,
     restore_view: boolean = true,
-    workflow: string | null = null
+    workflow: string | null | ComfyWorkflow = null
   ) {
     if (clean !== false) {
       this.clean();

src/scripts/changeTracker.js renamed to src/scripts/changeTracker.ts

@@ -1,27 +1,26 @@
-// @ts-nocheck
-
+import type { ComfyApp } from "./app";
 import { api } from "./api";
 import { clone } from "./utils";
 import { LGraphCanvas, LiteGraph } from "@comfyorg/litegraph";
+import { ComfyWorkflow } from "./workflows";
 
 export class ChangeTracker {
   static MAX_HISTORY = 50;
-  #app;
+  #app: ComfyApp;
   undo = [];
   redo = [];
   activeState = null;
   isOurLoad = false;
-  /** @type { import("./workflows").ComfyWorkflow | null } */
-  workflow;
+  workflow: ComfyWorkflow | null;
 
-  ds;
-  nodeOutputs;
+  ds: { scale: number; offset: [number, number]; };
+  nodeOutputs: any;
 
   get app() {
     return this.#app ?? this.workflow.manager.app;
   }
 
-  constructor(workflow) {
+  constructor(workflow: ComfyWorkflow) {
     this.workflow = workflow;
   }
 
@@ -90,8 +89,7 @@ export class ChangeTracker {
     }
   }
 
-  /** @param { import("./app").ComfyApp } app */
-  static init(app) {
+  static init(app: ComfyApp) {
     const changeTracker = () =>
       app.workflowManager.activeWorkflow?.changeTracker ?? globalTracker;
     globalTracker.#setApp(app);
@@ -137,7 +135,7 @@ export class ChangeTracker {
           if (await changeTracker().undoRedo(e)) return;
 
           // If our active element is some type of input then handle changes after they're done
-          if (ChangeTracker.bindInput(activeEl)) return;
+          if (ChangeTracker.bindInput(app, activeEl)) return;
           changeTracker().checkState();
         });
       },
@@ -277,4 +275,4 @@ export class ChangeTracker {
   }
 }
 
-const globalTracker = new ChangeTracker({});
+const globalTracker = new ChangeTracker({} as ComfyWorkflow);

src/scripts/ui.ts

@@ -24,11 +24,15 @@ type Props = {
 
 type Children = Element[] | Element | string | string[];
 
-export function $el(
-  tag: string,
+type ElementType<K extends string> = K extends keyof HTMLElementTagNameMap
+  ? HTMLElementTagNameMap[K]
+  : HTMLElement;
+
+export function $el<TTag extends string>(
+  tag: TTag,
   propsOrChildren?: Children | Props,
   children?: Children
-): HTMLElement {
+): ElementType<TTag> {
   const split = tag.split(".");
   const element = document.createElement(split.shift() as string);
   if (split.length > 0) {
@@ -78,10 +82,10 @@ export function $el(
       }
     }
   }
-  return element;
+  return element as ElementType<TTag>;
 }
 
-function dragElement(dragEl, settings) {
+function dragElement(dragEl, settings): () => void {
   var posDiffX = 0,
     posDiffY = 0,
     posStartX = 0,
@@ -340,6 +344,8 @@ export class ComfyUI {
   menuHamburger: HTMLDivElement;
   menuContainer: HTMLDivElement;
   queueSize: Element;
+  restoreMenuPosition: () => void;
+  loadFile: () => void;
 
   constructor(app) {
     this.app = app;
@@ -425,7 +431,6 @@ export class ComfyUI {
       },
     }) as HTMLInputElement;
 
-    // @ts-ignore
     this.loadFile = () => fileInput.click();
 
     const autoQueueModeEl = toggleSwitch(
@@ -740,7 +745,6 @@ export class ComfyUI {
       },
     });
 
-    // @ts-ignore
     this.restoreMenuPosition = dragElement(this.menuContainer, this.settings);
 
     this.setStatus({ exec_info: { queue_remaining: "X" } });

src/scripts/ui/components/asyncDialog.js renamed to src/scripts/ui/components/asyncDialog.ts

@@ -1,10 +1,10 @@
 import { ComfyDialog } from "../dialog";
 import { $el } from "../../ui";
 
-export class ComfyAsyncDialog extends ComfyDialog {
-  #resolve;
+export class ComfyAsyncDialog extends ComfyDialog<HTMLDialogElement> {
+  #resolve: (value: any) => void;
 
-  constructor(actions) {
+  constructor(actions?: Array<string | { value?: any; text: string }>) {
     super(
       "dialog.comfy-dialog.comfyui-dialog",
       actions?.map((opt) => {
@@ -20,7 +20,7 @@ export class ComfyAsyncDialog extends ComfyDialog {
     );
   }
 
-  show(html) {
+  show(html: string | HTMLElement | HTMLElement[]) {
     this.element.addEventListener("close", () => {
       this.close();
     });
@@ -32,7 +32,7 @@ export class ComfyAsyncDialog extends ComfyDialog {
     });
   }
 
-  showModal(html) {
+  showModal(html: string | HTMLElement | HTMLElement[]) {
     this.element.addEventListener("close", () => {
       this.close();
     });

src/scripts/ui/components/button.js renamed to src/scripts/ui/components/button.ts

@@ -1,37 +1,41 @@
-// @ts-nocheck
-
 import { $el } from "../../ui";
-import { applyClasses, toggleElement } from "../utils";
+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;
+};
 
-/**
- * @typedef {{
- *    icon?: string;
- *    overIcon?: string;
- *    iconSize?: number;
- *    content?: string | HTMLElement;
- *    tooltip?: string;
- *    enabled?: boolean;
- *    action?: (e: Event, btn: ComfyButton) => void,
- *    classList?: import("../utils").ClassList,
- * 	  visibilitySetting?: { id: string, showValue: any },
- * 	  app?: import("../../app").ComfyApp
- * }} ComfyButtonProps
- */
-export class ComfyButton {
+export class ComfyButton implements ComfyComponent<HTMLElement> {
   #over = 0;
   #popupOpen = false;
   isOver = false;
   iconElement = $el("i.mdi");
   contentElement = $el("span");
-  /**
-   * @type {import("./popup").ComfyPopup}
-   */
-  popup;
+  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;
 
-  /**
-   * @param {ComfyButtonProps} opts
-   */
   constructor({
     icon,
     overIcon,
@@ -43,7 +47,7 @@ export class ComfyButton {
     visibilitySetting,
     app,
     enabled = true,
-  }) {
+  }: ComfyButtonProps) {
     this.element = $el(
       "button",
       {
@@ -101,7 +105,7 @@ export class ComfyButton {
     this.hidden = prop(this, "hidden", false, this.updateClasses);
     this.enabled = prop(this, "enabled", enabled, () => {
       this.updateClasses();
-      this.element.disabled = !this.enabled;
+      (this.element as HTMLButtonElement).disabled = !this.enabled;
     });
     this.action = prop(this, "action", action);
     this.element.addEventListener("click", (e) => {
@@ -148,12 +152,7 @@ export class ComfyButton {
     applyClasses(this.element, this.classList, ...internalClasses);
   };
 
-  /**
-   *
-   * @param { import("./popup").ComfyPopup } popup
-   * @param { "click" | "hover" } mode
-   */
-  withPopup(popup, mode = "click") {
+  withPopup(popup: ComfyPopup, mode: "click" | "hover" = "click") {
     this.popup = popup;
 
     if (mode === "hover") {

src/scripts/ui/components/buttonGroup.js renamed to src/scripts/ui/components/buttonGroup.ts

@@ -1,34 +1,26 @@
-// @ts-nocheck
-
 import { $el } from "../../ui";
 import { ComfyButton } from "./button";
 import { prop } from "../../utils";
 
 export class ComfyButtonGroup {
   element = $el("div.comfyui-button-group");
+  buttons: (HTMLElement | ComfyButton)[];
 
-  /** @param {Array<ComfyButton | HTMLElement>} buttons */
-  constructor(...buttons) {
+  constructor(...buttons: (HTMLElement | ComfyButton)[]) {
     this.buttons = prop(this, "buttons", buttons, () => this.update());
   }
 
-  /**
-   * @param {ComfyButton} button
-   * @param {number} index
-   */
-  insert(button, index) {
+  insert(button: ComfyButton, index: number) {
     this.buttons.splice(index, 0, button);
     this.update();
   }
 
-  /** @param {ComfyButton} button */
-  append(button) {
+  append(button: ComfyButton) {
     this.buttons.push(button);
     this.update();
   }
 
-  /** @param {ComfyButton|number} indexOrButton */
-  remove(indexOrButton) {
+  remove(indexOrButton: ComfyButton | number) {
     if (typeof indexOrButton !== "number") {
       indexOrButton = this.buttons.indexOf(indexOrButton);
     }

src/scripts/ui/components/index.ts

@@ -0,0 +1,3 @@
+export interface ComfyComponent<T extends HTMLElement = HTMLElement> {
+  element: T;
+}

src/scripts/ui/components/popup.js renamed to src/scripts/ui/components/popup.ts

@@ -1,24 +1,19 @@
-// @ts-nocheck
-
 import { prop } from "../../utils";
 import { $el } from "../../ui";
-import { applyClasses } from "../utils";
+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;
 
-  /**
-   * @param {{
-   *     target: HTMLElement,
-   *      container?: HTMLElement,
-   *      classList?: import("../utils").ClassList,
-   * 		ignoreTarget?: boolean,
-   * 		closeOnEscape?: boolean,
-   * 		position?: "absolute" | "relative",
-   * 		horizontal?: "left" | "right"
-   * }} param0
-   * @param  {...HTMLElement} children
-   */
   constructor(
     {
       target,
@@ -28,8 +23,16 @@ export class ComfyPopup extends EventTarget {
       closeOnEscape = true,
       position = "absolute",
       horizontal = "left",
+    }: {
+      target: HTMLElement;
+      container?: HTMLElement;
+      classList?: ClassList;
+      ignoreTarget?: boolean;
+      closeOnEscape?: boolean;
+      position?: "absolute" | "relative";
+      horizontal?: "left" | "right";
     },
-    ...children
+    ...children: HTMLElement[]
   ) {
     super();
     this.target = target;