@progress/kendo-pdfviewer-common 1.0.0-develop.1 → 1.0.0-develop.2

package/dist/es/widget/pdfviewer.js

@@ -47,6 +47,7 @@ export class PdfViewer extends Component {
             maxZoom: 4,
             zoomRate: 0.25,
             zoomLevel: DEFAULT_ZOOM_LEVEL,
+            pinchToZoom: true,
             zoomBeforePrint: false,
             zoomLevelForPrint: 3,
             renderForms: false,
@@ -148,6 +149,14 @@ export class PdfViewer extends Component {
         this.state = {};
         this.pdfDocument = null;
         this.pages = [];
+        // Pinch-to-zoom state
+        this._isCtrlKeyDown = false;
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._wheelUnusedFactor = 1;
+        this._touchUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+        this._pinchAC = null;
         this.triggerError = (e) => {
             this.trigger(ERROR, {
                 error: e
@@ -223,6 +232,18 @@ export class PdfViewer extends Component {
             }
             e.preventDefault();
             e.stopPropagation();
+            if (this.options.pinchToZoom && this._isTrackpadPinch(e)) {
+                const scaleFactor = Math.exp(-e.deltaY / 100);
+                const newScaleFactor = this._accumulateFactor(this.state.zoomLevel, scaleFactor, '_wheelUnusedFactor');
+                if (newScaleFactor === 1) {
+                    return;
+                }
+                const zoomLevel = this.state.zoomLevel * newScaleFactor;
+                this.triggerZoomStart({ zoomLevel });
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                return;
+            }
             const wheelDelta = mousewheelDelta(e);
             const zoomModifier = wheelDelta < 0 ? 1 : -1;
             const zoomLevel = this.state.zoomLevel + (zoomModifier * this.options.zoomRate);
@@ -236,6 +257,102 @@ export class PdfViewer extends Component {
                 zoomLevel: zoomLevel
             });
         };
+        this._onKeyDown = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = true;
+            }
+        };
+        this._onKeyUp = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = false;
+            }
+        };
+        this._onGestureEvent = (e) => {
+            e.preventDefault();
+        };
+        this._onTouchStart = (e) => {
+            var _a;
+            if (!this.options.pinchToZoom) {
+                return;
+            }
+            if (e.touches.length !== 2) {
+                return;
+            }
+            // Prevent browser-native pinch-zoom from starting (required for iOS Safari
+            // where the gesture decision is made at touchstart time)
+            e.preventDefault();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+            this._pendingPinchFactor = 1;
+            this._touchUnusedFactor = 1;
+            const documentContainer = this.getDocumentContainer();
+            if (!documentContainer) {
+                return;
+            }
+            const signal = (_a = this._pinchAC) === null || _a === void 0 ? void 0 : _a.signal;
+            documentContainer.addEventListener('touchmove', this._onTouchMove, { passive: false, signal });
+            documentContainer.addEventListener('touchend', this._onTouchEnd, { signal });
+            documentContainer.addEventListener('touchcancel', this._onTouchEnd, { signal });
+        };
+        this._onTouchMove = (e) => {
+            if (!this._touchInfo || e.touches.length !== 2) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            const prevGapX = this._touchInfo.touch1X - this._touchInfo.touch0X;
+            const prevGapY = this._touchInfo.touch1Y - this._touchInfo.touch0Y;
+            const currGapX = touch1.screenX - touch0.screenX;
+            const currGapY = touch1.screenY - touch0.screenY;
+            const prevDist = Math.hypot(prevGapX, prevGapY) || 1;
+            const currDist = Math.hypot(currGapX, currGapY) || 1;
+            if (Math.abs(prevDist - currDist) <= this._minTouchDistanceToPinch) {
+                return;
+            }
+            if (!this._isPinching) {
+                this._isPinching = true;
+                // Suppress panning during pinch
+                this.disableScrollerEventsTracking();
+                // Fire zoom start on first pinch movement
+                this.triggerZoomStart({ zoomLevel: this.state.zoomLevel });
+            }
+            this._applyPinchTransform(prevDist, currDist);
+            // Update stored positions for next move
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+        };
+        this._onTouchEnd = (e) => {
+            if (e.touches.length >= 2) {
+                return;
+            }
+            const documentContainer = this.getDocumentContainer();
+            if (documentContainer) {
+                documentContainer.removeEventListener('touchmove', this._onTouchMove);
+                documentContainer.removeEventListener('touchend', this._onTouchEnd);
+                documentContainer.removeEventListener('touchcancel', this._onTouchEnd);
+            }
+            if (this._isPinching) {
+                this._clearPinchTransform();
+                const zoomLevel = clamp(this.state.zoomLevel * this._pendingPinchFactor, this.options.minZoom, this.options.maxZoom);
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                // Re-enable panning
+                this.enableScrollerEventsTracking();
+            }
+            this._resetPinchState();
+        };
         this.extendOptions(options);
         this.throwIfInvalidOptions();
         this.wrapper = this.element;
@@ -362,6 +479,7 @@ export class PdfViewer extends Component {
     }
     bindEvents() {
         this.bindPagesWheel();
+        this.bindPinchToZoomEvents();
     }
     bindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -381,6 +499,7 @@ export class PdfViewer extends Component {
     }
     unbindEvents() {
         this.unbindPagesWheel();
+        this.unbindPinchToZoomEvents();
     }
     unbindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -1343,6 +1462,102 @@ export class PdfViewer extends Component {
         this.element.style.setProperty('--scale-round-x', '1px');
         this.element.style.setProperty('--scale-round-y', '1px');
     }
+    _isTrackpadPinch(e) {
+        // Trackpad pinch gestures generate wheel events with synthetic ctrlKey=true.
+        // Real Ctrl+scroll has ctrlKey=true but the physical key is down.
+        // Heuristic: ctrlKey is set, physical Ctrl is NOT pressed, pixel-level delta,
+        // deltaX is 0 (no horizontal scroll), and the scale factor is small.
+        if (this._isCtrlKeyDown) {
+            return false;
+        }
+        if (e.deltaMode !== WheelEvent.DOM_DELTA_PIXEL) {
+            return false;
+        }
+        if (e.deltaX !== 0) {
+            return false;
+        }
+        const scaleFactor = Math.exp(-e.deltaY / 100);
+        if (Math.abs(scaleFactor - 1) >= 0.05) {
+            return false;
+        }
+        return true;
+    }
+    _accumulateFactor(previousScale, factor, prop) {
+        if (factor === 1) {
+            return 1;
+        }
+        if ((this[prop] > 1 && factor < 1) || (this[prop] < 1 && factor > 1)) {
+            this[prop] = 1;
+        }
+        const newFactor = Math.floor(previousScale * factor * this[prop] * 100) / (100 * previousScale);
+        this[prop] = factor / (newFactor || factor);
+        return newFactor || 1;
+    }
+    bindPinchToZoomEvents() {
+        if (!this.options.pinchToZoom) {
+            return;
+        }
+        document.addEventListener('keydown', this._onKeyDown);
+        document.addEventListener('keyup', this._onKeyUp);
+        const documentContainer = this.getDocumentContainer();
+        if (!documentContainer) {
+            return;
+        }
+        this._pinchAC = new AbortController();
+        const signal = this._pinchAC.signal;
+        // Prevent the browser from handling pinch-zoom natively
+        documentContainer.style.touchAction = 'none';
+        documentContainer.addEventListener('touchstart', this._onTouchStart, { passive: false, signal });
+        // iOS Safari fires proprietary GestureEvents for pinch gestures.
+        // Suppressing them prevents the browser from zooming the page.
+        documentContainer.addEventListener('gesturestart', this._onGestureEvent, { signal });
+        documentContainer.addEventListener('gesturechange', this._onGestureEvent, { signal });
+    }
+    unbindPinchToZoomEvents() {
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.removeEventListener('keyup', this._onKeyUp);
+        this._isCtrlKeyDown = false;
+        const documentContainer = this.getDocumentContainer();
+        if (documentContainer) {
+            documentContainer.style.touchAction = '';
+        }
+        if (this._pinchAC) {
+            this._pinchAC.abort();
+            this._pinchAC = null;
+        }
+        this._resetPinchState();
+    }
+    _resetPinchState() {
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._touchUnusedFactor = 1;
+        this._wheelUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+    }
+    get _minTouchDistanceToPinch() {
+        return 32 / (window.devicePixelRatio || 1);
+    }
+    _applyPinchTransform(prevDist, currDist) {
+        const rawFactor = currDist / prevDist;
+        const newFactor = this._accumulateFactor(this.state.zoomLevel, rawFactor, '_touchUnusedFactor');
+        this._pendingPinchFactor *= newFactor;
+        // Clamp the visual factor to the allowed zoom range
+        const targetZoom = this.state.zoomLevel * this._pendingPinchFactor;
+        const clampedZoom = clamp(targetZoom, this.options.minZoom, this.options.maxZoom);
+        const visualFactor = clampedZoom / this.state.zoomLevel;
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = `scale(${visualFactor})`;
+            pagesContainer.style.transformOrigin = 'center top';
+        }
+    }
+    _clearPinchTransform() {
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = '';
+            pagesContainer.style.transformOrigin = '';
+        }
+    }
     activatePageNumber(pageNumber) {
         const page = this.getPageByNumber(pageNumber);
         if (!page) {

package/dist/es2015/widget/pdfviewer.js

@@ -47,6 +47,7 @@ export class PdfViewer extends Component {
             maxZoom: 4,
             zoomRate: 0.25,
             zoomLevel: DEFAULT_ZOOM_LEVEL,
+            pinchToZoom: true,
             zoomBeforePrint: false,
             zoomLevelForPrint: 3,
             renderForms: false,
@@ -148,6 +149,14 @@ export class PdfViewer extends Component {
         this.state = {};
         this.pdfDocument = null;
         this.pages = [];
+        // Pinch-to-zoom state
+        this._isCtrlKeyDown = false;
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._wheelUnusedFactor = 1;
+        this._touchUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+        this._pinchAC = null;
         this.triggerError = (e) => {
             this.trigger(ERROR, {
                 error: e
@@ -223,6 +232,18 @@ export class PdfViewer extends Component {
             }
             e.preventDefault();
             e.stopPropagation();
+            if (this.options.pinchToZoom && this._isTrackpadPinch(e)) {
+                const scaleFactor = Math.exp(-e.deltaY / 100);
+                const newScaleFactor = this._accumulateFactor(this.state.zoomLevel, scaleFactor, '_wheelUnusedFactor');
+                if (newScaleFactor === 1) {
+                    return;
+                }
+                const zoomLevel = this.state.zoomLevel * newScaleFactor;
+                this.triggerZoomStart({ zoomLevel });
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                return;
+            }
             const wheelDelta = mousewheelDelta(e);
             const zoomModifier = wheelDelta < 0 ? 1 : -1;
             const zoomLevel = this.state.zoomLevel + (zoomModifier * this.options.zoomRate);
@@ -236,6 +257,102 @@ export class PdfViewer extends Component {
                 zoomLevel: zoomLevel
             });
         };
+        this._onKeyDown = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = true;
+            }
+        };
+        this._onKeyUp = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = false;
+            }
+        };
+        this._onGestureEvent = (e) => {
+            e.preventDefault();
+        };
+        this._onTouchStart = (e) => {
+            var _a;
+            if (!this.options.pinchToZoom) {
+                return;
+            }
+            if (e.touches.length !== 2) {
+                return;
+            }
+            // Prevent browser-native pinch-zoom from starting (required for iOS Safari
+            // where the gesture decision is made at touchstart time)
+            e.preventDefault();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+            this._pendingPinchFactor = 1;
+            this._touchUnusedFactor = 1;
+            const documentContainer = this.getDocumentContainer();
+            if (!documentContainer) {
+                return;
+            }
+            const signal = (_a = this._pinchAC) === null || _a === void 0 ? void 0 : _a.signal;
+            documentContainer.addEventListener('touchmove', this._onTouchMove, { passive: false, signal });
+            documentContainer.addEventListener('touchend', this._onTouchEnd, { signal });
+            documentContainer.addEventListener('touchcancel', this._onTouchEnd, { signal });
+        };
+        this._onTouchMove = (e) => {
+            if (!this._touchInfo || e.touches.length !== 2) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            const prevGapX = this._touchInfo.touch1X - this._touchInfo.touch0X;
+            const prevGapY = this._touchInfo.touch1Y - this._touchInfo.touch0Y;
+            const currGapX = touch1.screenX - touch0.screenX;
+            const currGapY = touch1.screenY - touch0.screenY;
+            const prevDist = Math.hypot(prevGapX, prevGapY) || 1;
+            const currDist = Math.hypot(currGapX, currGapY) || 1;
+            if (Math.abs(prevDist - currDist) <= this._minTouchDistanceToPinch) {
+                return;
+            }
+            if (!this._isPinching) {
+                this._isPinching = true;
+                // Suppress panning during pinch
+                this.disableScrollerEventsTracking();
+                // Fire zoom start on first pinch movement
+                this.triggerZoomStart({ zoomLevel: this.state.zoomLevel });
+            }
+            this._applyPinchTransform(prevDist, currDist);
+            // Update stored positions for next move
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+        };
+        this._onTouchEnd = (e) => {
+            if (e.touches.length >= 2) {
+                return;
+            }
+            const documentContainer = this.getDocumentContainer();
+            if (documentContainer) {
+                documentContainer.removeEventListener('touchmove', this._onTouchMove);
+                documentContainer.removeEventListener('touchend', this._onTouchEnd);
+                documentContainer.removeEventListener('touchcancel', this._onTouchEnd);
+            }
+            if (this._isPinching) {
+                this._clearPinchTransform();
+                const zoomLevel = clamp(this.state.zoomLevel * this._pendingPinchFactor, this.options.minZoom, this.options.maxZoom);
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                // Re-enable panning
+                this.enableScrollerEventsTracking();
+            }
+            this._resetPinchState();
+        };
         this.extendOptions(options);
         this.throwIfInvalidOptions();
         this.wrapper = this.element;
@@ -362,6 +479,7 @@ export class PdfViewer extends Component {
     }
     bindEvents() {
         this.bindPagesWheel();
+        this.bindPinchToZoomEvents();
     }
     bindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -381,6 +499,7 @@ export class PdfViewer extends Component {
     }
     unbindEvents() {
         this.unbindPagesWheel();
+        this.unbindPinchToZoomEvents();
     }
     unbindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -1343,6 +1462,102 @@ export class PdfViewer extends Component {
         this.element.style.setProperty('--scale-round-x', '1px');
         this.element.style.setProperty('--scale-round-y', '1px');
     }
+    _isTrackpadPinch(e) {
+        // Trackpad pinch gestures generate wheel events with synthetic ctrlKey=true.
+        // Real Ctrl+scroll has ctrlKey=true but the physical key is down.
+        // Heuristic: ctrlKey is set, physical Ctrl is NOT pressed, pixel-level delta,
+        // deltaX is 0 (no horizontal scroll), and the scale factor is small.
+        if (this._isCtrlKeyDown) {
+            return false;
+        }
+        if (e.deltaMode !== WheelEvent.DOM_DELTA_PIXEL) {
+            return false;
+        }
+        if (e.deltaX !== 0) {
+            return false;
+        }
+        const scaleFactor = Math.exp(-e.deltaY / 100);
+        if (Math.abs(scaleFactor - 1) >= 0.05) {
+            return false;
+        }
+        return true;
+    }
+    _accumulateFactor(previousScale, factor, prop) {
+        if (factor === 1) {
+            return 1;
+        }
+        if ((this[prop] > 1 && factor < 1) || (this[prop] < 1 && factor > 1)) {
+            this[prop] = 1;
+        }
+        const newFactor = Math.floor(previousScale * factor * this[prop] * 100) / (100 * previousScale);
+        this[prop] = factor / (newFactor || factor);
+        return newFactor || 1;
+    }
+    bindPinchToZoomEvents() {
+        if (!this.options.pinchToZoom) {
+            return;
+        }
+        document.addEventListener('keydown', this._onKeyDown);
+        document.addEventListener('keyup', this._onKeyUp);
+        const documentContainer = this.getDocumentContainer();
+        if (!documentContainer) {
+            return;
+        }
+        this._pinchAC = new AbortController();
+        const signal = this._pinchAC.signal;
+        // Prevent the browser from handling pinch-zoom natively
+        documentContainer.style.touchAction = 'none';
+        documentContainer.addEventListener('touchstart', this._onTouchStart, { passive: false, signal });
+        // iOS Safari fires proprietary GestureEvents for pinch gestures.
+        // Suppressing them prevents the browser from zooming the page.
+        documentContainer.addEventListener('gesturestart', this._onGestureEvent, { signal });
+        documentContainer.addEventListener('gesturechange', this._onGestureEvent, { signal });
+    }
+    unbindPinchToZoomEvents() {
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.removeEventListener('keyup', this._onKeyUp);
+        this._isCtrlKeyDown = false;
+        const documentContainer = this.getDocumentContainer();
+        if (documentContainer) {
+            documentContainer.style.touchAction = '';
+        }
+        if (this._pinchAC) {
+            this._pinchAC.abort();
+            this._pinchAC = null;
+        }
+        this._resetPinchState();
+    }
+    _resetPinchState() {
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._touchUnusedFactor = 1;
+        this._wheelUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+    }
+    get _minTouchDistanceToPinch() {
+        return 32 / (window.devicePixelRatio || 1);
+    }
+    _applyPinchTransform(prevDist, currDist) {
+        const rawFactor = currDist / prevDist;
+        const newFactor = this._accumulateFactor(this.state.zoomLevel, rawFactor, '_touchUnusedFactor');
+        this._pendingPinchFactor *= newFactor;
+        // Clamp the visual factor to the allowed zoom range
+        const targetZoom = this.state.zoomLevel * this._pendingPinchFactor;
+        const clampedZoom = clamp(targetZoom, this.options.minZoom, this.options.maxZoom);
+        const visualFactor = clampedZoom / this.state.zoomLevel;
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = `scale(${visualFactor})`;
+            pagesContainer.style.transformOrigin = 'center top';
+        }
+    }
+    _clearPinchTransform() {
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = '';
+            pagesContainer.style.transformOrigin = '';
+        }
+    }
     activatePageNumber(pageNumber) {
         const page = this.getPageByNumber(pageNumber);
         if (!page) {

package/dist/npm/widget/pdfviewer.d.ts

@@ -33,6 +33,18 @@ export declare class PdfViewer extends Component {
     searchService: SearchService;
     shouldPreventScroll: boolean;
     eventBus: EventBus;
+    _isCtrlKeyDown: boolean;
+    _isPinching: boolean;
+    _touchInfo: {
+        touch0X: number;
+        touch0Y: number;
+        touch1X: number;
+        touch1Y: number;
+    } | null;
+    _wheelUnusedFactor: number;
+    _touchUnusedFactor: number;
+    _pendingPinchFactor: number;
+    _pinchAC: AbortController | null;
     constructor(element: any, options: any);
     destroy(): void;
     throwIfInvalidOptions(): void;
@@ -183,6 +195,20 @@ export declare class PdfViewer extends Component {
     disableScrollerEventsTracking(): void;
     setScaleFactor(scaleFactor: number): void;
     onDocumentWheel: (e: any) => void;
+    _isTrackpadPinch(e: WheelEvent): boolean;
+    _accumulateFactor(previousScale: number, factor: number, prop: '_wheelUnusedFactor' | '_touchUnusedFactor'): number;
+    _onKeyDown: (e: KeyboardEvent) => void;
+    _onKeyUp: (e: KeyboardEvent) => void;
+    bindPinchToZoomEvents(): void;
+    unbindPinchToZoomEvents(): void;
+    _resetPinchState(): void;
+    get _minTouchDistanceToPinch(): number;
+    _onGestureEvent: (e: Event) => void;
+    _onTouchStart: (e: TouchEvent) => void;
+    _onTouchMove: (e: TouchEvent) => void;
+    _onTouchEnd: (e: TouchEvent) => void;
+    _applyPinchTransform(prevDist: number, currDist: number): void;
+    _clearPinchTransform(): void;
     activatePageNumber(pageNumber: any): void;
     scrollToPage({ pageNumber }: {
         pageNumber: any;

package/dist/npm/widget/pdfviewer.js

@@ -50,6 +50,7 @@ class PdfViewer extends main_1.Component {
             maxZoom: 4,
             zoomRate: 0.25,
             zoomLevel: DEFAULT_ZOOM_LEVEL,
+            pinchToZoom: true,
             zoomBeforePrint: false,
             zoomLevelForPrint: 3,
             renderForms: false,
@@ -151,6 +152,14 @@ class PdfViewer extends main_1.Component {
         this.state = {};
         this.pdfDocument = null;
         this.pages = [];
+        // Pinch-to-zoom state
+        this._isCtrlKeyDown = false;
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._wheelUnusedFactor = 1;
+        this._touchUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+        this._pinchAC = null;
         this.triggerError = (e) => {
             this.trigger(ERROR, {
                 error: e
@@ -226,6 +235,18 @@ class PdfViewer extends main_1.Component {
             }
             e.preventDefault();
             e.stopPropagation();
+            if (this.options.pinchToZoom && this._isTrackpadPinch(e)) {
+                const scaleFactor = Math.exp(-e.deltaY / 100);
+                const newScaleFactor = this._accumulateFactor(this.state.zoomLevel, scaleFactor, '_wheelUnusedFactor');
+                if (newScaleFactor === 1) {
+                    return;
+                }
+                const zoomLevel = this.state.zoomLevel * newScaleFactor;
+                this.triggerZoomStart({ zoomLevel });
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                return;
+            }
             const wheelDelta = (0, main_1.mousewheelDelta)(e);
             const zoomModifier = wheelDelta < 0 ? 1 : -1;
             const zoomLevel = this.state.zoomLevel + (zoomModifier * this.options.zoomRate);
@@ -239,6 +260,102 @@ class PdfViewer extends main_1.Component {
                 zoomLevel: zoomLevel
             });
         };
+        this._onKeyDown = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = true;
+            }
+        };
+        this._onKeyUp = (e) => {
+            if (e.key === 'Control') {
+                this._isCtrlKeyDown = false;
+            }
+        };
+        this._onGestureEvent = (e) => {
+            e.preventDefault();
+        };
+        this._onTouchStart = (e) => {
+            var _a;
+            if (!this.options.pinchToZoom) {
+                return;
+            }
+            if (e.touches.length !== 2) {
+                return;
+            }
+            // Prevent browser-native pinch-zoom from starting (required for iOS Safari
+            // where the gesture decision is made at touchstart time)
+            e.preventDefault();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+            this._pendingPinchFactor = 1;
+            this._touchUnusedFactor = 1;
+            const documentContainer = this.getDocumentContainer();
+            if (!documentContainer) {
+                return;
+            }
+            const signal = (_a = this._pinchAC) === null || _a === void 0 ? void 0 : _a.signal;
+            documentContainer.addEventListener('touchmove', this._onTouchMove, { passive: false, signal });
+            documentContainer.addEventListener('touchend', this._onTouchEnd, { signal });
+            documentContainer.addEventListener('touchcancel', this._onTouchEnd, { signal });
+        };
+        this._onTouchMove = (e) => {
+            if (!this._touchInfo || e.touches.length !== 2) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const touch0 = e.touches[0];
+            const touch1 = e.touches[1];
+            const prevGapX = this._touchInfo.touch1X - this._touchInfo.touch0X;
+            const prevGapY = this._touchInfo.touch1Y - this._touchInfo.touch0Y;
+            const currGapX = touch1.screenX - touch0.screenX;
+            const currGapY = touch1.screenY - touch0.screenY;
+            const prevDist = Math.hypot(prevGapX, prevGapY) || 1;
+            const currDist = Math.hypot(currGapX, currGapY) || 1;
+            if (Math.abs(prevDist - currDist) <= this._minTouchDistanceToPinch) {
+                return;
+            }
+            if (!this._isPinching) {
+                this._isPinching = true;
+                // Suppress panning during pinch
+                this.disableScrollerEventsTracking();
+                // Fire zoom start on first pinch movement
+                this.triggerZoomStart({ zoomLevel: this.state.zoomLevel });
+            }
+            this._applyPinchTransform(prevDist, currDist);
+            // Update stored positions for next move
+            this._touchInfo = {
+                touch0X: touch0.screenX,
+                touch0Y: touch0.screenY,
+                touch1X: touch1.screenX,
+                touch1Y: touch1.screenY
+            };
+        };
+        this._onTouchEnd = (e) => {
+            if (e.touches.length >= 2) {
+                return;
+            }
+            const documentContainer = this.getDocumentContainer();
+            if (documentContainer) {
+                documentContainer.removeEventListener('touchmove', this._onTouchMove);
+                documentContainer.removeEventListener('touchend', this._onTouchEnd);
+                documentContainer.removeEventListener('touchcancel', this._onTouchEnd);
+            }
+            if (this._isPinching) {
+                this._clearPinchTransform();
+                const zoomLevel = (0, main_1.clamp)(this.state.zoomLevel * this._pendingPinchFactor, this.options.minZoom, this.options.maxZoom);
+                this.zoom({ zoomLevel });
+                this.triggerZoomEnd({ zoomLevel });
+                // Re-enable panning
+                this.enableScrollerEventsTracking();
+            }
+            this._resetPinchState();
+        };
         this.extendOptions(options);
         this.throwIfInvalidOptions();
         this.wrapper = this.element;
@@ -365,6 +482,7 @@ class PdfViewer extends main_1.Component {
     }
     bindEvents() {
         this.bindPagesWheel();
+        this.bindPinchToZoomEvents();
     }
     bindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -384,6 +502,7 @@ class PdfViewer extends main_1.Component {
     }
     unbindEvents() {
         this.unbindPagesWheel();
+        this.unbindPinchToZoomEvents();
     }
     unbindPagesWheel() {
         const documentContainer = this.getDocumentContainer();
@@ -1346,6 +1465,102 @@ class PdfViewer extends main_1.Component {
         this.element.style.setProperty('--scale-round-x', '1px');
         this.element.style.setProperty('--scale-round-y', '1px');
     }
+    _isTrackpadPinch(e) {
+        // Trackpad pinch gestures generate wheel events with synthetic ctrlKey=true.
+        // Real Ctrl+scroll has ctrlKey=true but the physical key is down.
+        // Heuristic: ctrlKey is set, physical Ctrl is NOT pressed, pixel-level delta,
+        // deltaX is 0 (no horizontal scroll), and the scale factor is small.
+        if (this._isCtrlKeyDown) {
+            return false;
+        }
+        if (e.deltaMode !== WheelEvent.DOM_DELTA_PIXEL) {
+            return false;
+        }
+        if (e.deltaX !== 0) {
+            return false;
+        }
+        const scaleFactor = Math.exp(-e.deltaY / 100);
+        if (Math.abs(scaleFactor - 1) >= 0.05) {
+            return false;
+        }
+        return true;
+    }
+    _accumulateFactor(previousScale, factor, prop) {
+        if (factor === 1) {
+            return 1;
+        }
+        if ((this[prop] > 1 && factor < 1) || (this[prop] < 1 && factor > 1)) {
+            this[prop] = 1;
+        }
+        const newFactor = Math.floor(previousScale * factor * this[prop] * 100) / (100 * previousScale);
+        this[prop] = factor / (newFactor || factor);
+        return newFactor || 1;
+    }
+    bindPinchToZoomEvents() {
+        if (!this.options.pinchToZoom) {
+            return;
+        }
+        document.addEventListener('keydown', this._onKeyDown);
+        document.addEventListener('keyup', this._onKeyUp);
+        const documentContainer = this.getDocumentContainer();
+        if (!documentContainer) {
+            return;
+        }
+        this._pinchAC = new AbortController();
+        const signal = this._pinchAC.signal;
+        // Prevent the browser from handling pinch-zoom natively
+        documentContainer.style.touchAction = 'none';
+        documentContainer.addEventListener('touchstart', this._onTouchStart, { passive: false, signal });
+        // iOS Safari fires proprietary GestureEvents for pinch gestures.
+        // Suppressing them prevents the browser from zooming the page.
+        documentContainer.addEventListener('gesturestart', this._onGestureEvent, { signal });
+        documentContainer.addEventListener('gesturechange', this._onGestureEvent, { signal });
+    }
+    unbindPinchToZoomEvents() {
+        document.removeEventListener('keydown', this._onKeyDown);
+        document.removeEventListener('keyup', this._onKeyUp);
+        this._isCtrlKeyDown = false;
+        const documentContainer = this.getDocumentContainer();
+        if (documentContainer) {
+            documentContainer.style.touchAction = '';
+        }
+        if (this._pinchAC) {
+            this._pinchAC.abort();
+            this._pinchAC = null;
+        }
+        this._resetPinchState();
+    }
+    _resetPinchState() {
+        this._isPinching = false;
+        this._touchInfo = null;
+        this._touchUnusedFactor = 1;
+        this._wheelUnusedFactor = 1;
+        this._pendingPinchFactor = 1;
+    }
+    get _minTouchDistanceToPinch() {
+        return 32 / (window.devicePixelRatio || 1);
+    }
+    _applyPinchTransform(prevDist, currDist) {
+        const rawFactor = currDist / prevDist;
+        const newFactor = this._accumulateFactor(this.state.zoomLevel, rawFactor, '_touchUnusedFactor');
+        this._pendingPinchFactor *= newFactor;
+        // Clamp the visual factor to the allowed zoom range
+        const targetZoom = this.state.zoomLevel * this._pendingPinchFactor;
+        const clampedZoom = (0, main_1.clamp)(targetZoom, this.options.minZoom, this.options.maxZoom);
+        const visualFactor = clampedZoom / this.state.zoomLevel;
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = `scale(${visualFactor})`;
+            pagesContainer.style.transformOrigin = 'center top';
+        }
+    }
+    _clearPinchTransform() {
+        const pagesContainer = this.getPagesContainer();
+        if (pagesContainer) {
+            pagesContainer.style.transform = '';
+            pagesContainer.style.transformOrigin = '';
+        }
+    }
     activatePageNumber(pageNumber) {
         const page = this.getPageByNumber(pageNumber);
         if (!page) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-pdfviewer-common",
   "description": "Kendo UI TypeScript package exporting functions for PDFViewer component",
-  "version": "1.0.0-develop.1",
+  "version": "1.0.0-develop.2",
   "keywords": [
     "Kendo UI"
   ],