Add �pp.addNodeOnGraph to simplify adding node on canvas (#239)

Author: huchenlei

src/components/NodeSearchBoxPopover.vue

@@ -22,19 +22,17 @@
 
 <script setup lang="ts">
 import { app } from '@/scripts/app'
-import { inject, onMounted, onUnmounted, reactive, Ref, ref } from 'vue'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 import Dialog from 'primevue/dialog'
 import {
   INodeSlot,
-  LiteGraph,
   LiteGraphCanvasEvent,
   LGraphNode,
   LinkReleaseContext
 } from '@comfyorg/litegraph'
 import { FilterAndValue } from '@/services/nodeSearchService'
-import { ComfyNodeDef } from '@/types/apiTypes'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 
 interface LiteGraphPointerEvent extends Event {
   canvasX: number
@@ -99,17 +97,14 @@ const connectNodeOnLinkRelease = (
     node.connect(destSlotIndex, srcNode, srcSlotIndex)
   }
 }
-const addNode = (nodeDef: ComfyNodeDef) => {
+const addNode = (nodeDef: ComfyNodeDefImpl) => {
   closeDialog()
-  const node = LiteGraph.createNode(nodeDef.name, nodeDef.display_name, {})
-  if (node) {
-    node.pos = getNewNodeLocation()
-    app.graph.add(node)
-
-    const eventDetail = triggerEvent.value.detail
-    if (eventDetail.subType === 'empty-release') {
-      connectNodeOnLinkRelease(node, eventDetail.linkReleaseContext)
-    }
+
+  const node = app.addNodeOnGraph(nodeDef, { pos: getNewNodeLocation() })
+
+  const eventDetail = triggerEvent.value.detail
+  if (eventDetail.subType === 'empty-release') {
+    connectNodeOnLinkRelease(node, eventDetail.linkReleaseContext)
   }
 }
 

src/scripts/app.ts

@@ -36,7 +36,12 @@ import { StorageLocation } from '@/types/settingTypes'
 import '@comfyorg/litegraph/css/litegraph.css'
 import '../assets/css/style.css'
 import { ExtensionManager } from '@/types/extensionTypes'
-import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
+import {
+  ComfyNodeDefImpl,
+  SYSTEM_NODE_DEFS,
+  useNodeDefStore
+} from '@/stores/nodeDefStore'
+import { Vector2 } from '@comfyorg/litegraph'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
@@ -2933,6 +2938,19 @@ export class ComfyApp {
     this.lastExecutionError = null
     this.runningNodeId = null
   }
+
+  addNodeOnGraph(
+    nodeDef: ComfyNodeDef | ComfyNodeDefImpl,
+    options: Record<string, any> = {}
+  ): LGraphNode {
+    const node = LiteGraph.createNode(
+      nodeDef.name,
+      nodeDef.display_name,
+      options
+    )
+    this.graph.add(node)
+    return node
+  }
 }
 
 export const app = new ComfyApp()