注釈付きの例

サンプルコードの断片コレクションは増え続けています……

​

右クリックメニュー

​

背景メニュー

メインの背景メニュー（キャンバス上で右クリック）は、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
  }
});

​

サブメニュー

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

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」ボタンのクリックを検出するには：

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

​

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

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

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);
        }        
    }
}