Gallery.app: Add touch operation to rotate images.

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.
 
 'use strict';
 
 /**
  * The overlay displaying the image.
  *
  * @param {HTMLElement} container The container element.
@@ skipping 98 matching lines @@
     ImageUtil.trace.reportTimer('paint');
   }
 };
 
 /**
  * Applies the viewport change that does not affect the screen cache size (zoom
  * change or offset change) with animation.
  */
 ImageView.prototype.applyViewportChange = function() {
   if (this.screenImage_) {
-    this.setTransform(
+    this.setTransform_(
         this.screenImage_,
+        this.viewport_,
         new ImageView.Effect.None(),
         ImageView.Effect.DEFAULT_DURATION);
   }
 };
 
 /**
  * @return {number} The cache generation.
  */
 ImageView.prototype.getCacheGeneration = function() {
   return this.contentGeneration_;
@@ skipping 86 matching lines @@
     needRepaint = true;
   }
 
   // Center the image.
   var imageBounds = this.viewport_.getImageElementBoundsOnScreen();
   canvas.style.left = imageBounds.left + 'px';
   canvas.style.top = imageBounds.top + 'px';
   canvas.style.width = imageBounds.width + 'px';
   canvas.style.height = imageBounds.height + 'px';
 
-  this.setTransform(canvas);
+  this.setTransform_(canvas, this.viewport_);
 
   return needRepaint;
 };
 
 /**
  * @return {ImageData} A new ImageData object with a copy of the content.
  */
 ImageView.prototype.copyScreenImageData = function() {
   return this.screenImage_.getContext('2d').getImageData(
       0, 0, this.screenImage_.width, this.screenImage_.height);
@@ skipping 203 matching lines @@
  * Unloads content.
  * @param {Rect} zoomToRect Target rectangle for zoom-out-effect.
  */
 ImageView.prototype.unload = function(zoomToRect) {
   if (this.unloadTimer_) {
     clearTimeout(this.unloadTimer_);
     this.unloadTimer_ = null;
   }
   if (zoomToRect && this.screenImage_) {
     var effect = this.createZoomEffect(zoomToRect);
-    this.setTransform(this.screenImage_, effect);
+    this.setTransform_(this.screenImage_, this.viewport_, effect);
     this.screenImage_.setAttribute('fade', true);
     this.unloadTimer_ = setTimeout(function() {
         this.unloadTimer_ = null;
         this.unload(null /* force unload */);
       }.bind(this),
       effect.getSafeInterval());
     return;
   }
   this.container_.textContent = '';
   this.contentCanvas_ = null;
@@ skipping 83 matching lines @@
  *
  * @param {HTMLCanvasElement} content The image element.
  * @param {Object=} opt_effect Transition effect object.
  * @param {number=} opt_width Image width.
  * @param {number=} opt_height Image height.
  * @param {boolean=} opt_preview True if the image is a preview (not full res).
  */
 ImageView.prototype.replace = function(
     content, opt_effect, opt_width, opt_height, opt_preview) {
   var oldScreenImage = this.screenImage_;
+  var oldViewport = this.viewport_.clone();

[mtomasz, 2014/07/24 09:59:25]

Do we need to clone? How about just creating a new instance?

var oldViewport = this.viewport_;
this.viewport_ = new Viewport()?

Would it work? WDYT?

[hirono, 2014/07/24 10:13:08]

It would not work because the viewport is shared by a few classes.

 
   this.replaceContent_(content, opt_width, opt_height, opt_preview);
   if (!opt_effect) {
     if (oldScreenImage)
       oldScreenImage.parentNode.removeChild(oldScreenImage);
     return;
   }
 
   var newScreenImage = this.screenImage_;
+  this.viewport_.resetView();
 
   if (oldScreenImage)
     ImageUtil.setAttribute(newScreenImage, 'fade', true);
-  this.setTransform(newScreenImage, opt_effect, 0 /* instant */);
+  this.setTransform_(
+      newScreenImage, this.viewport_, opt_effect, 0 /* instant */);
 
   setTimeout(function() {
-    this.setTransform(newScreenImage, null,
+    this.setTransform_(
+        newScreenImage,
+        this.viewport_,
+        null,
         opt_effect && opt_effect.getDuration());
     if (oldScreenImage) {
       ImageUtil.setAttribute(newScreenImage, 'fade', false);
       ImageUtil.setAttribute(oldScreenImage, 'fade', true);
       console.assert(opt_effect.getReverse, 'Cannot revert an effect.');
       var reverse = opt_effect.getReverse();
-      this.setTransform(oldScreenImage, reverse);
+      this.setTransform_(oldScreenImage, oldViewport, reverse);
       setTimeout(function() {
         if (oldScreenImage.parentNode)
           oldScreenImage.parentNode.removeChild(oldScreenImage);
       }, reverse.getSafeInterval());
     }
-  }.bind(this), 0);
+  }.bind(this));
 };
 
 /**
  * @param {HTMLCanvasElement} element The element to transform.
+ * @param {Viewport} viewport Viewport to be used for calculating
+ *     transformation.
  * @param {ImageView.Effect=} opt_effect The effect to apply.
  * @param {number=} opt_duration Transition duration.
+ * @private
  */
-ImageView.prototype.setTransform = function(element, opt_effect, opt_duration) {
+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.webkitTransitionDuration = opt_duration + 'ms';
   element.style.webkitTransitionTimingFunction = opt_effect.getTiming();
-  element.style.webkitTransform = opt_effect.transform(element, this.viewport_);
+  element.style.webkitTransform = opt_effect.transform(element, viewport);
 };
 
 /**
  * @param {Rect} screenRect Target rectangle in screen coordinates.
  * @return {ImageView.Effect.Zoom} Zoom effect object.
  */
 ImageView.prototype.createZoomEffect = function(screenRect) {
   return new ImageView.Effect.ZoomToScreen(
       screenRect,
       ImageView.MODE_TRANSITION_DURATION);
@@ skipping 16 matching lines @@
     height: this.viewport_.getImageBounds().height
   };
   var oldScreenImage = this.screenImage_;
   this.replaceContent_(canvas);
   var newScreenImage = this.screenImage_;
   var effect = rotate90 ?
       new ImageView.Effect.Rotate(rotate90 > 0) :
       new ImageView.Effect.Zoom(
           oldImageBounds.width, oldImageBounds.height, imageCropRect);
 
-  this.setTransform(newScreenImage, effect, 0 /* instant */);
+  this.setTransform_(newScreenImage, this.viewport_, effect, 0 /* instant */);
 
   oldScreenImage.parentNode.appendChild(newScreenImage);
   oldScreenImage.parentNode.removeChild(oldScreenImage);
 
   // Let the layout fire, then animate back to non-transformed state.
   setTimeout(
-      this.setTransform.bind(
-          this, newScreenImage, null, effect.getDuration()),
+      this.setTransform_.bind(
+          this, newScreenImage, this.viewport_, null, effect.getDuration()),
       0);
 
   return effect.getSafeInterval();
 };
 
 /**
  * Visualizes "undo crop". Shrink the current image to the given crop rectangle
  * while fading in the new image.
  *
  * @param {HTMLCanvasElement} canvas New content canvas.
  * @param {Rect} imageCropRect The crop rectangle in image coordinates.
  * @return {number} Animation duration.
  */
 ImageView.prototype.animateAndReplace = function(canvas, imageCropRect) {
   var oldScreenImage = this.screenImage_;
   this.replaceContent_(canvas);
   var newScreenImage = this.screenImage_;
   var setFade = ImageUtil.setAttribute.bind(null, newScreenImage, 'fade');
   setFade(true);
   oldScreenImage.parentNode.insertBefore(newScreenImage, oldScreenImage);
   var effect = new ImageView.Effect.Zoom(
       this.viewport_.getImageBounds().width,
       this.viewport_.getImageBounds().height,
       imageCropRect);
 
   // Animate to the transformed state.
-  this.setTransform(oldScreenImage, effect);
+  this.setTransform_(oldScreenImage, this,viewport_, effect);
   setTimeout(setFade.bind(null, false), 0);
   setTimeout(function() {
     if (oldScreenImage.parentNode)
       oldScreenImage.parentNode.removeChild(oldScreenImage);
   }, effect.getSafeInterval());
 
   return effect.getSafeInterval();
 };
 
 /**
@@ skipping 273 matching lines @@
 };
 
 ImageView.Effect.Rotate.prototype = { __proto__: ImageView.Effect.prototype };
 
 /**
  * @override
  */
 ImageView.Effect.Rotate.prototype.transform = function(element, viewport) {
   return viewport.getInverseTransformForRotatedImage(this.orientation_);
 };