Add IColorable interface (#549)

* Add IColorable interface

* Set color option

* nit

* nit

* nit

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<string, CanvasGradient> = {} // cache of gradients
 
   static search_limit = -1
-  static node_colors = {
+  static node_colors: Record<string, ColorOption> = {
     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

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<string, unknown> {
   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

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

src/interfaces.ts

@@ -65,6 +65,24 @@ export interface Positionable extends Parent<Positionable> {
   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.
  *

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 }