如何将 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

传递给自定义叠加层中的 create 函数的 component 参数是对基础连接的引用。您可以使用它来执行您需要将边与其输入框相关联的操作，例如通过将对存储在数组中，如下所示：

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

如何将 JSPlumb 覆盖与其连接相关联？

How to associate JSPlumb overlay with its connection?

jquery

graph

jsplumb