Pan-zoom a PDF (Javascript)

Question

I'm trying to pan-zoom with the mouse a <div> that contains a PDF document. I'm using PDF.js and panzoom libraries (but other working alternatives are welcome)

The snippet below basically does this task, but unfortunately, after the <div> is panzoomed, the PDF is not re-rendered, then its image gets blurry (pan the PDF with the mouse and zoom it with the mouse-wheel):

HTML

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/[email protected]/dist/panzoom.min.js"></script>

<div id="panzoom-container">
  <canvas id="the-canvas"></canvas>
</div>

<style>
#the-canvas {
  border: 1px solid black;
  direction: ltr;
}
</style>

JAVASCRIPT

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

var container = document.getElementById("panzoom-container")

function renderPage(desiredHeight) {
  pdfDoc.getPage(1).then(function(page) {
    var viewport = page.getViewport({ scale: 1, });
    var scale = desiredHeight / viewport.height;
    var scaledViewport = page.getViewport({ scale: scale, });
    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;
    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: scaledViewport
    };
    page.render(renderContext);
  });
}

// Get the PDF
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
  // Initial/first page rendering
  renderPage(250);
});

var panzoom = Panzoom(container, {
  setTransform: (container, { scale, x, y }) => {
    // here I can re-render the page, but I don't know how
    // renderPage(container.getBoundingClientRect().height);
    panzoom.setStyle('transform', `scale(${scale}) translate(${x}px, ${y}px)`)
  }
})

container.addEventListener('wheel', zoomWithWheel)

function zoomWithWheel(event) {
  panzoom.zoomWithWheel(event)
}

https://jsfiddle.net/9rkh7o0e/5/

I think that the procedure is correct, but unfortunately I'm stuck into two issues that must be fixed (then I ask for your help):

1. I don't know how to re-render correctly the PDF after the panzoom happened.
2. consecutive renderings have to be queued in order to make this work properly (so that the PDF doesn't blink when panzooming) How could I fix 1 and 2 ? I could not find any tool for doing that on a PDF, apart the panzoom lib.

Thanks

Answer 1

After some days of attempts, I solved the problem. The tricky part was to scale down the contained canvas after the container has been scaled, with a transform-origin CSS attribute set:

canvas.style.transform = "scale("+1/panzoom.getScale()+")"

Here is a fiddle of a PDF that can pan-zoomed. Each new render is done after a small delay (here it is set to 250ms) which corresponds to a sort of "wheel stop event".

function zoomWithWheel(event) {
    panzoom.zoomWithWheel(event)
    clearTimeout(wheelTimeoutHandler);
    wheelTimeoutHandler = setTimeout(function() {
        canvas.style.transform = "scale("+1/panzoom.getScale()+")"
        if (pdfDoc)
            renderPage(panzoom.getScale());
    }, wheelTimeout)
}

https://jsfiddle.net/7tmk0z42/