javascript_examples.mdx

title
Annotated Examples

A growing collection of fragments of example code...

Right click menus

Background menu

The main background menu (right-click on the canvas) is generated by a call to
LGraph.getCanvasMenuOptions. One way to add your own menu options is to hijack this call:

/* 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 menu

When you right click on a node, the menu is similarly generated by node.getExtraMenuOptions. But instead of returning an options object, this one gets it passed in...

/* 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
            }
        })
    }   
}

Submenus

If you want a submenu, provide a callback which uses LiteGraph.ContextMenu to create it:

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,
        }
    )

Capture UI events

This works just like you'd expect - find the UI element in the DOM and add an eventListener. setup() is a good place to do this, since the page has fully loaded. For instance, to detect a click on the 'Queue' button:

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

Detect when a workflow starts

This is one of many api events:

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

Detect an interrupted workflow

A simple example of hijacking the 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 */
    }

Catch clicks on your node

node has a mouseDown method you can hijack. This time we're careful to pass on any return value.

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);
        }        
    }
}

Customizing the UI

Add a sidebar tab and panel

You can use app.extensionManager.registerTab to add a custom sidebar panel for your extension

• Icons list

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

app.extensionManager.registerSidebarTab({
    id: "my.extension.panel",
    icon: "pi pi-money-bill", // icon class, see link above
    title: "Panel Title",
    tooltip: "This a custom panel", // displayed on mouse over the tab
    type: "custom",
    render: async (panelDiv) => {
        // render custom content by adding your custom HTML to the panelDiv
        console.log("rendering custom panel", panelDiv)
        let h1 = document.createElement("h1")
        h1.innerHTML = "I'm a custom panel!"
        panelDiv.appendChild(h1)
    },
})