Create MouseStateService and integrate

src/js/app.js

@@ -41,6 +41,9 @@
       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();
 

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);
@@ -191,12 +187,10 @@
     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,
@@ -269,9 +263,8 @@
       // 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)) {
@@ -306,10 +299,6 @@
     return this.renderer.reverseCoordinates(spriteX, spriteY);
   };
 
-  ns.DrawingController.prototype.setCurrentButton = function (event) {
-    this.currentMouseButton_ = event.button;
-  };
-
   /**
    * @private
    */
@@ -320,9 +309,9 @@
     // on a mouse move event
     // This always matches a LEFT mouse button which is __really__ not helpful
 
-    if (this.currentMouseButton_ == Constants.RIGHT_BUTTON) {
+    if (pskl.app.mouseStateService.isRightButtonPressed()) {
       return pskl.app.selectedColorsService.getSecondaryColor();
-    } else if (this.currentMouseButton_ == Constants.LEFT_BUTTON) {
+    } else if (pskl.app.mouseStateService.isLeftButtonPressed()) {
       return pskl.app.selectedColorsService.getPrimaryColor();
     } else {
       return Constants.DEFAULT_PEN_COLOR;

src/js/service/MouseStateService.js

@@ -0,0 +1,39 @@
+(function () {
+  var ns = $.namespace('pskl.service');
+
+  var BUTTON_UNSET = null;
+
+  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;
+    }
+    // Warning : do not call setCurrentButton here
+        // mousemove do not have the correct mouse button information on all browsers
+  };
+})();

src/piskel-script-list.js

@@ -162,6 +162,7 @@
   "js/service/CurrentColorsService.js",
   "js/service/FileDropperService.js",
   "js/service/SelectedColorsService.js",
+  "js/service/MouseStateService.js",
 
   // Tools
   "js/tools/ToolsHelper.js",