Gallery: Takes into account target canvas size when calculating view port.

ui/file_manager/gallery/js/image_editor/image_view.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.
 
 /**
  * The overlay displaying the image.
  *
  * @param {!HTMLElement} container The container element.
  * @param {!Viewport} viewport The viewport.
  * @param {!MetadataModel} metadataModel
@@ skipping 683 matching lines @@
  */
 ImageView.prototype.setTransform_ = function(
     element, viewport, opt_effect, opt_duration) {
   if (!opt_effect)
     opt_effect = new ImageView.Effect.None();
   if (typeof opt_duration !== 'number')
     opt_duration = opt_effect.getDuration();
   element.style.transitionDuration = opt_duration + 'ms';
   element.style.transitionTimingFunction = opt_effect.getTiming();
   element.style.transform = opt_effect.transform(element, viewport);
-  var imageBounds = viewport.getImageElementBoundsOnScreen();
-  element.style.left = imageBounds.left + 'px';
-  element.style.top = imageBounds.top + 'px';
-  element.style.width = imageBounds.width + 'px';
-  element.style.height = imageBounds.height + 'px';
 };
 
 /**
  * Creates zoom effect object.
  * @param {!ImageRect} screenRect Target rectangle in screen coordinates.
  * @return {!ImageView.Effect} Zoom effect object.
  */
 ImageView.prototype.createZoomEffect = function(screenRect) {
   return new ImageView.Effect.ZoomToScreen(
       screenRect,
@@ skipping 152 matching lines @@
 
 /**
  * Inherits from ImageView.Effect.
  */
 ImageView.Effect.None.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.None.prototype.transform = function(element, viewport) {
-  return viewport.getTransformation();
+  return viewport.getTransformation(element.width, element.height);
 };
 
 /**
  * Slide effect.
  *
  * @param {number} direction -1 for left, 1 for right.
  * @param {boolean=} opt_slow True if slow (as in slideshow).
  * @constructor
  * @extends {ImageView.Effect}
  * @struct
@@ skipping 13 matching lines @@
  * @override
  */
 ImageView.Effect.Slide.prototype.getReverse = function() {
   return new ImageView.Effect.Slide(-this.direction_, this.slow_);
 };
 
 /**
  * @override
  */
 ImageView.Effect.Slide.prototype.transform = function(element, viewport) {
-  return viewport.getShiftTransformation(this.shift_);
+  return viewport.getTransformation(
+      element.width, element.height, this.shift_);
 };
 
 /**
  * Zoom effect.
  *
  * Animates the original rectangle to the target rectangle.
  *
  * @param {number} previousImageWidth Width of the full resolution image.
  * @param {number} previousImageHeight Height of the full resolution image.
  * @param {!ImageRect} imageCropRect Crop rectangle in the full resolution
@@ skipping 11 matching lines @@
   this.previousImageHeight_ = previousImageHeight;
   this.imageCropRect_ = imageCropRect;
 };
 
 ImageView.Effect.Zoom.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Zoom.prototype.transform = function(element, viewport) {
-  return viewport.getInverseTransformForCroppedImage(
-      this.previousImageWidth_, this.previousImageHeight_, this.imageCropRect_);
+  return viewport.getCroppingTransformation(
+      element.width,
+      element.height,
+      this.previousImageWidth_,
+      this.previousImageHeight_,
+      this.imageCropRect_);
 };
 
 /**
  * Effect to zoom to a screen rectangle.
  *
  * @param {!ImageRect} screenRect Rectangle in the application window's
  *     coordinate.
  * @param {number=} opt_duration Duration of effect.
  * @constructor
  * @extends {ImageView.Effect}
  * @struct
  */
 ImageView.Effect.ZoomToScreen = function(screenRect, opt_duration) {
   ImageView.Effect.call(this, opt_duration ||
       ImageView.Effect.DEFAULT_DURATION);
   this.screenRect_ = screenRect;
 };
 
 ImageView.Effect.ZoomToScreen.prototype = {
   __proto__: ImageView.Effect.prototype
 };
 
 /**
  * @override
  */
 ImageView.Effect.ZoomToScreen.prototype.transform = function(
     element, viewport) {
-  return viewport.getScreenRectTransformForImage(this.screenRect_);
+  return viewport.getScreenRectTransformation(
+      element.width,
+      element.height,
+      this.screenRect_);
 };
 
 /**
  * Rotation effect.
  *
  * @param {boolean} orientation Orientation of rotation. True is for clockwise
  *     and false is for counterclockwise.
  * @constructor
  * @extends {ImageView.Effect}
  * @struct
  */
 ImageView.Effect.Rotate = function(orientation) {
   ImageView.Effect.call(this, ImageView.Effect.DEFAULT_DURATION);
   this.orientation_ = orientation;
 };
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
-  return viewport.getInverseTransformForRotatedImage(this.orientation_);
+  return viewport.getRotatingTransformation(
+      element.width, element.height, this.orientation_ ? -1 : 1);
 };