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

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

• javascript
• jointjs

1 Answer 1

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.
    }
})