JointJS ClickableView

by Heena Mahour

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 class="graphModellingWindow">
Drag elements here
</div>
<div id="paper" />

<span style="opacity:0.5;">put dimension values here</span>
<div id="message" />

CSS

.graphModellingWindow {
  border: 1px solid gray;
  width: 500px;
  height: 200px;
  opacity: 0.5;
  
}
#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: 500,
    height: 300,
    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: 'dimval1'
        }
    }
});
var c = new joint.shapes.basic.Circle({
    position: {
        x: 250,
        y: 50
    },
    size: {
        width: 50,
        height: 50
    },
    attrs: {
        text: {
            text: 'dimval2'
        }
    }
});
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!');
});