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 199 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
+  // 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', function(ev) {
+    this.pinchZoomStart(ev);
+  }.bind(this.viewport_));
+
+  this.didPinch_ = false;
+  this.didPinchEnd_ = false;

[bokan, 2016/04/22 15:45:35]

These should be on this.viewport_ since you bind your handlers to it, right?

[alessandroa, 2016/04/22 18:59:02]

That's true! Ups :)

+
+  this.hammertime_.on('pinch', function(ev) {
+    if(!this.didPinch_) {
+      this.didPinch_ = true;
+      window.requestAnimationFrame(function() {
+        this.didPinch_ = false;
+        this.pinchZoom(ev);
+      }.bind(this));
+    }
+  }.bind(this.viewport_));
+
+  this.hammertime_.on('pinchend', function(ev) {
+    if(!this.didPinchEnd_) {
+      window.requestAnimationFrame(function() {
+        this.didPinchEnd_ = false;
+        this.pinchZoomEnd(ev);
+      }.bind(this));
+    }
+  }.bind(this.viewport_));
+
   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 450 matching lines @@
   },
 
   /**
    * @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 doRender = this.viewport.doRender_;
+
+    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,
+      render: doRender,  // Render or not
+      px: pinchCenter.x,
+      py: 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 173 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_;
   }
 };