jsPlumb: Как сделать переход от разделения к конечной точке?

У меня есть динамически созданные узлы (библиотекой yui3). Все узлы создаются как дочерние элементы того же родителя, что и html-элементы.

Однако с точки зрения дизайна некоторые узлы должны быть конечными точками других элементов.

Для отрисовки соединений использую библиотеку jsPlumb.

Пример.

HTML-код:

<html>
 <body>
  <div class="window" style="height: 150; width: 100; top: 50; left:50">parent</div>
  <div class="ep" style="height: 10; width: 10; top: 55; left:45">1</div>
  <div class="ep" style="height: 10; width: 10; top: 70; left:45">2</div>
 </body>
</html>

Я хочу, чтобы элементы «1» и «2» были конечными точками «родительского» элемента.

Все элементы должны быть перетаскиваемыми, а «дочерние» разделы должны перемещаться вместе с «родительскими» разделами.

Как решить эту проблему?

Спасибо за внимание, Евгений.

Вопросы:

  • как сделать существующее разделение конечной точкой другого элемента (узла)?

  • как перетащить список элементов, перетащив «родительский» элемент?

  • Решение с использованием yui3 также будет очень полезным.

Мое исследование:

  • В библиотеке jsPlumb есть функция addEndpoint. Но эта функция создает новый узел для конечной точки. Я не понимаю подход к рисованию конечной точки с моим дизайном (т.е. не стандартные прямоугольники или круги) и правильный подход к настройке атрибутов некоторых элементов.

  • Я попытался сделать иерархический html-документ, но в этом случае возникла следующая проблема: соединения, прорисованные на дочернем слое. После нескольких недель попыток исправить эту ошибку я выбрал текущую версию.


javascript endpoint connection jsplumb yui3
person user3928155    schedule 11.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Цитата из вопроса

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

Документы – http://jsplumbtoolkit.com/doc/endpoints.html

Существуют различные способы настройки конечной точки, конечно, с использованием вашего собственного html-элемента, это будет проблематично, и я не вижу веских причин для этого (лучше иметь материал в контексте jsPlumb, так как есть много обработчиков/ события/запросы, о которых нужно позаботиться). Вы можете настроить все, что касается конечной точки.

Демонстрации — http://jsplumbtoolkit.com/demo/

Если вы уже пробовали что-то, касающееся внешнего вида конечной точки, и это не сработало, сообщите нам об этом. ИМХО, возможность использовать изображение в качестве конечной точки подходит для всех вариантов использования.

Вот как удалить подключения и конечные точки:

jsPlumb.getConnections({
            //source: id (you can delete selectively by querying what you want)
        }).forEach(function (conn) {
             jsPlumb.detach(conn);
        });

jsPlumb.selectEndpoints({
            //source: id (you can delete selectively by querying what you want)
        }).each($.proxy(function (ele) {
            var uuid = ele.getUuid();
            jsPlumb.deleteEndpoint(uuid);
        }, this));

Есть также короткие руки, такие как:

jsPlumb.deleteEveryEndpoint();

jsPlumb.detachEveryConnection();
person coding_idiot    schedule 11.08.2014
comment
Привет. Спасибо за Ваш ответ. - person user3928155; 12.08.2014
comment
Такой подход (с yui3-узлами в качестве конечных точек) мотивирован необходимостью использовать tabview для отрисовки нескольких графиков в каком-то проекте (controlflow и dataflow, если вам это удобно). Когда я меняю вкладки после изменения графа на вкладке 1 (вкладка 2), у меня возникает проблема с отрисовкой стандартных конечных точек на вкладке 2 (вкладка 1), которая была создана конструктором конечных точек jsPlumb. ‹br/› Я знаю о демонстрациях jsPlumb и использую их =) - person user3928155; 12.08.2014
comment
Я не пользуюсь YUI, но быстро просмотрел табвью, так что все, что вам нужно, это возможность рисовать графики на разных вкладках? У меня есть очень похожая вещь, работающая в jquery. Почему бы не создать jsfiddle, демонстрирующий проблему с вкладками, может быть, я могу помочь лучше, чем. - person coding_idiot; 12.08.2014
comment
К сожалению, у меня большой проект без свободной лицензии. Следующая проблема с вкладкой: если я программно удаляю узел на неактивной вкладке, все конечные точки перемещаются в левый верхний угол родительского раздела. При перемещении элементов с конечными точками они имеют правильное положение, но только после перетаскивания... Извините за плохой английский =) - person user3928155; 12.08.2014
comment
Зачем удалять узлы без удаления конечных точек? Если вы хотите вообще удалить узлы, удалите их полностью (соединения, конечные точки, за которыми следуют узлы). - person coding_idiot; 12.08.2014
comment
Спасибо за помощь) Возможно, мой предыдущий комментарий неверен =) Конечно, удаление узла позволяет удалить соответствующую конечную точку и соединения. Проблема с отрисовкой других конечных точек! - person user3928155; 12.08.2014