I’ m having trouble styling (route ) the link from a port on a group and inside to a node. Is it possible to i.e apply AvoidNodes on these links? It seems no matter what i do these links override all stylings applied and just goes as a straight line from port to node on top of other nodes and internal links and it becomes a really mess…
Maybe the Link is trying to “avoid” the Group itself and is always failing because it is connected with a Node within that Group. Have you set Group.avoidable to false in your Group template?
Yes, i’ve tried that now, doesn’t seem to make any difference… Anything else I should try?
Is this only a problem during initialization? In other words, if you move the node by hand, does the link then get routed to avoid nodes as you expected? (But it does require Group.avoidable == false, in any case.)
If it is only an initialization problem, then we have already fixed this bug for version 1.4.12, which we should be releasing in a few days.
If it isn’t, then maybe you could post a screenshot and some more information, or a jsFiddle or codePen, to help us reproduce the problem.
This is not only during initialization, the line from a port and into one of the groups nodes is always straight. Attaching a screenshot where you can see the “problem” … Lines inside group is mostly avoiding nodes and groups, but lines from ports and into group is just a straight line.
I misinterpreted your situation – I thought you had Link.routing set to go.Link.AvoidsNodes already and didn’t understand why it wasn’t working.
It appears that you have Group.layout set to a LayeredDigraphLayout, yes? That layout is what is routing all of the links, including avoiding nodes. BUT the links connecting with the ports on the group are not considered to be part of the group’s subgraph – they belong to whatever contains the group, which appears to be top-level. So those links do not participate in the group’s layout.
I suppose you could try doing what I was suggesting – set Group.avoidable = false and Link.routing = go.Link.AvoidsNodes. That should cause those links connected with the group’s ports to be routed so as to avoid the group’s member nodes. But I don’t know if you want to change the routing of the rest of the links.
As an unrelated comment, I suggest you increase the fromEndSegmentLength and the toEndSegmentLength, either on the nodes’ ports or on the links themselves (the latter might be easier). That will make the links more nicely curved, especially where the links loop back across the layers.
Yes, i have the Group.layout set to LayeredDigraphLayout, and understand now that links to and from ports on the group itself is not considered as part of the groups subgraph.
I tried Group.avoidable and Link.routing AvoidNodes, but the layout turns totally messy with just horizontal and vertical lines - impossible to distinguish the lines from eachother. The lines to and from the ports is as you said not longer straight though… Maybe i could setup different link - templates for the different links and give that a try?
Thank you very much for the time helping me out here - i’m a total newbie at gojs so nice to get some help! :-)
Yes, I was afraid of that result. So using separate templates for links connecting with group ports would be OK, but it might be easier to use the same template that has a Binding on Link.routing with a conversion function that decides whether to return go.Link.AvoidsNodes or go.Link.Normal, based on some property or properties on the link data such as the id of the port that it is connected with.
Thank you very much for your thoughts, i just have to try find a solution which fit my needs for this. When it comes to your comment on fromEndSegmentLength and toEndSegmentLength i’m not really sure what this means… I have tried on both ports, nodes and links, but can’t se much of a difference. Is there any samples which shows the purpose of this settings?
I suppose the Page Flow sample (Page Flow) is most similar to your kind of diagram. It sets the fromEndSegmentLength or the toEndSegmentLength on the port GraphObjects of the Nodes, not on the Links, but you might find it easier to set them on the Link template.
I think it might make the Bezier curve more curvy. You’ll need to play with the value (default is 10) to see what looks best for your diagrams.