[Refactor] Split SelectionToolbox buttons to components (#3902)

src/components/graph/SelectionToolbox.vue

@@ -6,96 +6,41 @@
       content: 'p-0 flex flex-row'
     }"
   >
-    <ExecuteButton v-show="nodeSelected" />
-    <ColorPickerButton v-show="nodeSelected || groupSelected" />
-    <Button
-      v-show="nodeSelected"
-      v-tooltip.top="{
-        value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
-        showDelay: 1000
-      }"
-      severity="secondary"
-      text
-      data-testid="bypass-button"
-      @click="
-        () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
-      "
-    >
-      <template #icon>
-        <i-game-icons:detour />
-      </template>
-    </Button>
-    <Button
-      v-show="nodeSelected || groupSelected"
-      v-tooltip.top="{
-        value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
-        showDelay: 1000
-      }"
-      severity="secondary"
-      text
-      icon="pi pi-thumbtack"
-      @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
-    />
-    <Button
-      v-tooltip.top="{
-        value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
-        showDelay: 1000
-      }"
-      severity="danger"
-      text
-      icon="pi pi-trash"
-      @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
-    />
-    <Button
-      v-show="isRefreshable"
-      severity="info"
-      text
-      icon="pi pi-refresh"
-      @click="refreshSelected"
-    />
-    <Button
+    <ExecuteButton />
+    <ColorPickerButton />
+    <BypassButton />
+    <PinButton />
+    <DeleteButton />
+    <RefreshButton />
+    <ExtensionCommandButton
       v-for="command in extensionToolboxCommands"
       :key="command.id"
-      v-tooltip.top="{
-        value:
-          st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
-        showDelay: 1000
-      }"
-      severity="secondary"
-      text
-      :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
-      @click="() => commandStore.execute(command.id)"
+      :command="command"
     />
   </Panel>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Panel from 'primevue/panel'
 import { computed } from 'vue'
 
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
-import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
-import { st, t } from '@/i18n'
 import { useExtensionService } from '@/services/extensionService'
-import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+
+import BypassButton from './selectionToolbox/BypassButton.vue'
+import DeleteButton from './selectionToolbox/DeleteButton.vue'
+import ExtensionCommandButton from './selectionToolbox/ExtensionCommandButton.vue'
+import PinButton from './selectionToolbox/PinButton.vue'
+import RefreshButton from './selectionToolbox/RefreshButton.vue'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
-const { isRefreshable, refreshSelected } = useRefreshableSelection()
-const nodeSelected = computed(() =>
-  canvasStore.selectedItems.some(isLGraphNode)
-)
-const groupSelected = computed(() =>
-  canvasStore.selectedItems.some(isLGraphGroup)
-)
 
-const extensionToolboxCommands = computed<ComfyCommand[]>(() => {
+const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
   const commandIds = new Set<string>(
     canvasStore.selectedItems
       .map(
@@ -108,7 +53,7 @@ const extensionToolboxCommands = computed<ComfyCommand[]>(() => {
   )
   return Array.from(commandIds)
     .map((commandId) => commandStore.getCommand(commandId))
-    .filter((command) => command !== undefined)
+    .filter((command): command is ComfyCommandImpl => command !== undefined)
 })
 </script>
 

src/components/graph/selectionToolbox/BypassButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <Button
+    v-show="canvasStore.nodeSelected"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    data-testid="bypass-button"
+    @click="
+      () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+    "
+  >
+    <template #icon>
+      <i-game-icons:detour />
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+</script>

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="relative">
     <Button
+      v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
       severity="secondary"
       text
       @click="() => (showColorPicker = !showColorPicker)"

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
+      showDelay: 1000
+    }"
+    severity="danger"
+    text
+    icon="pi pi-trash"
+    @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+</script>

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
       value: isDisabled
         ? t('selectionToolbox.executeButton.disabledTooltip')

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value:
+        st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
+    @click="() => commandStore.execute(command.id)"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { st } from '@/i18n'
+import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+defineProps<{
+  command: ComfyCommand
+}>()
+
+const commandStore = useCommandStore()
+</script>

src/components/graph/selectionToolbox/PinButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <Button
+    v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-thumbtack"
+    @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+</script>

src/components/graph/selectionToolbox/RefreshButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <Button
+    v-show="isRefreshable"
+    severity="info"
+    text
+    icon="pi pi-refresh"
+    @click="refreshSelected"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
+
+const { isRefreshable, refreshSelected } = useRefreshableSelection()
+</script>

src/stores/graphStore.ts

@@ -1,7 +1,9 @@
 import type { LGraphCanvas, LGraphGroup, LGraphNode } from '@comfyorg/litegraph'
 import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import { defineStore } from 'pinia'
-import { type Raw, markRaw, ref, shallowRef } from 'vue'
+import { type Raw, computed, markRaw, ref, shallowRef } from 'vue'
+
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -27,6 +29,9 @@ export const useCanvasStore = defineStore('canvas', () => {
     selectedItems.value = items.map((item) => markRaw(item))
   }
 
+  const nodeSelected = computed(() => selectedItems.value.some(isLGraphNode))
+  const groupSelected = computed(() => selectedItems.value.some(isLGraphGroup))
+
   const getCanvas = () => {
     if (!canvas.value) throw new Error('getCanvas: canvas is null')
     return canvas.value
@@ -35,6 +40,8 @@ export const useCanvasStore = defineStore('canvas', () => {
   return {
     canvas,
     selectedItems,
+    nodeSelected,
+    groupSelected,
     updateSelectedItems,
     getCanvas
   }