更改:JointJS中的源事件 [英] change:source event in JointJS
问题描述
圣诞快乐,大家!
如果joint.dia.Link的源元素或目标元素被更改,我想做一些事情。首先我试图将代码放在change:source和change:target事件的回调函数中。然而,事实证明,只要链接的位置发生变化,就会调用这些回调函数,而不是在源元素或目标元素发生更改时被调用。然后,我尝试将代码放在LinkView.pointup()函数中,通过添加一个在'change:source'和'change:target'事件的回调函数中设置的标记,以指示更改的元素。结果代码如下所示:
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);
}
});
然而,我发现src_changed和dest_changed都设置为true有时当我只是拖动一端链接。为什么会这样呢?如何解决这个问题?或者是对源元素或目标元素的更改做出一些回应的新方法?
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?
此外,在我重新设置了joint.shapes.uml.State的事件后,使用模型.set('events',events),文本不会在图上变化?如何刷新图形以显示已更改的状态元素?
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?
非常感谢!
推荐答案
change:source
和 change:target
事件确实也触发了箭头更改。一般来说,链接的源
和 target
可以是一个点(一个 x
和 y
属性)或一个元素(在不久的将来也是一个链接) - 一个对象,具有 id
属性指向链接的元素。如果您只对 source
/ target
感兴趣,您可以检查您的处理程序的更改:源
和更改:目标
事件是否源
目标
链接包含 id
属性:
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 ... * /}
这篇关于更改:JointJS中的源事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!