Feature request: Compatibility with pdf.js's web viewer

[AnReZa]

It seems that you guys have fairly good knowledge about how to make things zoom on the web. We display some PDFs inside our page in an IFrame. The problem is, that Apple doesn't deliver an out-of-the-box way to properly display PDFs on an iPad inside another page. It can do it, but only the first page in form of a static image.

So I've added PDF.js's web viewer, which works pretty fine, but doesn't allow any gesture zooming at all. Tapping the little plus and minus buttons works, but it's not very handy. So I asked the guys there, only to find a years-old Github issue without a lot of progress. There was only one workaround posted recently, which emulates clicking the plus and minus buttons while panning, which doesn't work really well. So my idea was to ask you guys, if it's somehow possible to use panzoom to fix that issue. Here's the link to the Github issue: https://github.com/mozilla/pdf.js/issues/2582

[rbonomo]

Yes, give it a try :0. I'd say it would work. Just initialize panzoom on some parent container element where your PDF view is a child element.

[AnReZa]

I guess, that it's actually not that easy, because pdf.js re-renders it's canvas after each zoom at the correct DPI and resolution. So we would have to reset the transformation applied by panzoom after rendering is finished.

[rbonomo]

Ok so here's an idea.

<div> // APPLY PANZOOM TO THIS GUY
  <pdf thing /> // DISABLE ZOOM BUTTONS ON THIS GUY
</div>

[AnReZa]

The PDF library used usually renders with very low DPI, so it would just get blurry without increasing the resolution. Maybe it would be possible to render the whole document in a much higher DPI range, but keep in mind, that the engine might render hundreds of pages, and right now, it does that asynchroniously.

[anvaka]

@AnReZa I looked into pdf.js code. panzoom can totally be integrated with that library. All what's needed is to Implement a panzoom controller for pdf.js.

Controller is set of methods that is called by panzoom to notify the area about transformation change. Here is an example of controller usage, for a custom webgl library:

var wglController = wglPanZoom(...);

var panzoom = makePanzoom(canvas, {
  controller: wglController  // This is how we pass it
});

And the controller itself just needs to implement two functions:

function wglPanZoom(...) {
  var controller = {
    applyTransform(newTransform) {
      newTransform.x; newTransform.y; // x, y of the transform
      newTransform.scale; // and the scale
    },

    getOwner() {
      return canvas; // dom element that listens to mouse events.
    }
  };

  return controller;
}

Full working example can be seen here: https://anvaka.github.io/ngraph.path.demo/#?graph=amsterdam-roads, and the source code for webgl controller is here