Support insert workflow by dragging from workflow sidebar to canvas (#2440)

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -280,7 +280,8 @@ const renderTreeNode = (
               }
             }
           ]
-        }
+        },
+        draggable: true
       }
     : { handleClick }
 

src/composables/useCanvasDrop.ts

@@ -5,15 +5,18 @@ import { Ref } from 'vue'
 import { usePragmaticDroppable } from '@/composables/usePragmaticDroppable'
 import { app as comfyApp } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
+import { useWorkflowService } from '@/services/workflowService'
 import { ComfyModelDef } from '@/stores/modelStore'
 import { ModelNodeProvider } from '@/stores/modelToNodeStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { ComfyWorkflow } from '@/stores/workflowStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
   const modelToNodeStore = useModelToNodeStore()
   const litegraphService = useLitegraphService()
+  const workflowService = useWorkflowService()
 
   usePragmaticDroppable(() => canvasRef.value, {
     getDropEffect: (args): Exclude<DataTransfer['dropEffect'], 'none'> =>
@@ -70,6 +73,13 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
               widget.value = model.file_name
             }
           }
+        } else if (node.data instanceof ComfyWorkflow) {
+          const workflow = node.data
+          const position = comfyApp.clientPosToCanvasPos([
+            loc.clientX,
+            loc.clientY
+          ])
+          workflowService.insertWorkflow(workflow, { position })
         }
       }
     }

src/services/workflowService.ts

@@ -1,4 +1,5 @@
 import { LGraphCanvas } from '@comfyorg/litegraph'
+import type { Vector2 } from '@comfyorg/litegraph'
 import { toRaw } from 'vue'
 
 import { t } from '@/i18n'
@@ -327,7 +328,10 @@ export const useWorkflowService = () => {
   /**
    * Insert the given workflow into the current graph editor.
    */
-  const insertWorkflow = async (workflow: ComfyWorkflow) => {
+  const insertWorkflow = async (
+    workflow: ComfyWorkflow,
+    options: { position?: Vector2 } = {}
+  ) => {
     const loadedWorkflow = await workflow.load()
     const data = loadedWorkflow.initialState
     const old = localStorage.getItem('litegrapheditor_clipboard')
@@ -341,7 +345,7 @@ export const useWorkflowService = () => {
     canvas.reroutesEnabled = app.canvas.reroutesEnabled
     canvas.selectItems()
     canvas.copyToClipboard()
-    app.canvas.pasteFromClipboard()
+    app.canvas.pasteFromClipboard(options)
     if (old !== null) {
       localStorage.setItem('litegrapheditor_clipboard', old)
     }