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

Question

I have an issue with the jsPlumb.connect function. I have an application where a user can add <div> elements, which gets jsPlumb endpoints. The User can connect all these elements with each other. The chart can be saved in a MySQL Database (in JSON Format).

When the User loads a Chart from the database I can recreate the elements and endpoints with my addElement and addEndpoint functions. 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 endpoint for every connected element.

How can I prevent the creation of new Endpoints each time I call the connect method?

Nappy

Answer 1

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.getUuid()] }); 
             // (or) 
     jsPlumb.connect({ uuids:["ep0","ep1"] });
});

Cyrus

Is there any way, it can calculate end-points automatically while providing the anchor locations ? I don't want to save the UUIDs, of end-points if possible. Or is there a query I can use to get end-point UUIDs and type from id of element ? – Straightforward

@Straightforward jsplumb.org/apidocs/files/… – Cyrus

thanks a lot, but it might return null too and there's no setter for it. – Straightforward

thanks a lot. It seems it never returns blank, unless something very rare (not my case it seems). – Straightforward

Answer 2

This is a really old question, but figured I'd share a way that doesn't involve using UUIDs:

var endpoint1 = jsPlumb.getEndpoints("id of node1")[0];
var endpoint2 = jsPlumb.getEndpoints("id of node2")[0];
jsPlumb.connect({source: endpoint1, target: endpoint2});

Note that this works best when you have 1 endpoint per node, but if you can filter the array returned by getEndpoints to find the desired endpoint, this would work as well.

Grisham

Answer 3

Although it is a question that was asked long long ago, it still consumes me a lot of time. For version 2.5 of jsplumb, jsplumb.connect() using uuids may result in error: cannot find source. To solve it, the scope of jsPlumb instance(instance.connect()) should be used.

Spatiotemporal

Answer 4

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

<script type="text/javascript" src="Jquery\jq.js"></script>
<script type="text/javascript" src="Jquery\jq-ui.min.js"></script> 
<script type="text/javascript" src="jsPlumb-master\build\demo\js\jquery.jsPlumb-1.4.1-all-min.js"></script>

<div id="main">
<div id="block1" class="node">node 0</div>
<div id="block2" class="node">node 1</div>
<div id="block3" class="node">node 2</div>
<div id="block4" class="node">node 3</div> 
</div>

  <script type="text/javascript">

  var targetOption = {anchor:"TopCenter",
  maxConnections:-1,
  isSource:false,
  isTarget:true,
  endpoint:["Dot", {radius:8}],
  paintStyle:{fillStyle:"#66FF00"},
  setDragAllowedWhenFull:true}

  var sourceOption = {anchor:"BottomCenter",
  maxConnections:-1,
  isSource:true,
  isTarget:false,
  endpoint:["Dot", {radius:8}],
  paintStyle:{fillStyle:"#FFEF00"},
  setDragAllowedWhenFull:true}


   jsPlumb.bind("ready", function() {

  jsPlumb.addEndpoint('block1', targetOption);
  jsPlumb.addEndpoint('block1', sourceOption);

  jsPlumb.addEndpoint('block2', targetOption);
  jsPlumb.addEndpoint('block2', sourceOption);

  jsPlumb.addEndpoint('block3', targetOption);
  jsPlumb.addEndpoint('block3', sourceOption);

  jsPlumb.addEndpoint('block4', targetOption);
  jsPlumb.addEndpoint('block4', sourceOption);

  jsPlumb.draggable('block1');
  jsPlumb.draggable('block2');
  jsPlumb.draggable('block3');
  jsPlumb.draggable('block4'); 
  });

  </script>

Custodial

Answer 5

I got the issue resolved from the author himself outside of SO forum.

Correct format:

  paintStyle: { 
 stroke:"blue", //renamed to "stroke" from "strokeStyle"
 strokeWidth:10 
}

Lawhorn