Migrate groupNodeManage (#36)

* rename

* Migrate node manager

src/extensions/core/groupNodeManage.ts

@@ -2,9 +2,11 @@ import { $el, ComfyDialog } from "../../scripts/ui";
 import { DraggableList } from "../../scripts/ui/draggableList";
 import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
 import "./groupNodeManage.css";
+import type { ComfyApp } from "/scripts/app";
+import type { LGraphNode, LGraphNodeConstructor } from "/types/litegraph";
 
 
-const ORDER = Symbol();
+const ORDER: symbol = Symbol();
 
 function merge(target, source) {
 	if (typeof target === "object" && typeof source === "object") {
@@ -23,18 +25,23 @@ function merge(target, source) {
 	return target;
 }
 
-export class ManageGroupDialog extends ComfyDialog {
+export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
-	/** @type { Record<"Inputs" | "Outputs" | "Widgets", {tab: HTMLAnchorElement, page: HTMLElement}> } */
+	tabs: Record<"Inputs" | "Outputs" | "Widgets", {tab: HTMLAnchorElement, page: HTMLElement}>;
-	tabs = {};
+	selectedNodeIndex: number | null | undefined;
-	/** @type { number | null | undefined } */
+	selectedTab: keyof ManageGroupDialog["tabs"] = "Inputs";
-	selectedNodeIndex;
+	selectedGroup: string | undefined;
-	/** @type { keyof ManageGroupDialog["tabs"] } */
+	modifications: Record<string, Record<string, Record<string, { name?: string | undefined, visible?: boolean | undefined }>>> = {};
-	selectedTab = "Inputs";
+	nodeItems: any[];
-	/** @type { string | undefined } */
+	app: ComfyApp;
-	selectedGroup;
+	groupNodeType: LGraphNodeConstructor<LGraphNode>;
+	groupNodeDef: any;
+	groupData: any;
 
-	/** @type { Record<string, Record<string, Record<string, { name?: string | undefined, visible?: boolean | undefined }>>> } */
+	innerNodesList: HTMLUListElement;
-	modifications = {};
+	widgetsPage: HTMLElement;
+	inputsPage: HTMLElement;
+	outputsPage: HTMLElement;
+	draggable: any;
 
 	get selectedNodeInnerIndex() {
 		return +this.nodeItems[this.selectedNodeIndex].dataset.nodeindex;
@@ -45,7 +52,7 @@ export class ManageGroupDialog extends ComfyDialog {
 		this.app = app;
 		this.element = $el("dialog.comfy-group-manage", {
 			parent: document.body,
-		});
+		}) as HTMLDialogElement;
 	}
 
 	changeTab(tab) {
@@ -56,7 +63,7 @@ export class ManageGroupDialog extends ComfyDialog {
 		this.selectedTab = tab;
 	}
 
-	changeNode(index, force) {
+	changeNode(index, force?) {
 		if (!force && this.selectedNodeIndex === index) return;
 
 		if (this.selectedNodeIndex != null) {
@@ -141,7 +148,8 @@ export class ManageGroupDialog extends ComfyDialog {
 		});
 	}
 
-	storeModification({ nodeIndex, section, prop, value }) {
+	storeModification(props: { nodeIndex?: number; section: symbol; prop: string; value: any }) {
+		const { nodeIndex, section, prop, value } = props;
 		const groupMod = (this.modifications[this.selectedGroup] ??= {});
 		const nodesMod = (groupMod.nodes ??= {});
 		const nodeMod = (nodesMod[nodeIndex ?? this.selectedNodeInnerIndex] ??= {});
@@ -249,10 +257,10 @@ export class ManageGroupDialog extends ComfyDialog {
 		return !!outputs.length;
 	}
 
-	show(type) {
+	show(type?) {
 		const groupNodes = Object.keys(app.graph.extra?.groupNodes ?? {}).sort((a, b) => a.localeCompare(b));
 
-		this.innerNodesList = $el("ul.comfy-group-manage-list-items");
+		this.innerNodesList = $el("ul.comfy-group-manage-list-items") as HTMLUListElement;
 		this.widgetsPage = $el("section.comfy-group-manage-node-page");
 		this.inputsPage = $el("section.comfy-group-manage-node-page");
 		this.outputsPage = $el("section.comfy-group-manage-node-page");
@@ -262,7 +270,7 @@ export class ManageGroupDialog extends ComfyDialog {
 			["Inputs", this.inputsPage],
 			["Widgets", this.widgetsPage],
 			["Outputs", this.outputsPage],
-		].reduce((p, [name, page]) => {
+		].reduce((p, [name, page]: [string, HTMLElement]) => {
 			p[name] = {
 				tab: $el("a", {
 					onclick: () => {
@@ -273,7 +281,7 @@ export class ManageGroupDialog extends ComfyDialog {
 				page,
 			};
 			return p;
-		}, {});
+		}, {}) as any;
 
 		const outer = $el("div.comfy-group-manage-outer", [
 			$el("header", [

src/scripts/ui/dialog.ts

@@ -1,13 +1,13 @@
 import { $el } from "../ui";
 
-export class ComfyDialog {
+export class ComfyDialog<T extends HTMLElement = HTMLElement> {
-	element: HTMLElement;
+	element: T;
 	textElement: HTMLElement;
 
 	constructor() {
 		this.element = $el("div.comfy-modal", { parent: document.body }, [
 			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
-		]);
+		]) as T;
 	}
 
 	createButtons() {

src/scripts/ui/settings.ts

@@ -27,11 +27,10 @@ interface SettingParams {
     options?: SettingOption[] | ((value: any) => SettingOption[]);
 }
 
-export class ComfySettingsDialog extends ComfyDialog {
+export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
 	app: ComfyApp;
 	settingsValues: any;
 	settingsLookup: Record<string, Setting>;
-	declare element: HTMLDialogElement;
 
 	constructor(app) {
 		super();

src/types/litegraph.d.ts

@@ -855,6 +855,7 @@ export declare class LGraphNode {
 }
 
 export type LGraphNodeConstructor<T extends LGraphNode = LGraphNode> = {
+	nodeData: any;  // Used by group node.
     new (): T;
 };