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 <[email protected]>
Comfy-Org · Oct 30, 2024 · bf7a9bf · bf7a9bf
1 parent 3fb2d42
commit bf7a9bf
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 6 deletions.
diff --git a/browser_tests/interaction.spec.ts b/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 }) => {

diff --git a/...r_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-2x-linux.png b/...r_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-2x-linux.png
diff --git a/browser_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/components/graph/GraphCanvas.vue b/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')
 })

diff --git a/src/stores/coreSettings.ts b/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'
   }
 ]
diff --git a/src/types/apiTypes.ts b/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()
 )