Link changes layout from vertical to horizontal... how to fix

I am trying to create a diagram programmatically like below

but what i get is below

If I remove the link then the two inner boxes are vertically placed, like i want them, but when link is added they get horizontally placed.

Any easy way to get pic 1, without resorting to some port kungfu. Please note that my actual diagram is way more complex with 4-5 levels of nesting… above is a simplified version.

I picked the example from groups examples from gojs site
and modified for my needs. My current code is my code

Take a look at your Group template. The sample you took it from sets Group.layout to be an instance of a TreeLayout, whose default angle is 0, which means rightward. So as you add linked nodes to be members of your group, the tree will grow towards the right.

But when the nodes are not linked, they each form the root of a branchless tree, and by default those trees are arranged by TreeLayout vertically.

You could try setting { arrangement: go.TreeLayout.ArrangementVertical } on your TreeLayout, so that the roots are arranged vertically and each tree continues to grow rightwards.

Thanks for the reply. With your hint about angle, I am able to get this basic example working with angle:90.

Going to a little more complex example, with several levels of nesting, where I want to control how elements in each Group are arranged. Here is the picture I want

From my data, i want to control the group-layout e.g. the data of black box could be as below, which ensures that orange boxes are horizontally placed.
{ key: 1, isGroup: true, layout: “horizontal”, line-color: black }

then for the orange box, the data could be like below so that green boxes are placed vertically.
{ key: 2, isGroup: true, layout: “vertical”, line-color: orange, group: 1 }

Maybe I am using wrong layout, because i want to have complete control. This is my 2nd day with gojs and also a javascript newbie so i have lot to learn and some detailed example would be really helpful.

  • Thnx!

Have you seen this sample: Layer Bands using a Background Part ? Of course you’ll want to change the direction. Furthermore that whole diagram’s layout will want to be the layout for each of your orange groups. I don’t know if each black box wants to be its own group, or if that is just the border for your whole diagram.