diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index d8f10e4c8..b4d6326ef 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/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) diff --git a/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts b/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts index c58b0db6f..70cc725e9 100644 --- a/src/renderer/extensions/vueNodes/interactions/resize/resizeMath.ts +++ b/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 diff --git a/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts b/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts index 2566fe41b..47d0d1811 100644 --- a/src/renderer/extensions/vueNodes/interactions/resize/useNodeResize.ts +++ b/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) diff --git a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.test.ts b/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.test.ts index cd34f8a3f..8ad2ac642 100644 --- a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.test.ts +++ b/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') diff --git a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.ts b/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.ts index 36da7cd82..df2feb1f1 100644 --- a/src/renderer/extensions/vueNodes/utils/calculateIntrinsicSize.ts +++ b/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() + } } }