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

Posted 2023-02-15

【中文标题】jsplumb.connect() 使用现有端点而不是创建新端点

【英文标题】：jsplumb.connect() use existing endpoints instead of creating new

【发布时间】：2014-04-10 06:28:37

【问题描述】：

我对 jsPlumb.connect 函数有疑问。我有一个应用程序，用户可以在其中添加<div> 元素，它获取 jsPlumb 端点。用户可以将所有这些元素相互连接。图表可以保存在 mysql 数据库中（JSON 格式）。

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

所以我的问题是，如何防止每次调用 connect 方法时创建新端点？

【参考方案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"] );
);

【讨论】：

有什么方法可以在提供锚点位置的同时自动计算端点？如果可能的话，我不想保存端点的 UUID。或者是否有一个查询可以用来获取端点 UUID 并从元素的 id 键入？

@coding_idiot jsplumb.org/apidocs/files/…

非常感谢，但它也可能返回 null 并且没有设置器。

非常感谢。它似乎永远不会返回空白，除非非常罕见（似乎不是我的情况）。

【参考方案2】：

在添加端点时，请确保您还根据放置它​​的元素为其分配 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>

【参考方案3】：

我在 SO 论坛之外从作者本人那里解决了这个问题。

正确的格式：

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

【参考方案4】：

虽然这是很久以前提出的问题，但它仍然消耗了我很多时间。对于 2.5 版的 jsplumb，使用 uuid 的 jsplumb.connect() 可能会导致错误：找不到源。要解决这个问题，应该使用jsPlumb instance(instance.connect()) 的范围。

【参考方案5】：

这是一个非常古老的问题，但我想我会分享一种不涉及使用 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 返回的数组以找到所需的端点，这也可以。