jsPlumb dynamic anchor

by DMINATOR

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.16-all-min.js"></script>
    <body >
        
        <!-- Adds new windows to the page -->
        <div class="window" style="left: 600px" id="details">
            <p style="text-align: center">Window</p>
            <div class="button_container">
                <div class="button_add_window">Add</div>
            </div>
        </div>
        
        <!-- Primary window - used as html templated for descendants -->
        <div class="window" style="left: 20px" id="container0">
            <div class="button_container">
                <div class="button_add">Add</div>
                <div class="button_remove">Remove</div>
            </div>
        </div>

        <div class="window" style="left: 200px" id="container1">
        </div>
     

    </body>

CSS

.window { 
            background-color: #EEEEEF;
            border: 1px solid #346789;
            border-radius: 0.5em;
            box-shadow: 2px 2px 5px #AAAAAA;
            color: black;
            height: 5em;
            position: absolute;
            width: 5em;
        }

        .window:hover { 
            box-shadow: 2px 2px 19px #AAAAAA;
            cursor: pointer;
        }


        .button_add, .button_add_window, .button_remove, .button {
            background-color: deepskyblue;
            text-align: center;
            border: 1px solid;
        }

        .button_container {
            margin: 5px;
            background-color: #aaaaaa
        }

JavaScript

jsPlumb.ready(function () {
            //FIX DOM:
            $(("#container1"))[0].innerHTML = $(("#container0"))[0].innerHTML;

            //all windows are draggable
            jsPlumb.draggable($(".window"));


            var anEndpointSource = {
                endpoint: "Rectangle",
                isSource: true,
                isTarget: false,
                maxConnections: 1
              
            };

            var anEndpointDestination = {
                endpoint: "Dot",
                isSource: false,
                isTarget: true,
                maxConnections: 1
             
            };
            
            //Fixes endpoints for specified target
            function fixEndpoints(endpoints) {
                
                //there are 2 types - input and output
                
                var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                    return elementOfArray.isSource; //input
                });
                
                var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                    return elementOfArray.isTarget; //output
                });

                calculateEndpoint(inputAr, true);
                calculateEndpoint(outputAr, false);
            }

            function calculateEndpoint(endpointArray, isInput) {

                //multiplyer
                var mult = 1 / endpointArray.length;

                for (var i = 0; i < endpointArray.length; i++) {
                    
                    if (isInput) {
                        endpointArray[i].anchor.x = 1;
                        endpointArray[i].anchor.y = mult * i;//, 1, 0] };
                    } 
                    else {
                        endpointArray[i].anchor.x = 0;
                        endpointArray[i].anchor.y = mult * i;//, -1, 0] };
                    }
                }
            }

            

            //Add additional anchor
         ...