In this post we’ll show how to create custom formula shapes with adjustable control points. Shape control points are a new feature in version 6.1 of the Flowchart.NET control, which is currently in beta tests. You can download a copy of the beta version from the following link.

https://mindfusion.eu/_beta/DiagWinForms61.zip

A shape formula is defined using a script, which calls one of the following functions to draw the node shape.

For example, the following formula defines a rounded rectangle shape using lines and arcs, and expects to receive a “radius” control point parameter that will control the corner radii:

// a rounded rectangle shape, with an arc at each corner
string roundRect = @"
	r = Min(Width / 2, radius.X);
	MoveTo(r, 0);
	LineTo(Width - r, 0);
	ArcTo(Width, r, false, false, r, r);
	LineTo(Width, Height - r);
	ArcTo(Width - r, Height, false, false, r, r);
	LineTo(r, Height);
	ArcTo(0, Height - r, false, false, r, r);
	LineTo(0, r);
	ArcTo(r, 0, false, false, r, r);
 ";

When creating a Shape instance, we must add a ShapeControlPoint object to it that defines the radius parameter and its constraints. The following code specifies that the default radius is 5, the minimum and maximum values allowed are 1 and 15 respectively, and prevents the control point from moving vertically by setting minY and maxY to 0.

var myRect = new Shape(roundRect, "MyRect");

// add a control point for the 'radius' parameter
myRect.ControlPoints.Add(new ShapeControlPoint(
	"radius", 5, 1, 15, UnitType.Fixed, 0, 0, 0, UnitType.Fixed));

Here is another example that defines an anchor-like shape with two parameters controlling the tips of the anchor arms.

// an anchor shape, with two arcs outlining each anchor arm
string anchor = @"
	r = Width / 3;
	y1 = p1.Y * Height / 100;
	y2 = p2.Y * Height / 100;
	MoveTo(Width / 2, Height);
	MoveTo(Width / 2 + 3, Height - 5);
	ArcTo(Width, y2, false, true, r, r);
	ArcTo(Width / 2 + 3, Height - 10, false, false, r, r);
	LineTo(Width / 2 + 3, 0);
	LineTo(Width / 2 - 3, 0);
	LineTo(Width / 2 - 3, Height - 10);
	ArcTo(0, y1, false, false, r, r);
	ArcTo(Width / 2 - 3, Height - 5, false, true, r, r);
	LineTo(Width / 2, Height);
 ";

var myAnchor = new Shape(anchor, "MyAnchor");

// add control points at the tips of anchor arms
myAnchor.ControlPoints.Add(new ShapeControlPoint(
	"p1", 0, 0, 0, UnitType.Percentage, 55, 50, 80, UnitType.Percentage));
myAnchor.ControlPoints.Add(new ShapeControlPoint(
	"p2", 100, 100, 100, UnitType.Percentage, 55, 50, 80, UnitType.Percentage));

The following diagram contains several nodes displaying the shapes above, with some of the control points moved to different positions.

Some additional functions that you can call from shape scripts are listed below.

The complete sample project is available for download here:
https://mindfusion.eu/_samples/ParamShapes.zip

Enjoy!

In this post we show how to build a PERT network chart using MindFusion.Diagramming for WPF.

First, create a new WPF project and add a mindfusion.diagramming.wpf.dll reference. Add the appropriate Xaml namespace to the window Xaml file:

xmlns:diag="http://mindfusion.eu/diagramming/wpf"

Add a ScrollViewer and Diagram to the window markup:

<scrollviewer>
	<diag:diagram x:name="diagram">
</diag:diagram></scrollviewer>

There are two conventions for drawing PERT networks: activity on arrow and activity on node. Activity on arrow shows activity information on arrows, and the nodes they connect represent project milestones. Activity on node shows activity information on nodes and the arrows between them display relationships. We will use the first convention.

Let’s define a model class to hold activity data:

public class Activity
{
	// activity name
	public string Name { get; set; }

	// start milestone name
	public string From { get; set; }

	// end milestone  name
	public string To { get; set; }

	// time in months
	public int Time { get; set; }
}

Define a simple PERT project consisting of five milestones and six activities:

var network = new[]
{
	new Activity { Name = "A", From = "10", To = "30", Time = 3 },
	new Activity { Name = "B", From = "10", To = "20", Time = 4 },
	new Activity { Name = "C", From = "20", To = "50", Time = 3 },
	new Activity { Name = "D", From = "30", To = "40", Time = 1 },
	new Activity { Name = "E", From = "30", To = "50", Time = 3 },
	new Activity { Name = "F", From = "40", To = "50", Time = 3 }
};

Create a diagram node for each milestone in the project:

// create diagram nodes for each milestone
foreach (var activity in network)
{
	if (diagram.FindNodeById(activity.From) == null)
	{
		var node = diagram.Factory.CreateShapeNode(bounds, Shapes.Ellipse);
		node.Id = node.Text = activity.From;
	}

	if (diagram.FindNodeById(activity.To) == null)
	{
		var node = diagram.Factory.CreateShapeNode(bounds, Shapes.Ellipse);
		node.Id = node.Text = activity.To;
	}
}

Create a diagram link for each activity and display the activity name and estimated time as link labels:

// create a diagram link for each activity
foreach (var activity in network)
{
	var link = diagram.Factory.CreateDiagramLink(
		diagram.FindNodeById(activity.From),
		diagram.FindNodeById(activity.To));

	var label1 = link.AddLabel(activity.Name);
	label1.RelativeTo = RelativeToLink.Segment;
	label1.Index = 0;
	label1.VerticalOffset = -20;
	label1.TextBrush = new SolidColorBrush(Colors.Red);

	var label2 = link.AddLabel(string.Format("t={0}mo", activity.Time));
	label2.RelativeTo = RelativeToLink.Segment;
	label2.Index = 0;
	label2.VerticalOffset = 10;
	label2.TextBrush = new SolidColorBrush(Colors.Blue);
}

Use automatic graph layout algorithm to arrange the PERT network chart:

// arrange the diagram from left to right
var layout = new LayeredLayout();
layout.Margins = new Size(100, 100);
layout.EnforceLinkFlow = true;
layout.Orientation = Orientation.Horizontal;
layout.Arrange(diagram);

The final result is displayed below.

For more information on the PERT methodology, see this Wikipedia article:
http://en.wikipedia.org/wiki/PERT

The complete sample project is available for download here:
https://mindfusion.eu/_samples/PertNetwork.zip

All MindFusion.Diagramming libraries expose the same programming interface, so most of the sample code shown above will work with only a few modifications in Windows Forms, ASP.NET, Silverlight and Java versions of the control.

Enjoy!