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

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.
 
 'use strict';
 
 /**
  * Viewport class controls the way the image is displayed (scale, offset etc).
  * @constructor
  */
@@ skipping 35 matching lines @@
 
   /**
    * Scale from the full resolution image to the screen displayed image. This is
    * not zoom operated by users.
    * @type {number}
    * @private
    */
   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}
    * @private
    */
   this.zoom_ = 1;
 
   /**
    * Offset specified by user operations.
    * @type {number}
    */
@@ skipping 13 matching lines @@
    */
   this.generation_ = 0;
 
   this.update_();
   Object.seal(this);
 }
 
 /**
  * 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.
  * @param {number} height Image height.
  */
 Viewport.prototype.setImageSize = function(width, height) {
   this.imageBounds_ = new Rect(width, height);
   this.update_();
 };
 
 /**
  * @param {number} width Screen width.
  * @param {number} height Screen height.
  */
 Viewport.prototype.setScreenSize = function(width, height) {
   this.screenBounds_ = new Rect(width, height);
   this.update_();
 };
 
 /**
- * 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.
- */
-Viewport.prototype.getZoomIndex = function() {
-  return this.zoomIndex_;
-};
-
-/**
  * Returns the value of zoom.
  * @return {number} Zoom value.
  */
 Viewport.prototype.getZoom = function() {
-  return this.zoomIndex_;
+  return this.zoom_;
 };
 
 /**
+ * Sets the nearset larger value of ZOOM_RATIOS.
+ */
+Viewport.prototype.zoomIn = function() {
+  var zoom;
+  for (var i = 0; i < Viewport.ZOOM_RATIOS.length; i++) {
+    zoom = Viewport.ZOOM_RATIOS[i];
+    if (zoom > this.zoom_)
+      break;
+  }
+  this.setZoom(zoom);

[mtomasz, 2014/07/23 08:15:08]

nit: How about initializing zoom in #136 or adding an console.assert that zoom
is undefined? WDYT?

[hirono, 2014/07/23 09:27:22]

Done.

+};
+
+/**
+ * Sets the nearest smaller value of ZOOM_RATIOS.
+ */
+Viewport.prototype.zoomOut = function() {
+  var zoom;
+  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.isZooming = function() {

[mtomasz, 2014/07/23 08:15:08]

nit: How about just isZoomed?

[hirono, 2014/07/23 09:27:23]

Done.

+  return this.zoom_ !== 1.0;
+};
+
+/**
  * Obtains the scale for the specified image size.
  *
  * @param {number} width Width of the full resolution image.
  * @param {number} height Height of the full resolution image.
  * @return {number} The ratio of the fullresotion image size and the calculated
  * displayed image size.
  */
 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) {
   var scaleX = this.screenBounds_.width / width;
   var scaleY = this.screenBounds_.height / height;
@@ skipping 205 matching lines @@
       ~~((this.screenBounds_.width - width) / 2) + offsetX,
       ~~((this.screenBounds_.height - height) / 2) + offsetY,
       width,
       height);
 };
 
 /**
  * Resets zoom and offset.
  */
 Viewport.prototype.resetView = function() {
-  this.zoomIndex_ = 0;
   this.zoom_ = 1;
   this.offsetX_ = 0;
   this.offsetY_ = 0;
   this.update_();
 };
 
 /**
  * Recalculate the viewport parameters.
  * @private
  */
@@ skipping 122 matching lines @@
   var screenWidth = this.screenBounds_.width;
   var screenHeight = this.screenBounds_.height;
   var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2;
   var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2;
   return [
     'translate(' + dx + 'px,' + dy + 'px)',
     'scale(' + scaleX + ',' + scaleY + ')',
     this.getTransformation()
   ].join(' ');
 };