From f22bcdf2b22cecc1ca4d02ff7f691b4a9c49927a Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Tue, 18 Jun 2024 14:22:11 -0400 Subject: [PATCH] Migrate ColorPlatte to ts (#31) * rename * Migrate colorPlatte to ts --- .../core/{colorPalette.js => colorPalette.ts} | 28 +++--- src/types/colorPalette.ts | 85 +++++++++++++++++++ 2 files changed, 103 insertions(+), 10 deletions(-) rename src/extensions/core/{colorPalette.js => colorPalette.ts} (97%) create mode 100644 src/types/colorPalette.ts diff --git a/src/extensions/core/colorPalette.js b/src/extensions/core/colorPalette.ts similarity index 97% rename from src/extensions/core/colorPalette.js rename to src/extensions/core/colorPalette.ts index fef2a4270..537d21a9a 100644 --- a/src/extensions/core/colorPalette.js +++ b/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); }, }); diff --git a/src/types/colorPalette.ts b/src/types/colorPalette.ts new file mode 100644 index 000000000..6a3c8bbcd --- /dev/null +++ b/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; +export type Palette = z.infer; +export type ColorPalettes = z.infer;