Class Link
Extends Part. 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:
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
- fromEndSegmentDirection, toEndSegmentDirection
- 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
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.
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.
Constructor Summary Details
Returns | Name | Description |
---|---|---|
Link()
|
Properties Summary Details
Returns | Name | Description |
---|---|---|
{EnumValue}
|
adjusting
|
|
{number}
|
corner
|
|
{EnumValue}
|
curve
|
Gets or sets the way the path is generated from the route's points. More...
The value must be one of None, Bezier, JumpGap, or JumpOver.
Setting this property to JumpOver or JumpGap requires the Diagram to do considerable computation when calculating Link routes. Consider not using a Jump... value with Diagrams that contain large numbers of Links if you are targeting slow devices. The default value is None -- each link segment is a straight line. |
{number}
|
curviness
|
|
{EnumValue}
|
fromEndSegmentDirection
|
Gets or sets how the direction of the first segment is computed when the node is rotated. More...
The value must be one of Node.DirectionAbsolute,
Node.DirectionRotatedNode, Node.DirectionRotatedNodeOrthogonal,
or the default value Node.DirectionDefault which indicates
that the value actually comes from the GraphObject.fromEndSegmentDirection property of the fromPort.
For examples of how to use this property, see Link Connection Points. See also: |
{number}
|
fromEndSegmentLength
|
Gets or sets the length of the first segment, when the computed "from spot" at the fromPort is not Spot.None. More...
The default value is NaN, meaning that the value
actually comes from the GraphObject.fromEndSegmentLength property of the fromPort.
For examples of how to use this property, see Link Connection Points. See also: |
{Node}
|
fromNode
|
Gets or sets the Node that this link comes from. More...
The fromPortId specifies which port the link comes from.
The default value is null -- this link is not coming from any node.
A template should not be connected with any node. |
fromPort
|
This read-only property returns a GraphObject that is the "from" port that this link is connected from. More...
The fromNode provides the node that the link is coming from.
The fromPortId provides the identifier for which port this link is coming from.
This method may return null.
|
|
{function(Link, GraphObject, GraphObject) | null}
|
fromPortChanged
|
Gets or sets the function that is called after this Link changes which Node or port it connects from. More...
The first argument will be this Link.
The second argument will be the old GraphObject port.
The third argument will be the new GraphObject port.
If the value is a function, that function must not modify which nodes or links this link connects with. The "from" node and/or port has already been changed -- trying to change it again may produce undefined behavior. The default value is null -- no function is called. |
{string}
|
fromPortId
|
Gets or sets the identifier of the port that this link comes from. More...
The default value is the empty string.
|
{number}
|
fromShortLength
|
Gets or sets how far the end segment stops short of the actual port. More...
Negative values cause the link to extend into the port.
The default value is NaN -- the value actually comes from the
GraphObject.fromShortLength property of the fromPort.
For examples of how to use this property, see Link Connection Points. See also: |
{Spot}
|
fromSpot
|
Gets or sets where this link should connect at the fromPort. More...
The default value is Spot.Default, meaning that the value
actually comes from the GraphObject.fromSpot property of the fromPort.
This property is set by some layouts, if ForceDirectedLayout.setsPortSpots or LayeredDigraphLayout.setsPortSpots or TreeLayout.setsPortSpot or TreeLayout.setsChildPortSpot is true. For examples of how to use this property, see Link Connection Points. See also: |
{Geometry}
|
geometry
|
This read-only property returns the Geometry that is used by the path, the link Shape based on the route points. More...
This geometry is automatically generated using the route points and other properties such as the curve. More than one Shape may share this geometry as its Shape.geometry, if there is more than one shape element in the Link with GraphObject.isPanelMain set to true. |
{boolean}
|
isLabeledLink
1.1
|
|
{boolean}
|
isOrthogonal
1.2
|
This read-only property is true if routing is a value that implies that the points
of the route should be orthogonal, such that each point shares a common X or a common Y value
with the immediately previous and next points. More...
This property is completely dependent on the routing property.
Values of Link.Orthogonal and Link.AvoidsNodes causes this property to be true.
The points in the route might not actually form an orthogonal route, but when the route is computed the intent is to maintain orthogonality. |
{boolean}
|
isTreeLink
1.2
|
Gets or sets whether this Link is part of the tree for tree operations
such as Node.findTreeChildrenNodes or Node.collapseTree. More...
The initial value is true. |
{Iterator.
|
labelNodes
|
This read-only property returns an iterator over the Nodes that act as labels on this Link. More...
Setting Node.labeledLink to refer to this Link
will add that Node to this collection.
Do not confuse these Nodes with the GraphObjects that are part of this Link Panel. Those objects can also be used as "labels", but not as objects to which there can be link connections, because those panel elements cannot be Nodes. Those panel objects can be used for other purposes too, such as arrowheads. A template should not have any label nodes. See also: |
{number}
|
midAngle
|
This read-only property returns the angle of the path at the midPoint.
|
{Point}
|
midPoint
|
This read-only property returns the point at the middle of the path.
|
{Shape}
|
path
|
This read-only property returns the Shape representing the path of this Link. More...
The value depends on there being an element in this Link that is a Shape and that has GraphObject.isPanelMain set to true. This shape is what displays the stroke going from one node to another node. This path shape's geometry is automatically generated based on the points of this link's route, depending on other properties such as curve. If there is no Shape with GraphObject.isPanelMain set to true, the Link will use the first Shape for its path. |
{List.
|
points
|
Gets or sets the List of Points in the route. More...
Although this list may be replaced by setting this property,
one must not modify the contents of the List directly.
The setter also accepts an Array of alternating X,Y point values [1, 2, 3, 4, 5, 6], or an Array of Objects each of which has (lowercase) 'x' and 'y' properties that are numbers [{"x":1,"y":2}, {"x":3,"y":4}, {"x":5,"y":6}]. Ownership of the List and all of its Points that is provided to the setter is transferred to this Link. |
{number}
|
pointsCount
|
This read-only property returns the number of points in the route.
|
{boolean}
|
relinkableFrom
|
Gets or sets whether the user may reconnect an existing link at the "from" end. More...
This affects the behavior of the RelinkingTool.
The initial value is false. |
{boolean}
|
relinkableTo
|
Gets or sets whether the user may reconnect an existing link at the "to" end. More...
This affects the behavior of the RelinkingTool.
The initial value is false. |
{boolean}
|
resegmentable
1.2
|
Gets or sets whether the user may change the number of segments in this Link,
if the link has straight segments. More...
This affects the behavior of the LinkReshapingTool when curve is not Link.Bezier.
The initial value is false. |
{EnumValue}
|
routing
|
Gets or sets whether the link's path tries to avoid other nodes. More...
The value must be one of Normal, Orthogonal, or AvoidsNodes.
Setting this property to AvoidsNodes requires the Diagram to do considerable computation when calculating Link routes. Consider not using the AvoidsNodes with Diagrams that contain large numbers of Nodes and Links if you are targeting slow devices. The default value is Normal -- the route is primarily a single straight segment, with possible short end segments when connecting with ports that have a "spot" value as the fromSpot or GraphObject.fromSpot or toSpot or GraphObject.toSpot. |
{number}
|
smoothness
|
Gets or sets how far the control points are from the points of the route
when routing is Orthogonal and curve is Bezier. More...
The default value is 0.5. Values of this property typically fall in the range of 0.0 to 1.0. A value of 0.0 indicates that the control points of the curve are at the end points, which will result in straight line segments. A value of 1.0 indicates that the control points are one-third of the link's length away from the end point along the direction of the link, and the same distance away in a perpendicular direction. The distance scales linearly with the value of this property, even with negative values and values greater than 1.0. |
{EnumValue}
|
toEndSegmentDirection
|
Gets or sets how the direction of the last segment is computed when the node is rotated. More...
The value must be one of Node.DirectionAbsolute,
Node.DirectionRotatedNode, Node.DirectionRotatedNodeOrthogonal,
or the default value Node.DirectionDefault, which indicates
that the value actually comes from the GraphObject.toEndSegmentDirection property of the toPort.
For examples of how to use this property, see Link Connection Points. See also: |
{number}
|
toEndSegmentLength
|
Gets or sets the length of the last segment. More...
The default value is NaN, meaning that the value
actually comes from the GraphObject.toEndSegmentLength property of the toPort.
For examples of how to use this property, see Link Connection Points. See also: |
{Node}
|
toNode
|
|
toPort
|
This read-only property returns a GraphObject that is the "to" port that this link is connected to. More...
The toNode provides the node that the link is going to.
The toPortId provides the identifier for which port this link is going to.
This method may return null.
|
|
{function(Link, GraphObject, GraphObject) | null}
|
toPortChanged
|
Gets or sets the function that is called after this Link changes which Node or port it connects to. More...
The first argument will be this Link.
The second argument will be the old GraphObject port.
The third argument will be the new GraphObject port.
If the value is a function, that function must not modify which nodes or links this link connects with. The "to" node and/or port has already been changed -- trying to change it again may produce undefined behavior. The default value is null -- no function is called. |
{string}
|
toPortId
|
Gets or sets the identifier of the port that this link goes to. More...
The default value is the empty string.
|
{number}
|
toShortLength
|
Gets or sets how far the end segment stops short of the actual port. More...
Negative values cause the link to extend into the port.
The default value is NaN -- the value actually comes from the
GraphObject.toShortLength property of the toPort.
For examples of how to use this property, see Link Connection Points. See also: |
{Spot}
|
toSpot
|
Gets or sets where this link should connect at the toPort. More...
The default value is Spot.Default, meaning that the value
actually comes from the GraphObject.toSpot property of the toPort.
This property is set by some layouts, if ForceDirectedLayout.setsPortSpots or LayeredDigraphLayout.setsPortSpots or TreeLayout.setsPortSpot or TreeLayout.setsChildPortSpot is true. For examples of how to use this property, see Link Connection Points. See also: |
- Properties borrowed from class Part:
- adornments, category, containingGroup, containingGroupChanged, copyable, deletable, diagram, dragComputation, groupable, isAnimated, isHighlighted, isInDocumentBounds, isLayoutPositioned, isSelected, isShadowed, isTopLevel, layer, layerChanged, layerName, LayoutAdded, layoutConditions, LayoutGroupLayout, LayoutHidden, LayoutNodeReplaced, LayoutNodeSized, LayoutNone, LayoutRemoved, LayoutShown, LayoutStandard, location, locationObject, locationObjectName, locationSpot, maxLocation, minLocation, movable, reshapable, resizable, resizeAdornmentTemplate, resizeCellSize, resizeObject, resizeObjectName, rotatable, rotateAdornmentTemplate, rotateObject, rotateObjectName, selectable, selectionAdorned, selectionAdornmentTemplate, selectionChanged, selectionObject, selectionObjectName, shadowBlur, shadowColor, shadowOffset, text, textEditable
- Properties borrowed from class Panel:
- Auto, columnCount, columnSizing, data, defaultAlignment, defaultColumnSeparatorDashArray, defaultColumnSeparatorStroke, defaultColumnSeparatorStrokeWidth, defaultRowSeparatorDashArray, defaultRowSeparatorStroke, defaultRowSeparatorStrokeWidth, defaultSeparatorPadding, defaultStretch, elements, Grid, gridCellSize, gridOrigin, Horizontal, itemArray, itemCategoryProperty, itemIndex, itemTemplate, itemTemplateMap, leftIndex, Link, padding, Position, rowCount, rowSizing, Spot, Table, TableColumn, TableRow, topIndex, type, Vertical, Viewbox, viewboxStretch
- Properties borrowed from class GraphObject:
- actionCancel, actionDown, actionMove, actionUp, actualBounds, alignment, alignmentFocus, angle, areaBackground, background, click, column, columnSpan, contextClick, contextMenu, cursor, Default, desiredSize, doubleClick, Fill, fromLinkable, fromLinkableDuplicates, fromLinkableSelfNode, fromMaxLinks, height, isActionable, isPanelMain, margin, maxSize, measuredBounds, minSize, mouseDragEnter, mouseDragLeave, mouseDrop, mouseEnter, mouseHold, mouseHover, mouseLeave, mouseOver, name, naturalBounds, opacity, panel, part, pickable, portId, position, row, rowSpan, scale, segmentFraction, segmentIndex, segmentOffset, segmentOrientation, stretch, toLinkable, toLinkableDuplicates, toLinkableSelfNode, toMaxLinks, toolTip, Uniform, UniformToFill, visible, width
Method Summary Details
Returns | Name | Description |
---|---|---|
{boolean}
|
canRelinkFrom()
|
This predicate returns true if relinkableFrom is true,
if the layer's Layer.allowRelink is true, and
if the diagram's Diagram.allowRelink is true.
|
{boolean}
|
canRelinkTo()
|
This predicate returns true if relinkableTo is true,
if the layer's Layer.allowRelink is true, and
if the diagram's Diagram.allowRelink is true.
|
{number}
|
findClosestSegment(p)
|
Find the index of the segment that is closest to a given point. More...
This assume the route only has straight line segments.
It ignores any jump-overs or jump-gaps.
|
{number}
|
getLinkDirection(node, port, linkpoint, spot, from, ortho, othernode, otherport)
1.2
|
Compute the direction in which a link should go from a given connection point. More...
|
{Point}
|
getLinkPoint(node, port, spot, from, ortho, othernode, otherport, result)
1.2
|
Compute the point on a node/port at which the route of a link should end. More...
|
{Point}
|
getLinkPointFromPoint(node, port, focus, p, from, result)
1.2
|
Compute the intersection point for the edge of a particular port GraphObject, given a point,
when no particular spot or side has been specified. More...
|
{Node}
|
getOtherNode(node)
|
|
getOtherPort(port)
|
Given a GraphObject that is a "port", return the port at the other end of this link. More...
|
|
{Point}
|
getPoint(i)
|
|
move(newpos)
|
- Methods borrowed from class Part:
- addAdornment, canCopy, canDelete, canEdit, canGroup, canLayout, canMove, canReshape, canResize, canRotate, canSelect, clearAdornments, findAdornment, findCommonContainingGroup, findSubGraphLevel, findTopLevelPart, invalidateLayout, isMemberOf, isVisible, removeAdornment, updateAdornments, updateRelationshipsFromData, updateTargetBindings
- Methods borrowed from class Panel:
- add, copy, elt, findColumnForLocalX, findMainElement, findObject, findRowForLocalY, getColumnDefinition, getRowDefinition, insertAt, rebuildItemElements, remove, removeAt, removeColumnDefinition, removeRowDefinition
- Methods borrowed from class GraphObject:
- bind, getDocumentAngle, getDocumentPoint, getDocumentScale, getLocalPoint, isContainedBy, isVisibleObject, setProperties
Constants Summary Details
Returns | Name | Description |
---|---|---|
<constant> {EnumValue} |
AvoidsNodes
|
Used as a value for Link.routing:
each segment is horizontal or vertical, but the route tries to avoid crossing over nodes.
|
<constant> {EnumValue} |
Bezier
|
Used as a value for Link.curve, to indicate that
the link path uses Bezier curve segments.
|
<constant> {EnumValue} |
End
|
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.
|
<constant> {EnumValue} |
JumpGap
|
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 or JumpOver or JumpGap.
|
<constant> {EnumValue} |
JumpOver
|
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 or JumpOver or JumpGap.
|
<constant> {EnumValue} |
None
|
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.
|
<constant> {EnumValue} |
Normal
|
Used as the default value for Link.routing:
the route goes fairly straight between ports.
|
<constant> {EnumValue} |
OrientAlong
|
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.
|
<constant> {EnumValue} |
OrientMinus90
|
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.
|
<constant> {EnumValue} |
OrientMinus90Upright
|
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.
|
<constant> {EnumValue} |
OrientOpposite
|
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.
|
<constant> {EnumValue} |
OrientPlus90
|
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.
|
<constant> {EnumValue} |
OrientPlus90Upright
|
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.
|
<constant> {EnumValue} |
OrientUpright
|
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.
|
<constant> {EnumValue} |
OrientUpright45
|
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.
|
<constant> {EnumValue} |
Orthogonal
|
Used as a value for Link.routing:
each segment is horizontal or vertical.
|
<constant> {EnumValue} |
Scale
|
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.
|
<constant> {EnumValue} |
Stretch
|
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.
|