Problème d'ajout d'étiquette lorsque le type de connecteur est défini dans jsplumb

Question

J'utilise instance.bind ("connection", function (connInfo) {}) pour créer une connexion à l'aide de jsplumb. Pendant la connexion je veux éditer le type de connecteur et ajouter l'étiquette à la connexion. Je suis capable d'ajouter une étiquette ou d'éditer le type de connecteur mais pas les deux. Quelqu'un peut-il m'aider à résoudre ce problème?

bloc de:

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

vous pouvez définir le style de connecteur et l'étiquette tout en ajoutant paramètres comme ceci:

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

Votre connecteur sera formaté comme celui-ci lorsque vous le faites glisser de point d'extrémité source manuellement. Vous pouvez définir différents styles pour différents points de terminaison.