JointJS - 處理鏈接（加入，刪除）

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。 然后獲取鏈接連接它們的端口。 這是一個例子： 元素之間的鏈接

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

使用圖形的“添加”事件對您沒有幫助，因為如果鏈接是可拖動的，當您添加它時，您將只擁有源ID和端口，但不具有目標的id和端口。

當您刪除鏈接時，將不會調用事件“change：source”和“change：target”，並且它們還有一個缺點，即在拖動鏈接時會多次調用它們。

我建議您使用文章“link：connect”事件和圖形的“刪除”事件，如下所示：

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：disconnect”事件與“link：connect”具有相同的簽名，以防您在鏈接斷開時也想要執行某些操作，而不僅僅是刪除了。