Skip to main content

ToolsView

The joint.dia.ToolsView class works as a container for one set of link 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.LinkView.

To create a new tools view object, we call its constructor. Two optional arguments are accepted:

namestringThe name of this tools view. Default is null (no name).
toolsArray<dia.ToolView>An array of tools that should be a part of the tools view. Default is [] (no tools).

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 link view we want to attach to requires its own tools view object (ToolsView objects are automatically reassigned to the last link 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).

Methods

blurTool()

toolsView.blurTool(tool)

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.

blurTools()

toolsView.blurTools()

Stop focusing any tools within this tools view.

This function reverses the effect of the toolsView.focusTool function applied to any tool in this tools view.

focusTool()

toolsView.focusTool(tool)

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 the toolsView.blurTools function.

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.

Options

layer

layer - the stacking context of the tools view.

"tools" (default)Render the tools in front of all the cells.
nullRender the tools above the cell. It can be hidden by a cell with a higher z index.

z

z - the stacking order (z-index) of the tools view in the given stacking context.

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub