Skip to content
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

Closed
Tracked by #11510
AdRiley opened this issue Nov 7, 2024 · 5 comments · Fixed by #11836
Closed
Tracked by #11510

Make the Add Component control part of the output port #11508

AdRiley opened this issue Nov 7, 2024 · 5 comments · Fixed by #11836
Assignees
Labels

Comments

@AdRiley
Copy link
Member

AdRiley commented Nov 7, 2024

image

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?

@farmaazon
Copy link
Contributor

farmaazon commented Nov 21, 2024

Refinement notes:

  • We don't think moving button to the actual place of a new node is a good idea, because it need to be within the mouse active area of output port (and the user will have this button handy). But still it should be in the place of default (unobscured) port placement.
  • The implementation should consider multiple ports - each port will have its dedicated + button.

@farmaazon farmaazon moved this from ❓New to 📤 Backlog in Issues Board Nov 21, 2024
@farmaazon farmaazon assigned farmaazon and unassigned farmaazon Nov 29, 2024
@vitvakatu vitvakatu self-assigned this Nov 29, 2024
@vitvakatu vitvakatu moved this from 📤 Backlog to 🔧 Implementation in Issues Board Nov 29, 2024
@enso-bot
Copy link

enso-bot bot commented Dec 2, 2024

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.

@enso-bot
Copy link

enso-bot bot commented Dec 3, 2024

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.

@vitvakatu vitvakatu moved this from 🔧 Implementation to 👁️ Code review in Issues Board Dec 11, 2024
@enso-bot
Copy link

enso-bot bot commented Dec 12, 2024

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.

@enso-bot
Copy link

enso-bot bot commented Dec 12, 2024

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.

@mergify mergify bot closed this as completed in #11836 Dec 18, 2024
@mergify mergify bot closed this as completed in 7a92d1c Dec 18, 2024
@github-project-automation github-project-automation bot moved this from 👁️ Code review to 🟢 Accepted in Issues Board Dec 18, 2024
somebody1234 pushed a commit that referenced this issue Dec 24, 2024
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`.
@farmaazon farmaazon moved this from 🟢 Accepted to 🗄️ Archived in Issues Board Jan 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: 🗄️ Archived
Development

Successfully merging a pull request may close this issue.

3 participants