Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JointJs - event onConnect Link

I am trying to create a board where an user can dynamically add blocks and connect the blocks with links. (Something like this but dynamically) I'm using JointJs framework and till now everything is working as expected, but I need to show some info when the user connect two blocks. My problem is that I cant find an event to handle when connecting the blocks.

I looked in this question but in my example I do not have the link instance to attach the event.

Here you can see my example

And here is how the block are added to the board. the magnet: true in the text property is what makes the text connectable. I really need some help finding an event to handle when the link is connected.

 var rect = new joint.shapes.basic.newRect({
     position: { x: position, y: position },
     size: { width: 100, height: 40 },
     attrs: {
         rect: { 'stroke-width': '1',  stroke: 'black', rx: 3, ry: 3, fill: 'blue'},
         text: { text: 'Block', magnet: true,  }
     }
 });
 graph.addCell(rect);

I also looked to the mouseUp event and coordinates but came out with nothing.. I really appreciate some help

like image 634
BFigueiredo Avatar asked Nov 12 '14 09:11

BFigueiredo


1 Answers

The change:source and change:target events (as the all other events triggered by cell models) propagate to the graph so you don't need a reference to your links, you can do something like:

graph.on('change:source change:target', function(link) {
    if (link.get('source').id && link.get('target').id) {
        // both ends of the link are connected.
    }
})
like image 108
dave Avatar answered Oct 07 '22 00:10

dave