선택 도구 상자

선택 도구 상자 API를 사용하면 확장 프로그램에서 캔버스에서 노드를 선택할 때 표시되는 맞춤형 작업 버튼을 추가할 수 있습니다. 이는 선택된 항목(노드, 그룹 등)에 대한 컨텍스트에 맞는 명령에 빠르게 접근할 수 있도록 해줍니다.

기본 사용법

선택 도구 상자에 명령을 추가하려면 확장 프로그램이 다음을 수행해야 합니다:

표준 명령 인터페이스를 사용해 명령을 정의하세요.
getSelectionToolboxCommands 메서드를 구현하여 도구 상자에 어떤 명령이 표시될지 지정하세요.

참고: getSelectionToolboxCommands 메서드는 새로운 선택이 이루어질 때마다 선택 세트의 각 항목에 대해 호출됩니다.

app.registerExtension({
  name: "MyExtension",
  commands: [
    {
      id: "my-extension.duplicate-special",
      label: "특별 복제",
      icon: "pi pi-copy",
      function: (selectedItem) => {
        // 여기에 명령 로직을 작성하세요
        console.log("특별한 동작으로 선택된 노드 복제 중");
      }
    }
  ],
  getSelectionToolboxCommands: (selectedItem) => {
    // 도구 상자에 표시할 명령 ID 배열 반환
    return ["my-extension.duplicate-special"];
  }
});

명령 정의

선택 도구 상자의 명령은 표준 ComfyUI 명령 인터페이스를 사용합니다:

{
  id: string,          // 명령의 고유 식별자
  label: string,       // 버튼 툴팁에 표시될 텍스트
  icon?: string,       // 버튼 아이콘 클래스 (옵션)
  function: (selectedItem) => void  // 클릭 시 실행되는 함수
}

function은 선택된 항목을 매개변수로 받아 현재 선택에 대한 작업을 수행할 수 있습니다.

아이콘 옵션

선택 도구 상자 버튼은 다른 UI 요소와 동일한 아이콘 라이브러리를 지원합니다:

PrimeVue 아이콘: pi pi-[아이콘 이름] (예: pi pi-star)
Material Design 아이콘: mdi mdi-[아이콘 이름] (예: mdi mdi-content-copy)

동적 명령 표시 여부

getSelectionToolboxCommands 메서드는 선택이 변경될 때마다 호출되며, 선택된 내용에 따라 다른 명령을 표시할 수 있습니다:

app.registerExtension({
  name: "ContextualCommands",
  commands: [
    {
      id: "my-ext.align-nodes",
      label: "노드 정렬",
      icon: "pi pi-align-left",
      function: () => {
        // 여러 노드 정렬하기
      }
    },
    {
      id: "my-ext.configure-single",
      label: "구성",
      icon: "pi pi-cog",
      function: () => {
        // 단일 노드 구성하기
      }
    }
  ],
  getSelectionToolboxCommands: (selectedItem) => {
    const selectedItems = app.canvas.selectedItems;
    const itemCount = selectedItems ? selectedItems.size : 0;
    
    if (itemCount > 1) {
      // 여러 항목에 대한 정렬 명령 표시
      return ["my-ext.align-nodes"];
    } else if (itemCount === 1) {
      // 단일 항목에 대한 구성 명령 표시
      return ["my-ext.configure-single"];
    }
    
    return [];
  }
});

선택된 항목 다루기

앱의 캔버스 객체를 통해 선택된 항목에 대한 정보에 접근하세요. selectedItems 속성은 노드, 그룹 및 기타 캔버스 요소를 포함하는 Set입니다:

app.registerExtension({
  name: "SelectionInfo",
  commands: [
    {
      id: "my-ext.show-info",
      label: "선택 정보 표시",
      icon: "pi pi-info-circle",
      function: () => {
        const selectedItems = app.canvas.selectedItems;
        
        if (selectedItems && selectedItems.size > 0) {
          console.log(`선택된 항목 ${selectedItems.size}개`);
          
          // 선택된 항목 순회하기
          selectedItems.forEach(item => {
            if (item.type) {
              console.log(`항목: ${item.type} (ID: ${item.id})`);
            }
          });
        }
      }
    }
  ],
  getSelectionToolboxCommands: () => ["my-ext.show-info"]
});

전체 예제

다양한 선택 도구 상자 기능을 보여주는 간단한 예제입니다:

app.registerExtension({
  name: "SelectionTools",
  commands: [
    {
      id: "selection-tools.count",
      label: "선택 개수",
      icon: "pi pi-hashtag",
      function: () => {
        const count = app.canvas.selectedItems?.size || 0;
        app.extensionManager.toast.add({
          severity: "info",
          summary: "선택 개수",
          detail: `현재 ${count}개의 항목이 선택되었습니다.`,
          life: 3000
        });
      }
    },
    {
      id: "selection-tools.copy-ids",
      label: "ID 복사",
      icon: "pi pi-copy",
      function: () => {
        const items = Array.from(app.canvas.selectedItems || []);
        const ids = items.map(item => item.id).filter(id => id !== undefined);
        
        if (ids.length > 0) {
          navigator.clipboard.writeText(ids.join(', '));
          app.extensionManager.toast.add({
            severity: "success",
            summary: "복사됨",
            detail: `${ids.length}개의 ID가 클립보드에 복사되었습니다.`,
            life: 2000
          });
        }
      }
    },
    {
      id: "selection-tools.log-types",
      label: "타입 로그",
      icon: "pi pi-info-circle",
      function: () => {
        const items = Array.from(app.canvas.selectedItems || []);
        const typeCount = {};
        
        items.forEach(item => {
          const type = item.type || '알 수 없음';
          typeCount[type] = (typeCount[type] || 0) + 1;
        });
        
        console.log("선택된 타입:", typeCount);
      }
    }
  ],
  
  getSelectionToolboxCommands: (selectedItem) => {
    const selectedItems = app.canvas.selectedItems;
    const itemCount = selectedItems ? selectedItems.size : 0;
    
    if (itemCount === 0) return [];
    
    const commands = ["selection-tools.count", "selection-tools.log-types"];
    
    // 항목에 ID가 있으면만 복사 명령 표시
    const hasIds = Array.from(selectedItems).some(item => item.id !== undefined);
    if (hasIds) {
      commands.push("selection-tools.copy-ids");
    }
    
    return commands;
  }
});

참고사항

선택 도구 상자는 설정에서 활성화되어야 합니다: Comfy.Canvas.SelectionToolbox
명령은 getSelectionToolboxCommands에서 참조되기 전에 commands 배열에 정의되어야 합니다.
도구 상자는 선택이 변경될 때 자동으로 업데이트됩니다.
getSelectionToolboxCommands 메서드는 새로운 선택이 이루어질 때마다 선택 세트의 각 항목에 대해 호출됩니다.
app.canvas.selectedItems (Set)를 사용해 노드, 그룹 및 기타 캔버스 요소를 포함한 모든 선택된 항목에 접근하세요.
하위 호환성을 위해 app.canvas.selected_nodes도 여전히 존재하지만, 여기에는 노드만 포함됩니다.

​기본 사용법

​명령 정의

​아이콘 옵션

​동적 명령 표시 여부

​선택된 항목 다루기

​전체 예제

​참고사항