Gallery.app: Add touch operation to rotate images.

ui/file_manager/gallery/js/slide_mode.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';
 
 /**
  * Slide mode displays a single image and has a set of controls to navigate
  * between the images and to edit an image.
  *
@@ skipping 1354 matching lines @@
 
   /**
    * Event on beginning of the current gesture.
    * The variable is updated when the number of touch finger changed.
    * @type {TouchEvent}
    * @private
    */
   this.gestureStartEvent_ = null;
 
   /**
+   * Rotation value on beginning of the current gesture.
+   * @type {number}
+   * @private
+   */
+  this.gestureStartRotation_ = 0;
+
+  /**
    * Last touch event.
    * @type {TouchEvent}
    * @private
    */
   this.lastEvent_ = null;
 
   /**
    * Zoom value just after last touch event.
    * @type {number}
    * @private
@@ skipping 33 matching lines @@
    * @param {boolean} flag New value.
    */
   set enabled(flag) {
     this.enabled_ = flag;
     if (!this.enabled_)
       this.stopOperation();
   }
 };
 
 /**
+ * Obtains the radian of the pinch twist angle.
+ * @param {TouchEvent} event1 Start touch event. It should include more than two
+ *     touches.
+ * @param {TouchEvent} event2 Current touch event. It should include more than
+ *     two touches.
+ * @return {number} Radian of the pinch twist angle.

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

Here we return radians, but in other places we work on degrees. Shall we choose
one unit? Maybe degrees?

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

Let me choose degrees that works fine with CSS transformation.

+ */
+TouchHandler.getTwistRadian = function(event1, event2) {
+  var dx1 = event1.touches[1].clientX - event1.touches[0].clientX;
+  var dy1 = event1.touches[1].clientY - event1.touches[0].clientY;
+  var dx2 = event2.touches[1].clientX - event2.touches[0].clientX;
+  var dy2 = event2.touches[1].clientY - event2.touches[0].clientY;
+  var innerProduce = dx1 * dx2 + dy1 * dy2;  // |v1| * |v2| * cos(t) = x / r

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

nit: Did you mean inner product?

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

Oops, yes.

+  var outerProduce = dx1 * dy2 - dy1 * dx2;  // |v1| * |v2| * sin(t) = y / r
+  return Math.atan2(outerProduce, innerProduce);  // atan(y / x)
+};
+
+/**
  * Stops the current touch operation.
  */
 TouchHandler.prototype.stopOperation = function() {
   this.touchStarted_ = false;
   this.done_ = false;
   this.gestureStartEvent_ = null;
   this.lastEvent_ = null;
   this.lastZoom_ = 1.0;
 };
 
@@ skipping 11 matching lines @@
   if (!this.touchStarted_)
     return;
 
   // Check if the current touch operation ends with the event.
   if (event.touches.length === 0) {
     this.stopOperation();
     return;
   }
 
   // Check if a new gesture started or not.
+  var viewport = this.slideMode_.getViewport();
   if (!this.lastEvent_ ||
       this.lastEvent_.touches.length !== event.touches.length) {
     if (event.touches.length === 2 ||
         event.touches.length === 1) {
       this.gestureStartEvent_ = event;
+      this.gestureStartRotation_ = viewport.getRotation();
       this.lastEvent_ = event;
-      this.lastZoom_ = this.slideMode_.getViewport().getZoom();
+      this.lastZoom_ = viewport.getZoom();
     } else {
       this.gestureStartEvent_ = null;
+      this.gestureStartRotation_ = 0;
       this.lastEvent_ = null;
       this.lastZoom_ = 1.0;
     }
     return;
   }
 
   // Handle the gesture movement.
-  var viewport = this.slideMode_.getViewport();
   switch (event.touches.length) {
     case 1:
       if (viewport.isZoomed()) {
         // Scrolling an image by swipe.
         var dx = event.touches[0].screenX - this.lastEvent_.touches[0].screenX;
         var dy = event.touches[0].screenY - this.lastEvent_.touches[0].screenY;
         viewport.setOffset(
             viewport.getOffsetX() + dx, viewport.getOffsetY() + dy);
         this.slideMode_.applyViewportChange();
       } else {
@@ skipping 14 matching lines @@
       break;
 
     case 2:
       // Pinch zoom.
       var distance1 = TouchHandler.getDistance(this.lastEvent_);
       var distance2 = TouchHandler.getDistance(event);
       if (distance1 === 0)
         break;
       var zoom = distance2 / distance1 * this.lastZoom_;
       viewport.setZoom(zoom);
+
+      // Pinch rotation.
+      var radian = TouchHandler.getTwistRadian(this.gestureStartEvent_, event);
+      if (radian > Math.PI / 8)
+        viewport.setRotation(this.gestureStartRotation_ + 1);
+      else if (radian < -Math.PI / 8)
+        viewport.setRotation(this.gestureStartRotation_ - 1);
+      else
+        viewport.setRotation(this.gestureStartRotation_);
       this.slideMode_.applyViewportChange();
       break;
   }
 
   // Update the last event.
   this.lastEvent_ = event;
   this.lastZoom_ = viewport.getZoom();
 };