Comfy-Org / Comfy-Org/ComfyUI_frontend
[Feature Request] Automatically move the viewport when dragging a node close to the canvas borders
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
**Is there an existing issue for this?**
- [X] Has similarities with Comfy-Org/ComfyUI_frontend#4747
- [X] I have searched the existing issues and checked the recent builds/commits
**What would your feature do ?**
The moment a user drags an item/link connector close to the border of the canvas the viewport should start moving in the same direction.
https://github.com/user-attachments/assets/1c17b9ed-0a92-45dc-a6b4-0d4f98f53b78
**Proposed workflow**
1. Drag a node close to the edges of the viewport
2. Update the viewport and node position based on the mouse location using the draw tick and delta time
3. Expose threshold and speed multiplier inside the UI settings
**Implementation**
Update using DeltaT:
Instead of purely updating the position based on the tick/draw event we use delta T to make sure the movement stays consistent otherwise the speed would vary depending on the fps
Poor mans normalized Vector2:
Instead of using an actual normalized Vector2 we'll clamp the calculated vector to a range between [-1,1].
There's no need for a real unit vector. This way we save a sqrt calculation to increase the performance.
Updates when dragging a Positionable or Link connector:
Due to the function adding to the draw loop we'll only run it when dragging around an object but it could be used for general panning as well by setting it active when pressing the middle mouse button (panning mode)
***TODO: Add movement multiplier and threshold to UI settings***
PS: I tried to adapt as many of your code conventions as possible but I might have overdone it with the code comments/descriptions. Please let me know what you think.
Cheers,
Leo
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-4744-Feature-Request-Automatically-move-the-viewport-when-dragging-a-node-close-to-the-ca-2476d73d365081d9bac8e42d55283d5e) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.