Skip to main content

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:

trackWidthnumberThe thickness of the track path. The default is 15.
trackPathstring
(view: dia.ElementView) => string		The SVG list of Path Commands. It may contain calc expressions which are evaluated in the context of the related element view (or model when useModelGeometry is set to true). The default is 'M 0 0 H calc(w) V calc(h) H 0 Z' (a rectangle in size of the element).

Example:

const hoverButton = new joint.elementTools.HoverConnect({
    useModelGeometry: true,
    trackPath: (view) => view.model.attr(['body', 'd'])
});