[Refactor] Move addNodeOnGraph to litegraphService (#2100)

src/components/graph/GraphCanvas.vue

@@ -69,9 +69,11 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
+import { useLitegraphService } from '@/services/litegraphService'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
+const litegraphService = useLitegraphService()
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
@@ -262,7 +264,7 @@ usePragmaticDroppable(() => canvasRef.value, {
           loc.clientX - 20,
           loc.clientY
         ])
-        comfyApp.addNodeOnGraph(nodeDef, { pos })
+        litegraphService.addNodeOnGraph(nodeDef, { pos })
       } else if (node.data instanceof ComfyModelDef) {
         const model = node.data
         const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
@@ -283,9 +285,12 @@ usePragmaticDroppable(() => canvasRef.value, {
         if (!targetGraphNode) {
           const provider = modelToNodeStore.getNodeProvider(model.directory)
           if (provider) {
-            targetGraphNode = comfyApp.addNodeOnGraph(provider.nodeDef, {
-              pos
-            })
+            targetGraphNode = litegraphService.addNodeOnGraph(
+              provider.nodeDef,
+              {
+                pos
+              }
+            )
             targetProvider = provider
           }
         }

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script setup lang="ts">
-import { app } from '@/scripts/app'
 import { computed, ref, toRaw, watchEffect } from 'vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 import Dialog from 'primevue/dialog'
@@ -53,15 +52,17 @@ import type {
 import { useEventListener } from '@vueuse/core'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { storeToRefs } from 'pinia'
+import { useLitegraphService } from '@/services/litegraphService'
 
 const settingStore = useSettingStore()
+const litegraphService = useLitegraphService()
 
 const { visible } = storeToRefs(useSearchBoxStore())
 const dismissable = ref(true)
 const triggerEvent = ref<LiteGraphCanvasEvent | null>(null)
 const getNewNodeLocation = (): Vector2 => {
   if (!triggerEvent.value) {
-    return app.getCanvasCenter()
+    return litegraphService.getCanvasCenter()
   }
 
   const originalEvent = (triggerEvent.value.detail as OriginalEvent)
@@ -85,7 +86,9 @@ const closeDialog = () => {
 }
 
 const addNode = (nodeDef: ComfyNodeDefImpl) => {
-  const node = app.addNodeOnGraph(nodeDef, { pos: getNewNodeLocation() })
+  const node = litegraphService.addNodeOnGraph(nodeDef, {
+    pos: getNewNodeLocation()
+  })
 
   const eventDetail = triggerEvent.value?.detail
   if (eventDetail && eventDetail.subType === 'empty-release') {

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -66,9 +66,9 @@ import type {
 } from '@/types/treeExplorerTypes'
 import { computed, ref, watch, toRef, onMounted, nextTick } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
-import { app } from '@/scripts/app'
 import { buildTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
+import { useLitegraphService } from '@/services/litegraphService'
 
 const modelStore = useModelStore()
 const modelToNodeStore = useModelToNodeStore()
@@ -153,9 +153,7 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
         if (node.leaf) {
           const provider = modelToNodeStore.getNodeProvider(model.directory)
           if (provider) {
-            const node = app.addNodeOnGraph(provider.nodeDef, {
-              pos: app.getCanvasCenter()
-            })
+            const node = useLitegraphService().addNodeOnGraph(provider.nodeDef)
             const widget = node.widgets.find(
               (widget) => widget.name === provider.key
             )

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -77,7 +77,6 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
-import { app } from '@/scripts/app'
 import { sortedTree } from '@/utils/treeUtil'
 import { useTreeExpansion } from '@/hooks/treeHooks'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
@@ -88,6 +87,7 @@ import type {
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import { useLitegraphService } from '@/services/litegraphService'
 
 const nodeDefStore = useNodeDefStore()
 const nodeBookmarkStore = useNodeBookmarkStore()
@@ -128,7 +128,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
         e: MouseEvent
       ) => {
         if (node.leaf) {
-          app.addNodeOnGraph(node.data, { pos: app.getCanvasCenter() })
+          useLitegraphService().addNodeOnGraph(node.data)
         } else {
           toggleNodeOnEvent(e, node)
         }

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -37,8 +37,8 @@ import type { TreeNode } from 'primevue/treenode'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useTreeExpansion } from '@/hooks/treeHooks'
-import { app } from '@/scripts/app'
 import { findNodeByKey } from '@/utils/treeUtil'
+import { useLitegraphService } from '@/services/litegraphService'
 
 const props = defineProps<{
   filteredNodeDefs: ComfyNodeDefImpl[]
@@ -169,7 +169,7 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
           e: MouseEvent
         ) => {
           if (node.leaf) {
-            app.addNodeOnGraph(node.data, { pos: app.getCanvasCenter() })
+            useLitegraphService().addNodeOnGraph(node.data)
           } else {
             toggleNodeOnEvent(e, node)
           }