Pinch zoom implementation for PDF.js viewer

viewer.html

<!-- Goes into viewer.html just before ending </body> -->
<script>
    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', () => {
        if (!pinchZoomEnabled) {
            pinchZoomEnabled = true;
            enablePinchZoom();
        }
    });
</script>

hello guys , when i implement and test it on my application ,it doesn't work

Thank you @meghrathod - It's working for BlazorWebView in MAUI Blazor

hi guys, if you use modern browser, please upgrade pdfjs to latest version or the supported version(version >=3.3.122, for more info see this PR), pdfjs now support pinch-to-zoom feature.
if unfortunately, not use modern browser(for example, you have to use pdfjs version v2.x), this code work perfectly!

hi guys, if you use modern browser, please upgrade pdfjs to latest version or the supported version(version >=3.3.122, for more info see this PR), pdfjs now support pinch-to-zoom feature. if unfortunately, not use modern browser(for example, you have to use pdfjs version v2.x), this code work perfectly!

example mobile-viewer not support pinch zoom, do you know how to enable?

mozilla/pdf.js#19004
https://github.com/mozilla/pdf.js/tree/master/examples/mobile-viewer