Group moves when expanded/collapsed

Hi. I have some odd behaviour with my groups moving significant distances when expanded.

What I’m seeing at the moment is that I can create a group from a selection of nodes, it starts off collapsed. The position of the collapsed group lines up with the left hand side of the nodes that were selected, so far so good. If you then select the group and expand it, the expanded group jumps (often to the left and down?). If you collapse the group it stays where it is, but if you then expand it a second time the expanded group jumps again. If you move the group after having expanded it then it will no longer jump around when collapsing. The very first expand always moves the group.

So I suspect that there’s an issue with positioning that gets resolved when the user moves the group and then “fixes” the position. I don’t fully understand though :)

I’ve read through other similar reports but I can’t find anything that resolves the problem.

I’ve turned off the auto layout features on the entire diagram by creating it like this:

let diagram = $(
        go.Diagram,
        elemId,
        {
            "undoManager.isEnabled": true,
            "draggingTool.isGridSnapEnabled": true,
            layout: $(
                go.LayeredDigraphLayout,
                { isInitial: false, isOngoing: false }
            )
        }
    );

This seems to mean that when a group is created it has no position (that makes sense), so I have a event listener like this:

diagram.addDiagramListener("SelectionGrouped", (evt) => {
        let firstNode = evt.subject.memberParts.first();
        evt.subject.move(firstNode.position);
    });

This seems to work, because the collapsed group is initially in the right position. But the expanded version of the group has a different position?

Any ideas? Thanks!

Does your group template include a Placeholder?
And what is the Group.layout?
Actually, what are all of the properties you set on the Group?

Hey! Thanks for the speedy response!

It does include a placeholder yes. I think the group doesn’t have a layout? (At least I haven’t set one directly).

Here are the properties I’m setting on my group template:

let groupTemplate = $(
    go.Group,
    "Table",
    {
        minSize: new go.Size(180, 0),
        isSubGraphExpanded: false,
        ungroupable: true,
        selectionAdorned: false,
        locationSpot: go.Spot.Center,
        toSpot: go.Spot.Left,
        fromSpot: go.Spot.Right,
    },
...
)

Each group starts off collapsed, yet you have disabled automatic layouts for the diagram. What is assigning the location for the group?

I think it’s the code that runs on the SelectionGrouped event? It positions the group in the same location as the first part contained within the group?

CommandHandler.groupSelection does not assign the new group’s location.

Group.layout defaults to an instance of Layout, so that will assign locations to all of its members that do not already have real locations when the group is expanded. Perhaps you are grouping nodes that are/were all members of a group before the grouping command?

CommandHandler.groupSelection does not assign the new group’s location.

Yes, that’s why I’ve got the SelectionGrouped event handler that sets the group’s location? Or am I misunderstanding what that’s doing?

Group.layout defaults to an instance of Layout, so that will assign locations to all of its members that do not already have real locations when the group is expanded.

And is that a location within the expanded group? Or a location within the document?

Perhaps you are grouping nodes that are/were all members of a group before the grouping command?

I don’t think I am? How could I check that? The SelectionGrouped event seems to fire after the grouping has happened? Is there a PreSelectionGrouped event?

I don’t know how your group template is defined, but it is quite probable that the position of the group will never be the same as the position of any of its member nodes. It is commonplace for there to be some offset between those two Points, due to Placeholder.padding or to objects outside of the placeholder within the group. So I don’t think that “SelectionGrouped” DiagramEvent listener is doing what you want.

The behavior of the base Layout is fairly stupid – it looks at each node that it is responsible for laying out and sees if its current location has a real value for the x and y properties. If the location is real, it ignores the node. If it is not real, then it moves the node into rows, which might overlap already located nodes.

Since your group has a placeholder, by definition all of the member nodes will be “within” the expanded group.

It seems that you are uncomfortable providing small screenshots showing the problem, before and after. If you would prefer communicating via email, send us email to GoJS at our domain, nwoods.com.

If all of selected nodes are members of a group, the new group created by the groupSelection command will also be made a member of that old existing group. But if any or all of the selected nodes are top-level nodes, the new group will be a top-level group too.

Hey. I can share some screenshots, no worries :)

If I start with a graph that looks like this:

I then group the middle two nodes:

The group isn’t perfectly positioned, but I’m happy with it, it’s not too bad. The problem is that if I now expand the group, this happens:

It’s moved loads!

What could be causing this? What determines the location of the collapsed group and the expanded group? Are they different locations?

I’m not sure how to reproduce the problem. Here’s what I tried. Could you try it and see how it’s different from your app (ignore irrelevant details like the contents of the nodes, groups, and links)?

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      layout: $(go.LayeredDigraphLayout),
      "commandHandler.archetypeGroupData": { isGroup: true },
      "SelectionGrouped": e => e.subject.location = e.subject.memberParts.first().location,
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { width: 100, height: 120, locationSpot: go.Spot.Center },
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      new go.Binding("text"))
  );

myDiagram.groupTemplate =
  $(go.Group, "Auto",
    { locationSpot: go.Spot.Center, ungroupable: true, isSubGraphExpanded: false },
    { doubleClick: (e, grp) => {
        if (grp.isSubGraphExpanded) {
          e.diagram.commandHandler.collapseSubGraph(grp);
        } else {
          e.diagram.commandHandler.expandSubGraph(grp);
        }
      }
    },
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.Placeholder, { padding: 10, minSize: new go.Size(100, 80), alignment: go.Spot.Center }),
    $(go.TextBlock, { alignment: go.Spot.Top },
      new go.Binding("text", "key"))
  )

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 2, to: 3 },
  { from: 3, to: 4 },
]);
  </script>
</body>
</html>

Oh, I didn’t set Layout.isInitial or isOngoing to false on the Diagram.layout. I just tried setting isOngoing to false and I believe it still doesn’t demonstrate the problem you are talking about. Though I’m not sure about that.