[fix] Toggle bypass/mute of subgraph nodes applies mode to all children recursively (#4636)

src/composables/canvas/useSelectedLiteGraphItems.ts

@@ -1,6 +1,16 @@
-import { Positionable, Reroute } from '@comfyorg/litegraph'
+import {
+  LGraphEventMode,
+  LGraphNode,
+  Positionable,
+  Reroute
+} from '@comfyorg/litegraph'
 
+import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
+import {
+  collectFromNodes,
+  traverseNodesDepthFirst
+} from '@/utils/graphTraversalUtil'
 
 /**
  * Composable for handling selected LiteGraph items filtering and operations.
@@ -61,11 +71,92 @@ export function useSelectedLiteGraphItems() {
     return getSelectableItems().size > 1
   }
 
+  /**
+   * Get only the selected nodes (LGraphNode instances) from the canvas.
+   * This filters out other types of selected items like groups or reroutes.
+   * If a selected node is a subgraph, this also includes all nodes within it.
+   * @returns Array of selected LGraphNode instances and their descendants.
+   */
+  const getSelectedNodes = (): LGraphNode[] => {
+    const selectedNodes = app.canvas.selected_nodes
+    if (!selectedNodes) return []
+
+    // Convert selected_nodes object to array, preserving order
+    const nodeArray: LGraphNode[] = []
+    for (const i in selectedNodes) {
+      nodeArray.push(selectedNodes[i])
+    }
+
+    // Check if any selected nodes are subgraphs
+    const hasSubgraphs = nodeArray.some(
+      (node) => node.isSubgraphNode?.() && node.subgraph
+    )
+
+    // If no subgraphs, just return the array directly to preserve order
+    if (!hasSubgraphs) {
+      return nodeArray
+    }
+
+    // Use collectFromNodes to get all nodes including those in subgraphs
+    return collectFromNodes(nodeArray)
+  }
+
+  /**
+   * Toggle the execution mode of all selected nodes with unified subgraph behavior.
+   *
+   * Top-level behavior (selected nodes): Standard toggle logic
+   * - If the selected node is already in the specified mode → set to ALWAYS
+   * - Otherwise → set to the specified mode
+   *
+   * Subgraph behavior (children of selected subgraph nodes): Unified state application
+   * - All children inherit the same mode that their parent subgraph node was set to
+   * - This creates predictable behavior: if you toggle a subgraph to "mute",
+   *   ALL nodes inside become muted, regardless of their previous individual states
+   *
+   * @param mode - The LGraphEventMode to toggle to (e.g., NEVER for mute, BYPASS for bypass)
+   */
+  const toggleSelectedNodesMode = (mode: LGraphEventMode): void => {
+    const selectedNodes = app.canvas.selected_nodes
+    if (!selectedNodes) return
+
+    // Convert selected_nodes object to array
+    const selectedNodeArray: LGraphNode[] = []
+    for (const i in selectedNodes) {
+      selectedNodeArray.push(selectedNodes[i])
+    }
+
+    // Process each selected node independently to determine its target state and apply to children
+    selectedNodeArray.forEach((selectedNode) => {
+      // Apply standard toggle logic to the selected node itself
+      const newModeForSelectedNode =
+        selectedNode.mode === mode ? LGraphEventMode.ALWAYS : mode
+
+      selectedNode.mode = newModeForSelectedNode
+
+      // If this selected node is a subgraph, apply the same mode uniformly to all its children
+      // This ensures predictable behavior: all children get the same state as their parent
+      if (selectedNode.isSubgraphNode?.() && selectedNode.subgraph) {
+        traverseNodesDepthFirst([selectedNode], {
+          visitor: (node) => {
+            // Skip the parent node since we already handled it above
+            if (node === selectedNode) return undefined
+
+            // Apply the parent's new mode to all children uniformly
+            node.mode = newModeForSelectedNode
+            return undefined
+          }
+        })
+      }
+    })
+  }
+
   return {
     isIgnoredItem,
     filterSelectableItems,
     getSelectableItems,
     hasSelectableItems,
-    hasMultipleSelectableItems
+    hasMultipleSelectableItems,
+    getSelectedNodes,
+    toggleSelectedNodesMode
   }
 }

src/composables/useCoreCommands.ts

@@ -7,6 +7,7 @@ import {
 import { Point } from '@comfyorg/litegraph'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
@@ -46,30 +47,10 @@ export function useCoreCommands(): ComfyCommand[] {
   const toastStore = useToastStore()
   const canvasStore = useCanvasStore()
   const executionStore = useExecutionStore()
+  const { getSelectedNodes, toggleSelectedNodesMode } =
+    useSelectedLiteGraphItems()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
-  const getSelectedNodes = (): LGraphNode[] => {
-    const selectedNodes = app.canvas.selected_nodes
-    const result: LGraphNode[] = []
-    if (selectedNodes) {
-      for (const i in selectedNodes) {
-        const node = selectedNodes[i]
-        result.push(node)
-      }
-    }
-    return result
-  }
-
-  const toggleSelectedNodesMode = (mode: LGraphEventMode) => {
-    getSelectedNodes().forEach((node) => {
-      if (node.mode === mode) {
-        node.mode = LGraphEventMode.ALWAYS
-      } else {
-        node.mode = mode
-      }
-    })
-  }
-
   const moveSelectedNodes = (
     positionUpdater: (pos: Point, gridSize: number) => Point
   ) => {

src/utils/graphTraversalUtil.ts

@@ -388,20 +388,34 @@ export function getAllNonIoNodesInSubgraph(subgraph: Subgraph): LGraphNode[] {
   return subgraph.nodes.filter((node) => !isSubgraphIoNode(node))
 }
 
+/**
+ * Options for traverseNodesDepthFirst function
+ */
+export interface TraverseNodesOptions<T> {
+  /** Function called for each node during traversal */
+  visitor?: (node: LGraphNode, context: T) => T
+  /** Initial context value */
+  initialContext?: T
+  /** Whether to traverse into subgraph nodes (default: true) */
+  expandSubgraphs?: boolean
+}
+
 /**
  * Performs depth-first traversal of nodes and their subgraphs.
  * Generic visitor pattern that can be used for various node processing tasks.
  *
  * @param nodes - Starting nodes for traversal
- * @param visitor - Function called for each node with its context
- * @param expandSubgraphs - Whether to traverse into subgraph nodes (default: true)
+ * @param options - Optional traversal configuration
  */
-export function traverseNodesDepthFirst<T>(
+export function traverseNodesDepthFirst<T = void>(
   nodes: LGraphNode[],
-  visitor: (node: LGraphNode, context: T) => T,
-  initialContext: T,
-  expandSubgraphs: boolean = true
+  options?: TraverseNodesOptions<T>
 ): void {
+  const {
+    visitor = () => undefined as T,
+    initialContext = undefined as T,
+    expandSubgraphs = true
+  } = options || {}
   type StackItem = { node: LGraphNode; context: T }
   const stack: StackItem[] = []
 
@@ -429,28 +443,42 @@ export function traverseNodesDepthFirst<T>(
   }
 }
 
+/**
+ * Options for collectFromNodes function
+ */
+export interface CollectFromNodesOptions<T, C> {
+  /** Function that returns data to collect for each node */
+  collector?: (node: LGraphNode, context: C) => T | null
+  /** Function that builds context for child nodes */
+  contextBuilder?: (node: LGraphNode, parentContext: C) => C
+  /** Initial context value */
+  initialContext?: C
+  /** Whether to traverse into subgraph nodes (default: true) */
+  expandSubgraphs?: boolean
+}
+
 /**
  * Collects nodes with custom data during depth-first traversal.
  * Generic collector that can gather any type of data per node.
  *
  * @param nodes - Starting nodes for traversal
- * @param collector - Function that returns data to collect for each node
- * @param contextBuilder - Function that builds context for child nodes
- * @param expandSubgraphs - Whether to traverse into subgraph nodes
+ * @param options - Optional collection configuration
  * @returns Array of collected data
  */
-export function collectFromNodes<T, C>(
+export function collectFromNodes<T = LGraphNode, C = void>(
   nodes: LGraphNode[],
-  collector: (node: LGraphNode, context: C) => T | null,
-  contextBuilder: (node: LGraphNode, parentContext: C) => C,
-  initialContext: C,
-  expandSubgraphs: boolean = true
+  options?: CollectFromNodesOptions<T, C>
 ): T[] {
+  const {
+    collector = (node: LGraphNode) => node as unknown as T,
+    contextBuilder = () => undefined as C,
+    initialContext = undefined as C,
+    expandSubgraphs = true
+  } = options || {}
   const results: T[] = []
 
-  traverseNodesDepthFirst(
-    nodes,
-    (node, context) => {
+  traverseNodesDepthFirst(nodes, {
+    visitor: (node, context) => {
       const data = collector(node, context)
       if (data !== null) {
         results.push(data)
@@ -459,7 +487,7 @@ export function collectFromNodes<T, C>(
     },
     initialContext,
     expandSubgraphs
-  )
+  })
 
   return results
 }
@@ -474,19 +502,16 @@ export function collectFromNodes<T, C>(
 export function getExecutionIdsForSelectedNodes(
   selectedNodes: LGraphNode[]
 ): NodeExecutionId[] {
-  return collectFromNodes(
-    selectedNodes,
-    // Collector: build execution ID for each node
-    (node, parentExecutionId: string): NodeExecutionId => {
+  return collectFromNodes<NodeExecutionId, string>(selectedNodes, {
+    collector: (node, parentExecutionId) => {
       const nodeId = String(node.id)
       return parentExecutionId ? `${parentExecutionId}:${nodeId}` : nodeId
     },
-    // Context builder: pass execution ID to children
-    (node, parentExecutionId: string) => {
+    contextBuilder: (node, parentExecutionId) => {
       const nodeId = String(node.id)
       return parentExecutionId ? `${parentExecutionId}:${nodeId}` : nodeId
     },
-    '', // Initial context: empty parent execution ID
-    true // Expand subgraphs
-  )
+    initialContext: '',
+    expandSubgraphs: true
+  })
 }