[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>