Problem beim Hinzufügen von Label, wenn der Connector-Typ in jsplumb definiert ist

Question

Ich benutze instance.bind ("Verbindung", Funktion (connInfo) {}), um eine Verbindung mit jsplumb zu erstellen. Während der Verbindung möchte ich den Verbindungstyp bearbeiten und der Verbindung ein Etikett hinzufügen. Ich kann entweder eine Beschriftung hinzufügen oder den Verbindungstyp bearbeiten, aber nicht beides. Kann mir jemand helfen, dieses Problem zu beheben?

js Block:

instance.bind("connection", function (connInfo) { 
// listens for connection anywhere on topology 
    var sourceId = connInfo.sourceId; 
    var targetId = connInfo.targetId; 

    if (sourceId == targetId) { 
    // to edit connector type 
    connInfo.connection.setConnector([ "Flowchart", { stub:20, gap: 10, cornerRadius: 10} ]);  
    // To add label.   
    connInfo.connection.getOverlay("sourceLabel").setLabel("bar"); 
    console.log(connInfo); 

    } 

Answer 1

Sie könnten Stecker Stil und Label eingestellt, während Endpunkte wie folgt ergänzt:

  jsPlumb.addEndpoint($(".yourselector"), { 
       anchor: "Right", 
       isSource:true, 
       isTarget:false, 
       connector:"Bezier", 
       endpoint: "Dot", 
       paintStyle:{ fillStyle:"white", outlineColor:"blue", 
          outlineWidth:1, radius:8 }, 
       hoverPaintStyle:{ fillStyle:"lightblue" }, 
       connectorStyle:{ strokeStyle:"grey", lineWidth:3 }, 
       connectorHoverStyle:{ lineWidth:3 }, 
       overlays:[ [ "Label", {label:"FOO", id:"label"}] ] 
      }); 

Ihr Anschluss wird so formatiert werden, wenn Sie es von der Quelle Endpunkt manuell ziehen. Sie können für verschiedene Endpunkte unterschiedliche Stile festlegen.