ToolView

The joint.dia.ToolView class is the parent class of all link tool views included in joint.elementTools and joint.linkTools namespaces. It is responsible for rendering the tool within a joint.dia.ToolsView, when the tools view is attached to joint.dia.ElementView or joint.dia.LinkView.

For example, creating link tools objects is the first step in the process of setting up link tools on a link view:

// 1) creating link tools
var verticesTool = new joint.linkTools.Vertices();
var segmentsTool = new joint.linkTools.Segments();
var boundaryTool = new joint.linkTools.Boundary();

// 2) creating a tools view
var toolsView = new joint.dia.ToolsView({
    name: 'basic-tools',
    tools: [verticesTool, segmentsTool, boundaryTool]
});

// 3) attaching to a link view
var linkView = link.findView(paper);
linkView.addTools(toolsView);

Every cell view (i.e. element view or link view) we want to attach to requires its own tools view object (ToolsView objects are automatically reassigned to the last cell view they are added to). Similarly, every tools view we create requires its own set of tools (ToolView objects are automatically reassigned to the last toolsView.tools array they were made part of).

constructor

constructor(options?: ToolView.Options);

The ToolView constructor accepts several parameters, which are common to all joint.elementTools and joint.linkTools:

focusOpacity

focusOpacity?: number;

[optional] The opacity of this tool when it is focused. The default value is 1.

visibility()

visibility?: (view: dia.CellView, tool: dia.ToolView) => boolean;

[optional] A callback function that determines whether this tool should be visible. The function is called before any tool update.

The default visibility evaluates to true.

Methods

blur()

toolView.blur();

Stop focusing the tool within its containing toolsView.

This function reverses the effect of the toolView.focus function.

focus()

toolView.focus();

Focus the tool within its containing toolsView.

When a tool is focused, all other tools within the toolsView are hidden and the tool's opacity is changed according to the tool's focusOpacity option. Only one tool can be focused at a time; the focus passes to the last tool within a tools view on which the focus function was called.

The effect of this function can be reversed by the toolView.blur function.

getName()

toolView.getName();

Return the name of the tool. The names of built-in link tools are kebab-case versions of their class names (e.g. the name of joint.linkTools.SourceAnchor is 'source-anchor').

When creating a custom tool (e.g. by extending the joint.linkTools.Button class), it is recommended that you provide a custom name prototype property, as well:

joint.linkTools.InfoButton = joint.linkTools.Button.extend({
    name: 'info-button',
    options: {
        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);
        }
    }
});

hide()

toolView.hide();

Hide the tool.

The effect of this function can be reversed by the toolView.show function.

isExplicitlyVisible()

toolView.isExplicitlyVisible();

Return true if the tool is explicitly visible.

A tool is not explicitly visible if it has been hidden (e.g. with the toolView.hide function) or if another tool within the containing toolsView has been focused (e.g. with the toolView.focus function).

isVisible()

toolView.isVisible();

Return true if the tool is currently visible.

A tool is not visible if it has been hidden (e.g. with the toolView.hide function) or if another tool within the containing toolsView has been focused (e.g. with the toolView.focus function) or if the visibility option of the tool is evaluated to false.

show()

toolView.show();

Show the tool.

The effect of this function can be reversed by the toolView.hide function.

Types

Options

interface Options<V = dia.CellView> extends mvc.ViewOptions<undefined, SVGElement> {
    focusOpacity?: number;
    visibility?: (this: dia.ToolView, view: V, tool: dia.ToolView) => boolean;
}