Update litegraph (link snap to slot & highlight) (#1378)

* Update litegraph (link snap)

* Add settings

* nit

* Add playwright test

* Update test expectations [skip ci]

---------

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

browser_tests/interaction.spec.ts

@@ -116,6 +116,24 @@ test.describe('Node Interaction', () => {
       await comfyPage.page.keyboard.up('Shift')
       await expect(comfyPage.canvas).toHaveScreenshot('copied-link.png')
     })
+
+    test('Auto snap&highlight when dragging link over node', async ({
+      comfyPage
+    }) => {
+      await comfyPage.setSetting('Comfy.Node.AutoSnapLinkToSlot', true)
+      await comfyPage.setSetting('Comfy.Node.SnapHighlightsNode', true)
+
+      await comfyPage.page.mouse.move(
+        comfyPage.clipTextEncodeNode1InputSlot.x,
+        comfyPage.clipTextEncodeNode1InputSlot.y
+      )
+      await comfyPage.page.mouse.down()
+      await comfyPage.page.mouse.move(
+        comfyPage.clipTextEncodeNode2InputSlot.x,
+        comfyPage.clipTextEncodeNode2InputSlot.y
+      )
+      await expect(comfyPage.canvas).toHaveScreenshot('snapped-highlighted.png')
+    })
   })
 
   test('Can adjust widget value', async ({ comfyPage }) => {

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.3.28",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/litegraph": "^0.8.11",
+        "@comfyorg/litegraph": "^0.8.12",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
         "axios": "^1.7.4",
@@ -1911,9 +1911,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.11",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.11.tgz",
-      "integrity": "sha512-oTKWUWDaAjCV1kZROimKsevDJUSEIpSzjLdm8lE2IwMV+O1KUQNV3Y+/Xw4RywxGL4Z0zOpdI0aYA9zSB81w7Q==",
+      "version": "0.8.12",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.12.tgz",
+      "integrity": "sha512-5cAzn4QEoFFD74zBQH4LlKCyxGYYK15N9dQ7O/GtjD+xo3aGsjVR5D4SG0CZ8O4++ycI7l1YzcEBSkNh07JMzQ==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/litegraph": "^0.8.11",
+    "@comfyorg/litegraph": "^0.8.12",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "axios": "^1.7.4",

src/components/graph/GraphCanvas.vue

@@ -85,6 +85,16 @@ watchEffect(() => {
   }
 })
 
+watchEffect(() => {
+  LiteGraph.snaps_for_comfy = settingStore.get('Comfy.Node.AutoSnapLinkToSlot')
+})
+
+watchEffect(() => {
+  LiteGraph.snap_highlights_node = settingStore.get(
+    'Comfy.Node.SnapHighlightsNode'
+  )
+})
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })

src/stores/coreSettings.ts

@@ -458,5 +458,23 @@ export const CORE_SETTINGS: SettingParams[] = [
       { value: LiteGraph.SPLINE_LINK, text: 'Spline' },
       { value: LiteGraph.HIDDEN_LINK, text: 'Hidden' }
     ]
+  },
+  {
+    id: 'Comfy.Node.AutoSnapLinkToSlot',
+    name: 'Auto snap link to node slot',
+    tooltip:
+      'When dragging a link over a node, the link automatically snap to a viable input slot on the node',
+    type: 'boolean',
+    defaultValue: true,
+    versionAdded: '1.3.29'
+  },
+  {
+    id: 'Comfy.Node.SnapHighlightsNode',
+    name: 'Snap highlights node',
+    tooltip:
+      'When dragging a link over a node with viable input slot, highlight the node',
+    type: 'boolean',
+    defaultValue: true,
+    versionAdded: '1.3.29'
   }
 ]

src/types/apiTypes.ts

@@ -502,7 +502,9 @@ const zSettings = z.record(z.any()).and(
       'Comfy.Keybinding.NewBindings': z.array(zKeybinding),
       'Comfy.Extension.Disabled': z.array(z.string()),
       'Comfy.Settings.ExtensionPanel': z.boolean(),
-      'Comfy.LinkRenderMode': z.number()
+      'Comfy.LinkRenderMode': z.number(),
+      'Comfy.Node.AutoSnapLinkToSlot': z.boolean(),
+      'Comfy.Node.SnapHighlightsNode': z.boolean()
     })
     .optional()
 )