linkView.addLabel(x, y [, angle, opt])
Add a new default label to the link at the (x,y) coordinates provided. See also the link.appendLabel()
function.
linkView.addLabel(point [, angle, opt])
Add a new default label to the link at the coordinates specified by point
. See also the link.appendLabel()
function.
In either case, this method uses the linkView.getLabelPosition()
function to determine the new label's position
. By default, position.distance
is recorded relative to connection length (as a number in the [0,1]
range), and position.offset
is set relative to the connection (as a number). This behavior may be changed by providing an opt
object with some of the accepted boolean flags:
absoluteDistance: true
records distance
absolutely (as distance from beginning of link)reverseDistance: true
switches distance
to be calculated from end of link, if absoluteDistance
absoluteOffset: true
records offset
absolutely (as x
and y
from connection)The angle
parameter, if provided, is saved as position.angle
attribute inside the returned object. Two additional flags, which may be passed in the opt
object, provide more control over label rotation:
keepGradient: true
- adjust the rotation of the label to match the angle of incline of the path at position.distance
ensureLegible: true
- if the label text ends up being upside-down, rotate the label by additional 180 degrees to ensure that the text stays legible, if keepGradient
The opt
object passed to the label is recorded as label.position.args
. The label uses these options during subsequent labelMove interactions.
This function is useful within custom linkView
event listener definitions:
var CustomLinkView = joint.dia.LinkView.extend({
contextmenu: function(evt, x, y) {
this.addLabel(x, y, 45, {
absoluteDistance: true,
reverseDistance: true, // applied only when absoluteDistance is set
absoluteOffset: true,
keepGradient: true,
ensureLegibility: true // applied only when keepGradient is set
});
}
});
var paper = new joint.dia.Paper({
// ...
linkView: CustomLinkView,
interactive: { vertexAdd: false } // disable default vertexAdd interaction
});