jsplumb.connect()使用现有的端点而不是创建新的。

Question

我对jsPlumb.connect函数有一个问题。我有一个应用程序，用户可以添加

元素，这些元素具有jsPlumb端点。用户可以将所有这些元素连接在一起。图表可以以JSON格式保存在MySQL数据库中。

当用户从数据库加载图表时，我可以使用我的addElement和addEndpoint函数重新创建元素和端点。但是，当我调用jsPlumb Connect方法（仅用于从数据库创建图表）来绘制连接线时，它会为每个连接的元素创建一个新的端点。

如何防止每次调用connect方法时创建新的端点？

- oneandonlycore

Answer 1

在添加端点时，请确保基于其所放置的元素为其分配基于uuid的标识符。您可以在jsPlumb中连接两个端点，如下：

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

- MrNobody007

---

有没有办法在提供锚点位置的同时自动计算端点？如果可能的话，我不想保存端点的UUID。或者是否有一个查询可以使用，从元素的ID获取端点UUID和类型？ - coding_idiot

@coding_idiot http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.getUuid - MrNobody007

非常感谢，但它可能也会返回null，并且没有setter。 - coding_idiot

非常感谢。看起来它从不返回空白，除非发生非常罕见的情况（似乎不是我的情况）。 - coding_idiot

Answer 2

这是一个相当老的问题，但我想分享一种不需要使用UUID的方法：

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

请注意，当您每个节点只有1个端点时，此方法效果最佳。但是，如果您可以通过过滤getEndpoints返回的数组来查找所需的端点，则这也可以起作用。

- TurnipEntropy

Answer 3

尽管这是一个很久以前就被问过的问题，但它仍然占据了我大量的时间。对于jsplumb 2.5版本，使用uuids的jsplumb.connect()可能会导致错误：无法找到源。为了解决这个问题，应该使用jsPlumb实例(instance.connect())的作用域。

- Eisus

Answer 4

在添加端点时，请确保根据其所放置的元素为其分配Uuid。您可以在jsPlumb中连接两个端点，如下所示：

<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>

- Asad

Answer 5

我在 Stack Overflow 论坛之外直接向作者解决了这个问题。

正确格式：

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

- pummy