elementTools

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 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. These tools can be used as they are or extended to create custom tools. You can find more information on how to use element tools in the correspondent learn section.

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:

import { elementTools } from '@joint/core';

const boundaryTool = new elementTools.Boundary({
    focusOpacity: 0.5
});

Boundary

The Boundary element tool renders a rectangular border to show the bounding box of the element. It accepts a few additional arguments, which can be passed as an object to the element tool constructor:

Button

The Button element tool allows you to have a custom button rendered at a given position above the element. It accepts a few additional arguments, which can be passed as an object to the element tool constructor:

Connect

The Connect tool allows the user to create links in a drag & drop fashion. The tool extends the Button tool and accepts additional arguments, which can be passed as an object to the connect tool constructor:

Control

The Control element tool is an abstract class which allows you to build tools to control the look or shape of an element by simply dragging a UI handle. It accepts a few additional arguments, which can be passed as an object to the element tool constructor:

HoverConnect

The HoverConnect tool allows the user to create links from elements in a drag & drop fashion. The tool extends the Connect tool. The difference is that the button appears along the invisible track path (in the shape defined by trackPath) at the point where the user moves the mouse over the track. It accepts additional arguments, which can be passed as an object to the hover connect tool constructor:

RecordScrollbar

The RecordScrollbar element tool renders a scrollbar thumb on a standard.Record shape. The scrollbar is not visible if the record's size is large enough to show all items.

Remove

The Remove element tool renders a remove button at a given position above the element. It accepts a few additional arguments, which can be passed as an object to the element tool constructor:

SwimlaneBoundary

The SwimlaneBoundary element tool renders a rectangular border to show the bounding box of a bpmn2.Pool and bpmn2.HeaderedPool pool lane. Learn more in the API reference.

SwimlaneTransform

The SwimlaneTransform element tool allows you to resize lanes in bpmn2.Pool or bpmn2.HeaderedPool shape, from the UI. Learn more in the API reference.