feat(vue-nodes): snap link preview; connect on drop #5780

benceruleanlu · 2025-09-26T00:21:43Z

Summary

Snap link preview to the nearest compatible slot while dragging in Vue Nodes mode, and complete the connection on drop using the snapped target. Mirrors LiteGraph’s first-compatible-slot logic for node-level snapping and reuses the computed candidate for performance.

Changes

Snap preview end to compatible slot
- slot under cursor via data-slot-key fast-path
- node under cursor via findInputByType / findOutputByType
Render path
- slotLinkPreviewRenderer.ts now renders to state.candidate.layout.position
Complete on drop
- Prefer state.candidate (no re-hit-testing)
- Fallbacks: DOM slot → node first-compatible → reroute
- Disconnects moving input link when dropped on canvas

Review Focus

UX feel of snapping and drop completion (both directions)
Performance on large graphs (mousemove path is O(1) with dataset + single validation)
Edge cases: reroutes, moving existing links, collapsed nodes

Screenshots (if applicable)

Recording.2025-09-25.172342.mp4

┆Issue is synchronized with this Notion page by Unito

benceruleanlu · 2025-09-29T23:50:25Z

@codex review

chatgpt-codex-connector · 2025-09-29T23:52:03Z

Codex Review: Something went wrong. Try again later by commenting “@codex review”.

Script failed: Script exited with code 1

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting

@codex fix this CI failure
@codex address that feedback

github-actions · 2025-09-30T16:43:34Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 10/03/2025, 10:31:41 AM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

benceruleanlu · 2025-09-30T17:12:39Z

regenerating after the canvasonly flag was added, widgets moved around, links stayed the same though

benceruleanlu · 2025-09-30T18:22:47Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting

@codex fix this CI failure
@codex address that feedback

src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts

When vue nodes is enabled, switch to the new getSlotPosition for subgraph nodes as well. This aligns links to slots in subgraphs. Do note, getSlotPosition is actually the new standard, but we fallback to inputNode.getInputPos since it's so core, idea is to switch over fully to getSlotPosition without the vue flag once things are more stable. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5876-Align-links-to-slots-in-subgraphs-27f6d73d365081148b92f312a0af84a0) by [Unito](https://www.unito.io)

- Snap preview target: use snapped candidate position when compatible - Vue nodes interaction: track hovered candidate via setCandidate - Keep PR browser test snapshots (ours) for link interactions

DrJKL

This seems like a lot of state to keep synchronized 🫤

DrJKL · 2025-10-03T18:34:13Z

src/renderer/extensions/vueNodes/composables/slotLinkDragSession.ts

+    reset: () => {
+      state.compatCache = new Map()
+      state.nodePreferred = new Map()
+      state.lastHoverSlotKey = null
+      state.lastHoverNodeId = null
+      state.lastCandidateKey = null
+      state.pendingMove = null
+    },
+    dispose: () => {
+      state.reset()
+    }


Why would this persist and be reset instead of just being dropped and garbage collected?

I think it's because it will be alive for the lifetime of the composable

it's called as const dragSession = createSlotLinkDragSession()

DrJKL · 2025-10-03T18:38:10Z

src/utils/rafBatch.ts

It seems like a microoptimization in advance to me. Did you see performance issues without it?

I don't think this was meant for performance, just to save like a few lines from both files

DrJKL · 2025-10-03T18:39:26Z

src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts

+    const snappedCandidate = state.candidate?.compatible
+      ? state.candidate
+      : null
+
+    let connected = tryConnectToCandidate(snappedCandidate)
+
+    // Fallback to DOM slot under pointer (if any), then node fallback, then reroute
+    if (!connected) {
+      const domCandidate = candidateFromTarget(event.target)
+      connected = tryConnectToCandidate(domCandidate)
+    }
+
+    if (!connected) {
+      const nodeCandidate = candidateFromNodeTarget(event.target)
+      connected = tryConnectToCandidate(nodeCandidate)
+    }
+
    if (!connected) connected = tryConnectViaRerouteAtPointer() || connected


nit: This kind of long chain of optional assignment to a mutable variable is a great case for extraction to a more pure function.

there's a lot of scuffed code that I want to fix next week, this can be one of them

benceruleanlu and others added 30 commits September 19, 2025 03:08

Add dragging test

9a18d37

Litegraph? Never heard if it

939cbe0

Add more test cases

e3e1d2e

Update test expectations [skip ci]

5c6c21c

Merge branch 'bl-tests' into bl-more-slots

f624940

More test cases v1

48f5087

review comments

369da53

Merge remote-tracking branch 'origin/bl-tests' into bl-more-slots

22a1c61

Allow moving links and support reroutes

70651dc

Add dragging input to input drags existing link test

c227d60

Merge remote-tracking branch 'origin/main' into bl-more-slots

9d668a1

nit

b99d70d

Support dragging from output to output

19c538c

Add snapshot

263b280

o-o shift test

bef712e

Update test expectation

e7f0ee4

Switch to adapter approach

20d136d

clean up onPointerDown

3f4a806

Add reroute anchor tests

e136b89

Fix double links

6685e00

Merge remote-tracking branch 'origin/main' into bl-more-slots

0aa971b

temp screenshots

9d32b4c

improve typing

e879bd5

nit

f348902

cleanup unused

d780296

huh?

8eec7fb

I am the one who knocks

f99d8c1

Those who type

65ec322

fix bad fallback and remove logging

a2be36a

nit

88cd60f

Base automatically changed from bl-more-slots to main September 30, 2025 01:23

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Sep 30, 2025

Merge remote-tracking branch 'origin/main' into bl-snap

d5a5621

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:XXL This PR changes 1000+ lines, ignoring generated files. labels Sep 30, 2025

benceruleanlu added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Sep 30, 2025

benceruleanlu added 2 commits September 30, 2025 11:18

Merge remote-tracking branch 'origin/main' into bl-snap

d18a604

Remove duplicated playwright snapshots

87e410d

benceruleanlu added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Sep 30, 2025

chatgpt-codex-connector bot reviewed Sep 30, 2025

View reviewed changes

src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts Show resolved Hide resolved

github-actions and others added 2 commits September 30, 2025 18:53

Update test expectations [skip ci]

35bc2f9

ci sanity check

aed6a4e

christian-byrne added the claude-review Add to trigger a PR code review from Claude Code label Oct 1, 2025

christian-byrne previously approved these changes Oct 2, 2025

View reviewed changes

Merge origin/main into bl-snap: resolve conflicts

4d7c0d7

- Snap preview target: use snapped candidate position when compatible - Vue nodes interaction: track hovered candidate via setCandidate - Keep PR browser test snapshots (ours) for link interactions

benceruleanlu dismissed christian-byrne’s stale review via 4d7c0d7 October 3, 2025 08:24

benceruleanlu added New Browser Test Expectations New browser test screenshot should be set by github action and removed New Browser Test Expectations New browser test screenshot should be set by github action labels Oct 3, 2025

github-actions and others added 2 commits October 3, 2025 09:23

[automated] Update test expectations

d1f2734

4c985f7

DrJKL reviewed Oct 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(vue-nodes): snap link preview; connect on drop #5780

feat(vue-nodes): snap link preview; connect on drop #5780

benceruleanlu commented Sep 26, 2025 •

edited by sync-by-unito bot

Loading

Uh oh!

benceruleanlu commented Sep 29, 2025

Uh oh!

chatgpt-codex-connector bot commented Sep 29, 2025

Uh oh!

github-actions bot commented Sep 30, 2025 •

edited

Loading

Uh oh!

benceruleanlu commented Sep 30, 2025

Uh oh!

benceruleanlu commented Sep 30, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

DrJKL left a comment

Uh oh!

DrJKL Oct 3, 2025

Uh oh!

benceruleanlu Oct 3, 2025

Uh oh!

DrJKL Oct 3, 2025

Uh oh!

benceruleanlu Oct 3, 2025

Uh oh!

DrJKL Oct 3, 2025

Uh oh!

benceruleanlu Oct 3, 2025

Uh oh!

Uh oh!

feat(vue-nodes): snap link preview; connect on drop #5780

Are you sure you want to change the base?

feat(vue-nodes): snap link preview; connect on drop #5780

Conversation

benceruleanlu commented Sep 26, 2025 • edited by sync-by-unito bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Review Focus

Screenshots (if applicable)

Uh oh!

benceruleanlu commented Sep 29, 2025

Uh oh!

chatgpt-codex-connector bot commented Sep 29, 2025

Uh oh!

github-actions bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

benceruleanlu commented Sep 30, 2025

Uh oh!

benceruleanlu commented Sep 30, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

DrJKL left a comment

Choose a reason for hiding this comment

Uh oh!

DrJKL Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

benceruleanlu Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

DrJKL Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

benceruleanlu Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

DrJKL Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

benceruleanlu Oct 3, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

benceruleanlu commented Sep 26, 2025 •

edited by sync-by-unito bot

Loading

github-actions bot commented Sep 30, 2025 •

edited

Loading