Search code examples
jsplumb

Jsplumb drawn wrong endpoint of continuous anchor with multiple connections


I'm trying to connect multiple endpoint with multiple sources

In this example, 'pointAB' should be connected with two sources but 'pointA' does

it seems that the actual endpoint instances are connected correctly but drawing wrong

https://jsfiddle.net/ggpid/qfz8b5s9/90/

var jsPlumbInstance = jsPlumb.getInstance();
jsPlumbInstance.ready(function () {
    jsPlumbInstance.addEndpoint(target, getEndPoint('pointAB'));
  jsPlumbInstance.addEndpoint(target, getEndPoint('pointA'));
  jsPlumbInstance.makeTarget(srcA, {
    anchor: "Continuous",
  });
  jsPlumbInstance.makeTarget(srcB, {
    anchor: "Continuous",
  });
  jsPlumbInstance.connect({source: jsPlumbInstance.getEndpoint('pointAB'), target: srcA});
  jsPlumbInstance.connect({source: jsPlumbInstance.getEndpoint('pointAB'), target: srcB});
  jsPlumbInstance.connect({source: jsPlumbInstance.getEndpoint('pointA'), target: srcB});
  jsPlumbInstance.repaintEverything();
});

function getEndPoint(uuid){ 
    return {
      uuid: uuid,
      endpoint: ["Rectangle", {width:50, height:15}],
      isSource: true,
      isTarget: false,
      maxConnections: -1,
      anchor: ["Continuous", { faces:[ "left", "right" ] }],
      overlays : [["Label", {
        location: [0.5, 0.5],
        label: uuid,
        labelStyle:{
          color:'white',
          font: '10px sans-serif'
        }
      }]]
    };
  }
.target{
  width:100px;
  height:100px;
  background:red;
  position:absolute;
}
.source{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
}
#target{
  left:10px;
  top:10px;
}
#srcA{
  left:200px;
  top:10px;
}
#srcB{
  left:50px;
  top:200px;
}
.jtk-overlay{
  z-index:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.14.3/js/jsplumb.js"></script>
<div id="target" class="target"></div>
<div id="srcA" class="source"></div>
<div id="srcB" class="source"></div>


Solution

  • Instead of repaintEverything(), revalidating the target element updates the continuous anchors properly:

    jsPlumbInstance.revalidate(target);
    

    https://jsfiddle.net/f84vjm7p/