change:source event in JointJS

Question

Merry Christmas, everyone!

I want to do something when the source element or target element of a joint.dia.Link is changed. Firstly I tried to put the code in the callback function of 'change:source' and 'change:target' events. However, it turns out that those callback functions are called as soon as the link's position changes, instead of being called when the source element or target element changes. Then I tried to put the code in the LinkView.pointup() function, by adding a tag, which is set in the callback function of 'change:source' and 'change:target' events, to indicate the changed element. The resulted code looks like this:

link.on('change:source', function(){this.src_changed = true;});
link.on('change:target', function(){this.dest_changed = true;});

joint.shapes.custom.ModelLink = joint.dia.Link.extend({
     defaults: joint.util.deepSupplement({
        type: 'custom.ModelLink',
    }, joint.dia.Link.prototype.defaults)
});

joint.shapes.custom.ModelLinkView = joint.dia.LinkView.extend({
    pointerdown: function () {
        joint.dia.LinkView.prototype.pointerdown.apply(this, arguments);
    },
    pointermove: function () {
        joint.dia.LinkView.prototype.pointermove.apply(this, arguments);
    },
    pointerup: function (evt, x, y) {
        var link = this.model;
        if(link.src_changed) { // do something}
        if(link.dest_changed) {// do something}
        joint.dia.LinkView.prototype.pointerup.apply(this, arguments);
    }
});

However, I found src_changed and dest_changed are both set to true sometimes when I am just dragging one end of the link. Why does this happen? How can I fix this? Or any new approach to do some response to the change of source element or target element?

Besides, After I reset the events of joint.shapes.uml.State using model.set('events', events), the text doesnot change on the graph? How can I refresh graph to show the changed state element?

Thanks very much!

Answer 1

The change:source and change:target events are indeed triggered also when the position of the arrowheads changes. In general, the source and target of a link can either be a point (an object with x and y properties) or an element (and in the near future also a link) - an object with id property pointing to the linked element. If you're only interested in source/target being an element, you can just check in your handlers for the change:source and change:target events whether the source/target of the link contains the id property:

if (this.get('source').id) { /*... do something ...*/ }