Предотвращать совместное использование двух соединений одним и тем же якорем

Question

Я использую jsPlumb, чтобы пользователи могли создавать графики. Я разрешаю пользователям перетаскивать эти элементы вокруг, поэтому я использую набор якорей для каждой конечной точки, позволяя jsPlumb выбирать «лучший» якорь из этой коллекции для меня, когда делаются соединения. Проблема, с которой я сталкиваюсь, заключается в том, что у меня потенциально может быть до дюжины соединений, исходящих от любой конечной точки, поэтому эти соединения станут визуально отвлекающими, когда многие в конечном итоге выбирают один и тот же «лучший» якорь - создавая появление перегруженности на графике , Чтобы решить эту проблему, я хотел бы сообщить jsPlumb о том, чтобы ограничить любые два соединения от совместного использования одного и того же якоря на конечной точке.

Самый простой способ визуализировать то, что я надеюсь достичь в этой демонстрации: https://jsplumbtoolkit.com/community/demo/dynamicAnchors/index.html

Из коробки, ни один из соединений в этой демонстрации не будут перекрываться.

Если вы читаете исходный код, вы можете видеть, что это делается с помощью «источника» набора якорей и «целевого» набора якорей и соединений, которые сделаны исключительно из первого набора привязок ко второму. Однако, как я уже говорил выше, у меня может быть до дюжины типов соединений, которые могут подключаться с или до конечных точек, поэтому я не хочу указывать уникальный набор якорей для каждого из них. Это ограничило бы расстояние между ядром между каждым потенциальным якорем вдоль края конечной точки, так как каждый набор якорей не мог пересекаться с любым другим набором якорей.

Есть ли способ сказать jsPlumb, что я не хочу, чтобы соединения имели одни и те же привязки?

Answer 1

Есть ли способ сказать jsPlumb, что я не хочу соединение для обмена тех же якорей?

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

Вы можете подключить розовый с зеленым. Розовый с розовым и зеленым с розовым и зеленым с зеленым цветом не допускается.

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

Краткое описание с обновленным API jsPlumb.

Посмотрите, существует ли другое соединение с тем же источником & target существует, если да, то отсоедините вновь созданный. (. JsPlumb версия 1.5.5 - 1.6.1)

Update:

Использование jsPlumb.deleteConnection вместо jsPlumb.detach, в версиях после чем 2,4