How to make sure the animations keep the graph in the center?

Currently, I have a use-case where there is a custom-layout implemented. I haven’t added any animations apart from enabling the animationManager for the default animations to kick in.

I am noticing a small issue with the default animations. Whenever I expand/collapse a group, the animation that goes with the expansion/collapse somehow aligns the element that is expanded/collapsed in a way that the graph is no aligned in the center.

Video Demonstrating the Issue

As its visible in the above video, when I expand a group, the header of its container group (one in yellow) disappears as the graph scrolls in the upward direction a bit.

I would like to keep these animations, while also make sure that the graph is always in the center of the canvas!

It is the layout, Diagram.layout in this case, that is responsible for positioning the group. Apparently it is on the left side when it the group is expanded, which is unusual. How is your layout defined? And what is your Group.layout, in case that is affecting the results?

I haven’t specified a layout for the Diagram since as per the component design, there will always only be a single node/group on the root level.

For the layout of the group, its a custom layout created by extending go.Layout.

EDIT: Just tried assigning the layout of GridLayout to the Diagram. Seems like it has corrected the center align in the vertical direction, but the one in horizontal direction is still problematic.

What properties have you set on the Diagram?
Would setting Diagram.contentAlignment satisfy your requirements?
Diagram | GoJS API

I have set the Diagram.contentAlignment to go.Spot.Center, but even that is not working!

I see you have set Diagram.autoScale to Uniform. But what is the Diagram.padding?

Padding was added for the graph to have some padding from the edges of the canvas. I mean, not a hard-requirement, was just experimenting with it anyways.

Also, just checked that adding/removing padding is not having any effect on the described issue.

Might there be some Parts that are not in the document bounds? Or the outermost Group itself?
What happens if you don’t set Diagram.scrollMode?

So, in case you are referring that there might be some parts outside the outermost group. That cannot happen. (I have added logic to prevent that case from happening, also I am playing on mock-data currently, so chances of that happening are bleak).

If you are referring that some parts might be outside the document bounds, I am not sure how to prevent or even validate that.

This video gives a detailed demonstration of what exactly is happening when each node is expanded. For this video example, I have commented the line for Diagram.scrollMode, hence the diagram is unable to overflow to the right as it was doing earlier.

But if noticed, for the initial group expansions, the width of the outermost group increases towards right side, but once the width of the outermost hits the canvas, it finally starts to align itself in horizontal center of the canvas. Somehow, it does not align itself vertically.

Also, I would like to have the scroll to Infinite, so technically, both horizontal & vertical alignments are not working for me…

Part of the problem is that the new nested group that you create is initially “above” the rest of the nested groups. Does your nested group template use a Placeholder? If so position its only member node to be where you want that new group to start from, before the layout happens. Experiment by setting the location of that new simple node to be at (0, 50) or something with a positive y value.

Considering the above discussion, I am not sure if I am on the same page for the definition of nested group template.

And, what exactly do you mean by Part of the problem is that the new nested group that you create is initially “above” the rest of the nested groups?

What is the nested group & what are the nested groups here?

I was assuming that with a yellowish header is an outer group, those with greenish headers are nested groups, and the bluish ones are simple nodes.

I assume it is your custom layout that is the value of the outer group’s Group.layout that is arranging expanded nested groups on the left and collapsed nested groups stacked vertically on the right side.

What is the value of Node.location for those simple nodes that are inside collapsed groups, before they are ever expanded? I was wondering if you pre-set their Node.location to be something like new go.Point(0, 50).

Ohk, going a bit off-topic here, so in between your replies, I was experimenting a bit. So, I found that when using CircularLayout for the diagram, the issue is there, but its less prevalent.

You can check it here, video using CircularLayout - AwesomeScreenshot-30/11/2022,1:48:55am

It seems like something is different in these layouts for sure.

Also, answering your question, I am not setting Node.location for any of the nodes/nested-groups. I am taking the starting point as (0, 0) and using moveTo, I am moving each of the parts.

Behind the scenes, I am adding the heights & widths of each of those parts to make sure I add those values to the starting point coordinates to align the next node either below, or on the right depending on the conditions of overflow determined by the maxHeight.

I suspect that the problem you are seeing is because the member node and thus nested group are starting off too high (i.e. y position is too small). So if you explicitly set them before you do the layout, they will appear to animated from that location.

Won’t that be a hit & try approach then? We are trying to come up with a magic number that should work in atleast the mock data, but we cannot be sure if it will work for all the cases. Right?

I still don’t know exactly what behavior you want, but I would first try having the collapsed group member(s) use the location of the collapsed group plus the Placeholder.padding.left and