fix: restore Vue node sizes correctly when loading workflows

Previously, Vue nodes would reset to default size after page refresh because
the onMounted callback was incorrectly multiplying canvas-space sizes by zoom
scale and calling resize(), which overwrote correctly loaded sizes.

Changes:
- Set DOM size directly in onMounted, respecting intrinsic content minimum
- Extract calculateIntrinsicSize() helper to eliminate code duplication
- Remove unused resize() function from useNodeLayout
- Add unit tests for calculateIntrinsicSize utility

The fix ensures:
- Loaded node sizes persist correctly across page refreshes
- Nodes respect their minimum content size (intrinsic layout)
- Manual resizing continues to work via ResizeObserver
- No spurious layout mutations on initial load

Author: christian-byrne

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -153,6 +153,7 @@ import {
 import { cn } from '@/utils/tailwindUtil'
 
 import { useNodeResize } from '../composables/useNodeResize'
+import { calculateIntrinsicSize } from '../utils/calculateIntrinsicSize'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
@@ -245,7 +246,7 @@ onErrorCaptured((error) => {
 })
 
 // Use layout system for node position and dragging
-const { position, size, zIndex, resize } = useNodeLayout(() => nodeData.id)
+const { position, size, zIndex } = useNodeLayout(() => nodeData.id)
 const { pointerHandlers, isDragging, dragStyle } = useNodePointerInteractions(
   () => nodeData,
   handleNodeSelect
@@ -267,13 +268,19 @@ const handleContextMenu = (event: MouseEvent) => {
 }
 
 onMounted(() => {
-  if (size.value && transformState?.camera) {
-    const scale = transformState.camera.z
-    const screenSize = {
-      width: size.value.width * scale,
-      height: size.value.height * scale
-    }
-    resize(screenSize)
+  // Set initial DOM size from layout store, but respect intrinsic content minimum
+  if (size.value && nodeContainerRef.value && transformState) {
+    const intrinsicMin = calculateIntrinsicSize(
+      nodeContainerRef.value,
+      transformState.camera.z
+    )
+
+    // Use the larger of stored size or intrinsic minimum
+    const finalWidth = Math.max(size.value.width, intrinsicMin.width)
+    const finalHeight = Math.max(size.value.height, intrinsicMin.height)
+
+    nodeContainerRef.value.style.width = `${finalWidth}px`
+    nodeContainerRef.value.style.height = `${finalHeight}px`
   }
 })
 

src/renderer/extensions/vueNodes/composables/useNodeResize.ts

@@ -2,6 +2,7 @@ import { useEventListener } from '@vueuse/core'
 import { ref } from 'vue'
 
 import type { TransformState } from '@/renderer/core/layout/injectionKeys'
+import { calculateIntrinsicSize } from '@/renderer/extensions/vueNodes/utils/calculateIntrinsicSize'
 
 interface Size {
   width: number
@@ -53,29 +54,16 @@ export function useNodeResize(
     if (!(nodeElement instanceof HTMLElement)) return
 
     const rect = nodeElement.getBoundingClientRect()
-
-    // Calculate intrinsic content size once at start
-    const originalWidth = nodeElement.style.width
-    const originalHeight = nodeElement.style.height
-    nodeElement.style.width = 'auto'
-    nodeElement.style.height = 'auto'
-
-    const intrinsicRect = nodeElement.getBoundingClientRect()
-
-    // Restore original size
-    nodeElement.style.width = originalWidth
-    nodeElement.style.height = originalHeight
-
-    // Convert to canvas coordinates using transform state
     const scale = transformState.camera.z
+
+    // Calculate current size in canvas coordinates
     resizeStartSize.value = {
       width: rect.width / scale,
       height: rect.height / scale
     }
-    intrinsicMinSize.value = {
-      width: intrinsicRect.width / scale,
-      height: intrinsicRect.height / scale
-    }
+
+    // Calculate intrinsic content size (minimum based on content)
+    intrinsicMinSize.value = calculateIntrinsicSize(nodeElement, scale)
 
     const handlePointerMove = (moveEvent: PointerEvent) => {
       if (

src/renderer/extensions/vueNodes/layout/useNodeLayout.ts

@@ -167,14 +167,6 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
     mutations.moveNode(nodeId, position)
   }
 
-  /**
-   * Update node size
-   */
-  function resize(newSize: { width: number; height: number }) {
-    mutations.setSource(LayoutSource.Vue)
-    mutations.resizeNode(nodeId, newSize)
-  }
-
   return {
     // Reactive state (via customRef)
     layoutRef,
@@ -187,7 +179,6 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
 
     // Mutations
     moveTo,
-    resize,
 
     // Drag handlers
     startDrag,

src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.test.ts

@@ -0,0 +1,138 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { calculateIntrinsicSize } from './calculateIntrinsicSize'
+
+describe('calculateIntrinsicSize', () => {
+  let element: HTMLElement
+
+  beforeEach(() => {
+    // Create a test element
+    element = document.createElement('div')
+    element.style.width = '200px'
+    element.style.height = '100px'
+    document.body.appendChild(element)
+  })
+
+  afterEach(() => {
+    document.body.removeChild(element)
+  })
+
+  it('should calculate intrinsic size and convert to canvas coordinates', () => {
+    // Mock getBoundingClientRect to return specific dimensions
+    const originalGetBoundingClientRect = element.getBoundingClientRect
+    element.getBoundingClientRect = () => ({
+      width: 300,
+      height: 150,
+      top: 0,
+      left: 0,
+      bottom: 150,
+      right: 300,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    })
+
+    const scale = 2
+    const result = calculateIntrinsicSize(element, scale)
+
+    // Should divide by scale to convert from screen to canvas coordinates
+    expect(result).toEqual({
+      width: 150, // 300 / 2
+      height: 75 // 150 / 2
+    })
+
+    element.getBoundingClientRect = originalGetBoundingClientRect
+  })
+
+  it('should restore original size after measuring', () => {
+    const originalWidth = element.style.width
+    const originalHeight = element.style.height
+
+    element.getBoundingClientRect = () => ({
+      width: 300,
+      height: 150,
+      top: 0,
+      left: 0,
+      bottom: 150,
+      right: 300,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    })
+
+    calculateIntrinsicSize(element, 1)
+
+    // Should restore original styles
+    expect(element.style.width).toBe(originalWidth)
+    expect(element.style.height).toBe(originalHeight)
+  })
+
+  it('should handle scale of 1 correctly', () => {
+    element.getBoundingClientRect = () => ({
+      width: 400,
+      height: 200,
+      top: 0,
+      left: 0,
+      bottom: 200,
+      right: 400,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    })
+
+    const result = calculateIntrinsicSize(element, 1)
+
+    expect(result).toEqual({
+      width: 400,
+      height: 200
+    })
+  })
+
+  it('should handle fractional scales', () => {
+    element.getBoundingClientRect = () => ({
+      width: 300,
+      height: 150,
+      top: 0,
+      left: 0,
+      bottom: 150,
+      right: 300,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    })
+
+    const result = calculateIntrinsicSize(element, 0.5)
+
+    expect(result).toEqual({
+      width: 600, // 300 / 0.5
+      height: 300 // 150 / 0.5
+    })
+  })
+
+  it('should temporarily set width and height to auto during measurement', () => {
+    let widthDuringMeasurement = ''
+    let heightDuringMeasurement = ''
+
+    element.getBoundingClientRect = function (this: HTMLElement) {
+      widthDuringMeasurement = this.style.width
+      heightDuringMeasurement = this.style.height
+      return {
+        width: 300,
+        height: 150,
+        top: 0,
+        left: 0,
+        bottom: 150,
+        right: 300,
+        x: 0,
+        y: 0,
+        toJSON: () => ({})
+      }
+    }
+
+    calculateIntrinsicSize(element, 1)
+
+    // During measurement, styles should be set to 'auto'
+    expect(widthDuringMeasurement).toBe('auto')
+    expect(heightDuringMeasurement).toBe('auto')
+  })
+})

src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.ts

@@ -0,0 +1,34 @@
+/**
+ * Calculate the intrinsic (minimum content-based) size of a node element
+ *
+ * Temporarily sets the element to auto-size to measure its natural content dimensions,
+ * then converts from screen coordinates to canvas coordinates using the camera scale.
+ *
+ * @param element - The node element to measure
+ * @param scale - Camera zoom scale for coordinate conversion
+ * @returns The intrinsic minimum size in canvas coordinates
+ */
+export function calculateIntrinsicSize(
+  element: HTMLElement,
+  scale: number
+): { width: number; height: number } {
+  // Store original size to restore later
+  const originalWidth = element.style.width
+  const originalHeight = element.style.height
+
+  // Temporarily set to auto to measure natural content size
+  element.style.width = 'auto'
+  element.style.height = 'auto'
+
+  const intrinsicRect = element.getBoundingClientRect()
+
+  // Restore original size
+  element.style.width = originalWidth
+  element.style.height = originalHeight
+
+  // Convert from screen coordinates to canvas coordinates
+  return {
+    width: intrinsicRect.width / scale,
+    height: intrinsicRect.height / scale
+  }
+}