Skip to main content

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:

magnetstring
SVGElement
(view: dia.LinkView) => SVGElement

Choose the source magnet of the link view which the new link should be connected to.

'body' // as a string Selector
linkView.el // as an SVGElement
(linkView) => linkView.el // as a function

The callback function is expected to have the signature function(linkView, toolView) where linkView is the link view with the tool attached. The connect button view is available inside the function as this and as the last parameter.

Example:

const connectButton = new joint.elementTools.Connect({
    x: '100%',
    y: '0%',
    offset: { x: -5, y: -5 },
    magnet: 'body'
});