diff --git a/js/Constants.js b/js/Constants.js index f7c397dd..ffa5d03f 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -1,6 +1,16 @@ var Constants = { - DEFAULT_PEN_COLOR : '#000000', - TRANSPARENT_COLOR : "TRANSPARENT", + DEFAULT_PEN_COLOR : '#000000', + TRANSPARENT_COLOR : 'TRANSPARENT', + + /* + * Fake semi-transparent color used to highlight transparent + * strokes and rectangles: + */ + SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)', + + /* + * Default entry point for piskel web service: + */ PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com' }; \ No newline at end of file diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index dd5fd2ec..d1a99eef 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -21,8 +21,10 @@ context.clearRect(col * dpi, row * dpi, dpi, dpi); } else { - // TODO(vincz): Found a better design to update the palette, it's called too frequently. - $.publish(Events.COLOR_USED, [color]); + if(color != Constants.SELECTION_TRANSPARENT_COLOR) { + // TODO(vincz): Found a better design to update the palette, it's called too frequently. + $.publish(Events.COLOR_USED, [color]); + } context.fillStyle = color; context.fillRect(col * dpi, row * dpi, dpi, dpi); } diff --git a/js/drawingtools/Eraser.js b/js/drawingtools/Eraser.js index 7cda1fc4..51ebebc1 100644 --- a/js/drawingtools/Eraser.js +++ b/js/drawingtools/Eraser.js @@ -32,10 +32,4 @@ ns.Eraser.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) { this.applyToolAt(col, row, frame, color, canvas, dpi); }; - - ns.Eraser.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) { - // TODO: Create a afterRelease event hook or put that deep in the model - $.publish(Events.FRAMESHEET_UPDATED); - }; - })(); \ No newline at end of file diff --git a/js/drawingtools/PaintBucket.js b/js/drawingtools/PaintBucket.js index f953cb43..8ec5f3bc 100644 --- a/js/drawingtools/PaintBucket.js +++ b/js/drawingtools/PaintBucket.js @@ -21,18 +21,12 @@ var targetColor = pskl.utils.normalizeColor(frame[col][row]); //this.recursiveFloodFill_(frame, col, row, targetColor, color); this.queueLinearFloodFill_(frame, col, row, targetColor, color); - $.publish(Events.FRAMESHEET_UPDATED); - + // Draw in canvas: // TODO: Remove that when we have the centralized redraw loop this.drawFrameInCanvas(frame, canvas, dpi); }; - ns.PaintBucket.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) { - // TODO: Create a afterRelease event hook or put that deep in the model - $.publish(Events.FRAMESHEET_UPDATED); - }; - /** * Flood-fill (node, target-color, replacement-color): * 1. Set Q to the empty queue. diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js index c955aac1..d3c9622a 100644 --- a/js/drawingtools/Rectangle.js +++ b/js/drawingtools/Rectangle.js @@ -49,7 +49,7 @@ for(var i = 0; i< strokePoints.length; i++) { if(color == Constants.TRANSPARENT_COLOR) { - color = "rgba(255, 255, 255, 0.6)"; + color = Constants.SELECTION_TRANSPARENT_COLOR; } this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi); } @@ -84,9 +84,6 @@ // For now, we are done with the stroke tool and don't need an overlay anymore: this.removeCanvasOverlays(); - - // TODO: Create a afterRelease event hook or put that deep in the model - $.publish(Events.FRAMESHEET_UPDATED); }; /** diff --git a/js/drawingtools/SimplePen.js b/js/drawingtools/SimplePen.js index 8dbeb222..a7d4f45c 100644 --- a/js/drawingtools/SimplePen.js +++ b/js/drawingtools/SimplePen.js @@ -52,9 +52,4 @@ this.previousCol = col; this.previousRow = row; }; - - ns.SimplePen.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) { - // TODO: Create a afterRelease event hook or out that deep in the model - $.publish(Events.FRAMESHEET_UPDATED); - }; })(); diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js index 89d5ae21..5a88c495 100644 --- a/js/drawingtools/Stroke.js +++ b/js/drawingtools/Stroke.js @@ -62,7 +62,7 @@ // We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke. // When the stroke tool will be released, It will draw a transparent stroke, // eg deleting the equivalent of a stroke. - color = "rgba(255, 255, 255, 0.6)"; + color = Constants.SELECTION_TRANSPARENT_COLOR; } this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi); } @@ -96,10 +96,7 @@ } // For now, we are done with the stroke tool and don't need an overlay anymore: - this.removeCanvasOverlays(); - - // TODO: Create a afterRelease event hook or out that deep in the model - $.publish(Events.FRAMESHEET_UPDATED); + this.removeCanvasOverlays(); }; })(); diff --git a/js/frameSheetModel.js b/js/frameSheetModel.js index 1e8a18f1..f6feafd6 100644 --- a/js/frameSheetModel.js +++ b/js/frameSheetModel.js @@ -9,14 +9,21 @@ pskl.FrameSheetModel = (function() { var height; /** + * Create empty frame of dimension [width * height] with Constants.TRANSPARENT_COLOR + * as a default value. + * * @private */ var createEmptyFrame_ = function() { - var emptyFrame = new Array(width); + var emptyFrame = []; //new Array(width); for (var columnIndex=0; columnIndex < width; columnIndex++) { - emptyFrame[columnIndex] = new Array(height); + var columnArray = []; + for(var heightIndex = 0; heightIndex < height; heightIndex++) { + columnArray.push(Constants.TRANSPARENT_COLOR); + } + emptyFrame[columnIndex] = columnArray; } - return emptyFrame; + return emptyFrame; }; /** diff --git a/js/piskel.js b/js/piskel.js index 7852ee35..fabb0bfc 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -62,15 +62,15 @@ $.namespace("pskl"); frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight); frameSheet.addEmptyFrame(); this.setActiveFrame(0); - + pskl.NotificationService.init(); pskl.LocalStorageService.init(frameSheet); // TODO: Add comments - var frameId = this.getFrameIdFromUrl(); - if (frameId) { - $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + frameId + "]"}]); - this.loadFramesheetFromService(frameId); + var framesheetId = this.getFramesheetIdFromUrl(); + if (framesheetId) { + $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]); + this.loadFramesheetFromService(framesheetId); } else { this.finishInit(); pskl.LocalStorageService.displayRestoreNotification(); @@ -102,8 +102,9 @@ $.namespace("pskl"); pskl.ToolSelector.init(); }, - getFrameIdFromUrl : function() { + getFramesheetIdFromUrl : function() { var href = window.location.href; + // TODO: Change frameId to framesheetId on the backend if (href.indexOf('frameId=') != -1) { return href.substring(href.indexOf('frameId=')+8); } @@ -111,18 +112,22 @@ $.namespace("pskl"); loadFramesheetFromService : function (frameId) { var xhr = new XMLHttpRequest(); + // TODO: Change frameId to framesheetId on the backend xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true); xhr.responseType = 'text'; xhr.onload = function(e) { frameSheet.deserialize(this.responseText); + piskel.setActiveFrame(0); $.publish(Events.HIDE_NOTIFICATION); piskel.finishInit(); + piskel.setActiveFrameAndRedraw(0); }; xhr.onerror = function () { $.publish(Events.HIDE_NOTIFICATION); piskel.finishInit(); + piskel.setActiveFrameAndRedraw(0); }; xhr.send(); @@ -136,12 +141,13 @@ $.namespace("pskl"); setActiveFrameAndRedraw: function(index) { this.setActiveFrame(index); + // When redraw engine is refactored, remove the following crap and + // trigger an event instead: + // Update drawing canvas: - this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi); - + this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi); // Update slideshow: this.createPreviews(); - // Update animation preview: animIndex = 0; },