Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Root node in FlowchartLayout (Read 7275 times)
deca
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Sep 20th, 2011
Root node in FlowchartLayout
Sep 20th, 2011 at 9:02am
Print Post  
Hello,
is it possible to set the  "root" node in FlowchartLayout?
I have a loop workflow, and i need to set the "start node" of the flow, to make the layout put it on top of the diagram.

How should i do?

Thanks

Andrea.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Root node in FlowchartLayout
Reply #1 - Sep 20th, 2011 at 9:59am
Print Post  
Hi,

You could try adding a temporary node that connects to the node from the loop you need at the top, and then removing it after calling Arrange. FlowchartLayout will select the temporary node as start node and place it at the top, and the one from the loop will come below it.

If the layout class cannot find a node without incoming links to set as start node, I think it places the first node in the Nodes collection at the top. So another thing you could try is to add your start node to the diagram before all other nodes.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
deca
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Sep 20th, 2011
Re: Root node in FlowchartLayout
Reply #2 - Sep 20th, 2011 at 10:10am
Print Post  
Ok, i thought about this 2 workarounds... i was wondering if there could be a "clean" way. anyway, adding the root node for first it's ok.

Another question: i have a simple flow as follows:

nodes 0, 1, 2, 3

node0 is the root

from node0 you can go to node1 or node2 or node3

from each child node (node1,2,3) you can go back to node1.


In this flow, if i arrange with FlowchartLayout, the links coming back from child nodes are overlapping, and messing like a single link.

I'm looking for the right property to change, but i didn't find it.

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Root node in FlowchartLayout
Reply #3 - Sep 20th, 2011 at 11:26am
Print Post  
This is what I'm getting, it looks fine to me except that the links overlap:


FlowchartLayout expects a specific structure of your graph, so that it can recognize code constructs such as conditions and loops by following the links recursively. Most important, for each node that starts a branch or loop, there must be a distinct end node ahead in the graph.

If you don't want to create additional nodes, then we could add some way to specify the type of code construct through the LayoutTraits hashtable for next release.

In this particular case, the algorithm cannot discover what kind of code the graph represents since there are no pairs of start/end nodes for a switch or loops. I think it treats the three nodes at the bottom as end nodes, and just sets some generic path for their outgoing links leading to the overlap. Perhaps you could replace that structure with either three pairs of nodes showing loops nested within one pair of nodes showing a branch, or create an outer loop pair that encloses a branching with three paths inside.

By the way, you can find an example that parses code and builds a flowchart for it in the Windows Forms version here (called JavaScript):
https://www.mindfusion.eu/FCNetDemo.zip

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
deca
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Sep 20th, 2011
Re: Root node in FlowchartLayout
Reply #4 - Sep 20th, 2011 at 1:34pm
Print Post  
hello,
thanks for the reply.
i get "almost" the same graph... but, in my case, the links on the bottom of the graph, they "cut" the nodes. i'll post you the graph:

is there a way to prevent the links from overlapping?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Root node in FlowchartLayout
Reply #5 - Sep 20th, 2011 at 2:41pm
Print Post  
Hi,

That's not really what FlowchartLayout can process. When it sees five back links, it will expect them to represent either nested loops (kind of do { do { do ... while ...} while ... } while ...) with corresponding nodes, or something like a switch/case statement with a loop within each branch.

You could call OthogonalRouter.Arrange after running FlowchartLayout (same result will be with TreeLayout), and it will pull the link segments as far apart as possible:


If you prefer the way FlowchartLayout stacks back-links on the right but branches forward-links, and don't want to add nodes for "end switch" and "end loop" statements, then you can do that only by processing the back links yourself after applying TreeLayout or FlowchartLayout. You can detect the back links by comparing the Y coordinates of their Origin and Destination nodes, and then set ControlPoints to a path that goes down -> right -> up -> left, with some offset added based on the link's origin X position to avoid overlapping segments. Let me know if you need sample code for this.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
deca
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Sep 20th, 2011
Re: Root node in FlowchartLayout
Reply #6 - Sep 20th, 2011 at 2:50pm
Print Post  
Hi,
thank you so much...
ok... let's try a simple step... in the first image you show me (with just 4 nodes), the links coming out from the 3 lower nodes, they start from the "bottom" of the nodes, so they overlap each other, but they don't "overwrite" the nodes on the right.
How can i do it?
  
Back to top
 
IP Logged
 
deca
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Sep 20th, 2011
Re: Root node in FlowchartLayout
Reply #7 - Sep 20th, 2011 at 4:12pm
Print Post  
to be more clear.... labels on lower nodes are overwritten. how to prevent this?

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Root node in FlowchartLayout
Reply #8 - Sep 21st, 2011 at 6:15am
Print Post  
You can use the code below as a starting point, call it after applying tree or flowchart layout and it will arrange links like this :


Some improvements you could make is to apply alternative paths to right-most nodes on a level (right->up->left instead of down>right->up->left), and  distribute the links to a destination node based on the node's total number of incoming links.

Code
Select All
void ArrangeBackLinks(FlowchartLayout layout)
{
	Dictionary<int, List<DiagramNode>> levels = GetNodesByLevel(layout);
	foreach (List<DiagramNode> level in levels.Values)
	{
		RectangleF levelBounds = LevelBounds(level);
		foreach (DiagramNode node in level)
		foreach (DiagramLink link in node.OutgoingLinks)
		{
			if (link.Origin.Bounds.Y > link.Destination.Bounds.Y)
			{
				float x = GetTopCenter(link.Origin).X - levelBounds.Left;
				SetLoopPath(link, levelBounds.Right, x / levelBounds.Width, layout);
			}
		}
	}
}

void SetLoopPath(DiagramLink link, float x, float offset, FlowchartLayout layout)
{
	PointF origin = GetBottomCenter(link.Origin);
	PointF dest = GetRightCenter(link.Destination);

	float availableSpace = Math.Min(layout.NodeDistance, link.Destination.Bounds.Height);
	offset *= availableSpace;

	float top = GetTopCenter(link.Destination).Y + offset;
	float right = x + availableSpace - offset + layout.LinkPadding;
	float bottom = origin.Y + availableSpace - offset;

	PointCollection points = link.ControlPoints;
	points.Clear();
	points.Add(origin);
	points.Add(new PointF(origin.X, bottom));
	points.Add(new PointF(right, bottom));
	points.Add(new PointF(right, top));
	points.Add(new PointF(dest.X, top));
	link.UpdateFromPoints(false, true);
}

Dictionary<int, List<DiagramNode>> GetNodesByLevel(FlowchartLayout layout)
{
	Dictionary<int, List<DiagramNode>> levels = new Dictionary<int, List<DiagramNode>>();
	foreach (DiagramNode node in diagram.Nodes)
	{
		int level = (int)GetRightCenter(node).Y / (int)layout.NodeDistance;
		if (!levels.ContainsKey(level))
			levels[level] = new List<DiagramNode>();
		levels[level].Add(node);
	}
	return levels;
}

RectangleF LevelBounds(List<DiagramNode> level)
{
	RectangleF bounds = level[0].Bounds;
	foreach (DiagramNode node in level)
		bounds = RectangleF.Union(bounds, node.Bounds);
	return bounds;
}

private PointF GetLeftCenter(DiagramNode node)
{
	RectangleF r = node.Bounds;
	return new PointF(r.Left, r.Top + r.Height / 2);
}

private PointF GetRightCenter(DiagramNode node)
{
	RectangleF r = node.Bounds;
	return new PointF(r.Right, r.Top + r.Height / 2);
}

private PointF GetBottomCenter(DiagramNode node)
{
	RectangleF r = node.Bounds;
	return new PointF(r.Left + r.Width / 2, r.Bottom);
}

private PointF GetTopCenter(DiagramNode node)
{
	RectangleF r = node.Bounds;
	return new PointF(r.Left + r.Width / 2, r.Top);
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
deca
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Sep 20th, 2011
Re: Root node in FlowchartLayout
Reply #9 - Sep 21st, 2011 at 8:46am
Print Post  
so, there's not a a property to say to NetDiagram "not to overwrite nodes with links" ?? that would be enough, for me... links overlapping each other is not a big problem.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Root node in FlowchartLayout
Reply #10 - Sep 21st, 2011 at 9:30am
Print Post  
There's the AutoRoute property, but the layout classes disregard it when setting link paths. You could try calling link.Route() for all back-links instead.
  
Back to top
 
IP Logged
 
deca
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 7
Joined: Sep 20th, 2011
Re: Root node in FlowchartLayout
Reply #11 - Sep 21st, 2011 at 10:01am
Print Post  
no, it doesn't work... if i call "route", the links are messed up completely.

just a note: i'm not using diagramview or something else, there's no user-interaction.
I just need to represent in "image", some workflows defined at code.
So, i'm "reading" the workfow structure, and i create a node for each flow-state, and then i read all the workflow' transictions, and create a link for each transiction.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint