Unify zoom to fit implementation (#7393)

Unifys the zoom to fit code between litegraph and vue

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/62390297-d16d-4f0e-9330-add365222f4e"
/>| <img width="360" alt="after"
src="https://github.com/user-attachments/assets/d43ad869-58a6-4614-b7fd-9a60bc3d7bac"
/>|

See [this
comment](https://github.com/Comfy-Org/ComfyUI_frontend/issues/7195#issuecomment-3643714539)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7393-Unify-zoom-to-fit-implementation-2c66d73d36508198a757eedd2d7bd00b)
by [Unito](https://www.unito.io)

src/composables/useCoreCommands.ts

@@ -32,8 +32,6 @@ import {
   useCanvasStore,
   useTitleEditorStore
 } from '@/renderer/core/canvas/canvasStore'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { selectionBounds } from '@/renderer/core/layout/utils/layoutMath'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
@@ -343,53 +341,15 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'Zoom to fit',
       category: 'view-controls' as const,
       function: () => {
-        const vueNodesEnabled = useSettingStore().get('Comfy.VueNodes.Enabled')
-
-        if (vueNodesEnabled) {
-          // Get nodes from Vue stores
-          const canvasStore = useCanvasStore()
-          const selectedNodeIds = canvasStore.selectedNodeIds
-          const allNodes = layoutStore.getAllNodes().value
-
-          // Get nodes to fit - selected if any, otherwise all
-          const nodesToFit =
-            selectedNodeIds.size > 0
-              ? Array.from(selectedNodeIds)
-                  .map((id) => allNodes.get(id))
-                  .filter((node) => node != null)
-              : Array.from(allNodes.values())
-
-          // Use Vue nodes bounds calculation
-          const bounds = selectionBounds(nodesToFit)
-          if (!bounds) {
-            toastStore.add({
-              severity: 'error',
-              summary: t('toastMessages.emptyCanvas'),
-              life: 3000
-            })
-            return
-          }
-
-          // Convert to LiteGraph format and animate
-          const lgBounds = [
-            bounds.x,
-            bounds.y,
-            bounds.width,
-            bounds.height
-          ] as const
-          const setDirty = () => app.canvas.setDirty(true, true)
-          app.canvas.ds.animateToBounds(lgBounds, setDirty)
-        } else {
-          if (app.canvas.empty) {
-            toastStore.add({
-              severity: 'error',
-              summary: t('toastMessages.emptyCanvas'),
-              life: 3000
-            })
-            return
-          }
-          app.canvas.fitViewToSelectionAnimated()
+        if (app.canvas.empty) {
+          toastStore.add({
+            severity: 'error',
+            summary: t('toastMessages.emptyCanvas'),
+            life: 3000
+          })
+          return
         }
+        app.canvas.fitViewToSelectionAnimated()
       }
     },
     {

src/renderer/core/layout/utils/layoutMath.ts

@@ -41,13 +41,3 @@ export function calculateBounds(nodes: NodeLayout[]): Bounds {
     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)
-}