Question

当连接端口两个端口时，我想获取port1的ID和port2的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;');
        }
    });

Answer 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);
}

Answer 2

使用图表＆＃34;添加＆＃34; event不会帮助你，因为如果链接是可拖动的，当你添加它时，你只会拥有源ID和端口，而不是目标的id和端口。

事件＆＃34;变更：来源＆＃34;和＆＃34;改变：目标＆＃34;当您删除链接时也不会被调用，并且它们的缺点是在拖动链接时会被多次调用。

我建议您使用论文＆＃34; link：connect＆＃34;事件和图表＆＃34;删除＆＃34;事件如下：

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);
    }
}

还有论文＆＃34;链接：disconnect＆＃34;与＆＃34; link：connect＆＃34;具有相同签名的事件如果您还想在链接断开时执行某些操作，不仅要删除。

JointJS - 处理链接（加入，删除）

2 个答案: