Class Link

GoJS® Diagramming Components
version 3.0.0
by Northwoods Software®

Hierarchy

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 node ports 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. You can get that Shape easily via the path property.

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.

Index

Accessors

GraphObject.actionCancel GraphObject.actionDown GraphObject.actionMove GraphObject.actionUp GraphObject.actualBounds GraphObject.alignment GraphObject.alignmentFocus GraphObject.angle GraphObject.background GraphObject.click GraphObject.column GraphObject.columnSpan GraphObject.contextClick GraphObject.contextMenu GraphObject.cursor GraphObject.desiredSize GraphObject.doubleClick GraphObject.enabledChanged GraphObject.fromLinkable GraphObject.fromLinkableDuplicates GraphObject.fromLinkableSelfNode GraphObject.fromMaxLinks GraphObject.height GraphObject.isActionable GraphObject.isPanelMain GraphObject.margin GraphObject.maxSize GraphObject.measuredBounds GraphObject.minSize GraphObject.mouseDragEnter GraphObject.mouseDragLeave GraphObject.mouseDrop GraphObject.mouseEnter GraphObject.mouseHold GraphObject.mouseHover GraphObject.mouseLeave GraphObject.mouseOver GraphObject.name GraphObject.naturalBounds GraphObject.opacity GraphObject.panel GraphObject.part GraphObject.pickable GraphObject.portId GraphObject.position GraphObject.row GraphObject.rowSpan GraphObject.scale GraphObject.segmentFraction GraphObject.segmentIndex GraphObject.segmentOffset GraphObject.segmentOrientation GraphObject.shadowVisible GraphObject.stretch GraphObject.toLinkable GraphObject.toLinkableDuplicates GraphObject.toLinkableSelfNode GraphObject.toMaxLinks GraphObject.toolTip GraphObject.visible GraphObject.width Panel.alignmentFocusName Panel.columnCount Panel.columnSizing Panel.data Panel.defaultAlignment Panel.defaultColumnSeparatorDashArray Panel.defaultColumnSeparatorStroke Panel.defaultColumnSeparatorStrokeWidth Panel.defaultRowSeparatorDashArray Panel.defaultRowSeparatorStroke Panel.defaultRowSeparatorStrokeWidth Panel.defaultSeparatorPadding Panel.defaultStretch Panel.elements Panel.graduatedMax Panel.graduatedMin Panel.graduatedRange Panel.graduatedTickBase Panel.graduatedTickUnit Panel.gridCellSize Panel.gridOrigin Panel.isClipping Panel.isEnabled Panel.isOpposite Panel.itemArray Panel.itemCategoryProperty Panel.itemIndex Panel.itemTemplate Panel.itemTemplateMap Panel.leftIndex Panel.padding Panel.rowCount Panel.rowSizing Panel.topIndex Panel.type Panel.viewboxStretch Part.adornments Part.category Part.containingGroup Part.containingGroupChanged Part.copyable Part.deletable Part.diagram Part.dragComputation Part.groupable Part.highlightedChanged Part.isAnimated Part.isHighlighted Part.isInDocumentBounds Part.isLayoutPositioned Part.isSelected Part.isShadowed Part.isTopLevel Part.layer Part.layerChanged Part.layerName Part.layoutConditions Part.location Part.locationObject Part.locationObjectName Part.locationSpot Part.maxLocation Part.minLocation Part.movable Part.reshapable Part.resizable Part.resizeAdornmentTemplate Part.resizeCellSize Part.resizeObject Part.resizeObjectName Part.rotatable Part.rotateAdornmentTemplate Part.rotateObject Part.rotateObjectName Part.rotationSpot Part.selectable Part.selectionAdorned Part.selectionAdornmentTemplate Part.selectionChanged Part.selectionObject Part.selectionObjectName Part.shadowBlur Part.shadowColor Part.shadowOffset Part.text Part.textEditable Part.zOrder

Methods

Constructors

  • 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.Routing.Orthogonal
    })
    .add(
    new go.Shape({ strokeWidth: 2 }),
    new go.Shape({ toArrow: "Standard" })
    );

    Parameters

    • Optional init: Partial<Link>

      Optional initialization properties.

    Returns Link

Accessors

  • Gets or sets how the route is computed, including whether it uses the points of its old route to determine the new route. The value must be one of None, End, Scale, or Stretch.

    The default value is None -- the route is completely recalculated each time.

  • Gets or sets how rounded the corners are for adjacent line segments when the curve is None, JumpGap, or JumpOver and the two line segments are orthogonal to each other.

    The default value is zero -- there is no curve at a corner.

  • 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 how far the control points are offset when the curve is Bezier or when there are multiple links between the same two ports.

    The default value is NaN -- the actual curviness is computed based on how many links connect the same pair of ports.

  • 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.

  • 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 Routing.Orthogonal and Routing.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.

  • 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 Curve.Bezier.

    The initial value is false.

  • This read-only property returns the bounds of the link geometry in document coordinates.

    since

    2.2

  • 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 Node that this link goes to. The toPortId specifies which port the link goes to. The default value is null -- this link is not going to any node.

    A template should not be connected with any node.

  • 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.

Methods

  • Add a point at the end of the route; this may only be called within an override of computePoints.

    Parameters

    • p: Point

      The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.

    Returns void

  • 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 LinkAdjusting

    since

    2.1

  • 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 Curve

  • 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.

    Returns number

    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.

    Parameters

    • node: Node
    • port: GraphObject

      the GraphObject representing a port on the node.

    • spot: Spot

      a Spot value describing where the link should connect.

    • from: boolean

      true if the link is coming out of the port; false if going to the port.

    Returns number

    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.

    Parameters

    Returns Point

    approximately where the other end of this link might end, in document coordinates

  • 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.

    Returns number

    must be a real number, not NaN or infinity

  • 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.

    Returns number

    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.

    Parameters

    • p: Point

      the Point, in document coordinates.

    Returns number

    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.

    Parameters

    • node: Node
    • port: GraphObject

      the GraphObject representing a port on the node.

    • linkpoint: Point

      the connection point, in document coordinates.

    • spot: Spot

      a Spot value describing where the link should connect.

    • from: boolean

      true if the link is coming out of the port; false if going to the port.

    • ortho: boolean

      whether the link should have orthogonal segments.

    • othernode: Node

      the node at the other end of the link.

    • otherport: GraphObject

      the GraphObject port at the other end of the link.

    Returns number

    the absolute angle, in degrees.

  • Compute the point on a node/port in document coordinates at which the route of a link should end.

    Parameters

    • node: Node
    • port: GraphObject

      the GraphObject representing a port on the node.

    • spot: Spot

      a Spot value describing where the link should connect.

    • from: boolean

      true if the link is coming out of the port; false if going to the port.

    • ortho: boolean

      whether the link should have orthogonal segments.

    • othernode: Node

      the node at the other end of the link.

    • otherport: GraphObject

      the GraphObject port at the other end of the link.

    • Optional result: Point

      an optional Point that is modified and returned; otherwise it allocates and returns a new Point

    Returns 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.

    Parameters

    • node: Node
    • port: GraphObject

      the GraphObject representing a port on the node.

    • focus: Point

      the point in document coordinates to/from which the link should point, normally the center of the port.

    • p: Point

      often this point is far away from the node, to give a general direction, particularly an orthogonal one.

    • from: boolean

      true if the link is coming out of the port; false if going to the port.

    • Optional result: Point

      an optional Point that is modified and returned; otherwise it allocates and returns a new Point

    Returns Point

    the point in document coordinates of the intersection point on the edge of the port.

  • Given a Node, return the node at the other end of this link.

    Parameters

    Returns Node

    This may return the same node, if the link is reflexive.

  • Gets a particular point of the route.

    Parameters

    • i: number

      int The zero-based index of the desired point.

    Returns 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.

    Returns boolean

  • 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.

    Parameters

    • i: number

      int The zero-based index of the new point.

    • p: Point

      The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.

    Returns void

  • 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.

    Returns void

  • 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.

    Returns Geometry

  • Move this link to a new position. This also shifts all of the Points in the route accordingly. This also moves any labelNodes.

    Parameters

    • newpos: Point

      a new Point in document coordinates.

    • Optional useLocation: boolean

      true if you want to set the location instead of the position. False by default.

    Returns void

  • Sets a particular point of the route; this may only be called within an override of computePoints.

    Parameters

    • i: number

      int The zero-based index of the desired point.

    • p: Point

      The new point in document coordinates, which should not have infinite or NaN coordinate values, and which must not be modified afterwards.

    Returns void

  • 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.

    Returns void

Properties

deprecated

See Routing.AvoidsNodes.

deprecated

See Curve.Bezier.

deprecated

See LinkAdjusting.End.

deprecated

See Curve.JumpGap.

deprecated

See Curve.JumpOver.

deprecated

See Routing.Normal.

deprecated

See Orientation.Along.

deprecated

See Orientation.Minus90.

deprecated

See Orientation.Opposite.

deprecated

See Orientation.Plus90.

deprecated

See Orientation.Upright.

deprecated

See Orientation.Upright45.

deprecated

See Routing.Orthogonal.

deprecated

See LinkAdjusting.Scale.

deprecated

See LinkAdjusting.Stretch.