mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-02 22:37:32 +00:00
f629d325b2
## Summary ### Problem: The Vue nodes renderer/feature introduces new designs for each node i.e. the equivalent Litegraph node design is smaller and the vue node design is non uniformly larger. ### Example: Litegraph Ksampler node: 200w x 220h <img width="200" height="220" alt="image" src="https://github.com/user-attachments/assets/eef0117b-7e02-407d-98ab-c610fd1ec54c" /> Vue Node Ksampler node: 445w x 430h <img width="445" height="430" alt="image" src="https://github.com/user-attachments/assets/e78d9d45-5b32-4e8d-bf1c-bce1c699037f" /> This means if users load a workflow in Litegraph and then switches to Vue nodes renderer the nodes are using the same Litegraph positions which would cause a visual overlap and overall look broken. ### Example: <img width="1510" height="726" alt="image" src="https://github.com/user-attachments/assets/3b7ae9d2-6057-49b2-968e-c531a969fac4" /> <img width="1475" height="850" alt="image" src="https://github.com/user-attachments/assets/ea10f361-09bd-4daa-97f1-6b45b5dde389" /> ### Solution: Scale the positions of the nodes in lite graph radially from the center of the bounds of all nodes. And then simply move the Vue nodes to those new positions. 1. Get the `center of the bounds of all LG nodes`. 2. Get the `xy of each LG node`. 3. Get the vector from `center of the bounds of all LG nodes` `-` `xy of each LG node`. 4. Scale it by a factor (e.g. 1.75x which is the average Vue node size increase plus some visual padding.) 5. Move each Vue node to the scaled `xy of each LG node`. Result: The nodes are spaced apart removing overlaps while keeping the spatial layout intact. <img width="2173" height="1096" alt="image" src="https://github.com/user-attachments/assets/7817d866-4051-47bb-a589-69ca77a0bfd3" /> ### Further concerns. This vector scaling algorithm needs to run once per workflow when in vue nodes. This means when in Litegraph and switching to Vue nodes, it needs to run before the nodes render. And then now that the entire app is in vue nodes, we need to run it each time we load a workflow. However, once its run, we do not need to run it again. Therefore we must persist a flag that it has run somewhere. This PR also adds that feature by leveraging the `extra` field in the workflow schema. --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: JakeSchroeder <jake@axiom.co>