diff --git a/Gruntfile.js b/Gruntfile.js index 17f0e876..987f65f0 100644 --- a/Gruntfile.js +++ b/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 !! diff --git a/js/Constants.js b/js/Constants.js index e3d00e21..92c91798 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -13,7 +13,7 @@ var Constants = { PREVIEW_FILM_SIZE : 120, - DEFAULT_PEN_COLOR : '#000000', + DEFAULT_PEN_COLOR : '#000000', TRANSPARENT_COLOR : 'TRANSPARENT', /* diff --git a/js/Events.js b/js/Events.js index d7f8d25b..da20bbe2 100644 --- a/js/Events.js +++ b/js/Events.js @@ -60,5 +60,5 @@ var Events = { REDO: "REDO", CUT: "CUT", COPY: "COPY", - PASTE: "PASTE" + PASTE: "PASTE" }; \ No newline at end of file diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js index 9633ff57..3dd7c014 100644 --- a/js/controller/DrawingController.js +++ b/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', diff --git a/js/controller/PiskelController.js b/js/controller/PiskelController.js index b56536d8..90971e0d 100644 --- a/js/controller/PiskelController.js +++ b/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 () { diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index 3172f212..d1635bc1 100644 --- a/js/controller/PreviewFilmController.js +++ b/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) { diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js index bfbe4fed..ea5e9127 100644 --- a/js/controller/settings/GifExportController.js +++ b/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"); } diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index 0b3d365e..8b482df2 100644 --- a/js/drawingtools/BaseTool.js +++ b/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; diff --git a/js/drawingtools/Circle.js b/js/drawingtools/Circle.js index 784a90c2..c05f6f45 100644 --- a/js/drawingtools/Circle.js +++ b/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; diff --git a/js/drawingtools/Move.js b/js/drawingtools/Move.js index a800f481..1155db21 100644 --- a/js/drawingtools/Move.js +++ b/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); }; diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js index 6d555508..dd2a57e5 100644 --- a/js/drawingtools/Rectangle.js +++ b/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 diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js index 6952c1bc..93173d8b 100644 --- a/js/drawingtools/Stroke.js +++ b/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, - // eg deleting the equivalent of a stroke. + // When the stroke tool will be released, It will draw a transparent 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(); }; })(); diff --git a/js/drawingtools/VerticalMirrorPen.js b/js/drawingtools/VerticalMirrorPen.js index c9dfa80b..4b1d9d61 100644 --- a/js/drawingtools/VerticalMirrorPen.js +++ b/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; }; })(); diff --git a/js/drawingtools/selectiontools/BaseSelect.js b/js/drawingtools/selectiontools/BaseSelect.js index 13c761ac..7d069cc0 100644 --- a/js/drawingtools/selectiontools/BaseSelect.js +++ b/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 */ diff --git a/js/model/Frame.js b/js/model/Frame.js index 1a4f7b41..084bef9a 100644 --- a/js/model/Frame.js +++ b/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) { diff --git a/js/model/FrameSheet.js b/js/model/FrameSheet.js index f8f39b93..e7bc5b4e 100644 --- a/js/model/FrameSheet.js +++ b/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."; diff --git a/js/rendering/DrawingLoop.js b/js/rendering/DrawingLoop.js index 88afc149..e1816011 100644 --- a/js/rendering/DrawingLoop.js +++ b/js/rendering/DrawingLoop.js @@ -10,8 +10,8 @@ ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) { var callbackObj = { - fn : callback, - scope : scope, + fn : callback, + scope : scope, args : args }; this.callbacks.push(callbackObj); @@ -51,9 +51,9 @@ ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () { var requestAnimationFrame = window.requestAnimationFrame || - window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - window.msRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame || + window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60); }; return requestAnimationFrame; diff --git a/js/rendering/FrameRenderer.js b/js/rendering/FrameRenderer.js index fadb8084..e2f9e428 100644 --- a/js/rendering/FrameRenderer.js +++ b/js/rendering/FrameRenderer.js @@ -10,7 +10,7 @@ if(container === undefined) { throw 'Bad FrameRenderer initialization. undefined.'; } - + if(isNaN(renderingOptions.dpi)) { throw 'Bad FrameRenderer initialization. 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; } diff --git a/js/selection/SelectionManager.js b/js/selection/SelectionManager.js index 9a9273ba..5f6f3790 100644 --- a/js/selection/SelectionManager.js +++ b/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 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 row number Row coordinate in the frame + * @param col number Column 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 row number Row coordinate in the frame + * @param col number Column 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; diff --git a/js/utils/Serializer.js b/js/utils/Serializer.js index 30c6a3f3..ba84b047 100644 --- a/js/utils/Serializer.js +++ b/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); diff --git a/js/utils/Template.js b/js/utils/Template.js index 3eda787d..a176cf24 100644 --- a/js/utils/Template.js +++ b/js/utils/Template.js @@ -23,7 +23,7 @@ var value = dict[key]; template = template.replace(new RegExp('\\{\\{'+key+'\\}\\}', 'g'), value); } - } + } return template; } }; diff --git a/js/utils/UserSettings.js b/js/utils/UserSettings.js index 7d4a53de..79c264cb 100644 --- a/js/utils/UserSettings.js +++ b/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]); }, /** diff --git a/js/utils/core.js b/js/utils/core.js index 46ccaaed..88795c35 100644 --- a/js/utils/core.js +++ b/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); };