From 0161a670cf05d9c03f2330057f3647738d26930d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20D=C3=B3cs?= <bezozo97@gmail.com>
Date: Fri, 8 Nov 2024 21:03:21 +0100
Subject: [PATCH] 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                        | 8 ++++----
 package.json                             | 2 +-
 src/components/graph/GraphCanvasMenu.vue | 4 ++--
 src/i18n.ts                              | 3 +++
 src/scripts/app.ts                       | 1 +
 src/stores/commandStore.ts               | 6 ++++++
 src/stores/coreKeybindings.ts            | 7 +++++++
 7 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 217a85bc0..66e85605c 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/package.json b/package.json
index ba1dcc4d1..1277c15f9 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index aea2e27be..fa5627198 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/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"
diff --git a/src/i18n.ts b/src/i18n.ts
index fea0b5672..3f3848d89 100644
--- a/src/i18n.ts
+++ b/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: 'Переключить видимость ссылок'
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 9c67f2f13..fac5a0ac8 100644
--- a/src/scripts/app.ts
+++ b/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,
diff --git a/src/stores/commandStore.ts b/src/stores/commandStore.ts
index 860a67520..9d83fa0ad 100644
--- a/src/stores/commandStore.ts
+++ b/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',
diff --git a/src/stores/coreKeybindings.ts b/src/stores/coreKeybindings.ts
index e46de85b4..3783fdc3a 100644
--- a/src/stores/coreKeybindings.ts
+++ b/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'