JointJS - 处理链接（加入、删除）答案

【问题标题】：JointJS - handle links (join, delete)JointJS - 处理链接（加入、删除）
【发布时间】：2017-03-17 14:03:18
【问题描述】：

端口连接两个端口时，我想获取端口1的ID和端口2的ID。例如，我从左侧连接 Yes，连接到另一侧的 No，我想获取 Yes Port 的 ID 和 No Port 的 ID。到目前为止，我已经尝试过：

this.graph.on('add', function(cell, collection, opt) {
 if (cell.isLink()) {
    console.log(cell.id);
 }
});

然而，我只获得了我点击的第一行（不是端口）的 ID。我还想在删除该行时获得相同的输出。

    this.graph.on('remove', function(cell, collection, opt) {
        if (cell.isLink()) {
            alert('link removed;');
        }
    });

【问题讨论】：

标签： javascript jointjs

【解决方案1】：

在 JointJS 中，元素中的端口没有 id。他们有端口名称（可能还有端口组），您可以做的是在要删除的链接上找到源和目标元素的 id。然后获取您的链接正在连接它们的端口。这是一个例子：Linking between elements

graph.on('change:source change:target', function(link) {
var sourcePort = link.get('source').port;
var sourceId = link.get('source').id;
var targetPort = link.get('target').port;
var targetId = link.get('target').id;

var m = [
    'The port <b>' + sourcePort,
    '</b> of element with ID <b>' + sourceId,
    '</b> is connected to port <b>' + targetPort,
    '</b> of elemnt with ID <b>' + targetId + '</b>'
].join('');

out(m);
});

function out(m) {
    $('#paper-link-out').html(m);
}

【讨论】：

【解决方案2】：

使用图形的“添加”事件对您没有帮助，因为如果链接是可拖动的，那么当您添加它时，您将只有源 id 和端口，而没有目标的 id 和端口。

“change:source”和“change:target”事件在你删除链接时也不会被调用，它们也有在拖动链接时被多次调用的缺点。

我建议你使用paper的“link:connect”事件和graph的“remove”事件如下：

this.paper.on("link:connect", function(linkView, evt, cellView, magnet, arrowhead) {
    logSourceTargetPorts(linkView.model);
}

this.graph.on("remove", function(cell, collection, opt) {
    if (cell.isLink()) {
        logSourceTargetPorts(cell);
    }
}

function logSourceTargetPorts(link) {
    var source = link.get('source'); 
    var target = link.get('target');
    if(source.port && target.port) {
        console.log("source and target ports: ", source.port, target.port);
    }
}

还有与“link:connect”具有相同签名的纸质“link:disconnect”事件，以防万一您还想在链接断开时执行某些操作，而不仅仅是删除。

【讨论】：