oneandonlycore oneandonlycore - 1 month ago 21
jQuery Question

jsplumb.connect() use existing endpoints instead of creating new

I have an issue with the jsPlumb.connect function. I have an application where a user can add

<div>
elements, wich gets jsPlumb endpoints. The User cann connect all these elements with each other. The chart can be saved in a MySQL Database (in JSON Format).

When the User load a Chart from the database I can recreate the elements and endpoints with my addElement and my addEndpoint function. But when I call the jsPlumb Connect method (which is just called for the creation of the chart from the database), to draw the connection lines it creates a new enpoint for every connected element

so my question is, how can I prevent the creation of new Endpoints each time I call the connect method ?

Answer

At the time of adding endpoints make sure that you also assign them Uuid based on the element it is placed on. You can connect two endpoints in jsPlumb as:

jsPlumb.ready(function () {  
     var e0 = jsPlumb.addEndpoint("container0",{uuid:"ep0"}), //set your own uuid for endpoint to access later.
     e1 = jsPlumb.addEndpoint("container1",{uuid:"ep1"});  
     jsPlumb.connect({ uuids:[e0.getUuid(),e1.getUudi()] }); 
             // (or) 
     jsPlumb.connect({ uuids:["ep0","ep1"] });
});