Strange behaviour on bezier links

GoJS
1

Hello!

I am pretty confused about bezier links. I created a mechanism to dynamically load and fill a link template map based on a json and ran into problems that bezier links were not shown correctly. I could not really figure out why, so I broke down the problem more and more and at the end I only have the following link template left.

myDiagram.linkTemplate = $(go.Link,
{
routing: go.Link.Normal
curve: go.Link.Bezier,
curviness: 50
},
$(go.Shape,
{
stroke: ‘black’,
strokeWidth: 1
}
),
$(go.Shape, { toArrow: “Standard” }),
);

Everything else was not impactful on my problem. With this template, I thought I would get bezier curved links, but all I got was this:

BezierLinks
BezierLinks595×838 433 KB

I double checked this template because I was sure, it should work and used the same template in a test project with the leaflet sample and this was the result:

BezierLinks2
BezierLinks2598×732 365 KB

So here, it apparently worked. How can this happen? What can cause this inconsistency?

Best regards
Jonas Czeslik

2

Another thing, I found out:

It seems like there is a certain bezier curve, but its extremely small also with something like curviness: 500.

image

3

It depends on whether you have specified either or both of the fromSpot and toSpot. You don’t do so on the link template, but I suspect that you have on the port objects. Perhaps you want to increase the value of fromEndSegmentLength and toEndSegmentLength.

4

Thanks, that - in fact - makes it much more curvable, but I have to make the fromEndSegementLength and toEndSegementLength pretty high to see a difference and with that high values, other orthogonal or avoidNodes links are a complete mess.

BezierLinks4.PNG
BezierLinks4.PNG2054×1457 839 KB

Here, I set the toEndSegementLength and fromEndSegementLength to 200, which allows me to draw nice bezier curves, but leaves me with such orthogonal links.

I would like to have a general value that allows visible bezier curves but also normally looking orthogonal links without having to explicitly separate those values all the time.

That would not be possible?

5

Instead of setting the from/toEndSegmentLength on the ports, set them on the Links. That way you can have each link be customized based on routing and curve and perhaps even on the distance.

6

Thats helpful and does the trick!

Thank you!

7

I hope you are using two different link templates, one that has orthogonal routing and one that is curved. That way you can have much less data in the model, and you have more freedom to customize the visual representations in future versions of your app.

8

I am using a link template map and generically add link templates based on a config and on user choices like discussed in Generate nodeTemplate dynamically