Spacetree: how to set node's height equal to label's height?

[kmike]

Hi,

I have a spacetree where all nodes have fixed width. I want to set
their height = labels' height.
The height of label may vary as text can become multi-line if it
doesn't fit.
Label's height is computed in OnCreateLabel event handler and assigned
to node.data.$height.

The problem is that this new node.data.$height takes effect only after
second click on parent's node (after tree refresh). I think it's
because when the node's height changes we have to re-calculate
positions of all nodes to make shure that they won't overlap.

st.refresh() in label's onclick don't work well because the tree
looses original animation (for subtree expanding) and instead shows
transition between incorrect tree and correct tree. Things become
worse if Move parameter with offsets is specified, this offsets
becomes animated too.

What's the best way to solve this problem?

Thanks.

[Nico Garcia Belmonte]

Hi,

> What's the best way to solve this problem?

Currently there isn't a built-in feature that allows you to
automatically set the nodes' height to the labels' height value.

In order to solve this problem you can create an "invisible" testLabel
where you'll append the text of each node and calculate its
offsetHeight. Then, you can assign this offsetHeight to each node's
$height property.

Somewhere in you init function, before instanciating and plotting your
ST, try appending a test label like this:

//create our test label
var testLabel = document.createElement('div');
testLabel.id = "mytestlabel";
testLabel.style.visibility = "hidden";
testLabel.style.position = "absolute";
//set your fixed with here
testLabel.style.width = "mydesiredwidth";
document.body.appendChild(testLabel);

Then, before loading the JSON into the st call this function:

/* ... some code .... */
nodeDimHelper(json);
st.loadJSON(json);
/* ...some code ... */

Finally, define a nodeDimHelper function that iterates through the
nodes of a JSON tree and adds the proper height by querying the height
of the test label when appending the node's text into it:

//helper function to set the $height parameter. modifies the json data provided
function nodeDimHelper(tree) {
var elem = document.getElementById('mytestlabel');
TreeUtil.each(tree, function(node) {
elem.innerHTML = node.name;
node.data.$height = elem.offsetHeight;
});
}

You can also call this function when implementing the "request"
controller method, right before calling the onComplete callback, so
you can set those nodes' $height property also.

I haven't tested the code, so please contact this group again if you
experience any problems.

Hope it helps,

[kmike]

Thanks a lot!
I'll try your suggestions. The idea of pre-processing json data is
very good.

[Jaikit Savla]

Hi Nico,

I tried this solution. It worked perfectly fine. 

The only thing I added new was this:   node.data.$width = elem.offsetWidth;

Rest all is same.

Thanks once again.