mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
fix: Node Sizing that works in Firefox (#6352)
## Summary I still love Firefox, even if it's special. (Swap height/width and min-height min-width logic) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6352-fix-Node-Sizing-that-works-in-Firefox-29a6d73d3650816b9a2fd271445e193f) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
:class="
|
||||
cn(
|
||||
'bg-node-component-surface lg-node absolute',
|
||||
'min-h-min min-w-min contain-style contain-layout',
|
||||
'h-min w-min contain-style contain-layout min-h-(--node-height) min-w-(--node-width)',
|
||||
'rounded-2xl touch-none flex flex-col',
|
||||
'border-1 border-solid border-node-component-border',
|
||||
// hover (only when node should handle events)
|
||||
@@ -270,8 +270,14 @@ const handleContextMenu = (event: MouseEvent) => {
|
||||
onMounted(() => {
|
||||
// Set initial DOM size from layout store, but respect intrinsic content minimum
|
||||
if (size.value && nodeContainerRef.value) {
|
||||
nodeContainerRef.value.style.width = `${size.value.width}px`
|
||||
nodeContainerRef.value.style.height = `${size.value.height}px`
|
||||
nodeContainerRef.value.style.setProperty(
|
||||
'--node-width',
|
||||
`${size.value.width}px`
|
||||
)
|
||||
nodeContainerRef.value.style.setProperty(
|
||||
'--node-height',
|
||||
`${size.value.height}px`
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -318,8 +324,8 @@ const { startResize } = useNodeResize(
|
||||
if (isCollapsed.value) return
|
||||
|
||||
// Apply size directly to DOM element - ResizeObserver will pick this up
|
||||
element.style.width = `${result.size.width}px`
|
||||
element.style.height = `${result.size.height}px`
|
||||
element.style.setProperty('--node-width', `${result.size.width}px`)
|
||||
element.style.setProperty('--node-height', `${result.size.height}px`)
|
||||
|
||||
const currentPosition = position.value
|
||||
const deltaX = Math.abs(result.position.x - currentPosition.x)
|
||||
@@ -345,8 +351,8 @@ const handleResizePointerDown = (direction: ResizeHandleDirection) => {
|
||||
whenever(isCollapsed, () => {
|
||||
const element = nodeContainerRef.value
|
||||
if (!element) return
|
||||
element.style.width = ''
|
||||
element.style.height = ''
|
||||
element.style.setProperty('--node-width', '')
|
||||
element.style.setProperty('--node-height', '')
|
||||
})
|
||||
|
||||
// Check if node has custom content (like image/video outputs)
|
||||
|
||||
Reference in New Issue
Block a user