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>
Instead of repaintEverything()
, revalidating the target element updates the continuous anchors properly:
jsPlumbInstance.revalidate(target);