Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) How to use FlowLayout (Read 7363 times)
kmontgom@shaw.ca
Ex Member


How to use FlowLayout
Nov 13th, 2008 at 10:01pm
Print Post  
Hi,

I need to construct a workflow designer using WpfDiagram. I need to be able to vertically stack ShapeNodes and connect them with DiagramLinks.

I also need to be able to use InsertNode as part of a Drag-and-drop operation to insert new workflow items in between pre-existing items.

I can't find any documentation showing how to go about doing this. Can someone provide some information on how to accomplish this?

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to use FlowLayout
Reply #1 - Nov 14th, 2008 at 8:46am
Print Post  
Hi,

Could you check if the WorkflowDesigner sample from our Windows Forms control is close to what you need?
https://www.mindfusion.eu/FCNetDemo.zip

If it is, we can port it to WPF in the next few days.

Stoyan
  
Back to top
 
IP Logged
 
kmontgom
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 11
Joined: Nov 13th, 2008
Re: How to use FlowLayout
Reply #2 - Nov 14th, 2008 at 3:24pm
Print Post  
Yes! This is quite close to what I am looking for! Thank you very much.

If you could translate to WPF, that would be even better.

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to use FlowLayout
Reply #3 - Nov 14th, 2008 at 3:43pm
Print Post  
That's great 8) We'll create a WPF version next week.

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to use FlowLayout
Reply #4 - Nov 18th, 2008 at 9:23am
Print Post  
This is the WPF version of that sample project:
https://mindfusion.eu/_samples/WorkflowDesignerWpf.zip

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


I love YaBB 1G - SP1!

Posts: 19
Joined: Mar 22nd, 2009
Re: How to use FlowLayout
Reply #5 - Mar 22nd, 2009 at 2:45pm
Print Post  
Hi,
I'm evaluating WpfDiagram now. Our application should display some Process Flow (as a monitor, not as a designer). I tried to use the FlowLayout and really didn't understand how to use it. The help states that:

Workflow Graph Layout
The FlowLayout algorithm can be used to lay out flowcharts, workflow and process diagrams. It works by applying a customizable set of rules for local positioning of connected nodes relatively to each other. On a larger scale, the algorithm keeps groups of nodes separate and prevents links between the groups from crossing nodes. The FlowLayout and ProcessLayout examples included in the WpfDiagram package demonstrate two sample sets of layout rules.

I found neither example in the package. The Workflow Designer sample doesn't contain FlowLayout example as well.

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to use FlowLayout
Reply #6 - Mar 23rd, 2009 at 1:20pm
Print Post  
These samples are available only for the Windows Forms version:
https://www.mindfusion.eu/FCNetDemo.zip

We can port them to WPF for the next release.

Stoyan
  
Back to top
 
IP Logged
 
lex
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 19
Joined: Mar 22nd, 2009
Re: How to use FlowLayout
Reply #7 - Mar 23rd, 2009 at 4:38pm
Print Post  
I tried porting the definitions from the WinForm FlowLayout sample (which works well) into the wpf sample:
if (flowLayout == null)
           {
               flowLayout = new FlowLayout();
               flowLayout.AutoRoute = true;
               flowLayout.HorizontalGroupOffset = 60;
               flowLayout.VerticalGroupOffset = 35;
               flowLayout.NodeDistance = 10;
               flowLayout.Margins = new Size(0, 0);
               flowLayout.LaneType = LaneType.LaneGrid;

               // define direction rules for the connector types
               FlowLayoutRules rules = flowLayout.LayoutRules;
               rules.PreferredRules = PreferredRules.ConnectorRules;
               rules.ConnectorRules.DownOriented = "ControlFlow";
               rules.ConnectorRules.RightOriented = "False";

               // miscellaneous rules
               rules.NodeRules.GroupStartNodes = "Start";
               rules.ConnectorRules.HorizontalBendOrientation = false;
           }

I used a TreeLayout sample as base, so I drop nodes and do the following:
private ShapeNode addChild(ShapeNode node)
{
// create the new node and add it to the parent group
// so its position is updated when the parent is moved
ShapeNode childNode = new ShapeNode(diagram);
childNode.AllowDrop = true;
diagram.Nodes.Add(childNode);
// link the parent node with the child
DiagramLink link = new DiagramLink(diagram, node, childNode);
           link.LayoutTraits[FlowLayoutTraits.LogicID] = "ControlFlow";
           
diagram.Links.Add(link);

// update the counter
uniqueID += 1;
childNode.Tag = uniqueID;

// rearrange the tree
rearrange();

// select the new node
diagram.Selection.Change(childNode);

return childNode;
}

This fails with Null reference exception somewhere inside             flowLayout.Arrange(diagram);
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to use FlowLayout
Reply #8 - Mar 23rd, 2009 at 6:54pm
Print Post  
Have you set the LogicIDs of all links to either ControlFlow or False? Could you save your flowchart to a file and email it to support@mindfsuion.eu for our developer to examine?
  
Back to top
 
IP Logged
 
lex
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 19
Joined: Mar 22nd, 2009
Re: How to use FlowLayout
Reply #9 - Mar 24th, 2009 at 7:44am
Print Post  
I sent it to the support email.
Thanks.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to use FlowLayout
Reply #10 - Mar 24th, 2009 at 6:30pm
Print Post  
I've meant could you call Diagram.SaveToXml and email us the diagram file? If you set PreferredRules = ConnectorRules, you must set the LogicID of each link to the one of the IDs you have set in rules.ConnectorRules.
  
Back to top
 
IP Logged
 
lex
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 19
Joined: Mar 22nd, 2009
Re: How to use FlowLayout
Reply #11 - Mar 25th, 2009 at 6:59am
Print Post  
The only place I create links appears below and I set the necessary trait there.
The xml will be of little help because the sample starts with single node and when I drag another one and call rearrange, it fails with exception.
I will send this project via email.

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to use FlowLayout
Reply #12 - Mar 25th, 2009 at 9:17am
Print Post  
Seems FlowLayout also expects you to define LogicID for each node, even if they won't be used with PreferredRules = ConnectorRules. So you'd have to set childNode.LayoutTraits[FlowLayoutTraits.LogicID] = "NotSpecified"; in addChild. It also requires that there are some end-group nodes defined, and that there is a chain of ControlFlow connectors from the start to end node in a group. Even if you set all rules as FlowLayout expects them, the end result won't be much different than a combination of LayeredLayout and routing as below, so I wouldn't bother.

Code
Select All
private void rearrange()
{
	LayeredLayout ll = new LayeredLayout();
	ll.Arrange(diagram);

	foreach (DiagramLink link in diagram.Links)
	{
		link.ControlPoints[0] = GetBottomCenter(link.Origin);
		link.ControlPoints[link.ControlPoints.Count - 1] = GetTopCenter(link.Destination);
	}

	diagram.RouteAllLinks();
}

Point GetBottomCenter(DiagramNode node)
{
	Rect r = node.Bounds;
	return new Point(r.X + r.Width / 2, r.Bottom);
}

Point GetTopCenter(DiagramNode node)
{
	Rect r = node.Bounds;
	return new Point(r.X + r.Width / 2, r.Top);
}
 



If you know that semantically some links denote loops or yes/no branches in decisions, you could move their end points to the left/right sides of nodes using similar GetLeftCenter and GetRightCenter methods, instead of Left/Right rules in FlowLayout.

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


I love YaBB 1G - SP1!

Posts: 19
Joined: Mar 22nd, 2009
Re: How to use FlowLayout
Reply #13 - Mar 25th, 2009 at 12:27pm
Print Post  
Hi,
I've done what you mentioned:
1. Marked all node with "Unspecified"
2. Created an "End" node and added this type to NodeRules.GroupEndNodes.
3. I prebuilt the nodes instead of drag & drop.
The FlowLayout doesn't seem to be functional.

Please advise how can I use the wpf component to display a workflow without manual layout.

Thanks.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint