Pinch zoom is not working in PDF.js and Request to enable

[suminda1]

Attach (recommended) or Link to PDF file here:

Configuration:

• Web browser and its version: Safari-iOS, and Android Chrome
• Operating system and its version: IOS and Android
• PDF.js version:2.2.171/c8c937c2
• Is a browser extension:

Steps to reproduce the problem:
Use PDF js in any touch support device and try to pinch zoom.

Solution for this issue

Please add the following code to the end of the viewer.js

/* Enable Pinch-zoom */

//# sourceMappingURL=viewer.js.map
let pinchZoomEnabled = false;
function enablePinchZoom(pdfViewer) {
let startX = 0, startY = 0;
let initialPinchDistance = 0;
let pinchScale = 1;
const viewer = document.getElementById("viewer");
const container = document.getElementById("viewerContainer");
const reset = () => { startX = startY = initialPinchDistance = 0; pinchScale = 1; };

// Prevent native iOS page zoom
//document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false });
document.addEventListener("touchstart", (e) => {
if (e.touches.length > 1) {
startX = (e.touches[0].pageX + e.touches[1].pageX) / 2;
startY = (e.touches[0].pageY + e.touches[1].pageY) / 2;
initialPinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
} else {
initialPinchDistance = 0;
}
});
document.addEventListener("touchmove", (e) => {
if (initialPinchDistance <= 0 || e.touches.length < 2) { return; }
if (e.scale !== 1) { e.preventDefault(); }
const pinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
const originX = startX + container.scrollLeft;
const originY = startY + container.scrollTop;
pinchScale = pinchDistance / initialPinchDistance;
viewer.style.transform = scale(${pinchScale});
viewer.style.transformOrigin = ${originX}px ${originY}px;
}, { passive: false });
document.addEventListener("touchend", (e) => {
if (initialPinchDistance <= 0) { return; }
viewer.style.transform = none;
viewer.style.transformOrigin = unset;
PDFViewerApplication.pdfViewer.currentScale *= pinchScale;
const rect = container.getBoundingClientRect();
const dx = startX - rect.left;
const dy = startY - rect.top;
container.scrollLeft += dx * (pinchScale - 1);
container.scrollTop += dy * (pinchScale - 1);
reset();
});
}
document.addEventListener('webviewerloaded', () => {
hidePdfViewerButtons();

if (!pinchZoomEnabled) {
pinchZoomEnabled = true;
enablePinchZoom();
}

//Fix for iOS empty page print
//Ref =>#7597 (comment)
var printQuery = window.matchMedia('print');
PDFViewerApplication.beforePrint = function(method){
return function(){
method.apply(this, arguments);
if(this.printService){
this.printService.performPrint = function(print){
return function(){
var that = this;
return new Promise(function(resolve){
function printListener(){
setTimeout(function(){
printQuery.removeListener(printListener);
resolve();
}, 1000);
}
printQuery.addListener(printListener);
print.call(that);
});
}
}(this.printService.performPrint)
}
}
}(PDFViewerApplication.beforePrint);

});

[Snuffleupagus]

Duplicate of #2582

[adadgio]

What happens if you remove all JS related to that and remove the "maximum-scale=1" in your index.html meta viewport markup ? This did the trick for me.