Problem with Group expand

GoJS
1

Hi!
I have problem with groups expand. I set isOngoing and isSubGraphExpanded for group. After opening group members are not displayed.

%D0%90%D0%BD%D0%BD%D0%BE%D1%82%D0%B0%D1%86%D0%B8%D1%8F%202019-12-30%20180851
Аннотация 2019-12-30 180851.png754×432 1.66 KB

myDiagram.groupTemplateMap.add(“OfGroups”,
$(go.Group, “Auto”,
{

            background: "transparent",
            isSubGraphExpanded: false,
            mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
            mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
            computesBoundsAfterDrag: true,
            mouseDrop: finishDrop,
            handlesDragDropForMembers: true,

            layout:
                $(go.GridLayout,
                    {
                        alignment: go.GridLayout.Position,
                        cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4), isOngoing: false,
                    })
        },
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "Rectangle",
            { fill: null, stroke: "#FFDD33", strokeWidth: 2 }),
        $(go.Panel, "Vertical",
            $(go.Panel, "Horizontal",
                { stretch: go.GraphObject.Horizontal, background: "#FFDD33" },
                $("SubGraphExpanderButton",
                    { alignment: go.Spot.Right, margin: 5 }),
                $(go.TextBlock,
                    {
                        alignment: go.Spot.Left,
                        editable: true,
                        margin: 5,
                        font: "bold 18px sans-serif",
                        opacity: 0.75,
                        stroke: "#404040"
                    },
                    new go.Binding("text", "text").makeTwoWay())
            ),
            $(go.Placeholder,
                { padding: 5, alignment: go.Spot.TopLeft })
        )
    ));

myDiagram.groupTemplateMap.add("OfNodes",
    $(go.Group, "Auto",
        {
            isSubGraphExpanded: false,
            background: "transparent",
            ungroupable: true,
            computesBoundsAfterDrag: true,
            handlesDragDropForMembers: true,
            layout:
                $(go.GridLayout,
                    {
                        wrappingColumn: 1, alignment: go.GridLayout.Position,
                        cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4), isOngoing: false
                    })
        },
        new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
        $(go.Shape, "Rectangle",
            { fill: null, stroke: "#33D3E5", strokeWidth: 2 }),
        $(go.Panel, "Vertical",
            $(go.Panel, "Horizontal",
                { stretch: go.GraphObject.Horizontal, background: "#33D3E5" },
                $("SubGraphExpanderButton",
                    { alignment: go.Spot.Right, margin: 5 }),
                $(go.TextBlock,
                    {
                        alignment: go.Spot.Left,
                        editable: true,
                        margin: 5,
                        font: "bold 16px sans-serif",
                        opacity: 0.75,
                        stroke: "#404040"
                    },
                    new go.Binding("text", "text").makeTwoWay())
            ),
            $(go.Placeholder,
                { padding: 5, alignment: go.Spot.TopLeft })
        )
    ));

myDiagram.nodeTemplate =
    $(go.Node, "Auto",
        $(go.Shape, "Rectangle",
            { fill: "#ACE600", stroke: null },
            new go.Binding("fill", "color")),
        $(go.TextBlock,
            {
                margin: 5,
                editable: true,
                font: "bold 13px sans-serif",
                opacity: 0.75,
                stroke: "#404040"
            },
            new go.Binding("text", "text").makeTwoWay())
    );
2

Are you sure that the Group actually has member Nodes? Select the Group, and then in the debugger evaluate myDiagram.selection.first().memberParts.count.

3

Yes, it have members and work correct if isOngoing = true.

myDiagram.model = go.Model.fromJson({ “class”: “go.GraphLinksModel”,
“nodeDataArray”: [
{“key”:1, “text”:“Main 1”, “isGroup”:true, “category”:“OfGroups”},
{“key”:2, “text”:“Main 2”, “isGroup”:true, “category”:“OfGroups”},
{“key”:3, “text”:“Group A”, “isGroup”:true, “category”:“OfNodes”, “group”:1},
{“key”:4, “text”:“Group B”, “isGroup”:true, “category”:“OfNodes”, “group”:1},
{“key”:5, “text”:“Group C”, “isGroup”:true, “category”:“OfNodes”, “group”:2},
{“key”:6, “text”:“Group D”, “isGroup”:true, “category”:“OfNodes”, “group”:2},
{“key”:7, “text”:“Group E”, “isGroup”:true, “category”:“OfNodes”, “group”:6},
{“text”:“first A”, “group”:3, “key”:-7},
{“text”:“second A”, “group”:3, “key”:-8},
{“text”:“first B”, “group”:4, “key”:-9},
{“text”:“second B”, “group”:4, “key”:-10},
{“text”:“third B”, “group”:4, “key”:-11},
{“text”:“first C”, “group”:5, “key”:-12},
{“text”:“second C”, “group”:5, “key”:-13},
{“text”:“first D”, “group”:6, “key”:-14},
{“text”:“first E”, “group”:7, “key”:-15}
],
“linkDataArray”: [ ]}
);

4

I copied the Regrouping sample, Regrouping Demo, and added this assignment to both Group templates:

            isSubGraphExpanded: false,

Everything works as I think you would expect – the groups start off collapsed. And when the user expands them, it shows the members nodes, including any nested groups.

So I cannot explain any problem that you are having. Could you please tell us how to reproduce the problem?

5

It’s need to set isOngoing: false for diagram and groups layouts.

6

Well, doing so causes the problem that you state. So why do you need to set Layout.isOngoing to false? Could you restrict layout invalidation more precisely? Please read GoJS Layouts -- Northwoods Software

7

I need to save position of all members after expand/collapse group.

8

A TwoWay Binding on “position” or “location” will do that for you. Do you not have saved position information in the model data initially, thereby causing those member nodes not to have valid positions?

Why don’t you set Layout.isOngoing to false only in a Group.subGraphExpandedChanged event handler after it has become Group.isSubGraphExpanded?

9

Thank you! It works.

    subGraphExpandedChanged: function(g) { g.layout.isOngoing = false; }