How to create a Loop in Tree layout

GoJS
1

We are evaluating the GoJS HTML5 library to implement a flow component within our product, but we are facing some issues while drawing.

We are tying to create a diagram which contains LoopFlow.

A loop will have a LoopStart and LoopEnd node, in between it may have other flow.

To make it look like a loop, a forward link and a bakward link has been created.

Forward link connects LoopStart to LoopEnd and Backward link connects LoopEnd to LoopStart.

but the diagram is not resulting as expected as desired diagram.

Layout Properties Used:

_diagram = $$(go.Diagram, "myDiagram-" + id, {

initialAutoScale : go.Diagram.UniformToFill,

layout : $$(go.TreeLayout,{nodeSpacing:35}),

"toolManager.mouseWheelBehavior" : go.ToolManager.WheelZoom,

initialContentAlignment : go.Spot.Center,

allowMove : false,

allowDelete : false

});

Link Properties Used:

var linkTemplate = $$(go.Link,

{

routing : go.Link.AvoidsNodes ,

curve : go.Link.JumpOver,

corner : 3,

toShortLength : 2,

adjusting : go.Link.Stretch,

smoothness : 1

},

Note:

We are using TreeLayout with above properties, we tried with LayeredDigraph but its giving odd shape compare to TreeLayout.

If someone is having any idea, please respond.

Thanks in advance

Srinivas

2

What “odd” result are you getting with LayeredDigraphLayout? Your graph is clearly not tree-structured, so it should not be surprising that TreeLayout is ignoring the superfluous links. You should be trying LayeredDigraphLayout.

Still, you might get what you want with TreeLayout by setting some properties on those green links. For the top green links, set isLayoutPositioned: false, isTreeLink: false, fromSpot: go.Spot.Top, toSpot: go.Spot.Top. For the bottom green links, use go.Spot.Bottom for the fromSpot and toSpot.

But you might get the best results by implementing your loops as Groups, although that might involve significant restructuring. Until then, try setting those link properties on just the green links.

3

Assuming you are using my suggestion to continue using TreeLayout by having separate link templates, one for green links going up or backward, and another template for green links going down or forward:

You can get the appearance of nesting by having outer green links (i.e. labeled 1 and 2 in red) go further away from the green circle nodes (rather than turn after 10 or so pixels) by setting fromEndSegmentLength and toEndSegmentLength to appropriately larger values, depending on how much “stuff” is encompassed by the “loop”. You might need to calculate that at the end of the TreeLayout by deriving your own custom TreeLayout class and overriding the commitLinks method. There are a few samples that override …Layout.commit… methods, although apparently not the commitLinks method in particular.

4

Thank you Walter for quick reply,
We applied your suggestions for backward and forward link in combination with groups.
and the result is as below.

We are using groups,
group1: from SplitNode to JointNode (including both the nodes)
group2: LoopPointNode to LoopPointNode (including both the nodes)
Now loop is drawing properly as expected, but we are facing two more problems as marked in no.1 and no.2 in above diagram.

Problem1:
From Split node we are having 4 branches which need to join at JointNode.
First 3 are joining properly, but the 4th one is intersecting other branches.
a)we want to show each branch as separate and need to join at joint node.
b)Split and Joint node should be aligned horizontally.(in figure you can observe that joint node is aligned above compared to splitnode)

Problem 2:
We are getting extra elbow in some places, as showed at point 2.
We observed that its happening whenever a node is connecting with another node which is part of a group and Vice versa.

We would like to have your suggestions on these problems.
Thanks in advance.
Srinivas

5

What happens if you do not use AvoidsNodes routing at all?

6

After removing routing as AvoidNodes I am getting the following result.

7

Sorry, I meant that if you wanted orthogonal routes, you use routing: go.Link.Orthogonal.

I am also assuming that you are using LayeredDigraphLayout. If you are insisting on using TreeLayout, do not include the Join node but position it yourself.