Comfy-Org / Comfy-Org/ComfyUI_frontend

[Feature Request] Automatically move the viewport when dragging a node close to the canvas borders

Open
#4,744 1 comment 1 reaction 0 assignees View on GitHub
area:navigation enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.