Prevent two connections from sharing the same anchor

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?

@user200780 both of your solutions don't answer the question — julesbou, Apr 04 '17 at 07:27

score 4 · Answer 1 · edited Jan 08 '18 at 17:51

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

score 3 · Answer 2 · 2013-02-27T04:53:09.020

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.

Prevent two connections from sharing the same anchor

2 Answers2

Linked