How to center nodes

GoXam
#1

Hi,
I’m having problem to center a node which has two parent nodes (like a standard ‘if’):

The if node is centered correctly, but as you can see the end node is always align with the ‘false’ group.

I use this layout for my diagram:

<Layout:TreeLayout x:Key=“FlowCanvasDiagramLayout” Conditions=“All” Angle=“90”
SetsPortSpot=“False” SetsChildPortSpot=“False”
<span =“Apple-tab-span” style=“white-space:pre”> LayerSpacing=“20” TreeStyle=“Layered” x:Shared=“False”/>

I’ve tried setting Alignment=“CenterSubtrees” as well as Alignment=“CenterChildren” - but the result is the same.

Any idea?

Thanks in advance,
Or

#2

It’s not a tree structure, so one cannot expect TreeLayout to do whatever you want with non-tree structures.

#3

So what other layout should I use?
I tried to use the LayeredDigraphLayout like in the flowgrammer sample,
But the nodes aren’t centered all the way:

It also has some visual glitches:

What in the best layout i can use to achieve this look (please don’t mind the ‘loop’ node structure, this was already successfully implemented with your help):

Thanks in advance.

#4

We’ve been meaning to implement a specialized flowchart layout, but haven’t had the time.

And thanks for pointing out that little glitch in the routing of that one link.

If you’re just trying to center the subtree below a merge, there might be way to adjust the tree layout to do so in some of the cases. Would you be expecting there not to be any other children besides that “End” node below the “Do somthing” node, nor any other children besides “End” below the “Do something else” node? You can see how it gets more complicated if either or both of those nodes have children besides the “End” node. If there were other children, TreeLayout really wouldn’t be able to handle such graphs.

#5

Well, the current Tree layout works well besides centering the subtree below a merge.
Since I’m visualizing a simple ‘if’ statement, I have only two children - true and false, and
after the merge there will always be only one child - so indeed I’m not expecting other children in that level (only ‘end’ in the example).

What do I need to do?

#6

I haven’t experimented with this, but I think the basic idea is to override TreeLayout.AssignTreeVertexValues to call the base method and, if the TreeVertex.Node has more than one incoming link, set the TreeVertex.NodeIndent such that that vertex/node is shifted as far as you want, and change the parent vertex’s Alignment to be TreeAlignment.Start.

I see some complications though, that would require some additional thought to avoid.

First, how far to indent? The problem is that at that time you don’t know yet where any of the vertexes/nodes will be positioned. In the particular case that you have above, it’s easy to calculate. But that might not be true in general, with more complex “trees” where some ancestor of the merge node has lots of subtree.

Second, how do you know which “parent” node will be on the left and which one on the right? If you have ordered the common “ancestor” node’s children (i.e. at the split vertex), then you’ll know. Basically this means customizing the AssignTreeVertexValues to recognize the split node (i.e. the “If” node) and setting its Sorting and Comparer properties so that you get the results you want. That might mean the “If false” case on the left and the “If true” case on the right. Then at the merge node you need to make sure the TreeEdge comes from the left subtree, not from the right subtree.

This is a bit complicated to describe in a forum post or e-mail. If I get a chance later this week, I can try to implement it, but I can’t guarantee that I’ll be able to get to it.

#7

Thanks Walter, It would be much appreciated if you could find the time. At the meantime I’ll start working on it myself according to your guidlines and update here when I make a progress.

#8

Hi Walter,
I’m overriding the <span =“Apple-style-span” style=": rgb248, 248, 252; “>AssignTreeVertexValues, getting the relevant node, <span =“Apple-style-span” style=”: rgb248, 248, 252; “> changing the parent vertex’s Alignment to beTreeAlignment.Start, <span =“Apple-style-span” style=”: rgb248, 248, 252; “> then I set the TreeVertex.NodeIndent to any value - but it seems to ignore that: any value I set i get the same visual result…
<span =“Apple-style-span” style=”: rgb248, 248, 252; “>

<span =“Apple-style-span” style=”: rgb248, 248, 252; ">What could be missing? or maybe there is another way to change a certain node’s location?

#9

Sorry, it’s been busy here, and I still haven’t had time to experiment.

I suppose you could programmatically move nodes after the layout is done. But I was hoping to get it done as part of the tree layout itself, so that it would work even with the merged sub-tree being arbitrarily large, rather than just a single node.