dded improved mobile support.

circle/setty/static/setty/setty.js

-jsPlumb.ready(function(){
-    /**
-     * Global variables.
-     */
+(function($){
+
+  $.event.special.doubletap = {
+    bindType: 'touchend',
+    delegateType: 'touchend',
+
+    handle: function(event) {
+      var handleObj   = event.handleObj,
+          targetData  = jQuery.data(event.target),
+          now         = new Date().getTime(),
+          delta       = targetData.lastTouch ? now - targetData.lastTouch : 0,
+          delay       = delay === null ? 300 : delay;
+
+      if (delta < delay && delta > 30) {
+        targetData.lastTouch = null;
+        event.type = handleObj.origType;
+        ['clientX', 'clientY', 'pageX', 'pageY'].forEach(function(property) {
+          event[property] = event.originalEvent.changedTouches[0][property];
+        })
+
+        // let jQuery handle the triggering of "doubletap" event handlers
+        handleObj.handler.apply(this, arguments);
+      } else {
+        targetData.lastTouch = now;
+      }
+    }
+  };
+
+})(jQuery);
+
+jsPlumb.ready(function() {
     var jsPlumbInstance = jsPlumb.getInstance({
         DragOptions: {
-            cursor: 'pointer',
             zIndex: 2000
         },
         EndpointHoverStyle: {
             fillStyle: "green"
         },
         HoverPaintStyle: {
-            strokeStyle: "red"
+            strokeStyle: "green"
         },
         Container: "dropContainer"
     });
     var jsPlumbEndpoint = {
         endpoint: ["Dot", {
-            radius: 10,
+            radius: 10
         }],
         paintStyle: {
-            fillStyle: "#9932cc",
+            fillStyle: "#9932cc"
         },
         isSource: true,
         isTarget: true,
@@ -28,72 +54,184 @@ jsPlumb.ready(function(){
         zIndex: 20,
         connectorStyle: {
             strokeStyle: "#9932cc",
-            lineWidth: 8,
+            lineWidth: 8
         },
         connector: ["Bezier", {
-            curviness: 180,
+            curviness: 180
         }],
         maxConnections: 1,
         dropOptions: {
-            tolerance: "fit",
-        },
+            tolerance: "fit"
+        }
     };
     var elementConnections = [];
     var elementIndex = 0;
     var dragContainerScroll = 0;
-    var saveWarning = 0;
+    var clickEvent = 0;
+
+
+    var stackIndexer = 0;
+    var stackSize = 0;
 
+    var objectStack = [];
+    var undoStack = [];
+    var redoStack = [];
 
-    /**
-     * Function for updating saved status.
-     */
-    setServiceStatus = function(status){
-        if(status == "unsaved" && $("#unsavedDiv").length < 1){
-            $("#serviceName").parent().append('<h3 id="unsavedDiv"> (unsaved)</h3>');
+    $("#dropContainer").attr('unselectable', 'on')
+        .css({
+            'user-select': 'none',
+            'MozUserSelect': 'none'
+        })
+        .on('selectstart', false)
+        .on('mousedown', false);
+
+    setServiceStatus = function(status) {
+        if (status == "unsaved") {
+            $("#serviceStatus").text("Unsaved");
         }
-        if(status == "saved"){
-            $("#unsavedDiv").remove();
+        if (status == "saved") {
+            $("#serviceStatus").empty();
         }
     };
 
+    addInfo = function(title, info, type, object) {
+        $("#informationContainer").empty();
 
-    /**
-     * Function for displaying information panel content.
-     */
-    addInfo = function(title, info, type, element){
-        div = '<div class="row"><div class="col-xs-12 text-center"><h3>' + title + '</h3></div></div>&nbsp;<div class="row"><div class="col-xs-12">' + '<textarea class="form-control" rows="30" id="infoInput"' + 'placeholder="Config data"' + (type=="info"?'readonly':'') + '>' + '</textarea></div></div>';
+        switch(type){
+            case "connection":
+                div =
+                    '<div class="row">' +
+                        '<div class="col-xs-12 text-center">' +
+                            '<h4>' + title + '</h4>' +
+                        '</div>' +
+                    '</div>&nbsp;' +
+                    '<div class="row">' +
+                        '<div class="col-xs-12">' +
+                            '<textarea class="form-control" rows="28" id="infoInput" placeholder="Config data"></textarea>' +
+                        '</div>' +
+                    '</div>&nbsp;' +
+                    '<div class="row">' +
+                        '<div class="col-xs-12 text-center">' +
+                            '<button id="removeConnection" class="btn btn-info">Remove connection</button>' +
+                        '</div>' +
+                    '</div>';
+                break;
+            case "element":
+                div =
+                    '<div class="row">' +
+                        '<div class="col-xs-12 text-center">' +
+                            '<h4>' + title + '</h4>' +
+                        '</div>' +
+                    '</div>&nbsp;' +
+                    '<div class="row">' +
+                        '<div class="col-xs-12">' +
+                            '<textarea class="form-control" rows="24" id="infoInput" placeholder="Config data"></textarea>' +
+                        '</div>' +
+                    '</div>&nbsp;' +
+                    '<div class="row text-center">' +
+                        '<label>Endpoints</label>' +
+                    '</div>' +
+                    '<div class="row">' +
+                        '<div class="col-xs-6 text-center">' +
+                            '<button id="addEndpoint" class="btn btn-success"><i class="fa fa-plus"></i></button>' +
+                        '</div>' +
+                        '<div class="col-xs-6 text-center">' +
+                            '<button id="removeEndpoint" class="btn btn-danger"><i class="fa fa-minus"></i></button>' +
+                        '</div>' +
+                    '</div>&nbsp;' +
+                    '<div class="row">' +
+                        '<div class="col-xs-12 text-center">' +
+                            '<button id="removeFromWorkspace" class="btn btn-info">Remove from workspace</button>' +
+                        '</div>' +
+                    '</div>';
+                break;
+            case "elementTemplate":
+                div =
+                    '<div class="row">' +
+                        '<div class="col-xs-12 text-center">' +
+                            '<h4>' + title + '</h4>' +
+                        '</div>' +
+                    '</div>&nbsp;' +
+                    '<div class="row">' +
+                        '<div class="col-xs-12">' +
+                            '<textarea class="form-control" rows="28" id="infoInput" placeholder="Config data"></textarea>' +
+                        '</div>' +
+                    '</div>&nbsp;' +
+                    '<div class="row">' +
+                        '<div class="col-xs-12 text-center">' +
+                            '<button id="addElementToWorkspace" class="btn btn-success">Add to workspace</button>' +
+                        '</div>' +
+                    '</div>';
+                break;
+        }
 
-        if(type=="element")
-            div += '&nbsp;<div class="row text-center"><label>Endpoints</label></div><div class="row">' + '<div class="col-xs-6 text-center">' + '<button id="addEndpoint" class="btn btn-success">+</button></div>' + '<div class="col-xs-6 text-center">' + '<button id="removeEndpoint" class="btn btn-danger">-</button></div></div>';
+        $("#informationContainer").append(div);
 
-        $("#informationContainer").empty().append(div);
-        
-        $("#infoInput").val(info).keyup(function(){
+        $("#infoInput").val(info).keyup(function() {
             setServiceStatus("unsaved");
             newParams = $("#infoInput").val();
 
-            if(type=="connection") element.parameters = newParams;
-            if(type=="element") element.attr("parameters", newParams);
+            if (type == "connection") object.parameters = newParams;
+            if (type == "element") object.attr("parameters", newParams);
         });
 
-        $("#addEndpoint").click(function(){
-            addEndpoint(element);
+        $("#addEndpoint").click(function() {
+            addEndpoint(object);
+            undoStack.splice(stackIndexer, 0, removeEndoint);
+            redoStack.splice(stackIndexer, 0, addEndpoint);
+            objectStack.splice(stackIndexer, 0, object);
+            stackIndexer++;
+            stackSize++;
         });
 
-        $("#removeEndpoint").click(function(){
-            removeEndoint(element);
+        $("#removeEndpoint").click(function() {
+            removeEndoint(object);
+            undoStack.splice(stackIndexer, 0, addEndpoint);
+            redoStack.splice(stackIndexer, 0, removeEndoint);
+            objectStack.splice(stackIndexer, 0, object);
+            stackIndexer++;
+            stackSize++;
         });
-    };
 
+        $("#removeFromWorkspace").click(function() {
+            $('.element').removeClass('elementSelected');
+            removeElement(object);
 
-    /**
-     * Function for updating connection array whether an event was fired.
-     */
-    updateConnections = function(connection, remove){
-        setServiceStatus("unsaved");
-        if (!remove)
+            $("#informationPanel").hide();
+            $("#dragPanel").show();
+
+            undoStack.splice(stackIndexer, 0, addElement);
+            redoStack.splice(stackIndexer, 0, removeElement);
+            objectStack.splice(stackIndexer, 0, object);
+            stackSize++;
+            stackIndexer++;
+        });
+
+        $("#removeConnection").click(function() {
+            jsPlumbInstance.detach(object);
+            $("#informationPanel").hide();
+            $("#dragPanel").show();
+        });
+
+        $("#addElementToWorkspace").click(function() {
+            addElement(object.attr("id"), (++elementIndex) + "_" + object.attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
+
+            undoStack.splice(stackIndexer, 0, removeElement);
+            redoStack.splice(stackIndexer, 0, addElement);
+            objectStack.splice(stackIndexer, 0, newInstance);
+            stackSize++;
+            stackIndexer++;
+        });
+
+        $("#dragPanel").hide();
+
+        $("#informationPanel").show();
+    };
+
+    updateConnections = function(connection, remove) {
+        if (!remove) {
             elementConnections.push(connection);
-        else {
+        } else {
             index = -1;
             for (var i = 0; i < elementConnections.length; i++) {
                 if (elementConnections[i] == connection) {
@@ -101,20 +239,27 @@ jsPlumb.ready(function(){
                     break;
                 }
             }
-            if (index != -1)
+            if (index != -1) {
                 elementConnections.splice(index, 1);
+            }
         }
+
+        setServiceStatus("unsaved");
     };
 
 
-    /**
-     * Function for checking and ignoring duplicate connections.
-     */
-    checkDuplicateConnection = function(connection){
+    checkDuplicateConnection = function(connection) {
         for (var i = 0; i < elementConnections.length; i++) {
-            if ((elementConnections[i].targetId == connection.targetId && elementConnections[i].sourceId == connection.sourceId) ||
-                (elementConnections[i].targetId == connection.sourceId && elementConnections[i].sourceId == connection.targetId)) {
-                addMessage("Duplicate connection.", "danger");
+            if (((elementConnections[i].targetId ==
+                        connection.targetId &&
+                        elementConnections[i].sourceId ==
+                        connection.sourceId) ||
+                    (elementConnections[i].targetId ==
+                        connection.sourceId &&
+                        elementConnections[i].sourceId ==
+                        connection.targetId)) &&
+                elementConnections[i] != connection) {
+                addMessage("Twofold connection is forbidden.", "danger");
                 return false;
             }
         }
@@ -122,36 +267,25 @@ jsPlumb.ready(function(){
     };
 
 
-    /**
-     * Function for checking element compatibility.
-     */
-    checkCompatibility = function(sourceId, targetId){
+    checkCompatibility = function(sourceId, targetId) {
         validTargets = $("#" + sourceId).attr("type").split(',');
 
         if (jQuery.inArray(targetId.split('_')[1], validTargets) == -1) {
-            addMessage("Elements are incompatible.", "danger");
+            addMessage("Connecting incompatible elements is forbidden.", "danger");
             return false;
         }
         return true;
     };
 
-
-    /**
-     * Function for checking source and target equality.
-     */
-    checkSourceTargetEquality = function(connection){
+    checkSourceTargetEquality = function(connection) {
         if (connection.targetId == connection.sourceId) {
-            addMessage("Source element is the same as target element.", "danger");
+            addMessage("Connecting element to itself is forbidden.", "danger");
             return false;
         }
         return true;
     };
 
-
-    /**
-     * Function for determining anchor positions for an element.
-     */
-    getAnchorCoordinate = function(rate){
+    getAnchorCoordinate = function(rate) {
         x = Math.cos(2.0 * Math.PI * rate) / 2;
         y = Math.sin(2.0 * Math.PI * rate) / 2;
         dx = 0;
@@ -173,137 +307,148 @@ jsPlumb.ready(function(){
             x = -0.5;
             dx = -1;
         } else {
-            x = Math.sqrt(2) * Math.cos(2 * Math.PI * rate) / 2;
-            y = Math.sqrt(2) * Math.sin(2 * Math.PI * rate) / 2;
+            x = Math.sqrt(2) * Math.cos(2 * Math.PI *
+                rate) / 2;
+            y = Math.sqrt(2) * Math.sin(2 * Math.PI *
+                rate) / 2;
 
             dx = Math.round(2 * x);
         }
         return [y + 0.5, -x + 0.5, dy, -dx];
     };
 
-
-    /**
-     * Check whether an anchor is connected.
-     */
-    isConnected = function(anchorId){
+    isConnected = function(anchorId) {
         returnValue = false;
         $.each(elementConnections, function(index) {
-            if(elementConnections[index].endpoints[0].getUuid()==anchorId ||
-               elementConnections[index].endpoints[1].getUuid()==anchorId){
+            if (elementConnections[index].endpoints[0].getUuid() == anchorId ||
+                elementConnections[index].endpoints[1].getUuid() == anchorId) {
                 returnValue = true;
                 return;
             }
         });
         return returnValue;
     };
-    
-    /**
-     * Get connection parameters and other connected anchor concerning an anchor coming from parameters.
-     */
-    getConnectionparamAndAnchor = function(anchorId){
+
+    getConnectionparamAndAnchor = function(anchorId) {
         parameters = "";
         otherAnchor = "";
 
         $.each(elementConnections, function(index) {
-            if(elementConnections[index].endpoints[0].getUuid()==anchorId)
-            {
-                parameters = elementConnections[index];
+            if (elementConnections[index].endpoints[0].getUuid() == anchorId) {
+                parameters = elementConnections[index].parameters;
                 otherAnchor = elementConnections[index].endpoints[1].getUuid();
                 return;
             }
 
-            if(elementConnections[index].endpoints[1].getUuid()==anchorId)
-            {
+            if (elementConnections[index].endpoints[1].getUuid() == anchorId) {
                 parameters = elementConnections[index].parameters;
                 otherAnchor = elementConnections[index].endpoints[0].getUuid();
                 return;
             }
         });
-        return [parameters, otherAnchor];
+
+        return [otherAnchor, parameters];
     };
-    
-    
-    /**
-     * Function to add new element to service.
-     */
-    addEndpoint = function(element){
+
+    addEndpoint = function(element) {
         anchors = element.attr("anchors");
 
-        if(anchors==8) return;
+        if (anchors == 8) return;
 
         anchors++;
 
-        jsPlumbInstance.addEndpoint(document.getElementById(element.attr("id")), {
-            anchor: getAnchorCoordinate((anchors-1) / anchors),
-            uuid: (anchors-1) + "_" + element.attr("id")
-        },
-        jsPlumbEndpoint);
+        jsPlumbInstance.addEndpoint(document.getElementById(
+                element.attr("id")), {
+                anchor: getAnchorCoordinate((anchors - 1) / anchors),
+                uuid: (anchors - 1) + "_" + element.attr("id")
+            },
+            jsPlumbEndpoint);
 
         for (i = 0; i < anchors; i++) jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
 
         element.attr("anchors", anchors);
-        
+
         jsPlumbInstance.repaintEverything();
     };
 
-    /**
-     * Function for removing an endpoint of an element.
-     */
-    removeEndoint = function(element){
+    removeEndoint = function(element) {
         anchors = element.attr("anchors");
-        
-        if(anchors==4) return;
-        
-        i = anchors-1;
+
+        if (anchors == 4) return;
+
+        i = anchors - 1;
         anchors--;
-        
-        while(isConnected(i + "_" + element.attr("id")) && i>=0){
-            i--;
-        }
-        
-        if(i==-1){
-            addMessage("All the anchors are connected so that removing any is forbidden.", "danger");
+
+        while (isConnected(i + "_" + element.attr("id")) &&
+            i >= 0) i--;
+
+        if (i == -1) {
+            addMessage("Removing anchors is obstructed.", "danger");
             return;
-        }
-        else if(i==anchors){
-            jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
-        }
-        else{
+        } else if (i == anchors) {
+            jsPlumbInstance.deleteEndpoint(
+                jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
+        } else {
             newId = i + "_" + element.attr("id");
             oldId = anchors + "_" + element.attr("id");
 
             data = getConnectionparamAndAnchor(oldId);
-            
+            data.splice(0, 0, newId);
+
             jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(oldId));
 
-            connectionObject = jsPlumbInstance.connect({
-                    uuids: [newId, data[1]]
-            });
-            connectionObject.parameters = data[0];
+            connectEndpoints(data);
         }
-        
-        for (i=0;i<anchors;i++) jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
+
+        for (i = 0; i < anchors; i++) jsPlumbInstance.getEndpoint(
+            i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
 
         element.attr("anchors", anchors);
 
         jsPlumbInstance.repaintEverything();
     };
-    
-
-    /**
-     * Function for managing instantiation of new elements based on their templates.
-     */
-    addElement = function(templateId, newId, newPositionY, endpoints, parameters, newPositionX){
-        newInstance = $('#' + templateId)
-            .clone()
-            .prop("id", newId)
-            .prop("title", "Right click to delete")
-            .removeClass()
-            .addClass("element")
-            .attr("anchors", 0)
-            .attr("parameters", parameters)
-            .css("top", newPositionY)
-            .css("left", newPositionX);
+
+    connectEndpoints = function(data) {
+        connectionObject =
+            jsPlumbInstance.connect({
+                uuids: [data[0], data[1]]
+            });
+
+        connectionObject.parameters = data[2];
+
+        setServiceStatus("unsaved");
+    };
+
+    disconnectEndpoints = function(data) {
+        for (var i = 0; i < elementConnections.length; i++) {
+            if (elementConnections[i].endpoints[0].getUuid() == data[0] &&
+                elementConnections[i].endpoints[1].getUuid() == data[1]) {
+                jsPlumbInstance.detach(elementConnections[i]);
+                return;
+            }
+        }
+        return;
+    };
+
+    addElement = function(idOrInstance, newId, newPositionY, endpoints, parameters, newPositionX) {
+        newInstance = "";
+
+        if (typeof idOrInstance != "string") {
+            newInstance = idOrInstance;
+            endpoints = newInstance.attr("anchors");
+            newInstance.attr("anchors", 0);
+        } else {
+            newInstance = $('#' + idOrInstance)
+                .clone()
+                .prop("id", newId)
+                .prop("title", "Right click to delete")
+                .removeClass()
+                .addClass("element")
+                .attr("anchors", 0)
+                .attr("parameters", parameters)
+                .css("top", newPositionY)
+                .css("left", newPositionX);
+        }
 
         $("#dropContainer").append(newInstance);
 
@@ -315,111 +460,162 @@ jsPlumb.ready(function(){
             containment: $("#dropContainer")
         });
 
-        newInstance.mousedown(function(e){
-            if(e.button === 0){
-                element = $(this);
-                addInfo(element.attr("alt"), element.attr("parameters"), "element", element);
-                return false;
-            }
-            if(e.button == 2){
+        newInstance.on('dblclick doubletap', function() {
+            element = $(this);
+            $('.element').removeClass('elementSelected');
+            jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
+            element.addClass("elementSelected");
+            addInfo(element.attr("alt"), element.attr("parameters"), "element", element);
+        }).mousedown(function(e) {
+            if (e.button == 2) {
                 setServiceStatus("unsaved");
-                $("#informationContainer").empty();
-                jsPlumbInstance.remove($(this).prop("id"));
+                $("#informationPanel").hide();
+                $("#dragPanel").show();
+                
+                $('.element').removeClass('elementSelected');
+                jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
+                
+                removeElement($(this));
+
+                undoStack.splice(stackIndexer, 0, addElement);
+                redoStack.splice(stackIndexer, 0, removeElement);
+                objectStack.splice(stackIndexer, 0, $(this));
+                stackSize++;
+                stackIndexer++;
                 return false;
             }
             return true;
         });
 
         setServiceStatus("unsaved");
-        
+
         jsPlumbInstance.repaintEverything();
     };
 
+    removeElement = function(object) {
+        jsPlumbInstance.detachAllConnections(object);
+        jsPlumbInstance.remove(object.attr("id"));
+    };
 
-    /**
-     * Handling events on workspace.
-     */
-    jsPlumbInstance.bind("connection", function(info){
+    jsPlumbInstance.bind("connection", function(info) {
         updateConnections(info.connection);
         info.connection.parameters = "";
+
+        if (clickEvent === 0) {
+            undoStack.splice(stackIndexer, 0, disconnectEndpoints);
+            redoStack.splice(stackIndexer, 0, connectEndpoints);
+            connectionArray = [];
+            connectionArray.push(info.connection.endpoints[0].getUuid(),
+                info.connection.endpoints[1].getUuid(),
+                info.connection.parameters);
+            objectStack.splice(stackIndexer, 0, connectionArray);
+            stackIndexer++;
+            stackSize++;
+        }
     });
-    jsPlumbInstance.bind("beforeDrop", function(info){
+    jsPlumbInstance.bind("beforeDrop", function(info) {
         return checkDuplicateConnection(info.connection) &&
             checkSourceTargetEquality(info.connection) &&
             checkCompatibility(info.connection.sourceId, info.connection.targetId);
     });
-    jsPlumbInstance.bind("connectionDetached", function(info){
+    jsPlumbInstance.bind("connectionDetached", function(info) {
         updateConnections(info.connection, true);
+
+        if (clickEvent === 0) {
+            undoStack.splice(stackIndexer, 0, connectEndpoints);
+            redoStack.splice(stackIndexer, 0, disconnectEndpoints);
+            connectionArray = [];
+            connectionArray.push(info.connection.endpoints[0].getUuid(),
+                info.connection.endpoints[1].getUuid(),
+                info.connection.parameters);
+            objectStack.splice(stackIndexer, 0, connectionArray);
+            stackIndexer++;
+            stackSize++;
+        }
     });
-    jsPlumbInstance.bind("connectionMoved", function(info){
+    jsPlumbInstance.bind("connectionMoved", function(info) {
         updateConnections(info.connection, true);
     });
-    jsPlumbInstance.bind("contextmenu", function(info){
+    jsPlumbInstance.bind("contextmenu", function(info) {
         jsPlumbInstance.detach(info);
-        $("#informationContainer").empty();
+        $("#informationPanel").hide();
+        $("#dragPanel").show();
     });
-    jsPlumbInstance.bind("click", function(info){
-        addInfo($("#"+info.sourceId.split('_')[1]).attr("alt") + ' - ' + $("#"+info.targetId.split('_')[1]).attr("alt"),
-                info.parameters,
-                "connection",
-                info);
+    jsPlumbInstance.bind("dblclick", function(info) {
+        $('.element').removeClass('elementSelected');
+        jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
+        info.setPaintStyle({strokeStyle:"red", lineWidth: 8});
+        addInfo($("#" + info.sourceId.split('_')[1]).attr("alt") + ' - ' + $("#" + info.targetId.split('_')[1]).attr("alt"),
+            info.parameters,
+            "connection",
+            info);
     });
     jsPlumbInstance.draggable(jsPlumb.getSelector(".element"), {
         containment: $("#dropContainer")
     });
 
+    $(".elementTemplate").click(function() {
+        addElement($(this).attr("id"), (++elementIndex) + "_" + $(this).attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
 
-    /**
-     * Handling click event on elements.
-     */
-    $(".elementTemplate").click(function(){
-        addElement($(this).prop("id"),
-            (++elementIndex) + "_" + $(this).prop("id"),
-            $(this).position().top,
-            4,
-            "");
+        undoStack.splice(stackIndexer, 0, removeElement);
+        redoStack.splice(stackIndexer, 0, addElement);
+        objectStack.splice(stackIndexer, 0, newInstance);
+        stackSize++;
+        stackIndexer++;
     });
 
-
-    /**
-     * Handling mouse enter event on elementTemplate for diplaying info.
-     */
-    $(".elementTemplate").mouseenter(function(){
-        addInfo($(this).attr("alt"), $(this).attr("desc"), "info");
+    $("#closeInfoPanel").click(function(){
+        $('#informationPanel').hide();
+        $('#dragPanel').show();
+        $('.element').removeClass('elementSelected');
+        jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
     });
 
-
-    /**
-     * Handling click event on clear button.
-     */
-    $("#clearService").click(function(e){
-        jsPlumbInstance.detachEveryConnection()
-                       .deleteEveryEndpoint();
+    $("#clearService").click(function() {
+        jsPlumbInstance.detachEveryConnection();
+        jsPlumbInstance.deleteEveryEndpoint();
         $(".element").remove();
         setServiceStatus("unsaved");
-        
+
         jsPlumbInstance.repaintEverything();
-        
+
         elementIndex = 0;
     });
 
-    
-    /**
-     * Handling status change in case of renaming service.
-     */
-    $("#serviceName").keydown(function(){
+    $("#undoMovement").click(function() {
+        if (stackIndexer <= 0) return;
+        stackIndexer--;
+        clickEvent = 1;
+        object = objectStack[stackIndexer];
+        undoStack[stackIndexer](object);
+        clickEvent = 0;
+    });
+
+    $("#redoMovement").click(function() {
+        if (stackIndexer >= stackSize) return;
+        clickEvent = 1;
+        object = objectStack[stackIndexer];
+        redoStack[stackIndexer++](object);
+        clickEvent = 0;
+    });
+
+    $(".elementTemplateInfo").click(function() {
+        id = $(this).attr("element");
+
+        addInfo($("#" + id).attr("alt"), $("#" + id).attr("desc"), "elementTemplate", $("#" + id));
+    });
+
+
+    $("#serviceName").keydown(function() {
         setServiceStatus("unsaved");
     });
 
-    /**
-     * Handling click event on save button.
-     */
-    $("#saveService").click(function(){
+    $("#saveService").click(function() {
         serviceName = $("#serviceName").text();
         connectionSet = [];
         instanceSet = [];
 
-        $.each(elementConnections, function(index){
+        $.each(elementConnections, function(index) {
             connectionSet.push({
                 "sourceId": elementConnections[index].sourceId,
                 "sourceEndpoint": elementConnections[index].endpoints[0].getUuid(),
@@ -429,7 +625,7 @@ jsPlumb.ready(function(){
             });
         });
 
-        $.each($(".element"), function(index){
+        $.each($(".element"), function() {
             instanceSet.push({
                 "displayId": $(this).prop("id"),
                 "posX": Math.floor($(this).position().left),
@@ -447,66 +643,81 @@ jsPlumb.ready(function(){
                 "elements": instanceSet
             })
         }, function(resultValue) {
-            if (window.location.href.indexOf("/create") >= 0) {
-                window.location = "../" + resultValue;
+            if (window.location.href.indexOf(
+                    "/create") >= 0) {
+                window.location = "../" +
+                    resultValue;
             } else {
-                addMessage("Saved successfully.", "success");
+                addMessage("Saved successfully.","success");
                 setServiceStatus("saved");
             }
         });
     });
 
 
-    /**
-     * Handling window resize event for preventing elements against overflow.
-     */
-    $(window).resize(function(){
-        $(".element").each(function(){
+    $(window).resize(function() {
+        $(".element").each(function() {
             if ($(this).position().left + $(this).width() > $("#dropContainer").position().left + $("#dropContainer").width()) {
-                $(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() + 4);
+                $(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() +4);
             }
         });
         jsPlumbInstance.repaintEverything();
     });
 
 
-    /**
-     * Handling click events on scroll buttons.
-     */
-    $("#dragContainerScrollUp").click(function(){
-        if (dragContainerScroll > 0) dragContainerScroll -= 1;
-        $("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
+    scrollContainer = function(direction) {
+        dragContainerScroll += direction;
+
+        if (dragContainerScroll == $(".elementTemplate").length - 2) dragContainerScroll--;
+        if (dragContainerScroll == -1) dragContainerScroll++;
+
+        $("#dragContainer").scrollTop(
+            dragContainerScroll * $("#elementTemplatePanel").height()
+        );
+    };
+
+
+    mouseScrollContainer = function(ev) {
+        var e = window.event || ev;
+        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
+
+        $('body').addClass("noScroll");
+
+        scrollContainer(-delta);
+
+        $('body').removeClass("noScroll");
+    };
+
+    $("#dragContainerScrollUp").click(function() {
+        scrollContainer(-1);
     });
 
-    $("#dragContainerScrollDown").click(function(){
-        if (dragContainerScroll < $(".elementTemplate").length - 3) dragContainerScroll += 1;
-        $("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
+    $("#dragContainerScrollDown").click(function() {
+        scrollContainer(1);
     });
 
+    var dragContainer = document.getElementById("dragContainer");
+
+    if (dragContainer.addEventListener) {
+        dragContainer.addEventListener("mousewheel", mouseScrollContainer, false);
+        dragContainer.addEventListener("DOMMouseScroll", mouseScrollContainer, false);
+    } else dragContainer.attachEvent("onmousewheel", mouseScrollContainer);
+
 
-    /**
-     * Handling search feature.
-     */
-    $("#searchElementTemplate").keyup(function(){
-        $(".elementTemplate").each(function(){
+    $("#searchElementTemplate").keyup(function() {
+        $(".elementTemplate").each(function() {
             $(this).parent().parent().hide();
-            if ($(this).attr("alt").toLowerCase()
-                .indexOf($("#searchElementTemplateInput")
-                .val().toLowerCase()) >= 0) {
+            if ($(this).attr("alt").toLowerCase().indexOf($("#searchElementTemplateInput").val().toLowerCase()) >= 0)
                 $(this).parent().parent().show();
-            }
         });
     });
 
 
-    /**
-     * Handling page load event.
-     */
-    $(document).ready(function(){
+    $(document).ready(function() {
         $.post("", {
             event: "loadService"
         }, function(resultValue) {
-            if(resultValue === "") return;
+            if (resultValue === "") return;
 
             result = jQuery.parseJSON(resultValue);
             $("#serviceName").text(result.serviceName);
@@ -518,18 +729,17 @@ jsPlumb.ready(function(){
                     element.anchors,
                     element.parameters,
                     element.posX + "px");
-                if (elementIndex < element.displayId.split('_')[0]) {
+                if (elementIndex < element.displayId.split('_')[0])
                     elementIndex = element.displayId.split('_')[0];
-                }
                 elementIndex++;
             });
 
-            $.each(result.elementConnections, function(i, connection) {
-                connectionObject = jsPlumbInstance.connect({
-                    uuids: [connection.sourceEndpoint, connection.targetEndpoint]
+            clickEvent = 1;
+            $.each(result.elementConnections,
+                function(i, connection) {
+                    connectEndpoints([connection.sourceEndpoint, connection.targetEndpoint, connection.parameters]);
                 });
-                connectionObject.parameters = connection.parameters;
-            });
+            clickEvent = 0;
             setServiceStatus("saved");
         });
     });

circle/setty/templates/setty/index.html

@@ -10,42 +10,71 @@
 <link type="text/css" rel="stylesheet" href="{% static 'setty/style.css' %}">
 
 <div class="row" id="workspace">
-    <div class="col-xs-2" id="dragPanel">
-        <div class="panel panel-default text-center">
+    <div class="col-md-3">
+        <div class="panel panel-default initHidden" id="informationPanel">
+            <div class="panel-heading text-center">
+                <div class="row">
+                    <div class="col-xs-2 text-left">
+                        <button class="btn btn-danger btn-xs" id="closeInfoPanel">
+                            <i class="fa fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="col-xs-8">
+                        <h3 class="no-margin">{% trans 'Information' %}</h3>
+                    </div>
+                    <div class="col-xs-2">
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body" id="informationContainer">
+            </div>
+            <div class="panel-footer">
+                <label></label>
+            </div>
+        </div>
+
+        <div class="panel panel-default text-center" id="dragPanel">
             <div class="panel-heading">
                 <div class="row">
                    <h3 class="no-margin">{% trans 'Elements' %}</h3>
                 </div>
             </div>
-            <div class="panel-heading">
+            <div class="panel-heading text-center">
                 <div class="row" id="searchElementTemplate">
                     <div class="col-md-12">
                         <input type="text" class="form-control" id="searchElementTemplateInput" placeholder="{% trans 'Search' %}"/>
                     </div>
                     &nbsp;
-                </div>
-                <div class="row">
                     <div class="col-md-12">
-                        <button class="btn btn-primary btn-xs btn-block" id="dragContainerScrollUp"><i class="fa fa-chevron-up"></i></button>
+                        <button class="btn btn-primary btn-xs btn-block" id="dragContainerScrollUp">
+                            <i class="fa fa-chevron-up"></i>
+                        </button>
                     </div>
                 </div>
             </div>
-            <div class="panel-body" id="dragContainer">
-            {% for element in elementTemplateList %}
-                <div class="row" id="elementTemplatePanel">
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <label class="no-margin">{{ element.name }}</label>
-                        </div>
-                        <div class="panel-body">
-                            <img class="elementTemplate" type="{% for target in element.compatibles.all %}{{ target.id }},{% endfor %}"
-                                 id="{{ element.id }}" desc="{{ element.description }}"
-                                 src="{% static element.logo %}" alt="{{ element.name }}"
-                                 ondragstart="return false;"/>
+            <div class="panel-body container-fluid" id="dragContainer">
+                {% for element in elementTemplateList %}
+                    <div class="col-md-12 col-sm-4" id="elementTemplatePanel">
+                        <div class="panel panel-default">
+                            <div class="panel-heading">
+                                <div class="row text-center">
+                                    <div class="col-xs-9 text-center">
+                                        <label class="no-margin">{{ element.name }}</label>
+                                    </div>
+                                    <div class="col-xs-3 text-right">
+                                        <button class="btn btn-primary btn-xs elementTemplateInfo" element="{{ element.id }}"><i class="fa fa-info"></i></button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="panel-body">
+                                <img class="elementTemplate" type="{% for target in element.compatibles.all %}{{ target.id }},{% endfor %}"
+                                     id="{{ element.id }}" desc="{{ element.description }}"
+                                     src="{% static element.logo %}" alt="{{ element.name }}"
+                                     ondragstart="return false;"/>
+                            </div>
                         </div>
                     </div>
-                </div>
-            {% endfor %}
+                {% endfor %}
             </div>
             <div class="panel-footer">
                 <div class="row">
@@ -57,68 +86,34 @@
         </div>
     </div>
 
-    <div class="col-xs-8">
+    <div class="col-md-9">
         <div class="panel panel-default">
             <div class="panel-heading text-center">
                 <div class="row">
-                    <div class="col-xs-4">
+                    <div class="col-xs-2">
+                        <button class="btn btn-info btn-xs" id="undoMovement" title="{% trans 'Undo' %}"><i class="fa fa-undo"></i></button>
+                    </div>
+                    <div class="col-xs-2">
+                        <button class="btn btn-info btn-xs" id="redoMovement" title="{% trans 'Redo' %}"><i class="fa fa-repeat"></i></button>
                     </div>
                     <div class="col-xs-4">
                         <h3 class="no-margin" id="serviceName" contenteditable="true">Service</h3>
                     </div>
                     <div class="col-xs-2 text-right">
-                        <button class="btn btn-info btn-xs" id="clearService">{% trans 'Clear' %}</button>
-                    </div>
+                        <button class="btn btn-info btn-xs" id="clearService" title="{% trans 'Clear workspace' %}"><i class="fa fa-trash-o"></i></button>
+                    </div>
                     <div class="col-xs-2 text-right">
-                        <button class="btn btn-success btn-xs" id="saveService">{% trans 'Save' %}</button>
+                        <button class="btn btn-success btn-xs" id="saveService" title="{% trans 'Save workspace' %}"><i class="fa fa-floppy-o"></i></button>
                     </div>
                 </div>
             </div>
             <div class="panel-body" id="dropContainer" oncontextmenu="return false;"></div>
-            <div class="panel-footer"></div>
-        </div>
-    </div>
-
-     <div class="col-xs-2" id="informationPanel">
-        <div class="panel panel-default no-margin">
-            <div class="panel-heading text-center">
-                <div class="row">
-                    <h3 class="no-margin">{% trans 'Information' %}</h3>
-                </div>
+            <div class="panel-footer no-margin text-left">
+                <label class="no-margin" id="serviceStatus"></label>
             </div>
-            <div class="panel-body no-margin" id="informationContainer"></div>
-            <div class="panel-footer"></div>
         </div>
     </div>
-</div>
-
-
-<!-- Modal dialogs -->
 
-
-<div class="modal fade" id="saveWarningDialog" role="dialog">
-    <div class="modal-dialog">
-        <!-- Modal content-->
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                <h4 class="modal-title">{% trans 'Connection info' %}</h4>
-            </div>
-            <div class="modal-body">
-                <textarea id="connectionInfoParameters" class="form-control" rows="3" placeholder="Parameters" style="resize: none;"></textarea>
-            </div>
-            <div class="modal-footer">
-                <div class="row">
-                    <div class="col-md-2 col-md-push-8">
-                        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="return false;">{% trans 'Return' %}</button>
-                    </div>
-                    <div class="col-md-2 col-md-push-8">
-                        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="return true;">{% trans 'Close' %}</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
 </div>
 
 {% endblock %}