For my use-case, I have built a nested-treemap layout where all the calculations for the positions are done by an algorithm that sits on top of GoJS. This algorithm returns a nodeDataArray as expected by the GoJS, and includes the dimension data like leftEdge, rightEdge, topEdge & bottomEdge.
This data is then passed to the GoJS, where in the custom layout, I am just creating nodes & groups with these dimensions and positioning them accordingly.
So before explaining the problem, the use-case is that, whenever I expand a treemap group, the area of the whole treemap increases by some factor, and hence my custom algorithm recalculates the new dimensions.
Now that I have the new dimensions, I want these changes to be propagated to the GoJS to redraw the diagram. For this, rather than clearing the whole diagram and recreating it from scratch, I committed the changes in a transaction.
Reasoning for why I didn’t go with the approach of clearing the whole diagram and recreating is that there are a lot of states in the graph itself, like which groups are expanded, which are collapsed, which are highlighted, etc. To go with this approach, I had to either store all these state changes in my component, which defeats the single source of truth, or maybe go with a ReplaySubject kind of an implementation.
For this reason, committing the changes in a transaction made more sense. This would also keep the door open for any animations that might be required in future.
So, the issue now is that, I am committing the changes, have double, or even triple checked the algorithm that it is giving the right dimensions. For some reason, GoJS is not creating the nodes at the right places.
Its a bit weird, since the order in which I expand nodes also changes the way GoJS is rendering the nodes in the canvas.
In this case, the Audit Invoice 1 node on the bottom left is rendering outside its parent (green colored group).
But somehow, when I expand the green group on the top left, it fixes its position:
I have checked the dimensions that are being passed to the GoJS, and they are actually right in both the cases. I feel there is some issue in my way of committing the changes to GoJS.
You can safely ignore the
isCollapseand assume it to be always false during my actions in the graph