> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Ejemplos anotados

> Explora ejemplos de JavaScript de Comfy para crear Nodos personalizados y Extensiones de UI. Fragmentos de código prácticos para interfaces web robustas.

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

## Menús de clic derecho

### Menú del fondo

El menú principal del fondo (clic derecho sobre 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:

```javascript theme={null}
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ú del 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:

```javascript theme={null}
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`:

```javascript theme={null}
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 la UI

Esto funciona tal como esperas: busca el elemento de la UI en el DOM y
añade 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 'Queue':

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

## Detectar cuándo empieza un flujo de trabajo

Este es uno de los muchos eventos de `api`:

```javascript theme={null}
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

> [!NOTE]
>
> **Obsoleto:** El patrón de interceptación de la API que se muestra abajo está obsoleto y puede cambiar en cualquier momento en un futuro próximo. Usa los [ganchos de extensión](https://docs.comfy.org/es/custom-nodes/js/javascript_hooks.md) oficiales y los escuchadores de eventos de la API cuando estén disponibles.

Un ejemplo sencillo de interceptación de la api:

```Javascript theme={null}
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

> [!NOTE]
>
> **Obsoleto:** El patrón de interceptación de métodos de nodo que se muestra abajo está obsoleto y puede cambiar en cualquier momento en un futuro próximo. Usa los [ganchos de extensión](https://docs.comfy.org/es/custom-nodes/js/javascript_hooks.md) oficiales cuando estén disponibles.

`node` tiene un método mouseDown que puedes interceptar.
Esta vez tenemos cuidado de propagar cualquier valor de retorno.

```javascript theme={null}
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);
        }        
    }
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.