Migrate ColorPlatte to ts (#31)

* rename

* Migrate colorPlatte to ts

src/extensions/core/colorPalette.ts

@@ -1,9 +1,10 @@
 import {app} from "../../scripts/app";
 import {$el} from "../../scripts/ui";
+import type { ColorPalettes } from "/types/colorPalette";
 
 // Manage color palettes
 
-const colorPalettes = {
+const colorPalettes: ColorPalettes = {
 	"dark": {
 		"id": "dark",
 		"name": "Dark (Default)",
@@ -391,7 +392,9 @@ const colorPalettes = {
 const id = "Comfy.ColorPalette";
 const idCustomColorPalettes = "Comfy.CustomColorPalettes";
 const defaultColorPaletteId = "dark";
-const els = {}
+const els: { select: HTMLSelectElement | null } = {
+	select: null,
+}
 // const ctxMenu = LiteGraph.ContextMenu;
 app.registerExtension({
 	name: id,
@@ -474,11 +477,11 @@ app.registerExtension({
 			return completeColorPalette(colorPalette);
 		};
 
-		const getCustomColorPalettes = () => {
+		const getCustomColorPalettes = (): ColorPalettes => {
 			return app.ui.settings.getSettingValue(idCustomColorPalettes, {});
 		};
 
-		const setCustomColorPalettes = (customColorPalettes) => {
+		const setCustomColorPalettes = (customColorPalettes: ColorPalettes) => {
 			return app.ui.settings.setSettingValue(idCustomColorPalettes, customColorPalettes);
 		};
 
@@ -513,7 +516,7 @@ app.registerExtension({
 			setCustomColorPalettes(customColorPalettes);
 
 			for (const option of els.select.childNodes) {
-				if (option.value === "custom_" + colorPalette.id) {
+				if ((option as HTMLOptionElement).value === "custom_" + colorPalette.id) {
 					els.select.removeChild(option);
 				}
 			}
@@ -533,7 +536,8 @@ app.registerExtension({
 			delete customColorPalettes[colorPaletteId];
 			setCustomColorPalettes(customColorPalettes);
 
-			for (const option of els.select.childNodes) {
+			for (const opt of els.select.childNodes) {
+				const option = opt as HTMLOptionElement;
 				if (option.value === defaultColorPaletteId) {
 					option.selected = true;
 				}
@@ -552,7 +556,9 @@ app.registerExtension({
 			if (colorPalette.colors) {
 				// Sets the colors of node slots and links
 				if (colorPalette.colors.node_slot) {
+					// @ts-ignore
 					Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot);
+					// @ts-ignore
 					Object.assign(LGraphCanvas.link_type_colors, colorPalette.colors.node_slot);
 				}
 				// Sets the colors of the LiteGraph objects
@@ -578,7 +584,7 @@ app.registerExtension({
 			}
 		};
 
-		const getColorPalette = (colorPaletteId) => {
+		const getColorPalette = (colorPaletteId?) => {
 			if (!colorPaletteId) {
 				colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
 			}
@@ -608,12 +614,12 @@ app.registerExtension({
 				if (file.type === "application/json" || file.name.endsWith(".json")) {
 					const reader = new FileReader();
 					reader.onload = async () => {
-						await addCustomColorPalette(JSON.parse(reader.result));
+						await addCustomColorPalette(JSON.parse(reader.result as string));
 					};
 					reader.readAsText(file);
 				}
 			},
-		});
+		}) as HTMLInputElement;
 
 		app.ui.settings.addSetting({
 			id,
@@ -640,7 +646,7 @@ app.registerExtension({
 					onchange: (e) => {
 						setter(e.target.value);
 					}
-				}, options)
+				}, options) as HTMLSelectElement;
 
 				return $el("tr", [
 					$el("td", [
@@ -754,6 +760,8 @@ app.registerExtension({
 					BACKGROUND_IMAGE = base.BACKGROUND_IMAGE;
 					CLEAR_BACKGROUND_COLOR = base.CLEAR_BACKGROUND_COLOR;
 				}
+				// @ts-ignore
+				// litegraph.extensions.js
 				app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR);
 			},
 		});

src/types/colorPalette.ts

@@ -0,0 +1,85 @@
+import { z } from 'zod';
+
+const nodeSlotSchema = z.object({
+    BOOLEAN: z.string().optional(),
+    CLIP: z.string(),
+    CLIP_VISION: z.string(),
+    CLIP_VISION_OUTPUT: z.string(),
+    CONDITIONING: z.string(),
+    CONTROL_NET: z.string(),
+    CONTROL_NET_WEIGHTS: z.string().optional(),
+    FLOAT: z.string().optional(),
+    GLIGEN: z.string().optional(),
+    IMAGE: z.string(),
+    IMAGEUPLOAD: z.string().optional(),
+    INT: z.string().optional(),
+    LATENT: z.string(),
+    LATENT_KEYFRAME: z.string().optional(),
+    MASK: z.string(),
+    MODEL: z.string(),
+    SAMPLER: z.string().optional(),
+    SIGMAS: z.string().optional(),
+    STRING: z.string().optional(),
+    STYLE_MODEL: z.string(),
+    T2I_ADAPTER_WEIGHTS: z.string().optional(),
+    TAESD: z.string(),
+    TIMESTEP_KEYFRAME: z.string().optional(),
+    UPSCALE_MODEL: z.string().optional(),
+    VAE: z.string()
+}).passthrough();
+
+const litegraphBaseSchema = z.object({
+    BACKGROUND_IMAGE: z.string(),
+    CLEAR_BACKGROUND_COLOR: z.string(),
+    NODE_TITLE_COLOR: z.string(),
+    NODE_SELECTED_TITLE_COLOR: z.string(),
+    NODE_TEXT_SIZE: z.number(),
+    NODE_TEXT_COLOR: z.string(),
+    NODE_SUBTEXT_SIZE: z.number(),
+    NODE_DEFAULT_COLOR: z.string(),
+    NODE_DEFAULT_BGCOLOR: z.string(),
+    NODE_DEFAULT_BOXCOLOR: z.string(),
+    NODE_DEFAULT_SHAPE: z.string(),
+    NODE_BOX_OUTLINE_COLOR: z.string(),
+    DEFAULT_SHADOW_COLOR: z.string(),
+    DEFAULT_GROUP_FONT: z.number(),
+    WIDGET_BGCOLOR: z.string(),
+    WIDGET_OUTLINE_COLOR: z.string(),
+    WIDGET_TEXT_COLOR: z.string(),
+    WIDGET_SECONDARY_TEXT_COLOR: z.string(),
+    LINK_COLOR: z.string(),
+    EVENT_LINK_COLOR: z.string(),
+    CONNECTING_LINK_COLOR: z.string()
+}).passthrough();
+
+const comfyBaseSchema = z.object({
+    ["fg-color"]: z.string(),
+    ["bg-color"]: z.string(),
+    ["comfy-menu-bg"]: z.string(),
+    ["comfy-input-bg"]: z.string(),
+    ["input-text"]: z.string(),
+    ["descrip-text"]: z.string(),
+    ["drag-text"]: z.string(),
+    ["error-text"]: z.string(),
+    ["border-color"]: z.string(),
+    ["tr-even-bg-color"]: z.string(),
+    ["tr-odd-bg-color"]: z.string(),
+});
+
+const colorsSchema = z.object({
+    node_slot: nodeSlotSchema,
+    litegraph_base: litegraphBaseSchema,
+    comfy_base: comfyBaseSchema
+}).passthrough();
+
+const paletteSchema = z.object({
+    id: z.string(),
+    name: z.string(),
+    colors: colorsSchema
+});
+
+const colorPalettesSchema = z.record(paletteSchema);
+
+export type Colors = z.infer<typeof colorsSchema>;
+export type Palette = z.infer<typeof paletteSchema>;
+export type ColorPalettes = z.infer<typeof colorPalettesSchema>;