API del menú de la barra superior de ComfyUI

La API Topbar Menu permite que las extensiones agreguen elementos de menú personalizados a la barra de menú superior de ComfyUI. Resulta útil para dar acceso a funciones avanzadas o a comandos que se usan con menos frecuencia.

Uso básico

app.registerExtension({
  name: "MyExtension",
  // Define los comandos
  commands: [
    { 
      id: "myCommand", 
      label: "My Command", 
      function: () => { alert("Command executed!"); } 
    }
  ],
  // Agrega comandos al menú
  menuCommands: [
    { 
      path: ["Extensions", "My Extension"], 
      commands: ["myCommand"] 
    }
  ]
});

Las definiciones de comandos siguen el mismo patrón que en la API de comandos y atajos de teclado. Consulta esa página para obtener información más detallada sobre cómo definir comandos.

Configuración de comandos

Cada comando requiere un id, un label y una function:

{
  id: string,              // Unique identifier for the command
  label: string,           // Display name for the command
  function: () => void     // Function to execute when command is triggered
}

Configuración del menú

El arreglo menuCommands define dónde colocar los comandos dentro de la estructura del menú:

{
  path: string[],          // Arreglo que representa la jerarquía del menú
  commands: string[]       // Arreglo de IDs de comandos para agregar en esta ubicación
}

El arreglo path especifica la jerarquía del menú. Por ejemplo, ["File", "Export"] agregaría comandos al submenú “Export” dentro del menú “File”.

Ejemplos de menú

Agregar a menús existentes

app.registerExtension({
  name: "MenuExamples",
  commands: [
    { 
      id: "saveAsImage", 
      label: "Save as Image", 
      function: () => { 
        // Código para guardar el lienzo como imagen
      } 
    },
    { 
      id: "exportWorkflow", 
      label: "Export Workflow", 
      function: () => { 
        // Código para exportar el flujo de trabajo
      } 
    }
  ],
  menuCommands: [
    // Agregar al menú File
    { 
      path: ["File"], 
      commands: ["saveAsImage", "exportWorkflow"] 
    }
  ]
});

Crear una estructura de submenús

app.registerExtension({
  name: "SubmenuExample",
  commands: [
    { 
      id: "option1", 
      label: "Option 1", 
      function: () => { console.log("Option 1"); } 
    },
    { 
      id: "option2", 
      label: "Option 2", 
      function: () => { console.log("Option 2"); } 
    },
    { 
      id: "suboption1", 
      label: "Sub-option 1", 
      function: () => { console.log("Sub-option 1"); } 
    }
  ],
  menuCommands: [
    // Crear una estructura de menú anidada
    { 
      path: ["Extensions", "My Tools"], 
      commands: ["option1", "option2"] 
    },
    { 
      path: ["Extensions", "My Tools", "Advanced"], 
      commands: ["suboption1"] 
    }
  ]
});

Varias ubicaciones de menú

Puedes agregar el mismo comando en varias ubicaciones del menú:

app.registerExtension({
  name: "MultiLocationExample",
  commands: [
    { 
      id: "helpCommand", 
      label: "Get Help", 
      function: () => { window.open("https://docs.example.com", "_blank"); } 
    }
  ],
  menuCommands: [
    // Agregar al menú Help
    { 
      path: ["Help"], 
      commands: ["helpCommand"] 
    },
    // También agregar al menú Extensions
    { 
      path: ["Extensions"], 
      commands: ["helpCommand"] 
    }
  ]
});

Los comandos pueden trabajar con otras API de ComfyUI, como las configuraciones. Para obtener más información sobre la API de configuraciones, consulta la documentación de la API de Configuraciones.

Desarrollar con Comfy

Desplegar ComfyUI

Comfy CLI

Specifications

Nodos personalizados