[New Feature] Selection Toolbox (#2608)

Co-authored-by: github-actions <github-actions@github.com>

src/components/graph/GraphCanvas.vue

@@ -28,9 +28,8 @@
     class="w-full h-full touch-none"
   />
   <NodeSearchboxPopover />
-  <SelectionOverlay>
-    <!-- Placeholder for selection overlay testing. -->
-    <!-- <div class="w-full h-full bg-red-500"></div> -->
+  <SelectionOverlay v-if="selectionToolboxEnabled">
+    <SelectionToolbox />
   </SelectionOverlay>
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeBadge />
@@ -45,10 +44,12 @@ import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import NodeBadge from '@/components/graph/NodeBadge.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionOverlay from '@/components/graph/SelectionOverlay.vue'
+import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
@@ -87,6 +88,9 @@ const canvasMenuEnabled = computed(() =>
   settingStore.get('Comfy.Graph.CanvasMenu')
 )
 const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
+const selectionToolboxEnabled = computed(() =>
+  settingStore.get('Comfy.Canvas.SelectionToolbox')
+)
 
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
@@ -192,6 +196,11 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  comfyApp.canvas.onSelectionChange = useChainCallback(
+    comfyApp.canvas.onSelectionChange,
+    () => canvasStore.updateSelectedItems()
+  )
+
   // Load color palette
   colorPaletteStore.customPalettes = settingStore.get(
     'Comfy.CustomColorPalettes'

src/components/graph/SelectionOverlay.vue

@@ -2,6 +2,9 @@
 <template>
   <div
     class="selection-overlay-container pointer-events-none"
+    :class="{
+      'show-border': showBorder
+    }"
     :style="style"
     v-show="visible"
   >
@@ -22,9 +25,12 @@ const canvasStore = useCanvasStore()
 const { style, updatePosition } = useAbsolutePosition()
 
 const visible = ref(false)
+const showBorder = ref(false)
 
 const positionSelectionOverlay = (canvas: LGraphCanvas) => {
   const selectedItems = canvas.selectedItems
+  showBorder.value = selectedItems.size > 1
+
   if (!selectedItems.size) {
     visible.value = false
     return
@@ -82,4 +88,8 @@ watch(
 .selection-overlay-container > * {
   pointer-events: auto;
 }
+
+.show-border {
+  @apply border-dashed rounded-md border-2 border-[var(--border-color)];
+}
 </style>

src/components/graph/SelectionToolbox.vue

@@ -0,0 +1,37 @@
+<template>
+  <Panel
+    class="selection-toolbox absolute left-1/2"
+    :pt="{
+      header: 'hidden',
+      content: 'p-0 flex flex-row'
+    }"
+  >
+    <Button
+      severity="secondary"
+      text
+      icon="pi pi-thumbtack"
+      @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
+    />
+    <Button
+      severity="danger"
+      text
+      icon="pi pi-trash"
+      @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
+    />
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Panel from 'primevue/panel'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+const commandStore = useCommandStore()
+</script>
+
+<style scoped>
+.selection-toolbox {
+  transform: translateX(-50%) translateY(-120%);
+}
+</style>