LiteGraph.js中自定义节点连接槽颜色的方法

在LiteGraph.js项目中，开发者经常需要自定义节点的外观以提升可视化效果。其中，连接槽(即节点的输入输出端口)的颜色定制是一个常见需求。本文将详细介绍如何通过代码实现这一功能。

连接槽颜色的默认机制

LiteGraph.js默认会根据数据类型自动为连接槽分配颜色。例如：

• 数字类型(number)通常显示为绿色
• 字符串类型(string)通常显示为蓝色
• 布尔类型(boolean)通常显示为红色
• 特殊类型(special)也有默认颜色

自定义连接槽颜色的方法

要覆盖这些默认颜色设置，可以通过修改LGraphCanvas的两个关键属性：

1. default_connection_color_byTypeOff - 定义未连接时的槽颜色
2. default_connection_color_byType - 定义已连接时的槽颜色

示例代码如下：

LGraphCanvas.default_connection_color_byTypeOff = {
    number: "#474",  // 数字类型未连接时颜色
    string: "#447",  // 字符串类型未连接时颜色
    boolean: "#744", // 布尔类型未连接时颜色
    special: "#FFF"  // 特殊类型未连接时颜色
};

LGraphCanvas.default_connection_color_byType = {
    number: "#7F7",  // 数字类型已连接时颜色
    string: "#77F",  // 字符串类型已连接时颜色
    boolean: "#F77", // 布尔类型已连接时颜色
    special: "#DDD"  // 特殊类型已连接时颜色
};

实现原理

当创建节点时，LiteGraph.js会根据槽的数据类型自动从上述配置中获取对应的颜色值。这种设计使得开发者可以全局控制所有节点的连接槽颜色表现，而不需要逐个节点进行设置。

注意事项

1. 颜色修改是全局性的，会影响所有使用相同数据类型的连接槽
2. 颜色值支持标准的CSS颜色表示法(十六进制、RGB等)
3. 建议保持一定的颜色语义，例如数字用绿色系、字符串用蓝色系等，以保持可视化的一致性
4. 修改这些属性应在初始化阶段进行，以确保所有后续创建的节点都能应用新颜色

通过这种方式，开发者可以轻松地为LiteGraph.js的可视化界面创建符合项目需求的统一配色方案。