Edited to clarify

Question

123

jsPlumb: how to make Flowchart connectors avoid intersecting elements?

rated 0 times [ 124] [ 1] / answers: 1 / hits: 17444 / 12 Years ago, wed, may 16, 2012, 12:00:00

Is it possible to make jsPlumb Flowchart connectors not to cross connectable items or specified elements (in the example: elements with 'item' class)?

Default Flowchart behaviour:

enter

A desired result:

enter

Here's what I tried:

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

Edited to clarify

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

    }

});

Basically to have jsPlumb engine (SVG or canvas) be aware of the relevant DOM elements
and have a object-avoidance scheme

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 12 Years ago nadiaa · Accepted Answer

While I am actually trying to find a proper method for doing this (which led me to your question). I do have a solution that I am using in the meanwhile to get jsPlumb to work in the way that I want it to.

Basically you have to add in a zero height/width div to act as an intermediate node. You then make connections to and from that node instead of directly between the real items.

I have modified your jsfiddle (updated link) to provide an example of this.

The important things to note are ability to set the anchor placement using coordinates and the ability to use two different endpoint shapes. In addition, since the default length from the anchor to the first turn is too long in your example, it can be controlled by using the stub argument.

Below are the relevant modifications with comments.

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;

}

JS

//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

});