Update litegraph (Fix auto connect slot) (#208)

* Update litegraph

* Update version again

* Add browser test for litegraph change

* Update test expectations [skip ci]

---------

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

browser_tests/ComfyPage.ts

@@ -43,6 +43,9 @@ export class ComfyPage {
   // Buttons
   public readonly resetViewButton: Locator;
 
+  // Inputs
+  public readonly workflowUploadInput: Locator;
+
   // Search box
   public readonly searchBox: ComfyNodeSearchBox;
 
@@ -51,6 +54,7 @@ export class ComfyPage {
     this.canvas = page.locator("#graph-canvas");
     this.widgetTextBox = page.getByPlaceholder("text").nth(1);
     this.resetViewButton = page.getByRole("button", { name: "Reset View" });
+    this.workflowUploadInput = page.locator('#comfy-file-input');
     this.searchBox = new ComfyNodeSearchBox(page);
   }
 
@@ -64,6 +68,11 @@ export class ComfyPage {
     });
   }
 
+  async loadWorkflow(workflowName: string) {
+    await this.workflowUploadInput.setInputFiles(`./browser_tests/assets/${workflowName}.json`);
+    await this.nextFrame();
+  }
+
   async resetView() {
     await this.resetViewButton.click();
     // Avoid "Reset View" button highlight.

browser_tests/assets/snap_to_slot.json

@@ -0,0 +1,164 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 5,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [
+        590,
+        40
+      ],
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null,
+          "slot_index": 0
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 3,
+          "slot_index": 1
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null,
+          "slot_index": 2
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null,
+          "slot_index": 3
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 4,
+      "type": "CLIPTextEncode",
+      "pos": [
+        20,
+        50
+      ],
+      "size": {
+        "0": 400,
+        "1": 200
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            3
+          ],
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        ""
+      ]
+    },
+    {
+      "id": 5,
+      "type": "CLIPTextEncode",
+      "pos": [
+        20,
+        320
+      ],
+      "size": {
+        "0": 400,
+        "1": 200
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        ""
+      ]
+    }
+  ],
+  "links": [
+    [
+      3,
+      4,
+      0,
+      1,
+      1,
+      "CONDITIONING"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/interaction.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { comfyPageFixture as test } from './ComfyPage';
+import { ComfyPage, comfyPageFixture as test } from './ComfyPage';
 
 test.describe('Node Interaction', () => {
   test('Can enter prompt', async ({ comfyPage }) => {
@@ -37,6 +37,23 @@ test.describe('Node Interaction', () => {
     await comfyPage.adjustWidgetValue();
     await expect(comfyPage.canvas).toHaveScreenshot('adjusted-widget-value.png');
   });
+
+  test('Link snap to slot', async ({comfyPage}) => {
+    await comfyPage.loadWorkflow("snap_to_slot");
+    await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot.png');
+
+    const outputSlotPos = {
+      x: 406,
+      y: 333
+    };
+    const samplerNodeCenterPos = {
+      x: 748,
+      y: 77
+    };
+    await comfyPage.dragAndDrop(outputSlotPos, samplerNodeCenterPos);
+
+    await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot_linked.png');
+  });
 });
 
 test.describe('Canvas Interaction', () => {

package-lock.json

@@ -8,7 +8,7 @@
       "name": "comfyui-frontend",
       "version": "1.2.1",
       "dependencies": {
-        "@comfyorg/litegraph": "^0.7.26",
+        "@comfyorg/litegraph": "^0.7.29",
         "@primevue/themes": "^4.0.0-rc.2",
         "@vitejs/plugin-vue": "^5.0.5",
         "class-transformer": "^0.5.1",
@@ -1819,9 +1819,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.7.26",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.26.tgz",
-      "integrity": "sha512-o62S4tvHXfcAlnyG4UaAuoMyjB+g2nauQ3+l0HWwJjdj6KA565du6PX4OdL5DE0YW1iRNtFEoNq5IQITq26tow=="
+      "version": "0.7.29",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.29.tgz",
+      "integrity": "sha512-lXgqcJseywRJQ/B9ClW+5u6VIbDJWy8SMJJ1nxXDgTsE30UUmOnBhZkLZZ3ffMv3QFUcYoNLq5EJn3EFx3g+zA=="
     },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",

package.json

@@ -46,7 +46,7 @@
     "zip-dir": "^2.0.0"
   },
   "dependencies": {
-    "@comfyorg/litegraph": "^0.7.26",
+    "@comfyorg/litegraph": "^0.7.29",
     "@primevue/themes": "^4.0.0-rc.2",
     "@vitejs/plugin-vue": "^5.0.5",
     "class-transformer": "^0.5.1",