自定义节点开发
带注释的示例
不断增长的示例代码片段集合…… 右键菜单 背景菜单 主背景菜单（在画布上右键）是通过调用 LGraphCanvas.getCanvasMenuOptions 生成的。标准的编辑方式是在扩展上实现 getCanvasMenuItems 方法： javascript app.registerExtension name: "MyExtension", getCa
不断增长的示例代码片段集合……
右键菜单
背景菜单
主背景菜单（在画布上右键）是通过调用 LGraphCanvas.getCanvasMenuOptions 生成的。标准的编辑方式是在扩展上实现 getCanvasMenuItems 方法：
app.registerExtension({
name: "MyExtension",
getCanvasMenuItems(canvas) {
const items = []
items.push(null) // 插入分隔线
items.push({
content: "菜单的文本",
callback: async () => {
// 执行任意操作
}
})
return items
}
});节点菜单
当你在节点上右键时，菜单同样是通过 node.getExtraMenuOptions 生成的。 标准的方式是在扩展上实现 getNodeMenuItems 方法：
app.registerExtension({
name: "MyExtension",
getNodeMenuItems(node) {
const items = []
// 如果需要，你可以按节点类型过滤
if (node.comfyClass === "MyNodeClass") {
items.push({
content: "做点有趣的事",
callback: async () => {
// 有趣的操作
}
})
}
return items
}
});子菜单
如果你想要子菜单，使用带有 options 数组的 submenu 属性：
app.registerExtension({
name: "MyExtension",
getCanvasMenuItems(canvas) {
const items = []
items.push({
content: "带选项的菜单",
submenu: {
options: [
{
content: "选项 1",
callback: (v) => {
// 用 v 做点什么
}
},
{
content: "选项 2",
callback: (v) => {
// 用 v 做点什么
}
},
{
content: "选项 3",
callback: (v) => {
// 用 v 做点什么
}
}
]
}
})
return items
}
});捕获 UI 事件
这和你预期的一样——在 DOM 中找到 UI 元素并添加 eventListener。setup() 是做这件事的好地方，因为此时页面已完全加载。例如，检测"队列"按钮的点击：
function queue_button_pressed() { console.log("队列按钮被按下！") }
document.getElementById("queue-button").addEventListener("click", queue_button_pressed);检测工作流开始
这是众多 api 事件之一：
import { api } from "../../scripts/api.js";
/* 在 setup() 中 */
function on_execution_start() {
/* 执行任意操作 */
}
api.addEventListener("execution_start", on_execution_start);检测工作流被中断
这是一个劫持 api 的简单例子：
import { api } from "../../scripts/api.js";
/* 在 setup() 中 */
const original_api_interrupt = api.interrupt;
api.interrupt = function () {
/* 在调用原方法前做点什么 */
original_api_interrupt.apply(this, arguments);
/* 或者在之后 */
}捕获节点点击
node 有一个 mouseDown 方法可以被劫持。 这次我们注意传递任何返回值。
async nodeCreated(node) {
if (node?.comfyClass === "My Node Name") {
const original_onMouseDown = node.onMouseDown;
node.onMouseDown = function( e, pos, canvas ) {
alert("哎呦！");
return original_onMouseDown?.apply(this, arguments);
}
}
}官方原文
本页来自 Comfy-Org 官方中文文档的固定版本，并转换为 xueai 静态页面。内容以官方持续更新的页面为准。