Cleanup app.graph usage

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -58,7 +58,7 @@ const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+  graphHasMissingNodes(app.rootGraph, nodeDefStore.nodeDefsByName)
 )
 
 const { t } = useI18n()

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -83,7 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+  graphHasMissingNodes(app.rootGraph, nodeDefStore.nodeDefsByName)
 )
 
 const { t } = useI18n()

src/components/dialog/content/ErrorDialogContent.vue

@@ -128,7 +128,7 @@ onMounted(async () => {
     reportContent.value = generateErrorReport({
       systemStats: systemStatsStore.systemStats!,
       serverLogs: logs,
-      workflow: app.graph.serialize(),
+      workflow: app.rootGraph.serialize(),
       exceptionType: error.exceptionType,
       exceptionMessage: error.exceptionMessage,
       traceback: error.traceback,

src/components/graph/GraphCanvas.vue

@@ -160,6 +160,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
+import { forEachNode } from '@/utils/graphTraversalUtil'
 
 import TryVueNodeBanner from '../topbar/TryVueNodeBanner.vue'
 import SelectionRectangle from './SelectionRectangle.vue'
@@ -271,20 +272,18 @@ watch(
   () => {
     if (!canvasStore.canvas) return
 
-    for (const n of comfyApp.graph.nodes) {
-      if (!n.widgets) continue
+    forEachNode(comfyApp.rootGraph, (n) => {
+      if (!n.widgets) return
       for (const w of n.widgets) {
-        if (w[IS_CONTROL_WIDGET]) {
-          updateControlWidgetLabel(w)
-          if (w.linkedWidgets) {
-            for (const l of w.linkedWidgets) {
-              updateControlWidgetLabel(l)
-            }
-          }
+        if (!w[IS_CONTROL_WIDGET]) continue
+        updateControlWidgetLabel(w)
+        if (!w.linkedWidgets) continue
+        for (const l of w.linkedWidgets) {
+          updateControlWidgetLabel(l)
         }
       }
-    }
-    comfyApp.graph.setDirtyCanvas(true)
+    })
+    canvasStore.canvas.setDirty(true)
   }
 )
 
@@ -334,7 +333,7 @@ watch(
     }
 
     // Force canvas redraw to ensure progress updates are visible
-    canvas.graph.setDirtyCanvas(true, false)
+    canvas.setDirty(true, false)
   },
   { deep: true }
 )
@@ -346,7 +345,7 @@ watch(
   (lastNodeErrors) => {
     if (!comfyApp.graph) return
 
-    for (const node of comfyApp.graph.nodes) {
+    forEachNode(comfyApp.rootGraph, (node) => {
       // Clear existing errors
       for (const slot of node.inputs) {
         delete slot.hasErrors
@@ -356,7 +355,7 @@ watch(
       }
 
       const nodeErrors = lastNodeErrors?.[node.id]
-      if (!nodeErrors) continue
+      if (!nodeErrors) return
 
       const validErrors = nodeErrors.errors.filter(
         (error) => error.extra_info?.input_name !== undefined
@@ -369,9 +368,9 @@ watch(
           node.inputs[inputIndex].hasErrors = true
         }
       })
-    }
+    })
 
-    comfyApp.canvas.draw(true, true)
+    comfyApp.canvas.setDirty(true, true)
   }
 )
 

src/components/graph/TitleEditor.vue

@@ -58,7 +58,7 @@ const onEdit = (newValue: string) => {
       target.subgraph.name = trimmedTitle
     }
 
-    app.graph.setDirtyCanvas(true, true)
+    app.canvas.setDirty(true, true)
   }
   showInput.value = false
   titleEditorStore.titleEditorTarget = null

src/components/toast/RerouteMigrationToast.vue

@@ -33,7 +33,7 @@ const toast = useToast()
 
 const workflowStore = useWorkflowStore()
 const migrateToLitegraphReroute = async () => {
-  const workflowJSON = app.graph.serialize() as unknown as WorkflowJSON04
+  const workflowJSON = app.rootGraph.serialize() as unknown as WorkflowJSON04
   const migratedWorkflowJSON = migrateLegacyRerouteNodes(workflowJSON)
   await app.loadGraphData(
     migratedWorkflowJSON,

src/composables/maskeditor/useMaskEditorSaver.ts

@@ -51,7 +51,7 @@ export function useMaskEditorSaver() {
 
       updateNodeWithServerReferences(sourceNode, outputData)
 
-      app.graph.setDirtyCanvas(true)
+      app.canvas.setDirty(true)
     } catch (error) {
       console.error('[MaskEditorSaver] Save failed:', error)
       throw error
@@ -308,7 +308,7 @@ export function useMaskEditorSaver() {
     const mainImg = await loadImageFromUrl(dataUrl)
     node.imgs = [mainImg]
 
-    app.graph.setDirtyCanvas(true)
+    app.canvas.setDirty(true)
   }
 
   function updateNodeWithServerReferences(

src/composables/node/useNodeBadge.ts

@@ -55,7 +55,7 @@ export const useNodeBadge = () => {
       showApiPricingBadge
     ],
     () => {
-      app.graph?.setDirtyCanvas(true, true)
+      app.canvas?.setDirty(true, true)
     }
   )
 

src/composables/useCanvasDrop.ts

@@ -41,7 +41,7 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement | null>) => {
         } else if (node.data instanceof ComfyModelDef) {
           const model = node.data
           const pos = basePos
-          const nodeAtPos = comfyApp.graph.getNodeOnPos(pos[0], pos[1])
+          const nodeAtPos = comfyApp.canvas.graph?.getNodeOnPos(pos[0], pos[1])
           let targetProvider: ModelNodeProvider | null = null
           let targetGraphNode: LGraphNode | null = null
           if (nodeAtPos) {

src/composables/useCoreCommands.ts

@@ -107,7 +107,7 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'New',
       category: 'essentials' as const,
       function: async () => {
-        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        const previousWorkflowHadNodes = app.rootGraph._nodes.length > 0
         await workflowService.loadBlankWorkflow()
         telemetry?.trackWorkflowCreated({
           workflow_type: 'blank',
@@ -130,7 +130,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-code',
       label: 'Load Default Workflow',
       function: async () => {
-        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        const previousWorkflowHadNodes = app.rootGraph._nodes.length > 0
         await workflowService.loadDefaultWorkflow()
         telemetry?.trackWorkflowCreated({
           workflow_type: 'default',
@@ -746,7 +746,7 @@ export function useCoreCommands(): ComfyCommand[] {
               'Comfy.GroupSelectedNodes.Padding'
             )
             group.resizeTo(group.children, padding)
-            app.graph.change()
+            app.canvas.setDirty(false, true)
           }
         }
       }

src/extensions/core/groupNode.ts

@@ -47,8 +47,8 @@ const Workflow = {
     const id = `${PREFIX}${SEPARATOR}${name}`
     // Check if lready registered/in use in this workflow
     // @ts-expect-error fixme ts strict error
-    if (app.graph.extra?.groupNodes?.[name]) {
-      if (app.graph.nodes.find((n) => n.type === id)) {
+    if (app.rootGraph.extra?.groupNodes?.[name]) {
+      if (app.rootGraph.nodes.find((n) => n.type === id)) {
         return Workflow.InUse.InWorkflow
       } else {
         return Workflow.InUse.Registered
@@ -57,8 +57,8 @@ const Workflow = {
     return Workflow.InUse.Free
   },
   storeGroupNode(name: string, data: GroupNodeWorkflowData) {
-    let extra = app.graph.extra
-    if (!extra) app.graph.extra = extra = {}
+    let extra = app.rootGraph.extra
+    if (!extra) app.rootGraph.extra = extra = {}
     let groupNodes = extra.groupNodes
     if (!groupNodes) extra.groupNodes = groupNodes = {}
     // @ts-expect-error fixme ts strict error
@@ -118,7 +118,7 @@ class GroupNodeBuilder {
 
   sortNodes() {
     // Gets the builders nodes in graph execution order
-    const nodesInOrder = app.graph.computeExecutionOrder(false)
+    const nodesInOrder = app.rootGraph.computeExecutionOrder(false)
     this.nodes = this.nodes
       .map((node) => ({ index: nodesInOrder.indexOf(node), node }))
       // @ts-expect-error id might be string
@@ -131,7 +131,7 @@ class GroupNodeBuilder {
     const storeLinkTypes = (config) => {
       // Store link types for dynamically typed nodes e.g. reroutes
       for (const link of config.links) {
-        const origin = app.graph.getNodeById(link[4])
+        const origin = app.rootGraph.getNodeById(link[4])
         // @ts-expect-error fixme ts strict error
         const type = origin.outputs[link[1]].type
         link.push(type)
@@ -151,7 +151,7 @@ class GroupNodeBuilder {
           let type = output.type
           if (!output.links?.length) continue
           for (const l of output.links) {
-            const link = app.graph.links[l]
+            const link = app.rootGraph.links[l]
             if (!link) continue
             if (type === '*') type = link.type
 
@@ -853,7 +853,7 @@ export class GroupNodeHandler {
             // The inner node is connected via the group node inputs
             const linkId = this.node.inputs[externalSlot].link
             // @ts-expect-error fixme ts strict error
-            let link = app.graph.links[linkId]
+            let link = app.rootGraph.links[linkId]
 
             // Use the outer link, but update the target to the inner node
             link = {
@@ -980,7 +980,7 @@ export class GroupNodeHandler {
       // @ts-expect-error fixme ts strict error
       groupNode[GROUP].populateWidgets()
       // @ts-expect-error fixme ts strict error
-      app.graph.add(groupNode)
+      app.rootGraph.add(groupNode)
       // @ts-expect-error fixme ts strict error
       groupNode.setSize([
         // @ts-expect-error fixme ts strict error
@@ -1032,7 +1032,7 @@ export class GroupNodeHandler {
         const newNodes = []
         for (let i = 0; i < selectedIds.length; i++) {
           const id = selectedIds[i]
-          const newNode = app.graph.getNodeById(id)
+          const newNode = app.rootGraph.getNodeById(id)
           const innerNode = innerNodes[i]
           newNodes.push(newNode)
 
@@ -1111,17 +1111,17 @@ export class GroupNodeHandler {
       const reconnectInputs = (selectedIds) => {
         for (const innerNodeIndex in this.groupData.oldToNewInputMap) {
           const id = selectedIds[innerNodeIndex]
-          const newNode = app.graph.getNodeById(id)
+          const newNode = app.rootGraph.getNodeById(id)
           const map = this.groupData.oldToNewInputMap[innerNodeIndex]
           for (const innerInputId in map) {
             const groupSlotId = map[innerInputId]
             if (groupSlotId == null) continue
             const slot = node.inputs[groupSlotId]
             if (slot.link == null) continue
-            const link = app.graph.links[slot.link]
+            const link = app.rootGraph.links[slot.link]
             if (!link) continue
             //  connect this node output to the input of another node
-            const originNode = app.graph.getNodeById(link.origin_id)
+            const originNode = app.rootGraph.getNodeById(link.origin_id)
             // @ts-expect-error fixme ts strict error
             originNode.connect(link.origin_slot, newNode, +innerInputId)
           }
@@ -1140,9 +1140,11 @@ export class GroupNodeHandler {
           const links = [...output.links]
           for (const l of links) {
             const slot = this.groupData.newToOldOutputMap[groupOutputId]
-            const link = app.graph.links[l]
-            const targetNode = app.graph.getNodeById(link.target_id)
-            const newNode = app.graph.getNodeById(selectedIds[slot.node.index])
+            const link = app.rootGraph.links[l]
+            const targetNode = app.rootGraph.getNodeById(link.target_id)
+            const newNode = app.rootGraph.getNodeById(
+              selectedIds[slot.node.index]
+            )
             // @ts-expect-error fixme ts strict error
             newNode.connect(slot.slot, targetNode, link.target_slot)
           }
@@ -1155,7 +1157,7 @@ export class GroupNodeHandler {
         const { newNodes, selectedIds } = addInnerNodes()
         reconnectInputs(selectedIds)
         reconnectOutputs(selectedIds)
-        app.graph.remove(this.node)
+        app.rootGraph.remove(this.node)
 
         return newNodes
       } finally {
@@ -1291,7 +1293,7 @@ export class GroupNodeHandler {
       const handler = ({ detail }) => {
         const id = getId(detail)
         if (!id) return
-        const node = app.graph.getNodeById(id)
+        const node = app.rootGraph.getNodeById(id)
         if (node) return
 
         // @ts-expect-error fixme ts strict error
@@ -1546,7 +1548,7 @@ export class GroupNodeHandler {
       }
 
       this.linkOutputs(node, i)
-      app.graph.remove(node)
+      app.rootGraph.remove(node)
 
       // Set internal ID to what is expected after workflow is reloaded
       node.id = `${this.node.id}:${i}`
@@ -1565,10 +1567,10 @@ export class GroupNodeHandler {
       // Clone the links as they'll be changed if we reconnect
       const links = [...output.links]
       for (const l of links) {
-        const link = app.graph.links[l]
+        const link = app.rootGraph.links[l]
         if (!link) continue
 
-        const targetNode = app.graph.getNodeById(link.target_id)
+        const targetNode = app.rootGraph.getNodeById(link.target_id)
         const newSlot =
           this.groupData.oldToNewOutputMap[nodeId]?.[link.origin_slot]
         if (newSlot != null) {
@@ -1582,7 +1584,7 @@ export class GroupNodeHandler {
   linkInputs() {
     for (const link of this.groupData.nodeData.links ?? []) {
       const [, originSlot, targetId, targetSlot, actualOriginId] = link
-      const originNode = app.graph.getNodeById(actualOriginId)
+      const originNode = app.rootGraph.getNodeById(actualOriginId)
       if (!originNode) continue // this node is in the group
       originNode.connect(
         originSlot,
@@ -1621,7 +1623,7 @@ export class GroupNodeHandler {
     // @ts-expect-error fixme ts strict error
     groupNode[GROUP].populateWidgets()
     // @ts-expect-error fixme ts strict error
-    app.graph.add(groupNode)
+    app.rootGraph.add(groupNode)
 
     // Remove all converted nodes and relink them
     // @ts-expect-error fixme ts strict error
@@ -1802,7 +1804,7 @@ const ext: ComfyExtension = {
     // Re-register group nodes so new ones are created with the correct options
     // @ts-expect-error fixme ts strict error
     Object.assign(globalDefs, defs)
-    const nodes = app.graph.extra?.groupNodes
+    const nodes = app.rootGraph.extra?.groupNodes
     if (nodes) {
       await GroupNodeConfig.registerFromWorkflow(nodes, {})
     }