refactor: delete useVueNodeLifecycle

What was left after node registration moved to `LGraph.add` was two calls on
two transitions, wrapped in a shared composable with one consumer.

- The `clearAllSlotLayouts` watch was redundant entering Vue mode, since
  `clearViewGeometry` already drops slot layouts along with link and reroute
  geometry. It was only doing work on the way out, so dispose clears instead
  and the watch goes. This widens what mode-leave clears; legacy mode reads
  none of it and re-entry clears again.
- `isInitialized` guarded nothing: `startSync` opens with `stopSync()`, and
  `clearViewGeometry` is idempotent.
- `createSharedComposable` held no shared state once that flag was gone, and
  `GraphCanvas.vue` was the only caller.
- The `arrange()` pass is legacy-canvas preparation, not Vue node lifecycle —
  it computes slot positions before `drawConnections` can run without them. It
  moves to `arrangeForLegacyRender` next to the other litegraph canvas
  adapters, rather than becoming another method on LGraph.

The transitions were already driven from `GraphCanvas.vue`, which watches
`currentGraph` and `isInSubgraph`, so the remainder lands where it was being
called from.

Author: DrJKL

src/components/graph/GraphCanvas.vue

@@ -110,7 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import { until, useEventListener } from '@vueuse/core'
+import { until, useEventListener, whenever } from '@vueuse/core'
 import {
   computed,
   nextTick,
@@ -153,7 +153,6 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useGroupContextMenu } from '@/composables/graph/useGroupContextMenu'
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
 import type { NodeState } from '@/types/nodeState'
-import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
@@ -173,7 +172,9 @@ import { useWorkflowPersistenceV2 as useWorkflowPersistence } from '@/platform/w
 import { useNodeDataStore } from '@/stores/nodeDataStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
+import { arrangeForLegacyRender } from '@/renderer/core/canvas/litegraph/arrangeForLegacyRender'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
@@ -253,8 +254,22 @@ const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 // Feature flags
 const { shouldRenderVueNodes } = useVueFeatureFlags()
 
-// Vue node system
-const vueNodeLifecycle = useVueNodeLifecycle()
+// Layout↔LiteGraph sync. Node geometry registers itself in LGraph.add, so all
+// that is needed here is dropping view-scoped geometry when the viewed graph
+// changes and running the sync for as long as Vue nodes are rendering.
+const { startSync, stopSync } = useLayoutSync()
+
+const startVueNodeLayout = () => {
+  layoutStore.clearViewGeometry()
+  // Start sync AFTER the reset so bootstrap operations don't trigger the
+  // Layout→LiteGraph writeback loop redundantly.
+  startSync(canvasStore.canvas)
+}
+
+const stopVueNodeLayout = () => {
+  stopSync()
+  layoutStore.clearViewGeometry()
+}
 
 // Error-clearing hooks run regardless of rendering mode (Vue or legacy canvas).
 let cleanupErrorHooks: (() => void) | null = null
@@ -267,13 +282,32 @@ watch(
 )
 
 const handleVueNodeLifecycleReset = async () => {
-  if (shouldRenderVueNodes.value) {
-    vueNodeLifecycle.disposeVueNodeLayout()
-    await nextTick()
-    vueNodeLifecycle.initializeVueNodeLayout()
-  }
+  if (!shouldRenderVueNodes.value) return
+
+  stopSync()
+  await nextTick()
+  startVueNodeLayout()
 }
 
+watch(
+  () => shouldRenderVueNodes.value && Boolean(comfyApp.canvas?.graph),
+  (enabled) => {
+    if (enabled) startVueNodeLayout()
+  },
+  { immediate: true }
+)
+
+whenever(
+  () => !shouldRenderVueNodes.value,
+  () => {
+    stopVueNodeLayout()
+
+    const graph = comfyApp.canvas?.graph
+    if (graph) arrangeForLegacyRender(graph)
+    comfyApp.canvas?.setDirty(true, true)
+  }
+)
+
 watch(() => canvasStore.currentGraph, handleVueNodeLifecycleReset)
 
 watch(
@@ -585,7 +619,7 @@ onMounted(async () => {
 onUnmounted(() => {
   cleanupErrorHooks?.()
   cleanupErrorHooks = null
-  vueNodeLifecycle.disposeVueNodeLayout()
+  stopSync()
 })
 function forwardPointerDownPanEvent(e: PointerEvent) {
   forwardPanEvent(e, isMiddlePointerInput)

src/composables/graph/useVueNodeLifecycle.ts

@@ -0,0 +1,20 @@
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+
+/**
+ * Computes slot positions for every node so the legacy canvas has them before
+ * it draws.
+ *
+ * `drawConnections` can run before `drawNode` on the foreground canvas, so
+ * without this the first frame after leaving Vue nodes draws links against
+ * slot positions that were never arranged.
+ */
+export function arrangeForLegacyRender(graph: LGraph): void {
+  for (const node of graph._nodes) {
+    if (node.flags.collapsed) continue
+    try {
+      node.arrange()
+    } catch {
+      /* skip nodes not fully initialized */
+    }
+  }
+}