Cleanup: Litegraph/Vue synchronization work (#5789)

## Summary

Cleanup and fixes to the existing syncing logic.

## Review Focus

This is probably enough to review and test now.

Main things that should still work: 
- moving nodes around
- adding new ones
- switching back and forth between Vue and Litegraph

Let me know if you find any bugs that weren't already present there.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5789-WIP-Litegraph-Vue-synchronization-work-27a6d73d3650811682cacacb82367b9e)
by [Unito](https://www.unito.io)

src/scripts/app.ts

@@ -157,11 +157,22 @@ export class ComfyApp {
   // @ts-expect-error fixme ts strict error
   _nodeOutputs: Record<string, any>
   nodePreviewImages: Record<string, string[]>
-  // @ts-expect-error fixme ts strict error
-  #graph: LGraph
+
+  private rootGraphInternal: LGraph | undefined
+
+  // TODO: Migrate internal usage to the
+  /** @deprecated Use {@link rootGraph} instead */
   get graph() {
-    return this.#graph
+    return this.rootGraphInternal!
   }
+
+  get rootGraph(): LGraph | undefined {
+    if (!this.rootGraphInternal) {
+      console.error('ComfyApp graph accessed before initialization')
+    }
+    return this.rootGraphInternal
+  }
+
   // @ts-expect-error fixme ts strict error
   canvas: LGraphCanvas
   dragOverNode: LGraphNode | null = null
@@ -765,8 +776,7 @@ export class ComfyApp {
     }
   }
 
-  #addAfterConfigureHandler() {
-    const { graph } = this
+  private addAfterConfigureHandler(graph: LGraph) {
     const { onConfigure } = graph
     graph.onConfigure = function (...args) {
       fixLinkInputSlots(this)
@@ -809,10 +819,10 @@ export class ComfyApp {
     this.#addConfigureHandler()
     this.#addApiUpdateHandlers()
 
-    this.#graph = new LGraph()
+    const graph = new LGraph()
 
     // Register the subgraph - adds type wrapper for Litegraph's `createNode` factory
-    this.graph.events.addEventListener('subgraph-created', (e) => {
+    graph.events.addEventListener('subgraph-created', (e) => {
       try {
         const { subgraph, data } = e.detail
         useSubgraphService().registerNewSubgraph(subgraph, data)
@@ -826,9 +836,10 @@ export class ComfyApp {
       }
     })
 
-    this.#addAfterConfigureHandler()
+    this.addAfterConfigureHandler(graph)
 
-    this.canvas = new LGraphCanvas(canvasEl, this.graph)
+    this.rootGraphInternal = graph
+    this.canvas = new LGraphCanvas(canvasEl, graph)
     // Make canvas states reactive so we can observe changes on them.
     this.canvas.state = reactive(this.canvas.state)
 

src/scripts/widgets.ts

@@ -140,7 +140,6 @@ export function addValueControlWidgets(
 
   valueControl.tooltip =
     'Allows the linked widget to be changed automatically, for example randomizing the noise seed.'
-  // @ts-ignore index with symbol
   valueControl[IS_CONTROL_WIDGET] = true
   updateControlWidgetLabel(valueControl)
   const widgets: [IComboWidget, ...IStringWidget[]] = [valueControl]
@@ -273,12 +272,10 @@ export function addValueControlWidgets(
   valueControl.beforeQueued = () => {
     if (controlValueRunBefore()) {
       // Don't run on first execution
-      // @ts-ignore index with symbol
       if (valueControl[HAS_EXECUTED]) {
         applyWidgetControl()
       }
     }
-    // @ts-ignore index with symbol
     valueControl[HAS_EXECUTED] = true
   }