Improved Pinch-Zoom for PDF.

chrome/browser/resources/pdf/pdf.js

 // Copyright 2013 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';
 
 /**
  * @return {number} Width of a scrollbar in pixels
  */
 function getScrollbarWidth() {
@@ skipping 173 matching lines @@
   this.zoomToolbar_ = $('zoom-toolbar');
   this.zoomToolbar_.addEventListener('fit-to-width',
       this.viewport_.fitToWidth.bind(this.viewport_));
   this.zoomToolbar_.addEventListener('fit-to-page',
       this.fitToPage_.bind(this));
   this.zoomToolbar_.addEventListener('zoom-in',
       this.viewport_.zoomIn.bind(this.viewport_));
   this.zoomToolbar_.addEventListener('zoom-out',
       this.viewport_.zoomOut.bind(this.viewport_));
 
+  // We add Hammer.js in order to handle touch events like pinch-zoom.
+  this.hammertime_ = new Hammer($('plugin'));
+
+  // We must preventDefault if there is a two finger touch. By doing so browser

[bokan, 2016/10/17 22:20:15]

Please replace "browser zoom" with "native pinch-zoom"

[Kevin McNee - google account, 2016/10/24 21:11:47]

Done.

+  // zoom does not interfere with our way of handling the event.
+  this.plugin_.addEventListener('touchstart', function(e) {
+    if (e.touches.length >= 2) {
+      e.preventDefault();
+      this.hammertime_.get('pinch').set({enable: true});
+    }
+  }.bind(this));
+
+  this.plugin_.addEventListener('touchend', function(e) {
+    this.hammertime_.get('pinch').set({enable: false});
+  }.bind(this));
+
+  this.hammertime_.on('pinchstart',
+      this.viewport_.pinchZoomStart.bind(this.viewport_));
+
+  // Throttle number of pinch events to one per frame.
+  this.sentPinchEvent_ = false;
+
+  this.hammertime_.on('pinch', function(ev) {
+    if (!this.sentPinchEvent_) {
+      this.sentPinchEvent_ = true;
+      window.requestAnimationFrame(function() {
+        this.sentPinchEvent_ = false;
+        this.viewport_.pinchZoom(ev);
+      }.bind(this));
+    }
+  }.bind(this));
+
+  this.hammertime_.on('pinchend', function(ev) {
+    // Using rAF for pinch end prevents pinch updates scheduled by rAF getting
+    // sent after the pinch end.
+    window.requestAnimationFrame(function() {
+      this.viewport_.pinchZoomEnd(ev);
+    }.bind(this));
+  }.bind(this));
+
   if (toolbarEnabled) {
     this.toolbar_ = $('toolbar');
     this.toolbar_.hidden = false;
     this.toolbar_.addEventListener('save', this.save_.bind(this));
     this.toolbar_.addEventListener('print', this.print_.bind(this));
     this.toolbar_.addEventListener('rotate-right',
         this.rotateClockwise_.bind(this));
     // Must attach to mouseup on the plugin element, since it eats mousedown
     // and click events.
     this.plugin_.addEventListener('mouseup',
@@ skipping 448 matching lines @@
 
   /**
    * @private
    * A callback that's called before the zoom changes. Notify the plugin to stop
    * reacting to scroll events while zoom is taking place to avoid flickering.
    */
   beforeZoom_: function() {
     this.plugin_.postMessage({
       type: 'stopScrolling'
     });
+
+    if (this.viewport_.pinchPhase == Viewport.PinchPhase.PINCH_START) {
+      var position = this.viewport_.position;
+      var zoom = this.viewport_.zoom;
+      var pinchPhase = this.viewport_.pinchPhase;
+      this.plugin_.postMessage({
+        type: 'viewport',
+        zoom: zoom,
+        xOffset: position.x,
+        yOffset: position.y,
+        pinchPhase: pinchPhase
+      });
+    }
   },
 
   /**
    * @private
    * A callback that's called after the zoom changes. Notify the plugin of the
    * zoom change and to continue reacting to scroll events.
    */
   afterZoom_: function() {
     var position = this.viewport_.position;
     var zoom = this.viewport_.zoom;
+    var pinchVector = this.viewport_.pinchPanVector;
+    var pinchCenter = this.viewport_.pinchCenter;
+    var pinchPhase = this.viewport_.pinchPhase;
+
+    if (!pinchVector)
+      pinchVector = {x: 0, y: 0};
+    if (!pinchCenter)
+      pinchCenter = {x: 0, y: 0};
     this.plugin_.postMessage({
       type: 'viewport',
       zoom: zoom,
       xOffset: position.x,
-      yOffset: position.y
+      yOffset: position.y,
+      pinchPhase: pinchPhase,
+      pinchX: pinchCenter.x,
+      pinchY: pinchCenter.y,
+      pinchVectorX: pinchVector.x,
+      pinchVectorY: pinchVector.y
     });
     this.zoomManager_.onPdfZoomChange();
   },
 
   /**
    * @private
    * A callback that's called after the viewport changes.
    */
   viewportChanged_: function() {
     if (!this.documentDimensions_)
@@ skipping 172 matching lines @@
    * Each bookmark is an Object containing a:
    * - title
    * - page (optional)
    * - array of children (themselves bookmarks)
    * @type {Array} the top-level bookmarks of the PDF.
    */
   get bookmarks() {
     return this.bookmarks_;
   }
 };