Как связать наложение JSPlumb с его соединением?

Question

В настоящее время я создаю редактор графиков для веб-приложений. Ожидается, что пользователь вводит строку для каждого соединения, сделанного в JsPlumb. Используя пользовательский оверлей, я могу позволить пользователю ввести строку. Я могу получить строку, но я понятия не имею, как связать ее с каждым ребром. Пример можно увидеть здесь в JsFiddle.

https://jsfiddle.net/biocalc/t7uskkvm/1/

КОД:

jsPlumb.ready(function() {  
var a = $("#a"); 
var b = $("#b"); 

var stateMachineConnector = { 
    connector:"Bezier", 
    paintStyle:{lineWidth:3,strokeStyle:"#056"}, 
    endpoint:"Blank", 
    anchor:"Continuous", 
    overlays:[[ "Arrow", { location: 0.7 } ], [ "Custom", { create:function(component) { 
       return $("<input class='edgeInput' type='text' placeholder='input' style='color:black;background:none;text-align:center;border:none'>1</input>");}, location: 0.4}]] 
}; 

    jsPlumb.connect({ 
     source:"a", 
     target:"b" 
    }, stateMachineConnector); 


jsPlumb.draggable($(".window")); 
jsPlumb.animate($("#b"), {"left": 50,"top": 300},{duration:"slow"}); 
jsPlumb.animate($("#a"), {"left": 250,"top": 100},{duration:"slow"}); 
}); 

Моя программа позволяет пользователям создавать несколько ребер, каждый со своим собственным полем ввода. Я не уверен, как динамически организовать данные, чтобы каждый ребро соответствовал ему.

Answer 1

Параметр component, переданный в функцию create в вашем пользовательском оверлее, является ссылкой на базовое соединение. Вы можете использовать это, чтобы делать то, что вам нужно, чтобы связать края с их полями ввода, например, путем сохранения пар в массиве, следующим образом:

var connectionsToInputs = []; 

var stateMachineConnector = { 
connector:"Bezier", 
paintStyle:{lineWidth:3,strokeStyle:"#056"}, 
endpoint:"Blank", 
anchor:"Continuous", 
overlays:[[ "Arrow", { location: 0.7 } ], [ "Custom", { 
    create:function(component) { 
     var el = $("<input class='edgeInput' type='text' placeholder='input' style='color:black;background:none;text-align:center;border:none'>1</input>"); 
     connectionsToInputs.push([component, el]); 
     return el; 
    }, 
location: 0.4}]] 
};