Add bypass action to selection toolbox (#2616)

browser_tests/selectionToolbox.spec.ts

@@ -9,9 +9,7 @@ test.describe('Selection Toolbox', () => {
     await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
   })
 
-  test('shows/hides selection toolbox based on setting', async ({
-    comfyPage
-  }) => {
+  test('shows selection toolbox', async ({ comfyPage }) => {
     // By default, selection toolbox should be enabled
     expect(
       await comfyPage.page.locator('.selection-overlay-container').isVisible()
@@ -69,4 +67,28 @@ test.describe('Selection Toolbox', () => {
       comfyPage.page.locator('.selection-toolbox .pi-refresh')
     ).toBeVisible()
   })
+
+  test('displays bypass button in toolbox when nodes are selected', async ({
+    comfyPage
+  }) => {
+    // A group + a KSampler node
+    await comfyPage.loadWorkflow('single_group')
+
+    // Select group + node should show bypass button
+    await comfyPage.page.focus('canvas')
+    await comfyPage.page.keyboard.press('Control+A')
+    await expect(
+      comfyPage.page.locator(
+        '.selection-toolbox *[data-testid="bypass-button"]'
+      )
+    ).toBeVisible()
+
+    // Deselect node (Only group is selected) should hide bypass button
+    await comfyPage.selectNodes(['KSampler'])
+    await expect(
+      comfyPage.page.locator(
+        '.selection-toolbox *[data-testid="bypass-button"]'
+      )
+    ).not.toBeVisible()
+  })
 })

src/components/graph/SelectionToolbox.vue

@@ -6,6 +6,19 @@
       content: 'p-0 flex flex-row'
     }"
   >
+    <Button
+      v-if="nodeSelected"
+      severity="secondary"
+      text
+      @click="
+        () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+      "
+      data-testid="bypass-button"
+    >
+      <template #icon>
+        <i-game-icons:detour />
+      </template>
+    </Button>
     <Button
       severity="secondary"
       text
@@ -31,12 +44,19 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Panel from 'primevue/panel'
+import { computed } from 'vue'
 
 import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
 const { isRefreshable, refreshSelected } = useRefreshableSelection()
+const nodeSelected = computed(() =>
+  canvasStore.selectedItems.some(isLGraphNode)
+)
 </script>
 
 <style scoped>

src/composables/useCoreCommands.ts

@@ -366,6 +366,7 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.3.11',
       function: () => {
         toggleSelectedNodesMode(LGraphEventMode.NEVER)
+        app.canvas.setDirty(true, true)
       }
     },
     {
@@ -375,6 +376,7 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.3.11',
       function: () => {
         toggleSelectedNodesMode(LGraphEventMode.BYPASS)
+        app.canvas.setDirty(true, true)
       }
     },
     {
@@ -386,6 +388,7 @@ export function useCoreCommands(): ComfyCommand[] {
         getSelectedNodes().forEach((node) => {
           node.pin(!node.pinned)
         })
+        app.canvas.setDirty(true, true)
       }
     },
     {
@@ -411,6 +414,7 @@ export function useCoreCommands(): ComfyCommand[] {
         getSelectedNodes().forEach((node) => {
           node.collapse()
         })
+        app.canvas.setDirty(true, true)
       }
     },
     {

src/composables/useRefreshableSelection.ts

@@ -4,6 +4,7 @@ import { computed, ref, watchEffect } from 'vue'
 
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
 
 interface RefreshableItem {
   refresh: () => Promise<void> | void
@@ -11,11 +12,6 @@ interface RefreshableItem {
 
 type RefreshableWidget = IWidget & RefreshableItem
 
-const isLGraphNode = (item: unknown): item is LGraphNode => {
-  const name = item?.constructor?.name
-  return name === 'ComfyNode' || name === 'LGraphNode'
-}
-
 const isRefreshableWidget = (widget: IWidget): widget is RefreshableWidget =>
   'refresh' in widget && typeof widget.refresh === 'function'
 

src/utils/litegraphUtil.ts

@@ -17,3 +17,8 @@ export function addToComboValues(widget: IComboWidget, value: string) {
     widget.options.values.push(value)
   }
 }
+
+export const isLGraphNode = (item: unknown): item is LGraphNode => {
+  const name = item?.constructor?.name
+  return name === 'ComfyNode' || name === 'LGraphNode'
+}