Link class

A Link is a Part that connects Nodes. The link relationship is directional, going from Link#fromNode to Link#toNode. A link can connect to a specific port element in a node, as named by the Link#fromPortId and Link#toPortId properties.

For more discussion, see Introduction to Links.

To add a Link to a Diagram when using a GraphLinksModel you should do something like:

  myDiagram.startTransaction("make new link");
  myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });
  myDiagram.commitTransaction("make new link");

where you would substitute the keys of the actual nodes that you want to connect with a link. This will cause a Link to be created (copying the template found in Diagram#linkTemplateMap), added to the Diagram in some Layer (based on Part#layerName), and bound to the link data (resulting in Panel#data referring to that link data object). Note that link data objects, unlike Node data, do not have their own unique keys or identifiers, because other Parts do not refer to them.

If you are using a TreeModel, there are no link data objects, so you just need to call TreeModel#setParentKeyForNodeData to specify the "parent" node's key for a "child" node data.

To find a Link given a link data object in the GraphLinksModel, call Diagram#findLinkForData. When using a TreeModel, call either Diagram#findNodeForData or Diagram#findNodeForKey to get a Node, and then call Node#findTreeParentLink to get the Link, if any exists.

To find a link that connects two nodes, call Node#findLinksTo or Node#findLinksBetween. With the former method, the direction matters; with the latter method it returns links in either direction.

A link's position and size are determined by the two nodes that it connects. Normally there should be a Shape as the main element in this Link. This shape is what users will see as the "line" or "wire" -- you can set its Shape#stroke and other "stroke..." properties to control its appearance.

The link will compute a route (a sequence of points) going from the #fromNode's port element to the #toNode's port element. That route is used to generate the path of the main shape. Properties that affect the nature of the route and the geometry of the path include:

  • #curve
  • #curviness
  • #corner
  • #routing
  • #smoothness
  • #adjusting

For more discussion and examples, see Links.

There are additional properties that affect how the end of the link connects to a port element of a node. There are duplicate properties, ones for the "to" end and ones for the "from" end:

  • #fromSpot, #toSpot
  • #fromEndSegmentLength, #toEndSegmentLength
  • #fromShortLength, #toShortLength

These properties normally have "default" values, causing the link's routing and path-geometry generating to get the corresponding values from the connected port element. This scheme permits an individual link to have its own specific connection to a port, taking precedence over how the port normally expects links to connect to it. For example, several of the Layout classes sets these properties on each Link as part of their route computation for links.

For more discussion and examples, see Link Points.

Elements other than the main Shape in the Link may act as decorations on the link, including arrowheads and labels. You can control where they are located along the link route and how they are oriented. Because these decorations may be any GraphObject, they are all properties of that class. The properties include:

  • GraphObject#segmentIndex
  • GraphObject#segmentFraction
  • GraphObject#segmentOffset
  • GraphObject#segmentOrientation

If you do not set the GraphObject#segmentIndex property, the object is positioned to be at the middle of the link.

For more discussion and examples, see Link Labels.

GoJS makes it easy to add arrowheads to your link template. Just add a Shape with the appearance properties that you want, and also set the Shape#toArrow or Shape#fromArrow property to the name of the kind of arrowhead that you want. Doing so automatically sets the "segment..." properties that are appropriate for the chosen arrowhead.

More than one shape may automatically get the route geometry. This is useful when you want to have multiple link shapes with different thicknesses to create a gradient effect across the path of the link or to produce parallel lines along the path. Just set GraphObject#isPanelMain to true on each such Shape.

If you want the user to be able to reconnect a link, using the RelinkingTool, you need to set one or both of #relinkableFrom and #relinkableTo to true. The RelinkingTool shows a RelinkingTool#fromHandleArchetype and/or a RelinkingTool#toHandleArchetype when the link is selected. Such a relink handle can be dragged by the user to start a relinking operation.

If you want the user to be able to change the path of the link, using the LinkReshapingTool, set Part#reshapable to true. The LinkReshapingTool shows reshape handles that the user can drag to shift the position of a point in the link's route. The LinkReshapingTool#handleArchetype is copied for each reshape handle.

Often if a Link is reshapable, you will want to save the route in the model so that it can be restored upon load. To save the route automatically, add a TwoWay Binding on the #points property: new go.Binding("points").makeTwoWay(). Model#toJson will automatically convert the List of Points into an Array of numbers in the JSON representation, if the property is named "points".

If a Link is Part#reshapable, it is also possible to allow the user to add and remove segments from the link's route by setting #resegmentable to true. This causes the LinkReshapingTool to add resegmenting handles at the midpoints of each segment. The LinkReshapingTool#midHandleArchetype is copied for each resegment handle. When the user drags such a resegmenting handle, a new segment is inserted into the route. Also, when the user drags a reshape handle such that two adjacent segments end up in a straight line, a segment is removed from the route.

For more discussion and examples, see Links, Link Labels, and Link Points.

To control what links a user may draw or reconnect, please read about Validation.

To customize linking and relinking behavior, please read Introduction to the Linking Tools and Introduction to the RelinkingTool. For customizing the reshaping of Links, see Introduction to the LinkReshapingTool.

Only Links that are in Diagrams can have connections with Nodes. Templates should not be connected with Nodes, be members of Groups, or have any Adornments.

Implemented types
Available Extensions
Annotations
  • @JS()
  • @staticInterop

Constructors

factory

Properties

hashCode → int
The hash code for this object.
no setterinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Static Properties

avoidsNodes ↔ EnumValue
Used as a value for Link#routing: each segment is horizontal or vertical, but the route tries to avoid crossing over nodes.
getter/setter pair
bezier ↔ EnumValue
Used as a value for Link#curve, to indicate that the link path uses Bezier curve segments.
getter/setter pair
end ↔ EnumValue
Used as a value for Link#adjusting, to indicate that the link route computation should keep the intermediate points of the previous route, just modifying the first and/or last points; if the routing is orthogonal, it will only modify the first two and/or last two points.
getter/setter pair
jumpGap ↔ EnumValue
Used as a value for Link#curve, to indicate that orthogonal link segments will be discontinuous where they cross over other orthogonal link segments that have a Link#curve of JumpOver or JumpGap.
getter/setter pair
jumpOver ↔ EnumValue
Used as a value for Link#curve, to indicate that orthogonal link segments will veer around where they cross over other orthogonal link segments that have a Link#curve of JumpOver or JumpGap.
getter/setter pair
none ↔ EnumValue
This is the default value for Link#curve and Link#adjusting, to indicate that the path geometry consists of straight line segments and to indicate that the link route computation does not depend on any previous route points; this can also be used as a value for GraphObject#segmentOrientation to indicate that the object is never rotated along the link route -- its angle is unchanged.
getter/setter pair
normal ↔ EnumValue
Used as the default value for Link#routing: the route goes fairly straight between ports.
getter/setter pair
orientAlong ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject turned to have the same angle as the route: the GraphObject's angle is always the same as the angle of the link's route at the segment where the GraphObject is attached; use this orientation for arrow heads.
getter/setter pair
orientMinus90 ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject being turned counter-clockwise to be perpendicular to the route: the GraphObject's angle is always 90 degrees less than the angle of the link's route at the segment where the GraphObject is attached.
getter/setter pair
orientMinus90Upright ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject turned counter-clockwise to be perpendicular to the route, just like Link.OrientMinus90, but is never upside down: the GraphObject's angle always being 90 degrees less than the angle of the link's route at the segment where the GraphObject is attached; this is typically only used for TextBlocks or Panels that contain text.
getter/setter pair
orientOpposite ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject's angle always being 180 degrees opposite from the angle of the link's route at the segment where the GraphObject is attached.
getter/setter pair
orientPlus90 ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject is turned clockwise to be perpendicular to the route: the GraphObject's angle is always 90 degrees more than the angle of the link's route at the segment where the GraphObject is attached.
getter/setter pair
orientPlus90Upright ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject turned clockwise to be perpendicular to the route, just like Link.OrientPlus90, but is never upside down: the GraphObject's angle always being 90 degrees more than the angle of the link's route at the segment where the GraphObject is attached; this is typically only used for TextBlocks or Panels that contain text.
getter/setter pair
orientUpright ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject turned to have the same angle as the route, just like Link.OrientAlong, but is never upside down: the GraphObject's angle always following the angle of the link's route at the segment where the GraphObject is attached; this is typically only used for TextBlocks or Panels that contain text.
getter/setter pair
orientUpright45 ↔ EnumValue
This value for GraphObject#segmentOrientation results in the GraphObject's angle always following the angle of the link's route at the segment where the GraphObject is attached, but never upside down and never angled more than +/- 45 degrees: when the route's angle is within 45 degrees of vertical (90 or 270 degrees), the GraphObject's angle is set to zero; this is typically only used for TextBlocks or Panels that contain text.
getter/setter pair
orthogonal ↔ EnumValue
Used as a value for Link#routing: each segment is horizontal or vertical.
getter/setter pair
scale ↔ EnumValue
Used as a value for Link#adjusting, to indicate that the link route computation should scale and rotate the intermediate points so that the link's shape looks approximately the same; if the routing is orthogonal, this value is treated as if it were Link.End.
getter/setter pair
stretch ↔ EnumValue
Used as a value for Link#adjusting, to indicate that the link route computation should linearly interpolate the intermediate points so that the link's shape looks stretched; if the routing is orthogonal, this value is treated as if it were Link.End.
getter/setter pair