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.
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?
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.
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).
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.
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 Placeholder.padding.top.