mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-26 09:19:43 +00:00
fix: Vue Node <-> Litegraph node height offset normalization (#6966)
## Summary Changes the layout store to treat node sizes as body-only measurements while LiteGraph continues to reason about full heights. DOM-driven updates are tagged with `LayoutSource.DOM`, which lets the store strip the title height exactly once before persisting. That classification (a new mutation source - `LayoutSource.DOM`) is accurate because those mutations are triggered by the browser’s layout engine via ResizeObserver, rather than by direct calls into the layout APIs (e.g., `moveNodeTo`, `useNodeDrag`). So all sources are: - `LayoutSource.DOM`: browser layout/ResizeObserver measurements that include the title bar - `LayoutSource.Vue`: direct Vue-driven mutations routed through the layout store - `LayoutSource.Canvas`: legacy LiteGraph/canvas updates that will be phased out over time - `LayoutSource.External`: for multiplayer or syncing with a when going online after making changes offline (in teams/workspace) When layout state flows back into LiteGraph we add the title height just in time for `liteNode.setSize`, so LiteGraph’s rendering stays unchanged. This makes Vue node resizing and workflow persistence deterministic - multiline widgets hold their dimensions across reloads because every path that crosses the layout/LiteGraph boundary performs the same normalization. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6966-normalize-height-at-sites-2b76d73d365081b6bcb4f4ce6a27663a) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
@@ -1,11 +1,9 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import { LiteGraph } from '@/lib/litegraph/src/litegraph'
|
||||
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
||||
import {
|
||||
type LayoutChange,
|
||||
LayoutSource,
|
||||
type NodeLayout
|
||||
} from '@/renderer/core/layout/types'
|
||||
import { LayoutSource } from '@/renderer/core/layout/types'
|
||||
import type { LayoutChange, NodeLayout } from '@/renderer/core/layout/types'
|
||||
|
||||
describe('layoutStore CRDT operations', () => {
|
||||
beforeEach(() => {
|
||||
@@ -304,4 +302,108 @@ describe('layoutStore CRDT operations', () => {
|
||||
expect(recentOps.length).toBeGreaterThanOrEqual(1)
|
||||
expect(recentOps[0].type).toBe('moveNode')
|
||||
})
|
||||
|
||||
it('normalizes DOM-sourced heights before storing', () => {
|
||||
const nodeId = 'dom-node'
|
||||
const layout = createTestNode(nodeId)
|
||||
|
||||
layoutStore.applyOperation({
|
||||
type: 'createNode',
|
||||
entity: 'node',
|
||||
nodeId,
|
||||
layout,
|
||||
timestamp: Date.now(),
|
||||
source: LayoutSource.External,
|
||||
actor: 'test'
|
||||
})
|
||||
|
||||
layoutStore.setSource(LayoutSource.DOM)
|
||||
layoutStore.batchUpdateNodeBounds([
|
||||
{
|
||||
nodeId,
|
||||
bounds: {
|
||||
x: layout.bounds.x,
|
||||
y: layout.bounds.y,
|
||||
width: layout.size.width,
|
||||
height: layout.size.height + LiteGraph.NODE_TITLE_HEIGHT
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
|
||||
expect(nodeRef.value?.size.height).toBe(layout.size.height)
|
||||
expect(nodeRef.value?.size.width).toBe(layout.size.width)
|
||||
expect(nodeRef.value?.position).toEqual(layout.position)
|
||||
})
|
||||
|
||||
it('normalizes very small DOM-sourced heights safely', () => {
|
||||
const nodeId = 'small-dom-node'
|
||||
const layout = createTestNode(nodeId)
|
||||
layout.size.height = 10
|
||||
|
||||
layoutStore.applyOperation({
|
||||
type: 'createNode',
|
||||
entity: 'node',
|
||||
nodeId,
|
||||
layout,
|
||||
timestamp: Date.now(),
|
||||
source: LayoutSource.External,
|
||||
actor: 'test'
|
||||
})
|
||||
|
||||
layoutStore.setSource(LayoutSource.DOM)
|
||||
layoutStore.batchUpdateNodeBounds([
|
||||
{
|
||||
nodeId,
|
||||
bounds: {
|
||||
x: layout.bounds.x,
|
||||
y: layout.bounds.y,
|
||||
width: layout.size.width,
|
||||
height: layout.size.height + LiteGraph.NODE_TITLE_HEIGHT
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
|
||||
expect(nodeRef.value?.size.height).toBeGreaterThanOrEqual(0)
|
||||
})
|
||||
|
||||
it('handles undefined NODE_TITLE_HEIGHT without NaN results', () => {
|
||||
const nodeId = 'undefined-title-height'
|
||||
const layout = createTestNode(nodeId)
|
||||
|
||||
layoutStore.applyOperation({
|
||||
type: 'createNode',
|
||||
entity: 'node',
|
||||
nodeId,
|
||||
layout,
|
||||
timestamp: Date.now(),
|
||||
source: LayoutSource.External,
|
||||
actor: 'test'
|
||||
})
|
||||
|
||||
const originalTitleHeight = LiteGraph.NODE_TITLE_HEIGHT
|
||||
// @ts-expect-error – intentionally simulate undefined runtime value
|
||||
LiteGraph.NODE_TITLE_HEIGHT = undefined
|
||||
|
||||
try {
|
||||
layoutStore.setSource(LayoutSource.DOM)
|
||||
layoutStore.batchUpdateNodeBounds([
|
||||
{
|
||||
nodeId,
|
||||
bounds: {
|
||||
x: layout.bounds.x,
|
||||
y: layout.bounds.y,
|
||||
width: layout.size.width,
|
||||
height: layout.size.height
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
|
||||
expect(nodeRef.value?.size.height).toBe(layout.size.height)
|
||||
} finally {
|
||||
LiteGraph.NODE_TITLE_HEIGHT = originalTitleHeight
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -5,7 +5,9 @@ import { LayoutSource } from '@/renderer/core/layout/types'
|
||||
import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
|
||||
|
||||
// Mock the layout mutations module
|
||||
vi.mock('@/renderer/core/layout/operations/layoutMutations')
|
||||
vi.mock('@/renderer/core/layout/operations/layoutMutations', () => ({
|
||||
useLayoutMutations: vi.fn()
|
||||
}))
|
||||
|
||||
const mockedUseLayoutMutations = vi.mocked(useLayoutMutations)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user