Cleanup app.graph usage (#7399)

Prior to the release of subgraphs, there was a single graph accessed
through `app.graph`. Now that there's multiple graphs, there's a lot of
code that needs to be reviewed and potentially updated depending on if
it cares about nearby nodes, all nodes, or something else requiring
specific attention.

This was done by simply changing the type of `app.graph` to unknown so
the typechecker will complain about every place it's currently used.
References were then updated to `app.rootGraph` if the previous usage
was correct, or actually rewritten.

By not getting rid of `app.graph`, this change already ensures that
there's no loss of functionality for custom nodes, but the prior typing
of `app.graph` can always be restored if future dissuasion of
`app.graph` usage creates issues.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7399-Cleanup-app-graph-usage-2c76d73d365081178743dfdcf07f44d0)
by [Unito](https://www.unito.io)

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

@@ -104,7 +104,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',
@@ -127,7 +127,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',
@@ -705,7 +705,7 @@ export function useCoreCommands(): ComfyCommand[] {
               'Comfy.GroupSelectedNodes.Padding'
             )
             group.resizeTo(group.children, padding)
-            app.graph.change()
+            app.canvas.setDirty(false, true)
           }
         }
       }