JsPlumb: как сделать соединители Flowchart избегать пересекающихся элементов?

Возможно ли, чтобы соединители jsPlumb Flowchart не пересекались со связанными элементами или указанными элементами (в примере: элементы с классом "item" )?

Поведение по умолчанию:

Желаемый результат:

Вот что я пробовал:

http://jsfiddle.net/CcfTD/1/

Отредактировано для уточнения

HTML

 <div id="root">
        <div class="item" id="item1">Item 1</div>
        <div class="item" id="item2">Item 2</div>
        <div class="item" id="item3">Item 3</div>
        <div class="item" id="item4">Item 4</div>
        <div class="item" id="item5">Item 5</div>
  </div>

JS

   jsPlumb.connect({
    source: $('#item2'),
    target: $('#item7'),
    anchors: [ "Continuous" ],
    connector:[ "Flowchart" ],
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    }
});

В основном, чтобы иметь механизм jsPlumb (SVG или холст), знать о соответствующих элементах DOM и имеют схему предотвращения использования объектов

http://jsfiddle.net/adardesign/2ZFFc/

Ответ 1

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

В принципе, вам нужно добавить нулевой диапазон высоты/ширины, чтобы действовать как промежуточный node. Затем вы выполняете соединения с и из этого node вместо прямого между реальными элементами.

Я изменил ваш jsfiddle (обновленная ссылка) чтобы привести пример этого.

Важно отметить способность устанавливать размещение якоря с использованием координат и возможность использовать две разные формы конечных точек. Кроме того, поскольку длина по умолчанию от привязки до первого поворота слишком велика в вашем примере, ее можно контролировать с помощью аргумента stub.

Ниже приведены соответствующие изменения с комментариями.

HTML

<div id="root">
    <div class="item" id="item1">Item 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="item" id="item4">Item 4</div>
    <div class="item" id="item5">Item 5</div>
    <div class="item" id="item6">Item 6</div>
    <div class="item" id="item7">Item 7</div>
    <div class="node" id="8-12"></div>            <!-- Midpoint -->
    <div class="item" id="item8">Item 8</div>
    <div class="item" id="item9">Item 9</div>
    <div class="item" id="item10">Item 10</div>
    <div class="item" id="item11">Item 11</div>
    <div class="item" id="item12">Item 12</div>
    <div class="item" id="item13">Item 13</div>
    <div class="item" id="item14">Item 14</div>
</div>

CSS

.node {
    position: absolute;
    height: 0px;
    width: 0px;
    visibility: hidden;

    /* change these to place the midpoint properly */
    left: 285px;
    top: 160px;
}

//connection from item8 to midpoint(8-12)
jsPlumb.connect({
    source: $('#item8'),
    target: $('#8-12'),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Dot", {radius:2}],["Blank"] ] //<== Blank connector at end
});

//connection from midpoint(8-12) to item12
jsPlumb.connect({
    source: $('#8-12'),
    target: $('#item12'),
    connector:[ "Flowchart", {stub:5} ], //<== set stub length to be
                                         //    as short as you need it
    paintStyle: {
        strokeStyle: "#000000", 
        lineWidth:1
    },
    anchors:[ [0,0.5,-1,0],[0.5,0,0,-1] ], //<== connection position/direction
    endpoints:[ ["Blank"],["Dot", {radius:2}] ] //<== Blank connector at start
});

Ответ 2

На самом деле решение вашей проблемы глубже, особенно если вы работаете с динамическими данными.

После нескольких часов рытья я наконец нашел "трещину", а не довольно красивое решение, но трещины.

Я просто сделал это изменение для коннекторов Flowchart, также я вообще не знаком с другими разъемами, никогда не использовал их.

После рассмотрения различных вещей, таких как midx и midy и начальные заглушки (они должны использоваться в полном решении, но я их оставил), проще всего искать функцию addSegment в файле connector-flowchart.js. Это где сегменты добавляются.

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

Если вам нужна дополнительная информация, я буду рад поделиться ею.

Ответ 3

У меня была аналогичная проблема, когда связи динамически сгенерированной диаграммы пересекались с элементами.

Что сработало для меня, так это указать аргумент "midpoint" для подключения Flowchart. Возможно, это также помогает в вашем случае.

Аргумент stub также принимает массивы (не в документации). Я просто установил:

jsPlumb.Defaults.Connector = [ "Flowchart", { stub: [10, 50], midpoint: 0.0001 } ];

Надеюсь, это поможет!

Ответ 4

Я опробовал описанные выше варианты, и если вы просто хотите простое решение без добавления промежуточных узлов, мне помогло следующее:

connector: ["Flowchart", { anchors: ["Bottom", "Top"] }]

Добавьте эти параметры в ваше соединение.