탑바 메뉴

ComfyUI 탑바 메뉴에 커스텀 명령을 추가합니다. 기존 메뉴에 추가, 서브메뉴 생성, 한 명령을 여러 위치에 배치하는 방법을 포함합니다.

탑바 메뉴 API를 사용하면 확장 프로그램이 ComfyUI의 상단 메뉴 바에 맞춤형 메뉴 항목을 추가할 수 있습니다. 이는 고급 기능이나 덜 자주 사용하는 명령에 대한 접근성을 제공하는 데 유용합니다.

​

기본 사용법

app.registerExtension({
  name: "MyExtension",
  // 명령어 정의
  commands: [
    { 
      id: "myCommand", 
      label: "My Command", 
      function: () => { alert("명령어 실행됨!"); } 
    }
  ],
  // 메뉴에 명령어 추가
  menuCommands: [
    { 
      path: ["Extensions", "My Extension"], 
      commands: ["myCommand"] 
    }
  ]
});

명령어 정의는 명령어 및 키바인딩 API와 동일한 패턴을 따릅니다. 명령어 정의에 대한 자세한 정보는 해당 페이지를 참조하세요.

​

명령어 구성

각 명령어에는 id, label, 그리고 function이 필요합니다:

{
  id: string,              // 명령어의 고유 식별자
  label: string,           // 명령어의 표시 이름
  function: () => void     // 명령어가 트리거될 때 실행할 함수
}

​

메뉴 구성

menuCommands 배열은 메뉴 구조에서 명령어를 어디에 배치할지 정의합니다:

{
  path: string[],          // 메뉴 계층 구조를 나타내는 배열
  commands: string[]       // 이 위치에 추가할 명령어 ID 배열
}

path 배열은 메뉴 계층 구조를 지정합니다. 예를 들어, ["File", "Export"]는 “File” 메뉴 아래의 “Export” 하위 메뉴에 명령어를 추가하게 됩니다.

​

메뉴 예제

​

기존 메뉴에 추가하기

app.registerExtension({
  name: "MenuExamples",
  commands: [
    { 
      id: "saveAsImage", 
      label: "이미지로 저장", 
      function: () => { 
        // 캔버스를 이미지로 저장하는 코드
      } 
    },
    { 
      id: "exportWorkflow", 
      label: "워크플로우 내보내기", 
      function: () => { 
        // 워크플로우를 내보내는 코드
      } 
    }
  ],
  menuCommands: [
    // 파일 메뉴에 추가
    { 
      path: ["File"], 
      commands: ["saveAsImage", "exportWorkflow"] 
    }
  ]
});

​

하위 메뉴 구조 만들기

app.registerExtension({
  name: "SubmenuExample",
  commands: [
    { 
      id: "option1", 
      label: "옵션 1", 
      function: () => { console.log("옵션 1"); } 
    },
    { 
      id: "option2", 
      label: "옵션 2", 
      function: () => { console.log("옵션 2"); } 
    },
    { 
      id: "suboption1", 
      label: "하위 옵션 1", 
      function: () => { console.log("하위 옵션 1"); } 
    }
  ],
  menuCommands: [
    // 중첩된 메뉴 구조 생성
    { 
      path: ["Extensions", "My Tools"], 
      commands: ["option1", "option2"] 
    },
    { 
      path: ["Extensions", "My Tools", "Advanced"], 
      commands: ["suboption1"] 
    }
  ]
});

​

여러 메뉴 위치에 추가하기

동일한 명령어를 여러 메뉴 위치에 추가할 수 있습니다:

app.registerExtension({
  name: "MultiLocationExample",
  commands: [
    { 
      id: "helpCommand", 
      label: "도움말 받기", 
      function: () => { window.open("https://docs.example.com", "_blank"); } 
    }
  ],
  menuCommands: [
    // 도움말 메뉴에 추가
    { 
      path: ["Help"], 
      commands: ["helpCommand"] 
    },
    // 확장 프로그램 메뉴에도 추가
    { 
      path: ["Extensions"], 
      commands: ["helpCommand"] 
    }
  ]
});

명령어는 설정과 같은 다른 ComfyUI API와 함께 작동할 수 있습니다. 설정 API에 대한 자세한 내용은 설정 API 문서를 참조하세요.