support zoom and move image by mouse.

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.
 
 /**
  * Slide mode displays a single image and has a set of controls to navigate
  * between the images and to edit an image.
  *
  * @param {!HTMLElement} container Main container element.
  * @param {!HTMLElement} content Content container element.
@@ skipping 1808 matching lines @@
 
   /**
    * Whether it is in a touch operation that is started from targetElement or
    * not.
    * @type {boolean}
    * @private
    */
   this.touchStarted_ = false;
 
   /**
+   * Whether the element is being clicked now or not.
+   * @type {boolean}
+   * @private
+   */
+  this.clickStarted_ = false;
+
+  /**
    * The swipe action that should happen only once in an operation is already
    * done or not.
    * @type {boolean}
    * @private
    */
   this.done_ = false;
 
   /**
    * Event on beginning of the current gesture.
    * The variable is updated when the number of touch finger changed.
@@ skipping 21 matching lines @@
    * @type {number}
    * @private
    */
   this.lastZoom_ = 1.0;
 
   targetElement.addEventListener('touchstart', this.onTouchStart_.bind(this));
   var onTouchEventBound = this.onTouchEvent_.bind(this);
   targetElement.ownerDocument.addEventListener('touchmove', onTouchEventBound);
   targetElement.ownerDocument.addEventListener('touchend', onTouchEventBound);
 
+  targetElement.addEventListener('mousedown', this.onMouseDown_.bind(this));
+  targetElement.ownerDocument.addEventListener('mousemove',
+      this.onMouseMove_.bind(this));
+  targetElement.ownerDocument.addEventListener('mouseup',
+      this.onMouseUp_.bind(this));
   targetElement.addEventListener('mousewheel', this.onMouseWheel_.bind(this));
 }
 
 /**
  * If the user touched the image and moved the finger more than SWIPE_THRESHOLD
  * horizontally it's considered as a swipe gesture (change the current image).
  * @type {number}
  * @const
  */
 TouchHandler.SWIPE_THRESHOLD = 100;
@@ skipping 162 matching lines @@
 };
 
 /**
  * Handles mouse wheel events.
  * @param {!Event} event Wheel event.
  * @private
  */
 TouchHandler.prototype.onMouseWheel_ = function(event) {
   var event = assertInstanceof(event, MouseEvent);
   var viewport = this.slideMode_.getViewport();
-  if (!this.enabled_ || !viewport.isZoomed())
+  if (!this.enabled_)
     return;
+
   this.stopOperation();
+  this.lastZoom_ = viewport.getZoom();
+  var zoom = this.lastZoom_;
+  if (event.wheelDeltaY > 0) {
+    zoom = zoom * 1.05;
+  } else {
+    zoom = zoom / 1.05;
+  }
+  viewport.setZoom(zoom);
+  this.slideMode_.imageView_.applyViewportChange();
+};
+
+/**
+ * Handles mouse wheel events.
+ * @param {!Event} event Wheel event.
+ * @private
+ */
+TouchHandler.prototype.onMouseWheel_ = function(event) {

[hirono, 2016/02/06 07:27:59]

nit: It looks we have two onMouseWheel_.

[ryoh, 2016/02/08 04:58:01]

Done.

+  var event = assertInstanceof(event, MouseEvent);
+  var viewport = this.slideMode_.getViewport();
+  if (!this.enabled_)
+    return;
+
+  this.stopOperation();
+  this.lastZoom_ = viewport.getZoom();
+  var zoom = this.lastZoom_;
+  if (event.wheelDeltaY > 0) {
+    zoom = zoom * 1.05;
+  } else {
+    zoom = zoom / 1.05;
+  }
+  viewport.setZoom(zoom);
+  this.slideMode_.imageView_.applyViewportChange();
+};
+
+/**
+ * Handles mouse down events.
+ * @param {!Event} event Wheel event.
+ * @private
+ */
+TouchHandler.prototype.onMouseDown_ = function(event) {
+  var event = assertInstanceof(event, MouseEvent);
+  var viewport = this.slideMode_.getViewport();
+  if (!this.enabled_)
+    return;
+  this.clickStarted_ = true;
+}
+
+/**
+ * Handles mouse move events.
+ * @param {!Event} event Wheel event.
+ * @private
+ */
+TouchHandler.prototype.onMouseMove_ = function(event) {
+  var event = assertInstanceof(event, MouseEvent);
+  var viewport = this.slideMode_.getViewport();
+  if (!this.enabled_ || !this.clickStarted_)
+    return;
   viewport.setOffset(
-      viewport.getOffsetX() + event.wheelDeltaX,
-      viewport.getOffsetY() + event.wheelDeltaY);
-  this.slideMode_.applyViewportChange();
-};
+      viewport.getOffsetX() + event.movementX,
+      viewport.getOffsetY() + event.movementY);
+  this.slideMode_.imageView_.applyViewportChange();
+  console.log(event);
+}
+
+/**
+ * Handles mouse up events.
+ * @param {!Event} event Wheel event.
+ * @private
+ */
+TouchHandler.prototype.onMouseUp_ = function(event) {
+  this.clickStarted_ = false;
+}