Added undo for delete button

lang/en/home.php

@@ -140,4 +140,6 @@
     $g_lang["traversal_order"]  = "Traversal order: ";
 
     $g_lang["curve_edge"]       = "Edge bend";
+    $g_lang["undo"]             = "Undo";
+
 ?>

lang/ru/home.php

@@ -143,4 +143,5 @@
     $g_lang["traversal_order"]  = "Порядок обхода: ";
 
     $g_lang["curve_edge"]       = "Изгиб дуги";
+    $g_lang["undo"]             = "Отменить";
 ?>

script/Appilcation.js

@@ -24,6 +24,7 @@ function Application(document, window)
     this.SetDefaultTransformations();
     this.algorithmsValues = {};
     this.userAction = function(){};
+    this.undoStack  = [];
 };
 
 // List of graph.
@@ -39,7 +40,8 @@ Application.prototype.handler = null;
 Application.prototype.status = {};
 // Graph name length
 Application.prototype.graphNameLength = 16;
-
+// Max undo stack size
+Application.prototype.maxUndoStackSize = 8;
 
 Application.prototype.getMousePos = function(canvas, e)
 {
@@ -449,6 +451,12 @@ Application.prototype.DeleteObject = function(object)
 	}
 }
 
+Application.prototype.IsCorrectObject = function(object)
+{
+	return (object instanceof BaseVertex) || 
+           (object instanceof BaseEdge);
+}
+
 Application.prototype.FindVertex = function(id)
 {
 	return this.graph.FindVertex(id);
@@ -1261,4 +1269,37 @@ Application.prototype.IsGraphFitOnViewport = function()
         && Math.floor(canvasPositionInverse.y + canvasHeight) >= Math.floor(graphBBox.maxPoint.y));
 }
 
+Application.prototype.PushToStack = function(actionName)
+{
+    var object        = {};
+    object.actionName = actionName;
+    object.graphSave  = this.graph.SaveToXML();    
     
+    this.undoStack.push(object);
+    
+    while (this.undoStack.length > this.maxUndoStackSize)
+    {
+        this.undoStack.shift();
+    }
+}
+
+Application.prototype.Undo = function()
+{
+    if (this.IsUndoStackEmpty())
+        return;
+    
+    var state  = this.undoStack.pop();
+    this.graph = new Graph();
+    this.graph.LoadFromXML(state.graphSave);
+    this.redrawGraph();
+}
+
+Application.prototype.ClearUndoStack = function()
+{
+    this.undoStack = [];
+}
+
+Application.prototype.IsUndoStackEmpty = function()
+{
+    return (this.undoStack.length <= 0);
+}

script/EventHandlers.js

@@ -14,6 +14,8 @@ function BaseHandler(app)
 {
 	this.app = app;
     this.app.setRenderPath([]);
+    
+    this.app.ClearUndoStack();
 }
 
 // Need redraw or nor.
@@ -541,9 +543,37 @@ DeleteGraphHandler.prototype.MouseDown = function(pos)
 {
 	var selectedObject = this.GetSelectedObject(pos);
         
-	this.app.DeleteObject(selectedObject);
+    if (!this.app.IsCorrectObject(selectedObject))
+        return;
     
+    this.app.PushToStack("Delete");
+    this.app.DeleteObject(selectedObject);
 	this.needRedraw = true;
+    
+    this.UpdateUndoButton();
+}
+
+DeleteGraphHandler.prototype.UpdateUndoButton = function()
+{
+    if (!this.app.IsUndoStackEmpty())
+    {
+        this.message = g_selectObjectToDelete + "<span style=\"float:right;\"><button type=\"button\" id=\"undoDelete\" class=\"btn btn-default btn-xs\"> " + g_Undo + " </button>";
+        
+        var handler = this;
+        $('#message').unbind();
+        $('#message').on('click', '#undoDelete', function(){
+            handler.app.Undo();
+            userAction("Undo.Delete");
+            
+            handler.UpdateUndoButton();
+        });
+    }
+    else
+    {
+        this.message = g_selectObjectToDelete;        
+    }
+
+    this.app.updateMessage();
 }
 
 /**

script/texts.js

@@ -97,6 +97,8 @@ var g_traversalOrder = "Traversal order: ";
 
 var g_curveEdge      = "Curved edge";
 
+var g_Undo           = "Undo";
+
 function loadTexts()
 {
 	g_textsSelectAndMove  = document.getElementById("SelectAndMoveObject").innerHTML;
@@ -193,4 +195,6 @@ function loadTexts()
     g_traversalOrder = document.getElementById("traversalOrder").innerHTML;
     
     g_curveEdge = document.getElementById("curveEdge").innerHTML;
+    
+    g_Undo = document.getElementById("undoTranslate").innerHTML;
 }

tpl/home.php

@@ -10,7 +10,7 @@
 
         <script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
 	    <script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
-        <script src="<?= Root("script/example.js?v=17")?>" ></script>
+        <script src="<?= Root("script/example.js?v=18")?>" ></script>
     </head>
 <!--
 <div class="pull-right">
@@ -434,6 +434,8 @@
     <p id="traversalOrder" class="translation"><?= L('traversal_order')?></p>
 
     <p id="curveEdge" class="translation"><?= L('curve_edge')?></p>
+    <p id="undoTranslate" class="translation"><?= L('undo')?></p>
+
 </section>
 <!--
 <script>