From 8c6ee026c07e00ece563d951e13dfa8ab946842f Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sun, 14 Sep 2025 20:46:43 -0700
Subject: [PATCH] fix: Set Vue node initial size in layout store instead of CSS
 (#5571)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Vue nodes now respect deserialized width from LiteGraph

* fix: Set Vue node initial size in layout store instead of CSS

Vue nodes now properly set their initial size in the layout store using
the resize() function from useNodeLayout on component mount. This ensures
the layout store is the single source of truth for sizing, preventing
conflicts with the ResizeObserver that was overriding CSS-based sizing.

This resolves the issue where Vue nodes would shrink to minimal size
after user interaction due to ResizeObserver feedback loops.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

* fix: Remove duplicate onMounted call in LGraphNode.vue

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/assets/css/style.css                      |  2 --
 .../vueNodes/components/LGraphNode.vue        | 33 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 9c49e1704..4520f15b6 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -961,9 +961,7 @@ audio.comfy-audio.empty-audio-widget {
   /* Uses default styling - no overrides needed */
 }
 
-/* Smooth transitions between LOD levels */
 .lg-node {
-  transition: min-height 0.2s ease;
   /* Disable text selection on all nodes */
   user-select: none;
   -webkit-user-select: none;
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 78ac4effd..754bd323a 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -8,7 +8,6 @@
     :class="
       cn(
         'bg-white dark-theme:bg-charcoal-100',
-        'min-w-[445px]',
         'lg-node absolute rounded-2xl',
         // border
         'border border-solid border-sand-100 dark-theme:border-charcoal-300',
@@ -131,6 +130,7 @@ import {
   computed,
   inject,
   onErrorCaptured,
+  onMounted,
   provide,
   ref,
   toRef,
@@ -170,6 +170,8 @@ interface LGraphNodeProps {
 
 const {
   nodeData,
+  position,
+  size,
   error = null,
   readonly = false,
   zoomLevel = 1
@@ -202,6 +204,21 @@ if (!selectedNodeIds) {
   )
 }
 
+// Inject transform state for coordinate conversion
+const transformState = inject('transformState') as
+  | {
+      camera: { z: number }
+      canvasToScreen: (point: { x: number; y: number }) => {
+        x: number
+        y: number
+      }
+      screenToCanvas: (point: { x: number; y: number }) => {
+        x: number
+        y: number
+      }
+    }
+  | undefined
+
 // Computed selection state - only this node re-evaluates when its selection changes
 const isSelected = computed(() => {
   return selectedNodeIds.value.has(nodeData.id)
@@ -250,9 +267,21 @@ const {
   zIndex,
   startDrag,
   handleDrag: handleLayoutDrag,
-  endDrag
+  endDrag,
+  resize
 } = useNodeLayout(nodeData.id)
 
+onMounted(() => {
+  if (size && transformState) {
+    const scale = transformState.camera.z
+    const screenSize = {
+      width: size.width * scale,
+      height: size.height * scale
+    }
+    resize(screenSize)
+  }
+})
+
 // Drag state for styling
 const isDragging = ref(false)
 const dragStyle = computed(() => ({