Merge pull request #310 from juliandescottes/Integrate-SelectedColors…

…Service

Integrate selected colors service

src/js/app.js

@@ -41,15 +41,16 @@
       this.selectedColorsService = new pskl.service.SelectedColorsService();
       this.selectedColorsService.init();
 
+      this.mouseStateService = new pskl.service.MouseStateService();
+      this.mouseStateService.init();
+
       this.paletteController = new pskl.controller.PaletteController();
       this.paletteController.init();
 
       this.currentColorsService = new pskl.service.CurrentColorsService(this.piskelController);
       this.currentColorsService.init();
 
-      this.palettesListController = new pskl.controller.PalettesListController(
-        this.paletteController,
-        this.currentColorsService);
+      this.palettesListController = new pskl.controller.PalettesListController(this.currentColorsService);
       this.palettesListController.init();
 
       this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);

src/js/controller/DrawingController.js

@@ -47,9 +47,6 @@
     this.isClicked = false;
     this.previousMousemoveTime = 0;
     this.currentToolBehavior = null;
-
-    // State of clicked button (need to be stateful here, see comment in getCurrentColor_)
-    this.currentMouseButton_ = Constants.LEFT_BUTTON;
   };
 
   ns.DrawingController.prototype.init = function () {
@@ -145,7 +142,6 @@
     var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
 
     this.isClicked = true;
-    this.setCurrentButton(event);
 
     if (event.button === Constants.MIDDLE_BUTTON) {
       this.dragHandler.startDrag(event.clientX, event.clientY);
@@ -155,7 +151,6 @@
       this.currentToolBehavior.applyToolAt(
         coords.x,
         coords.y,
-        this.getCurrentColor_(),
         frame,
         this.overlayFrame,
         event
@@ -191,16 +186,13 @@
     var currentFrame = this.piskelController.getCurrentFrame();
 
     if (this.isClicked) {
-      if (this.currentMouseButton_ == Constants.MIDDLE_BUTTON) {
+      if (pskl.app.mouseStateService.isMiddleButtonPressed()) {
         this.dragHandler.updateDrag(x, y);
       } else {
         $.publish(Events.MOUSE_EVENT, [event, this]);
-        // Warning : do not call setCurrentButton here
-        // mousemove do not have the correct mouse button information on all browsers
         this.currentToolBehavior.moveToolAt(
           coords.x | 0,
           coords.y | 0,
-          this.getCurrentColor_(),
           currentFrame,
           this.overlayFrame,
           event
@@ -210,7 +202,6 @@
       this.currentToolBehavior.moveUnactiveToolAt(
         coords.x,
         coords.y,
-        this.getCurrentColor_(),
         currentFrame,
         this.overlayFrame,
         event
@@ -262,16 +253,14 @@
     var frame = this.piskelController.getCurrentFrame();
     var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
     if (this.isClicked) {
-      $.publish(Events.MOUSE_EVENT, [event, this]);
       // A mouse button was clicked on the drawing canvas before this mouseup event,
       // the user was probably drawing on the canvas.
       // Note: The mousemove movement (and the mouseup) may end up outside
       // of the drawing canvas.
 
       this.isClicked = false;
-      this.setCurrentButton(event);
 
-      if (event.button === Constants.MIDDLE_BUTTON) {
+      if (pskl.app.mouseStateService.isMiddleButtonPressed()) {
         if (this.dragHandler.isDragging()) {
           this.dragHandler.stopDrag();
         } else if (frame.containsPixel(coords.x, coords.y)) {
@@ -281,14 +270,14 @@
         this.currentToolBehavior.releaseToolAt(
           coords.x,
           coords.y,
-          this.getCurrentColor_(),
           this.piskelController.getCurrentFrame(),
           this.overlayFrame,
           event
         );
 
         $.publish(Events.TOOL_RELEASED);
       }
+      $.publish(Events.MOUSE_EVENT, [event, this]);
     }
   };
 
@@ -306,29 +295,6 @@
     return this.renderer.reverseCoordinates(spriteX, spriteY);
   };
 
-  ns.DrawingController.prototype.setCurrentButton = function (event) {
-    this.currentMouseButton_ = event.button;
-  };
-
-  /**
-   * @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 (this.currentMouseButton_ == Constants.RIGHT_BUTTON) {
-      return this.paletteController.getSecondaryColor();
-    } else if (this.currentMouseButton_ == Constants.LEFT_BUTTON) {
-      return this.paletteController.getPrimaryColor();
-    } else {
-      return Constants.DEFAULT_PEN_COLOR;
-    }
-  };
-
   /**
    * @private
    */

src/js/controller/PaletteController.js

@@ -1,11 +1,7 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  ns.PaletteController = function () {
-    // TODO(grosbouddha): Reuse default colors from SelectedColorsService.
-    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
-    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
-  };
+  ns.PaletteController = function () {};
 
   /**
    * @public
@@ -52,9 +48,9 @@
   ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
     var inputPicker = $(evt.target);
     if (evt.data.isPrimary) {
-      this.setPrimaryColor(inputPicker.val());
+      this.setPrimaryColor_(inputPicker.val());
     } else {
-      this.setSecondaryColor(inputPicker.val());
+      this.setSecondaryColor_(inputPicker.val());
     }
   };
 
@@ -64,41 +60,30 @@
   ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
     var inputPicker = $(evt.target);
     if (args.isPrimary) {
-      this.setPrimaryColor(color);
+      this.setPrimaryColor_(color);
     } else {
-      this.setSecondaryColor(color);
+      this.setSecondaryColor_(color);
     }
   };
 
-  ns.PaletteController.prototype.setPrimaryColor = function (color) {
-    this.primaryColor = color;
+  ns.PaletteController.prototype.setPrimaryColor_ = function (color) {
     this.updateColorPicker_(color, $('#color-picker'));
     $.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
   };
 
-  ns.PaletteController.prototype.setSecondaryColor = function (color) {
-    this.secondaryColor = color;
+  ns.PaletteController.prototype.setSecondaryColor_ = function (color) {
     this.updateColorPicker_(color, $('#secondary-color-picker'));
     $.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
   };
 
-  ns.PaletteController.prototype.getPrimaryColor = function () {
-    return this.primaryColor;
-  };
-
-  ns.PaletteController.prototype.getSecondaryColor = function () {
-    return this.secondaryColor;
-  };
-
   ns.PaletteController.prototype.swapColors = function () {
-    var primaryColor = this.getPrimaryColor();
-    this.setPrimaryColor(this.getSecondaryColor());
-    this.setSecondaryColor(primaryColor);
+    var primaryColor = pskl.app.selectedColorsService.getPrimaryColor();
+    this.setPrimaryColor_(pskl.app.selectedColorsService.getSecondaryColor());
+    this.setSecondaryColor_(primaryColor);
   };
 
   ns.PaletteController.prototype.resetColors = function () {
-    this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);
-    this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
+    pskl.app.selectedColorsService.reset();
   };
 
   /**

src/js/controller/PalettesListController.js

@@ -10,10 +10,9 @@
   // I apologize to my future self for this one.
   var NO_SCROLL_MAX_COLORS = 20;
 
-  ns.PalettesListController = function (paletteController, usedColorService) {
+  ns.PalettesListController = function (usedColorService) {
     this.usedColorService = usedColorService;
     this.paletteService = pskl.app.paletteService;
-    this.paletteController = paletteController;
   };
 
   ns.PalettesListController.prototype.init = function () {
@@ -184,13 +183,13 @@
     this.removeClass_(PRIMARY_COLOR_CLASSNAME);
     this.removeClass_(SECONDARY_COLOR_CLASSNAME);
 
-    var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor());
+    var colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getSecondaryColor());
     if (colorContainer) {
       colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME);
       colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME);
     }
 
-    colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor());
+    colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getPrimaryColor());
     if (colorContainer) {
       colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME);
       colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME);

src/js/devtools/DrawingTestRecorder.js

@@ -45,8 +45,8 @@
         width : this.piskelController.getWidth(),
         height : this.piskelController.getHeight()
       },
-      primaryColor : pskl.app.paletteController.getPrimaryColor(),
-      secondaryColor : pskl.app.paletteController.getSecondaryColor(),
+      primaryColor : pskl.app.selectedColorsService.getPrimaryColor(),
+      secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(),
       selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId
     };
   };

src/js/service/MouseStateService.js

@@ -0,0 +1,43 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  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;
+  };
+
+  ns.MouseStateService.prototype.init = function () {
+    $.subscribe(Events.MOUSE_EVENT, this.onMouseEvent_.bind(this));
+  };
+
+  ns.MouseStateService.prototype.isLeftButtonPressed = function () {
+    return this.isMouseButtonPressed_(Constants.LEFT_BUTTON);
+  };
+
+  ns.MouseStateService.prototype.isRightButtonPressed = function () {
+    return this.isMouseButtonPressed_(Constants.RIGHT_BUTTON);
+  };
+
+  ns.MouseStateService.prototype.isMiddleButtonPressed = function () {
+    return this.isMouseButtonPressed_(Constants.MIDDLE_BUTTON);
+  };
+
+  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') {
+      this.lastButtonPressed_ = mouseEvent.button;
+    } else if (mouseEvent.type == 'mouseup') {
+      this.lastButtonPressed_ = BUTTON_UNSET;
+    }
+  };
+})();

src/js/service/SelectedColorsService.js

@@ -2,20 +2,25 @@
   var ns = $.namespace('pskl.service');
 
   ns.SelectedColorsService = function () {
-    this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
-    this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
+    this.reset();
   };
 
   ns.SelectedColorsService.prototype.init = function () {
     $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.onPrimaryColorUpdate_.bind(this));
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onSecondaryColorUpdate_.bind(this));
   };
 
-  ns.SelectedColorsService.prototype.getColors = function () {
-    if (this.primaryColor_ === null || this.secondaryColor_ === null) {
-      throw 'SelectedColorsService not properly initialized.';
-    }
-    return [this.primaryColor_, this.secondaryColor_];
+  ns.SelectedColorsService.prototype.getPrimaryColor = function () {
+    return this.primaryColor_;
+  };
+
+  ns.SelectedColorsService.prototype.getSecondaryColor = function () {
+    return this.secondaryColor_;
+  };
+
+  ns.SelectedColorsService.prototype.reset = function () {
+    this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
+    this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
   };
 
   ns.SelectedColorsService.prototype.onPrimaryColorUpdate_ = function (evt, color) {

src/js/tools/drawing/BaseTool.js

@@ -13,13 +13,20 @@
 
   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;
 
-  ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) {
+  ns.BaseTool.prototype.getToolColor = function() {
+    if (pskl.app.mouseStateService.isRightButtonPressed()) {
+      return pskl.app.selectedColorsService.getSecondaryColor();
+    }
+    return pskl.app.selectedColorsService.getPrimaryColor();
+  };
+
+  ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, frame, overlay, event) {
     if (overlay.containsPixel(col, row)) {
       this.updateHighlightedPixel(frame, overlay, col, row);
     } else {
@@ -77,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,12 +16,12 @@
   /**
    * @override
    */
-  ns.ColorPicker.prototype.applyToolAt = function(col, row, color, 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) {
+      if (pskl.app.mouseStateService.isLeftButtonPressed()) {
         $.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]);
-      } else if (event.button == Constants.RIGHT_BUTTON) {
+      } else if (pskl.app.mouseStateService.isRightButtonPressed()) {
         $.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]);
       }
     }