Skip to content

Fix (better drag-n-drop): Scope Handler & Scope right-click Menu for adding new nodes #232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 21, 2023

Conversation

li-xin-yi
Copy link
Collaborator

  1. Limit the draggable area of a scope to only the title bar (the same position as code nodes)
  2. Right-click Menu in a scope node, you can create new nodes right in this scope instead of creating them outside and then dragging them into

image

Note: To make sure the created node totally inside the scope, it will adjust the position of the new created node like how you drag an existing node into a scope. However, the adjustment is pretty limited because we still lack an auto-layout logic of all nodes. Something funny may happen if you create a scope in a newly-created scope because they have the exact size (default size), you can hardly separate them then. Refactoring is required after auto-layout/resize is implemented.

@lihebi
Copy link
Collaborator

lihebi commented Apr 21, 2023

The new DND behavior works great; users no longer accidentally drag a scope. But we don't have a proper drag handle; users must guess where to drag. Originally, we had a "Windows 95" style header bar for dragging (#55), then, @forrestbao didn't like it, and we removed it (#98).

I would like to add it back. It is a clear handle for people to drag, and we can display some useful information in the header, e.g., function name, title, pod number, and execution count.

What do you think? @forrestbao

Copy link
Collaborator

@lihebi lihebi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, thanks!

@lihebi lihebi merged commit c194ac2 into codepod-io:main Apr 21, 2023
@forrestbao
Copy link
Collaborator

forrestbao commented Apr 21, 2023

How about displaying a handle only when the mouse is hovered near the top of a scope/cell? Like what most block-based text editors do below (the handle is two columns of ellipses).

image

Another solution is to enable Short_cut_key+Drag to move it. This is common in many Linux desktop environment and CAD software.

The new DND behavior works great; users no longer accidentally drag a scope. But we don't have a proper drag handle; users must guess where to drag. Originally, we had a "Windows 95" style header bar for dragging (#55), then, @forrestbao didn't like it, and we removed it (#98).

I would like to add it back. It is a clear handle for people to drag, and we can display some useful information in the header, e.g., function name, title, pod number, and execution count.

What do you think? @forrestbao

@lihebi
Copy link
Collaborator

lihebi commented Apr 21, 2023

SG, let's use the auto-hide handle in your solution one first. We kind-of already have something similar to solution 2, the "cut" button. The UI logic could be refined though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants