jsfile

;
(function() {
    window.jsPlumbDemo = {
        init : function() {

            jsPlumb.importDefaults({
                Endpoint : [ "Dot", {
                    radius : 2
                } ],
                HoverPaintStyle : {
                    strokeStyle : "#1e8151",
                    lineWidth : 2
                },
                ConnectionOverlays : [ [ "Arrow", {
                    location : 1,
                    id : "arrow",
                    length : 14,
                    foldback : 0.8
                } ], [ "Label", {
                    label : "FOO",
                    id : "label",
                    cssClass : "aLabel"
                } ] ]
            });

            var windows = $(".shape");

            // initialise draggable elements.
            jsPlumb.draggable(windows);

            // bind a click listener to each connection; the connection is
            // deleted. you could of course
            // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted
            // to make it clear what was
            // happening.
            jsPlumb.bind("dblclick", function(coffee) {
                jsPlumb.detach(coffee);
            });

            // make each ".ep" div a source and give it some parameters to work
            // with. here we tell it
            // to use a Continuous anchor and the StateMachine connectors, and
            // also we give it the
            // connector's paint style. note that in this demo the strokeStyle
            // is dynamically generated,
            // which prevents us from just setting a
            // jsPlumb.Defaults.PaintStyle. but that is what i
            // would recommend you do. Note also here that we use the 'filter'
            // option to tell jsPlumb
            // which parts of the element should actually respond to a drag
            // start.
            jsPlumb.makeSource(windows, {
                filter : ".ep", // only supported by jquery
                anchor : "Continuous",
                connector : [ "Flowchart", {
                    curviness : 20
                } ],
                connectorStyle : {
                    strokeStyle : "#5c96bc",
                    lineWidth : 2,
                    outlineColor : "transparent",
                    outlineWidth : 4
                },
                maxConnections : 5,
                onMaxConnections : function(info, e) {
                    alert("Maximum connections (" + info.maxConnections
                            + ") reached");
                }
            });

            // bind a connection listener. note that the parameter passed to
            // this function contains more than
            // just the new connection - see the documentation for a full list
            // of what is included in 'info'.
            // this listener sets the connection's internal
            // id as the label overlay's text.
            jsPlumb.bind("connection", function(info) {
                info.connection.getOverlay("label")
                        .setLabel(info.connection.id);
            });

            // initialise all '.w' elements as connection targets.
            jsPlumb.makeTarget(windows, {
                dropOptions : {
                    hoverClass : "dragHover"
                },
                anchor : "Continuous"
            });

            function removeAnchor() {
                var ev = arguments[0] || window.event, origEl = ev.target
                        || ev.srcElement;
                var ele = document.getElementById(origEl.id);
                jsPlumb.removeAllEndpoints(ele);
                ele.parentNode.removeChild(ele);

            }
            document.ondblclick = removeAnchor;

            function save() {
                var anchors = $(".shape");
                if (anchors.length < 1) {
                    return;
                }
                var sidebar = document.getElementById("explanation");
                var element = document.createElement("h4");
                var str = document.createTextNode("ANCHORS;");
                element.appendChild(str);
                sidebar.appendChild(element);
                var text = "sa";
                for ( var i = 0; i < anchors.length; i++) {

                    text = anchors[i].id;
                    text = text + ";";
                    text = text + anchors[i].getBoundingClientRect().left;
                    text = text + ";";
                    text = text + anchors[i].getBoundingClientRect().top;
                    text = text + ";";
                    text = text + anchors[i].getBoundingClientRect().height;
                    text = text + ";";
                    text = text + anchors[i].getBoundingClientRect().width
                            + ";";
                    text = text + anchors[i].getAttribute("data-shape") + ";";
                    var elem = document.createElement("h4");
                    var str2 = document.createTextNode(text);
                    elem.appendChild(str2);
                    sidebar.appendChild((elem));

                }

                var connections = jsPlumb.getAllConnections();

                if (connections.length < 1)
                    return;

                var str3 = document.createTextNode("CONNECTIONS;");
                var element2 = document.createElement("h4");
                element2.appendChild(str3);
                sidebar.appendChild(element2);
                for ( var i = 0; i < connections.length; i++) {
                    text = connections[i].source.id;
                    text = text + ";";
                    text = text + connections[i].target.id + ";";
                    var elem2 = document.createElement("h4");
                    var str4 = document.createTextNode(text);
                    elem2.appendChild(str4);
                    sidebar.appendChild((elem2));

                }
                str3 = document.createTextNode("END");
                var elementx = document.createElement("h4");
                elementx.appendChild(str3);
                sidebar.appendChild(elementx);

            }

            var saveButton = document.getElementById("save");
            saveButton.onclick = save;

            $("#save").on("submit", function(event) {
                alert(jsPlumb.AnchorPositionFinders("window1").toString());
                return false;
            });
        }
    };
})();

var counter = 1;
function addAnchor(type) {

    var para = document.createElement("div");
    para.className = "shape";
    para.setAttribute("data-shape", type);
    para.id = "w" + counter;
    var ep = document.createElement("div");
    ep.className = "ep";

    var node = document.createTextNode(counter);
    para.appendChild(node);
    para.appendChild(ep);
    var element = document.getElementById("render");
    element.appendChild(para);

    var windows = $(".shape");
    jsPlumb.draggable(windows);

    jsPlumb.makeSource(windows, {
        filter : ".ep", // only supported by jquery
        anchor : "Continuous",
        connector : [ "Flowchart", {
            curviness : 20
        } ],
        connectorStyle : {
            strokeStyle : "#5c96bc",
            lineWidth : 2,
            outlineColor : "transparent",
            outlineWidth : 4
        },
        maxConnections : 5,
        onMaxConnections : function(info, e) {
            alert("Maximum connections (" + info.maxConnections + ") reached");
        }
    });

    jsPlumb.makeTarget(windows, {
        dropOptions : {
            hoverClass : "dragHover"
        },
        anchor : "Continuous"
    });

    counter++;

    // _addEndpoints(para.id, ["TopCenter", "BottomCenter"], ["LeftMiddle",
    // "RightMiddle"]);

    return false;
}
var reader = new FileReader();

function readText(that) {

    if (that.files && that.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var output = e.target.result;

            // process text to show only lines with "@":
            // output=output.split("\n").filter(/./.test, /\@/).join("\n");

            var i = 1;
            var str = output.split(";" || "\s");

            while (str[i].localeCompare("CONNECTIONS") != 0) {

                var id = str[i];
                var left = str[i + 1] + "px";
                var top = str[i + 2] + "px";
                var height = str[i + 3];
                var width = str[i + 4];
                var shape = str[i + 5];

                // //

                var para = document.createElement("div");
                para.className = "shape";
                para.id = id;
                para.setAttribute("data-shape", shape);

                para.style.left = left;
                para.style.top = top;
                var ep = document.createElement("div");
                ep.className = "ep";

                var node = document.createTextNode(id);
                para.appendChild(node);
                para.appendChild(ep);
                var element = document.getElementById("render");
                element.appendChild(para);
                i = i + 6;

            }
            i++;

            var windows = $(".shape");
            jsPlumb.draggable(windows);
            jsPlumb.makeSource(windows, {
                filter : ".ep", // only supported by jquery
                anchor : "Continuous",
                connector : [ "Flowchart", {
                    curviness : 20
                } ],
                connectorStyle : {
                    strokeStyle : "#5c96bc",
                    lineWidth : 2,
                    outlineColor : "transparent",
                    outlineWidth : 4
                },
                maxConnections : 5,
                onMaxConnections : function(info, e) {
                    alert("Maximum connections (" + info.maxConnections
                            + ") reached");
                }
            });

            jsPlumb.makeTarget(windows, {
                dropOptions : {
                    hoverClass : "dragHover"
                },
                anchor : "Continuous"
            });

            while (str[i].localeCompare("END") != 0 && str[i] != null) {

                var source = str[i];
                var target = str[i + 1];
                jsPlumb.connect({
                    source : source,
                    target : target
                });
                i = i + 2;

            }
            jsPlumb.repaintEverything();

            // ///

            document.getElementById('explanation').innerHTML = str[2];
        };// end onload()
        reader.readAsText(that.files[0]);
    }// end if html5 filelist support
}

function preview() {

    var windows = $(".shape");
    var x;
    for ( var i = 0; i < windows.length; i++) {
        x = windows[i].getElementsByClassName("ep");
        windows[i].removeChild(x[0]);
        jsPlumb.setDraggable(windows[i], false);
    }

    jsPlumb.repaintEverything();
}