Jsplumb绘制错误的多连接连续锚点端点

Question

我正在尝试将多个端点与多个源连接

在此示例中，'pointAB' 应连接两个源，但 'pointA' 会连接

实际端点实例似乎连接正确但绘制错误

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>

Answer 1

而不是 repaintEverything()，重新验证目标元素会正确更新连续锚点：

jsPlumbInstance.revalidate(target);

https://jsfiddle.net/f84vjm7p/

Jsplumb绘制错误的多连接连续锚点端点

Jsplumb drawn wrong endpoint of continuous anchor with multiple connections

jsplumb