Group node moves up and left when expanded with animations enabled

GoJS
1

GoJs Version 1.6.18

I have a group template with a vertical panel layout and 2 panels. The top panel holds the group title and the group expander button. The bottom panel holds the placeholder for the group child nodes. Both the diagram and the group have a LayeredDigraphLayout applied (same layout parameters but different layout instances).

When the animation manager is enabled, expanding a group causes the group to move up and to the left if it contains any child nodes. When the animation manager is disabled, the group stays in place and the child nodes are correctly revealed under the group title panel without causing the group itself to move.

Do you have any idea what could cause this? I’m temporarily disabling the animation manager in the expander button click event as a work around.

I get the incorrect result even when using a very simple group template from the docs with my diagram.

diagram.groupTemplate =
    $(go.Group, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "gold" }),
      $(go.Panel, "Vertical",
        { margin: 5,
          defaultAlignment: go.Spot.Left },
        $(go.Panel, "Horizontal",
          $("SubGraphExpanderButton",
            { margin: new go.Margin(0, 3, 5, 0) }),
          $(go.TextBlock, "Group")
        ),
        $(go.Placeholder)
      )
    );

I do get the correct result (no movement) in my browser for the SubGraphExpanderButtons example (which appears to be animated) on the following page.

http://gojs.net/latest/intro/buttons.html

So there must be some other variable in my diagram which is causing this problem.

Thanks,
Ryan

2

We’ll look into this tomorrow (today’s a holiday).

3

@ryan, can you help me reproduce what you are seeing?

Using your group template here, I don’t see the issue. Can you tell me what’s different about your app vs my simplistic example?

4

@simon, I think I was able to reproduce it.

I changed your example to the following after experimenting with my app. I noticed that when I removed a binding to desiredSize in my node template things started working better in this regard. So the following is an attempt to introduce that behavior in the simple example. If the you collapse and expand the group repeatedly you should notice that the entire group moves slightly each time it is expanded (in this case downwards).

Strangely, if the animation manager is disabled in the example, the group still seems to move. In my own app it doesn’t.

function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates
    
    var nodeSize = function(part) {
      var inc = 4 * part.data.key,
          size = go.Size.parse("40 40");
      size.setTo(size.width + inc, size.height + inc);
      return size;
    };

    myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
                  {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true  // enable undo & redo
                  });

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        new go.Binding("desiredSize", "", nodeSize).ofObject(),
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0},
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),  
        $(go.TextBlock,
          { margin: 8 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );

    myDiagram.groupTemplate =
        $(go.Group, "Auto",
          { layout: new go.LayeredDigraphLayout() },
          $(go.Shape, "Rectangle",
            { fill: "gold" }),
          $(go.Panel, "Vertical",
            { margin: 5,
              defaultAlignment: go.Spot.Left },
            $(go.Panel, "Horizontal",
              $("SubGraphExpanderButton",
                { margin: new go.Margin(0, 3, 5, 0) }),
              $(go.TextBlock, "Group")
            ),
            $(go.Placeholder)
          )
        );

    var nodeDataArray = [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 30, text: "Gamma", color: "lightgreen", group: 5 },
      { key: 4, text: "Delta", color: "pink", group: 5 },
      { key: 5, text: "Epsilon", color: "green", isGroup: true }
    ];
    var linkDataArray = [

    ];
    myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    myDiagram.layout = new go.LayeredDiagraphLayout();
  }

init();
5

Thanks, I see what you mean. I’ll investigate and get back to you.

6

@simon, I appreciate your work on this issue. I noticed that GoJS version 1.6.19 had a line in the Change Log in reference to this. I gave it a shot and it didn’t seem to fix the group moving issue for me. Additionally, it seemed to regress the linking of nodes when groups were involved. In many cases links no longer visually connect to node ports correctly upon doing a re-layout of the diagram. This problem is preventing me from moving to 1.6.19.

Please let me know if you would like me to help in any testing. 1.6.18 works better for me with regards to groups and links, with the only caveat that I have to use a work around for the expand/collapse moving issue.

7

I also noticed one other seemingly unrelated issue with 1.6.19 which is that the alignDocument function doesn’t seem to be working as it did in 1.6.18. I have a scenario where I switch the orientation of the digraph layout from 90 to 0 and back with a toolbar button. During the orientation switch, after updating port alignments and doing a layout, I use alignDocument with settings of LeftCenter for 0 and TopCenter for 90. With 1.6.19 the alignmentDocument does not seem to take affect, whereas with 1.6.18 it works as I expected.

8

Can you give me an example case of the problem behavior in 1.6.19?

9

Is there a support email that I would be able to send a small video of the behavior? I can try to replicate in a simple example but it might be worth just seeing it.

It seems like when I do a layout on the entire diagram, the nodes are moved around, then the links are adjusted but seem to point to old locations of the nodes. I have a video showing that when I do a layoutDiagram(true) it takes 2 times before things figure themselves out correctly.

10

you can email us, gojs at nwoods.com

11

Hi
Any fix/hack found for above problem ?

12

@deepak_gids as far as I can tell this particular issue is solved. If you think you have found a new or related bug, its probably best to open a new topic.