[Refactor] Move goToNode to litegraphService (#2101)

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
   }
 ])

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]

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()

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
   }
 }