From d7673af8f5b3a1951f53900778d2268efda6a45e Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 6 Feb 2025 14:22:40 -0500
Subject: [PATCH] [Refactor] Move resetView to litegraphService (#2456)

---
 src/composables/useCoreCommands.ts |  3 ++-
 src/scripts/app.ts                 | 14 ++++++++------
 src/scripts/ui.ts                  |  7 ++++---
 src/services/litegraphService.ts   | 17 ++++++++++++++++-
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index f03b385fae..aae837c192 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -13,6 +13,7 @@ import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
+import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useTitleEditorStore } from '@/stores/graphStore'
@@ -156,7 +157,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-expand',
       label: 'Reset View',
       function: () => {
-        app.resetView()
+        useLitegraphService().resetView()
       }
     },
     {
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 5022238ed4..ceae60d7bf 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -193,6 +193,14 @@ export class ComfyApp {
     return isImageNode(node)
   }
 
+  /**
+   * Resets the canvas view to the default
+   * @deprecated Use {@link useLitegraphService().resetView} instead
+   */
+  resetView() {
+    useLitegraphService().resetView()
+  }
+
   constructor() {
     this.vueAppReady = false
     this.ui = new ComfyUI(this)
@@ -1805,12 +1813,6 @@ export class ComfyApp {
     }
   }
 
-  resetView() {
-    app.canvas.ds.scale = 1
-    app.canvas.ds.offset = [0, 0]
-    app.graph.setDirtyCanvas(true, true)
-  }
-
   /**
    * Frees memory allocated to image preview blobs for a specific node, by revoking the URLs associated with them.
    * @param nodeId ID of the node to revoke all preview images of
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 9b05eedd77..cdfb52db7a 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import { useDialogService } from '@/services/dialogService'
+import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -609,7 +610,7 @@ export class ComfyUI {
             ) {
               app.clean()
               app.graph.clear()
-              app.resetView()
+              useLitegraphService().resetView()
               api.dispatchCustomEvent('graphCleared')
             }
           }
@@ -622,7 +623,7 @@ export class ComfyUI {
               !useSettingStore().get('Comfy.ConfirmClear') ||
               confirm('Load default workflow?')
             ) {
-              app.resetView()
+              useLitegraphService().resetView()
               await app.loadGraphData()
             }
           }
@@ -631,7 +632,7 @@ export class ComfyUI {
           id: 'comfy-reset-view-button',
           textContent: 'Reset View',
           onclick: async () => {
-            app.resetView()
+            useLitegraphService().resetView()
           }
         })
       ]
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index 5f2b541a75..440d37bbf6 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -14,6 +14,7 @@ import { api } from '@/scripts/api'
 import { ANIM_PREVIEW_WIDGET, ComfyApp, app } from '@/scripts/app'
 import { $el } from '@/scripts/ui'
 import { calculateImageGrid, createImageHost } from '@/scripts/ui/imagePreview'
+import { useCanvasStore } from '@/stores/graphStore'
 import { useToastStore } from '@/stores/toastStore'
 import { ComfyNodeDef, ExecutedWsMessage } from '@/types/apiTypes'
 import type { NodeId } from '@/types/comfyWorkflow'
@@ -28,6 +29,7 @@ import { useExtensionService } from './extensionService'
 export const useLitegraphService = () => {
   const extensionService = useExtensionService()
   const toastStore = useToastStore()
+  const canvasStore = useCanvasStore()
 
   async function registerNodeDef(nodeId: string, nodeData: ComfyNodeDef) {
     const node = class ComfyNode extends LGraphNode {
@@ -792,10 +794,23 @@ export const useLitegraphService = () => {
     app.canvas.animateToBounds(graphNode.boundingRect)
   }
 
+  /**
+   * Resets the canvas view to the default
+   */
+  function resetView() {
+    const canvas = canvasStore.canvas
+    if (!canvas) return
+
+    canvas.ds.scale = 1
+    canvas.ds.offset = [0, 0]
+    canvas.setDirty(true, true)
+  }
+
   return {
     registerNodeDef,
     addNodeOnGraph,
     getCanvasCenter,
-    goToNode
+    goToNode,
+    resetView
   }
 }