Dev environment : closure compiler + jshint update

Fixed error raised by closure compiler
Added es3 option to jshint (detect trailing commas)
Added curly option to jshint (missing curly braces for if/for blocks)
Removed trailing whitespaces (not enforced through jshint though)

Gruntfile.js

@@ -36,6 +36,8 @@ module.exports = function(grunt) {
         undef : true,
         latedef : true,
         browser : true,
+        curly : true,
+        es3 : true,
         globals : {'$':true, 'jQuery' : true, 'pskl':true, 'Events':true, 'Constants':true, 'console' : true, 'module':true, 'require':true}
       },
       files: [
@@ -61,17 +63,17 @@ module.exports = function(grunt) {
       }
     },
     ghost : {
-      default : getGhostConfig(3000),
+      'default' : getGhostConfig(3000),
       local : getGhostConfig(50)
     },
     concat : {
       options : {
-        separator : ';',
+        separator : ';'
       },
       dist : {
         src : piskelScripts,
-        dest : 'build/piskel-packaged.js',
+        dest : 'build/piskel-packaged.js'
-      },
+      }
     },
     uglify : {
       options : {
@@ -159,7 +161,7 @@ module.exports = function(grunt) {
   // Validate
   grunt.registerTask('lint', ['leadingIndent:jsFiles', 'leadingIndent:cssFiles', 'jshint']);
 
-  // Validate & Test 
+  // Validate & Test
   grunt.registerTask('test', ['leadingIndent:jsFiles', 'leadingIndent:cssFiles', 'jshint', 'compile', 'connect:test', 'ghost:default']);
 
   // Validate & Test (faster version) will NOT work on travis !!

js/Constants.js

@@ -13,7 +13,7 @@ var Constants = {
 
   PREVIEW_FILM_SIZE : 120,
 
-  DEFAULT_PEN_COLOR : '#000000',  
+  DEFAULT_PEN_COLOR : '#000000',
   TRANSPARENT_COLOR : 'TRANSPARENT',
   
   /*

js/Events.js

@@ -60,5 +60,5 @@ var Events = {
   REDO: "REDO",
   CUT: "CUT",
   COPY: "COPY",
-  PASTE: "PASTE"    
+  PASTE: "PASTE"
 };

js/controller/DrawingController.js

@@ -5,7 +5,7 @@
      * @public
      */
     this.piskelController = piskelController;
-    
+
     /**
      * @public
      */
@@ -21,12 +21,12 @@
       "dpi": this.calculateDPI_(),
       "supportGridRendering" : true
     };
-    
+
     this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
     this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
     this.layersDownRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-down-canvas");
     this.layersUpRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-up-canvas");
-    
+
 
     // State of drawing controller:
     this.isClicked = false;
@@ -39,7 +39,7 @@
 
   ns.DrawingController.prototype.init = function () {
     // this.render();
-    
+
     this.initMouseBehavior();
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
@@ -76,7 +76,7 @@
     this.container.mousedown($.proxy(this.onMousedown_, this));
     this.container.mousemove($.proxy(this.onMousemove_, this));
     body.mouseup($.proxy(this.onMouseup_, this));
-    
+
     // Deactivate right click:
     body.contextmenu(this.onCanvasContextMenu_);
   };
@@ -104,22 +104,22 @@
    */
   ns.DrawingController.prototype.onMousedown_ = function (event) {
     this.isClicked = true;
-    
+
     if(event.button == 2) { // right click
       this.isRightClicked = true;
       $.publish(Events.CANVAS_RIGHT_CLICKED);
     }
 
     var coords = this.getSpriteCoordinates(event);
-    
+
     this.currentToolBehavior.applyToolAt(
       coords.col, coords.row,
       this.getCurrentColor_(),
       this.piskelController.getCurrentFrame(),
       this.overlayFrame,
       this.wrapEvtInfo_(event)
-    );      
+    );
-      
+
     $.publish(Events.LOCALSTORAGE_REQUEST);
   };
 
@@ -132,7 +132,7 @@
     if ((currentTime - this.previousMousemoveTime) > 40 ) {
       var coords = this.getSpriteCoordinates(event);
       if (this.isClicked) {
-     
+
         this.currentToolBehavior.moveToolAt(
           coords.col, coords.row,
           this.getCurrentColor_(),
@@ -140,7 +140,7 @@
           this.overlayFrame,
           this.wrapEvtInfo_(event)
         );
-    
+
         // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
         // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
         // you don't need to draw anything when mousemoving and you request useless localStorage.
@@ -197,7 +197,7 @@
       evtInfo.button = Constants.RIGHT_BUTTON;
     }
     return evtInfo;
-  }; 
+  };
 
   /**
    * @private
@@ -239,7 +239,7 @@
       event.stopPropagation();
       event.cancelBubble = true;
       return false;
-    }   
+    }
   };
 
   ns.DrawingController.prototype.render = function () {
@@ -277,7 +277,7 @@
     if (this.serializedLayerFrame != serialized) {
       this.layersUpRenderer.clear();
       this.layersDownRenderer.clear();
-      
+
       var downLayers = layers.slice(0, currentLayerIndex);
       var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
       this.layersDownRenderer.render(downFrame);
@@ -336,13 +336,13 @@
     this.layersUpRenderer.updateDPI(dpi);
     this.layersDownRenderer.updateDPI(dpi);
     this.serializedLayerFrame ="";
-    
+
     var currentFrameHeight =  this.piskelController.getCurrentFrame().getHeight();
     var canvasHeight = currentFrameHeight * dpi;
     if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
       canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
     }
-    
+
     var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2);
     $('#column-wrapper').css({
       'top': verticalGapInPixel + 'px',

js/controller/PiskelController.js

@@ -49,7 +49,7 @@
   };
 
   // backward from framesheet
-  ns.PiskelController.prototype.getFrameByIndex = 
+  ns.PiskelController.prototype.getFrameByIndex =
     ns.PiskelController.prototype.getMergedFrameAt;
 
   ns.PiskelController.prototype.addEmptyFrame = function () {

js/controller/PreviewFilmController.js

@@ -63,7 +63,7 @@
   };
 
   ns.PreviewFilmController.prototype.createPreviews_ = function () {
-    
+
     this.container.html("");
     // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
     $(".tooltip").remove();
@@ -94,7 +94,7 @@
    * @private
    */
   ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
-    
+
     $("#preview-list").sortable({
       placeholder: "preview-tile-drop-proxy",
       update: $.proxy(this.onUpdate_, this),
@@ -124,7 +124,7 @@
    */
   ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
     var currentFrame = this.piskelController.getCurrentLayer().getFrameAt(tileNumber);
-    
+
     var previewTileRoot = document.createElement("li");
     var classname = "preview-tile";
     previewTileRoot.setAttribute("data-tile-number", tileNumber);
@@ -136,11 +136,11 @@
 
     var canvasContainer = document.createElement("div");
     canvasContainer.className = "canvas-container";
-    
+
     var canvasBackground = document.createElement("div");
     canvasBackground.className = "canvas-background";
     canvasContainer.appendChild(canvasBackground);
-    
+
     previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
 
     var cloneFrameButton = document.createElement("button");
@@ -156,7 +156,7 @@
     var renderingOptions = {"dpi": this.dpi };
     var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
     currentFrameRenderer.render(currentFrame);
-    
+
     previewTileRoot.appendChild(canvasContainer);
 
     if(tileNumber > 0 || this.piskelController.getFrameCount() > 1) {
@@ -178,7 +178,7 @@
     tileCount.className = "tile-overlay tile-count";
     tileCount.innerHTML = tileNumber;
     previewTileRoot.appendChild(tileCount);
-    
+
 
     return previewTileRoot;
   };
@@ -187,7 +187,7 @@
     // has not class tile-action:
     if(!evt.target.classList.contains('tile-overlay')) {
       this.piskelController.setCurrentFrameIndex(index);
-    }    
+    }
   };
 
   ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {

js/controller/settings/GifExportController.js

@@ -10,7 +10,7 @@
     this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
     this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
 
-    this.uploadFormJQ = $("[name=gif-export-upload-form]");    
+    this.uploadFormJQ = $("[name=gif-export-upload-form]");
     this.uploadFormJQ.submit(this.upload.bind(this));
 
     this.initRadioElements_();
@@ -53,7 +53,7 @@
       [1],
       [5],
       [10,true], //default
-      [20],
+      [20]
     ];
 
     for (var i = 0 ; i < dpis.length ; i++) {
@@ -68,7 +68,7 @@
     var value = dpi[0];
     var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
     var radio = pskl.utils.Template.createFromHTML(radioHTML);
-    
+
     if (dpi[1]) {
       radio.getElementsByTagName("input")[0].setAttribute("checked", "checked");
     }

js/drawingtools/BaseTool.js

@@ -9,7 +9,7 @@
   ns.BaseTool = function() {};
 
   ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {};
-  
+
   ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
 
   ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
@@ -27,7 +27,7 @@
       overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR);
 
       this.highlightedPixelCol = col;
-      this.highlightedPixelRow = row; 
+      this.highlightedPixelRow = row;
     }
   };
 
@@ -43,7 +43,7 @@
    * @private
    */
   ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
-    
+
     var pixels = [];
     var dx = Math.abs(x1-x0);
     var dy = Math.abs(y1-y0);
@@ -56,7 +56,10 @@
       // Do what you need to for this
       pixels.push({"col": x0, "row": y0});
 
-      if ((x0==x1) && (y0==y1)) break;
+      if ((x0==x1) && (y0==y1)) {
+        break;
+      }
+
       var e2 = 2*err;
       if (e2>-dy){
         err -= dy;

js/drawingtools/Circle.js

@@ -9,21 +9,21 @@
   ns.Circle = function() {
     this.toolId = "tool-circle";
     this.helpText = "Circle tool";
-    
+
     // Circle's first point coordinates (set in applyToolAt)
     this.startCol = null;
     this.startRow = null;
   };
 
   pskl.utils.inherit(ns.Circle, ns.BaseTool);
-  
+
   /**
    * @override
    */
   ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
     this.startCol = col;
     this.startRow = row;
-    
+
     // Drawing the first point of the rectangle in the fake overlay canvas:
     overlay.setPixel(col, row, color);
   };
@@ -41,7 +41,7 @@
   /**
    * @override
    */
-  ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {   
+  ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
     overlay.clear();
     if(frame.containsPixel(col, row)) { // cancel if outside of canvas
       // draw in frame to finalize
@@ -61,7 +61,7 @@
     var coords = pskl.PixelUtils.getOrderedRectangleCoordinates(x0, y0, x1, y1);
     var xC = (coords.x0 + coords.x1)/2;
     var yC = (coords.y0 + coords.y1)/2;
-    
+
     var rX = coords.x1 - xC;
     var rY = coords.y1 - yC;
 

js/drawingtools/Move.js

@@ -9,14 +9,14 @@
   ns.Move = function() {
     this.toolId = "tool-move";
     this.helpText = "Move tool";
-    
+
     // Stroke's first point coordinates (set in applyToolAt)
     this.startCol = null;
     this.startRow = null;
   };
 
   pskl.utils.inherit(ns.Move, ns.BaseTool);
-  
+
   /**
    * @override
    */
@@ -26,7 +26,7 @@
     this.frameClone = frame.clone();
   };
 
-  ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {  
+  ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {
     var colDiff = col - this.startCol, rowDiff = row - this.startRow;
     this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
   };

js/drawingtools/Rectangle.js

@@ -9,21 +9,21 @@
   ns.Rectangle = function() {
     this.toolId = "tool-rectangle";
     this.helpText = "Rectangle tool";
-    
+
     // Rectangle's first point coordinates (set in applyToolAt)
     this.startCol = null;
     this.startRow = null;
   };
 
   pskl.utils.inherit(ns.Rectangle, ns.BaseTool);
-  
+
   /**
    * @override
    */
   ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
     this.startCol = col;
     this.startRow = row;
-    
+
     // Drawing the first point of the rectangle in the fake overlay canvas:
     overlay.setPixel(col, row, color);
   };
@@ -41,7 +41,7 @@
   /**
    * @override
    */
-  ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {    
+  ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
     overlay.clear();
     if(frame.containsPixel(col, row)) { // cancel if outside of canvas
       // draw in frame to finalize

js/drawingtools/Stroke.js

@@ -16,14 +16,14 @@
   };
 
   pskl.utils.inherit(ns.Stroke, ns.BaseTool);
-  
+
   /**
    * @override
    */
   ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay) {
     this.startCol = col;
     this.startRow = row;
-    
+
     // When drawing a stroke we don't change the model instantly, since the
     // user can move his cursor to change the stroke direction and length
     // dynamically. Instead we draw the (preview) stroke in a fake canvas that
@@ -39,10 +39,10 @@
   ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay) {
     overlay.clear();
 
-    // When the user moussemove (before releasing), we dynamically compute the 
+    // When the user moussemove (before releasing), we dynamically compute the
     // pixel to draw the line and draw this line in the overlay canvas:
     var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
-    
+
     // Drawing current stroke:
     for(var i = 0; i< strokePoints.length; i++) {
 
@@ -51,10 +51,10 @@
         // If the stroke color is transparent, we won't be
         // able to see it during the movement.
         // 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, 
+        // When the stroke tool will be released, It will draw a transparent stroke,
-        // eg deleting the equivalent of a stroke.    
+        // eg deleting the equivalent of a stroke.
         color = Constants.SELECTION_TRANSPARENT_COLOR;
-      }     
+      }
       overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
     }
   };
@@ -73,8 +73,8 @@
         // Change model:
         frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
       }
-    } 
+    }
     // For now, we are done with the stroke tool and don't need an overlay anymore:
-    overlay.clear();   
+    overlay.clear();
   };
 })();

js/drawingtools/VerticalMirrorPen.js

@@ -11,7 +11,7 @@
   };
 
   pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
-  
+
 
   ns.VerticalMirrorPen.prototype.setMirrorContext = function() {
     this.swap = this.previousCol;
@@ -41,6 +41,6 @@
    * @private
    */
   ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
-    return frame.getWidth() - col - 1; 
+    return frame.getWidth() - col - 1;
   };
 })();

js/drawingtools/selectiontools/BaseSelect.js

@@ -9,7 +9,7 @@
   ns.BaseSelect = function() {
     this.secondaryToolId = "tool-move";
     this.BodyRoot = $('body');
-    
+
     // Select's first point coordinates (set in applyToolAt)
     this.startCol = null;
     this.startRow = null;
@@ -23,17 +23,17 @@
   ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
     this.startCol = col;
     this.startRow = row;
-    
+
     this.lastCol = col;
     this.lastRow = row;
-    
+
     // The select tool can be in two different state.
     // If the inital click of the tool is not on a selection, we go in "select"
     // mode to create a selection.
     // If the initial click is on a previous selection, we go in "moveSelection"
     // mode to allow to move the selection by drag'n dropping it.
     if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
-      
+
       this.mode = "select";
       this.onSelectStart_(col, row, color, frame, overlay);
     }
@@ -49,11 +49,11 @@
    */
   ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
     if(this.mode == "select") {
-      
+
       this.onSelect_(col, row, color, frame, overlay);
     }
     else if(this.mode == "moveSelection") {
-      
+
       this.onSelectionDrag_(col, row, color, frame, overlay);
     }
   };
@@ -61,11 +61,11 @@
   /**
    * @override
    */
-  ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {   
+  ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
     if(this.mode == "select") {
       this.onSelectEnd_(col, row, color, frame, overlay);
     } else if(this.mode == "moveSelection") {
-      
+
       this.onSelectionDragEnd_(col, row, color, frame, overlay);
     }
   };
@@ -77,7 +77,7 @@
    * @override
    */
   ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
-    
+
     if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
       // We're hovering the selection, show the move tool:
       this.BodyRoot.addClass(this.toolId);
@@ -135,14 +135,14 @@
     // we clone it to have a reference for the later shifting process.
     this.overlayFrameReference = overlay.clone();
   };
-  
+
   /** @private */
   ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {
     var deltaCol = col - this.lastCol;
     var deltaRow = row - this.lastRow;
-    
+
     var colDiff = col - this.startCol, rowDiff = row - this.startRow;
-    
+
     // Shifting selection on overlay frame:
     this.shiftOverlayFrame_(colDiff, rowDiff, overlay, this.overlayFrameReference);
 
@@ -150,7 +150,7 @@
     $.publish(Events.SELECTION_MOVE_REQUEST, [deltaCol, deltaRow]);
 
     this.lastCol = col;
-    this.lastRow = row; 
+    this.lastRow = row;
   };
 
   /** @private */

js/model/Frame.js

@@ -1,6 +1,6 @@
 (function () {
   var ns = $.namespace("pskl.model");
-  
+
   ns.Frame = function (width, height) {
     if (width && height) {
       this.width = width;
@@ -130,7 +130,7 @@
     if (this.stateIndex < this.previousStates.length - 1) {
       this.stateIndex++;
       this.setPixels(this.previousStates[this.stateIndex]);
-    } 
+    }
   };
 
   ns.Frame.prototype.isSameSize = function (otherFrame) {

js/model/FrameSheet.js

@@ -52,7 +52,7 @@
     return colors;
   };
 
-  // Could be used to pass around model using long GET param (good enough for simple models) and 
+  // Could be used to pass around model using long GET param (good enough for simple models) and
   // do some temporary locastorage
   ns.FrameSheet.prototype.serialize = function() {
     var serializedFrames = [];
@@ -73,7 +73,7 @@
       this.load(JSON.parse(serialized));
     } catch (e) {
       throw "Could not load serialized framesheet : " + e.message;
-    } 
+    }
   };
 
 
@@ -99,7 +99,7 @@
     $.publish(Events.FRAMESHEET_RESET);
   };
 
-  
+
   ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
     return (index >= 0 && index < this.frames.length);
   };
@@ -107,7 +107,7 @@
   ns.FrameSheet.prototype.getFrameByIndex = function(index) {
     if (isNaN(index)) {
       throw "Bad argument value for getFrameByIndex method: <" + index + ">";
-    } 
+    }
 
     if (!this.hasFrameAtIndex(index)) {
       throw "Out of bound index for frameSheet object.";

js/rendering/DrawingLoop.js

@@ -10,8 +10,8 @@
 
   ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
     var callbackObj = {
-      fn : callback, 
+      fn : callback,
-      scope : scope, 
+      scope : scope,
       args : args
     };
     this.callbacks.push(callbackObj);
@@ -51,9 +51,9 @@
 
   ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () {
     var requestAnimationFrame = window.requestAnimationFrame ||
-                  window.mozRequestAnimationFrame ||  
+                  window.mozRequestAnimationFrame ||
-                  window.webkitRequestAnimationFrame || 
+                  window.webkitRequestAnimationFrame ||
-                  window.msRequestAnimationFrame || 
+                  window.msRequestAnimationFrame ||
                   function (callback) { window.setTimeout(callback, 1000/60); };
 
     return requestAnimationFrame;

js/rendering/FrameRenderer.js

@@ -10,7 +10,7 @@
     if(container === undefined) {
       throw 'Bad FrameRenderer initialization. <container> undefined.';
     }
-    
+
     if(isNaN(renderingOptions.dpi)) {
       throw 'Bad FrameRenderer initialization. <dpi> not well defined.';
     }
@@ -38,7 +38,7 @@
    * @private
    */
   ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
-    
+
     if(settingName == pskl.UserSettings.SHOW_GRID) {
       this.enableGrid(settingValue);
     }
@@ -54,7 +54,7 @@
     var currentClass = this.container.data('current-background-class');
     if (currentClass) {
       this.container.removeClass(currentClass);
-    }   
+    }
     this.container.addClass(newClass);
     this.container.data('current-background-class', newClass);
   };
@@ -118,12 +118,12 @@
     var ctx = canvas.getContext("2d");
     ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
     ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
-    for(var c=1; c < col; c++) {            
+    for(var c=1; c < col; c++) {
       ctx.moveTo(this.getFramePos_(c), 0);
       ctx.lineTo(this.getFramePos_(c), height);
       ctx.stroke();
     }
-    
+
     for(var r=1; r < row; r++) {
       ctx.moveTo(0, this.getFramePos_(r));
       ctx.lineTo(width, this.getFramePos_(r));
@@ -137,10 +137,10 @@
   ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
     if(this.canvasConfigDirty) {
       $(this.canvas).remove();
-      
+
       var col = frame.getWidth(),
         row = frame.getHeight();
-      
+
       var pixelWidth =  col * this.dpi + this.gridStrokeWidth * (col - 1);
       var pixelHeight =  row * this.dpi + this.gridStrokeWidth * (row - 1);
       var classes = ['canvas'];
@@ -154,7 +154,7 @@
       if(this.gridStrokeWidth > 0) {
         this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
       }
-        
+
       this.canvas = canvas;
       this.canvasConfigDirty = false;
     }

js/selection/SelectionManager.js

@@ -2,22 +2,22 @@
   var ns = $.namespace("pskl.selection");
 
   ns.SelectionManager = function (piskelController) {
-    
+
     this.piskelController = piskelController;
-    
+
     this.currentSelection = null;
   };
 
   ns.SelectionManager.prototype.init = function () {
     $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
-    $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this)); 
+    $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
-    
+
     $.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
     $.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
     $.subscribe(Events.CUT, $.proxy(this.onCut_, this));
 
-    $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this)); 
+    $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
 
   /**
@@ -77,7 +77,7 @@
       for(var i=0, l=pixels.length; i<l; i++) {
         try {
           currentFrame.setPixel(
-            pixels[i].col, pixels[i].row, 
+            pixels[i].col, pixels[i].row,
             pixels[i].copiedColor);
         }
         catch(e) {

js/service/HistoryService.js

@@ -1,11 +1,11 @@
 (function () {
   var ns = $.namespace("pskl.service");
   ns.HistoryService = function (piskelController) {
-    this.piskelController = piskelController; 
+    this.piskelController = piskelController;
   };
 
   ns.HistoryService.prototype.init = function () {
-    
+
     $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
     $.subscribe(Events.UNDO, this.undo.bind(this));
     $.subscribe(Events.REDO, this.redo.bind(this));

js/service/ImageUploadService.js

@@ -5,14 +5,14 @@
   };
 
   ns.ImageUploadService.prototype.init = function () {
-    // service interface 
+    // service interface
   };
 
   /**
    * Upload a base64 image data to distant service. If successful, will call provided callback with the image URL as first argument;
    * @param {String} imageData base64 image data (such as the return value of canvas.toDataUrl())
    * @param {Function} cbSuccess success callback. 1st argument will be the uploaded image URL
-   * @param {Function} cbError error callback 
+   * @param {Function} cbError error callback
    */
   ns.ImageUploadService.prototype.upload = function (imageData, cbSuccess, cbError) {
     var xhr = new XMLHttpRequest();
@@ -21,7 +21,7 @@
     xhr.open('POST', this.serviceUrl_, true);
     xhr.onload = function (e) {
       if (this.status == 200) {
-        var imageUrl = "http://screenletstore.appspot.com/img/" + this.responseText; 
+        var imageUrl = "http://screenletstore.appspot.com/img/" + this.responseText;
         cbSuccess(imageUrl);
       } else {
         cbError();
@@ -30,5 +30,5 @@
 
     xhr.send(formData);
   };
-  
+
 })();

js/utils/PixelUtils.js

@@ -12,8 +12,8 @@
           pixels.push({"col": x, "row": y});
         }
       }
-      
+
-      return pixels;      
+      return pixels;
     },
 
     getBoundRectanglePixels : function (x0, y0, x1, y1) {
@@ -30,32 +30,32 @@
         pixels.push({"col": rectangle.x0, "row": y});
         pixels.push({"col": rectangle.x1, "row": y});
       }
-      
+
-      return pixels;  
+      return pixels;
     },
 
     /**
      * Return an object of ordered rectangle coordinate.
-     * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner 
+     * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner
      * @private
      */
     getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
       return {
-        x0 : Math.min(x0, x1), 
+        x0 : Math.min(x0, x1),
         y0 : Math.min(y0, y1),
-        x1 : Math.max(x0, x1), 
+        x1 : Math.max(x0, x1),
         y1 : Math.max(y0, y1)
       };
     },
 
     /**
-     * Return the list of pixels that would have been filled by a paintbucket tool applied 
+     * Return the list of pixels that would have been filled by a paintbucket tool applied
      * on pixel at coordinate (x,y).
-     * This function is not altering the Frame object argument. 
+     * This function is not altering the Frame object argument.
      *
      * @param frame pskl.model.Frame The frame target in which we want to paintbucket
-     * @param col number Column coordinate in the frame 
+     * @param col number Column coordinate in the frame
-     * @param row number Row coordinate in the frame 
+     * @param row number Row coordinate in the frame
      *
      * @return an array of the pixel coordinates paint with the replacement color
      */
@@ -73,10 +73,10 @@
     /**
      * Apply the paintbucket tool in a frame at the (col, row) initial position
      * with the replacement color.
-     * 
+     *
      * @param frame pskl.model.Frame The frame target in which we want to paintbucket
-     * @param col number Column coordinate in the frame 
+     * @param col number Column coordinate in the frame
-     * @param row number Row coordinate in the frame 
+     * @param row number Row coordinate in the frame
      * @param replacementColor string Hexadecimal color used to fill the area
      *
      * @return an array of the pixel coordinates paint with the replacement color
@@ -109,11 +109,11 @@
       } catch(e) {
         // Frame out of bound exception.
       }
-      
+
       if(targetColor == replacementColor) {
         return;
       }
-      
+
 
       queue.push({"col": col, "row": row});
       var loopCount = 0;
@@ -140,7 +140,7 @@
         // Security loop breaker:
         if(loopCount > 10 * cellCount) {
           console.log("loop breaker called");
-          break;          
+          break;
         }
       }
       return paintedPixels;

js/utils/Serializer.js

@@ -32,7 +32,7 @@
         var pData = data.piskel;
         var layers = pData.layers.map(function (serializedLayer) {
           return pskl.utils.Serializer.deserializeLayer(serializedLayer);
-        }); 
+        });
         var piskel = new pskl.model.Piskel(pData.width, pData.height, pData.fps);
         layers.forEach(function (layer) {
           piskel.addLayer(layer);

js/utils/Template.js

@@ -23,7 +23,7 @@
           var value = dict[key];
           template = template.replace(new RegExp('\\{\\{'+key+'\\}\\}', 'g'), value);
         }
-      } 
+      }
       return template;
     }
   };

js/utils/UserSettings.js

@@ -8,7 +8,7 @@
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'SHOW_GRID' : false,
-      'CANVAS_BACKGROUND' : 'medium-canvas-background' 
+      'CANVAS_BACKGROUND' : 'medium-canvas-background'
     },
 
     /**
@@ -17,7 +17,7 @@
     cache_ : {},
 
     /**
-     * Static method to access a user defined settings value ot its default 
+     * Static method to access a user defined settings value ot its default
      * value if not defined yet.
      */
     get : function (key) {
@@ -34,7 +34,7 @@
       this.cache_[key] = value;
       this.writeToLocalStorage_(key, value);
 
-      $.publish(Events.USER_SETTINGS_CHANGED, [key, value]);    
+      $.publish(Events.USER_SETTINGS_CHANGED, [key, value]);
     },
 
     /**

js/utils/core.js

@@ -34,8 +34,10 @@ if (typeof Function.prototype.bind !== "function") {
   var ns = $.namespace("pskl.utils");
 
   ns.rgbToHex = function(r, g, b) {
-    if (r > 255 || g > 255 || b > 255)
+    if (r > 255 || g > 255 || b > 255) {
       throw "Invalid color component";
+    }
+    
     return ((r << 16) | (g << 8) | b).toString(16);
   };