How to make multiple connection from the source endpoint in jsplumb

Question

I am trying to make a flowchart using jsplumb library. I need make multiple connections from a single div. Ex- Div 1 should connect to Div 2 and Div 3. I want the source endpoint to be the same i.e bottomcenter. Please let me know what should be done to make this work Thanks!

I got the answer for this. Here it is, while creating the end points, you can set the maxConnections:-1, for unlimited connections. If you set to some value, then it can make only the number of connections equals to value. You need to specify this in sourceEndpoint and targetEndpoint creation time — unix_user, Aug 23 '12 at 18:54
@user1667230: Did you tried it to make the maxConnections=-1 to both the endpoints? If not then try that. — unix_user, Dec 11 '12 at 18:06
Yes, I tried it with addEndpoints, makeSource, and makeTarget. None of which worked. I can create one connection, no problem but after that, the endpoints seems full. I also tried upgrading the z-index of the endpoint. No luck. — spadelives, Dec 11 '12 at 22:43
It turned out that "deleteEndpointsOnDetach: false" broke the ability to create more than one connection without a massive refresh. Removing this parameter resolved the problem. — spadelives, Dec 12 '12 at 02:21
@user1667230: The z-index has nothing to do with it... Thanks for sharing your solution as well... — unix_user, Dec 12 '12 at 07:25

score 3 · Answer 1 · answered Apr 25 '16 at 07:07

For Target End Points set it global to make unlimited connections:

  var targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "blue", radius: 7 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [["Label", { location: [0.5, -0.5], label: "", cssClass: "endpointTargetLabel" }]]
};

for source Endpoint set it global to make unlimited connections:

var sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
    strokeStyle: "green", fillStyle: "green", radius: 3, lineWidth: 1
},
isSource: true,
maxConnections: -1,
connector: ["Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }],
connectorStyle: connectorPaintStyle, hoverPaintStyle: endpointHoverStyle, connectorHoverStyle: connectorHoverStyle,
dragOptions: {},
overlays: [["Label", { location: [0.5, 1.5], label: "", cssClass: "endpointSourceLabel", }]]
};

score 0 · Answer 2 · answered Jan 20 '14 at 10:01

Use the following code to connect div1 to div2 and div3

<html>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <script src="/js/JsPlumb/jquery.jsPlumb-1.4.1-all-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

            $(".inner").draggable({

                containment : ([ ".outer" ]),

            });

        var source = $("#div1");
        var target = $("#div2");
        var target2 = $("#div3");

            jsPlumb.connect({
                source : source,
                target : target
            });
            jsPlumb.connect({
                source : source,
                target : target2
            });


        });


</script>
<style type="text/css">
#outer{

    height: 300px;
    width: 300px;
    /*background-color: red;*/

}
.inner{

    height: 30px;
    width: 30px;
    background-color: yellow;
     margin-bottom: 37px;
}
#div2{
    position: relative; left: 114px; top: -7px;
}

</style>
<body>
    <div id="outer">

        <div class="inner" id="div1">
        </div>
        <div class="inner" id="div2">
        </div>
        <div class="inner" id="div3">
        </div>



    </div>


</body>
</html>

add jsPlumb library

score 0 · Answer 3 · answered Mar 26 '17 at 17:50

0

Configure jsplumb to use static anchors - https://jsplumbtoolkit.com/community/doc/anchors.html#static

answered Mar 26 '17 at 17:50

zeleniy

2,232
19
26

How to make multiple connection from the source endpoint in jsplumb

3 Answers3