-
Notifications
You must be signed in to change notification settings - Fork 323
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
Make the Add Component control part of the output port #11508
Comments
Refinement notes:
|
Ilya Bogdanov reports a new STANDUP for the provided date (2024-11-29): Progress: Opened a PR for output port extension, starting working on the new plus button. It should be finished by 2024-12-03. |
Ilya Bogdanov reports a new STANDUP for yesterday (2024-12-02): Progress: Implementing button shape and positioning, considering different ways of animating it when the output port appears. It should be finished by 2024-12-03. |
Ilya Bogdanov reports a new STANDUP for the provided date (2024-12-10): Progress: Finishing the implementation, working on fixing tests. It should be finished by 2024-12-11. |
Ilya Bogdanov reports a new STANDUP for yesterday (2024-12-11): Progress: Fixing remaning tests, opening a PR. It should be finished by 2024-12-11. |
Closes #11508 https://github.com/user-attachments/assets/7943f63d-4d34-4909-ac47-bf8ea4dd3eb7 A few notes regarding implementation: - The button is drawn as SVG and embedded into the output port because it is relatively easy to position it correctly and seamlessly blend it with the surrounding output port. - We have a ready SVG `plus` icon, but the initial design suggested we want to make it transparent in the center, so I used a mask to clip the plus shape from the background. This is relatively unimportant for the implementation and can be replaced by a separate SVG if we want. - I fixed the positioning for “port labels.” They are only visible when multiple output ports are present, so it is not important. - There is a hover area extending around the actual button and its “connection”, so it is easy to click. It is a nuance for the tests, though, so I was forced to use `force: true`. - The connection is not a real connection, but has the same dimensions and color scheme. Implementing this visual part as a “fake” edge is extremely tricky, so I chose not to do that. - These buttons must be hidden when the component browser is connected, or they will visually conflict with the normal edge. There is no clear way to check if the component browser is connected to _that_ port, so _every_ button is hidden when the component browser is opened. - As an unrelated change, I renamed `circular menu` → `component menu`.
I think the circle should be smaller than this. Maybe the same size as the one on the vector widget?
Problem:
We have 2 different UX paradigms for adding a new component. If a user discovers one they may miss the second.
Solution:
We should make the add component button part of the output port.
Question should it position itself where the new component will be added? So if there is already a component in the default position it will move to where the empty space is?
The text was updated successfully, but these errors were encountered: