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?

MrNobody007 · Accepted Answer · 2018-01-03T05:54:00.137

14

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"] });
});

edited Jan 03 '18 at 05:54

answered Mar 08 '14 at 03:08

MrNobody007

1,827
11
32

1

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 ? – coding_idiot Apr 09 '14 at 06:08
@coding_idiot http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.getUuid – MrNobody007 Apr 09 '14 at 06:16
thanks a lot, but it might return null too and there's no setter for it. – coding_idiot Apr 09 '14 at 06:18
thanks a lot. It seems it never returns blank, unless something very rare (not my case it seems). – coding_idiot Apr 09 '14 at 07:13

score 2 · Answer 2 · answered Apr 14 '20 at 22:42

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.

score 1 · Answer 3 · answered May 03 '18 at 07:38

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.

score 0 · Answer 4 · answered Jan 23 '17 at 08:21

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>

score -1 · Answer 5 · answered Jan 23 '17 at 12:03

-1

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 
}

answered Jan 23 '17 at 12:03

pummy

1
1

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

5 Answers5