diff --git a/index.html b/index.html
index 2ebd044e..2d444879 100644
--- a/index.html
+++ b/index.html
@@ -93,6 +93,7 @@
+
diff --git a/js/Events.js b/js/Events.js
index 54d8b48f..2a1545b8 100644
--- a/js/Events.js
+++ b/js/Events.js
@@ -1,6 +1,7 @@
Events = {
TOOL_SELECTED : "TOOL_SELECTED",
+ TOOL_RELEASED : "TOOL_RELEASED",
COLOR_SELECTED: "COLOR_SELECTED",
COLOR_USED: "COLOR_USED",
diff --git a/js/HistoryManager.js b/js/HistoryManager.js
new file mode 100644
index 00000000..4a3c5c4b
--- /dev/null
+++ b/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();
+})();
\ No newline at end of file
diff --git a/js/model/Frame.js b/js/model/Frame.js
index 552f6b93..19e52064 100644
--- a/js/model/Frame.js
+++ b/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 = [this._clonePixels()];
+ 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];
+ }
+ };
+
})();
\ No newline at end of file
diff --git a/js/piskel.js b/js/piskel.js
index da2f09c6..b16e8382 100644
--- a/js/piskel.js
+++ b/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) {