Constructs an empty link that does not connect any nodes. If you want the link to be seen, you must provide a Shape as an element to be used as the visual path for the link.
Usage example:
// Constructs a Link, sets properties on it,
// adds a data binding to it,
// and adds two Shapes to the Link:
const l = new go.Link({
routing: go.Link.Orthogonal
})
.add(new go.Shape({ strokeWidth: 2 }))
.add(new go.Shape({ toArrow: "Standard" }))
Optional initialization properties.
Gets or sets the way the path is generated from the route's points. 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.
Gets or sets the length of the first segment, when the computed "from spot" at the fromPort is not Spot.None. The default value is NaN, meaning that the value actually comes from the GraphObject.fromEndSegmentLength property of the fromPort. This value also limits how short the fromShortLength may be drawn.
For examples of how to use this property, see Link Connection Points.
Gets or sets the Node that this link comes from. 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.
This read-only property returns a GraphObject that is the "from" port that this link is connected from. The fromNode provides the node that the link is coming from. The fromPortId provides the identifier for which port this link is coming from; you can set that property in order to change the value of this property. This method may return null.
Gets or sets the function that is called after this Link changes which Node or port it connects from. 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.
Gets or sets the identifier of the port that this link comes from. The default value is the empty string.
Gets or sets how far the end segment stops short of the actual port. Positive values are limited by the fromEndSegmentLength or GraphObject.fromEndSegmentLength. 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. If you want to move an arrowhead away from the start of the link route, set the arrowhead Shape's GraphObject.segmentOffset.
Gets or sets where this link should connect at the fromPort. 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.
This read-only property returns the Geometry that is used by the path, the link Shape based on the route points.
This geometry is automatically generated using the route points and other properties such as the curve. The points of the Geometry are in local coordinates, whereas the points of the link route are in document coordinates.
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.
This read-only property is true when this Link has any label Nodes, Nodes that are owned by this Link and are arranged along its path in the same manner as elements of the Link Panel.
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. 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.
Gets or sets whether this Link is part of the tree for tree operations such as Node.findTreeChildrenNodes or Node.collapseTree.
The initial value is true.
This read-only property returns the Links's Model data key if it is in a Diagram and is backed by Model data. Otherwise this returns undefined.
If the link data is in a GraphLinksModel, the GraphLinksModel.linkKeyProperty must not be an empty string.
This read-only property returns an iterator over the Nodes that act as labels on this Link. 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.
This read-only property returns the angle of the path at the midPoint.
This read-only property returns the point at the middle of the path, in document coordinates.
This read-only property returns the main Shape representing the path of this Link.
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. Note that the points are in document coordinates, but the path's Shape.geometry will have points that are in local Shape coordinates. This Shape's GraphObject.scale should be one and GraphObject.angle should be zero.
If there is no Shape with GraphObject.isPanelMain set to true, the Link will use the first Shape for its path.
Gets or sets the List of Points in the route. All of the Points must be Point.isReal -- no NaN or infinite values -- and all of the points are in document coordinates. 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.
This read-only property returns the number of points in the route.
Gets or sets whether the user may reconnect an existing link at the "from" end. This affects the behavior of the RelinkingTool.
The initial value is false.
Gets or sets whether the user may reconnect an existing link at the "to" end. This affects the behavior of the RelinkingTool.
The initial value is false.
Gets or sets whether the user may change the number of segments in this Link, if the link has straight segments. This affects the behavior of the LinkReshapingTool when curve is not Link.Bezier.
The initial value is false.
This read-only property returns the bounds of the link geometry in document coordinates.
Gets or sets whether the link's path tries to avoid other nodes. 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. When using AvoidsNodes, dragging performance can be improved by setting DraggingTool.isComplexRoutingRealtime to false.
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.
Gets or sets how far the control points are from the points of the route when routing is Orthogonal and curve is Bezier.
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.
Gets or sets the length of the last segment. The default value is NaN, meaning that the value actually comes from the GraphObject.toEndSegmentLength property of the toPort. This value also limits how short the toShortLength may be drawn.
For examples of how to use this property, see Link Connection Points.
This read-only property returns a GraphObject that is the "to" port that this link is connected to. The toNode provides the node that the link is going to. The toPortId provides the identifier for which port this link is going to; you can set that property in order to change the value of this property. This method may return null.
Gets or sets the function that is called after this Link changes which Node or port it connects to. 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.
Gets or sets the identifier of the port that this link goes to. The default value is the empty string.
Gets or sets how far the end segment stops short of the actual port. Positive values are limited by the toEndSegmentLength or GraphObject.toEndSegmentLength. 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. If you want to move an arrowhead away from the end of the link route, set the arrowhead Shape's GraphObject.segmentOffset.
Gets or sets where this link should connect at the toPort. 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.
Add a point at the end of the route; this may only be called within an override of computePoints.
The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.
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.
This does not check Diagram.isReadOnly or Model.isReadOnly, but commands and tools should check those properties.
true if the user may relink the From end of this link.
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.
This does not check Diagram.isReadOnly or Model.isReadOnly, but commands and tools should check those properties.
true if the user may relink the To end of this link.
Remove all of the points from this link's route; this may only be called within an override of computePoints.
Returns the adjusting value, unless this Link's Diagram is animating and the routing is AvoidsNodes -- then it will return End
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Returns the curve, unless this link is supposed to pretend to be curved, as with reflexive links.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Returns the curviness, if it's a number, or else a computed value based on how many links connect this pair of nodes/ports, by calling computeSpacing on each link.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
must be a real number, not NaN or infinity
Get the length of the end segment in document coordinates, typically a short distance, in document units.
For spot values that are Spot.isSide, this returns a computed value.
Depending on the from argument, this will return fromEndSegmentLength or toEndSegmentLength.
If the value is NaN, this will return the fromPort's GraphObject.fromEndSegmentLength
or the toPort's GraphObject.toEndSegmentLength.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
the GraphObject representing a port on the node.
a Spot value describing where the link should connect.
true if the link is coming out of the port; false if going to the port.
a distance in document coordinates; must be a real number, not NaN or infinity.
Find the approximate point of the other end of the link in document coordinates. This is useful when computing the connection point when there is no specific spot, to have an idea of which general direction the link should be going. By default this will return the center of the other port.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
approximately where the other end of this link might end, in document coordinates
The code that constructs a new route by modifying the points. It is only called by updateRoute, when needed. All route points are always in document coordinates.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Overrides of this method may call a number of "protected" methods in order to build the route: clearPoints, addPoint, insertPoint, removePoint, setPoint. Overrides of this method must not set points.
Other methods that are commonly called and may be overridden are: computeEndSegmentLength, computeSpot, computeOtherPoint, computeCurve, computeCurviness, hasCurviness, computeThickness, makeGeometry.
true if it computed a route of points
Returns the expected spacing between this link and others that connect this link's fromPort and toPort. This calls computeThickness and also takes any "mid label"'s breadth into account.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
must be a real number, not NaN or infinity
Get the Spot that describes how the end of the link should connect with the port.
Depending on the from argument, this will return fromSpot or toSpot.
If the value is Spot.isDefault, this will return the fromPort's GraphObject.fromSpot
or the toPort's GraphObject.toSpot.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
must not be Spot.Default, but may be Spot.None
Returns the thickness of this link. By default it uses the strokeWidth of the main element, assuming it's a Shape. This is called by computeSpacing.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
a non-negative real number
Find the index of the segment that is closest to a given point. This assumes the route only has straight line segments. It ignores any jump-overs or jump-gaps.
the Point, in document coordinates.
int the index of the segment, from zero to the number of points minus 2.
Compute the direction in which a link should go from a given connection point.
the GraphObject representing a port on the node.
the connection point, in document coordinates.
a Spot value describing where the link should connect.
true if the link is coming out of the port; false if going to the port.
whether the link should have orthogonal segments.
the node at the other end of the link.
the GraphObject port at the other end of the link.
the absolute angle, in degrees.
Compute the point on a node/port in document coordinates at which the route of a link should end.
the GraphObject representing a port on the node.
a Spot value describing where the link should connect.
true if the link is coming out of the port; false if going to the port.
whether the link should have orthogonal segments.
the node at the other end of the link.
the GraphObject port at the other end of the link.
an optional Point that is modified and returned; otherwise it allocates and returns a new Point
in document coordinates.
Compute the intersection point in document coordinates for the edge of a particular port GraphObject, given a point, when no particular spot or side has been specified.
the GraphObject representing a port on the node.
the point in document coordinates to/from which the link should point, normally the center of the port.
often this point is far away from the node, to give a general direction, particularly an orthogonal one.
true if the link is coming out of the port; false if going to the port.
an optional Point that is modified and returned; otherwise it allocates and returns a new Point
the point in document coordinates of the intersection point on the edge of the port.
Given a GraphObject that is a "port", return the port at the other end of this link.
This may return the same object, if the link is reflexive.
Gets a particular point of the route.
int The zero-based index of the desired point.
in document coordinates
Returns true if an extra or a different point is needed based on curviness.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Insert a point at a particular position in the route, without replacing an existing point; this may only be called within an override of computePoints.
int The zero-based index of the new point.
The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.
Declare that the route (the points) of this Link need to be recomputed soon. This causes updateRoute to be called, which will call computePoints to perform the actual determination of the route.
Produce a Geometry given the points of this route, depending on the value of curve and corner and perhaps other properties. The points of the Geometry are in local coordinates, whereas the points of the link route are in document coordinates.
This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method.
Move this link to a new position. This also shifts all of the Points in the route accordingly. This also moves any labelNodes.
a new Point in document coordinates.
true if you want to set the location instead of the position. False by default.
Remove a particular point from the route; this may only be called within an override of computePoints.
int The zero-based index of the point to extract.
Sets a particular point of the route; this may only be called within an override of computePoints.
int The zero-based index of the desired point.
The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.
This method recomputes the route if the route is invalid, to make sure the points are up-to-date. This method calls computePoints in order to calculate a new route.
The route may become invalid if either connected node is moved, or if various properties are modified, such as routing. Such changes will call invalidateRoute.
It is unusual for you to have to call this method.
Used as a value for Link.routing: each segment is horizontal or vertical, but the route tries to avoid crossing over nodes.
Used as a value for Link.curve, to indicate that the link path uses Bezier curve segments.
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.
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.
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.
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.
Used as the default value for Link.routing: the route goes fairly straight between ports.
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.
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.
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.
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.
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.
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.
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.
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.
Used as a value for Link.routing: each segment is horizontal or vertical.
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.
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.
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:
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:
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:
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.