VirtualizedTreeLayout with go.Link.Orthogonal

GoJS
#1

Before I start to use the virtualized tree layout I’ve used go.Link.Orthogonal for my linkTemplate and all works really well:

But after I’ve started to use VirtualizedTreeLayout sample this becomes a mess:

I think that the problem is with the fixed size on the bounds of the nodeDataArray and on the nodeTemplate but I really don’t know how to arranje this. Before this the diagram flows to the right as expected but after this it flows up, down and right too.

How can I fix this?

#2

What sizes have you specified in the node data.bounds properties?

#3

On the object:

this.bounds = new go.Rect(0, 0, 637, 67);

On the nodeTemplate:

{ width: 637, height: 67 }

this properties are the same thing?
This number (637) is the size of the bigest description of a node.
I tried to make this.bounds (637) the size of each description in pixels, but this doesn’t solve my problem and increase a lot the time to render the diagram.

#4

Well, if you say that every node is going to be 637 units wide, then that is the layout that you will get.

#5

I’m not talking about the size of the arrows.
I’m talking about the organization of the nodes.
On the first version you can see that the tree grows from right to left only.
But on the second tree grows up, down and left.
Beside this, the lines start to cross other lines, nodes, doesn’t look like a tree anymore, but is the same data and if I change to go.Link.Normal the tree grows correctly again (from left to right, no intersection between lines).
As I said, when I tried to put distinct sizes based on description text, the tree render becomes slower and spent almost the same time to the the original version without virtualization.

#6

You may need to set the fromSpot and toSpot on the nodes or on the links to be Spot values that are appropriate for the direction that the tree is growing.

#7

I dont have “fromSpot” and “toSpot” defined. I’ll do this. I’ll take a look on the samples for how to use it.

This is just to show the nodes organization. I take three prints:

Orgininal diagram (orthogonal):

Virtualized Diagram (orthogonal):

Virtualized Diagram (Normal):

I try to make the prints from the same piece of the diagram.

#8

Now I think this is working well. “fromSpot” and “toSpot” solve my organization situation.

And I can understand better your explaining about the 637 (“Well, if you say that every node is going to be 637 units wide, then that is the layout that you will get.”).

As you understand better than me the code for Virtualization, maybe you can have some idea on how can I improve this. Because my text description has variable size, not like the samples of Virtualization. Maybe its better to create a new topic on Virtualization. Because this topic is closed from my point of view.

Thanks again for the great support.

#9

If you want to know how wide a TextBlock is going to be, assuming there’s no wrapping, you could create an in-memory HTMLCanvasElement and query it’s context. For the setup, you’d write this:

var can = document.createElement(‘canvas’);
var ctx = can.getContext(‘2d’);


Then for each string you wanted to test, you could write (for example):


ctx.font = “12pt Verdana”
var theWidth = ctx.measureText(“Some text in 12pt verdana”).width;


Getting the height is not so straight-forward.

#10

I have done something like this, but using a SPAN html element. I really can got the sizes of the elements. But the problem isn’t this. The real problem is that this code:

this.bounds = new go.Rect(0, 0, 637, 67);

Does not define the size of the text description elements. It defines the size of the arrow.
When I change this code:

nodeTemplate:
        { width: 637, height: 67 }

I have the efect that I want. But this is defined once. In my previous version (before virtualization) I did not define this size resulting in a effect that is good (shortening the size of the node depending on description).
If I remove the second definition (on virtualized version) I almost achieve the result that I expect, except for this black squares.

#11

Those black squares look like Shapes with the RoundedRectangle figure. If you’re not expecting it to be there, did you leave it in your code accidentally?<span =“Apple-tab-span” style=“white-space:pre”>

#12

Thanks for the assistance.
The “RoundedRectangle” was defined more than once, this was the “problem”.