Anchor Points and Patterns

Anchor Points

For each node you can define one or more points to which links should dock when connecting to that node. Such points are represented by instances of the AnchorPoint class. The position of an anchor point relative to node's bounding rectangle is specified via the x and y properties. Their values are expressed as percentage of the node's width and height to accommodate for moving and resizing.

You can control whether an anchor point accepts incoming or outgoing links or both. That is done via the allowIncoming and allowOutgoing properties. When a link is drawn, its ends are aligned to the nearest anchors allowing docking of the respective end type. Another way to control whether links can be connected to an anchor point is to handle the validateAnchorPoint event.

Anchor Patterns

An AnchorPattern instance defines a set of anchor points to be used together. When creating a pattern, pass to its constructor an array of AnchorPoint objects. The AnchorPattern class exposes several predefined patterns as static properties. A pattern can be assigned as an integral entity to the anchorPattern property of nodes. Setting the anchorPattern property of a Shape object lets you define the connection points for all ShapeNodes of that shape. The following example creates a pattern of four anchor points:

JavaScript

var AnchorPattern = MindFusion.Diagramming.AnchorPattern;
var AnchorPoint = MindFusion.Diagramming.AnchorPoint;

var apat1 = new AnchorPattern([
    new AnchorPoint(50, 0, true, true),
    new AnchorPoint(100, 50, true, true),
    new AnchorPoint(50, 100, true, true),
    new AnchorPoint(0, 50, true, true)
    ]);

The points are located at the middles of bounding rectangle sides of nodes to which the pattern is assigned. All four points accept both incoming and outgoing links.