Benjamin Lu
|
cd7310cb8c
|
feat(vue-nodes): snap link preview; connect on drop (#5780)
## 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
https://github.com/Comfy-Org/ComfyUI_frontend/pull/5780 (snapping) <--
https://github.com/Comfy-Org/ComfyUI_frontend/pull/5898 (drop on canvas
+ linkconnectoradapter refactor) <--
https://github.com/Comfy-Org/ComfyUI_frontend/pull/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 <github-actions@github.com>
|
2025-10-04 21:48:59 -07:00 |
|
Benjamin Lu
|
ff5d0923ca
|
Refactor vue slot tracking (#5463)
* add dom element resize observer registry for vue node components
* Update src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
Co-authored-by: AustinMroz <austin@comfy.org>
* refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates
* chore: make TransformState interface non-exported to satisfy knip pre-push
* Revert "chore: make TransformState interface non-exported to satisfy knip pre-push"
This reverts commit 110ecf31da.
* Revert "refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates"
This reverts commit 428752619c.
* [refactor] Improve resize tracking composable documentation and test utilities
- Rename parameters in useVueElementTracking for clarity (appIdentifier, trackingType)
- Add comprehensive docstring with examples to prevent DOM attribute confusion
- Extract mountLGraphNode test utility to eliminate repetitive mock setup
- Add technical implementation notes documenting optimization decisions
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* remove typo comment
* convert to functional bounds collection
* remove inline import
* add interfaces for bounds mutations
* remove change log
* fix bounds collection when vue nodes turned off
* fix title offset on y
* move from resize observer to selection toolbox bounds
* refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates
* Fix conversion
* Readd padding
* revert churn reducings from layoutStore.ts
* Rely on RO for resize, and batch
* Improve churn
* Cache canvas offset
* rename from measure
* remove unused
* address review comments
* Update legacy injection
* nit
* Split into store
* nit
* perf improvement
---------
Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>
|
2025-09-16 19:28:04 -07:00 |
|