ToolsView

The joint.dia.ToolsView class works as a container for one set of cell tools (an array of joint.dia.ToolView objects). It is responsible for rendering the tools as a group when the tools view is attached to a joint.dia.ElementView or joint.dia.LinkView.

To create a new tools view object, we call its constructor. Creating a tools view is the second 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?: ToolsView.Options);

The ToolsView constructor accepts several parameters:

layer

layer?: "tools" | null;

[optional] The stacking context of this tools view. It accepts two possible values:

• "tools" (default) - Render the tools in front of all cells.
• null - Render the tools in front of the related cell. Note that when the z-index of the tools view is lower than the z-index of the related cell, the tools may be hidden behind the related cell.

info

Assigning layer: null implicitly sets elementTools' useModelGeometry and rotate options to true. (See elementTools.Boundary for an example.)

name

name?: string;

[optional] The name of this tools view. Default is null (no name).

tools

tools?: dia.ToolView[];

[optional] An array of tools which should be part of this tools view. Default is [] (no tools).

z

z?: number;

[optional] The stacking order (z-index) of the tools view in the given layer stacking context.

Methods

blurTool()

toolsView.blurTool(tool?: ToolView): this;

Stop focusing the specified tool (of the joint.dia.ToolView type) within this tools view.

This function reverses the effect of the toolsView.focusTool function.

If tool is not specified, the function blurs all tools within this tools view.

focusTool()

toolsView.focusTool(tool: ToolView): this;

Focus the specified tool (of the joint.dia.ToolView type) within this tools view.

When a tool is focused, all other tools within this tools view 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 this tools view with which the focusTool function was called.

The effect of this function can be reversed for a single tool by the toolsView.blurTool() function. All tools can be unfocused by calling toolsView.blurTool() without a parameter.

getName()

toolsView.getName()

Return the name of this tools view. If no name was set during the construction of the tools view, null is returned.

hide()

toolsView.hide()

Hide all tools within this tools view.

show()

toolsView.show()

Show all tools within this tools view.

Types

Options

interface Options extends mvc.ViewOptions<undefined, SVGElement> {
    layer?: "tools" | null;
    name?: string | null;
    tools?: dia.ToolView[];
    z?: number;
}