Ejemplos de extensiones JavaScript de ComfyUI

Una colección cada vez mayor de fragmentos de código de ejemplo…

Menús de clic derecho

Menú de fondo

El menú principal de fondo (clic derecho en el lienzo) se genera con una llamada a LGraphCanvas.getCanvasMenuOptions. La forma estándar de editarlo es implementar el método getCanvasMenuItems en tu extensión:

app.registerExtension({
  name: "MyExtension",
  getCanvasMenuItems(canvas) {
    const items = []
    items.push(null) // inserts a divider
    items.push({
      content: "The text for the menu",
      callback: async () => {
        // do whatever
      }
    })
    return items
  }
});

Menú de nodo

Cuando haces clic derecho sobre un nodo, el menú se genera de forma similar mediante node.getExtraMenuOptions. La forma estándar es implementar el método getNodeMenuItems en tu extensión:

app.registerExtension({
  name: "MyExtension",
  getNodeMenuItems(node) {
    const items = []

    // You can filter by node type if needed
    if (node.comfyClass === "MyNodeClass") {
      items.push({
        content: "Do something fun",
        callback: async () => {
          // fun thing
        }
      })
    }

    return items
  }
});

Submenús

Si quieres un submenú, usa la propiedad submenu con un arreglo options:

app.registerExtension({
  name: "MyExtension",
  getCanvasMenuItems(canvas) {
    const items = []
    items.push({
      content: "Menu with options",
      submenu: {
        options: [
          {
            content: "option 1",
            callback: (v) => {
              // do something with v
            }
          },
          {
            content: "option 2",
            callback: (v) => {
              // do something with v
            }
          },
          {
            content: "option 3",
            callback: (v) => {
              // do something with v
            }
          }
        ]
      }
    })
    return items
  }
});

Capturar eventos de UI

Esto funciona tal como esperas: busca el elemento de la UI en el DOM y agrega un eventListener. setup() es un buen lugar para hacerlo, ya que la página se ha cargado por completo. Por ejemplo, para detectar un clic en el Botón de Cola:

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

Detectar cuándo inicia un flujo de trabajo

Este es uno de los muchos eventos de api:

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

Detectar un flujo de trabajo interrumpido

Obsoleto: El patrón de interceptación de la API que se muestra a continuación está obsoleto y está sujeto a cambios en cualquier momento en el futuro cercano. Usa los ganchos de extensión oficiales y los escuchadores de eventos de la API cuando estén disponibles.

Un ejemplo simple de interceptación de la 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 */
    }

Capturar clics en tu nodo

Obsoleto: El patrón de secuestro de métodos de nodo que se muestra a continuación está obsoleto y puede cambiar en cualquier momento en el futuro cercano. Usa los ganchos de extensión oficiales cuando estén disponibles.

node tiene un método mouseDown que puedes secuestrar. Esta vez ten cuidado de propagar cualquier valor de retorno.

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

Desarrollar con Comfy

Desplegar ComfyUI

Comfy CLI

Specifications

Nodos personalizados

Ejemplos de extensiones JavaScript de ComfyUI

Menús de clic derecho

Menú de fondo

Menú de nodo

Submenús

Capturar eventos de UI

Detectar cuándo inicia un flujo de trabajo

Detectar un flujo de trabajo interrumpido

Capturar clics en tu nodo