메인 콘텐츠로 건너뛰기
예제 코드 조각의 점점 커지는 모음…

​
마우스 오른쪽 버튼 메뉴

​
배경 메뉴

메인 배경 메뉴(캔버스에서 마우스 오른쪽 버튼 클릭)는 LGraphCanvas.getCanvasMenuOptions 호출에 의해 생성됩니다. 이를 편집하는 표준 방법은 확장 프로그램에서 getCanvasMenuItems 메서드를 구현하는 것입니다: 
app.registerExtension({
  name: "MyExtension",
  getCanvasMenuItems(canvas) {
    const items = []
    items.push(null) // 구분선 삽입
    items.push({
      content: "메뉴의 텍스트",
      callback: async () => {
        // 원하는 작업 수행
      }
    })
    return items
  }
});

​
노드 메뉴

노드를 마우스 오른쪽 버튼으로 클릭하면, 이 메뉴 역시 node.getExtraMenuOptions에 의해 생성됩니다. 표준 방법은 확장 프로그램에서 getNodeMenuItems 메서드를 구현하는 것입니다: 
app.registerExtension({
  name: "MyExtension",
  getNodeMenuItems(node) {
    const items = []

    // 필요하다면 노드 유형별로 필터링 가능
    if (node.comfyClass === "MyNodeClass") {
      items.push({
        content: "재미있는 일을 하기",
        callback: async () => {
          // 재미있는 일 수행
        }
      })
    }

    return items
  }
});

​
하위 메뉴

하위 메뉴가 필요하다면 submenu 속성을 사용하고 options 배열을 제공하세요: 
app.registerExtension({
  name: "MyExtension",
  getCanvasMenuItems(canvas) {
    const items = []
    items.push({
      content: "옵션 있는 메뉴",
      submenu: {
        options: [
          {
            content: "옵션 1",
            callback: (v) => {
              // v를 가지고 무언가 수행
            }
          },
          {
            content: "옵션 2",
            callback: (v) => {
              // v를 가지고 무언가 수행
            }
          },
          {
            content: "옵션 3",
            callback: (v) => {
              // v를 가지고 무언가 수행
            }
          }
        ]
      }
    })
    return items
  }
});

​
UI 이벤트 캡처하기

이는 여러분이 기대하는 대로 작동합니다 - DOM에서 UI 요소를 찾아 이벤트 리스너를 추가하세요. 페이지가 완전히 로드된 후 setup()에서 이 작업을 하는 것이 좋습니다. 예를 들어 ‘큐’ 버튼 클릭을 감지하려면: 
function queue_button_pressed() { console.log("큐 버튼이 눌렸어요!") }
document.getElementById("queue-button").addEventListener("click", queue_button_pressed);

​
워크플로 시작 시 감지하기

이는 여러 api 이벤트 중 하나입니다: 
import { api } from "../../scripts/api.js";
/* setup()에서 */
    function on_execution_start() { 
        /* 원하는 작업 수행 */
    }
    api.addEventListener("execution_start", on_execution_start);

​
중단된 워크플로 감지하기

사용 중단됨: 아래에 보여주는 API 하이재킹 패턴은 사용 중단되었으며 가까운 미래에 언제든 변경될 수 있습니다. 가능한 경우 공식 확장 프로그램 훅과 API 이벤트 리스너를 사용하세요.
API를 하이재킹하는 간단한 예제: 
import { api } from "../../scripts/api.js";
/* setup()에서 */
    const original_api_interrupt = api.interrupt;
    api.interrupt = function () {
        /* 원래 메서드가 호출되기 전에 무언가 수행 */
        original_api_interrupt.apply(this, arguments);
        /* 또는 이후에 */
    }

​
노드 클릭 캐치하기

사용 중단됨: 아래에 보여주는 노드 메서드 하이재킹 패턴은 사용 중단되었으며 가까운 미래에 언제든 변경될 수 있습니다. 가능한 경우 공식 확장 프로그램 훅을 사용하세요.
node에는 하이재킹할 수 있는 mouseDown 메서드가 있습니다. 이번에는 반환값을 꼭 전달하도록 주의하세요. 
async nodeCreated(node) {
    if (node?.comfyClass === "My Node Name") {
        const original_onMouseDown = node.onMouseDown;
        node.onMouseDown = function( e, pos, canvas ) {
            alert("아야!");
            return original_onMouseDown?.apply(this, arguments);
        }        
    }
}