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

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

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

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


jquery endpoint connect jsplumb
person oneandonlycore    schedule 07.03.2014    source источник

Ответы (5)


arrow_upward
13
arrow_downward

Во время добавления конечных точек убедитесь, что вы также назначаете их 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"] });
});
person MrNobody007    schedule 08.03.2014
comment
Есть ли способ, он может автоматически вычислять конечные точки, предоставляя места привязки? Я не хочу сохранять UUID конечных точек, если это возможно. Или есть запрос, который я могу использовать для получения UUID конечной точки и типа из идентификатора элемента? - person coding_idiot; 09.04.2014
comment
@coding_idiot jsplumb.org/ apidocs / files / - person MrNobody007; 09.04.2014
comment
Большое спасибо, но он тоже может вернуть null, и для него нет сеттера. - person coding_idiot; 09.04.2014
comment
большое спасибо. Кажется, он никогда не возвращается пустым, если только что-то очень редкое (похоже, не в моем случае). - person coding_idiot; 09.04.2014

arrow_upward
2
arrow_downward

Это действительно старый вопрос, но я решил, что поделюсь способом, который не требует использования 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, чтобы найти желаемую конечную точку, это также сработает.

person TurnipEntropy    schedule 14.04.2020

arrow_upward
1
arrow_downward

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

person Eisus    schedule 03.05.2018

arrow_upward
0
arrow_downward

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

arrow_upward
-1
arrow_downward

Я получил решение проблемы от самого автора за пределами форума SO.

Правильный формат:

  paintStyle: { 
 stroke:"blue", //renamed to "stroke" from "strokeStyle"
 strokeWidth:10 
}
person pummy    schedule 23.01.2017