fix: correct Vue node selection box detection accuracy (#7741)
## Summary Remove double-counting of NODE_TITLE_HEIGHT in layout sync. The title height was being added both in useLayoutSync and in LiteGraph's measure() function, causing boundingRect to be 30px taller than actual DOM. This caused selection box to detect nodes ~30px below their actual bottom. fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7580 ## Screenshots (if applicable) before https://github.com/user-attachments/assets/babf0b9d-174e-4ec3-a3bb-18e4f9d88d09 after https://github.com/user-attachments/assets/4f9989a5-4d3c-4303-bd1b-70ca70cb8f15 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7741-fix-correct-Vue-node-selection-box-detection-accuracy-2d26d73d3650817cbe80f98a3bf1abf1) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
@@ -8,7 +8,6 @@ import { onUnmounted, ref } from 'vue'
|
||||
|
||||
import type { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
||||
import { addNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
|
||||
|
||||
/**
|
||||
* Composable for syncing LiteGraph with the Layout system
|
||||
@@ -44,13 +43,15 @@ export function useLayoutSync() {
|
||||
liteNode.pos[1] = layout.position.y
|
||||
}
|
||||
|
||||
const targetHeight = addNodeTitleHeight(layout.size.height)
|
||||
// Note: layout.size.height is the content height without title.
|
||||
// LiteGraph's measure() will add titleHeight to get boundingRect.
|
||||
// Do NOT use addNodeTitleHeight here - that would double-count the title.
|
||||
if (
|
||||
liteNode.size[0] !== layout.size.width ||
|
||||
liteNode.size[1] !== targetHeight
|
||||
liteNode.size[1] !== layout.size.height
|
||||
) {
|
||||
// Use setSize() to trigger onResize callback
|
||||
liteNode.setSize([layout.size.width, targetHeight])
|
||||
liteNode.setSize([layout.size.width, layout.size.height])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,3 @@ import { LiteGraph } from '@/lib/litegraph/src/litegraph'
|
||||
|
||||
export const removeNodeTitleHeight = (height: number) =>
|
||||
Math.max(0, height - (LiteGraph.NODE_TITLE_HEIGHT || 0))
|
||||
|
||||
export const addNodeTitleHeight = (height: number) =>
|
||||
height + LiteGraph.NODE_TITLE_HEIGHT
|
||||
|
||||