Support cubic beziers curve style for edges

[gtnx]

Issue type

Feature request

Description of new feature

• Provide a new curve-style like unbundled-cubic-bezier.
• Support following parameters:
  • control-points. It should be 4-length tuple of floating between 0 and 1. Those would be same points as the ones used in https://cubic-bezier.com/#.75,0,.25,1.

Motivation for new feature

Provide nice hierarchical layouts like the following example (taken from d3 gallery):

This has been asked on stackoverflow

[maxkfranz]

What is the use-case for cubic-bezier support?

It seems similarly styled graphs are already supported, e.g. https://github.com/cytoscape/cytoscape.js/issues/914#issuecomment-546842783.

[gtnx]

The use case is to draw edges with two inflexion points as the illustration i provided and the example you mentioned. The reason is pure aesthetic as some people consider it's prettier that straight edges.

I understand it's feasible with quadratic beziers curves by drawing two quadratic edges by providing a tuple of two elements to the arguments: control-point-distances. I also understand that this argument expects an absolute values (not relative values in terms of distance between nodes).

In our usecase, we display DAGs using the dagre-layout. As far as i understand, this layout chooses where each node should be placed so i don't know the distance between two nodes. Thus, i cannot know which parameters i should set for control-point-distances. Besides, i believe that providing relative parameters makes the API much more friendly.

Does that make sense to you?

Is there a way to achieve this with the current API?

[IfatChitin]

Hi @gtnx, Here is an example of how we achieved these beautiful edges (with relative values in terms of distance between nodes) using the current API:

https://codepen.io/ifatchitin/pen/JjoopVK

Hope this helps :) Ifat

[gtnx]

Thanks @IfatChitin it helped a lot.

I did another codepen which simulates cubic beziers edge by using two quadratic bezier edges.

Here's how i did for two points P0 and P1. The idea is to generate two symmetric quadratic bezier curves which are represented by center control points A & B. Those control points coordinates are found by solving beziers equation. In the relative coordinates where (x0, y0) = (0, 0) & (x1, y1) = (1, 1), we have (xA, yA) = (0.25, 0) & (xB, yB) = (0.75, 1).

Cytoscape expects for the parameter control-points-distances the distance between the point P1 and the imaginary line between P0 & P2 as illustrated here. With simple geometry, we can compute this distance d which is illustrated in the below figure.

• z = sqrt((x1-x0)**2 + (y1-y0)**2)
• costheta = (x1-x0)/z
• h=0.25*(y1-y0) (thales theorem)
• d=h*costheta

Hope this helps other people.

[gtnx]

With the codepen, you can parametrize the "0.25" with an alpha parameter. Thus :

alpha=0.1

alpha=0.25

alpha=0.4