mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-26 17:54:14 +00:00
Feat/vue noes arrange alg improved (#6357)
## Summary
Improve the previous [vue node arrange
alg](5a1284660c/src/renderer/extensions/vueNodes/layout/scaleLayoutForVueNodes.ts)
to match Litegraph much closer visually.
- In addition to the scaling of the LG node's x,y and then setting the
vue nodes position to that, we can also scale the width and height of
the LG node and set that for the Vue node wxh.
- Change from scaling from the center to the top left
- Change the zoom offset to account for the scale for seamless
transition
## Screenshots (if applicable)
<img width="1868" height="1646" alt="image"
src="https://github.com/user-attachments/assets/bc816819-211f-4619-a02a-8d167b5dc1fd"
/>
<img width="1868" height="1648" alt="image (1)"
src="https://github.com/user-attachments/assets/61faf530-1994-4cf9-bca9-a7ab6f9740c2"
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6357-Feat-vue-noes-arrange-alg-improved-29b6d73d365081e7813bd6f19ce1202a)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: JakeSchroeder <jake@axiom.co>
This commit is contained in:
@@ -5,7 +5,6 @@ import { reactive, unref } from 'vue'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
|
||||
import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
|
||||
import { registerProxyWidgets } from '@/core/graph/subgraph/proxyWidget'
|
||||
import { st, t } from '@/i18n'
|
||||
import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
|
||||
@@ -99,7 +98,7 @@ import { $el, ComfyUI } from './ui'
|
||||
import { ComfyAppMenu } from './ui/menu/index'
|
||||
import { clone } from './utils'
|
||||
import { type ComfyWidgetConstructor } from './widgets'
|
||||
import { scaleLayoutForVueNodes } from '@/renderer/extensions/vueNodes/layout/scaleLayoutForVueNodes'
|
||||
import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
|
||||
|
||||
export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
|
||||
|
||||
@@ -1184,16 +1183,7 @@ export class ComfyApp {
|
||||
// @ts-expect-error Discrepancies between zod and litegraph - in progress
|
||||
this.graph.configure(graphData)
|
||||
|
||||
const vueMode = useVueFeatureFlags().shouldRenderVueNodes.value
|
||||
|
||||
if (!this.graph.extra) {
|
||||
this.graph.extra = {}
|
||||
}
|
||||
|
||||
if (vueMode && !this.graph.extra.vueNodesScaled) {
|
||||
scaleLayoutForVueNodes()
|
||||
this.graph.extra.vueNodesScaled = true
|
||||
}
|
||||
ensureCorrectLayoutScale()
|
||||
|
||||
if (
|
||||
restore_view &&
|
||||
|
||||
Reference in New Issue
Block a user