fit view:

- fit view to canvas selection
- fit view to whole graph when nothing is selected
- add button to graph canvas menu
- assign default keybinding '.'

Author: bezo97

src/components/graph/GraphCanvasMenu.vue

@@ -16,12 +16,19 @@
       @mousedown="repeat('Comfy.Canvas.ZoomOut')"
       @mouseup="stopRepeat"
     />
+    <hr />
     <Button
       severity="secondary"
       icon="pi pi-expand"
       v-tooltip.left="t('graphCanvasMenu.resetView')"
       @click="() => commandStore.execute('Comfy.Canvas.ResetView')"
     />
+    <Button
+      severity="secondary"
+      icon="pi pi-arrow-down-left-and-arrow-up-right-to-center"
+      v-tooltip.left="t('graphCanvasMenu.fitView')"
+      @click="() => commandStore.execute('Comfy.Canvas.FitView')"
+    />
     <Button
       severity="secondary"
       v-tooltip.left="
@@ -96,4 +103,9 @@ const stopRepeat = () => {
   margin: 0;
   border-radius: 0;
 }
+
+.p-buttongroup-vertical hr {
+  margin: 0;
+  border-color: var(--p-panel-border-color);
+}
 </style>

src/i18n.ts

@@ -111,6 +111,7 @@ const messages = {
       zoomIn: 'Zoom In',
       zoomOut: 'Zoom Out',
       resetView: 'Reset View',
+      fitView: 'Fit View',
       selectMode: 'Select Mode',
       panMode: 'Pan Mode',
       toggleLinkVisibility: 'Toggle Link Visibility'
@@ -225,6 +226,7 @@ const messages = {
       zoomIn: '放大',
       zoomOut: '缩小',
       resetView: '重置视图',
+      fitView: 'Fit View',
       selectMode: '选择模式',
       panMode: '平移模式',
       toggleLinkVisibility: '切换链接可见性'
@@ -342,6 +344,7 @@ const messages = {
       zoomIn: 'Увеличить',
       zoomOut: 'Уменьшить',
       resetView: 'Сбросить вид',
+      fitView: 'Fit View',
       selectMode: 'Выбрать режим',
       panMode: 'Режим панорамирования',
       toggleLinkVisibility: 'Переключить видимость ссылок'

src/scripts/app.ts

@@ -27,6 +27,7 @@ import { ComfyAppMenu } from './ui/menu/index'
 import { getStorageValue } from './utils'
 import { ComfyWorkflowManager, ComfyWorkflow } from './workflows'
 import {
+  LGraphGroup,
   LGraphCanvas,
   LGraph,
   LGraphNode,
@@ -2977,7 +2978,22 @@ export class ComfyApp {
   public goToNode(nodeId: NodeId) {
     const graphNode = this.graph.getNodeById(nodeId)
     if (!graphNode) return
-    this.canvas.animateToNode(graphNode)
+    this.canvas.animateToBounds(LGraphGroup.createBounds([graphNode]))
+  }
+
+  /**
+   * Fits the view to the selected nodes with animation.
+   * If nothing is selected, the view is fitted around all nodes in the graph.
+   */
+  fitView() {
+    let selection: LGraphNode[]
+    selection = Array.from(app.canvas.selectedItems.values())
+      .map((i) => this.graph.getNodeById(i.id))
+      .filter((i) => i !== null)
+    if (selection.length === 0) {
+      selection = this.graph.nodes
+    }
+    this.canvas.animateToBounds(LGraphGroup.createBounds(selection))
   }
 }
 

src/stores/commandStore.ts

@@ -295,6 +295,12 @@ export const useCommandStore = defineStore('command', () => {
         app.canvas.setDirty(true, true)
       }
     },
+    {
+      id: 'Comfy.Canvas.FitView',
+      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
+      label: 'Fit view to selected nodes',
+      function: () => app.fitView()
+    },
     {
       id: 'Comfy.Canvas.ToggleLock',
       icon: 'pi pi-lock',

src/stores/coreKeybindings.ts

@@ -130,6 +130,13 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
     commandId: 'Comfy.Canvas.ZoomOut',
     targetSelector: '#graph-canvas'
   },
+  {
+    combo: {
+      key: '.'
+    },
+    commandId: 'Comfy.Canvas.FitView',
+    targetSelector: '#graph-canvas'
+  },
   {
     combo: {
       key: 'p'