커넥터 유형이 jsplumb에 정의 된 경우 레이블을 추가 할 때의 문제

Question

jsplumb을 사용하여 연결을 생성하기 위해 instance.bind ("connection", function (connInfo) {})를 사용하고 있습니다. 연결 중에 커넥터 유형을 편집하고 연결에 레이블을 추가하려고합니다. 라벨을 추가하거나 커넥터 유형을 편집 할 수 있지만 둘 다 수정할 수는 없습니다. 누구든지이 문제를 해결할 수 있습니까?

JS 블록이 같은 엔드 포인트를 추가하는 동안

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

당신은 커넥터의 스타일과 라벨을 설정할 수 있습니다 :

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

귀하의 커넥터는 다음과 같이 포맷됩니다 수동으로 소스 엔드 포인트에서 드래그 할 때. 다른 엔드 포인트에 대해 다른 스타일을 설정할 수 있습니다.