Remove color argument from BaseTool/BaseSelect interfaces

src/js/controller/DrawingController.js

@@ -151,7 +151,6 @@
       this.currentToolBehavior.applyToolAt(
         coords.x,
         coords.y,
-        this.getCurrentColor_(),
         frame,
         this.overlayFrame,
         event
@@ -194,7 +193,6 @@
         this.currentToolBehavior.moveToolAt(
           coords.x | 0,
           coords.y | 0,
-          this.getCurrentColor_(),
           currentFrame,
           this.overlayFrame,
           event
@@ -204,7 +202,6 @@
       this.currentToolBehavior.moveUnactiveToolAt(
         coords.x,
         coords.y,
-        this.getCurrentColor_(),
         currentFrame,
         this.overlayFrame,
         event
@@ -273,7 +270,6 @@
         this.currentToolBehavior.releaseToolAt(
           coords.x,
           coords.y,
-          this.getCurrentColor_(),
           this.piskelController.getCurrentFrame(),
           this.overlayFrame,
           event
@@ -299,25 +295,6 @@
     return this.renderer.reverseCoordinates(spriteX, spriteY);
   };
 
-  /**
-   * @private
-   */
-  ns.DrawingController.prototype.getCurrentColor_ = function () {
-    // WARNING : Do not rely on the current event to get the current color!
-    // It might seem like a good idea, and works perfectly fine on Chrome
-    // Sadly Firefox and IE found clever, for some reason, to set event.button to 0
-    // on a mouse move event
-    // This always matches a LEFT mouse button which is __really__ not helpful
-
-    if (pskl.app.mouseStateService.isRightButtonPressed()) {
-      return pskl.app.selectedColorsService.getSecondaryColor();
-    } else if (pskl.app.mouseStateService.isLeftButtonPressed()) {
-      return pskl.app.selectedColorsService.getPrimaryColor();
-    } else {
-      return Constants.DEFAULT_PEN_COLOR;
-    }
-  };
-
   /**
    * @private
    */

src/js/service/MouseStateService.js

@@ -3,6 +3,12 @@
 
   var BUTTON_UNSET = null;
 
+  /**
+   * This service exists mostly due to a FF/IE bug.
+   * For mousemove events, the button type is set to 0 (e.g. left button type) whatever was the
+   * pressed button on mousedown. We use this service to cache the button type value on mousedown
+   * and make it available to mousemove events.
+   */
   ns.MouseStateService = function () {
     this.lastButtonPressed_ = BUTTON_UNSET;
   };
@@ -25,7 +31,7 @@
 
   ns.MouseStateService.prototype.isMouseButtonPressed_ = function (mouseButton) {
     return this.lastButtonPressed_ != BUTTON_UNSET && this.lastButtonPressed_ == mouseButton;
-  }
+  };
 
   ns.MouseStateService.prototype.onMouseEvent_ = function(evt, mouseEvent) {
     if (mouseEvent.type == 'mousedown') {
@@ -33,7 +39,5 @@
     } else if (mouseEvent.type == 'mouseup') {
       this.lastButtonPressed_ = BUTTON_UNSET;
     }
-    // Warning : do not call setCurrentButton here
-        // mousemove do not have the correct mouse button information on all browsers
   };
-})();
+})();

src/js/tools/drawing/BaseTool.js

@@ -13,9 +13,9 @@
 
   pskl.utils.inherit(ns.BaseTool, pskl.tools.Tool);
 
-  ns.BaseTool.prototype.applyToolAt = function (col, row, color, frame, overlay, event) {};
+  ns.BaseTool.prototype.applyToolAt = function (col, row, frame, overlay, event) {};
 
-  ns.BaseTool.prototype.moveToolAt = function (col, row, color, frame, overlay, event) {};
+  ns.BaseTool.prototype.moveToolAt = function (col, row, frame, overlay, event) {};
 
   ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION;
 
@@ -26,7 +26,7 @@
     return pskl.app.selectedColorsService.getPrimaryColor();
   };
 
-  ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) {
+  ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, frame, overlay, event) {
     if (overlay.containsPixel(col, row)) {
       this.updateHighlightedPixel(frame, overlay, col, row);
     } else {
@@ -84,7 +84,7 @@
     });
   };
 
-  ns.BaseTool.prototype.releaseToolAt = function (col, row, color, frame, overlay, event) {};
+  ns.BaseTool.prototype.releaseToolAt = function (col, row, frame, overlay, event) {};
 
   /**
    * Bresenham line algorithm: Get an array of pixels from

src/js/tools/drawing/Circle.js

@@ -15,7 +15,10 @@
 
   pskl.utils.inherit(ns.Circle, ns.ShapeTool);
 
-  ns.Circle.prototype.draw_ = function (col, row, color, targetFrame) {
+  /**
+   * @override
+   */
+  ns.Circle.prototype.draw = function (col, row, color, targetFrame) {
     var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row);
     for (var i = 0 ; i < circlePoints.length ; i++) {
       // Change model:

src/js/tools/drawing/ColorPicker.js

@@ -16,7 +16,7 @@
   /**
    * @override
    */
-  ns.ColorPicker.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.ColorPicker.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     if (frame.containsPixel(col, row)) {
       var sampledColor = frame.getPixel(col, row);
       if (event.button == Constants.LEFT_BUTTON) {

src/js/tools/drawing/ColorSwap.js

@@ -21,7 +21,7 @@
   /**
    * @override
    */
-  ns.ColorSwap.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.ColorSwap.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     if (frame.containsPixel(col, row)) {
       var sampledColor = frame.getPixel(col, row);
 

src/js/tools/drawing/DitheringTool.js

@@ -29,9 +29,9 @@
   /**
    * @override
    */
-  ns.DitheringTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.DitheringTool.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     this.col_ = col;
     this.row_ = row;
-    this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event);
+    this.superclass.applyToolAt.call(this, col, row, frame, overlay, event);
   };
 })();

src/js/tools/drawing/Lighten.js

@@ -66,17 +66,17 @@
   /**
    * @Override
    */
-  ns.Lighten.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event, mouseButton) {
+  ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event, mouseButton) {
     var overlayColor = overlay.getPixel(col, row);
     var frameColor = frame.getPixel(col, row);
 
     this.col_ = col;
     this.row_ = row;
     this.pixelColor_ = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
-    this.isDarken_ = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;;
+    this.isDarken_ = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
     this.isTransparent_ = this.pixelColor_ === Constants.TRANSPARENT_COLOR;
     this.isSinglePass_ = event.shiftKey;
 
-    this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event);
+    this.superclass.applyToolAt.call(this, col, row, frame, overlay, event);
   };
 })();

src/js/tools/drawing/Move.js

@@ -28,14 +28,14 @@
   /**
    * @override
    */
-  ns.Move.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.Move.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
     this.currentFrame = frame;
     this.currentFrameClone = frame.clone();
   };
 
-  ns.Move.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.Move.prototype.moveToolAt = function(col, row, frame, overlay, event) {
     var colDiff = col - this.startCol;
     var rowDiff = row - this.startRow;
     this.shiftFrame(colDiff, rowDiff, frame, this.currentFrameClone, event);
@@ -66,7 +66,7 @@
   /**
    * @override
    */
-  ns.Move.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.Move.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
     var colDiff = col - this.startCol;
     var rowDiff = row - this.startRow;
 

src/js/tools/drawing/PaintBucket.js

@@ -16,7 +16,7 @@
   /**
    * @override
    */
-  ns.PaintBucket.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     var color = this.getToolColor();
     pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
 

src/js/tools/drawing/Rectangle.js

@@ -16,7 +16,10 @@
 
   pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
 
-  ns.Rectangle.prototype.draw_ = function (col, row, color_legacy, targetFrame) {
+  /**
+   * @override
+   */
+  ns.Rectangle.prototype.draw = function (col, row, color, targetFrame) {
     var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
     for (var i = 0 ; i < strokePoints.length ; i++) {
       // Change model:

src/js/tools/drawing/ShapeTool.js

@@ -2,7 +2,7 @@
   var ns = $.namespace('pskl.tools.drawing');
   /**
    * Abstract shape tool class, parent to all shape tools (rectangle, circle).
-   * Shape tools should override only the draw_ method
+   * Shape tools should override only the draw method
    */
   ns.ShapeTool = function() {
     // Shapes's first point coordinates (set in applyToolAt)
@@ -19,7 +19,7 @@
   /**
    * @override
    */
-  ns.ShapeTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.ShapeTool.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     $.publish(Events.DRAG_START, [col, row]);
     this.startCol = col;
     this.startRow = row;
@@ -28,7 +28,7 @@
     overlay.setPixel(col, row, this.getToolColor());
   };
 
-  ns.ShapeTool.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.ShapeTool.prototype.moveToolAt = function(col, row, frame, overlay, event) {
     var coords = this.getCoordinates_(col, row, event);
     $.publish(Events.CURSOR_MOVED, [coords.col, coords.row]);
 
@@ -39,17 +39,17 @@
     }
 
     // draw in overlay
-    this.draw_(coords.col, coords.row, color, overlay);
+    this.draw(coords.col, coords.row, color, overlay);
   };
 
   /**
    * @override
    */
-  ns.ShapeTool.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.ShapeTool.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
     overlay.clear();
     var coords = this.getCoordinates_(col, row, event);
     var color = this.getToolColor();
-    this.draw_(coords.col, coords.row, color, frame);
+    this.draw(coords.col, coords.row, color, frame);
 
     $.publish(Events.DRAG_END, [coords.col, coords.row]);
     this.raiseSaveStateEvent({
@@ -67,7 +67,7 @@
   ns.ShapeTool.prototype.replay = function(frame, replayData) {
     this.startCol = replayData.startCol;
     this.startRow = replayData.startRow;
-    this.draw_(replayData.col, replayData.row, replayData.color, frame);
+    this.draw(replayData.col, replayData.row, replayData.color, frame);
   };
 
   /**
@@ -108,6 +108,6 @@
     };
   };
 
-  ns.ShapeTool.prototype.draw_ = Constants.ABSTRACT_FUNCTION;
+  ns.ShapeTool.prototype.draw = Constants.ABSTRACT_FUNCTION;
 
 })();

src/js/tools/drawing/SimplePen.js

@@ -21,10 +21,10 @@
   /**
    * @override
    */
-  ns.SimplePen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.SimplePen.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     this.previousCol = col;
     this.previousRow = row;
-    var color =  this.getToolColor();
+    var color = this.getToolColor();
     overlay.setPixel(col, row, color);
 
     if (color === Constants.TRANSPARENT_COLOR) {
@@ -40,7 +40,7 @@
   /**
    * @override
    */
-  ns.SimplePen.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.SimplePen.prototype.moveToolAt = function(col, row, frame, overlay, event) {
     if ((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
       // The pen movement is too fast for the mousemove frequency, there is a gap between the
       // current point and the previously drawn one.
@@ -48,17 +48,17 @@
       var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
       for (var i = 0, l = interpolatedPixels.length ; i < l ; i++) {
         var coords = interpolatedPixels[i];
-        this.applyToolAt(coords.col, coords.row, color_legacy, frame, overlay, event);
+        this.applyToolAt(coords.col, coords.row, frame, overlay, event);
       }
     } else {
-      this.applyToolAt(col, row, color_legacy, frame, overlay, event);
+      this.applyToolAt(col, row, frame, overlay, event);
     }
 
     this.previousCol = col;
     this.previousRow = row;
   };
 
-  ns.SimplePen.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.SimplePen.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
     // apply on real frame
     this.setPixelsToFrame_(frame, this.pixels);
 

src/js/tools/drawing/Stroke.js

@@ -20,7 +20,7 @@
   /**
    * @override
    */
-  ns.Stroke.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.Stroke.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
 
@@ -36,7 +36,7 @@
     overlay.setPixel(col, row, this.getToolColor());
   };
 
-  ns.Stroke.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.Stroke.prototype.moveToolAt = function(col, row, frame, overlay, event) {
     overlay.clear();
 
     // When the user moussemove (before releasing), we dynamically compute the
@@ -63,7 +63,7 @@
   /**
    * @override
    */
-  ns.Stroke.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.Stroke.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
     var color = this.getToolColor();
     // The user released the tool to draw a line. We will compute the pixel coordinate, impact
     // the model and draw them in the drawing canvas (not the fake overlay anymore)

src/js/tools/drawing/VerticalMirrorPen.js

@@ -28,8 +28,8 @@
   /**
    * @override
    */
-  ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, frame, overlay, event) {
-    this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay);
+    this.superclass.applyToolAt.call(this, col, row, frame, overlay);
     this.backupPreviousPositions_();
 
     var mirroredCol = this.getSymmetricCol_(col, frame);
@@ -37,15 +37,15 @@
 
     var hasCtrlKey = pskl.utils.UserAgent.isMac ?  event.metaKey : event.ctrlKey;
     if (!hasCtrlKey) {
-      this.superclass.applyToolAt.call(this, mirroredCol, row, color_legacy, frame, overlay);
+      this.superclass.applyToolAt.call(this, mirroredCol, row, frame, overlay);
     }
 
     if (event.shiftKey || hasCtrlKey) {
-      this.superclass.applyToolAt.call(this, col, mirroredRow, color_legacy, frame, overlay);
+      this.superclass.applyToolAt.call(this, col, mirroredRow, frame, overlay);
     }
 
     if (event.shiftKey) {
-      this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color_legacy, frame, overlay);
+      this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, frame, overlay);
     }
 
     this.restorePreviousPositions_();

src/js/tools/drawing/selection/BaseSelect.js

@@ -28,7 +28,7 @@
   /**
    * @override
    */
-  ns.BaseSelect.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.BaseSelect.prototype.applyToolAt = function(col, row, frame, overlay, event) {
     this.startCol = col;
     this.startRow = row;
 
@@ -42,32 +42,32 @@
     // mode to allow to move the selection by drag'n dropping it.
     if (this.isInSelection(col, row)) {
       this.mode = 'moveSelection';
-      this.onSelectionDragStart_(col, row, color_legacy, frame, overlay);
+      this.onSelectionDragStart_(col, row, frame, overlay);
     } else {
       this.mode = 'select';
-      this.onSelectStart_(col, row, color_legacy, frame, overlay);
+      this.onSelectStart_(col, row, frame, overlay);
     }
   };
 
   /**
    * @override
    */
-  ns.BaseSelect.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.BaseSelect.prototype.moveToolAt = function(col, row, frame, overlay, event) {
     if (this.mode == 'select') {
-      this.onSelect_(col, row, color_legacy, frame, overlay);
+      this.onSelect_(col, row, frame, overlay);
     } else if (this.mode == 'moveSelection') {
-      this.onSelectionDrag_(col, row, color_legacy, frame, overlay);
+      this.onSelectionDrag_(col, row, frame, overlay);
     }
   };
 
   /**
    * @override
    */
-  ns.BaseSelect.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.BaseSelect.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
     if (this.mode == 'select') {
-      this.onSelectEnd_(col, row, color_legacy, frame, overlay);
+      this.onSelectEnd_(col, row, frame, overlay);
     } else if (this.mode == 'moveSelection') {
-      this.onSelectionDragEnd_(col, row, color_legacy, frame, overlay);
+      this.onSelectionDragEnd_(col, row, frame, overlay);
     }
   };
 
@@ -76,7 +76,7 @@
    * instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
    * @override
    */
-  ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color_legacy, frame, overlay, event) {
+  ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, frame, overlay, event) {
     if (overlay.containsPixel(col, row)) {
       if (this.isInSelection(col, row)) {
         // We're hovering the selection, show the move tool:
@@ -124,18 +124,18 @@
 
   // The list of callbacks to implement by specialized tools to implement the selection creation behavior.
   /** @protected */
-  ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) {};
+  ns.BaseSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {};
   /** @protected */
-  ns.BaseSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) {};
+  ns.BaseSelect.prototype.onSelect_ = function (col, row, frame, overlay) {};
   /** @protected */
-  ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) {};
+  ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, frame, overlay) {};
 
   // The list of callbacks that define the drag'n drop behavior of the selection.
   /** @private */
-  ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color_legacy, frame, overlay) {};
+  ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, frame, overlay) {};
 
   /** @private */
-  ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color_legacy, frame, overlay) {
+  ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, frame, overlay) {
     var deltaCol = col - this.lastCol;
     var deltaRow = row - this.lastRow;
 
@@ -152,7 +152,7 @@
   };
 
   /** @private */
-  ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color_legacy, frame, overlay) {
+  ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, frame, overlay) {
-    this.onSelectionDrag_(col, row, color_legacy, frame, overlay);
+    this.onSelectionDrag_(col, row, frame, overlay);
   };
 })();

src/js/tools/drawing/selection/RectangleSelect.js

@@ -22,7 +22,7 @@
   /**
    * @override
    */
-  ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
+  ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
     this.selectionOrigin_ = {
       col : col,
       row : row
@@ -33,7 +33,7 @@
       $.publish(Events.SELECTION_DISMISSED);
     } else {
       this.startSelection_(col, row);
-      overlay.setPixel(col, row, color);
+      overlay.setPixel(col, row, Constants.SELECTION_TRANSPARENT_COLOR);
     }
   };
 
@@ -49,7 +49,7 @@
    * the current mouse coordiinate in sprite.
    * @override
    */
-  ns.RectangleSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) {
+  ns.RectangleSelect.prototype.onSelect_ = function (col, row, frame, overlay) {
     if (!this.hasSelection && (this.selectionOrigin_.col !== col || this.selectionOrigin_.row !== row)) {
       this.startSelection_(col, row);
     }
@@ -63,9 +63,9 @@
     }
   };
 
-  ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) {
+  ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, frame, overlay) {
     if (this.hasSelection) {
-      this.onSelect_(col, row, color_legacy, frame, overlay);
+      this.onSelect_(col, row, frame, overlay);
       $.publish(Events.DRAG_END, [col, row]);
     }
   };

src/js/tools/drawing/selection/ShapeSelect.js

@@ -21,7 +21,7 @@
    * So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
    * @override
    */
-  ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) {
+  ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
     // Clean previous selection:
     $.publish(Events.SELECTION_DISMISSED);
     overlay.clear();