Skip to content

Snake-like wires in the node graph #2170

Closed
@Keavon

Description

@Keavon

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

Metadata

Metadata

Labels

Projects

Status

Completed This Milestone

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions