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

Snake-like wires in the node graph #2170

Closed
Keavon opened this issue Jan 1, 2025 · 3 comments · Fixed by #2182
Closed

Snake-like wires in the node graph #2170

Keavon opened this issue Jan 1, 2025 · 3 comments · Fixed by #2182
Assignees
Labels
Good First Issue Good for newcomers

Comments

@Keavon
Copy link
Member

Keavon commented Jan 1, 2025

Wires between nodes currently follow bendy, angled curves:

capture

We want to redesign this style of curvature so it follows only right-angle horizontal and vertical paths:

capture

That means it should follow "snake-like" curves with these numbers of bend points + end points:

capture

Where the red arrows indicate, those horizontal/vertical segments should be able to shift in space to avoid overlapping obstacles like nodes and running on top of other wires in the same direction of travel.

The first part of this issue involves simply devising an algorithm to produce the coordinates of these snake ends/bends, with the end points specified and the offsets of the shiftable segments given as an array. Then constructing an SVG path that rounds/fillets the corners. Subsequent work can then integrate it as a replacement for the existing curve code (see this code) and determine the appropriate array of segment shifts to produce a result that nicely avoids overlapping nodes and other wires, as shown in the high-fidelity node graph UI mockup above.

A video on a related topic: https://www.youtube.com/watch?v=ysaIAwxl7fc

@Keavon Keavon added Feature Good First Issue Good for newcomers labels Jan 1, 2025
@Keavon Keavon added this to Task Board Jan 1, 2025
@github-project-automation github-project-automation bot moved this to Short-Term in Task Board Jan 1, 2025
Stargazer10101 added a commit to Stargazer10101/Graphite that referenced this issue Jan 9, 2025
@Keavon Keavon removed the Feature label Jan 19, 2025
Keavon added a commit that referenced this issue Feb 13, 2025
* Verticle and horizontal lines achieved(#2170)

* vertical lines alligned with grid dots

* fixed vertical lines positioning

* Deals with cases 5 and 6

* Fixed case 5 and other problematic zones

* edge cases solved

* edge cases fixed: HorizontalOut & HorizontalIn

* added comments

* Changed midX and midY

* Clean up if/else statements

* Consolidate code

* Consolidate further

* Add preference for wire style

---------

Co-authored-by: Keavon Chambers <[email protected]>
@Keavon
Copy link
Member Author

Keavon commented Feb 13, 2025

Completed in #2182.

@Keavon Keavon closed this as completed Feb 13, 2025
@github-project-automation github-project-automation bot moved this from Short-Term to Completed This Milestone in Task Board Feb 13, 2025
@Keavon
Copy link
Member Author

Keavon commented Feb 13, 2025

@Stargazer10101 please comment here that you've completed the issue. GitHub requires you participate in the discussion for me to assign the issue to you, which I need to do for tracking purposes.

@Stargazer10101
Copy link
Contributor

Thanks for reviewing! My PR #2182 has been merged, addressing this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Good First Issue Good for newcomers
Projects
Status: Completed This Milestone
Development

Successfully merging a pull request may close this issue.

2 participants