From 17bf7b38076a530f1210bb3649a4176edcde2bb7 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 7 Sep 2012 00:18:59 +0200 Subject: [PATCH 1/4] 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 | 1 + js/Events.js | 1 + js/HistoryManager.js | 40 ++++++++++++ js/model/Frame.js | 141 ++++++++++++++++++++++++++----------------- js/piskel.js | 15 +++-- 5 files changed, 137 insertions(+), 61 deletions(-) create mode 100644 js/HistoryManager.js 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..346ea412 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 = [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]; + } + }; + })(); \ 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) { From 14bf3f97c50c1ed4005fb1f0d735439a28086cf1 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 7 Sep 2012 00:56:31 +0200 Subject: [PATCH 2/4] fixed bug when reaching stage 0 --- js/model/Frame.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/model/Frame.js b/js/model/Frame.js index 346ea412..19e52064 100644 --- a/js/model/Frame.js +++ b/js/model/Frame.js @@ -3,7 +3,7 @@ ns.Frame = function (pixels) { this.pixels = pixels; - this.previousStates = [pixels]; + this.previousStates = [this._clonePixels()]; this.stateIndex = 0; }; @@ -56,7 +56,7 @@ }; 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 () { @@ -69,10 +69,10 @@ }; ns.Frame.prototype.loadPreviousState = function () { - if (this.stateIndex >= 0) { + if (this.stateIndex > 0) { this.stateIndex--; this.pixels = this.previousStates[this.stateIndex]; - } + } }; ns.Frame.prototype.loadNextState = function () { From f06f03a7f78c846a8418db5e04d8ac078e29ab95 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 7 Sep 2012 01:08:25 +0200 Subject: [PATCH 3/4] Added simple move tool --- css/tools.css | 8 ++ index.html | 2 + js/ToolSelector.js | 3 +- js/drawingtools/Stroke.js | 2 +- js/model/Frame.js | 168 +++++++++++++++++++------------------- 5 files changed, 97 insertions(+), 86 deletions(-) diff --git a/css/tools.css b/css/tools.css index d4622d9c..28951210 100644 --- a/css/tools.css +++ b/css/tools.css @@ -45,6 +45,10 @@ background-image: url(../img/tools/icons/rectangle.png); } +.tool-icon.tool-move { + background-image: url(../img/tools/icons/rectangle.png); +} + /*.tool-icon.tool-palette { background-image: url(../img/tools/icons/color-palette.png); }*/ @@ -69,6 +73,10 @@ cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; } +.tool-rectangle .drawing-canvas-move:hover { + cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; +} + .tool-icon.selected { cursor: auto; background-color: #eee; diff --git a/index.html b/index.html index 2d444879..ef1cf081 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@
  • +
    • @@ -102,6 +103,7 @@ + diff --git a/js/ToolSelector.js b/js/ToolSelector.js index f00e3576..0f69feaf 100644 --- a/js/ToolSelector.js +++ b/js/ToolSelector.js @@ -14,7 +14,8 @@ pskl.ToolSelector = (function() { "eraser" : new pskl.drawingtools.Eraser(), "paintBucket" : new pskl.drawingtools.PaintBucket(), "stroke" : new pskl.drawingtools.Stroke(), - "rectangle" : new pskl.drawingtools.Rectangle() + "rectangle" : new pskl.drawingtools.Rectangle(), + "move" : new pskl.drawingtools.Move() }; var currentSelectedTool = toolInstances.simplePen; var previousSelectedTool = toolInstances.simplePen; diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js index a592fde2..92bb8450 100644 --- a/js/drawingtools/Stroke.js +++ b/js/drawingtools/Stroke.js @@ -34,7 +34,7 @@ // The fake canvas where we will draw the preview of the stroke: // Drawing the first point of the stroke in the fake overlay canvas: - drawer.updateOverlay(col, row, color); + drawer.overlay.setPixel(col, row, color); drawer.renderOverlay(); }; diff --git a/js/model/Frame.js b/js/model/Frame.js index 346ea412..d78d7fc5 100644 --- a/js/model/Frame.js +++ b/js/model/Frame.js @@ -1,85 +1,85 @@ -(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]; - } - }; - +(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 From 5f6fd068ebf080182d3bdd372d0d476a838f86e9 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Fri, 7 Sep 2012 01:14:51 +0200 Subject: [PATCH 4/4] added proper icon --- css/tools.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/tools.css b/css/tools.css index 28951210..7aeb3f49 100644 --- a/css/tools.css +++ b/css/tools.css @@ -46,7 +46,7 @@ } .tool-icon.tool-move { - background-image: url(../img/tools/icons/rectangle.png); + background-image: url(../img/tools/icons/hand.png); } /*.tool-icon.tool-palette { @@ -73,8 +73,8 @@ cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; } -.tool-rectangle .drawing-canvas-move:hover { - cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; +.tool-move .drawing-canvas-container:hover { + cursor: url(../img/tools/cursors/hand.png) 14 12, pointer; } .tool-icon.selected {