From 9f23f8187991601e9e2dc1cc3e9421a238474f8d Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 30 Dec 2024 16:38:10 -0500
Subject: [PATCH] [Refactor] Move goToNode to litegraphService (#2101)

---
 src/components/sidebar/tabs/QueueSidebarTab.vue |  3 ++-
 src/components/sidebar/tabs/queue/TaskItem.vue  |  6 ++++--
 src/scripts/app.ts                              |  6 ------
 src/services/litegraphService.ts                | 10 +++++++++-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 561cfdfe38..ca3474869d 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -110,6 +110,7 @@ import { ComfyNode } from '@/types/comfyWorkflow'
 import { useSettingStore } from '@/stores/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { app } from '@/scripts/app'
+import { useLitegraphService } from '@/services/litegraphService'
 
 const IMAGE_FIT = 'Comfy.Queue.ImageFit'
 const confirm = useConfirm()
@@ -255,7 +256,7 @@ const menuItems = computed<MenuItem[]>(() => [
   {
     label: t('g.goToNode'),
     icon: 'pi pi-arrow-circle-right',
-    command: () => app.goToNode(menuTargetNode.value?.id),
+    command: () => useLitegraphService().goToNode(menuTargetNode.value?.id),
     visible: !!menuTargetNode.value
   }
 ])
diff --git a/src/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue
index 9752d56eee..bd56f8da3a 100644
--- a/src/components/sidebar/tabs/queue/TaskItem.vue
+++ b/src/components/sidebar/tabs/queue/TaskItem.vue
@@ -42,7 +42,7 @@
             :label="`${node?.type} (#${node?.id})`"
             link
             size="small"
-            @click="app.goToNode(node?.id)"
+            @click="litegraphService.goToNode(node?.id)"
           />
         </Tag>
         <Tag :severity="taskTagSeverity(task.displayStatus)">
@@ -75,7 +75,7 @@ import Tag from 'primevue/tag'
 import ResultItem from './ResultItem.vue'
 import { TaskItemDisplayStatus, type TaskItemImpl } from '@/stores/queueStore'
 import { ComfyNode } from '@/types/comfyWorkflow'
-import { app } from '@/scripts/app'
+import { useLitegraphService } from '@/services/litegraphService'
 import { api } from '@/scripts/api'
 
 const props = defineProps<{
@@ -83,6 +83,8 @@ const props = defineProps<{
   isFlatTask: boolean
 }>()
 
+const litegraphService = useLitegraphService()
+
 const flatOutputs = props.task.flatOutputs
 const coverResult = flatOutputs.length
   ? props.task.previewOutput || flatOutputs[0]
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 8849408e05..747a1b387f 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -2060,12 +2060,6 @@ export class ComfyApp {
       ([p, o1, o2]) => (p + o1) * this.canvas.ds.scale + o2
     ) as Vector2
   }
-
-  public goToNode(nodeId: NodeId) {
-    const graphNode = this.graph.getNodeById(nodeId)
-    if (!graphNode) return
-    this.canvas.animateToBounds(graphNode.boundingRect)
-  }
 }
 
 export const app = new ComfyApp()
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index 439ec03ab2..919926ec6c 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -17,6 +17,7 @@ import { $el } from '@/scripts/ui'
 import { useToastStore } from '@/stores/toastStore'
 import { calculateImageGrid, createImageHost } from '@/scripts/ui/imagePreview'
 import { Vector2 } from '@comfyorg/litegraph'
+import type { NodeId } from '@/types/comfyWorkflow'
 
 /**
  * Service that augments litegraph with ComfyUI specific functionality.
@@ -783,9 +784,16 @@ export const useLitegraphService = () => {
     return [x + w / dpi / 2, y + h / dpi / 2]
   }
 
+  function goToNode(nodeId: NodeId) {
+    const graphNode = app.graph.getNodeById(nodeId)
+    if (!graphNode) return
+    app.canvas.animateToBounds(graphNode.boundingRect)
+  }
+
   return {
     registerNodeDef,
     addNodeOnGraph,
-    getCanvasCenter
+    getCanvasCenter,
+    goToNode
   }
 }