Merge pull request #233 from juliandescottes/enhancement-move-viewport

Enhancement move viewport

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);
 
-    if (event.button === Constants.MIDDLE_BUTTON) {
-      if (frame.containsPixel(coords.x, coords.y)) {
-        $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]);
-      }
-    } else {
     this.isClicked = true;
     this.setCurrentButton(event);
+
+    if (event.button === Constants.MIDDLE_BUTTON) {
+      this.dragHandler.startDrag(event.clientX, event.clientY);
+    } else {
       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,6 +187,9 @@
     var currentFrame = this.piskelController.getCurrentFrame();
 
     if (this.isClicked) {
+      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
@@ -220,8 +201,8 @@
           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,7 +243,13 @@
       this.isClicked = false;
       this.setCurrentButton(event);
 
-      var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
+      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,
@@ -272,6 +261,7 @@
 
         $.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/drawing/DragHandler.js

@@ -0,0 +1,84 @@
+(function () {
+  var ns = $.namespace('pskl.controller.drawing');
+
+  /**
+   * Multiplier applied between the mouse movement and viewport movement
+   * @type {Number}
+   */
+  var MULTIPLIER = 2;
+
+  /**
+   * 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 - MULTIPLIER * (coords.x - this.origin.x),
+      y : currentOffset.y - MULTIPLIER * (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",