CODEWITHSUNDEEP
jointjs
kirypto
kirypto

Reputation: 139

Jointjs When dragging a link target, have it call a custom function

I would like to override the default link behaviour. I have a function that deals with connecting a link to a target following a certain set of rules. For example, LinkTypeA will can only connect to ObjectType1 and ObjectType2, and LinkTypeB will only connect with ObjectType3.

In the case that the user is creating LinkTypeA, and terminates when clicking on ObjectType3, a point (x, y) is created for the links target.

This is because ObjectType1 and ObjectType2 are often embedded above a ObjectType3.

I have that behaviour working correctly, but when you grab a links end and drag it, when letting go, it runs an internal function instead, which allows it to connect to ObjectType3.

I would like to override this and have it call my custom function. How can I do this?

Upvotes: 3

Views: 690

Answers (1)

vt.
vt.

Reputation: 1428

linkValidation function should handle it even if the link is being dragged. In the example below only shapes with a same type can be linked (rect with rect, circle with circle).

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 650,
    height: 400,
    model: graph,
    linkPinning: false,
    validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
        var source = cellViewS.model.get('type');
        var target = cellViewT.model.get('type');

        return source && source === target;
    }
});

https://jsfiddle.net/vtalas/65uteht9/

Upvotes: 4

Related Questions