Gallery.app: Add touch operation to rotate images.

ui/file_manager/gallery/js/image_editor/viewport.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * Viewport class controls the way the image is displayed (scale, offset etc).
  * @constructor
  */
@@ skipping 54 matching lines @@
    */
   this.offsetX_ = 0;
 
   /**
    * Offset specified by user operations.
    * @type {number}
    */
   this.offsetY_ = 0;
 
   /**
+   * Integer Rotation value.
+   * The rotation angle is this.rotation_ * 90.
+   * @type {number}
+   */
+  this.rotation_ = 0;
+
+  /**
    * Generation of the screen size image cache.
    * This is incremented every time when the size of image cache is changed.
    * @type {number}
    * @private
    */
   this.generation_ = 0;
 
   this.update_();
   Object.seal(this);
 }
@@ skipping 72 matching lines @@
 
 /**
  * Obtains whether the picture is zoomed or not.
  * @return {boolean}
  */
 Viewport.prototype.isZoomed = function() {
   return this.zoom_ !== 1;
 };
 
 /**
+ * Sets the rotation value.
+ * @param {number} rotation New rotation value.
+ */
+Viewport.prototype.setRotation = function(rotation) {
+  this.rotation_ = rotation;
+  this.update_();
+};
+
+
+/**
+ * Obtains the rotation value.
+ * @return {number} Current rotation value.
+ */
+Viewport.prototype.getRotation = function() {
+  return this.rotation_;
+};
+
+/**
  * Obtains the scale for the specified image size.
  *
  * @param {number} width Width of the full resolution image.
  * @param {number} height Height of the full resolution image.
  * @return {number} The ratio of the fullresotion image size and the calculated
  * displayed image size.
  */
 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) {
   var scaleX = this.screenBounds_.width / width;
   var scaleY = this.screenBounds_.height / height;
@@ skipping 143 matching lines @@
  */
 Viewport.prototype.imageToScreenRect = function(rect) {
   return new Rect(
       this.imageToScreenX(rect.left),
       this.imageToScreenY(rect.top),
       Math.round(this.imageToScreenSize(rect.width)),
       Math.round(this.imageToScreenSize(rect.height)));
 };
 
 /**
- * @return {boolean} True if some part of the image is clipped by the screen.
- */
-Viewport.prototype.isClipped = function() {
-  return this.getMarginX_() < 0 || this.getMarginY_() < 0;
-};
-
-/**
- * @return {number} Horizontal margin.
- *   Negative if the image is clipped horizontally.
- * @private
- */
-Viewport.prototype.getMarginX_ = function() {
-  return Math.round(
-    (this.screenBounds_.width - this.imageBounds_.width * this.scale_) / 2);
-};
-
-/**
- * @return {number} Vertical margin.
- *   Negative if the image is clipped vertically.
- * @private
- */
-Viewport.prototype.getMarginY_ = function() {
-  return Math.round(
-    (this.screenBounds_.height - this.imageBounds_.height * this.scale_) / 2);
-};
-
-/**
- * @param {number} x X-offset.
- * @return {number} X-offset clamped to the valid range.
- * @private
- */
-Viewport.prototype.clampOffsetX_ = function(x) {
-  var limit = Math.round(Math.max(0, -this.getMarginX_() / this.scale_));
-  return ImageUtil.clamp(-limit, x, limit);
-};
-
-/**
- * @param {number} y Y-offset.
- * @return {number} Y-offset clamped to the valid range.
- * @private
- */
-Viewport.prototype.clampOffsetY_ = function(y) {
-  var limit = Math.round(Math.max(0, -this.getMarginY_() / this.scale_));
-  return ImageUtil.clamp(-limit, y, limit);
-};
-
-/**
  * @private
  */
 Viewport.prototype.getCenteredRect_ = function(
     width, height, offsetX, offsetY) {
   return new Rect(
       ~~((this.screenBounds_.width - width) / 2) + offsetX,
       ~~((this.screenBounds_.height - height) / 2) + offsetY,
       width,
       height);
 };
 
 /**
  * Resets zoom and offset.
  */
 Viewport.prototype.resetView = function() {
   this.zoom_ = 1;
   this.offsetX_ = 0;
   this.offsetY_ = 0;
+  this.rotation_ = 0;
   this.update_();
 };
 
 /**
  * Recalculate the viewport parameters.
  * @private
  */
 Viewport.prototype.update_ = function() {
   // Update scale.
   this.scale_ = this.getFittingScaleForImageSize_(
       this.imageBounds_.width, this.imageBounds_.height);
 
   // Limit offset values.
-  var zoomedWidht = ~~(this.imageBounds_.width * this.scale_ * this.zoom_);
-  var zoomedHeight = ~~(this.imageBounds_.height * this.scale_ * this.zoom_);
+  var zoomedWidht;
+  var zoomedHeight;
+  if (this.rotation_ % 2 == 0) {
+    zoomedWidht = ~~(this.imageBounds_.width * this.scale_ * this.zoom_);
+    zoomedHeight = ~~(this.imageBounds_.height * this.scale_ * this.zoom_);
+  } else {
+    var scale = this.getFittingScaleForImageSize_(
+        this.imageBounds_.height, this.imageBounds_.width);
+    zoomedWidht = ~~(this.imageBounds_.height * scale * this.zoom_);
+    zoomedHeight = ~~(this.imageBounds_.width * scale * this.zoom_);
+  }
   var dx = Math.max(zoomedWidht - this.screenBounds_.width, 0) / 2;
   var dy = Math.max(zoomedHeight - this.screenBounds_.height, 0) /2;
   this.offsetX_ = ImageUtil.clamp(-dx, this.offsetX_, dx);
   this.offsetY_ = ImageUtil.clamp(-dy, this.offsetY_, dy);
 
   // Image bounds on screen.
   this.imageBoundsOnScreen_ = this.getCenteredRect_(
       zoomedWidht, zoomedHeight, this.offsetX_, this.offsetY_);
 
   // Image bounds of element (that is not applied zoom and offset) on screen.
@@ skipping 14 matching lines @@
   var top = Math.max(this.imageBoundsOnScreen_.top, 0);
   var right = Math.min(
       this.imageBoundsOnScreen_.right, this.screenBounds_.width);
   var bottom = Math.min(
       this.imageBoundsOnScreen_.bottom, this.screenBounds_.height);
   this.imageBoundsOnScreenClipped_ = new Rect(
       left, top, right - left, bottom - top);
 };
 
 /**
+ * Clones the viewport.
+ * @return {Viewport} New instance.
+ */
+Viewport.prototype.clone = function() {
+  var viewport = new Viewport();
+  viewport.imageBounds_ = new Rect(this.imageBounds_);
+  viewport.screenBounds_ = new Rect(this.screenBounds_);
+  viewport.scale_ = this.scale_;
+  viewport.zoom_ = this.zoom_;
+  viewport.offsetX_ = this.offsetX_;
+  viewport.offsetY_ = this.offsetY_;
+  viewport.rotation_ = this.rotation_;
+  viewport.generation_ = this.generation_;
+  viewport.update_();
+  return viewport;
+};
+
+/**
  * Obtains CSS transformation for the screen image.
  * @return {string} Transformation description.
  */
 Viewport.prototype.getTransformation = function() {
-  return 'translate(' + this.offsetX_ + 'px, ' + this.offsetY_ + 'px) ' +
-      'scale(' + this.zoom_ + ')';
+  var rotationScaleAdjustment;
+  if (this.rotation_ % 2) {
+    rotationScaleAdjustment = this.getFittingScaleForImageSize_(
+        this.imageBounds_.height, this.imageBounds_.width) / this.scale_;
+  } else {
+    rotationScaleAdjustment = 1;
+  }
+  return [
+    'translate(' + this.offsetX_ + 'px, ' + this.offsetY_ + 'px) ',
+    'rotate(' + (this.rotation_ * 90)  + 'deg)',
+    'scale(' + (this.zoom_ * rotationScaleAdjustment) + ')'
+  ].join(' ');
 };
 
 /**
  * Obtains shift CSS transformation for the screen image.
  * @param {number} dx Amount of shift.
  * @return {string} Transformation description.
  */
 Viewport.prototype.getShiftTransformation = function(dx) {
   return 'translateX(' + dx + 'px) ' + this.getTransformation();
 };
@@ skipping 64 matching lines @@
   var screenWidth = this.screenBounds_.width;
   var screenHeight = this.screenBounds_.height;
   var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2;
   var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2;
   return [
     'translate(' + dx + 'px,' + dy + 'px)',
     'scale(' + scaleX + ',' + scaleY + ')',
     this.getTransformation()
   ].join(' ');
 };