jointjs element mouse click event

Question

I'm using jointjs to draw graphs.

I'm wondering how to listen to the mouse click event on an element? I found on http://www.jointjs.com/api#joint.dia.Element, there is only change:position option but no onclick option lol.

There's only cell:pointerclick option on the whole paper instead of the single element.

How can I achieve only listen to mouse click element on the single element? (Say I want to resize the paper after the click) Thanks!

Answer 1

You can use the pointerclick event to capture the click events on elements. The view is passed as a parameter to the function and you can obtain the model of the view through cellView.model

paper.on('cell:pointerclick', function (cellView) {
   // your logic goes here
);

Answer 2

A way to do that it's using classes and javascript events, look:

First, you assign a class to the joint js element via markup , for example a class called 'myclass' in this case:

var rect1 = new joint.shapes.basic.Rect({
markup: '<g class="rotatable"><g class="scalable"><image id="myrect1"  class="myclass"/></g><text/></g>',
    size: { width: 30, height: 73.2 },
    attrs: { 
        rect: { fill: bgcolor1,'stroke-width': 0 },

    }
});

Then, you capture the click event on that class objects via javascript, not in the canvas but in the document :

$(document).on('click', '.myclass', function () {
        //alert('yayy!');
});

Hope it helps !