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

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>