Fix: Vue <--> Litegraph scaling logic. (#6745)

Consistent names and order of operations. I think this fixes the resizing too. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6745-refactor-Reorganizing-scaling-logic-2b06d73d365081eebc8ff93c87fa69fb) by [Unito](https://www.unito.io)
2026-01-26 19:09:52 +00:00 · 2025-11-21 17:52:20 -08:00
parent f5608435b4
commit d6c5b33fce
2 changed files with 64 additions and 103 deletions
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -79,7 +79,7 @@ export type {
  LGraphTriggerParam
 } from './types/graphTriggers'

-export type rendererType = 'LG' | 'Vue'
+export type RendererType = 'LG' | 'Vue'

 export interface LGraphState {
  lastGroupId: number
@@ -106,7 +106,7 @@ export interface LGraphExtra extends Dictionary<unknown> {
  reroutes?: SerialisableReroute[]
  linkExtensions?: { id: number; parentId: number | undefined }[]
  ds?: DragAndScaleState
-  workflowRendererVersion?: rendererType
+  workflowRendererVersion?: RendererType
 }

 export interface BaseLGraph {
--- a/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
+++ b/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
@@ -1,5 +1,5 @@
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import type { LGraph, rendererType } from '@/lib/litegraph/src/LGraph'
+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'
@@ -13,135 +13,108 @@ import type { SubgraphOutputNode } from '@/lib/litegraph/src/subgraph/SubgraphOu
 const SCALE_FACTOR = 1.2

 export function ensureCorrectLayoutScale(
-  renderer?: rendererType,
+  renderer: RendererType = 'LG',
  targetGraph?: LGraph
 ) {
-  const settingStore = useSettingStore()
-
-  const autoScaleLayoutSetting = settingStore.get(
+  const autoScaleLayoutSetting = useSettingStore().get(
    'Comfy.VueNodes.AutoScaleLayout'
  )

-  if (autoScaleLayoutSetting === false) {
-    return
-  }
-
-  const { shouldRenderVueNodes } = useVueFeatureFlags()
+  if (!autoScaleLayoutSetting) return

  const canvas = comfyApp.canvas
  const graph = targetGraph ?? canvas?.graph

-  if (!graph || !graph.nodes) return
+  if (!graph?.nodes) return

-  // Use renderer from graph, default to 'LG' for the check (but don't modify graph yet)
-  if (!renderer) {
-    // Always assume legacy LG format when unknown (pre-dates this feature)
-    renderer = 'LG'
-  }
+  const { shouldRenderVueNodes } = useVueFeatureFlags()

-  const doesntNeedScale =
-    (renderer === 'LG' && shouldRenderVueNodes.value === false) ||
-    (renderer === 'Vue' && shouldRenderVueNodes.value === true)
+  const needsUpscale = renderer === 'LG' && shouldRenderVueNodes.value
+  const needsDownscale = renderer === 'Vue' && !shouldRenderVueNodes.value

-  if (doesntNeedScale) {
+  if (!needsUpscale && !needsDownscale) {
    // Don't scale, but ensure workflowRendererVersion is set for future checks
-    if (!graph.extra.workflowRendererVersion) {
-      graph.extra.workflowRendererVersion = renderer
-    }
+    graph.extra.workflowRendererVersion ??= renderer
    return
  }

-  const needsUpscale = renderer === 'LG' && shouldRenderVueNodes.value === true
-  const needsDownscale =
-    renderer === 'Vue' && shouldRenderVueNodes.value === false
-
  const lgBounds = createBounds(graph.nodes)

  if (!lgBounds) return

-  const originX = lgBounds[0]
-  const originY = lgBounds[1]
+  const [originX, originY] = lgBounds

  const lgNodesById = new Map(graph.nodes.map((node) => [node.id, node]))

  const yjsMoveNodeUpdates: NodeBoundsUpdate[] = []

-  const scaleFactor = needsUpscale
-    ? SCALE_FACTOR
-    : needsDownscale
-      ? 1 / SCALE_FACTOR
-      : 1
+  const scaleFactor = needsUpscale ? SCALE_FACTOR : 1 / SCALE_FACTOR
+
+  const onActiveGraph = !targetGraph || targetGraph === canvas?.graph

  //TODO: once we remove the need for LiteGraph.NODE_TITLE_HEIGHT in vue nodes we nned to remove everything here.
  for (const node of graph.nodes) {
    const lgNode = lgNodesById.get(node.id)
    if (!lgNode) continue

-    const lgBodyY = lgNode.pos[1]
+    const [oldX, oldY] = lgNode.pos

-    const adjustedY = needsDownscale
-      ? lgBodyY - LiteGraph.NODE_TITLE_HEIGHT / 2
-      : lgBodyY
+    const adjustedY = oldY - (needsUpscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)

-    const relativeX = lgNode.pos[0] - originX
+    const relativeX = oldX - originX
    const relativeY = adjustedY - originY
-    const newX = originX + relativeX * scaleFactor
-    const scaledY = originY + relativeY * scaleFactor
-    const newWidth = lgNode.width * scaleFactor
-    const newHeight = lgNode.height * scaleFactor

-    const finalY = needsUpscale
-      ? scaledY + LiteGraph.NODE_TITLE_HEIGHT / 2
-      : scaledY
+    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

    // 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] = newX
+    lgNode.pos[0] = scaledX
    lgNode.pos[1] = finalY
-    lgNode.size[0] = newWidth
-    lgNode.size[1] =
-      newHeight - (needsDownscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
+    lgNode.size[0] = scaledWidth
+    lgNode.size[1] = scaledHeight

    // Track updates for layout store (only if this is the active graph)
-    if (!targetGraph || targetGraph === canvas?.graph) {
+    if (onActiveGraph) {
      yjsMoveNodeUpdates.push({
        nodeId: String(lgNode.id),
        bounds: {
-          x: newX,
+          x: scaledX,
          y: finalY,
-          width: newWidth,
-          height: newHeight - (needsDownscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)
+          width: scaledWidth,
+          height: scaledHeight
        }
      })
    }
  }

-  if (
-    (!targetGraph || targetGraph === canvas?.graph) &&
-    yjsMoveNodeUpdates.length > 0
-  ) {
+  if (onActiveGraph && yjsMoveNodeUpdates.length > 0) {
    layoutStore.batchUpdateNodeBounds(yjsMoveNodeUpdates)
  }

  for (const reroute of graph.reroutes.values()) {
-    const oldX = reroute.pos[0]
-    const oldY = reroute.pos[1]
+    const [oldX, oldY] = reroute.pos

    const relativeX = oldX - originX
    const relativeY = oldY - originY
-    const newX = originX + relativeX * scaleFactor
-    const newY = originY + relativeY * scaleFactor

-    reroute.pos = [newX, newY]
+    const scaledX = originX + relativeX * scaleFactor
+    const scaledY = originY + relativeY * scaleFactor

-    if (
-      (!targetGraph || targetGraph === canvas?.graph) &&
-      shouldRenderVueNodes.value
-    ) {
+    reroute.pos = [scaledX, scaledY]
+
+    if (onActiveGraph && shouldRenderVueNodes.value) {
      const layoutMutations = useLayoutMutations()
      layoutMutations.moveReroute(
        reroute.id,
-        { x: newX, y: newY },
+        { x: scaledX, y: scaledY },
        { x: oldX, y: oldY }
      )
    }
@@ -153,60 +126,48 @@ export function ensureCorrectLayoutScale(
      graph.outputNode as SubgraphOutputNode
    ]
    for (const ioNode of ioNodes) {
-      const oldX = ioNode.pos[0]
-      const oldY = ioNode.pos[1]
-      const oldWidth = ioNode.size[0]
-      const oldHeight = ioNode.size[1]
+      const [oldX, oldY] = ioNode.pos
+      const [oldWidth, oldHeight] = ioNode.size

      const relativeX = oldX - originX
      const relativeY = oldY - originY
-      const newX = originX + relativeX * scaleFactor
-      const newY = originY + relativeY * scaleFactor
-      const newWidth = oldWidth * scaleFactor
-      const newHeight = oldHeight * scaleFactor

-      ioNode.pos = [newX, newY]
-      ioNode.size = [newWidth, newHeight]
+      const scaledX = originX + relativeX * scaleFactor
+      const scaledY = originY + relativeY * scaleFactor
+
+      const scaledWidth = oldWidth * scaleFactor
+      const scaledHeight = oldHeight * scaleFactor
+
+      ioNode.pos = [scaledX, scaledY]
+      ioNode.size = [scaledWidth, scaledHeight]
    }
  }

  graph.groups.forEach((group) => {
-    const originalPosX = group.pos[0]
-    const originalPosY = group.pos[1]
-    const originalWidth = group.size[0]
-    const originalHeight = group.size[1]
+    const [oldX, oldY] = group.pos
+    const [oldWidth, oldHeight] = group.size

-    const adjustedY = needsDownscale
-      ? originalPosY - LiteGraph.NODE_TITLE_HEIGHT
-      : originalPosY
+    const adjustedY = oldY - (needsUpscale ? LiteGraph.NODE_TITLE_HEIGHT : 0)

-    const relativeX = originalPosX - originX
+    const relativeX = oldX - originX
    const relativeY = adjustedY - originY

-    const newWidth = originalWidth * scaleFactor
-    const newHeight = originalHeight * scaleFactor
-
    const scaledX = originX + relativeX * scaleFactor
    const scaledY = originY + relativeY * scaleFactor

-    const finalY = needsUpscale
-      ? scaledY + LiteGraph.NODE_TITLE_HEIGHT
-      : scaledY
+    const scaledWidth = oldWidth * scaleFactor
+    const scaledHeight = oldHeight * scaleFactor
+
+    const finalY = scaledY + (needsUpscale ? 0 : LiteGraph.NODE_TITLE_HEIGHT)

    group.pos = [scaledX, finalY]
-    group.size = [newWidth, newHeight]
+    group.size = [scaledWidth, scaledHeight]
  })

-  if ((!targetGraph || targetGraph === canvas?.graph) && canvas) {
+  if (onActiveGraph && canvas) {
    const originScreen = canvas.ds.convertOffsetToCanvas([originX, originY])
    canvas.ds.changeScale(canvas.ds.scale / scaleFactor, originScreen)
  }

-  if (needsUpscale) {
-    graph.extra.workflowRendererVersion = 'Vue'
-  }
-
-  if (needsDownscale) {
-    graph.extra.workflowRendererVersion = 'LG'
-  }
+  graph.extra.workflowRendererVersion = needsUpscale ? 'Vue' : 'LG'
 }