From d1ed5ecc0db0b3e027277e3a2904f225a8cd2c02 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 19 Aug 2025 09:52:01 -0700
Subject: [PATCH] fix: Initialize Vue node manager when first node is added to
 empty graph (#5086)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Initialize Vue node manager when first node is added to empty graph

When Vue nodes are enabled and the graph starts empty (0 nodes), the
node manager wasn't being initialized. This caused Vue nodes to not
render until the setting was toggled off and on again.

The fix adds a one-time event handler that listens for the first node
being added to an empty graph and initializes the node manager at that
point.

Fixes the issue where Vue nodes don't render on initial page load when
the setting is enabled.

* fix: Add TODO comment for reactive graph mutations observer

Added comment to indicate that the monkey-patching approach should be
replaced with a proper reactive graph mutations observer when available.

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/components/graph/GraphCanvas.vue | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index c869f0fcd..c28420df4 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -751,6 +751,32 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  // Set up a one-time listener for when the first node is added
+  // This handles the case where Vue nodes are enabled but the graph starts empty
+  // TODO: Replace this with a reactive graph mutations observer when available
+  if (
+    transformPaneEnabled.value &&
+    comfyApp.graph &&
+    !nodeManager &&
+    comfyApp.graph._nodes.length === 0
+  ) {
+    const originalOnNodeAdded = comfyApp.graph.onNodeAdded
+    comfyApp.graph.onNodeAdded = function (node: any) {
+      // Restore original handler
+      comfyApp.graph.onNodeAdded = originalOnNodeAdded
+
+      // Initialize node manager if needed
+      if (transformPaneEnabled.value && !nodeManager) {
+        initializeNodeManager()
+      }
+
+      // Call original handler
+      if (originalOnNodeAdded) {
+        originalOnNodeAdded.call(this, node)
+      }
+    }
+  }
+
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()