Collapsing group with groups

GoJS
1

Hi,
When a group of groups is collapsed, the subGrapghChangeHandler is invoked for all the child groups as well as for the collapsed group.
How can avoid that or distinguish, which group was collapsed ?
Regards,
Tany

2

The argument to the Group | GoJS API event handler is the Group.

The “SubGraphCollapsed” DiagramEvent | GoJS API is only raised once for the CommandHandler.collapseSubGraph command.

3

I have a group that contains 6 groups.
The handler is called 7 times when i try to collapse the group.

I noticed that if the groups within the parent group are collapsed, the handler is called only for the parent group.
If some of the groups are expanded, the handler is called for each expanded sub group as well as for the parent group.

4

Did you still have a question? I thought I answered both of your questions: how to avoid being called for every group that is collapsed (use “SubGraphCollapsed” DiagramEvent), and how to know which group was collapsed if you are still using Group.subGraphExpandedChanged (it’s the argument to the handler).

5

when i used Group.subGraphExpandedChanged is the handler was called for each expanded group or sub group.
I will switch to SubGraphCollapsed diagram event and see what happens.

6

I used the SubGraphCollapsed and it is called once.
Thanks

7

Walter,
Please take a look at the attached code.
It has a group that contains 3 sub groups.
When trying to collapse the parent group, if one of the sub group is expanded, the handler function ti called for each expanded group.
So, what is the best way to handle group collapsing/expanding ? by the SubGraphCollapsed Diagram Event handler ?

var nodeDataArray = [
{ key: “A”, isGroup:true, zOrder: 0 },
{ key: “BB”, isGroup:true, group: “A”, zOrder: 1 },
{ key: “CC”, isGroup:true, group: “A”, zOrder: 10 },
{ key: “DD”, isGroup:true, group: “A”, zOrder: 9 },
{ key: 1, source: “icons/Router.svg”, group: “BB” },
{ key: 2, source: “icons/Router.svg”, group: “BB” },
{ key: 3, source: “icons/Router.svg”, group: “BB” },
{ key: 4, source: “icons/Router.svg”, group: “BB” },
{ key: 5, source: “icons/switch.png”, group: “CC”, zOrder: 11 },
{ key: 6, source: “icons/switch.png”, group: “CC”, zOrder: 11 },
{ key: 7, source: “icons/switch.png”, group: “CC”, zOrder: 11 },
{ key: 8, source: “icons/switch.png”, group: “CC”, zOrder: 11 },
{ key: 9, source: “icons/Router.svg”, group: “DD”, zOrder: 9 },
{ key: 10, source: “icons/Router.svg”, group: “DD”, zOrder: 9 },
{ key: 11, source: “icons/Router.svg”, group: “DD”, zOrder: 9 },
{ key: 12, source: “icons/Router.svg”, group: “DD”, zOrder: 9 }
];

var linkDataArray = [ { from : 1, to: 2 }, { from : 4, to: 5 }, { from : 8, to: 9 }, { from : 10, to: 11 } ];

var $ = go.GraphObject.make;

var diagram = new go.Diagram("myDiagramDiv");
diagram.contentAlignment = go.Spot.Top;
diagram.undoManager.isEnabled = true;

//diagram.layout = $(go.GridLayout);

diagram.nodeTemplate =
        $(go.Node, "Spot",  // the Shape automatically fits around the TextBlock
			    new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                new go.Binding("zOrder"),
$(go.Picture, { width: 50, height: 50 }, new go.Binding("source") )
        );

diagram.groupTemplate =
        $(go.Group, "Auto",
                {
                    isSubGraphExpanded: false,
                    subGraphExpandedChanged : subGraphExpandedChanged,
                    layout: $(go.GridLayout)
                },
                new go.Binding("zOrder"),
                $(go.Shape, "RoundedRectangle", // surrounds everything
                        { parameter1: 10, fill: "whitesmoke" }),
                $(go.Panel, "Vertical",  // position header above the subgraph
                        { defaultAlignment: go.Spot.Left },
                        $(go.Panel, "Vertical",  // the header
                                { defaultAlignment: go.Spot.Top },
                                //$("SubGraphExpanderButton"),
                                $("SubGraphExpanderButton",
                                        {
                                            "_subGraphExpandedFigure": "TriangleUp",
                                            "_subGraphCollapsedFigure": "TriangleDown",
                                            "_buttonFillNormal": "white",
                                            "_buttonStrokeNormal": "black",
                                            "_buttonFillOver": "lightgreen",
                                            "_buttonStrokeOver": "green",
                                        }
                                       ),
								$(go.Placeholder,     // represents area for all member parts
                                {  background: "white" })
                        ),
                    $(go.TextBlock, new go.Binding("text", "key"))
                )
        );
diagram.linkTemplate = $(go.Link,
    { layerName: "Adornment"},
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" } ));

diagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);

 function subGraphExpandedChanged(group) {

     var groupData = diagram.model.findNodeDataForKey(group.key);

     if (group.isSubGraphExpanded === false) {
     }
     else {
     } // subGraphExpanderClicked
 }
8

If you want to be notified when the collapseSubGraph command happens, define a “SubGraphCollapsed” DiagramEvent listener.

If you want to be notified when a Group is collapsed or expanded, define a Group.subGraphExpandedChanged event handler.