From 6b1e40a01162a44fd885356d18dfac899316c60d Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Wed, 19 Feb 2025 13:56:08 -0500 Subject: [PATCH] Add IColorable interface (#549) * Add IColorable interface * Set color option * nit * nit * nit --- src/LGraphCanvas.ts | 23 +++++++---------------- src/LGraphGroup.ts | 23 ++++++++++++++++++++++- src/LGraphNode.ts | 25 ++++++++++++++++++++++++- src/interfaces.ts | 18 ++++++++++++++++++ src/litegraph.ts | 2 ++ 5 files changed, 73 insertions(+), 18 deletions(-) diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index f1004f8a62..3f94a9571b 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -21,6 +21,8 @@ import type { LinkSegment, ReadOnlyPoint, ReadOnlyRect, + ColorOption, + IColorable, } from "./interfaces" import type { IWidget } from "./types/widgets" import { LGraphNode, type NodeId } from "./LGraphNode" @@ -198,7 +200,7 @@ export class LGraphCanvas implements ConnectionColorContext { static gradients: Record = {} // cache of gradients static search_limit = -1 - static node_colors = { + static node_colors: Record = { red: { color: "#322", bgcolor: "#533", groupcolor: "#A88" }, brown: { color: "#332922", bgcolor: "#593930", groupcolor: "#b06634" }, green: { color: "#232", bgcolor: "#353", groupcolor: "#8A8" }, @@ -1428,23 +1430,12 @@ export class LGraphCanvas implements ConnectionColorContext { node: node, }) - function inner_clicked(v: { value: string | number }) { + function inner_clicked(v: { value: string | null }) { if (!node) return - const color = v.value ? LGraphCanvas.node_colors[v.value] : null - - const fApplyColor = function (node: LGraphNode) { - if (color) { - if (node instanceof LGraphGroup) { - node.color = color.groupcolor - } else { - node.color = color.color - node.bgcolor = color.bgcolor - } - } else { - delete node.color - delete node.bgcolor - } + const fApplyColor = function (item: IColorable) { + const colorOption = v.value ? LGraphCanvas.node_colors[v.value] : null + item.setColorOption(colorOption) } const canvas = LGraphCanvas.active_canvas diff --git a/src/LGraphGroup.ts b/src/LGraphGroup.ts index 14db550cfd..adcc95cd6f 100644 --- a/src/LGraphGroup.ts +++ b/src/LGraphGroup.ts @@ -1,5 +1,7 @@ // @ts-strict-ignore import type { + ColorOption, + IColorable, IContextMenuValue, IPinnable, Point, @@ -25,7 +27,7 @@ export interface IGraphGroupFlags extends Record { pinned?: true } -export class LGraphGroup implements Positionable, IPinnable { +export class LGraphGroup implements Positionable, IPinnable, IColorable { static minWidth = 140 static minHeight = 80 static resizeLength = 10 @@ -62,6 +64,25 @@ export class LGraphGroup implements Positionable, IPinnable { : "#AAA" } + /** The color option used to set {@link color}. */ + #colorOption: ColorOption | null = null + + /** @inheritdoc {@link IColorable.setColorOption} */ + setColorOption(colorOption: ColorOption | null): void { + if (colorOption == null) { + delete this.color + this.#colorOption = null + } else { + this.color = colorOption.groupcolor + this.#colorOption = colorOption + } + } + + /** @inheritdoc {@link IColorable.getColorOption} */ + getColorOption(): ColorOption | null { + return this.#colorOption + } + /** Position of the group, as x,y co-ordinates in graph space */ get pos() { return this._pos diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 97d6cc350c..dfbf258c99 100644 --- a/src/LGraphNode.ts +++ b/src/LGraphNode.ts @@ -1,8 +1,10 @@ // @ts-strict-ignore import type { CanvasColour, + ColorOption, ConnectingLink, Dictionary, + IColorable, IContextMenuValue, IFoundSlot, INodeFlags, @@ -142,7 +144,7 @@ export interface LGraphNode { * @param {string} name a name for the node */ // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging -export class LGraphNode implements Positionable, IPinnable { +export class LGraphNode implements Positionable, IPinnable, IColorable { // Static properties used by dynamic child classes static title?: string static MAX_CONSOLE?: number @@ -234,6 +236,27 @@ export class LGraphNode implements Positionable, IPinnable { return this.boxcolor || colState || LiteGraph.NODE_DEFAULT_BOXCOLOR } + /** The color option used to set {@link color} and {@link bgcolor}. */ + #colorOption: ColorOption | null = null + + /** @inheritdoc {@link IColorable.setColorOption} */ + setColorOption(colorOption: ColorOption | null): void { + if (colorOption == null) { + delete this.color + delete this.bgcolor + this.#colorOption = null + } else { + this.color = colorOption.color + this.bgcolor = colorOption.bgcolor + this.#colorOption = colorOption + } + } + + /** @inheritdoc {@link IColorable.getColorOption} */ + getColorOption(): ColorOption | null { + return this.#colorOption + } + exec_version: number action_call?: string execute_triggered: number diff --git a/src/interfaces.ts b/src/interfaces.ts index 35cbf064c9..f0a0c72b3f 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -65,6 +65,24 @@ export interface Positionable extends Parent { onDeselected?(): void } +/** + * A color option to customize the color of {@link LGraphNode} or {@link LGraphGroup}. + * @see {@link LGraphCanvas.node_colors} + */ +export interface ColorOption { + color: string + bgcolor: string + groupcolor: string +} + +/** + * An object that can be colored with a {@link ColorOption}. + */ +export interface IColorable { + setColorOption(colorOption: ColorOption | null): void + getColorOption(): ColorOption | null +} + /** * An object that can be pinned. * diff --git a/src/litegraph.ts b/src/litegraph.ts index b3aa92e554..b2ab03fd8d 100644 --- a/src/litegraph.ts +++ b/src/litegraph.ts @@ -19,6 +19,7 @@ import type { Rect, Rect32, Size, + ColorOption, } from "./interfaces" import type { SlotShape, LabelPosition, SlotDirection, SlotType } from "./draw" import type { IWidget } from "./types/widgets" @@ -70,6 +71,7 @@ export { Rect, Rect32, Size, + ColorOption, } export { IWidget } export { LGraphBadge, BadgePosition }