JointJS ClickableView

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.min.js"></script>
<div id="paper" />
<div id="message" />

CSS

#paper {
    border: 1px solid gray;
    float: left;
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
}
#message {
    position: fixed;
    top: 310px;
    left: 250px;
}

JavaScript

var ClickableView = joint.dia.ElementView.extend({
    pointerdown: function () {
        this._click = true;
        joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
    },
    pointermove: function () {
        this._click = false;
        joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
    },
    pointerup: function (evt, x, y) {
        if (this._click) {
            this.notify('cell:click', evt, x, y);
        } else {
            joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
        }
    }
});

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 5000,
    height: 3000,
    gridSize: 1,
    model: new joint.dia.Graph(),
    elementView: ClickableView
});

var r = new joint.shapes.basic.Rect({
    position: {
        x: 50,
        y: 50
    },
    size: {
        width: 120,
        height: 80
    },
    attrs: {
        text: {
            text: 'Rect'
        }
    }
});
var c = new joint.shapes.basic.Circle({
    position: {
        x: 250,
        y: 50
    },
    size: {
        width: 50,
        height: 50
    },
    attrs: {
        text: {
            text: 'Circle'
        }
    }
});
paper.model.addCells([r, c]);

/* paper.on('cell:click', function () {
    $('#message').text('click!');;
});
paper.on('cell:pointerup', function () {
    $('#message').text('pointerup!');
});
paper.on('blank:pointerup', function () {
    $('#message').text('blank!');
}); */

paper.on('blank:mousewheel', (event, x, y, delta) => {
    //const scale = paper.scale();
    console.log('hihyuj');
    //paper.scale(scale.sx + (delta * 0.01), scale.sy + (delta * 0.01));
  });