jsplumb.connect () использовать существующие конечные точки вместо создания новых

У меня проблема с jsPlumb.функция подключения. У меня есть приложение, где пользователь может добавить <div> элементы, которые получают конечные точки jsPlumb. Пользователь может соединить все эти элементы друг с другом. Диаграмма может быть сохранена в базе данных MySQL (в формате JSON).

когда пользователь загружает диаграмму из базы данных, я могу воссоздать элементы и конечные точки с помощью моего addElement и моей функции addEndpoint. Но когда я вызываю метод Jsplumb Connect (который просто вызывается для создание диаграммы из базы данных), чтобы нарисовать линии соединения, он создает новую точку enpoint для каждого подключенного элемента

Итак, мой вопрос, как я могу предотвратить создание новых конечных точек каждый раз, когда я вызываю метод Connect ?

9
connect endpoint jquery jsplumb

4 ответов

во время добавления конечных точек убедитесь, что вы также назначаете их 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"] });
});
12

хотя это вопрос, который был задан давно, это все еще занимает у меня много времени. Для версии 2.5 jsplumb, jsplumb.connect () использование uuids может привести к ошибке: не удается найти источник. Чтобы решить, сфера jsPlumb экземпляра(экземпляра.connect ()) следует использовать.

1

во время добавления конечных точек убедитесь, что вы также назначаете им 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>
0

у меня вопрос решился сам автор за такой форум.

неверный формат:

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