Initial resize POC

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

@@ -275,10 +275,7 @@ const handleContextMenu = (event: MouseEvent) => {
 onMounted(() => {
   // 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
-    )
+    const intrinsicMin = calculateIntrinsicSize(nodeContainerRef.value)
 
     // Use the larger of stored size or intrinsic minimum
     const finalWidth = Math.max(size.value.width, intrinsicMin.width)

src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts

@@ -103,14 +103,14 @@ export function createResizeSession(config: {
 }) {
   const startSize = { ...config.startSize }
   const startPosition = { ...config.startPosition }
-  const minSize = { ...config.minSize }
+  //const minSize = { ...config.minSize }
   const handle = config.handle
 
   return (delta: Point, snapFn?: (size: Size) => Size) =>
     computeResizeOutcome({
       startSize,
       startPosition,
-      minSize,
+      minSize: config.minSize,
       handle,
       delta,
       snapFn

src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts

@@ -76,7 +76,7 @@ export function useNodeResize(
       height: rect.height / scale
     }
 
-    const minSize = calculateIntrinsicSize(nodeElement, scale)
+    const minSize = calculateIntrinsicSize(nodeElement)
 
     // Track shift key state and sync to canvas for snap preview
     const stopShiftSync = trackShiftKey(event)

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

@@ -32,10 +32,8 @@ describe('calculateIntrinsicSize', () => {
       toJSON: () => ({})
     })
 
-    const scale = 2
-    const result = calculateIntrinsicSize(element, scale)
+    const result = calculateIntrinsicSize(element)
 
-    // Should divide by scale to convert from screen to canvas coordinates
     expect(result).toEqual({
       width: 150, // 300 / 2
       height: 75 // 150 / 2
@@ -60,7 +58,7 @@ describe('calculateIntrinsicSize', () => {
       toJSON: () => ({})
     })
 
-    calculateIntrinsicSize(element, 1)
+    calculateIntrinsicSize(element)
 
     // Should restore original styles
     expect(element.style.width).toBe(originalWidth)
@@ -80,7 +78,7 @@ describe('calculateIntrinsicSize', () => {
       toJSON: () => ({})
     })
 
-    const result = calculateIntrinsicSize(element, 1)
+    const result = calculateIntrinsicSize(element)
 
     expect(result).toEqual({
       width: 400,
@@ -101,7 +99,7 @@ describe('calculateIntrinsicSize', () => {
       toJSON: () => ({})
     })
 
-    const result = calculateIntrinsicSize(element, 0.5)
+    const result = calculateIntrinsicSize(element)
 
     expect(result).toEqual({
       width: 600, // 300 / 0.5
@@ -129,7 +127,7 @@ describe('calculateIntrinsicSize', () => {
       }
     }
 
-    calculateIntrinsicSize(element, 1)
+    calculateIntrinsicSize(element)
 
     // During measurement, styles should be set to 'auto'
     expect(widthDuringMeasurement).toBe('auto')

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

@@ -8,27 +8,40 @@
  * @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 } {
+export function calculateIntrinsicSize(element: HTMLElement): {
+  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'
+  element.style.width = 'min-content'
+  element.style.height = 'min-content'
 
-  const intrinsicRect = element.getBoundingClientRect()
+  const intrinsicRect = {
+    width: element.clientWidth,
+    height: element.clientHeight
+  }
 
   // Restore original size
   element.style.width = originalWidth
   element.style.height = originalHeight
+  const widgets = [
+    ...element.querySelectorAll('.lg-node-widgets > div > div:nth-child(2)')
+  ]
+
+  const widgetHeight = () => {
+    return widgets.map((w) => w.clientHeight).reduce((a, b) => a + b, 0)
+  }
+  const withoutWidgets = intrinsicRect.height - widgetHeight()
 
   // Convert from screen coordinates to canvas coordinates
   return {
-    width: intrinsicRect.width / scale,
-    height: intrinsicRect.height / scale
+    width: intrinsicRect.width,
+    get height() {
+      return withoutWidgets + widgetHeight()
+    }
   }
 }