Gallery.app: Add touch handlers for the zoom/scroll feature.

Previously touch operations are handled by SwipeOverlay class. Overlay is a
common way to obtain mouse/touch events in Gallery, but it does not support
touch specific capability (e.g. multi fingers). The CL newly adds TouchHandlers
class to the SlideMode class and let it call the zoom/scroll feature of the
slide mode depending on user's touch gestures.

BUG=245926
TEST=on link

Review URL: https://codereview.chromium.org/411853002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@284926 0039d316-1c4b-4281-b951-d872f2087c98

ui/file_manager/gallery/js/image_editor/image_editor.js

@@ -747,8 +747,10 @@ ImageEditor.MouseControl.prototype.onTouchStart = function(e) {
  * @param {TouchEvent} e Event.
  */
 ImageEditor.MouseControl.prototype.onTouchEnd = function(e) {
-  if (!this.dragHappened_ && Date.now() - this.touchStartInfo_.time <=
-                             ImageEditor.MouseControl.MAX_TAP_DURATION_) {
+  if (!this.dragHappened_ &&
+      this.touchStartInfo_ &&
+      Date.now() - this.touchStartInfo_.time <=
+          ImageEditor.MouseControl.MAX_TAP_DURATION_) {
     this.buffer_.onClick(this.touchStartInfo_.x, this.touchStartInfo_.y);
     if (this.previousTouchStartInfo_ &&
         Date.now() - this.previousTouchStartInfo_.time <

ui/file_manager/gallery/js/image_editor/viewport.js

@@ -52,13 +52,6 @@ function Viewport() {
    */
   this.scale_ = 1;
 
-  /**
-   * Index of zoom ratio. 0 is "zoom ratio = 1".
-   * @type {number}
-   * @private
-   */
-  this.zoomIndex_ = 0;
-
   /**
    * Zoom ratio specified by user operations.
    * @type {number}
@@ -93,18 +86,10 @@ function Viewport() {
 /**
  * Zoom ratios.
  *
- * @type {Object.<string, number>}
+ * @type {Array.<number>}
  * @const
  */
-Viewport.ZOOM_RATIOS = Object.freeze({
-  '3': 3,
-  '2': 2,
-  '1': 1.5,
-  '0': 1,
-  '-1': 0.75,
-  '-2': 0.5,
-  '-3': 0.25
-});
+Viewport.ZOOM_RATIOS = Object.freeze([1, 1.5, 2, 3]);
 
 /**
  * @param {number} width Image width.
@@ -125,32 +110,57 @@ Viewport.prototype.setScreenSize = function(width, height) {
 };
 
 /**
- * Sets the new zoom ratio.
- * @param {number} zoomIndex New zoom index.
+ * Sets zoom value directly.
+ * @param {number} zoom New zoom value.
  */
-Viewport.prototype.setZoomIndex = function(zoomIndex) {
-  // Ignore the invalid zoomIndex.
-  if (!Viewport.ZOOM_RATIOS[zoomIndex.toString()])
-    return;
-  this.zoomIndex_ = zoomIndex;
-  this.zoom_ = Viewport.ZOOM_RATIOS[zoomIndex];
+Viewport.prototype.setZoom = function(zoom) {
+  var zoomMin = Viewport.ZOOM_RATIOS[0];
+  var zoomMax = Viewport.ZOOM_RATIOS[Viewport.ZOOM_RATIOS.length - 1];
+  var adjustedZoom = Math.max(zoomMin, Math.min(zoom, zoomMax));
+  this.zoom_ = adjustedZoom;
   this.update_();
 };
 
 /**
- * Returns the current zoom index.
- * @return {number} Zoon index.
+ * Returns the value of zoom.
+ * @return {number} Zoom value.
  */
-Viewport.prototype.getZoomIndex = function() {
-  return this.zoomIndex_;
+Viewport.prototype.getZoom = function() {
+  return this.zoom_;
 };
 
 /**
- * Returns the value of zoom.
- * @return {number} Zoom value.
+ * Sets the nearset larger value of ZOOM_RATIOS.
  */
-Viewport.prototype.getZoom = function() {
-  return this.zoomIndex_;
+Viewport.prototype.zoomIn = function() {
+  var zoom = Viewport.ZOOM_RATIOS[0];
+  for (var i = 0; i < Viewport.ZOOM_RATIOS.length; i++) {
+    zoom = Viewport.ZOOM_RATIOS[i];
+    if (zoom > this.zoom_)
+      break;
+  }
+  this.setZoom(zoom);
+};
+
+/**
+ * Sets the nearest smaller value of ZOOM_RATIOS.
+ */
+Viewport.prototype.zoomOut = function() {
+  var zoom = Viewport.ZOOM_RATIOS[Viewport.ZOOM_RATIOS.length - 1];
+  for (var i = Viewport.ZOOM_RATIOS.length - 1; i >= 0; i--) {
+    zoom = Viewport.ZOOM_RATIOS[i];
+    if (zoom < this.zoom_)
+      break;
+  }
+  this.setZoom(zoom);
+};
+
+/**
+ * Obtains whether the picture is zoomed or not.
+ * @return {boolean}
+ */
+Viewport.prototype.isZoomed = function() {
+  return this.zoom_ !== 1;
 };
 
 /**
@@ -379,7 +389,6 @@ Viewport.prototype.getCenteredRect_ = function(
  * Resets zoom and offset.
  */
 Viewport.prototype.resetView = function() {
-  this.zoomIndex_ = 0;
   this.zoom_ = 1;
   this.offsetX_ = 0;
   this.offsetY_ = 0;