更改：JointJS中的源事件

本文介绍了更改：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 ... * /}