[Extension] Selection toolbox API (#2672)

src/components/graph/SelectionToolbox.vue

@@ -40,6 +40,14 @@
       icon="pi pi-refresh"
       @click="refreshSelected"
     />
+    <Button
+      v-for="command in extensionToolboxCommands"
+      :key="command.id"
+      severity="secondary"
+      text
+      :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
+      @click="() => commandStore.execute(command.id)"
+    />
   </Panel>
 </template>
 
@@ -50,12 +58,14 @@ import { computed } from 'vue'
 
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
 import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
-import { useCommandStore } from '@/stores/commandStore'
+import { useExtensionService } from '@/services/extensionService'
+import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
+const extensionService = useExtensionService()
 const { isRefreshable, refreshSelected } = useRefreshableSelection()
 const nodeSelected = computed(() =>
   canvasStore.selectedItems.some(isLGraphNode)
@@ -63,6 +73,22 @@ const nodeSelected = computed(() =>
 const groupSelected = computed(() =>
   canvasStore.selectedItems.some(isLGraphGroup)
 )
+
+const extensionToolboxCommands = computed<ComfyCommand[]>(() => {
+  const commandIds = new Set<string>(
+    canvasStore.selectedItems
+      .map(
+        (item) =>
+          extensionService
+            .invokeExtensions('getSelectionToolboxCommands', item)
+            .flat() as string[]
+      )
+      .flat()
+  )
+  return Array.from(commandIds)
+    .map((commandId) => commandStore.getCommand(commandId))
+    .filter((command) => command !== undefined)
+})
 </script>
 
 <style scoped>

src/types/comfy.ts

@@ -1,4 +1,5 @@
 import type { LGraphNode } from '@comfyorg/litegraph'
+import { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 
 import type { ComfyApp } from '@/scripts/app'
 import type { ComfyWidgetConstructor } from '@/scripts/widgets'
@@ -97,6 +98,14 @@ export interface ComfyExtension {
    * @returns An array of {[widget name]: widget data}
    */
   getCustomWidgets?(app: ComfyApp): Promise<Widgets> | Widgets
+
+  /**
+   * Allows the extension to add additional commands to the selection toolbox
+   * @param selectedItem The selected item on the canvas
+   * @returns An array of command ids to add to the selection toolbox
+   */
+  getSelectionToolboxCommands?(selectedItem: Positionable): string[]
+
   /**
    * Allows the extension to add additional handling to the node before it is registered with **LGraph**
    * @param nodeType The node class (not an instance)