Fix: Vue-Litegraph conversion bug with Reroutes (#6330)

## Summary

The private fields triggered an error in intitializing the
linkLayoutSync. Turns out that wasn't necessary anymore.

> [!NOTE]
> Edit: Doing some more investigation, it looks like the slot sync can
also be removed?

## Changes

- **What**: Converts JS private fields to typescript private, adds some
readonly declarations
- **What**: Removes the useLinkLayoutSync usage in useVueNodeLifecycle
- **What**: Removes the useSlotLayoutSync usage in useVueNodeLifecycle

## Review Focus

Was the sync doing something that wouldn't be caught in normal
usage/testing?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6330-Fix-Vue-Litegraph-conversion-bug-with-Reroutes-2996d73d3650819ebb24e4aa2fc51c65)
by [Unito](https://www.unito.io)

Author: DrJKL

.gitattributes

@@ -7,6 +7,7 @@
 *.json text eol=lf
 *.mjs text eol=lf
 *.mts text eol=lf
+*.snap text eol=lf
 *.ts text eol=lf
 *.vue text eol=lf
 *.yaml text eol=lf

knip.config.ts

@@ -14,7 +14,7 @@ const config: KnipConfig = {
     },
     'apps/desktop-ui': {
       entry: ['src/main.ts', 'src/i18n.ts'],
-      project: ['src/**/*.{js,ts,vue}', '*.{js,ts,mts}']
+      project: ['src/**/*.{js,ts,vue}']
     },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']

src/composables/graph/useVueNodeLifecycle.ts

@@ -4,13 +4,11 @@ import { shallowRef, watch } from 'vue'
 import { useGraphNodeManager } 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 type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
-import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
-import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
 import { app as comfyApp } from '@/scripts/app'
 
 function useVueNodeLifecycleIndividual() {
@@ -21,8 +19,6 @@ function useVueNodeLifecycleIndividual() {
   const nodeManager = shallowRef<GraphNodeManager | null>(null)
 
   const { startSync } = useLayoutSync()
-  const linkSyncManager = useLinkLayoutSync()
-  const slotSyncManager = useSlotLayoutSync()
 
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
@@ -62,10 +58,6 @@ function useVueNodeLifecycleIndividual() {
 
     // Initialize layout sync (one-way: Layout Store → LiteGraph)
     startSync(canvasStore.canvas)
-
-    if (comfyApp.canvas) {
-      linkSyncManager.start(comfyApp.canvas)
-    }
   }
 
   const disposeNodeManagerAndSyncs = () => {
@@ -77,8 +69,6 @@ function useVueNodeLifecycleIndividual() {
       /* empty */
     }
     nodeManager.value = null
-
-    linkSyncManager.stop()
   }
 
   // Watch for Vue nodes enabled state changes
@@ -96,25 +86,14 @@ function useVueNodeLifecycleIndividual() {
 
   // Consolidated watch for slot layout sync management
   watch(
-    [() => canvasStore.canvas, () => shouldRenderVueNodes.value],
-    ([canvas, vueMode], [, oldVueMode]) => {
+    () => shouldRenderVueNodes.value,
+    (vueMode, oldVueMode) => {
       const modeChanged = vueMode !== oldVueMode
 
       // Clear stale slot layouts when switching modes
       if (modeChanged) {
         layoutStore.clearAllSlotLayouts()
       }
-
-      // Switching to Vue
-      if (vueMode) {
-        slotSyncManager.stop()
-      }
-
-      // Switching to LG
-      const shouldRun = Boolean(canvas?.graph) && !vueMode
-      if (shouldRun && canvas) {
-        slotSyncManager.attemptStart(canvas as LGraphCanvas)
-      }
     },
     { immediate: true, flush: 'sync' }
   )
@@ -152,8 +131,6 @@ function useVueNodeLifecycleIndividual() {
       nodeManager.value.cleanup()
       nodeManager.value = null
     }
-    slotSyncManager.stop()
-    linkSyncManager.stop()
   }
 
   return {

src/lib/litegraph/src/LGraph.ts

@@ -223,15 +223,15 @@ export class LGraph
   /** Internal only.  Not required for serialisation; calculated on deserialise. */
   #lastFloatingLinkId: number = 0
 
-  #floatingLinks: Map<LinkId, LLink> = new Map()
+  private readonly floatingLinksInternal: Map<LinkId, LLink> = new Map()
   get floatingLinks(): ReadonlyMap<LinkId, LLink> {
-    return this.#floatingLinks
+    return this.floatingLinksInternal
   }
 
-  #reroutes = new Map<RerouteId, Reroute>()
+  private readonly reroutesInternal = new Map<RerouteId, Reroute>()
   /** All reroutes in this graph. */
   public get reroutes(): Map<RerouteId, Reroute> {
-    return this.#reroutes
+    return this.reroutesInternal
   }
 
   get rootGraph(): LGraph {
@@ -340,7 +340,7 @@ export class LGraph
 
     this._links.clear()
     this.reroutes.clear()
-    this.#floatingLinks.clear()
+    this.floatingLinksInternal.clear()
 
     this.#lastFloatingLinkId = 0
 
@@ -1268,7 +1268,7 @@ export class LGraph
     if (link.id === -1) {
       link.id = ++this.#lastFloatingLinkId
     }
-    this.#floatingLinks.set(link.id, link)
+    this.floatingLinksInternal.set(link.id, link)
 
     const slot =
       link.target_id !== -1
@@ -1291,7 +1291,7 @@ export class LGraph
   }
 
   removeFloatingLink(link: LLink): void {
-    this.#floatingLinks.delete(link.id)
+    this.floatingLinksInternal.delete(link.id)
 
     const slot =
       link.target_id !== -1