A link tool is a view that renders a certain type of control elements on top of the LinkView it is attached to; for example the Vertices tool creates an interactive handle above every vertex (these handles then allow the user to move and/or delete each vertex). Link tools all inherit from the joint.dia.ToolView
class. A collection of tools is added to a ToolsView; a tools view is then added to the linkView with the linkView.addTools()
function.
The JointJS library comes with a collection of pre-made link tool definitions in the joint.linkTools
namespace:
Vertices
- adds handles above link verticesSegments
- adds handles above link segmentsSourceArrowhead
- adds a handle above link sourceTargetArrowhead
- adds a handle above link targetSourceAnchor
- adds a handle above link source anchorTargetAnchor
- adds a handle above link target anchorBoundary
- shows link bboxRemove
- adds an interactive remove buttonTo create a new link tool, we call its constructor. Example:
var verticesTool = new joint.linkTools.Vertices({
snapRadius: 10
});
In addition, the joint.linkTools
namespace contains a customizable button class:
Button
- adds a customizable buttonExample:
var infoTool = new joint.linkTools.Button({
markup: [{
tagName: 'circle',
selector: 'button',
attributes: {
'r': 7,
'fill': '#001DFF',
'cursor': 'pointer'
}
}, {
tagName: 'path',
selector: 'icon',
attributes: {
'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
'fill': 'none',
'stroke': '#FFFFFF',
'stroke-width': 2,
'pointer-events': 'none'
}
}],
distance: 60,
offset: 0,
action: function(evt) {
alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
}
});
All of the built-in link tools accept the following optional argument, in addition to their own arguments:
focusOpacity | number | What should be the opacity of the tool when it is focused (e.g. with the toolView.focus function)? Default is undefined , meaning that the tool's opacity is kept unchanged. |
---|
Example:
var verticesTool = new joint.linkTools.Vertices({
focusOpacity: 0.5
});