问题
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!
回答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 ...*/ }
来源:https://stackoverflow.com/questions/20769850/changesource-event-in-jointjs