From 681bb69217c1a608e6010a0d809fdcbd9a0b6eab Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Tue, 18 Jun 2024 14:05:49 -0400
Subject: [PATCH] Migrate Clipspace to ts (#30)

* rename

* Migrate to ts
---
 src/extensions/core/{clipspace.js => clipspace.ts} | 10 +++++-----
 src/scripts/ui.ts                                  |  4 +++-
 2 files changed, 8 insertions(+), 6 deletions(-)
 rename src/extensions/core/{clipspace.js => clipspace.ts} (96%)

diff --git a/src/extensions/core/clipspace.js b/src/extensions/core/clipspace.ts
similarity index 96%
rename from src/extensions/core/clipspace.js
rename to src/extensions/core/clipspace.ts
index 0ec0987b8..175ad6bfd 100644
--- a/src/extensions/core/clipspace.js
+++ b/src/extensions/core/clipspace.ts
@@ -20,7 +20,7 @@ export class ClipspaceDialog extends ComfyDialog {
 
 	static invalidatePreview() {
 		if(ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0) {
-			const img_preview = document.getElementById("clipspace_preview");
+			const img_preview = document.getElementById("clipspace_preview") as HTMLImageElement;
 			if(img_preview) {
 				img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
 				img_preview.style.maxHeight = "100%";
@@ -57,7 +57,7 @@ export class ClipspaceDialog extends ComfyDialog {
 		super();
 	}
 
-	createButtons(self) {
+	createButtons() {
 		const buttons = [];
 
 		for(let idx in ClipspaceDialog.items) {
@@ -107,7 +107,7 @@ export class ClipspaceDialog extends ComfyDialog {
 								[
 									$el("option", {value:'selected'}, 'selected'),
 									$el("option", {value:'all'}, 'all')
-								]);
+								]) as HTMLSelectElement;
 			combo2.value = ComfyApp.clipspace['img_paste_mode'];
 
 			const row2 =
@@ -141,7 +141,7 @@ export class ClipspaceDialog extends ComfyDialog {
 	show() {
 		const img_preview = document.getElementById("clipspace_preview");
 		ClipspaceDialog.invalidate();
-		
+
 		this.element.style.display = "block";
 	}
 }
@@ -152,7 +152,7 @@ app.registerExtension({
 		app.openClipspace =
 			function () {
 				if(!ClipspaceDialog.instance) {
-					ClipspaceDialog.instance = new ClipspaceDialog(app);
+					ClipspaceDialog.instance = new ClipspaceDialog();
 					ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate;
 				}
 
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 844bcb271..d332fe9de 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -21,7 +21,9 @@ type Props = {
     [key: string]: any
 };
 
-export function $el(tag: string, propsOrChildren?: string | Element | Element[] | Props, children?: Element[] | Element): HTMLElement {
+type Children = Element[] | Element | string | string[];
+
+export function $el(tag: string, propsOrChildren?: Children | Props, children?: Children): HTMLElement {
     const split = tag.split(".");
     const element = document.createElement(split.shift() as string);
     if (split.length > 0) {