MindFusion.Diagramming for JavaScript Programmer's Guide
Customizing Link Appearance

DiagramLinks-s consist of series of straight or Bezier segments and arrowhead shapes. The link and arrowhead shapes, and also color attributes and text can be customized as detailed below:

Customizing the shape of a link

Your link can be straight or curved and can have one or more segments.  Call DiagramLink.setShape to change the shape. It takes as an argument one of the LinkShape enumeration values:

JavaScript  Copy Code

myLink.setShape(LinkShape.Cascading);

The link can further be customized by changing its control points - they specify the position of the link. The number of control points per segment depends on the link's Shape: Bezier links have four control points per segment. Each straight segment has two control points. Adjacent segments share a control point.

The following code sets three control points of a polyline link which has two segments:

JavaScript  Copy Code

var Point = MindFusion.Drawing.Point;
myLink.setControlPoints([new Point(10, 10), new Point(30, 30), new Point(30, 50)]);
myLink.updateFromPoints();

 Note

Always call DiagramLink.updateFromPoints() after you have changed the control points of a link.

Rounded Links

Links comprising straight segments, that is, ones whose Shape is set to Polyline or Cascading, can draw arcs as joinis between their adjacent segments. To enable that feature, set RoundedLinks to true. Use RoundedLinksRadius to specify the radius of the joining arcs.

Link Crossings

Intersection points where links cross their paths can be rendered as arcs or cuts, as specified via LinkCrossings. It depends on the Z-order, which links jump over the others, or which links appear cut by the others. If LinkCrossings is set to Arcs, links with higher ZIndex jump over those with lower ZIndex. If set to Cut, links at lower Z position are cut by links at higher Z. Radius of arcs and breaks can be set through the CrossingRadius property.

Customizing the arrowheads

Each link can start and end with a shape. The shape at the start is called BaseShape, the shape at the end is called HeadShape. The methods that set the shapes are setBaseShape and setHeadShape. They take as argument either the Shape to set or a string that identifies it: 

JavaScript  Copy Code

myLink.setHeadShape("BowArrow");

The Shape identifiers are also exposed as static members of the Shapes class.

Specifying colors

Link lines are rendered according to Stroke, StrokeThickness and StrokeDashStyle attributes. The shapes at the head and base are filled with HeadBrush and BaseBrush. To access them use setHeadBrush and setBaseBrush as shown below:

JavaScript  Copy Code

//paints the link head with red brush
myLink.setHeadBrush("Red");

Setting text

Use setText to set a label of your link, setFont specifies the font. Here is an example how to do this:

JavaScript  Copy Code

myLink.setText("myLabel");

var Font = MindFusion.Drawing.Font;

//the two boolean arguments specify whether the font is bold and italic
myLink.setFont(new Font("sans-serif", 5, true, false));

The font size is specified in the diagram's current measure unit, which is millimeter by default.