Collapsing and Expanding a Group using CircularLayout does not remain at same location

GoJS
1

When i collapse and expand the group, the group is back to its original location. How can I move the group again (which event?)

2

"SubGraphExpanded" and “SubGraphCollapsed” DiagramEvents.

3

If you collapse and then expand a group, I would hope that the location stays the same. Unless the layout causes everything to move.

Moving a collapsed group does move all of its member nodes. The collapsed group will move to where its member nodes are once expanded (if there is a Placeholder), but normally that should not cause it to shift much. Unless the layout causes everything to move.

4

Try it… the location is after collapse and expand not the same

var $ = go.GraphObject.make;
var myDiagram =
    $(go.Diagram, "myDiagramDiv",
        {
          initialPosition : new go.Point(-100, -100)
        }
     );
myDiagram.grid.visible = true;

myDiagram.nodeTemplate =
    $(go.Node, 
    {
      background: 'green' },
    $(go.Shape, 'Circle', { width: 40, height: 40, fill: 'red' })
  );

myDiagram.groupTemplate =
  $(go.Group, 'Spot',
    { 
      background: 'rgba(0,255,0,.3)',
      layout: $(go.CircularLayout,{
        spacing: NaN,
        radius: 100
      }),
      locationSpot: go.Spot.Center,
      locationObjectName: 'CENTER'
    },
    $(go.Placeholder, {}),
    $(go.Panel, "Vertical", { alignmentFocusName: 'CENTER' },
      $(go.TextBlock,
        new go.Binding("text", "key")
      ),
      $(go.Shape, "Circle",
        { name: 'CENTER', portId: "", width: 100, height: 100, fill: "lightblue" },
      ),
      $("SubGraphExpanderButton") 
    )  
  );

var myModel = $(go.GraphLinksModel);
myModel.nodeDataArray = [
  { key: "Alpha", isGroup: true, loc: new go.Point(200, 200)},
  { key: "Beta", group: "Alpha" },
  { key: "Gamma", group: "Alpha" },
  // { key: "Delta", group: "Alpha" },
  // { key: "Epsilon", group: "Alpha" },
];

myModel.linkDataArray = [
    { from: "Alpha", to: "Beta"},
    { from: "Alpha", to: "Gamma"},
    // { from: "Alpha", to: "Delta"},
    // { from: "Alpha", to: "Epsilon"}
  ];

myDiagram.model = myModel;

function move() {
  myDiagram.startTransaction('test2');
  group = myDiagram.findNodeForKey("Alpha");
  group.move(new go.Point(200 - (group.location.x - group.actualBounds.x) + 50, 200 - (group.location.y - group.actualBounds.y) + 50));
  myDiagram.commitTransaction('test2');  
}
function info() {
  group = myDiagram.findNodeForKey("Alpha");
  alert("Location (x,y) = ("+group.location.x+", "+group.location.y+")");
}
5

That’s interesting – it’s only a problem with CircularLayout. We’ll investigate.

6

We’ll fix this for the next release, 1.7.19.

But I notice that collapsing and expanding such a Group, with several of the layouts, does cause the group’s location to move slightly left. I’m not sure why. It doesn’t happen for ForceDirectedLayout.

7

Ah, the slight shifting that happens when the Group.layout is a TreeLayout or a LayeredDigraphLayout is caused by a Link that loops back to go into a node in the leftmost or topmost layer.

If you set Group.computesBoundsIncludingLinks to false, that shifting goes away.

It’s not a problem with GridLayout or ForceDirectedLayout because then there isn’t any Link extending out beyond the left side or top side of the Nodes in the Placeholder.

8
9

If you set Group.computesBoundsIncludingLinks to false, that shifting goes away.

The problem still exists, although I have new version and setting the property. Try my example…

My group template:

myDiagram.groupTemplate =
  $(go.Group, 'Spot',
    { 
      background: 'rgba(0,255,0,.3)',
      layout: $(go.CircularLayout,{
        spacing: NaN,
        radius: 100
      }),
      locationSpot: go.Spot.Center,
      locationObjectName: 'CENTER',
      computesBoundsIncludingLinks: false
      
    },
    $(go.Placeholder, {}),
    $(go.Panel, "Vertical", { alignmentFocusName: 'CENTER' },
      $(go.TextBlock,
        new go.Binding("text", "key")
      ),
      $(go.Shape, "Circle",
        { name: 'CENTER', portId: "", width: 60, height: 60, fill: "lightblue" },
      ),
      $("SubGraphExpanderButton") 
    )  
  );
10

You aren’t using a “layered” Layout that caused Links to be routed outside of the bounds of the Nodes.

We’ll investigate.

11

I think this will be fixed in version 1.7.20, which should come out either later this week or next week.