fix: layout scale to handle downscale correctly (#7109)

## Summary

Fixes drift when switching between modes introduced after
https://github.com/Comfy-Org/ComfyUI_frontend/pull/6966

## Changes

- **What**: ensureCorrectLayoutScale

## Screenshots (if applicable)


https://github.com/user-attachments/assets/e40803f1-8ae5-4890-bc1a-3f2413a35c7d


https://www.notion.so/Bug-Spamming-Nodes-2-0-button-causes-nodes-to-grow-longer-2bd6d73d3650818492a4e0cc53da7017

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7109-fix-layout-scale-to-handle-downscale-correctly-2be6d73d365081c29fe2c481feafebc1)
by [Unito](https://www.unito.io)
This commit is contained in:
Simula_r
2025-12-02 17:52:31 -08:00
committed by GitHub
parent 2b7b100e2e
commit 5c330fdd25

View File

@@ -1,6 +1,5 @@
import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
import type { LGraph, RendererType } from '@/lib/litegraph/src/LGraph'
import { LiteGraph } from '@/lib/litegraph/src/litegraph'
import { createBounds } from '@/lib/litegraph/src/measure'
import { useSettingStore } from '@/platform/settings/settingStore'
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -9,6 +8,7 @@ import type { NodeBoundsUpdate } from '@/renderer/core/layout/types'
import { app as comfyApp } from '@/scripts/app'
import type { SubgraphInputNode } from '@/lib/litegraph/src/subgraph/SubgraphInputNode'
import type { SubgraphOutputNode } from '@/lib/litegraph/src/subgraph/SubgraphOutputNode'
import { LiteGraph } from '@/lib/litegraph/src/litegraph'
const SCALE_FACTOR = 1.2
@@ -59,25 +59,22 @@ export function ensureCorrectLayoutScale(
const [oldX, oldY] = lgNode.pos
const adjustedY = oldY - (needsUpscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
const relativeX = oldX - originX
const relativeY = adjustedY - originY
const relativeY = oldY - originY
const scaledX = originX + relativeX * scaleFactor
const scaledY = originY + relativeY * scaleFactor
const scaledWidth = lgNode.width * scaleFactor
const scaledHeight =
lgNode.height * scaleFactor -
(needsUpscale ? 0 : LiteGraph.NODE_TITLE_HEIGHT)
const finalY = scaledY + (needsUpscale ? 0 : LiteGraph.NODE_TITLE_HEIGHT) // Litegraph Position further down
const scaledHeight = needsUpscale
? lgNode.size[1] * scaleFactor + LiteGraph.NODE_TITLE_HEIGHT
: (lgNode.size[1] - LiteGraph.NODE_TITLE_HEIGHT) * scaleFactor
// Directly update LiteGraph node to ensure immediate consistency
// Dont need to reference vue directly because the pos and dims are already in yjs
lgNode.pos[0] = scaledX
lgNode.pos[1] = finalY
lgNode.pos[1] = scaledY
lgNode.size[0] = scaledWidth
lgNode.size[1] = scaledHeight
@@ -87,7 +84,7 @@ export function ensureCorrectLayoutScale(
nodeId: String(lgNode.id),
bounds: {
x: scaledX,
y: finalY,
y: scaledY,
width: scaledWidth,
height: scaledHeight
}
@@ -147,10 +144,8 @@ export function ensureCorrectLayoutScale(
const [oldX, oldY] = group.pos
const [oldWidth, oldHeight] = group.size
const adjustedY = oldY - (needsUpscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
const relativeX = oldX - originX
const relativeY = adjustedY - originY
const relativeY = oldY - originY
const scaledX = originX + relativeX * scaleFactor
const scaledY = originY + relativeY * scaleFactor
@@ -158,9 +153,7 @@ export function ensureCorrectLayoutScale(
const scaledWidth = oldWidth * scaleFactor
const scaledHeight = oldHeight * scaleFactor
const finalY = scaledY + (needsUpscale ? 0 : LiteGraph.NODE_TITLE_HEIGHT)
group.pos = [scaledX, finalY]
group.pos = [scaledX, scaledY]
group.size = [scaledWidth, scaledHeight]
})