> ## 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.

# 주석이 달린 예제

예제 코드 조각의 점점 커지는 모음...

## 마우스 오른쪽 버튼 메뉴

### 배경 메뉴

메인 배경 메뉴(캔버스에서 마우스 오른쪽 버튼 클릭)는 `LGraphCanvas.getCanvasMenuOptions` 호출에 의해 생성됩니다. 이를 편집하는 표준 방법은 확장 프로그램에서 `getCanvasMenuItems` 메서드를 구현하는 것입니다:

```javascript theme={null}
app.registerExtension({
  name: "MyExtension",
  getCanvasMenuItems(canvas) {
    const items = []
    items.push(null) // 구분선 삽입
    items.push({
      content: "메뉴의 텍스트",
      callback: async () => {
        // 원하는 작업 수행
      }
    })
    return items
  }
});
```

### 노드 메뉴

노드를 마우스 오른쪽 버튼으로 클릭하면, 이 메뉴 역시 `node.getExtraMenuOptions`에 의해 생성됩니다. 표준 방법은 확장 프로그램에서 `getNodeMenuItems` 메서드를 구현하는 것입니다:

```javascript theme={null}
app.registerExtension({
  name: "MyExtension",
  getNodeMenuItems(node) {
    const items = []

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

    return items
  }
});
```

### 하위 메뉴

하위 메뉴가 필요하다면 `submenu` 속성을 사용하고 `options` 배열을 제공하세요:

```javascript theme={null}
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()`에서 이 작업을 하는 것이 좋습니다. 예를 들어 '큐' 버튼 클릭을 감지하려면:

```Javascript theme={null}
function queue_button_pressed() { console.log("큐 버튼이 눌렸어요!") }
document.getElementById("queue-button").addEventListener("click", queue_button_pressed);
```

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

이는 여러 `api` 이벤트 중 하나입니다:

```javascript theme={null}
import { api } from "../../scripts/api.js";
/* setup()에서 */
    function on_execution_start() { 
        /* 원하는 작업 수행 */
    }
    api.addEventListener("execution_start", on_execution_start);
```

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

<Note>
  **사용 중단됨:** 아래에 보여주는 API 하이재킹 패턴은 사용 중단되었으며 가까운 미래에 언제든 변경될 수 있습니다. 가능한 경우 공식 [확장 프로그램 훅](/ko/custom-nodes/js/javascript_hooks)과 API 이벤트 리스너를 사용하세요.
</Note>

API를 하이재킹하는 간단한 예제:

```Javascript theme={null}
import { api } from "../../scripts/api.js";
/* setup()에서 */
    const original_api_interrupt = api.interrupt;
    api.interrupt = function () {
        /* 원래 메서드가 호출되기 전에 무언가 수행 */
        original_api_interrupt.apply(this, arguments);
        /* 또는 이후에 */
    }
```

## 노드 클릭 캐치하기

<Note>
  **사용 중단됨:** 아래에 보여주는 노드 메서드 하이재킹 패턴은 사용 중단되었으며 가까운 미래에 언제든 변경될 수 있습니다. 가능한 경우 공식 [확장 프로그램 훅](/ko/custom-nodes/js/javascript_hooks)을 사용하세요.
</Note>

`node`에는 하이재킹할 수 있는 mouseDown 메서드가 있습니다. 이번에는 반환값을 꼭 전달하도록 주의하세요.

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