JS plumb

Bei JS plumb handelt es sich um ein Toolkit, mit dem sich in einem Html Dokument ganz einfach Mindmaps und andere Grafiken leicht erstellen lassen.

In folgendem Beispielcode werden einem, durch Klick hinzugefügtem Div, automatisch End- und Startpunkte für mögliche Verbindungen hinzugefügt. Maximal 10 Verbindungen kann jeder Start- und Endpunkt dabei eingehen. Startpunkte sind Rechtecke und Endpunkte Kreise. 

<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./Schule/Programmieren/TEST/public/jquery.jsPlumb-1.4.1-all-min.js"></script>
 
<style>
    .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
    }
</style>
</head>
<body >
 
    <div class="window" style="left: 600px" id="details">
        <p style="text-align: center">Fenster</p>
        <div class="button_container">
            <div class="button_add_window">+</div>
        </div>
    </div>
 
 
 
 
</body>
</html>

Des weiteren wird folgender Javascript-Code eingefügt: 

jsPlumb.ready(function () {
 
// Neue Divs hinzufügen
        $(".button_add_window").click(function () {
            var id = "dynamic_" + $(".window").length;
          //create new window and add it to the body
            $('<div class="window" id="' + id + '" >').appendTo('body')
            jsPlumb.draggable($('#' + id)); // Div drag-bar machen
            punkte($('#' + id));
        });
    });
 
 
 
 
            var anEndpointSource = {
            endpoint: "Rectangle",
            isSource: true,     // Startpunkt
            isTarget: false,
            maxConnections: 10, // Maximale Anzahl der Verbindungen
            anchor: [0, 0, 0, 0]    // Auslenkung
        };
 
        var anEndpointDestination = {
            endpoint: "Dot",    // punkt als "Symbol"
            isSource: false,    
            isTarget: true,     // Endpunkt
            maxConnections: 10,
            anchor: [0, 0, 0, 0]
        };
 
 
        //Fixieren der Endpunkte
        function fixEndpoints(parentnode) {
            //Endpunktliste
            var endpoints = jsPlumb.getEndpoints(parentnode);
            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);
            jsPlumb.repaintEverything();
        }
 
        //Positionierung
        function calculateEndpoint(endpointArray, isInput) {
            var mult = 1 / (endpointArray.length+1);
            for (var i = 0; i < endpointArray.length; i++) {
                if (isInput) {
                    //position
                    endpointArray[i].anchor.x = 1;
                    endpointArray[i].anchor.y = mult * (i + 1);
                } 
                else {
                    //position
                    endpointArray[i].anchor.x = 0;
                    endpointArray[i].anchor.y = mult * (i + 1);
                }
            }
        }
// ---------------------------------------------------------------------
// Verbindungspunkte hinzufügen
// ---------------------------------------------------------------------           
 
       function punkte(parentnode){               
            jsPlumb.addEndpoint(
                parentnode,
                anEndpointSource
            );
 
            jsPlumb.addEndpoint(
                parentnode,
                anEndpointDestination
            );
 
            fixEndpoints(parentnode);
    	}