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>

tests-ui/tests/renderer/core/layout/utils/layoutMath.test.ts

@@ -1,8 +1,10 @@
 import { describe, expect, it } from 'vitest'
 
+import type { NodeLayout } from '@/renderer/core/layout/types'
 import {
   REROUTE_RADIUS,
   boundsIntersect,
+  calculateBounds,
   pointInBounds
 } from '@/renderer/core/layout/utils/layoutMath'
 
@@ -46,4 +48,75 @@ describe('layoutMath utils', () => {
       expect(REROUTE_RADIUS).toBeGreaterThan(0)
     })
   })
+
+  describe('calculateBounds', () => {
+    const createTestNode = (
+      id: string,
+      x: number,
+      y: number,
+      width: number,
+      height: number
+    ): NodeLayout => ({
+      id,
+      position: { x, y },
+      size: { width, height },
+      zIndex: 0,
+      visible: true,
+      bounds: { x, y, width, height }
+    })
+
+    it('calculates bounds for single node', () => {
+      const nodes = [createTestNode('1', 10, 20, 100, 50)]
+      const bounds = calculateBounds(nodes)
+
+      expect(bounds).toEqual({
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 50
+      })
+    })
+
+    it('calculates combined bounds for multiple nodes', () => {
+      const nodes = [
+        createTestNode('1', 0, 0, 50, 50), // Top-left: (0,0) to (50,50)
+        createTestNode('2', 100, 100, 30, 40), // Bottom-right: (100,100) to (130,140)
+        createTestNode('3', 25, 75, 20, 10) // Middle: (25,75) to (45,85)
+      ]
+      const bounds = calculateBounds(nodes)
+
+      expect(bounds).toEqual({
+        x: 0, // leftmost
+        y: 0, // topmost
+        width: 130, // rightmost (130) - leftmost (0)
+        height: 140 // bottommost (140) - topmost (0)
+      })
+    })
+
+    it('handles nodes with negative positions', () => {
+      const nodes = [
+        createTestNode('1', -50, -30, 40, 20), // (-50,-30) to (-10,-10)
+        createTestNode('2', 10, 15, 25, 35) // (10,15) to (35,50)
+      ]
+      const bounds = calculateBounds(nodes)
+
+      expect(bounds).toEqual({
+        x: -50,
+        y: -30,
+        width: 85, // 35 - (-50)
+        height: 80 // 50 - (-30)
+      })
+    })
+
+    it('handles empty array', () => {
+      const bounds = calculateBounds([])
+
+      expect(bounds).toEqual({
+        x: Infinity,
+        y: Infinity,
+        width: -Infinity,
+        height: -Infinity
+      })
+    })
+  })
 })