An element tool is a view that renders a certain type of control elements on top of the ElementView it is attached to; for example the Remove tool creates an interactive button above the element (this button then allow the user to remove the element). Element 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 elementView with the linkView.addTools()
function.
The JointJS library comes with a collection of pre-made element tool definitions in the joint.elementTools
namespace:
Boundary
- shows element bboxRemove
- adds an interactive remove buttonTo create a new element tool, we call its constructor. Example:
var removeTool = new joint.elementTools.Remove({
rotate: true
});
In addition, the joint.elementTools
namespace contains a customizable button class:
Button
- adds a customizable buttonExample:
var infoTool = new joint.elementTools.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'
}
}],
x: '100%',
action: function(evt) {
alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
}
});
All of the built-in element 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 boundaryTool = new joint.elementTools.Boundary({
focusOpacity: 0.5
});