> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-recommend-assets-api.mintlify.site/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
  }
});
```

### サブメニュー

サブメニューを作成したい場合は、`options` 配列を持つ `submenu` プロパティを使用します：

```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 要素を見つけて eventListener を追加するだけです。ページが完全に読み込まれているため、これを行うには `setup()` が適しています。例えば、「Queue」ボタンのクリックを検出するには：

```Javascript theme={null}
function queue_button_pressed() { console.log("Queue ボタンが押されました！") }
document.getElementById("queue-button").addEventListener("click", queue_button_pressed);
```

## ワークフローの開始を検出

これは多くの `api` イベントの 1 つです：

```javascript theme={null}
import { api } from "../../scripts/api.js";
/* setup() 内 */
    function on_execution_start() { 
        /* 任意の処理を実行 */
    }
    api.addEventListener("execution_start", on_execution_start);
```

## ワークフローの中断を検出

<Note>
  **非推奨：** 以下に示す API ハイジャックパターンは非推奨であり、近い将来いつでも変更される可能性があります。可能な場合は、公式の [拡張フック](/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>
  **非推奨：** 以下に示すノードメソッドハイジャックパターンは非推奨であり、近い将来いつでも変更される可能性があります。可能な場合は、公式の [拡張フック](/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);
        }        
    }
}
```