Improved Pinch-Zoom for PDF.

chrome/browser/resources/pdf/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.
 
 /**
  * Returns the height of the intersection of two rectangles.
  * @param {Object} rect1 the first rect
  * @param {Object} rect2 the second rect
  * @return {number} the height of the intersection of the rects
  */
 function getIntersectionHeight(rect1, rect2) {
   return Math.max(0,
       Math.min(rect1.y + rect1.height, rect2.y + rect2.height) -
       Math.max(rect1.y, rect2.y));
 }
 
 /**
+ * Makes sure that the scale level doesn't get out of the limits.
+ * @param {number} scale The new scale level.
+ * @return {number} The scale clamped within the limits.
+ */
+function clampScale(scale) {
+  return Math.min(5, Math.max(0.25, scale));
+}
+
+/**
+ * Computes vector between two points.
+ * @param {!Object} p1 The first point.
+ * @param {!Object} p2 The second point.
+ * @return {!Object} The vector.
+ */
+function vectorDelta(p1, p2) {
+  return {
+    x: p2.x - p1.x,
+    y: p2.y - p1.y
+  };
+}
+
+function frameToPluginCoordinate(coordinateInFrame) {
+  var container = $('plugin');
+  return {
+    x: coordinateInFrame.x - container.getBoundingClientRect().left,
+    y: coordinateInFrame.y - container.getBoundingClientRect().top
+  };
+}
+
+/**
  * Create a new viewport.
  * @constructor
  * @param {Window} window the window
  * @param {Object} sizer is the element which represents the size of the
  *     document in the viewport
  * @param {Function} viewportChangedCallback is run when the viewport changes
  * @param {Function} beforeZoomCallback is run before a change in zoom
  * @param {Function} afterZoomCallback is run after a change in zoom
  * @param {number} scrollbarWidth the width of scrollbars on the page
  * @param {number} defaultZoom The default zoom level.
@@ skipping 14 matching lines @@
   this.beforeZoomCallback_ = beforeZoomCallback;
   this.afterZoomCallback_ = afterZoomCallback;
   this.allowedToChangeZoom_ = false;
   this.zoom_ = 1;
   this.documentDimensions_ = null;
   this.pageDimensions_ = [];
   this.scrollbarWidth_ = scrollbarWidth;
   this.fittingType_ = Viewport.FittingType.NONE;
   this.defaultZoom_ = defaultZoom;
   this.topToolbarHeight_ = topToolbarHeight;
+  this.prevScale_ = 1;
+  this.pinchPhase_ = Viewport.PinchPhase.PINCH_NONE;
+  this.pinchPanVector_ = null;
+  this.pinchCenter_ = null;
+  this.firstPinchCenterInFrame_ = null;
 
   window.addEventListener('scroll', this.updateViewport_.bind(this));
   window.addEventListener('resize', this.resize_.bind(this));
 }
 
 /**
  * Enumeration of page fitting types.
  * @enum {string}
  */
 Viewport.FittingType = {
   NONE: 'none',
   FIT_TO_PAGE: 'fit-to-page',
   FIT_TO_WIDTH: 'fit-to-width'
 };
 
 /**
+ * Enumeration of pinch states.
+ * This should match PinchPhase enum in pdf/out_of_process_instance.h
+ * @enum {number}
+ */
+Viewport.PinchPhase = {
+  PINCH_NONE: 0,
+  PINCH_START: 1,
+  PINCH_UPDATE_ZOOM_OUT: 2,
+  PINCH_UPDATE_ZOOM_IN: 3,
+  PINCH_END: 4
+};
+
+/**
  * The increment to scroll a page by in pixels when up/down/left/right arrow
  * keys are pressed. Usually we just let the browser handle scrolling on the
  * window when these keys are pressed but in certain cases we need to simulate
  * these events.
  */
 Viewport.SCROLL_INCREMENT = 40;
 
 /**
  * Predefined zoom factors to be used when zooming in/out. These are in
  * ascending order. This should match the lists in
@@ skipping 142 matching lines @@
   },
 
   /**
    * @type {number} the zoom level of the viewport.
    */
   get zoom() {
     return this.zoom_;
   },
 
   /**
+   * @type {Viewport.PinchPhase} The phase of the current pinch gesture for
+   *    the viewport.
+   */
+  get pinchPhase() {
+    return this.pinchPhase_;
+  },
+
+  /**
+   * @type {Object} The panning caused by the current pinch gesture (as
+   *    the deltas of the x and y coordinates).
+   */
+  get pinchPanVector() {
+    return this.pinchPanVector_;
+  },
+
+  /**
+   * @type {Object} The coordinates of the center of the current pinch gesture.
+   */
+  get pinchCenter() {
+    return this.pinchCenter_;
+  },
+
+  /**
    * @private
    * Used to wrap a function that might perform zooming on the viewport. This is
    * required so that we can notify the plugin that zooming is in progress
    * so that while zooming is taking place it can stop reacting to scroll events
    * from the viewport. This is to avoid flickering.
    */
   mightZoom_: function(f) {
     this.beforeZoomCallback_();
     this.allowedToChangeZoom_ = true;
     f();
@@ skipping 19 matching lines @@
     this.zoom_ = newZoom;
     this.contentSizeChanged_();
     // Scroll to the scaled scroll position.
     this.position = {
       x: currentScrollPos.x * newZoom,
       y: currentScrollPos.y * newZoom
     };
   },
 
   /**
+   * @private
+   * Sets the zoom of the viewport.
+   * Same as setZoomInternal_ but for pinch zoom we have some more operations.
+   * @param {number} scaleDelta The zoom delta.
+   * @param {!Object} center The pinch center in content coordinates.
+   */
+  setPinchZoomInternal_: function(scaleDelta, center) {
+    assert(this.allowedToChangeZoom_,
+        'Called Viewport.setPinchZoomInternal_ without calling ' +
+        'Viewport.mightZoom_.');
+    this.zoom_ = clampScale(this.zoom_ * scaleDelta);
+
+    var newCenterInContent = this.frameToContent(center);
+    var delta = {
+      x: (newCenterInContent.x - this.oldCenterInContent.x),
+      y: (newCenterInContent.y - this.oldCenterInContent.y)
+    };
+
+    // Record the scroll position (relative to the pinch center).
+    var currentScrollPos = {
+      x: this.position.x - delta.x * this.zoom_,
+      y: this.position.y - delta.y * this.zoom_
+    };
+
+    this.contentSizeChanged_();
+    // Scroll to the scaled scroll position.
+    this.position = {
+      x: currentScrollPos.x,
+      y: currentScrollPos.y
+    };
+  },
+
+  /**
+   *  @private
+   *  Converts a point from frame to content coordinates.
+   *  @param {!Object} framePoint The frame coordinates.
+   *  @return {!Object} The content coordinates.
+   */
+  frameToContent: function(framePoint) {
+    return {

[dpapad, 2016/11/09 01:12:27]

For a future CL cleanup, I think this entire class would benefit from a helper
Point class that can perform basic operations on its x,y (shift, scale, diff),
instead of duplicating operations on plain {x,y} objects. For example this could
look as

// Assuming this.position was also a Point instance.
return framePoint.shift(this.position).scale(this.zoom);

[Kevin McNee - google account, 2016/11/09 16:36:09]

I've added a TODO about this.

Acknowledged.

+      x: (framePoint.x + this.position.x) / this.zoom_,
+      y: (framePoint.y + this.position.y) / this.zoom_
+    };
+  },
+
+  /**
    * Sets the zoom to the given zoom level.
    * @param {number} newZoom the zoom level to zoom to.
    */
   setZoom: function(newZoom) {
     this.fittingType_ = Viewport.FittingType.NONE;
     newZoom = Math.max(Viewport.ZOOM_FACTOR_RANGE.min,
                        Math.min(newZoom, Viewport.ZOOM_FACTOR_RANGE.max));
     this.mightZoom_(function() {
       this.setZoomInternal_(newZoom);
       this.updateViewport_();
@@ skipping 213 matching lines @@
       for (var i = Viewport.ZOOM_FACTORS.length - 1; i >= 0; i--) {
         if (Viewport.ZOOM_FACTORS[i] > this.zoom_)
           nextZoom = Viewport.ZOOM_FACTORS[i];
       }
       this.setZoomInternal_(nextZoom);
       this.updateViewport_();
     }.bind(this));
   },
 
   /**
+   * Pinch zoom event handler.
+   * @param {!Object} e The pinch event.
+   */
+  pinchZoom: function(e) {
+    this.mightZoom_(function() {
+      this.pinchPhase_ = e.direction == 'out' ?
+                         Viewport.PinchPhase.PINCH_UPDATE_ZOOM_OUT :
+                         Viewport.PinchPhase.PINCH_UPDATE_ZOOM_IN;
+
+      var scaleDelta = e.startScaleRatio / this.prevScale_;
+      this.pinchPanVector_ =
+          vectorDelta(e.center, this.firstPinchCenterInFrame_);
+
+      var needsScrollbars = this.documentNeedsScrollbars_(
+          clampScale(this.zoom_ * scaleDelta));
+
+      this.pinchCenter_ = e.center;
+
+      // If there's no horizontal scrolling, keep the content centered so the
+      // user can't zoom in on the non-content area.
+      // TODO(mcnee) Investigate other ways of scaling when we don't have
+      // horizontal scrolling. We want to keep the document centered,
+      // but this causes a potentially awkward transition when we start
+      // using the gesture center.
+      if (!needsScrollbars.horizontal) {
+        this.pinchCenter_ = {
+          x: this.window_.innerWidth / 2,
+          y: this.window_.innerHeight / 2
+        };
+      } else if (this.keepContentCentered_) {
+        this.oldCenterInContent =
+            this.frameToContent(frameToPluginCoordinate(e.center));
+        this.keepContentCentered_ = false;
+      }
+
+      this.setPinchZoomInternal_(
+          scaleDelta, frameToPluginCoordinate(e.center));
+      this.updateViewport_();
+      this.prevScale_ = e.startScaleRatio;
+    }.bind(this));
+  },
+
+  pinchZoomStart: function(e) {
+    this.pinchPhase_ = Viewport.PinchPhase.PINCH_START;
+    this.prevScale_ = 1;
+    this.oldCenterInContent =
+        this.frameToContent(frameToPluginCoordinate(e.center));
+
+    var needsScrollbars = this.documentNeedsScrollbars_(this.zoom_);
+    this.keepContentCentered_ = !needsScrollbars.horizontal;
+    // We keep track of begining of the pinch.
+    // By doing so we will be able to compute the pan distance.
+    this.firstPinchCenterInFrame_ = e.center;
+  },
+
+  pinchZoomEnd: function(e) {
+    this.mightZoom_(function() {
+      this.pinchPhase_ = Viewport.PinchPhase.PINCH_END;
+      var scaleDelta = e.startScaleRatio / this.prevScale_;
+      this.pinchCenter_ = e.center;
+
+      this.setPinchZoomInternal_(
+          scaleDelta, frameToPluginCoordinate(e.center));
+      this.updateViewport_();
+    }.bind(this));
+
+    this.pinchPhase_ = Viewport.PinchPhase.PINCH_NONE;
+    this.pinchPanVector_ = null;
+    this.pinchCenter_ = null;
+    this.firstPinchCenterInFrame_ = null;
+  },
+
+  /**
    * Go to the given page index.
    * @param {number} page the index of the page to go to. zero-based.
    */
   goToPage: function(page) {
     this.mightZoom_(function() {
       if (this.pageDimensions_.length === 0)
         return;
       if (page < 0)
         page = 0;
       if (page >= this.pageDimensions_.length)
@@ skipping 78 matching lines @@
     spaceOnLeft = Math.max(spaceOnLeft, 0);
 
     return {
       x: x * this.zoom_ + spaceOnLeft - this.window_.pageXOffset,
       y: insetDimensions.y * this.zoom_ - this.window_.pageYOffset,
       width: insetDimensions.width * this.zoom_,
       height: insetDimensions.height * this.zoom_
     };
   }
 };