JSPlumb Sample

JSPlumb Sample code for connections fileds

by Khadeer Mohammed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<div id="diagramContainer">
    <div id="item_1" class="item">Input 1</div>
    <div id="item_2" class="item" style="margin-left:50px;">Input 2</div>
    <div id="item_3" class="item" style="margin-left:50px;">Input 3</div>
</div>
<div id="item_input" class="itemin">PROJECT NAME</div>
<div class="down">
    <div id="downstream_1" class="ds">Output 1</div>
    <div id="downstream_2" class="ds">Output 2</div>
</div>

CSS

.item {
    height:80px;
    width: 80px;
    border: 1px solid blue;
    float: left;
}
.ds {
    width:100px;
    height:100px;
    border:1px solid brown;
    float:left;
    margin-left:50px;
}
.down{
    width:100%;
    height:auto;
    float:left;
}
.itemin{
    margin-top:150px;
    margin-bottom:100px;
    border:2px pink solid;
    width:100px;
    height:100px;
    float:left;
}

JavaScript

jsPlumb.ready(function () {
    /*First Instance*/
    var firstInstance = jsPlumb.getInstance();
    firstInstance.importDefaults({
        Connector: ["Straight", {
            midpoint: 0.9,
          	stub: 20
        }],
        DragOptions: {
                    cursor: "pointer",
                    zIndex: 9999
                },
                PaintStyle: {
                    strokeStyle: "#333",
                    lineWidth: 2,
                },
                Endpoints: [
                    ["Blank", {
                        radius: 4
                    }],
                    ["Blank", {
                        radius: 4
                    }]
                ],
        Anchors: ["LeftMiddle", "RightMiddle"],
        endpointStyle: {
                    fillStyle: "#5b9ada"
                },
                HoverPaintStyle: {
                    strokeStyle: "#13487a",
                    lineWidth: 3
                },
        ConnectionOverlays: [
                    ["Arrow", {
                        location: 1,
                        id: "arrow",
                        length: 10,
                        width: 10,
                        foldback: 0.8
                    }],
                    ["Arrow", {
                        location: 0,
                        id: "arrow",
                        length: 10,
                        width: 10,
                        foldback: 1
                    }],
                    ["Label", {
                        location: 0.5,
                        id: "mmk",
                        cssClass: "aLabel"
                    }]
                ]
    });

    firstInstance.connect({
        source: "item_1",
        target: "item_input",
        scope: "someScope"
    });
    firstInstance.connect({
        source: "item_2",
        target: "item_input",
        scope: "someScope"
    });
     firstInstance.connect({
        source: "item_3",
        target: "item_input",
        scope:...