带注释的示例

示例代码片段的集合正在不断增加……

ComfyUI 的 UI 偏好设置

添加和读取设置

import { app } from "../../scripts/app.js";

/* In setup(), add the setting */
    app.ui.settings.addSetting({
        id: "unique.setting.name",
        name: "Switch my cool extension on?",
        type: "boolean", // "text" is another simple option
        defaultValue: false,
        /* To listen for changes, add an onChange parameter
        onChange: (newVal, oldVal) => { console.log("Setting got changed!") },
        */
    });

/* then elsewhere, read it (with a default value just in case) */
    if (app.ui.settings.getSettingValue("unique.setting.name", false)) { 
        /* do something */
    }

数字滑块

该类型 slider 允许用户直接或通过滑块输入值：

    app.ui.settings.addSetting({
        id: "unique.setting.slider",
        name: "Move me around",
        type: "slider",
        attrs: { min: -1, max: 500, step: 1, },
        defaultValue: 0,
        onChange: (newVal, oldVal) => { console.log(`Setting got changed to ${newVal}`) },
    });

右键菜单

背景菜单

主背景菜单（在画布上单击鼠标右键）通过调用 生成
LGraph.getCanvasMenuOptions。添加自己的菜单选项的一种方法是劫持此调用：

/* in setup() */
    const original_getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions;
    LGraphCanvas.prototype.getCanvasMenuOptions = function () {
        // get the basic options 
        const options = original_getCanvasMenuOptions.apply(this, arguments);
        options.push(null); // inserts a divider
        options.push({
            content: "The text for the menu",
            callback: async () => {
                // do whatever
            }
        })
        return options;
    }

节点菜单

当你右键点击一个节点时，菜单同样由 生成 node.getExtraMenuOptions。但是它不返回选项对象，而是将其传入...

/* in beforeRegisterNodeDef() */
if (nodeType?.comfyClass=="MyNodeClass") { 
    const original_getExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
    nodeType.prototype.getExtraMenuOptions = function(_, options) {
        original_getExtraMenuOptions?.apply(this, arguments);
        options.push({
            content: "Do something fun",
            callback: async () => {
                // fun thing
            }
        })
    }   
}

子菜单

LiteGraph.ContextMenu 如果您想要一个子菜单，请提供用于创建它的回调：

function make_submenu(value, options, e, menu, node) {
    const submenu = new LiteGraph.ContextMenu(
        ["option 1", "option 2", "option 3"],
        { 
            event: e, 
            callback: function (v) { 
                // do something with v (=="option x")
            }, 
            parentMenu: menu, 
            node:node
        }
    )
}

/* ... */
    options.push(
        {
            content: "Menu with options",
            has_submenu: true,
            callback: make_submenu,
        }
    )

捕获 UI 事件

这与您所期望的一样 - 在 DOM 中找到 UI 元素并添加一个事件监听器。setup() 这是一个执行此操作的好地方，因为页面已完全加载。例如，要检测对“队列”按钮的点击：

function queue_button_pressed() { console.log("Queue button was pressed!") }
document.getElementById("queue-button").addEventListener("click", queue_button_pressed);

检测工作流程何时开始

这是众多活动之一 api：

import { api } from "../../scripts/api.js";
/* in setup() */
    function on_execution_start() { 
        /* do whatever */
    }
    api.addEventListener("execution_start", on_execution_start);

检测中断的工作流程

劫持api的一个简单示例：

import { api } from "../../scripts/api.js";
/* in setup() */
    const original_api_interrupt = api.interrupt;
    api.interrupt = function () {
        /* Do something before the original method is called */
        original_api_interrupt.apply(this, arguments);
        /* Or after */
    }

捕获节点上的点击次数

node 有一个可以劫持的 mouseDown 方法。这次我们要小心传递任何返回值。

async nodeCreated(node) {
    if (node?.comfyClass === "My Node Name") {
        const original_onMouseDown = node.onMouseDown;
        node.onMouseDown = function( e, pos, canvas ) {
            alert("ouch!");
            return original_onMouseDown?.apply(this, arguments);
        }        
    }
}