CODEWITHSUNDEEP
javascripthtmljointjs
Kai Huang
Kai Huang

Reputation: 73

jointjs element mouse click event

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!

Upvotes: 2

Views: 3826

Answers (3)

jsanchezs
jsanchezs

Reputation: 2070

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 !

Upvotes: 4

Sajith Edirisinghe
Sajith Edirisinghe

Reputation: 1727

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
);

Upvotes: 4

vt.
vt.

Reputation: 1428

you need to listen on view not on the model. Trace all caught events on the element:

var a = new joint.shapes.basic.Rect({
    size: { width: 100, height: 100 },
    position: { x: 300, y: 300 }
}).addTo(graph);

paper.findViewByModel(a).on('all', function() {
    console.log(arguments);
});

https://jsfiddle.net/vtalas/0z6jyq70/

Upvotes: 2

Related Questions