mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-11 16:10:05 +00:00
Implement fit-to-view for Vue nodes (#5782)
## Summary Implemented fit-to-view functionality for Vue nodes with bounds calculation and viewport animation support. https://github.com/user-attachments/assets/2ec221f1-9194-4564-95f9-ad4da80f190a ## Changes - **What**: Added Vue nodes support to fit-to-view command with [bounds calculation](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) and LiteGraph integration - **Dependencies**: Added dependency on `layoutStore` and `selectionBounds` utility ## Review Focus Bounds calculation accuracy for complex node layouts and animation performance with large node selections. Verify proper fallback to legacy LiteGraph behavior when Vue nodes disabled. ```mermaid graph TD A[Fit to View Command] --> B{Vue Nodes Enabled?} B -->|Yes| C[Get Selected Nodes] B -->|No| D[Legacy LiteGraph Method] C --> E{Nodes Selected?} E -->|Yes| F[Calculate Selected Bounds] E -->|No| G[Calculate All Nodes Bounds] F --> H[Convert to LiteGraph Format] G --> H H --> I[Animate to Bounds] D --> J[Canvas fitViewToSelectionAnimated] style A fill:#f9f9f9,stroke:#333,color:#333 style I fill:#f9f9f9,stroke:#333,color:#333 style J fill:#f9f9f9,stroke:#333,color:#333 ``` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5782-Implement-fit-to-view-for-Vue-nodes-27a6d73d365081cb822cd93f557e77b2) by [Unito](https://www.unito.io) --------- Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import type { Bounds, Point } from '@/renderer/core/layout/types'
|
||||
import type { Bounds, NodeLayout, Point } from '@/renderer/core/layout/types'
|
||||
|
||||
export const REROUTE_RADIUS = 8
|
||||
|
||||
@@ -19,3 +19,35 @@ export function boundsIntersect(a: Bounds, b: Bounds): boolean {
|
||||
b.y + b.height < a.y
|
||||
)
|
||||
}
|
||||
|
||||
export function calculateBounds(nodes: NodeLayout[]): Bounds {
|
||||
let minX = Infinity,
|
||||
minY = Infinity
|
||||
let maxX = -Infinity,
|
||||
maxY = -Infinity
|
||||
|
||||
for (const node of nodes) {
|
||||
const bounds = node.bounds
|
||||
minX = Math.min(minX, bounds.x)
|
||||
minY = Math.min(minY, bounds.y)
|
||||
maxX = Math.max(maxX, bounds.x + bounds.width)
|
||||
maxY = Math.max(maxY, bounds.y + bounds.height)
|
||||
}
|
||||
|
||||
return {
|
||||
x: minX,
|
||||
y: minY,
|
||||
width: maxX - minX,
|
||||
height: maxY - minY
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate combined bounds for Vue nodes selection
|
||||
* @param nodes Array of NodeLayout objects to calculate bounds for
|
||||
* @returns Bounds of the nodes or null if no nodes provided
|
||||
*/
|
||||
export function selectionBounds(nodes: NodeLayout[]): Bounds | null {
|
||||
if (nodes.length === 0) return null
|
||||
return calculateBounds(nodes)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user