How to build Connections with Edges in JsPlumb?

Question

How can I set up a JsPlumb connection that splits in the middle and goes to more than one endploints like in the following images?

A: Connecting two endpoints with one connection:

enter image description here

B: Connecting two endpoints with one connection:

enter image description here

C: Connecting three endpoints with one connection:

enter image description here

Edit: Using the FlowChart option I get a strange bug which a small dot, see the image below.

enter image description here

Can you tell me @confile for what purpose you are using this one? — Just code, Nov 01 '13 at 03:37

score 13 · Accepted Answer · answered Oct 27 '13 at 19:55

below links to jsfiddle with scripts. All blue-blocks are draggable, so you can experiment with block positions and connections behavior.

And I'm sorry for so large answer ;)

A: Connecting two endpoints with one connection:

http://jsfiddle.net/TkyJB/2/

enter image description here

jsPlumb.ready(function() {

    // default settings for connectors
    var connectionParams = {
        connector: ["Flowchart", {cornerRadius:1}],
        paintStyle:{ 
            lineWidth: 1,
            outlineColor:"blue",
            outlineWidth: 0
        },
        detachable:false,
        endpointStyle: { radius:1 }
    };

    // w2 <=> w1
    jsPlumb.connect({
        source: "window2", 
        target: "window1",
        anchors: ["TopCenter", "Left"]
    }, connectionParams);

    // w2 <=> w2
    jsPlumb.connect({
        source: "window2", 
        target: "window3",
        anchors: ["BottomCenter", "Left"]
    }, connectionParams);

    //
    jsPlumb.draggable(
        jsPlumb.getSelector(".window"),
        { containment:".demo"}
    );
});

B: Connecting two endpoints with one connection:

jsPlumb rule: one connection between 2 windows. So if you need to divide some connection in end, you need to create proxy-point, that will be as source for one widow, and will create 2 new connections for other windows.

http://jsfiddle.net/TkyJB/8/

enter image description here

jsPlumb.ready(function() {

    // default settings for connectors
    var connectionParams = {
        connector: ["Flowchart", {cornerRadius:1}],
        paintStyle:{ 
            lineWidth: 1,
            outlineColor:"green",
            outlineWidth: 0
        },
        detachable:false,
        endpointStyle: { radius:1 }
    };

    // w1 <=> w1s
    jsPlumb.connect({
        source: "window1", 
        target: "window1s",
        anchors: ["Right", "Center"],
        anchor:[ "Perimeter", { shape:"Circle" } ]
    }, connectionParams);

    // w1s <=> w2
    jsPlumb.connect({
        source: "window1s", 
        target: "window2",
        anchors: ["Center", "Bottom"]
    }, connectionParams);

    // w1s <=> w3
    jsPlumb.connect({
        source: "window1s", 
        target: "window3",
        anchors: ["Center", "Top"]
    }, connectionParams);

    //
    jsPlumb.draggable(
        jsPlumb.getSelector(".window"),
        { containment:".demo"}
    );
});

C: Connecting three endpoints with one connection:

It will be the same as in 'B', but with extra hidden proxy-block.

http://jsfiddle.net/TkyJB/7/

enter image description here

jsPlumb.ready(function() {

    // default settings for connectors
    var connectionParams = {
        connector: ["Flowchart", {cornerRadius:1}],
        paintStyle:{ 
            lineWidth: 1,
            outlineColor:"blue",
            outlineWidth: 0
        },
        detachable:false,
        endpointStyle: { radius:1 }
    };

    // w1 <=> w1s1
    jsPlumb.connect({
        source: "window1", 
        target: "window1s1",
        anchors: ["Right", "Center"]
    }, connectionParams);

    // w1s1 <=> w1s2
    jsPlumb.connect({
        source: "window1s1", 
        target: "window1s2",
        anchors: ["Center", "Center"]
    }, connectionParams);

    // w1s1 <=> w2
    jsPlumb.connect({
        source: "window1s1", 
        target: "window2",
        anchors: ["TopCenter", "Left"]
    }, connectionParams);

    // w1s1 <=> w3
    jsPlumb.connect({
        source: "window1s1", 
        target: "window3",
        anchors: ["BottomCenter", "Left"]
    }, connectionParams);

    // w1s2 <=> w4
    jsPlumb.connect({
        source: "window1s2", 
        target: "window4",
        anchors: ["Right", "Left"]
    }, connectionParams);

    //
    jsPlumb.draggable(
        jsPlumb.getSelector(".window"),
        { containment:".demo"}
    );

});

This looks great. Thank you. Is there a way to guarantee that the connection lines will never touch the blue boxes when you move teh boxes? Is there some algorithm for that? — Michael, Oct 27 '13 at 20:41
try to play with "anchors" arguments. "dynamic anchors" maybe can help with that. — itspoma, Oct 27 '13 at 20:43
Not today just. Maybe tomorrow will have more free time for this. — itspoma, Oct 27 '13 at 21:04
The algorithm used for the lines is quite long, there is a separate `connector-editors.js` file however. This allows the user to drag the connectors manually. — Henry Florence, Oct 27 '13 at 23:55
@confile check this: http://jsfiddle.net/TkyJB/9/ , but also it needed to fix block positions. — itspoma, Oct 28 '13 at 10:12
@itspoma great! I looked at your second example http://jsfiddle.net/TkyJB/8/ the vertical line looks a bit strange. The line looks a bit shifted. Can you fix that? — Michael, Oct 28 '13 at 17:06
@itspoma Do I need to include the full jsplumb.js or what is the minimal set I have to include to make it work? — Michael, Nov 01 '13 at 12:40
@itspoma Do I really need to set everything inside the jsPlumb.ready(function() block? Why do you use that? — Michael, Nov 02 '13 at 21:33
@confile There are creating connects between blocks, and setting parameters for them. Try to self understand code inside jsPlumb.ready block. I did everything that I could. — itspoma, Nov 02 '13 at 22:05
@itspoma I implemented your solution and get a small dot at the final endpoint. See my edit above. Do you have any idea how I can fix that? — Michael, Nov 04 '13 at 04:45
@itspoma here is what I did. I jsfiddle it does not has the error. http://jsfiddle.net/confile/TkyJB/14/ I use the same code in GWT and it produces what I showed. Any idea? — Michael, Nov 04 '13 at 17:30
@itspoma if my anchor position is left is there a way to change the anchor position to top Left or bottom Left? I mean I want to choose a different position on the Left side of the box. How can I do that? — Michael, Nov 07 '13 at 13:37
@confile yes, modify type of 'connector' or modify top/left attributes in css. and dude, RTFM. — itspoma, Nov 07 '13 at 13:49
@confile no, don't be a lazy man, read that - http://jsplumbtoolkit.com/doc/connectors — itspoma, Nov 07 '13 at 16:14

How to build Connections with Edges in JsPlumb?

1 Answers1