Fit view to bounds (#1474)

* 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 '.'

* Adjust on changed APIs

* Update litegraph

---------

Co-authored-by: huchenlei <huchenlei@proton.me>

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.3.37",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/litegraph": "^0.8.23",
+        "@comfyorg/litegraph": "^0.8.24",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
         "axios": "^1.7.4",
@@ -1919,9 +1919,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.23",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.23.tgz",
-      "integrity": "sha512-XSZxWfAlINOoh2NPVK8wTxkJbwlzb7fW7KyJy4PZQmZCYu5cI4d+UDU6MqvvcXNSFp5lckup65JHlfnvaX6AvQ==",
+      "version": "0.8.24",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.24.tgz",
+      "integrity": "sha512-jlr0oR0fwtP3r+2nQTo73xq8URyqWnhQrNfmrHsw893pVM1SXEOor8KdzGy9pZ0dxTRLS8afityBQLO0pBDKeg==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/litegraph": "^0.8.23",
+    "@comfyorg/litegraph": "^0.8.24",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "axios": "^1.7.4",

src/components/graph/GraphCanvasMenu.vue

@@ -19,8 +19,8 @@
     <Button
       severity="secondary"
       icon="pi pi-expand"
-      v-tooltip.left="t('graphCanvasMenu.resetView')"
-      @click="() => commandStore.execute('Comfy.Canvas.ResetView')"
+      v-tooltip.left="t('graphCanvasMenu.fitView')"
+      @click="() => commandStore.execute('Comfy.Canvas.FitView')"
     />
     <Button
       severity="secondary"

src/i18n.ts

@@ -115,6 +115,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'
@@ -233,6 +234,7 @@ const messages = {
       zoomIn: '放大',
       zoomOut: '缩小',
       resetView: '重置视图',
+      fitView: '适应视图',
       selectMode: '选择模式',
       panMode: '平移模式',
       toggleLinkVisibility: '切换链接可见性'
@@ -352,6 +354,7 @@ const messages = {
       zoomIn: 'Увеличить',
       zoomOut: 'Уменьшить',
       resetView: 'Сбросить вид',
+      fitView: 'Подгонять под выделенные',
       selectMode: 'Выбрать режим',
       panMode: 'Режим панорамирования',
       toggleLinkVisibility: 'Переключить видимость ссылок'

src/scripts/app.ts

@@ -27,6 +27,7 @@ import { ComfyAppMenu } from './ui/menu/index'
 import { getStorageValue } from './utils'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import {
+  LGraphGroup,
   LGraphCanvas,
   LGraph,
   LGraphNode,

src/stores/commandStore.ts

@@ -292,6 +292,12 @@ export const useCommandStore = defineStore('command', () => {
         app.canvas.setDirty(true, true)
       }
     },
+    {
+      id: 'Comfy.Canvas.FitView',
+      icon: 'pi pi-expand',
+      label: 'Fit view to selected nodes',
+      function: () => app.canvas.fitViewToSelectionAnimated()
+    },
     {
       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'