Collapse to center

[GMUDuckman]

Not sure if anyone is still maintaining this, but i'm having trouble with the collapse function. I am creating a tree using active directory and sharepoint. We have over 200 employees, so over 200 nodes. As such, it makes sense to start out with everything collapsed. that portion I figured out. The issue I am running into is when you expand and collapse, the root node with collapse to the center of the canvas. Since the canvas changes size when you expand, the root node is moving. I'm trying to figure out a way to fix the root node to the top left of the canvas. When you expand it, it'll move right, but won't move up or down. When you collapse it again, move it to the left. Any ideas?

[GMUDuckman]

Welp I found these two lines: node.X += negOffsetX + ((treeWidth < this.drawArea.clientWidth) ? deltaX : this.CONFIG.padding); node.Y += negOffsetY + ((treeHeight < this.drawArea.clientHeight) ? deltaY : this.CONFIG.padding);

commenting out those two lines kind of has the impact I want. Unfortunately, if i expand anything besides the most left node, it draws the children off the left side of the canvas.

[pixelpad-io]

I have the same issue. I took me some time, but I found this:

handleOverflow: function( treeWidth, treeHeight ) {
    var viewWidth = (treeWidth < this.drawArea.clientWidth) ? this.drawArea.clientWidth : treeWidth + this.CONFIG.padding*2,
        viewHeight = (treeHeight < this.drawArea.clientHeight) ? this.drawArea.clientHeight : treeHeight + this.CONFIG.padding*2;

    this._R.setSize( viewWidth, viewHeight );

I changed it to this:

handleOverflow: function( treeWidth, treeHeight ) {
    var viewWidth = treeWidth + this.CONFIG.padding*2,
        viewHeight = treeHeight + this.CONFIG.padding*2;

    this._R.setSize( viewWidth, viewHeight );

This forces it to recalculate the width and height regardless of the size of the tree and its relative size to the draw area.

[MatthiasDh]

Same issue, did you manage to fix it?

@underthegui using your solution it doesn't show the scrollbars anymore.

[eksha]

Thanks @GMUDuckman for pointing to those lines of code

I managed to avoid centering on Y axis by commenting out the line setting node.Y value only.

node.X += negOffsetX + ((treeWidth < this.drawArea.clientWidth) ? deltaX : this.CONFIG.padding); 
//node.Y += negOffsetY + ((treeHeight < this.drawArea.clientHeight) ? deltaY : this.CONFIG.padding);

[shaikh-kamran]

Thanks @eksha that worked for me too