防止两个连接共享同一个锚

Question

我使用jsPlumb允许用户构建图形。我允许用户拖动这些元素，所以我为每个endpoint使用锚集合，让jsPlumb在建立连接时从该集合中为我选择“最佳”锚。我遇到的问题是，我可能有多达十几个连接来自任何给定的endpoint，所以当许多人最终选择相同的“最佳”锚点时，这些连接将在视觉上分散注意力——在图中造成拥塞的外观。为了解决这个问题，我想告诉jsPlumb限制任何两个连接在endpoint上共享同一个锚。

我希望实现的最简单的可视化方法是在本演示中：https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html

开箱即用，本演示中的所有连接都不会重叠。

如果您阅读源代码，您可以看到这是通过拥有一组“源”锚和一组“目标”锚来完成的，并且从第一组锚到第二组锚的连接是专门建立的。但是，正如我上面所说的，我可以有多达十几种类型的连接，可以从我的endpoint连接或连接到我的endpoint，所以我不想为每个endpoint指定一组唯一的锚。这将限制沿着endpoint边缘的每个潜在锚点之间的行间距，因为每个锚点集不能与任何其他锚点集相交。

有没有办法告诉jsPlumb我不希望连接共享相同的锚？

Answer 1

有没有办法告诉jsPlumb我不希望连接共享相同的锚？

JS小提琴演示

JQuery

jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
    var DuplicateCount = 0;
    var allConn = jsPlumb.getAllConnections();
    var length = allConn["green dot"].length;
    for (var i = 0; i < length; i++) {
        if (allConn["green dot"][i].targetId ==               
                                         CurrentConnection.connection.targetId) {
            DuplicateCount = DuplicateCount + 1;
        }
    }
    if (DuplicateCount > 1) {
        jsPlumb.detach(CurrentConnection.connection);
        return;
    } 
});

你可以把粉红色和绿色连接起来。粉色与粉色、绿色与粉色、绿色与绿色不允许。

Answer 2

jsPlumb.bind('connection',function(info){
 var con=info.connection;
 var arr=jsPlumb.select({source:con.sourceId,target:con.targetId});
 if(arr.length>1){
    jsPlumb.detach(con);
 }
});

一个简洁的，更新了jsPlumb的API。

查看是否存在具有相同源的另一个连接

更新：

在2.4之后的版本中使用jsPlumb.delete连接而不是jsPlumb.detach