Merge pull request #42 from juliandescottes/add-historymgr

Added undo/redo feature
This commit is contained in:
Julian Descottes 2012-09-06 16:14:11 -07:00
commit 71962cf982
5 changed files with 137 additions and 61 deletions

View File

@ -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>

View File

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

40
js/HistoryManager.js Normal file
View File

@ -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();
})();

View File

@ -3,6 +3,8 @@
ns.Frame = function (pixels) {
this.pixels = pixels;
this.previousStates = [this._clonePixels()];
this.stateIndex = 0;
};
ns.Frame.createEmpty = function (width, height) {
@ -22,13 +24,15 @@
};
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 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 clone;
return pixels;
};
ns.Frame.prototype.serialize = function () {
@ -52,7 +56,30 @@
};
ns.Frame.prototype.containsPixel = function (col, row) {
return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
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];
}
};
})();

View File

@ -80,6 +80,7 @@ $.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) {