Add re-size to group cause expand not working

andy66yang · December 27, 2013, 4:36pm

Hi,

I created a re-sizable group with sub-graph expanded button. The button worked fine if I didn’t re-size it. However if I clicked the button after re-sizing it, the whole sub-grpah disappeared and the group node remained the same size as before. Please see the attached image:

Below is the code for my test page:

<!doctype html>

Regrouping Demo

This sample allows the user to drag nodes, including groups, into and out of groups, both from the Palette as well as from within the Diagram.

Highlighting to show feedback about potential addition to a group during a drag is implemented using GraphObject.mouseDragEnter and GraphObject.mouseDragLeave event handlers. Because Group.computesBoundsAfterDrag is true, the Group's Placeholder's bounds are not computed until the drop happens, so the group does not continuously expand as the user drags a member of a group.

When a drop occurs on a Group or a regular Node, the GraphObject.mouseDrop event handler adds the selection (the dragged Nodes) to the Group as new members.

Load Save

{ "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":1, "text":"Main 1", "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}, {"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} ], "linkDataArray": [ ]}

Thanks.

walter · December 28, 2013, 7:48am

It seems to be working the way you defined it. The group’s member Nodes and Links are disappearing and reappearing as you collapse and expand the group, right? And the size of the group node itself is determined by the desiredSize which was set by the user. Surely you don’t want to lose that information, do you? What should happen when the user resizes the collapsed group? So you might want to implement a Group.subGraphExpandedChanged event handler that changes the appearance of the group the way that you want it.

andy66yang · December 30, 2013, 5:25pm

Yes, the nodes and links inside the group disappeared and re-appear as I collapsed and expanded. I tried your suggestion to implement Group.subGraphExpandedChanged event handler to change the size of the group by setting “desiredSize”, but I could never have the size displayed as good as the default implementation in goJS before the group was re-sized. Is there a way to access the code in goJS when collapsing the group?

Thanks.

walter · December 30, 2013, 5:58pm

What did you set the desiredSize to? new go.Size(NaN, NaN)?

andy66yang · December 30, 2013, 7:54pm

I set it to a fixed size like new go.Size(200, 40).

The thing that really puzzled me was if I removed Group.subGraphExpandedChanged event handler and set computesBoundsAfterDrag to true, then I dragged the node to make the group re-size. After that I clicked on the collapse button, the group node showed up so nicely including the port that attached to it, and the link to the node outside the group drew also perfectly. If I add the handler back and set it to certain size, the port attached to the port was missing and the link to nodes outside was not rendered correctly. What other things should I do in the handler other than setting the desired size of the group?

Below is the code snippet I put in the handler:

subGraphExpandedChanged : function (group) {
 if (group.isSubGraphExpanded) {
 group.desiredSize = origGroupSize;
 } else {
 origGroupSize = group.desiredSize;
 group.desiredSize = new go.Size(200, 40);
 }
}

I am attaching these two pictures for comparison.

Thanks.

walter · December 31, 2013, 5:25am

Did clearing the desiredSize, by setting it to NaNxNaN, not work?

andy66yang · December 31, 2013, 12:25pm

No, it doesn’t work.

Thanks.

walter · December 31, 2013, 12:48pm

I don’t understand why you are setting the desiredSize of the Group but the user resizes the “BODY” Panel. And I believe that you are persisting (via a TwoWay Binding) the “BODY”'s desiredSize too.

andy66yang · December 31, 2013, 1:24pm

Thanks, I got it working by changing the desired size of “BODY” panel.