Added undo/redo feature

* new file : HistoryManager.js
* can undo (ctrl-z) and redo (ctrl-y) changes performed through the
tools
* history states are recorded per frame
* a new state is recorder each time a tool is released (introduced
TOOL_RELEASED event for this purpose)
* a duplicated frame doesn't inherit the history states of the original
frame
* there is no limit to the number of states that can be stored per frame
* actions such as creating/duplicating/deleting a frame are not
concerned by this update

index.html

@@ -93,6 +93,7 @@
   <script src="js/controller/AnimatedPreviewController.js"></script>
   <script src="js/rendering/FrameRenderer.js"></script>
   <script src="js/LocalStorageService.js"></script>
+  <script src="js/HistoryManager.js"></script>
   <script src="js/Palette.js"></script>
   <script src="js/Notification.js"></script>
   <script src="js/drawingtools/BaseTool.js"></script>

js/Events.js

@@ -1,6 +1,7 @@
 Events = {
 	
 	TOOL_SELECTED : "TOOL_SELECTED",
+	TOOL_RELEASED : "TOOL_RELEASED",
 	COLOR_SELECTED: "COLOR_SELECTED",
 	COLOR_USED: "COLOR_USED",
 

js/HistoryManager.js

@@ -0,0 +1,40 @@
+(function () {
+	var ns = $.namespace("pskl");
+	ns.HistoryManager = function () {};
+
+	ns.HistoryManager.prototype.init = function () {
+        document.body.addEventListener('keyup', this.onKeyup.bind(this));
+        $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
+	};
+
+    ns.HistoryManager.prototype.saveState = function () {
+      piskel.getCurrentFrame().saveState();
+    };
+
+	ns.HistoryManager.prototype.onKeyup = function (evt) {
+      if (evt.ctrlKey && evt.keyCode == 90) { // CTRL + Z
+        this.undo();
+      }
+
+      if (evt.ctrlKey && evt.keyCode == 89) { // CTRL+ Y
+        this.redo();
+      }
+    };
+
+    ns.HistoryManager.prototype.undo = function () {
+      piskel.getCurrentFrame().loadPreviousState();
+      this.redraw();
+    };
+
+    ns.HistoryManager.prototype.redo = function () {
+      piskel.getCurrentFrame().loadNextState();
+      this.redraw();
+    };
+
+    ns.HistoryManager.prototype.redraw = function () {
+      piskel.drawingController.renderFrame();
+      piskel.previewsController.createPreviews();
+    };
+
+    ns.HistoryManager = new ns.HistoryManager();
+})();

js/model/Frame.js

@@ -1,58 +1,85 @@
-(function () {
-	var ns = $.namespace("pskl.model");
-	
-	ns.Frame = function (pixels) {
-		this.pixels = pixels;
-	};
-
-	ns.Frame.createEmpty = function (width, height) {
-		var pixels = []; //new Array(width);
-		for (var columnIndex=0; columnIndex < width; columnIndex++) {
-			var columnArray = [];
-			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
-				columnArray.push(Constants.TRANSPARENT_COLOR);
-			}
-			pixels[columnIndex] = columnArray;
-    	}
-		return new ns.Frame(pixels);
-	};
-
-	ns.Frame.createEmptyFromFrame = function (frame) {
-		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
-	};
-
-	ns.Frame.prototype.clone = function () {
-		var clone = ns.Frame.createEmptyFromFrame(this);
-		for (var col = 0 ; col < clone.getWidth() ; col++) {
-			for (var row = 0 ; row < clone.getHeight() ; row++) {
-				clone.setPixel(col, row, this.getPixel(col, row));
-			}
-		}
-		return clone;
-	};
-
-	ns.Frame.prototype.serialize = function () {
-		return JSON.stringify(this.pixels);
-	};
-
-	ns.Frame.prototype.setPixel = function (col, row, color) {
-		this.pixels[col][row] = color;
-	};
-
-	ns.Frame.prototype.getPixel = function (col, row) {
-		return this.pixels[col][row];
-	};
-
-	ns.Frame.prototype.getWidth = function () {
-		return this.pixels.length;
-	};
-
-	ns.Frame.prototype.getHeight = function () {
-		return this.pixels[0].length;
-	};
-
-	ns.Frame.prototype.containsPixel = function (col, row) {
-		return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
-	};
-
+(function () {
+	var ns = $.namespace("pskl.model");
+	
+	ns.Frame = function (pixels) {
+		this.pixels = pixels;
+		this.previousStates = [pixels];
+		this.stateIndex = 0;
+	};
+
+	ns.Frame.createEmpty = function (width, height) {
+		var pixels = []; //new Array(width);
+		for (var columnIndex=0; columnIndex < width; columnIndex++) {
+			var columnArray = [];
+			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
+				columnArray.push(Constants.TRANSPARENT_COLOR);
+			}
+			pixels[columnIndex] = columnArray;
+    	}
+		return new ns.Frame(pixels);
+	};
+
+	ns.Frame.createEmptyFromFrame = function (frame) {
+		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
+	};
+
+	ns.Frame.prototype.clone = function () {
+		return new ns.Frame(this._clonePixels());
+	};
+
+	ns.Frame.prototype._clonePixels = function () {
+		var pixels = [];
+		for (var col = 0 ; col < this.getWidth() ; col++) {
+			pixels[col] = this.pixels[col].slice(0 , this.getHeight());
+		}
+		return pixels;
+	};
+
+	ns.Frame.prototype.serialize = function () {
+		return JSON.stringify(this.pixels);
+	};
+
+	ns.Frame.prototype.setPixel = function (col, row, color) {
+		this.pixels[col][row] = color;
+	};
+
+	ns.Frame.prototype.getPixel = function (col, row) {
+		return this.pixels[col][row];
+	};
+
+	ns.Frame.prototype.getWidth = function () {
+		return this.pixels.length;
+	};
+
+	ns.Frame.prototype.getHeight = function () {
+		return this.pixels[0].length;
+	};
+
+	ns.Frame.prototype.containsPixel = function (col, row) {
+		return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
+	};
+
+	ns.Frame.prototype.saveState = function () {
+		// remove all states past current state
+		this.previousStates.length = this.stateIndex + 1;
+		// push new state
+		this.previousStates.push(this._clonePixels());
+		// set the stateIndex to latest saved state
+		this.stateIndex = this.previousStates.length - 1;
+	};
+
+	ns.Frame.prototype.loadPreviousState = function () {
+		if (this.stateIndex >= 0) {
+			this.stateIndex--;
+			this.pixels = this.previousStates[this.stateIndex];
+		}	
+	};
+
+	ns.Frame.prototype.loadNextState = function () {
+		if (this.stateIndex < this.previousStates.length - 1) {
+			this.stateIndex++;
+			this.pixels = this.previousStates[this.stateIndex];
+		}	
+	};
+
 })();

js/piskel.js

@@ -79,7 +79,8 @@ $.namespace("pskl");
 
       this.animationController.init();
       this.previewsController.init();
-          
+
+      pskl.HistoryManager.init();
       pskl.NotificationService.init();
       pskl.LocalStorageService.init(frameSheet);
 
@@ -154,7 +155,7 @@ $.namespace("pskl");
 
     setActiveFrame: function(index) {
       activeFrameIndex = index;
-      this.drawingController.frame = frameSheet.getFrameByIndex(index); 
+      this.drawingController.frame = this.getCurrentFrame(); 
     },
 
     setActiveFrameAndRedraw: function(index) {
@@ -176,6 +177,10 @@ $.namespace("pskl");
       return activeFrameIndex;
     },
 
+    getCurrentFrame : function () {
+      return frameSheet.getFrameByIndex(activeFrameIndex);
+    },
+
     initDrawingArea : function() {
         drawingAreaContainer = $('#drawing-canvas-container')[0];
         document.body.addEventListener('mouseup', this.onMouseup.bind(this));
@@ -261,6 +266,8 @@ $.namespace("pskl");
         if(isRightClicked) {
           $.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
         }
+
+
         isClicked = false;
         isRightClicked = false;
         var spriteCoordinate = this.getSpriteCoordinate(event);
@@ -271,11 +278,11 @@ $.namespace("pskl");
           this.drawingController
         );
 
+
+        $.publish(Events.TOOL_RELEASED);
         // TODO: Remove that when we have the centralized redraw loop
         this.previewsController.createPreviews();
       }
-
-      
     },
 
     onCanvasContextMenu : function (event) {