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_));
 
+  // Setup hammer.js touch event listener.

[bokan, 2016/04/21 02:24:00]

Comments should describe "why", not "what". In this case, "why are we adding
hammer.js?"

[alessandroa, 2016/04/21 20:39:39]

Done.

+  this.hammertime_ = new Hammer($('plugin'));
+
+  // We must preventDefault if there are is a two fingers touch.

[bokan, 2016/04/21 02:24:00]

"are is" -> "is"
"fingers" -> "finger"

Same as above, "why must we preventDefault if there's a two finger touch?"

[alessandroa, 2016/04/21 20:39:39]

Acknowledged.

+  this.plugin_.addEventListener('touchstart', function(e) {
+    if (e.touches.length >= 2) {
+      e.preventDefault();
+      this.hammertime_.get('pinch').set({enable: true});
+    } else

[bokan, 2016/04/21 02:24:00]

Else block should also have curly braces {} (if one branch has curly braces,
both should have)

[alessandroa, 2016/04/21 20:39:39]

Acknowledged.

+      this.hammertime_.get('pinch').set({enable: false});
+  }.bind(this));
+
+  this.plugin_.addEventListener('touchend', function(e) {
+    if (e.touches.length >= 2)
+      this.hammertime_.get('pinch').set({enable: true});

[bokan, 2016/04/21 02:24:00]

I think you only need the "enable: false" branch in touchend and "enable: start"
in touchstart.

[alessandroa, 2016/04/21 20:39:39]

Done.

+    else
+      this.hammertime_.get('pinch').set({enable: false});
+  }.bind(this));
+
+  this.hammertime_.on('pinchstart', function(ev) {
+    window.requestAnimationFrame(function() {
+      this.pinchZoomStart(ev);
+    }.bind(this));
+  }.bind(this.viewport_));
+
+  this.hammertime_.on('pinch', function(ev) {
+    window.requestAnimationFrame(function() {
+      this.pinchZoom(ev);

[bokan, 2016/04/21 02:24:00]

The way these are set up, if "pinch" is called 5 times in one frame, we'll call
this function 5 times when requestAnimationFrames are fired. What you really
want is something like this:

var didPinch = false;

on('pinch', function(ev) {
  if (!didPinch) {
    didPinch = true;
    window.requestAnimationFrame(function() {
      didPinch = false;
      this.pinchZoom(ev);
    }).bind(this))
  }
}).bind(this.viewport_);

[alessandroa, 2016/04/21 20:39:39]

Acknowledged.

+    }.bind(this));
+  }.bind(this.viewport_));
+
+  this.hammertime_.on('pinchend', function(ev) {
+    window.requestAnimationFrame(function() {
+      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 213 matching lines @@
 
   fitToPage_: function() {
     this.viewport_.fitToPage();
     this.toolbarManager_.forceHideTopToolbar();
   },
 
   /**
    * @private
    * Notify the plugin to print.
    */
-  print_: function() {
-    this.plugin_.postMessage({
-      type: 'print'
-    });
-  },
+  print_: function() { this.plugin_.postMessage({type: 'print'}); },

[bokan, 2016/04/21 02:24:00]

Undo the whitespace change (makes going back in time with `git blame` more
tedious)

[alessandroa, 2016/04/21 20:39:39]

Done.

 
   /**
    * @private
    * Notify the plugin to save.
    */
-  save_: function() {
-    this.plugin_.postMessage({
-      type: 'save'
-    });
-  },
+  save_: function() { this.plugin_.postMessage({type: 'save'}); },
 
   /**
    * Fetches the page number corresponding to the given named destination from
    * the plugin.
    * @param {string} name The namedDestination to fetch page number from plugin.
    */
   getNamedDestination_: function(name) {
     this.plugin_.postMessage({
       type: 'getNamedDestination',
       namedDestination: name
@@ skipping 202 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 = true;
+    if (!this.viewport_.doRender_)

[bokan, 2016/04/21 15:22:06]

This can just be doRender = this.viewport_.doRender

[alessandroa, 2016/04/21 20:39:39]

Acknowledged.

+      doRender = false;

[wjmaclean, 2016/04/21 14:11:01]

I don't understand ... isn't this the equivalent of

var doRender = this.viewport_.doRender_;

?

[alessandroa, 2016/04/21 20:39:39]

I changed from 1 and 0 to true and false and I forgot about this. Sorry. 

+
+    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 158 matching lines @@
         targetOrigin = '*';
       else
         targetOrigin = this.originalUrl_;
       this.parentWindow_.postMessage(message, targetOrigin);
     }
   },
 
   /**
    * @type {Viewport} the viewport of the PDF viewer.
    */
-  get viewport() {
-    return this.viewport_;
-  },
+  get viewport() { return this.viewport_; },

[bokan, 2016/04/21 02:24:00]

Ditto on whitespace here and below

[alessandroa, 2016/04/21 20:39:39]

Sorry .. ctrl + f screwed this up :) 

 
   /**
    * 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_;
-  }
+  get bookmarks() { return this.bookmarks_; }
 };