Gallery.app: Move geometry calculation for the slide image to Viewport class.

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
  */
 function Viewport() {
+  /**
+   * Size of the full resolution image.
+   * @type {Rect}
+   * @private
+   */
   this.imageBounds_ = new Rect();
+
+  /**
+   * Size of the application window.
+   * @type {Rect}
+   * @private
+   */
   this.screenBounds_ = new Rect();
 
+  /**
+   * Scale from the full resolution image to the screen displayed image. This is
+   * not zoom operated by users.
+   */

[mtomasz, 2014/07/10 07:26:52]

optional: // for normal comments, /** ... */ for jsdoc? If jsdoc, then please
add @type etc.

[hirono, 2014/07/10 08:16:06]

Done.

   this.scale_ = 1;
   this.offsetX_ = 0;
   this.offsetY_ = 0;
 
   this.generation_ = 0;
 
-  this.scaleControl_ = null;
   this.repaintCallbacks_ = [];
   this.update();
 }
 
-/*
- * Viewport modification.
- */
-
-/**
- * @param {Object} scaleControl The UI object responsible for scaling.
- */
-Viewport.prototype.setScaleControl = function(scaleControl) {
-  this.scaleControl_ = scaleControl;
-};
-
 /**
  * @param {number} width Image width.
  * @param {number} height Image height.
  */
 Viewport.prototype.setImageSize = function(width, height) {
   this.imageBounds_ = new Rect(width, height);
-  if (this.scaleControl_) this.scaleControl_.displayImageSize(width, height);
   this.invalidateCaches();
 };
 
 /**
  * @param {number} width Screen width.
  * @param {number} height Screen height.
  */
 Viewport.prototype.setScreenSize = function(width, height) {
   this.screenBounds_ = new Rect(width, height);
-  if (this.scaleControl_)
-    this.scaleControl_.setMinScale(this.getFittingScale());
   this.invalidateCaches();
 };
 
 /**
  * Set the size by an HTML element.
  *
  * @param {HTMLElement} frame The element acting as the "screen".
  */
 Viewport.prototype.sizeByFrame = function(frame) {
   this.setScreenSize(frame.clientWidth, frame.clientHeight);
@@ skipping 18 matching lines @@
  */
 Viewport.prototype.getScale = function() { return this.scale_; };
 
 /**
  * @param {number} scale The new scale.
  * @param {boolean} notify True if the change should be reflected in the UI.
  */
 Viewport.prototype.setScale = function(scale, notify) {
   if (this.scale_ == scale) return;
   this.scale_ = scale;
-  if (notify && this.scaleControl_) this.scaleControl_.displayScale(scale);
   this.invalidateCaches();
 };
 
 /**
  * @return {number} Best scale to fit the current image into the current screen.
  */
 Viewport.prototype.getFittingScale = function() {
-  var scaleX = this.screenBounds_.width / this.imageBounds_.width;
-  var scaleY = this.screenBounds_.height / this.imageBounds_.height;
+  return this.getFittingScaleForImageSize_(
+      this.imageBounds_.width, this.imageBounds_.height);
+};
+
+Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) {

[mtomasz, 2014/07/10 07:26:52]

nit: Please add jsdoc.

[hirono, 2014/07/10 08:16:05]

Done.

+  var scaleX = this.screenBounds_.width / width;
+  var scaleY = this.screenBounds_.height / height;
   // Scales > (1 / this.getDevicePixelRatio()) do not look good. Also they are

[mtomasz, 2014/07/10 07:26:52]

Please update the comment (this.getDevicePixelRatio / devicePixelRatio).

[hirono, 2014/07/10 08:16:06]

Done.

   // not really useful as we do not have any pixel-level operations.
-  return Math.min(1 / Viewport.getDevicePixelRatio(), scaleX, scaleY);
-};
+  return Math.min(1 / devicePixelRatio, scaleX, scaleY);

[mtomasz, 2014/07/10 07:26:52]

nit: devicePixelRatio looks undefined. How about: How about
window.devicePixelRatio?

[hirono, 2014/07/10 08:16:06]

Done.

+}
 
 /**
  * Set the scale to fit the image into the screen.
  */
 Viewport.prototype.fitImage = function() {
   var scale = this.getFittingScale();
-  if (this.scaleControl_) this.scaleControl_.setMinScale(scale);
   this.setScale(scale, true);
 };
 
 /**
  * @return {number} X-offset of the viewport.
  */
 Viewport.prototype.getOffsetX = function() { return this.offsetX_; };
 
 /**
  * @return {number} Y-offset of the viewport.
@@ skipping 164 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 {number} The number of physical pixels in one CSS pixel.
- */
-Viewport.getDevicePixelRatio = function() { return window.devicePixelRatio; };
-
-/**
  * Convert a rectangle from screen coordinates to 'device' coordinates.
  *
  * This conversion enlarges the original rectangle devicePixelRatio times
  * with the screen center as a fixed point.
  *
  * @param {Rect} rect Rectangle in screen coordinates.
  * @return {Rect} Rectangle in device coordinates.
  */
 Viewport.prototype.screenToDeviceRect = function(rect) {
-  var ratio = Viewport.getDevicePixelRatio();
+  var ratio = devicePixelRatio;
   var screenCenterX = Math.round(
       this.screenBounds_.left + this.screenBounds_.width / 2);
   var screenCenterY = Math.round(
       this.screenBounds_.top + this.screenBounds_.height / 2);
   return new Rect(screenCenterX + (rect.left - screenCenterX) * ratio,
                   screenCenterY + (rect.top - screenCenterY) * ratio,
                   rect.width * ratio,
                   rect.height * ratio);
 };
 
@@ skipping 100 matching lines @@
 };
 
 /**
  * Repaint all clients.
  */
 Viewport.prototype.repaint = function() {
   this.update();
   for (var i = 0; i != this.repaintCallbacks_.length; i++)
     this.repaintCallbacks_[i]();
 };
+
+/**
+ * Obtains CSS transformation for the screen image.
+ * @return {string} Transformation description.
+ */
+Viewport.prototype.getTransformation = function() {
+  return 'scale(' + (1 / devicePixelRatio) + ')';
+};
+
+/**
+ * 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();
+};
+
+/**
+ * Obtains CSS transformation that makes the rotated image fit the original
+ * image. The new rotated image that the transformation is applied to looks the
+ * same with original image.
+ *
+ * @param {boolean} orientation Orientation of the rotation from the original
+ *     image to the rotated image. True is for clockwise and false is for
+ *     counterclockwise.
+ * @return {string} Transformation description.
+ */
+Viewport.prototype.getInverseTransformForRotatedImage = function(orientation) {
+  var previousImageWidth = this.imageBounds_.height;
+  var previousImageHeight = this.imageBounds_.width;
+  var oldScale = this.getFittingScaleForImageSize_(
+      previousImageWidth, previousImageHeight);
+  var scaleRatio = oldScale / this.getScale();
+  var degree = orientation ? '-90deg' : '90deg';
+  return [
+    'scale(' + (scaleRatio) + ')',

[mtomasz, 2014/07/10 07:26:52]

nit: inner () redundant?

[hirono, 2014/07/10 08:16:06]

Done.

+    'rotate(' + degree + ')',
+    this.getTransformation()
+  ].join(' ');
+};
+
+/**
+ * Obtains CSS transformation that makes the cropped image fit the original
+ * image. The new cropped image that the transformaton is applied to fits to the
+ * the cropped rectangle in the original image.
+ *
+ * @param {number} imageWidth Width of the original image.
+ * @param {number} imageHeight Height of the origianl image.
+ * @param {Rect} imageCropRect Crop rectangle in the image's coordinate system.
+ * @return {string} Transformation description.
+ */
+Viewport.prototype.getInverseTransformForCroppedImage =
+    function(imageWidth, imageHeight, imageCropRect) {
+  var wholeScale = this.getFittingScaleForImageSize_(
+      imageWidth, imageHeight);
+  var croppedScale = this.getFittingScaleForImageSize_(
+      imageCropRect.width, imageCropRect.height);
+  var dx =
+      (imageCropRect.left + imageCropRect.width / 2 - imageWidth / 2) *
+      wholeScale;
+  var dy =
+      (imageCropRect.top + imageCropRect.height / 2 - imageHeight / 2) *
+      wholeScale;
+  return [
+    'translate(' + dx + 'px,' + dy + 'px)',
+    'scale(' + wholeScale / croppedScale + ')',
+    this.getTransformation()
+  ].join(' ');
+};
+
+/**
+ * Obtains CSS transformaton that makes the image fit to the screen rectangle.
+ *
+ * @param {Rect} screenRect Screen rectangle.
+ * @return {string} Transformation description.
+ */
+Viewport.prototype.getScreenRectTransformForImage = function(screenRect) {
+  var screenImageWidth = this.imageBounds_.width * this.getScale();
+  var screenImageHeight = this.imageBounds_.height * this.getScale();
+  var scaleX = screenRect.width / screenImageWidth;
+  var scaleY = screenRect.height /screenImageHeight;

[mtomasz, 2014/07/10 07:26:52]

nit: space after '/'.

[hirono, 2014/07/10 08:16:06]

Done.

+  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(' ');
+};