[fix] Update Search & Replace to support nodes in subgraphs (#4576)

Author: christian-byrne

src/extensions/core/saveImageExtraOutput.ts

@@ -35,7 +35,7 @@ app.registerExtension({
         // @ts-expect-error fixme ts strict error
         widget.serializeValue = () => {
           // @ts-expect-error fixme ts strict error
-          return applyTextReplacements(app.graph.nodes, widget.value)
+          return applyTextReplacements(app.graph, widget.value)
         }
 
         return r

src/extensions/core/widgetInputs.ts

@@ -46,7 +46,7 @@ export class PrimitiveNode extends LGraphNode {
     ]
     let v = this.widgets?.[0].value
     if (v && this.properties[replacePropertyName]) {
-      v = applyTextReplacements(app.graph.nodes, v as string)
+      v = applyTextReplacements(app.graph, v as string)
     }
 
     // For each output link copy our value over the original widget value

src/scripts/utils.ts

@@ -21,7 +21,7 @@ export function clone<T>(obj: T): T {
  * There are external callers to this function, so we need to keep it for now
  */
 export function applyTextReplacements(app: ComfyApp, value: string): string {
-  return _applyTextReplacements(app.graph.nodes, value)
+  return _applyTextReplacements(app.graph, value)
 }
 
 export async function addStylesheet(

src/utils/searchAndReplace.ts

@@ -1,11 +1,14 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
+import type { LGraph, Subgraph } from '@comfyorg/litegraph'
 
 import { formatDate } from '@/utils/formatUtil'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
 
 export function applyTextReplacements(
-  allNodes: LGraphNode[],
+  graph: LGraph | Subgraph,
   value: string
 ): string {
+  const allNodes = collectAllNodes(graph)
+
   return value.replace(/%([^%]+)%/g, function (match, text) {
     const split = text.split('.')
     if (split.length !== 2) {

tests-ui/tests/utils/serachAndReplace.test.ts

@@ -1,3 +1,4 @@
+import { LGraph } from '@comfyorg/litegraph'
 import type { LGraphNode } from '@comfyorg/litegraph'
 import { describe, expect, it } from 'vitest'
 
@@ -21,7 +22,11 @@ describe('applyTextReplacements', () => {
         } as LGraphNode
       ]
 
-      const result = applyTextReplacements(mockNodes, '%TestNode.testWidget%')
+      const mockGraph = new LGraph()
+      for (const node of mockNodes) {
+        mockGraph.add(node)
+      }
+      const result = applyTextReplacements(mockGraph, '%TestNode.testWidget%')
 
       // The expected result should have all invalid characters replaced with underscores
       expect(result).toBe('file_name_with_invalid_chars_____control_chars__')
@@ -51,7 +56,11 @@ describe('applyTextReplacements', () => {
           } as LGraphNode
         ]
 
-        const result = applyTextReplacements(mockNodes, '%TestNode.testWidget%')
+        const mockGraph = new LGraph()
+        for (const node of mockNodes) {
+          mockGraph.add(node)
+        }
+        const result = applyTextReplacements(mockGraph, '%TestNode.testWidget%')
         expect(result).toBe(expected)
       }
     })
@@ -66,7 +75,11 @@ describe('applyTextReplacements', () => {
         } as LGraphNode
       ]
 
-      const result = applyTextReplacements(mockNodes, '%TestNode.testWidget%')
+      const mockGraph = new LGraph()
+      for (const node of mockNodes) {
+        mockGraph.add(node)
+      }
+      const result = applyTextReplacements(mockGraph, '%TestNode.testWidget%')
       expect(result).toBe(validChars)
     })
   })