I’m using the 1.5.23 version of GoJs, and I’m trying to build a function to centralize the canvas on a given node.
My approach is an attempt to solve the following scenario: A user can expand and collapse nodes inside a tree, which may alter the canvas size and positioning, resulting in a blank canvas, until he drags and manually finds where the resulting tree is.
Currently, I’m using the following function:
`
this.centerNode = function (node) {
diagram.startTransaction('centralize');
diagram.centerRect(node.part.actualBounds);
diagram.commitTransaction('centralize');
};
`
However, it doesn’t work. I tried many configurations, and apparently the only way where this code works is setting the property “scrollMode” to “go.Diagram.InfiniteScroll”, which is not desirable because it locks the user inside the canvas while scrolling forever.
Please, could you help me? Summarizing, my question is: given a node, is it possible to centralize the canvas on it, without using the InfiniteScroll mode?
Calling Diagram.centerRect on a Node’s actualBounds does work to make sure that area is within the viewport. (In this case the node is a Node, yes? If so, you don’t need to get its part, because then it just returns itself.)
However it might not be centered in the viewport if that area is near the edge of the Diagram.documentBounds. That’s because the rule is that some area of the document bounds should always be in the viewport, so that it’s less likely the user will be “lost”.
You can get around that, as you already discovered, by setting Diagram.scrollMode to go.Diagram.InfiniteScroll. But if you don’t want to do that, you could increase the Diagram.padding to be about half the viewport size.
Well, I tried not to get its part, and its still working!
I just have one more question, just to know if the following behavior is expected, or if its possible that I did something wrong:
I have a tree that I can drag all around the viewport. However, when I collapse it, my dragging area decreases by half. I got some screenshots to ilustrate:
Original tree (the darker nodes were created after loading the hierarchy):
The node in the picture is at the extreme right border, I am unable to drag it more to the right, only to the left, up and down.
Is this behavior expected? Can I do or avoid something to restore the capability to drag all around the viewport after collapsing?
What Diagram properties have you set? I can’t explain the behavior that you describe from the normal settings.
You haven’t set Diagram.contentAlignment have you? If you did, every time there was a change the contents of the diagram, if it fit within the viewport, would be centered in the viewport. But I don’t know that that is what you want.
Ah, how did you collapse the tree? The normal way, which is what the “TreeExpanderButton” does, is to call CommandHandler.collapseTree. That conducts a transaction, which would avoid any need for manually calling redraw or anything like that.
I was calling the collapseTree function from the selected node. Can it be related to my library version, maybe?
I’m using 1.5.23.
Just for curiosity, I have also noticed that its possible to customize the contextMenu. However, the examples from docs seems to be specific for the newer versions. Is it possible to customize it somehow on earlier versions too?
