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)

Author: DrJKL

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -100,7 +100,7 @@ test.describe('Vue Node Link Interaction', () => {
 
     const linkDetails = await comfyPage.page.evaluate((sourceId) => {
       const app = window['app']
-      const graph = app?.canvas?.graph ?? app?.graph
+      const graph = app?.canvas?.graph
       if (!graph) return null
 
       const source = graph.getNodeById(sourceId)
@@ -164,7 +164,7 @@ test.describe('Vue Node Link Interaction', () => {
 
     const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
       const app = window['app']
-      const graph = app?.canvas?.graph ?? app?.graph
+      const graph = app?.canvas?.graph
       if (!graph) return 0
 
       const source = graph.getNodeById(sourceId)
@@ -207,7 +207,7 @@ test.describe('Vue Node Link Interaction', () => {
 
     const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
       const app = window['app']
-      const graph = app?.canvas?.graph ?? app?.graph
+      const graph = app?.canvas?.graph
       if (!graph) return 0
 
       const source = graph.getNodeById(sourceId)

src/components/graph/GraphCanvas.vue

@@ -93,6 +93,7 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
@@ -189,8 +190,8 @@ watch(
   }
 )
 
-const allNodes = computed(() =>
-  Array.from(vueNodeLifecycle.vueNodeData.value.values())
+const allNodes = computed((): VueNodeData[] =>
+  Array.from(vueNodeLifecycle.nodeManager.value?.vueNodeData?.values() ?? [])
 )
 
 watchEffect(() => {
@@ -225,7 +226,6 @@ watch(
     for (const n of comfyApp.graph.nodes) {
       if (!n.widgets) continue
       for (const w of n.widgets) {
-        // @ts-expect-error fixme ts strict error
         if (w[IS_CONTROL_WIDGET]) {
           updateControlWidgetLabel(w)
           if (w.linkedWidgets) {
@@ -364,7 +364,6 @@ const loadCustomNodesI18n = async () => {
 
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
-// @ts-expect-error fixme ts strict error
 useCanvasDrop(canvasRef)
 useLitegraphSettings()
 useNodeBadge()

src/composables/graph/useVueNodeLifecycle.ts

@@ -1,11 +1,8 @@
 import { createSharedComposable } from '@vueuse/core'
-import { readonly, ref, shallowRef, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
-import type {
-  GraphNodeManager,
-  VueNodeData
-} from '@/composables/graph/useGraphNodeManager'
+import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -22,31 +19,19 @@ function useVueNodeLifecycleIndividual() {
   const { shouldRenderVueNodes } = useVueFeatureFlags()
 
   const nodeManager = shallowRef<GraphNodeManager | null>(null)
-  const cleanupNodeManager = shallowRef<(() => void) | null>(null)
 
-  // Sync management
-  const slotSync = shallowRef<ReturnType<typeof useSlotLayoutSync> | null>(null)
-  const slotSyncStarted = ref(false)
-  const linkSync = shallowRef<ReturnType<typeof useLinkLayoutSync> | null>(null)
-
-  // Vue node data state
-  const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
-
-  // Trigger for forcing computed re-evaluation
-  const nodeDataTrigger = ref(0)
+  const { startSync } = useLayoutSync()
+  const linkSyncManager = useLinkLayoutSync()
+  const slotSyncManager = useSlotLayoutSync()
 
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
-    const activeGraph = comfyApp.canvas?.graph || comfyApp.graph
+    const activeGraph = comfyApp.canvas?.graph
     if (!activeGraph || nodeManager.value) return
 
     // Initialize the core node manager
     const manager = useGraphNodeManager(activeGraph)
     nodeManager.value = manager
-    cleanupNodeManager.value = manager.cleanup
-
-    // Use the manager's data maps
-    vueNodeData.value = manager.vueNodeData
 
     // Initialize layout system with existing nodes from active graph
     const nodes = activeGraph._nodes.map((node: LGraphNode) => ({
@@ -76,46 +61,29 @@ function useVueNodeLifecycleIndividual() {
     }
 
     // Initialize layout sync (one-way: Layout Store → LiteGraph)
-    const { startSync } = useLayoutSync()
     startSync(canvasStore.canvas)
 
-    // Initialize link layout sync for event-driven updates
-    const linkSyncManager = useLinkLayoutSync()
-    linkSync.value = linkSyncManager
     if (comfyApp.canvas) {
       linkSyncManager.start(comfyApp.canvas)
     }
-
-    // Force computed properties to re-evaluate
-    nodeDataTrigger.value++
   }
 
   const disposeNodeManagerAndSyncs = () => {
     if (!nodeManager.value) return
 
     try {
-      cleanupNodeManager.value?.()
+      nodeManager.value.cleanup()
     } catch {
       /* empty */
     }
     nodeManager.value = null
-    cleanupNodeManager.value = null
-
-    // Clean up link layout sync
-    if (linkSync.value) {
-      linkSync.value.stop()
-      linkSync.value = null
-    }
 
-    // Reset reactive maps to clean state
-    vueNodeData.value = new Map()
+    linkSyncManager.stop()
   }
 
   // Watch for Vue nodes enabled state changes
   watch(
-    () =>
-      shouldRenderVueNodes.value &&
-      Boolean(comfyApp.canvas?.graph || comfyApp.graph),
+    () => shouldRenderVueNodes.value && Boolean(comfyApp.canvas?.graph),
     (enabled) => {
       if (enabled) {
         initializeNodeManager()
@@ -138,47 +106,42 @@ function useVueNodeLifecycleIndividual() {
       }
 
       // Switching to Vue
-      if (vueMode && slotSyncStarted.value) {
-        slotSync.value?.stop()
-        slotSyncStarted.value = false
+      if (vueMode) {
+        slotSyncManager.stop()
       }
 
       // Switching to LG
       const shouldRun = Boolean(canvas?.graph) && !vueMode
-      if (shouldRun && !slotSyncStarted.value && canvas) {
-        // Initialize slot sync if not already created
-        if (!slotSync.value) {
-          slotSync.value = useSlotLayoutSync()
-        }
-        const started = slotSync.value.attemptStart(canvas as LGraphCanvas)
-        slotSyncStarted.value = started
+      if (shouldRun && canvas) {
+        slotSyncManager.attemptStart(canvas as LGraphCanvas)
       }
     },
     { immediate: true }
   )
 
   // Handle case where Vue nodes are enabled but graph starts empty
   const setupEmptyGraphListener = () => {
+    const activeGraph = comfyApp.canvas?.graph
     if (
-      shouldRenderVueNodes.value &&
-      comfyApp.graph &&
-      !nodeManager.value &&
-      comfyApp.graph._nodes.length === 0
+      !shouldRenderVueNodes.value ||
+      nodeManager.value ||
+      activeGraph?._nodes.length !== 0
     ) {
-      const originalOnNodeAdded = comfyApp.graph.onNodeAdded
-      comfyApp.graph.onNodeAdded = function (node: LGraphNode) {
-        // Restore original handler
-        comfyApp.graph.onNodeAdded = originalOnNodeAdded
-
-        // Initialize node manager if needed
-        if (shouldRenderVueNodes.value && !nodeManager.value) {
-          initializeNodeManager()
-        }
-
-        // Call original handler
-        if (originalOnNodeAdded) {
-          originalOnNodeAdded.call(this, node)
-        }
+      return
+    }
+    const originalOnNodeAdded = activeGraph.onNodeAdded
+    activeGraph.onNodeAdded = function (node: LGraphNode) {
+      // Restore original handler
+      activeGraph.onNodeAdded = originalOnNodeAdded
+
+      // Initialize node manager if needed
+      if (shouldRenderVueNodes.value && !nodeManager.value) {
+        initializeNodeManager()
+      }
+
+      // Call original handler
+      if (originalOnNodeAdded) {
+        originalOnNodeAdded.call(this, node)
       }
     }
   }
@@ -189,20 +152,12 @@ function useVueNodeLifecycleIndividual() {
       nodeManager.value.cleanup()
       nodeManager.value = null
     }
-    if (slotSyncStarted.value) {
-      slotSync.value?.stop()
-      slotSyncStarted.value = false
-    }
-    slotSync.value = null
-    if (linkSync.value) {
-      linkSync.value.stop()
-      linkSync.value = null
-    }
+    slotSyncManager.stop()
+    linkSyncManager.stop()
   }
 
   return {
-    vueNodeData,
-    nodeManager: readonly(nodeManager),
+    nodeManager,
 
     // Lifecycle methods
     initializeNodeManager,

src/composables/useCanvasDrop.ts

@@ -14,7 +14,7 @@ import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
-export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
+export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement | null>) => {
   const modelToNodeStore = useModelToNodeStore()
   const litegraphService = useLitegraphService()
   const workflowService = useWorkflowService()

src/composables/usePragmaticDragAndDrop.ts

@@ -2,19 +2,17 @@ import {
   draggable,
   dropTargetForElements
 } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
-import { onBeforeUnmount, onMounted } from 'vue'
+import { toValue } from 'vue'
+import { type MaybeRefOrGetter, onBeforeUnmount, onMounted } from 'vue'
 
 export function usePragmaticDroppable(
-  dropTargetElement: HTMLElement | (() => HTMLElement),
+  dropTargetElement: MaybeRefOrGetter<HTMLElement | null>,
   options: Omit<Parameters<typeof dropTargetForElements>[0], 'element'>
 ) {
   let cleanup = () => {}
 
   onMounted(() => {
-    const element =
-      typeof dropTargetElement === 'function'
-        ? dropTargetElement()
-        : dropTargetElement
+    const element = toValue(dropTargetElement)
 
     if (!element) {
       return
@@ -32,16 +30,13 @@ export function usePragmaticDroppable(
 }
 
 export function usePragmaticDraggable(
-  draggableElement: HTMLElement | (() => HTMLElement),
+  draggableElement: MaybeRefOrGetter<HTMLElement | null>,
   options: Omit<Parameters<typeof draggable>[0], 'element'>
 ) {
   let cleanup = () => {}
 
   onMounted(() => {
-    const element =
-      typeof draggableElement === 'function'
-        ? draggableElement()
-        : draggableElement
+    const element = toValue(draggableElement)
 
     if (!element) {
       return
@@ -51,6 +46,7 @@ export function usePragmaticDraggable(
       element,
       ...options
     })
+    // TODO: Change to onScopeDispose
   })
 
   onBeforeUnmount(() => {

src/extensions/core/groupNode.ts

@@ -170,7 +170,7 @@ class GroupNodeBuilder {
     // Use the built in copyToClipboard function to generate the node data we need
     try {
       // @ts-expect-error fixme ts strict error
-      const serialised = serialise(this.nodes, app.canvas.graph)
+      const serialised = serialise(this.nodes, app.canvas?.graph)
       const config = JSON.parse(serialised)
 
       storeLinkTypes(config)

src/lib/litegraph/src/LGraphCanvas.ts

@@ -757,9 +757,7 @@ export class LGraphCanvas
 
     // Initialize link renderer if graph is available
     if (graph) {
-      this.linkRenderer = new LitegraphLinkAdapter(graph)
-      // Disable layout writes during render
-      this.linkRenderer.enableLayoutStoreWrites = false
+      this.linkRenderer = new LitegraphLinkAdapter(false)
     }
 
     this.linkConnector.events.addEventListener('link-created', () =>
@@ -1858,9 +1856,7 @@ export class LGraphCanvas
     newGraph.attachCanvas(this)
 
     // Re-initialize link renderer with new graph
-    this.linkRenderer = new LitegraphLinkAdapter(newGraph)
-    // Disable layout writes during render
-    this.linkRenderer.enableLayoutStoreWrites = false
+    this.linkRenderer = new LitegraphLinkAdapter(false)
 
     this.dispatch('litegraph:set-graph', { newGraph, oldGraph: graph })
     this.#dirty()

src/lib/litegraph/src/types/widgets.ts

@@ -251,6 +251,8 @@ export interface IBaseWidget<
   TType extends string = string,
   TOptions extends IWidgetOptions<unknown> = IWidgetOptions<unknown>
 > {
+  [symbol: symbol]: boolean
+
   linkedWidgets?: IBaseWidget[]
 
   name: string

src/renderer/core/canvas/canvasStore.ts

@@ -116,7 +116,7 @@ export const useCanvasStore = defineStore('canvas', () => {
         newCanvas.canvas,
         'litegraph:set-graph',
         (event: CustomEvent<{ newGraph: LGraph; oldGraph: LGraph }>) => {
-          const newGraph = event.detail?.newGraph || app.canvas?.graph
+          const newGraph = event.detail?.newGraph ?? app.canvas?.graph // TODO: Ambiguous Graph
           currentGraph.value = newGraph
           isInSubgraph.value = Boolean(app.canvas?.subgraph)
         }

src/renderer/core/canvas/links/slotLinkCompatibility.ts

@@ -10,7 +10,6 @@ import type {
   SlotDragSource,
   SlotDropCandidate
 } from '@/renderer/core/canvas/links/slotLinkDragState'
-import { app } from '@/scripts/app'
 
 interface CompatibilityResult {
   allowable: boolean
@@ -21,7 +20,7 @@ interface CompatibilityResult {
 function resolveNode(nodeId: NodeId) {
   const pinia = getActivePinia()
   const canvasStore = pinia ? useCanvasStore() : null
-  const graph = canvasStore?.canvas?.graph ?? app.canvas?.graph
+  const graph = canvasStore?.canvas?.graph
   if (!graph) return null
   const id = typeof nodeId === 'string' ? Number(nodeId) : nodeId
   if (Number.isNaN(id)) return null