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

browser_tests/menu.spec.ts

@@ -707,6 +707,36 @@ test.describe('Menu', () => {
         '*Unsaved Workflow.json'
       ])
     })
+
+    test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
+      await comfyPage.setupWorkflowsDirectory({
+        'workflow1.json': 'default.json'
+      })
+      await comfyPage.setup()
+      await comfyPage.menu.workflowsTab.open()
+
+      const nodeCount = await comfyPage.getGraphNodesCount()
+
+      // Get the bounding box of the canvas element
+      const canvasBoundingBox = (await comfyPage.page
+        .locator('#graph-canvas')
+        .boundingBox())!
+
+      // Calculate the center position of the canvas
+      const targetPosition = {
+        x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
+        y: canvasBoundingBox.y + canvasBoundingBox.height / 2
+      }
+
+      await comfyPage.page.dragAndDrop(
+        '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
+        '#graph-canvas',
+        { targetPosition }
+      )
+      // Wait for the workflow to be inserted
+      await comfyPage.page.waitForTimeout(200)
+      expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
+    })
   })
 
   test.describe('Workflows topbar tabs', () => {

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.16",
-        "@comfyorg/litegraph": "^0.8.67",
+        "@comfyorg/litegraph": "^0.8.68",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -1944,9 +1944,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.67",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.67.tgz",
-      "integrity": "sha512-yGytBGJHpEpesZ+2eusepbHlUlztYBu25h4eSIlMildceMFI/oEVTDj3gdmVgaReEs3uAZVnfSBqIPwqthHGJA==",
+      "version": "0.8.68",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.68.tgz",
+      "integrity": "sha512-/c4PH2/vNE2DezdZYdXapCq4jGvSHJqrCT1S9WL3uJ5XYjRcanztLYUGkXgYXNEHfvUV/1oerF3p9o3Kvglwhg==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -84,7 +84,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.16",
-    "@comfyorg/litegraph": "^0.8.67",
+    "@comfyorg/litegraph": "^0.8.68",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

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