mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 02:32:18 +00:00
Fix node sizing in vue mode (#6289)
Before  After  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:
@@ -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`
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user