How to avoid overlapping of links on nodes and groups

GoJS
1

We have the following graph with sub-graphs. There are 3 parts

  • Root graph - user cannot collapse this and contains sub-graph and Nodes
  • Sub graph - User can collapse this and contains the Nodes
  • Nodes - These can be inside the sub-graph or root graph

User is allowed to draw links between Nodes ONLY and we want these links to not overlap Nodes/Groups.

We are using the avoidsNodes routing but even then the links are overlapping the nodes as per the image

Current Behavior

image
image1053×593 82.3 KB

Expected behavior

image
image953×638 73.4 KB

Following is the Diagram, Node and the Link template:

$(go.Diagram, {
    initialAutoScale: go.Diagram.Uniform,
    layout: $(go.CircularLayout),
    validCycle: go.Diagram.CycleDestinationTree,
    "animationManager.isEnabled": true,
    allowMove: false,
    allowCopy: false,
    model: $(go.GraphLinksModel, {
      nodeGroupKeyProperty: "parent",
      linkKeyProperty: "key",
    }),
})


$(
  go.Node,
  "Auto",
  {
    padding: 0,
    isShadowed: false,
    shadowOffset: new go.Point(0, 2),
    shadowBlur: 8,
    width: 162,
    click: (e, obj) => handleClick(e, obj),
    deletable: false,
    fromLinkable: true,
    toLinkable: true,
    toMaxLinks: 1,
    fromMaxLinks: 1,
    cursor: "pointer",
    portId: "",
  }
  ....// other stuff
)

 


$(
  go.Link,
  {
    routing: go.Link.AvoidsNodes,
    curve: go.Link.JumpOver,
    relinkableFrom: true,
    relinkableTo: true,
  },
  $(go.Shape),
  $(go.Shape, {
    toArrow: "Standard",
  })
)
2

Thanks for providing screenshots and the important pieces of the node and link templates – but what are your group template(s)?

If you increase the spacing between groups a little bit, does that help with improving the routing?

3

Tried increasing the horizontal and vertical spacing it did work for some nodes but for nodes on the left in groups are still having issues.
Also, there is one more issue that got highlighted. Links are getting overlapped in some cases. (Screenshot at the end)

To help understand and debug the problem have created a live example on StackBlitz- Group chart ordering

image
image1299×789 86.7 KB

4

Does it help if you set Node.avoidable to false on the outer group template, or maybe on both group templates?

5

This helps with avoiding the nodes, but it’s started crossing the subgroups…!!!

We are trying to achieve the following things

  • Links should not cross nodes
  • Links should not cross subgroups
  • Links should not overlap each other

image
image1024×719 123 KB

6

Did you not set avoidable on the regular nodes?
Did you set avoidable false on the outer group?

Did you set avoidable false on the inner group?
Are there a lot of collapsed groups in the middle of your screenshot? I didn’t know that. If so, try this binding on the group template used by inner groups:

new go.Binding("avoidable", "isSubGraphExpanded", e => !e).ofObject(),
7

Thank you so much for providing a solution @walter.

Currently, links are being drawn randomly between subgraphs and nodes.
Ask is, if there is stack of nodes between two linking nodes then Link should first go extreme down till the stack where target node is present it will go high till target node.

Current Behaviour

image
image1714×891 123 KB

Expected Behaviour
Expected behaviour is shown using red lines

image
image1713×890 122 KB

8

You will need to implement your own routing – override Link.computePoints.

9

Do we have any sample code/example to dig into it?

10

Did you search the samples and extensions?