Right-angle wires in the node graph

[Stargazer10101]

This PR represents an initial attempt to address [Issue #2170], specifically focusing implementing the first part of the issue :
The wires follow only right-angle horizontal and vertical paths.
The corners have been rounded.

Remaining work:
Producing a final algorithm that avoids overlapping nodes and other wires given any positioning of nodes (similar to the high-fidelity node graph UI mock up posted with the issue).

Screenshot of current implementation:

[Keavon]

This looks awesome! I think the easiest low-hanging fruit change is ensuring all wires line up with the grid, so vertical sections that are halfway between an odd-number of grid spaces apart should just round up.

Then for developing the algorithm further to be "smart", I imagine the first and most crucial step is a system for coordinating between wires to avoid occupying the same vertical or horizontal run (i.e. wires overlapping for some distance, meaning it's hard to see which is which) as much as possible by choosing to bend at different places so they can run parallel instead of on top of each other.

I'll need to play with it but, assuming the overlapping wires isn't too prevalent now that they don't have curvy bends, it probably makes sense to merge this PR first and then continue adding the routing algorithms in a subsequent PR. I will aim to review this PR today or tomorrow for you. Thanks, and welcome!

[Keavon]

!build

[github-actions]

📦 Build Complete for 5cfbbd3
https://2e1bbda1.graphite.pages.dev

[Keavon]

One issue that I'm spotting now which should be quick to fix: your implementation seems to be giving the top output from a layer stack a thick wire, when it should be thin like it is in the current version.

[Stargazer10101]

Thanks for feedback @Keavon . I'm looking into this.

One issue that I'm spotting now which should be quick to fix: your implementation seems to be giving the top output from a layer stack a thick wire, when it should be thin like it is in the current version.

[Keavon]

Also one more observation: if you look very closely, the way your vertical wires line up with the grid (when the spacing is an even number), you will notice that the vertical line goes entirely to the right of the grid dots when it should straddle the grid evenly. So your current implementation has it drawing at a half-line width to the right.

[Stargazer10101]

One issue that I'm spotting now which should be quick to fix: your implementation seems to be giving the top output from a layer stack a thick wire, when it should be thin like it is in the current version.

This was done so as to exactly match the UI mockup shown in the issue.
This is what it looks like otherwise:

Which is not identical with this(the mockup):

[Stargazer10101]

Also one more observation: if you look very closely, the way your vertical wires line up with the grid (when the spacing is an even number), you will notice that the vertical line goes entirely to the right of the grid dots when it should straddle the grid evenly. So your current implementation has it drawing at a half-line width to the right.

Working on this.

[Keavon]

The mockup contains that tapered triangular portion at the base of the vertical wire when it exits the layer, but the actual wire itself is still a thin wire because it represents non-stacking data. Eventually I will get around to adding that triangular taper but that is just a stylistic element.

[Stargazer10101]

Also one more observation: if you look very closely, the way your vertical wires line up with the grid (when the spacing is an even number), you will notice that the vertical line goes entirely to the right of the grid dots when it should straddle the grid evenly. So your current implementation has it drawing at a half-line width to the right.

I have made some changes. This is how it looks now:

Requesting your feedback.

[Keavon]

That looks good, thanks. I'd be happy to merge this after the rounding of odd numbered horizontal grid spaces to avoid vertical lines halfway through the grid lines (like in your bottom center vertical line in your latest screenshot). And after the situation is resolved where a node is brought from being right of its predecessor to instead being to the left, where the wires will need to deal with cases 5 and 6 in the diagram in the original issue.

[Stargazer10101]

I've made some changes. The vertical lines now lie on the grid lines. The cases 5 and 6 of the diagram are demonstrated in the bottom left of the following image:

[Keavon]

!build

[github-actions]

📦 Build Complete for d7744dc
https://893aba6f.graphite.pages.dev

[Keavon]

Nice work on case 6. Case 5 still needs to be implemented:

[Keavon]

There is also a zone where this isn't working as desired, but it works further to the left and further to the right. Basically, case 6 should kick in earlier instead of letting the port's output get cut off. Demonstrated in this video:

capture_2_.mp4