Centralize on Node


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) {


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?

Thanks for the attention!

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.

Hi Walter! Thanks for the quick reply!

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):

After collapsing “CTO” node:

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.

Hi walter!

I’ve set the following:

layout: { treeStyle: go.TreeLayout.StyleLastParents, arrangement: go.TreeLayout.ArrangementHorizontal, sorting: go.TreeLayout.SortingAscending, nodeSpacing: 50, angle: 90, layerSpacing: 35, alternateAngle: 90, alternateLayerSpacing: 35, alternateAlignment: go.TreeLayout.AlignmentBus }, diagram: { validCycle: go.Diagram.CycleDestinationTree, maxSelectionCount: 1, allowZoom: true, allowDelete: false, 'animationManager.isEnabled': false, 'toolManager.hoverDelay': 100, 'undoManager.isEnabled': false }

It looks like diagram.redraw(); did the trick, so when I collapse the tree, it gets centralized =D

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?

Thanks for all the help!

Node.collapseTree, as documented, does not conduct a transaction. So did you start and commit your own transaction?

I used no transactions to expand/collapse it. I just called node.collapseTree and node.expandTree from the TreeExpanderButton element click function.

OK, that explains it then, and now you know to always use transactions when changing anything.