Update litegraph (Copy connection by shift drag from path) (#841)

* Add playwright tests

* Update lg

* nit

* nit

* Skip tests

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/ComfyPage.ts

@@ -371,6 +371,18 @@ export class ComfyPage {
     return { x: 427, y: 198 }
   }
 
+  get clipTextEncodeNode2InputSlot(): Position {
+    return { x: 422, y: 402 }
+  }
+
+  // A point on input edge.
+  get clipTextEncodeNode2InputLinkPath(): Position {
+    return {
+      x: 395,
+      y: 422
+    }
+  }
+
   get loadCheckpointNodeClipOutputSlot(): Position {
     return { x: 332, y: 509 }
   }

browser_tests/interaction.spec.ts

@@ -24,16 +24,56 @@ test.describe('Node Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
   })
 
-  test('Can disconnect/connect edge', async ({ comfyPage }) => {
+  test.describe('Edge Interaction', () => {
-    await comfyPage.setSetting('Comfy.LinkRelease.Action', 'no action')
+    test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.disconnectEdge()
+      await comfyPage.setSetting('Comfy.LinkRelease.Action', 'no action')
-    await expect(comfyPage.canvas).toHaveScreenshot(
+      await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'no action')
-      'disconnected-edge-with-menu.png'
+    })
-    )
+
-    await comfyPage.connectEdge()
+    test('Can disconnect/connect edge', async ({ comfyPage }) => {
-    // Litegraph renders edge with a slight offset.
+      await comfyPage.disconnectEdge()
-    await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
-      maxDiffPixels: 50
+      await comfyPage.connectEdge()
+      // Litegraph renders edge with a slight offset.
+      await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
+        maxDiffPixels: 50
+      })
+    })
+
+    // Chromium 2x cannot move link.
+    // See https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/10876381315/job/30176211513
+    test.skip('Can move link', async ({ comfyPage }) => {
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode1InputSlot,
+        comfyPage.emptySpace
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode2InputSlot,
+        comfyPage.clipTextEncodeNode1InputSlot
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
+    })
+
+    // Copy link is not working on CI at all
+    // Chromium 2x recognize it as dragging canvas.
+    // Chromium triggers search box after link release. The link is indeed copied.
+    // See https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/10876381315/job/30176211513
+    test.skip('Can copy link by shift-drag existing link', async ({
+      comfyPage
+    }) => {
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode1InputSlot,
+        comfyPage.emptySpace
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.page.keyboard.down('Shift')
+      await comfyPage.dragAndDrop(
+        comfyPage.clipTextEncodeNode2InputLinkPath,
+        comfyPage.clipTextEncodeNode1InputSlot
+      )
+      await comfyPage.page.keyboard.up('Shift')
+      await expect(comfyPage.canvas).toHaveScreenshot('copied-link.png')
     })
   })
 

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.2.55",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-        "@comfyorg/litegraph": "^0.7.74",
+        "@comfyorg/litegraph": "^0.7.75",
         "@primevue/themes": "^4.0.5",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vueuse/core": "^11.0.0",
@@ -1909,9 +1909,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.7.74",
+      "version": "0.7.75",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.74.tgz",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.75.tgz",
-      "integrity": "sha512-01J6HWHSu4HJo9NwteSmIM68fHrbXZqH4rkXOczXG1u/t5fDicBnUU9a9MAAt7h2qUoGsvWaA6z0wgEEWhGkPA==",
+      "integrity": "sha512-RNYZVMoJ/a5btwP+S124FnrIVlwOdv6uNsTdYfwv7L8teDpwvf/TQa66QfCePqUlypBKEhKw+avTncLAu2FYUw==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@comfyorg/litegraph": "^0.7.74",
+    "@comfyorg/litegraph": "^0.7.75",
     "@primevue/themes": "^4.0.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",