JointJS - onConnect Link 事件

Question

我正在尝试创建一个板块，用户可以动态添加块并使用链接连接它们。类似于 这个 但是需要动态生成。

我正在使用 JointJs 框架，目前一切都按预期工作，但是我需要在用户连接两个块时显示一些信息。

我的问题是我找不到处理连接块时的事件。

我查看了 这个问题，但在我的示例中，我没有实例来附加事件。

你可以点击 这里 查看我的示例。

以下是如何将块添加到板上的方法。magnet: true 是让文本可连接的属性。我真的需要帮助找到处理连接时的事件。

 var rect = new joint.shapes.basic.newRect({
     position: { x: position, y: position },
     size: { width: 100, height: 40 },
     attrs: {
         rect: { 'stroke-width': '1',  stroke: 'black', rx: 3, ry: 3, fill: 'blue'},
         text: { text: 'Block', magnet: true,  }
     }
 });
 graph.addCell(rect);

我也查看了鼠标抬起事件和坐标，但是没有发现什么有用的信息...真的需要一些帮助。

- BFigueiredo

Answer 1

change:source和change:target事件（和单元格模型触发的所有其他事件一样）会传播到图形中，因此您不需要引用您的链接，可以执行以下操作：

graph.on('change:source change:target', function(link) {
    if (link.get('source').id && link.get('target').id) {
        // both ends of the link are connected.
    }
})

- dave

---

有没有一种方法可以避免没有目标节点的链接？ - user630522

Dave，只有在连接完全建立时才会触发此事件，但不会在其中一端被切断时触发。当建立或丢失连接时，但不是仅移动开放端时（如使用change：source未过滤的情况），获取事件的正确方法是什么？ - Joachim Breitner

您可以在paper.on('cell:pointerup blank:pointerup', handler)中做出反应，其中您可以丢弃所有没有设置source.id和target.id的链接。 - dave