How to obtain accurate value of segment-distances and segment-weights for creating bendpoints?

Question

I am trying to create edges with bends for a layout. Normally, I am using a haystack edge in the graph but whenever an edge bend has to be created, the curve-style of the edge is changed to segments. Currently, I am only creating edges with single bends. I have tried the code provided in this post but it is not creating proper edges. Currently, I am using the code from cytoscape.js-edge-editing, since it is creating better results.

The main problem is that the segment-distances values which cause the bendpoint to be created at the wrong location. Since, the functions in the above provided codes are not creating proper bendpoints, what is the right way to go about this?

A sample problem is as shown:

An edge bend has to created created in the edge from n12 to n15 where n12 is the source. The values of segment-distances and segment-weights are shown in the console. Having a positive value of segment-distances creates the bendpoint at the wrong position. It was actually supposed to be to the right of n12 and to the top of n15.

Whereas in another scenario, as shown in the following figure, an edge bend has to be created in the edge from n3 and n2. And the positions of these nodes are quite similar to n12 and n15 wrt each other. Their edge is given the same values of segment-distances and segment-weights as for the edge in the previous figure. And yet, the bendpoint is created (not accurately) but almost near to the expected location. Whereas the same value of segment-distance creates the bendpoint at the opposite location in the previous scenario.

I do not understand why this is happening. Can someone please guide me as how to solve this problem?

Answer 1

Refer to edge-distances:

edge-distances : With value intersection (default), the line from source to target for segment-weights is from the outside of the source node’s shape to the outside of the target node’s shape. With value node-position, the line is from the source position to the target position. The node-position option makes calculating edge points easier — but it should be used carefully because you can create invalid points that intersection would have automatically corrected.

https://js.cytoscape.org/#style/segments-edges

The intersection point is different from the node centre point (position).

If you want right-angled edges, you should probably just use taxi edges: https://js.cytoscape.org/#style/taxi-edges