How to give JointJS elements a remove tool?

Question

In JointJS, links come with a handy responsive tool for removing links (when you hover over the link, an \"x\" appears, and clicking it removes the link). Elements, on the

Answer 1

In my project I define a custom shape - toolElement - that encapsulates this behaviour and then extend this with other custom shapes as required.

Full disclosure: This technique leans heavily on the jointjs code for links - I just adapted it :o)

Here is a jsfiddle showing it working:

http://jsfiddle.net/kj4bqczd/3/

The toolElement is defined like this:

joint.shapes.tm.toolElement = joint.shapes.basic.Generic.extend({

    toolMarkup: ['',
        '',
        '',
        '',
        '',
        ''].join(''),

    defaults: joint.util.deepSupplement({
        attrs: {
            text: { 'font-weight': 400, 'font-size': 'small', fill: 'black', 'text-anchor': 'middle', 'ref-x': .5, 'ref-y': .5, 'y-alignment': 'middle' },
        },
    }, joint.shapes.basic.Generic.prototype.defaults)

});

You can add more markup if you need other tools as well as the remove button.

The remove behaviour is encapsulated in a custom view:

joint.shapes.tm.ToolElementView = joint.dia.ElementView.extend({

    initialize: function() {

        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
    },

    render: function () {

        joint.dia.ElementView.prototype.render.apply(this, arguments);

        this.renderTools();
        this.update();

        return this;
    },

    renderTools: function () {

        var toolMarkup = this.model.toolMarkup || this.model.get('toolMarkup');

        if (toolMarkup) {

            var nodes = V(toolMarkup);
            V(this.el).append(nodes);

        }

        return this;
    },

    pointerclick: function (evt, x, y) {

        this._dx = x;
        this._dy = y;
        this._action = '';

        var className = evt.target.parentNode.getAttribute('class');

        switch (className) {

            case 'element-tool-remove':
                this.model.remove();
                return;
                break;

            default:
        }

        joint.dia.CellView.prototype.pointerclick.apply(this, arguments);
    },
});

You can then extend these to make your custom shapes. In my project, I am doing data flow diagrams and here is the definition of the Process shape:

joint.shapes.tm.Process = joint.shapes.tm.toolElement.extend({

    markup: '