Fix for issue #189 : user can move the viewport via click n drag of middle mouse button

src/js/controller/DrawingController.js

@@ -10,6 +10,8 @@
 
     this.paletteController = paletteController;
 
+    this.dragHandler = new ns.drawing.DragHandler(this);
+
     /**
      * @public
      */
@@ -138,13 +140,12 @@
     var frame = this.piskelController.getCurrentFrame();
     var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
 
+    this.isClicked = true;
+    this.setCurrentButton(event);
+
     if (event.button === Constants.MIDDLE_BUTTON) {
-      if (frame.containsPixel(coords.x, coords.y)) {
-        $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]);
-      }
+      this.dragHandler.startDrag(event.clientX, event.clientY);
     } else {
-      this.isClicked = true;
-      this.setCurrentButton(event);
       this.currentToolBehavior.hideHighlightedPixel(this.overlayFrame);
 
       this.currentToolBehavior.applyToolAt(
@@ -174,29 +175,6 @@
     }
   };
 
-  ns.DrawingController.prototype.resetZoom_ = function () {
-    this.setZoom_(this.calculateZoom_());
-  };
-
-  ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) {
-    var step = (zoomMultiplier || 1) * this.getZoomStep_();
-    this.setZoom_(this.renderer.getZoom() + step);
-  };
-
-  ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) {
-    var step = (zoomMultiplier || 1) * this.getZoomStep_();
-    this.setZoom_(this.renderer.getZoom() - step);
-  };
-
-  ns.DrawingController.prototype.getZoomStep_ = function () {
-    return this.calculateZoom_() / 10;
-  };
-
-  ns.DrawingController.prototype.setZoom_ = function (zoom) {
-    this.compositeRenderer.setZoom(zoom);
-    $.publish(Events.ZOOM_CHANGED);
-  };
-
   /**
    * @private
    */
@@ -209,19 +187,22 @@
     var currentFrame = this.piskelController.getCurrentFrame();
 
     if (this.isClicked) {
-      $.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
-      );
+      if(this.currentMouseButton_ == Constants.MIDDLE_BUTTON) {
+        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
+        );
+      }
     } else {
-
       this.currentToolBehavior.moveUnactiveToolAt(
         coords.x,
         coords.y,
@@ -250,6 +231,8 @@
    * @private
    */
   ns.DrawingController.prototype.onMouseup_ = function (event) {
+    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,
@@ -260,17 +243,24 @@
       this.isClicked = false;
       this.setCurrentButton(event);
 
-      var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
-      this.currentToolBehavior.releaseToolAt(
-        coords.x,
-        coords.y,
-        this.getCurrentColor_(),
-        this.piskelController.getCurrentFrame(),
-        this.overlayFrame,
-        event
-      );
+      if (event.button === Constants.MIDDLE_BUTTON) {
+        if (this.dragHandler.isDragging()) {
+          this.dragHandler.stopDrag();
+        } else if (frame.containsPixel(coords.x, coords.y)) {
+          $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]);
+        }
+      } else {
+        this.currentToolBehavior.releaseToolAt(
+          coords.x,
+          coords.y,
+          this.getCurrentColor_(),
+          this.piskelController.getCurrentFrame(),
+          this.overlayFrame,
+          event
+        );
 
-      $.publish(Events.TOOL_RELEASED);
+        $.publish(Events.TOOL_RELEASED);
+      }
     }
   };
 
@@ -390,8 +380,36 @@
     return this.compositeRenderer;
   };
 
+  ns.DrawingController.prototype.getOffset = function () {
+    return this.compositeRenderer.getOffset();
+  };
+
   ns.DrawingController.prototype.setOffset = function (x, y) {
     this.compositeRenderer.setOffset(x, y);
     $.publish(Events.ZOOM_CHANGED);
   };
+
+  ns.DrawingController.prototype.resetZoom_ = function () {
+    this.setZoom_(this.calculateZoom_());
+  };
+
+  ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) {
+    var step = (zoomMultiplier || 1) * this.getZoomStep_();
+    this.setZoom_(this.renderer.getZoom() + step);
+  };
+
+  ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) {
+    var step = (zoomMultiplier || 1) * this.getZoomStep_();
+    this.setZoom_(this.renderer.getZoom() - step);
+  };
+
+  ns.DrawingController.prototype.getZoomStep_ = function () {
+    return this.calculateZoom_() / 10;
+  };
+
+  ns.DrawingController.prototype.setZoom_ = function (zoom) {
+    this.compositeRenderer.setZoom(zoom);
+    $.publish(Events.ZOOM_CHANGED);
+  };
+
 })();

src/js/controller/MinimapController.js

@@ -52,6 +52,7 @@
     if (this.isClicked) {
       if (this.getDrawingAreaZoomRatio_() > 1) {
         var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY);
+        console.log(coords);
         this.drawingController.setOffset(coords.x, coords.y);
       }
     }

src/js/controller/drawing/DragHandler.js

@@ -0,0 +1,78 @@
+(function () {
+  var ns = $.namespace('pskl.controller.drawing');
+
+  /**
+   * Dedicated handler to drag the drawing canvas using the mouse
+   * Will store the initial coordinates as well as the status of the drag
+   * @param {DrawingController} drawingController
+   */
+  ns.DragHandler = function (drawingController) {
+    this.drawingController = drawingController;
+
+    this.isDragging_ = false;
+    this.updateOrigin_(-1, -1);
+  };
+
+  /**
+   * Initialize a drag session.
+   * @param {Number} x : x coordinate of the mouse event that initiated the drag
+   * @param {Number} y : y coordinate of the mouse event that initiated the drag
+   */
+  ns.DragHandler.prototype.startDrag = function (x, y) {
+    var coords = this.drawingController.getSpriteCoordinates(x, y);
+    this.updateOrigin_(coords.x, coords.y);
+  };
+
+  /**
+   * Update the drag status
+   * @param {Number} x : x coordinate of the mouse event that triggered the update
+   * @param {Number} y : y coordinate of the mouse event that triggered the update
+   */
+  ns.DragHandler.prototype.updateDrag = function (x, y) {
+    var currentOffset = this.drawingController.getOffset();
+    var offset = this.calculateOffset_(x, y);
+    if (currentOffset.y !== offset.y || currentOffset.x !== offset.x) {
+      this.isDragging_ = true;
+      this.drawingController.setOffset(offset.x, offset.y);
+
+      // retrieve the updated coordinates after moving the sprite
+      // and store them as the new drag origin
+      var coords = this.drawingController.getSpriteCoordinates(x, y);
+      this.updateOrigin_(coords.x, coords.y);
+    }
+  };
+
+  /**
+   * Stop the drag session
+   */
+  ns.DragHandler.prototype.stopDrag = function () {
+    this.isDragging_ = false;
+    this.origin = null;
+  };
+
+  /**
+   * Will return true if the drag handler effectively MOVED the offset
+   * during the current drag session
+   */
+  ns.DragHandler.prototype.isDragging = function () {
+    return this.isDragging_;
+  };
+
+  ns.DragHandler.prototype.calculateOffset_ = function (x, y) {
+    var coords = this.drawingController.getSpriteCoordinates(x, y);
+    var currentOffset = this.drawingController.getOffset();
+
+    var offset = {
+      x : currentOffset.x - (coords.x - this.origin.x),
+      y : currentOffset.y - (coords.y - this.origin.y)
+    };
+
+    return offset;
+  };
+
+  ns.DragHandler.prototype.updateOrigin_ = function (x, y) {
+    this.origin = this.origin || {};
+    this.origin.x = x;
+    this.origin.y = y;
+  };
+})();

src/piskel-script-list.js

@@ -78,6 +78,7 @@
   "js/controller/piskel/PublicPiskelController.js",
   "js/controller/CursorCoordinatesController.js",
   "js/controller/DrawingController.js",
+  "js/controller/drawing/DragHandler.js",
   "js/controller/PreviewFilmController.js",
   "js/controller/LayersListController.js",
   "js/controller/AnimatedPreviewController.js",