How to make multiple connection from the source endpoint in jsplumb

Asked 16/8, 2012 at 17:46 Answered 26/3, 2017 at 17:50

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!

Ultan answered 16/8, 2012 at 17:46 Comment(6)

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 – Ultan 23/8, 2012 at 18:54

This solution didn't work for me for some reason. – Vickivickie 11/12, 2012 at 6:28

@user1667230: Did you tried it to make the maxConnections=-1 to both the endpoints? If not then try that. – Ultan 11/12, 2012 at 18:6

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. – Vickivickie 11/12, 2012 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. – Vickivickie 12/12, 2012 at 2:21

@user1667230: The z-index has nothing to do with it... Thanks for sharing your solution as well... – Ultan 12/12, 2012 at 7:25

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", }]]
};

Handrail answered 25/4, 2016 at 7:7 Comment(0)

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

Quotha answered 20/1, 2014 at 10:1 Comment(0)

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

Alceste answered 26/3, 2017 at 17:50 Comment(0)

Recommended topics

Hot tags