Add bypass action to selection toolbox (#2616)

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'
+}