Gallery: fix coordinate calculation of viewport.js.

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.
 
 /**
  * Formats string by replacing place holder with actual values.
  * @param {string} str String includes placeholder '$n'. n starts from 1.
  * @param {...*} var_args Values inserted into the place holders.
  * @return {string}
  */
@@ skipping 430 matching lines @@
  * Returns a rectangle with given geometry.
  * @param {number} width Width of the rectangle.
  * @param {number} height Height of the rectangle.
  * @param {number} offsetX X-offset of center position of the rectangle.
  * @param {number} offsetY Y-offset of center position of the rectangle.
  * @return {!ImageRect} Rectangle with given geometry.
  * @private
  */
 Viewport.prototype.getCenteredRect_ = function(
     width, height, offsetX, offsetY) {
+  var screenBounds = this.getScreenBounds();
   return new ImageRect(
-      ~~((this.getScreenBounds().width - width) / 2) + offsetX,
-      ~~((this.getScreenBounds().height - height) / 2) + offsetY,
+      ~~((screenBounds.width - width) / 2) + offsetX,
+      ~~((screenBounds.height - height) / 2) + screenBounds.top + offsetY,
       width,
       height);
 };
 
 /**
  * Resets zoom and offset.
  */
 Viewport.prototype.resetView = function() {
   this.zoom_ = 1;
   this.offsetX_ = 0;
@@ skipping 26 matching lines @@
     zoomedHeight = ~~(this.imageBounds_.width * scale * this.zoom_);
   }
   var dx = Math.max(zoomedWidht - this.getScreenBounds().width, 0) / 2;
   var dy = Math.max(zoomedHeight - this.getScreenBounds().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_);
-  this.imageBoundsOnScreen_.top += this.screenTop_;
 
   // Image bounds of element (that is not applied zoom and offset) on screen.
   var oldBounds = this.imageElementBoundsOnScreen_;
   this.imageElementBoundsOnScreen_ = this.getCenteredRect_(
       ~~(this.imageBounds_.width * this.scale_),
       ~~(this.imageBounds_.height * this.scale_),
       0,
       0);
   if (!oldBounds ||
       this.imageElementBoundsOnScreen_.width != oldBounds.width ||
@@ skipping 92 matching lines @@
  * @param {number=} opt_dx Amount of horizontal shift.
  * @return {string} Transformation description.
  */
 Viewport.prototype.getTransformation = function(width, height, opt_dx) {
   return this.getTransformationInternal_(
       width,
       height,
       this.rotation_,
       this.zoom_,
       this.offsetX_ + (opt_dx || 0),
-      this.offsetY_ + this.screenTop_);
+      this.offsetY_);
 };
 
 /**
  * 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 {number} width Width of image.
  * @param {number} height Height of image.
  * @param {number} rotation Number of clockwise 90 degree rotation. The rotation
@@ skipping 37 matching lines @@
 
   // Offset for centering.
   var rect = this.getCenteredRect_(width, height, offsetX, offsetY);
   return formatString(
       'translate($1px,$2px) scale($3) rotate($4deg)',
       rect.left,
       rect.top,
       fittingScale * zoom,
       rotation * 90);
 };