diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts index 2108f5a9..a8c08ac5 100644 --- 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/browser_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-2x-linux.png b/browser_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-2x-linux.png new file mode 100644 index 00000000..64ce2844 Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-2x-linux.png differ 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 new file mode 100644 index 00000000..9d6d92bb Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/snapped-highlighted-chromium-linux.png differ diff --git a/package-lock.json b/package-lock.json index 0e9338a1..e9a194c9 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index e8731fc8..83aa96b9 100644 --- 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 index fad14ae7..88d0dcc0 100644 --- 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 index 8e1458ba..7158b250 100644 --- 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 index 2876b828..646ef782 100644 --- 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() )