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:

x	string | number	Use percentage strings (e.g. '40%') or calc() expression (e.g. 'calc(0.4 * w)') to position the button relatively to the element width/height. A number means distance from the top-left corner of the element. Default is 0.
y
rotate	boolean	Should the button rotate according to the element angle around the element center? Default is false.
offset	object	Additional offset of the button from the position defined by x and y. Default is { x: 0, y: 0 }.
action	function	What should happen when the user clicks the button? Default is undefined (no interaction). The callback function is expected to have the signature function(evt, elementView, buttonView) where evt is a DOM event. The element view is available inside the function as this; the element model is available as this.model.
markup	JSONMarkup	The markup of the button, provided in the JointJS JSON format. Default is undefined (no content).
scale	number	Scale the button up or down on a 2D plane. The default is 1.

Example of a useful custom info button:

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

const infoButton = new elementTools.Button({
    focusOpacity: 0.5,
    // top-right corner
    x: '100%',
    y: '0%'',
    offset: { x: -5, y: -5 },
    action: function(evt) {
        alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
    },
    markup: [{
        tagName: 'circle',
        selector: 'button',
        attributes: {
            'r': 7,
            'fill': '#001DFF',
            'cursor': 'pointer'
        }
    }, {
        tagName: 'path',
        selector: 'icon',
        attributes: {
            'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
            'fill': 'none',
            'stroke': '#FFFFFF',
            'stroke-width': 2,
            'pointer-events': 'none'
        }
    }]
});

The elementTools.Button class can also be extended, to create a reusable custom button type. Then, a new instance of the custom button type can be obtained by calling its constructor:

const InfoButton = elementTools.Button.extend({
    name: 'info-button',
    options: {
        focusOpacity: 0.5,
        distance: 60,
        action: function(evt) {
            alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
        },
        markup: [{
            tagName: 'circle',
            selector: 'button',
            attributes: {
                'r': 7,
                'fill': '#001DFF',
                'cursor': 'pointer'
            }
        }, {
            tagName: 'path',
            selector: 'icon',
            attributes: {
                'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
                'fill': 'none',
                'stroke': '#FFFFFF',
                'stroke-width': 2,
                'pointer-events': 'none'
            }
        }]
    }
});

const infoButton = new InfoButton();