Is there any way to always arrange nested groups horizontally?

GoJS
#1

Hi,

We are using go js 2.1.4 and trying to build a shape template with nested groups. In this specific use case we have one group node “If”, which has two inner group nodes, “Then” and Else". So when inner groups are collapsed, I see that everything works fine as those groups are arranged horizontally.

Screenshot 2021-02-15 at 2.08.44 PM
Screenshot 2021-02-15 at 2.08.44 PM939×664 8.89 KB

But when one or both child group nodes (Then/ Else) are expanded, as shown below, it automatically arranges child groups vertically:

Screenshot 2021-02-15 at 2.09.30 PM
Screenshot 2021-02-15 at 2.09.30 PM900×1840 47.2 KB

Is there a way to always align inner groups horizontally by setting up layout configuration on outer group node ?
I have been using GridLayout for outer group node - If and TreeLayout for inner group nodes - Then/ Else.

Any pointers would be really helpful.

Thanks in advance!

#2

I also tried to use a Horizontal panel inside the outer group node, but then I couldn’t find a way to force the go.Placholder use the Horizontal panel for the contents of it.

#3

Layouts arrange Parts (Nodes and Groups and Links) within each Diagram or Group.
Panels arrange GraphObjects within each Part (including each Group).

What is your GridLayout?

#4

I have set below layout for the layout property of the outer group node - “If”, with the assumption that as Then and Else nodes would be members of If group node the layout property on If group node would control arrangement of Then and Else nodes. I might be missing something here.

$(go.GridLayout,
        {
            alignment: go.GridLayout.Position,
            wrappingColumn: 200,
            cellSize: new go.Size(100, 100),
            spacing: new go.Size(4, 4)
        }
    )

Also I thought of using Horizontal panel so that both inner groups,Then and Else, would be placed next to each other always. But I couldn’t find a way to do so as the go js adds group members automatically under Placeholder of a given group node’s template.

#5

That looks OK.

wrappingColumn units are in number of nodes., not document units. But 200 should be OK.

Try setting wrappingWidth to Infinity.

#6

Awesome! That has fixed the issue. Thank you.