Expand & Collapse without moving the current node

GoJS
1

When i expand a node with more children, the layout is re-aligned and the expanded node goes out of the view port. So i have to scroll and find the node that i have expanded. It is the same when i collapse also.
Is there any way to keep the node position same when expanding / collapsing ? ( only other nodes will be re-aligned and the expanded nodes position stays the same.

2

I haven’t tried this yet, but in “TreeExpanded” and “TreeCollapsed” DiagramEvent listeners you could call CommandHandler.scrollToPart on the Node that was expanded or collapsed. I think you might need to do it after the expand or collapse has finished. Something like:

$(go.Diagram, . . .,
  {
    "TreeExpanded": scrollToNode,
    "TreeCollapsed": scrollToNode,
    . . .
  })

and define:

function scrollToNode(e) {
  var nodes = e.subject;
  var node = nodes.first();
  setTimeout(function() { node.diagram.commandHandler.scrollToPart(node); }, 100);
}
3

Thank you! It works, But still what i expect is that the node which is getting expanded stays in the same position. Means, the expander button stays at the same place where the mouse click is triggered.

With the above solution, the node is still in the view port but not exactly where the mouse click happened. This little bit of position change often confuses the customer and the customer needs to find the node again which is a burden.

Expecting something like this.

4

I think that can be done with a bit of code that doesn’t call CommandHandler.scrollToPart. Try these overrides of CommandHandler.collapseTree and expandTree, in an initialization of the Diagram:

  $(go.Diagram, . . .,
      {
          scrollMode: go.Diagram.InfiniteScroll,
          "commandHandler.collapseTree": function(node) {
            if (!node) node = this.diagram.selection.first();
            if (!(node instanceof go.Node)) return;
            // get node's position in viewport before collapsing
            var opos = this.diagram.transformDocToView(node.getDocumentPoint(go.Spot.Center));
            go.CommandHandler.prototype.collapseTree.call(this, node);
            // now scroll so that node is at same viewport position
            var npos = this.diagram.transformDocToView(node.getDocumentPoint(go.Spot.Center));
            this.diagram.position = this.diagram.position.copy().add(npos).subtract(opos);
          },
          "commandHandler.expandTree": function(node) {
            if (!node) node = this.diagram.selection.first();
            if (!(node instanceof go.Node)) return;
            // get node's position in viewport before expanding
            var opos = this.diagram.transformDocToView(node.getDocumentPoint(go.Spot.Center));
            go.CommandHandler.prototype.expandTree.call(this, node);
            // now scroll so that node is at same viewport position
            var npos = this.diagram.transformDocToView(node.getDocumentPoint(go.Spot.Center));
            this.diagram.position = this.diagram.position.copy().add(npos).subtract(opos);
          },
5

Great. It works! But as soon as the diagram is zoomed in or zoomed out the problem occurred. So I have tried the following,

opos.x = opos.x / this.diagram.scale;
opos.y = opos.y / this.diagram.scale;


npos.x = npos.x / this.diagram.scale;
npos.y = npos.y / this.diagram.scale;

Is it okay to handle the scale in this way? Or there is any better way to do it? Thank you!

6

I suppose that changing scale could be a possibility, although I had assumed it wouldn’t when expanding or collapsing.