Search
DiagramLink Class
Remarks See Also
 





Represents a link between two diagram nodes.

Namespace: MindFusion.Diagramming
File: DiagramLink.js

 Syntax

JavaScript  Copy Code

// class
DiagramLink.prototype = {}

 Remarks

Links between nodes in MindFusion.Diagramming for JavaScript are represented by instances of the DiagramLink class. Links connect at most two nodes, which can be accessed via the origin and destination properties. If connected to node anchor points, the point indices can be accessed using the originAnchor and destinationAnchor properties.

Links are built of smaller parts called segments, which can be straight lines, cascading orthogonal lines or Bezier curves. The type of segments is set through the shape property. The number of link's segments and their locations are specified by the segmentCount and controlPoints properties. If changing the coordinates of individual points in controlPoints, you should also call the updateFromPoints method to update link's internal state.

Typically, only the start and end segments of a link are updated when the nodes it connects are moved. Number, orientation and/or position of link segments can change dynamically in various ways depending on the values of autoRoute and dynamic properties.

Links can display distinct arrowhead shapes at their ends. These shapes are configured using the headShape and baseShape properties. The sizes of the base and arrowhead images are specified with the headShapeSize and baseShapeSize properties. Arrowhead shapes can also be displayed at the midpoint of each segment to help distinguish between different links. The type and size of these shapes are controlled by the intermediateShape and intermediateShapeSize properties. The outlines of the arrowhead shapes are rendered using the headStroke color.

The color of link segments is specified by the stroke property, while the fill color of the base and head shapes is controlled by the baseBrush and headBrush properties.

Links can have associated text, displayed according to the text, textColor, and textStyle properties. The addLabel method allows multiple labels to be displayed per link. Labels can automatically avoid overlapping nodes or other labels when their autoArrange property is enabled.

 Inheritance Hierarchy

MindFusion.Diagramming.DiagramItem
    MindFusion.Diagramming.DiagramLink

 See Also