Prevent two connections from sharing the same anchor - jsplumb

Question

I am using jsPlumb to allow users to build graphs. I allow users to drag these elements around, so I'm using a collection of anchors for each endpoint, letting jsPlumb pick the "best" anchor from that collection for me when connections are made. The problem I'm having is that I can potentially have up to a dozen connections coming from any given endpoint, so these connections will become visually distracting when many end up choosing the same "best" anchor - creating an appearance of congestion in the graph. To resolve this problem, I would like to tell jsPlumb to restrict any two connections from sharing the same anchor on an endpoint.
The easiest way to visualize what I hope to achieve is in this demo:
https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html
Out of the box, none of the connections in this demo will overlap.
If you read the source code, you can see this is done by having a 'source' set of anchors and a 'target' set of anchors and connections are exclusively made from the first set of anchors to the second. However, as I stated above, I can have up to a dozen types of connections that can connect from or to my endpoints, so I do not want to have to specify a unique set of anchors for each of them. That would restrict the amount of spacing I can leave between each potential anchor along the endpoint's edge, since each set of anchors could not intersect with any other set of anchors.
Is there a way to tell jsPlumb that I don't want connections to share the same anchors?

Answer 1

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);
}
});
A concise one with the updated API of jsPlumb.
See if there is another connection with same source & target exists, if yes then detach the newly created one. (jsPlumb ver. 1.5.5 - 1.6.1)
Update:
Use jsPlumb.deleteConnection instead of jsPlumb.detach, in versions after than 2.4

Answer 2

Is there a way to tell jsPlumb that I don't want connections to share
the same anchors?
Demo with JS Fiddle
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;
}
});
You can connect Pink with Green. Pink with Pink and Green with Pink and Green with Green not allowed.