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

#5780 (snapping) <-- #5898 (drop on canvas + linkconnectoradapter refactor) <-- #5903 (fix reroute snapping)

┆Issue is synchronized with this Notion page by Unito

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

Summary - Route LGraphNode slot position queries through a single source of truth that prefers layoutStore’s DOM‑tracked slot positions and falls back to geometry when unavailable. - Ensures that reroute‑origin drags snap to the same visual slot centers used by Vue nodes when hovering compatible nodes. What changed - LGraphNode.getInputPos/getOutputPos now resolve via getSlotPosition(), which: - Returns the Vue nodes layoutStore position if the slot has been tracked. - Otherwise, computes from node geometry (unchanged fallback behavior). - LGraphNode.getInputSlotPos(input) resolves index→getSlotPosition() and retains a safe fallback when an input slot object doesn’t map to an index. Why - Previously, when starting a drag from a reroute and hovering a node, the temporary link endpoint would render toward LiteGraph’s calculated slot position, not the Vue‑tracked slot position, causing a visible mismatch. - By making all slot position lookups consult the layout store first, node hover snap rendering is consistent across slot‑origin and reroute‑origin drags. Impact - No behavior change for non‑Vue nodes mode or when no tracked layout exists — the legacy calculated positions are still used. - Centralizes slot positioning in one place, reducing special‑case logic and making hover/drag rendering more predictable. #5780 (snapping) <-- #5898 (drop on canvas + linkconnectoradapter refactor) <-- #5903 (fix reroute snapping) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5903-Use-layoutStore-slot-positions-for-node-slot-queries-fix-reroute-origin-node-snap-2816d73d36508184b297f46b39105545) by [Unito](https://www.unito.io)

## 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) https://github.com/user-attachments/assets/fbed0ae2-2231-473b-a05a-9aaf68e3f820 #5780 (snapping) <-- #5898 (drop on canvas + linkconnectoradapter refactor) <-- #5903 (fix reroute snapping) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5780-feat-vue-nodes-snap-link-preview-connect-on-drop-27a6d73d365081d89c8cf570e2049c89) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <[email protected]>

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. - 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 - 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 https://github.com/user-attachments/assets/fbed0ae2-2231-473b-a05a-9aaf68e3f820 #5780 (snapping) <-- #5898 (drop on canvas + linkconnectoradapter refactor) <-- #5903 (fix reroute snapping) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5780-feat-vue-nodes-snap-link-preview-connect-on-drop-27a6d73d365081d89c8cf570e2049c89) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <[email protected]>

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

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

benceruleanlu requested a review from christian-byrne October 4, 2025 21:36

This was referenced Oct 4, 2025

Implement drop-on-canvas + linkconnectoradapter consolidation #5898

Open

Fix reroute links not snapping correctly #5903

Merged

christian-byrne approved these changes Oct 5, 2025

View reviewed changes

christian-byrne merged commit cd7310c into main Oct 5, 2025
26 checks passed

christian-byrne deleted the bl-snap branch October 5, 2025 04:49

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

Uh oh!

benceruleanlu commented Sep 26, 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!

Uh oh!

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

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

Uh oh!

Conversation

benceruleanlu commented Sep 26, 2025 • edited 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 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!

Uh oh!

benceruleanlu commented Sep 26, 2025 •

edited

Loading