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

package/dist/npm/utils.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addAdoptedStylesheet = exports.getDevicePixelRatio = exports.adjustCanvasSize = exports.currentPage = exports.scrollToPage = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.renderPage = exports.transforms = exports.createElement = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.removeChildren = exports.parsePdfFromBase64String = exports.scale = exports.DEFAULT_ZOOM_LEVEL = void 0;
+exports.addAdoptedStylesheet = exports.getDevicePixelRatio = exports.adjustCanvasSize = exports.currentPage = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.renderPage = exports.transforms = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.removeChildren = exports.parsePdfFromBase64String = exports.scale = exports.DEFAULT_ZOOM_LEVEL = exports.scrollToPage = exports.createElement = void 0;
 const kendo_file_saver_1 = require("@progress/kendo-file-saver");
 const kendo_common_1 = require("@progress/kendo-common");
 const pdf_mjs_1 = require("pdfjs-dist/legacy/build/pdf.mjs");
 const annotations_1 = require("./annotations");
+const dom_1 = require("./common/dom");
+Object.defineProperty(exports, "createElement", { enumerable: true, get: function () { return dom_1.createElement; } });
+Object.defineProperty(exports, "scrollToPage", { enumerable: true, get: function () { return dom_1.scrollToPage; } });
 const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
 const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
 const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
@@ -163,7 +166,7 @@ const reloadDocument = (params) => {
         if (loadOnDemand) {
             const page = pdfPages[currentPageIndex];
             (0, exports.renderPage)(page, page._pageInfo.emptyPage, error);
-            (0, exports.scrollToPage)(rootElement, currentPageIndex);
+            (0, dom_1.scrollToPage)(rootElement, currentPageIndex);
         }
         done(pdfPages);
     })
@@ -227,7 +230,7 @@ const createEmptyPage = (page, zoom, pdfDoc, rootElement) => {
 };
 const renderCanvas = (page, done, error) => {
     const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
-    page.render({ canvasContext, viewport })
+    page.render({ canvasContext, viewport, canvas })
         .promise.then(() => {
         const printContent = new Image(Math.floor((viewport.width / scaleNum)), Math.floor((viewport.height / scaleNum)));
         printContent.src = canvas.toDataURL();
@@ -240,15 +243,6 @@ const renderCanvas = (page, done, error) => {
         .catch(error);
     return viewport;
 };
-const createElement = function (name, className, styles) {
-    const element = document.createElement(name);
-    if (className) {
-        element.className = className;
-    }
-    Object.keys(styles).forEach((key) => (element.style[key] = styles[key]));
-    return element;
-};
-exports.createElement = createElement;
 exports.transforms = {
     '0': '',
     '90': 'rotate(90deg) translateY(-100%)',
@@ -256,12 +250,12 @@ exports.transforms = {
     '270': 'rotate(270deg) translateX(-100%)'
 };
 const renderPage = (page, emptyPage, error) => {
-    const { canvasContext, viewport, pageElement, styles, zoom, pdfDoc, rootElement } = emptyPage;
+    const { canvasContext, viewport, pageElement, styles, zoom, pdfDoc, rootElement, canvas } = emptyPage;
     page._pageInfo.renderInProgress = true;
-    page.render({ canvasContext, viewport })
+    page.render({ canvasContext, viewport, canvas })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
-            const textLayer = (0, exports.createElement)('div', 'k-text-layer', styles);
+            const textLayer = (0, dom_1.createElement)('div', 'k-text-layer', styles);
             new pdf_mjs_1.TextLayer({
                 textContentSource: textContent,
                 container: textLayer,
@@ -283,7 +277,7 @@ const renderPage = (page, emptyPage, error) => {
             }).catch(error);
         });
         page.getAnnotations({ intent: 'display' }).then((annotations) => {
-            const annotationLayer = (0, exports.createElement)('div', 'k-annotations-layer', {
+            const annotationLayer = (0, dom_1.createElement)('div', 'k-annotations-layer', {
                 position: 'absolute',
                 top: '0',
                 left: '0',
@@ -379,25 +373,6 @@ const calculateZoomLevel = (zoomLevel, zoomLevelType, currentZoom, dom) => {
     return calculatedZoomLevel;
 };
 exports.calculateZoomLevel = calculateZoomLevel;
-/**
- * Scrolls the PDFViewer document to the passed page number.
- *
- * @param rootElement The root HTML element of the PDFViewer component.
- * @param pageNumber The page number.
- */
-const scrollToPage = (rootElement, pageNumber) => {
-    const pages = rootElement.querySelectorAll('.k-page');
-    const page = pages[0];
-    if (page instanceof HTMLDivElement) {
-        const top = (page.offsetHeight + page.offsetTop) *
-            Math.max(0, Math.min(pageNumber, pages.length - 1));
-        const scrollElement = page.closest('.k-pdf-viewer-canvas');
-        if (scrollElement) {
-            scrollElement.scrollTo({ top, behavior: 'auto' });
-        }
-    }
-};
-exports.scrollToPage = scrollToPage;
 /**
  * A function which gives you the page number of the document according to the scroll position.
  *
@@ -469,8 +444,8 @@ const createCanvas = (page, zoom = 1, cssClass = '') => {
         width: Math.floor(viewport.width / scaleNum) * zoom + 'pt',
         height: Math.floor(viewport.height / scaleNum) * zoom + 'pt'
     };
-    const pageElement = (0, exports.createElement)('div', cssClass, styles);
-    const canvas = (0, exports.createElement)('canvas', '', {
+    const pageElement = (0, dom_1.createElement)('div', cssClass, styles);
+    const canvas = (0, dom_1.createElement)('canvas', '', {
         width: '100%',
         height: '100%'
     });

package/dist/npm/widget/page.js

@@ -572,6 +572,7 @@ class Page extends component_1.Component {
                 canvasContext: canvasContext,
                 // transform,
                 viewport,
+                canvas,
                 annotationMode: tslib_1.__classPrivateFieldGet(this, _Page_annotationMode, "f"),
                 // optionalContentConfigPromise: this._optionalContentConfigPromise,
                 annotationCanvasMap: this._annotationCanvasMap,

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();
@@ -1342,6 +1461,105 @@ class PdfViewer extends main_1.Component {
     }
     setScaleFactor(scaleFactor) {
         this.element.style.setProperty('--scale-factor', String(scaleFactor * pdf_mjs_1.PixelsPerInch.PDF_TO_CSS_UNITS));
+        this.element.style.setProperty('--total-scale-factor', String(scaleFactor * pdf_mjs_1.PixelsPerInch.PDF_TO_CSS_UNITS));
+        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);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-pdfviewer-common",
   "description": "Kendo UI TypeScript package exporting functions for PDFViewer component",
-  "version": "0.6.5-develop.2",
+  "version": "1.0.0-develop.2",
   "keywords": [
     "Kendo UI"
   ],
@@ -17,9 +17,9 @@
   },
   "scripts": {
     "prepare": "npx husky",
-    "test": "jest --config jest.config.js",
-    "test:ci": "jest --config jest.config.js",
-    "watch-test": "jest --watch --config jest.config.js",
+    "test": "vitest run --config vitest.config.ts",
+    "test:ci": "vitest run --config vitest.config.ts",
+    "watch-test": "vitest run --config vitest.config.ts --watch",
     "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider gulp start",
     "lint": "npx eslint",
     "lint:fix": "npx eslint --fix",
@@ -28,58 +28,44 @@
   },
   "peerDependencies": {
     "@progress/kendo-draggable": "^3.1.0",
-    "@progress/kendo-file-saver": "^1.1.1"
+    "@progress/kendo-file-saver": "^1.1.2"
   },
   "dependencies": {
     "@progress/kendo-common": "1.0.2",
-    "pdfjs-dist": "4.6.82",
-    "tslib": "^2.4.1"
+    "pdfjs-dist": "5.6.205",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.7",
-    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^19.6.0",
-    "@eslint/js": "^9.18.0",
-    "@progress/kendo-common-tasks": "8.0.7-dev.24",
+    "@babel/preset-env": "^7.29.0",
+    "@commitlint/cli": "^20.4.4",
+    "@commitlint/config-conventional": "^20.4.4",
+    "@eslint/js": "^10.0.1",
+    "@progress/kendo-common-tasks": "^9.0.1",
     "@progress/kendo-draggable": "^3.1.0",
-    "@progress/kendo-file-saver": "^1.1.1",
-    "@progress/kendo-typescript-tasks": "11.3.8-dev.22",
-    "@types/jasmine": "~2.2.0",
-    "@types/jest": "^23.3.14",
-    "cross-env": "^7.0.3",
+    "@progress/kendo-file-saver": "^1.1.2",
+    "@progress/kendo-typescript-tasks": "^12.0.0",
+    "cross-env": "^10.1.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^9.18.0",
-    "eslint-plugin-jsdoc": "^50.6.2",
+    "eslint": "^10.0.3",
+    "eslint-plugin-jsdoc": "^62.8.0",
     "gulp": "^5.0.0",
     "husky": "^9.1.7",
-    "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-typescript": "^1.2.0",
-    "ts-jest": "^29.2.5",
-    "typescript": "~5.7.3",
-    "typescript-eslint": "^8.21.0"
-  },
-  "overrides": {
-    "lodash": ">=4.18.0",
-    "tmp": ">=0.2.4",
-    "tar": ">=7.5.10",
-    "@tootallnate/once": ">=3.0.1",
-    "minimatch": ">=10.2.3",
-    "webpack": ">=5.104.1",
-    "handlebars": ">=4.7.9",
-    "uuid": ">=14.0.0",
-    "picomatch": ">=2.3.2",
-    "follow-redirects": ">=1.16.0",
-    "flatted": ">=3.4.2",
-    "brace-expansion": ">=3.4.2",
-    "qs": ">=6.14.2"
+    "jsdom": "^28.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vitest": "^4.1.3",
+    "vitest-canvas-mock": "^1.1.3"
   },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
+  "overrides": {
+    "lodash": "^4.17.23",
+    "inquirer": "^9.2.0",
+    "uuid": "^14.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-pdfviewer-common.git"