JointJs - event onConnect Link

Question

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

Arrivederci

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

Bipolar

Does it exist a way to avoid link without target node? – Samples

dave, this will only fire when a connection is fully made, but not when one end of it is cut. What is the proper way of getting an event when a connection is made or lost, but not if an open end is just moved (as it would be the case with change:source unfiltered). – Ionize

You can react on paper.on('cell:pointerup blank:pointerup', handler) where you discard all links that do not have both source.id and target.id set. – Bipolar