feat: render dragging links above Vue nodes via overlay canvas (#8695)

Browse Source

## Summary
When vueNodesMode is enabled, the dragging link preview was rendered on
the background canvas behind DOM-based Vue nodes, making it invisible
when overlapping node bodies.

Add a new overlay canvas layer between TransformPane and
SelectionRectangle that renders the dragging link preview and snap
highlight above the Vue node DOM layer.

Static connections remain on the background canvas as before.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/8414
discussed with @DrJKL 

## Screenshots
before

https://github.com/user-attachments/assets/94508efa-570c-4e32-a373-360b72625fdd

after

https://github.com/user-attachments/assets/4b0f924c-66ce-4f49-97d7-51e6e923a1b9

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8695-feat-render-dragging-links-above-Vue-nodes-via-overlay-canvas-2ff6d73d365081599b2fe18b87f34b7a)
by [Unito](https://www.unito.io)

---------

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

...

This commit is contained in:

Terry Jia

2026-02-06 21:19:18 -05:00

committed by GitHub

parent e7932f2fc2

commit d9ce4ff5e0

19 changed files with 155 additions and 72 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 73 KiB After Width:  |  Height:  |  Size: 74 KiB

BIN

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 108 KiB After Width:  |  Height:  |  Size: 109 KiB

BIN

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 55 KiB After Width:  |  Height:  |  Size: 55 KiB

BIN

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 25 KiB After Width:  |  Height:  |  Size: 25 KiB

BIN

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 27 KiB After Width:  |  Height:  |  Size: 27 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 60 KiB After Width:  |  Height:  |  Size: 60 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 59 KiB After Width:  |  Height:  |  Size: 60 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 59 KiB After Width:  |  Height:  |  Size: 60 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 61 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 61 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 61 KiB After Width:  |  Height:  |  Size: 62 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 58 KiB After Width:  |  Height:  |  Size: 58 KiB

BIN

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 57 KiB After Width:  |  Height:  |  Size: 57 KiB

BIN

browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 26 KiB After Width:  |  Height:  |  Size: 27 KiB

BIN

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 134 KiB After Width:  |  Height:  |  Size: 134 KiB

BIN

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 136 KiB After Width:  |  Height:  |  Size: 136 KiB