jsPlumb: how to make Flowchart connectors avoid intersecting elements?

Question

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

Default Flowchar

Answer 1

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

    
Item 1
    
Item 2
    
Item 3
    
Item 4
    
Item 5
    
Item 6
    
Item 7
    
            
    
Item 8
    
Item 9
    
Item 10
    
Item 11
    
Item 12
    
Item 13
    
Item 14

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
});