TreeLayout - aligning link lines

GoJS
1

Hi,
I’m using the TreeLayout to render a logical scheme (AND / OR etc). However, I can not get the lines between the nodes aligning properly.

As it is rendered now it looks like this:
gojs-eqg-routing-not-ok

But I would like the lines from the different branches to be perfectly aligned like this:
gojs-eqg-routing-ok

Is this possible with some proper configuration, or do I have to write some custom code for this kind of routing?

Current config is like:
const layout = $(go.TreeLayout);
layout.alignment = go.TreeLayout.AlignmentStart;
layout.layerStyle = go.TreeLayout.LayerUniform;
layout.nodeSpacing = 8;
layout.layerSpacing = 20;

2

See ParallelLayout, Parallel Layout.

However, please note that that code depends on there being a single “split” node and a single “merge” node in each layout, which effectively means that if you have multiple such situations that you use Groups as the sample does. Some day we’ll generalize that to not require the use of Groups, but we haven’t gotten around to that yet.

3

Thanks for answer.
However, I tried to apply the Parallell layout to my sample code, but it didn’t end up as I expected…
The lines are still not aligned. Also the “end” node was misplaced, it should be the rightmost item.
Can you see any additional layout config that could guide me in right directions?

gojs-eqg-parallell-routing-not-ok

4

For your original example/screenshot, the “X = 3” node should be a “split” node, and the vertical bar node should be a “merge” node. If what you have shown is the whole Diagram, then you don’t need any Groups at all.

5

Ok. Did a refactoring and reduced the number of split/merge nodes and only kept “split” for the ‘X:=3’ and “merge” for end node. But it rendered exactly the same as previously…
Maybe the parallell layout won’t solve my case, another approach needed maybe?

6

Could you post the model data?

7

Please see the model data below.

const nodeDataModel = [
{ key: -1, isGroup: true },
{ key: -2, isGroup: true },
{ key: -3, isGroup: true },
{ key: -4, isGroup: true },
{ key: -5, isGroup: true },
{ key: -6, isGroup: true },
{ key: -100, isGroup: true },

{ key: 1, text: “X:=3”, category: “split”, group: -1 },
{ key: 2, text: “A<B”, category: “condition”, group: -2 },
{ key: 3, text: “C>D”, category: “condition”, group: -3 },
{ key: 4, text: “E=1”, category: “condition”, group: -4 },
{ key: 5, text: “F>0”, category: “condition”, group: -4 },
{ key: 6, text: “G>2”, category: “condition”, group: -4 },
{ key: 7, text: “H=1”, category: “condition”, group: -5 },
{ key: 8, text: “I=0”, category: “condition”, group: -5 },
{ key: 9, text: “ABCDEFG>1”, category: “condition”, group: -5 },
{ key: 10, text: “X<1”, category: “condition”, group: -6 },
{ key: 11, text: “Y<1”, category: “condition”, group: -6 },
{ key: 12, text: “XYZZZZZZZ<0”, category: “condition”, group: -6 },
{ key: 211, text: “END”, category: “merge”, group: -100 },
];

const linkDataModel = [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 1, to: 4 },
{ from: 1, to: 7 },
{ from: 1, to: 10 },

{ from: 2, to: 211 },
{ from: 3, to: 211 },
{ from: 6, to: 211 },
{ from: 9, to: 211 },
{ from: 12, to: 211 },

{ from: 4, to: 5 },
{ from: 5, to: 6 },
{ from: 7, to: 8 },
{ from: 8, to: 9 },
{ from: 10, to: 11 },
{ from: 11, to: 12 },
];

8 
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,  // for v1.*
          layout: $(ParallelLayout, { layerSpacing: 30 })
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "lightgray", strokeWidth: 0 },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );
    myDiagram.nodeTemplateMap.add("Split", myDiagram.nodeTemplate);
    myDiagram.nodeTemplateMap.add("Merge", myDiagram.nodeTemplate);

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        $(go.Shape)
      );

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "X:= 3", category: "Split" },
        { key: 2, text: "A < B" },
        { key: 3, text: "C > D" },
        { key: 4, text: "E = 1" },
        { key: 5, text: "F > 0" },
        { key: 6, text: "G > 2" },
        { key: 7, text: "H = 1" },
        { key: 8, text: "I = 0" },
        { key: 9, text: "ABCDEFG > 1" },
        { key: 10, text: "X < 1" },
        { key: 11, text: "Y < 1" },
        { key: 12, text: "XYZZZZZZZ < 0" },
        { key: 211, text: "END", category: "Merge" }
      ], [
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 1, to: 4 },
        { from: 1, to: 7 },
        { from: 1, to: 10 },

        { from: 2, to: 211 },
        { from: 3, to: 211 },
        { from: 6, to: 211 },
        { from: 9, to: 211 },
        { from: 12, to: 211 },

        { from: 4, to: 5 },
        { from: 5, to: 6 },
        { from: 7, to: 8 },
        { from: 8, to: 9 },
        { from: 10, to: 11 },
        { from: 11, to: 12 }
      ]);
  }

produces:
image

9

Thank you. Then it’s obviously possible to get it to work.
However, I do not get it to work here locally, but I will continue to figure out why.

Just a question; Could it have to do with the version of GoJS? We’re currently running 1.8.31

10

I very much doubt that there is some version-specific problem. I just tried 1.8.31 and it worked the same as with 1.8.32.

Oh, note that template/category names are case-sensitive. I had to change the two category property values in your model data, as well as removing all of the groups.

11

Hi again,
I found the problem. Previously I have named the categories for split / merge nodes as “split” and “merge” respectively. I see now it must be as “Split” and “Merge”! ;)

Thanks for your help!