Fix node sizing in vue mode (#6289)

Before

![broken-resize](https://github.com/user-attachments/assets/1d3651f7-8589-439c-99d1-fa67c5970945)
After

![vue-resize](https://github.com/user-attachments/assets/ef97ea8f-b601-4a5c-9c6a-34d3f4b776d2)

Also add ~~content~~
[contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
styling for improved render performance.

Future:
- Update size scaling for WidgetLayoutField widgets.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6289-Fix-node-sizing-in-vue-mode-2986d73d365081ac8fa0da35a635b226)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
AustinMroz
2025-10-28 12:18:57 -07:00
committed by GitHub
parent b03cf7e11d
commit 6e4471ad62
17 changed files with 15 additions and 291 deletions

View File

@@ -8,8 +8,9 @@
:data-node-id="nodeData.id"
:class="
cn(
'bg-node-component-surface',
'lg-node absolute rounded-2xl touch-none flex flex-col',
'bg-node-component-surface lg-node absolute',
'min-h-min min-w-min contain-style contain-layout',
'rounded-2xl touch-none flex flex-col',
'border-1 border-solid border-node-component-border',
// hover (only when node should handle events)
shouldHandleNodePointerEvents &&
@@ -83,7 +84,7 @@
<!-- Node Body - rendered based on LOD level and collapsed state -->
<div
class="flex min-h-0 flex-1 flex-col gap-4 pb-4"
class="flex min-h-min min-w-min flex-1 flex-col gap-4 pb-4"
:data-testid="`node-body-${nodeData.id}`"
>
<!-- Slots only rendered at full detail -->
@@ -150,7 +151,6 @@ import { cn } from '@/utils/tailwindUtil'
import type { ResizeHandleDirection } from '../interactions/resize/resizeMath'
import { useNodeResize } from '../interactions/resize/useNodeResize'
import { calculateIntrinsicSize } from '../utils/calculateIntrinsicSize'
import LivePreview from './LivePreview.vue'
import NodeContent from './NodeContent.vue'
import NodeHeader from './NodeHeader.vue'
@@ -269,18 +269,9 @@ 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
)
// 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`
if (size.value && nodeContainerRef.value) {
nodeContainerRef.value.style.width = `${size.value.width}px`
nodeContainerRef.value.style.height = `${size.value.height}px`
}
})