Are you using a fixed height for all non-Group nodes? That’s not going to work, as you are now discovering when there are varying nesting depths for the groups.
If I were you, instead of shifting the groups, I would make sure that all of the LayoutVertexes in each horizontal row each had the height and focus.y needed for the vertical midpoints of the vertexes to line up. Obviously when you make those calculations you need to account for the fact that some vertexes need extra height to account for other vertexes being members of groups.
You probably want to do such initialization of TreeVertexes in an override of TreeLayout.makeNetwork, but you could do it in an override of TreeLayout.assignTreeVertexValues.
Yes we are using same height for all nodes, even which are part of the groups. As you know the reason is to connect them in middle and align top without line braking. From your solution what I understood is, Change the height of all the nodes of a horizontal row dynamically, so that connected links will be in middle, am I right ? But how much height we need to give? The height of the tallest group in that row? But its not necessary that the links will be connected or come out from middle of the group, In that case total height also not required. Can you please clarify on these and correct me if am wrong anywhere.
Hi Walter,
To solve overlaps in branches (horizontal rows), we are putting branch’s nodes into a group.
so now each and every horizontal row is a group.
After drawing all the nodes and links,
Then I am moving the branches by calculating above branch’s bottom Y position, using calculation
currentBranchY = aboveBranchNode.position.y+aboveBranchNode.actualBounds.height;
The branches are moving, but not to the exact bottom of the above branch.
How can i get the exact Y position of bottom of a group ?
Is “aboveBranchNode” a Group? Does it use a Placeholder? If so, and if you have been moving stuff around, the Group’s actualBounds might not yet have been updated.
By the way, when moving a Group, are you calling Part.move? That moves both the Group and all of its members. Part.move of course works on simple Nodes too.
Yes, all the branches (horizontal rows) are groups only.
And this group is using a placeholder, and Iam using move method to move the branches.
These branches contains groups also, which have been moved before moving branches.
Are you saying that each branch (i.e. each row of nodes) is a group, as well as each collection of branches? So that there are no simple nodes that are members of any group other than at the lowest level where a single row of nodes forms a branch/group? So you say that these branch groups have a layout, but why a ParallelLayout when it should always be arranged in a single row? You could use a simple TreeLayout for that. And what layout are you using for your non-branch groups?
A screenshot with labels of your terminology might help me understand.
You should be able to move a Group just as if it were a simple Node. That’s how nested groups are normally handled by layouts. When a TreeLayout is performed, the bounds of each nested node should already be known – including for nested nodes that are actually groups.
Groups Used: Loop: Blue bordered with label as loop,
Which contains only one flow, This flow may contain any number/kind of nodes or groups. Decision Block: The block in between two diamond shapes(including them).
This contains n number of flows, which we normally call as branches. Branch: Every horizontal row of above group. This flow may contain any number/kind of nodes or groups. Made this flow as group only to solve overlapping of branches, with out making it group also layout draws it properly.
Here, All the nodes are having transparent height so that they can align at the top and helps the links to connect in middle.
As I told you earlier, Groups are trying to align at the top along with rest of the nodes, which cause tilts in connected links.
We found this can be solved by just moving every group with some static length in Y direction. So after all nodes got drawn, we are moving all these groups.
here all the group’s parent groups got moved before it moved.
Here for all groups, Layout we are using is parallel layout.
Because, in parallel layout we are setting alighment as AlignmentStart. so that to keep it consistent for every group we are using it.
It seems to me that you want each TreeVertex to have a different height and focus according to how tall it is in its branch and how deeply nested it is within loops. I have drawn a thick horizontal red line showing the baseline for each branch, and a thin orange line for non-zero focus length changes (TreeVertex.focusY). The TreeVertex.height would be the distance from the baseline to the bottom of the node. Note that the focus.y gets taller the less it is nested within loops/groups.
You can do all of that initialization in the custom assignTreeVertexValues override. You would no longer have that artificial Shape with fixed height in your node template.
[Oops, one vertical line is thick red instead of thin orange. Paint fooled me.]
That sounds great, and seams like it makes it simple and avoids all the overhead what we are doing currently.
But will it work for all the combinations? As the above diagram is just a sample., the diagram may contain more branches and a branch may contain more nodes and groups(loops and decision blocks).
As I am still confused about how it will make nodes align on top and links in middle!
It would be very helpful, If you provide a small code snippet or an example.
Thanks
Hi Walter,
I was trying your suggested approach of setting focusY.
From your solution, I think i need to find out the node/group which is having highest focusY,
then based on that should calculate focusY for rest of the nodes or set that value itself.
By default focusY for any node/group is from its center,
Seams like this thing will work for a row which is having all the nodes.
But for our groups (Loop, decision group), its not necessary that links should connected to its center, and moreover links are not connecting to the group, its connecting to the inner nodes.
But for groups focusY is from its center, and it is much higher than distance from flownode to baseline.
How should we handle these cases ?
Yes, it is different from the usual sort of “if-it-is-deeper-nested-then-it-must-be bigger” calculation. You could calculate the maximum depth for any row easily enough. Or maybe you can calculate the maximum depth for the whole graph and count down from there for each node/vertex. Fortunately you do not have any links connecting with groups, so you don’t have to worry about that.
Remember that you will want to increase both the height and the focusY by the same amount.
Consider above horizontal row for an example,
I draw 2 vertical lines on right side of the diagram.
The focusY needed for Node 3 is same as first vertical line and loopGroup’s default focusY is second vertical line.
My doubt is how can we calculate first vertical line length ?
Do we need to iterate to all these nodes using network.vertexes to compute these lenghts ?
Can you please provide any example or sample code snippet, That would be very much helpful for us.
Well, since all of the nodes in the nested/short row have the same height (since it only contains Node 4), there is no extra height/focusY needed. So when you calculate the extra height/focusY for the outer row, you need to account for the extra height/focusY needed for the group. That’s how much you would use, at a minimum, for all of the nodes in the outer/long row, which only shows Node 3 in this screenshot.
You can ignore the group – I do not think you need to modify its vertex’s bounds or focus.
This all assumes, of course, that you have TreeLayout.alignment = go.TreeLayout.AlignmentStart.
That loop may contain more nodes and groups, so its height may increase. Imagine in that row a bigger loop( inside if it contains more groups) is there after small loop, then we need to calculate for small loop right. How it can be done ?
