linkView.getLabelPosition(x, y [, opt])
Return a label position
object based on the x
and y
coordinates provided.
The function translates the provided coordinates into an object with two fields:
distance
- the distance (following the line) of the point on the line that is closest to point x,y
.offset
- the distance between the closest point and the point x,y
.By default, position.distance
is set relative to connection length (as a number in the [0,1]
range that records the length ratio), and position.offset
is set relative to the connection (as a number recording the perpendicular distance). The user may change this behavior by providing an opt
object with some of the following accepted boolean flags:
absoluteDistance: true
- record distance
absolutely (as absolute distance from beginning of link, a positive number).reverseDistance: true
- if absoluteDistance: true
, record distance
absolutely from end of link (as a negative number).absoluteOffset: true
- record offset
absolutely (as x
and y
distance from closest point).Please note that if absoluteOffset
is not set (i.e. the default option), label can only be placed/moved in the area that is reachable by lines perpendicular to the link (that is, the label cannot be moved beyond link endpoints).
The opt
object passed to the label is recorded as label.position.args
. The label uses these options during subsequent labelMove interactions.
An object in the following format is returned:
{
distance: number,
offset: number | { x: number, y: number },
args?: {
absoluteDistance?: boolean,
reverseDistance?: boolean,
absoluteOffset?: boolean
}
}
See link.label()
documentation for more information about the position
object.
This function can be used to add a custom label to the link.labels
array, in situations when the linkView.addLabel()
function is not sufficient. For example:
var CustomLinkView = joint.dia.LinkView.extend({
contextmenu: function(evt, x, y) {
var idx = -1; // add at end of `labels`
var label = {
markup: '<g class="label"><circle /><path /></g>',
position: this.getLabelPosition(x, y, { absoluteOffset: true }),
attrs: {
circle: {
r: 15,
fill: 'lightgray',
stroke: 'black',
strokeWidth: 2
},
path: {
d: 'M 0 -15 0 -35 20 -35',
stroke: 'black',
strokeWidth: 2,
fill: 'none'
}
}
}
this.model.addLabel(idx, label);
}
});
var paper = new joint.dia.Paper({
//...
linkView: CustomLinkView,
interactive: { vertexAdd: false }
});