@progress/kendo-pdfviewer-common 0.2.3-dev.202310040707 → 0.2.3-dev.202310060852

package/dist/es/utils.js

@@ -1,8 +1,24 @@
 import { saveAs } from '@progress/kendo-file-saver';
+import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
 import { getDocument, renderTextLayer } from 'pdfjs-dist';
+const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
+const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
+const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
+const MAX_CANVAS_AREA_FIREFOX = 124992400;
+const MAX_CANVAS_WIDTH_SAFARI = 4194303;
+const MAX_CANVAS_HEIGHT_SAFARI = 8388607;
 const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.maxTouchPoints &&
     navigator.maxTouchPoints > 2 &&
     /Macintosh/i.test(navigator.userAgent));
+const isSafari = (userAgent) => {
+    return detectDesktopBrowser(userAgent).safari ||
+        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+const isFirefox = (userAgent) => {
+    const desktopBrowser = detectDesktopBrowser(userAgent);
+    const mobileOS = detectMobileOS(userAgent);
+    return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
+};
 /**
  * @hidden
  */
@@ -152,21 +168,7 @@ const openPrintDialog = (dom, width, height, done, onError) => {
     }
 };
 const renderCanvas = (page, done, error) => {
-    const scaleNum = scale();
-    const viewport = page.getViewport({ scale: scaleNum });
-    const styles = {
-        width: Math.floor(viewport.width / scaleNum) + 'pt',
-        height: Math.floor(viewport.height / scaleNum) + 'pt'
-    };
-    const pageElement = createElement('div', '', styles);
-    const canvas = createElement('canvas', '', {
-        width: '100%',
-        height: '100%'
-    });
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const canvasContext = canvas.getContext('2d');
-    pageElement.appendChild(canvas);
+    const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         const printContent = new Image(Math.floor((viewport.width / scaleNum)), Math.floor((viewport.height / scaleNum)));
@@ -191,21 +193,7 @@ const createElement = function (name, className, styles) {
     return element;
 };
 const renderPage = (page, zoom, error) => {
-    const scaleNum = scale();
-    const viewport = page.getViewport({ scale: scaleNum });
-    const styles = {
-        width: (Math.floor(viewport.width / scaleNum) * zoom) + 'pt',
-        height: (Math.floor(viewport.height / scaleNum) * zoom) + 'pt'
-    };
-    const pageElement = createElement('div', 'k-page', styles);
-    const canvas = createElement('canvas', '', {
-        width: '100%',
-        height: '100%'
-    });
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const canvasContext = canvas.getContext('2d');
-    pageElement.appendChild(canvas);
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -347,3 +335,82 @@ export const currentPage = (rootElement) => {
             0.01)
         : 0;
 };
+/**
+ * @hidden
+ *
+ * related to https://github.com/telerik/kendo-pdfviewer-common/issues/6
+ * the bigger the canvas size, the worse the performance;
+ * if initial size after scaling is greater than browser limits,
+ * we are limiting it to the limits, then halving it for performance.
+ */
+const adjustCanvasSize = (targetWidth, targetHeight) => {
+    const { maxWidth, maxHeight, maxArea } = isFirefox(navigator.userAgent) ?
+        { maxWidth: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxHeight: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxArea: MAX_CANVAS_AREA_FIREFOX } :
+        isSafari(navigator.userAgent) ?
+            { maxWidth: MAX_CANVAS_WIDTH_SAFARI, maxHeight: MAX_CANVAS_HEIGHT_SAFARI, maxArea: MAX_CANVAS_AREA_CHROME_SAFARI } :
+            {
+                maxWidth: MAX_CANVAS_WIDTH_HEIGHT_CHROME,
+                maxHeight: MAX_CANVAS_WIDTH_HEIGHT_CHROME,
+                maxArea: MAX_CANVAS_AREA_CHROME_SAFARI
+            };
+    let adjustedWidth = targetWidth;
+    let adjustedHeight = targetHeight;
+    const ratio = targetWidth / targetHeight;
+    if (targetWidth > maxWidth) {
+        adjustedWidth = maxWidth;
+        const deltaWidth = targetWidth - maxWidth;
+        const deltaHeight = deltaWidth / ratio;
+        adjustedHeight = targetHeight - deltaHeight;
+    }
+    if (adjustedHeight > maxHeight) {
+        const deltaHeight = adjustedHeight - maxHeight;
+        const deltaWidth = deltaHeight * ratio;
+        adjustedHeight = maxHeight;
+        adjustedWidth -= deltaWidth;
+    }
+    const adjustedArea = adjustedWidth * adjustedHeight;
+    if (adjustedArea > maxArea) {
+        const areaRatio = Math.sqrt(maxArea / adjustedArea);
+        adjustedWidth *= areaRatio;
+        adjustedHeight *= areaRatio;
+    }
+    const adjustRatio = adjustedWidth / targetWidth;
+    return {
+        adjustedWidth: adjustedWidth !== targetWidth ? Math.floor(adjustedWidth / 2) : targetWidth,
+        adjustedHeight: adjustedHeight !== targetHeight ? Math.floor(adjustedHeight / 2) : targetHeight,
+        adjustRatio: adjustRatio !== 1 ? adjustRatio / 2 : 1
+    };
+};
+const createCanvas = (page, zoom = 1, cssClass = '') => {
+    const scaleNum = scale();
+    const viewport = page.getViewport({ scale: scaleNum });
+    const { adjustedWidth, adjustedHeight, adjustRatio } = adjustCanvasSize(viewport.width, viewport.height);
+    const styles = {
+        width: Math.floor(viewport.width / scaleNum) * zoom + 'pt',
+        height: Math.floor(viewport.height / scaleNum) * zoom + 'pt'
+    };
+    const pageElement = createElement('div', cssClass, styles);
+    const canvas = createElement('canvas', '', {
+        width: '100%',
+        height: '100%'
+    });
+    canvas.height = adjustedHeight;
+    canvas.width = adjustedWidth;
+    const canvasContext = canvas.getContext('2d');
+    pageElement.appendChild(canvas);
+    const adjustedScale = adjustRatio * scaleNum;
+    viewport.width = adjustedWidth;
+    viewport.height = adjustedHeight;
+    viewport.scale = adjustedScale;
+    viewport.transform[0] = adjustedScale;
+    viewport.transform[3] = -adjustedScale;
+    viewport.transform[5] = adjustedHeight;
+    return {
+        canvasContext,
+        viewport,
+        scaleNum,
+        canvas,
+        pageElement,
+        styles
+    };
+};

package/dist/es2015/utils.js

@@ -1,8 +1,24 @@
 import { saveAs } from '@progress/kendo-file-saver';
+import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
 import { getDocument, renderTextLayer } from 'pdfjs-dist';
+const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
+const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
+const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
+const MAX_CANVAS_AREA_FIREFOX = 124992400;
+const MAX_CANVAS_WIDTH_SAFARI = 4194303;
+const MAX_CANVAS_HEIGHT_SAFARI = 8388607;
 const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.maxTouchPoints &&
     navigator.maxTouchPoints > 2 &&
     /Macintosh/i.test(navigator.userAgent));
+const isSafari = (userAgent) => {
+    return detectDesktopBrowser(userAgent).safari ||
+        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+const isFirefox = (userAgent) => {
+    const desktopBrowser = detectDesktopBrowser(userAgent);
+    const mobileOS = detectMobileOS(userAgent);
+    return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
+};
 /**
  * @hidden
  */
@@ -152,21 +168,7 @@ const openPrintDialog = (dom, width, height, done, onError) => {
     }
 };
 const renderCanvas = (page, done, error) => {
-    const scaleNum = scale();
-    const viewport = page.getViewport({ scale: scaleNum });
-    const styles = {
-        width: Math.floor(viewport.width / scaleNum) + 'pt',
-        height: Math.floor(viewport.height / scaleNum) + 'pt'
-    };
-    const pageElement = createElement('div', '', styles);
-    const canvas = createElement('canvas', '', {
-        width: '100%',
-        height: '100%'
-    });
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const canvasContext = canvas.getContext('2d');
-    pageElement.appendChild(canvas);
+    const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         const printContent = new Image(Math.floor((viewport.width / scaleNum)), Math.floor((viewport.height / scaleNum)));
@@ -191,21 +193,7 @@ const createElement = function (name, className, styles) {
     return element;
 };
 const renderPage = (page, zoom, error) => {
-    const scaleNum = scale();
-    const viewport = page.getViewport({ scale: scaleNum });
-    const styles = {
-        width: (Math.floor(viewport.width / scaleNum) * zoom) + 'pt',
-        height: (Math.floor(viewport.height / scaleNum) * zoom) + 'pt'
-    };
-    const pageElement = createElement('div', 'k-page', styles);
-    const canvas = createElement('canvas', '', {
-        width: '100%',
-        height: '100%'
-    });
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const canvasContext = canvas.getContext('2d');
-    pageElement.appendChild(canvas);
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -347,3 +335,82 @@ export const currentPage = (rootElement) => {
             0.01)
         : 0;
 };
+/**
+ * @hidden
+ *
+ * related to https://github.com/telerik/kendo-pdfviewer-common/issues/6
+ * the bigger the canvas size, the worse the performance;
+ * if initial size after scaling is greater than browser limits,
+ * we are limiting it to the limits, then halving it for performance.
+ */
+const adjustCanvasSize = (targetWidth, targetHeight) => {
+    const { maxWidth, maxHeight, maxArea } = isFirefox(navigator.userAgent) ?
+        { maxWidth: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxHeight: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxArea: MAX_CANVAS_AREA_FIREFOX } :
+        isSafari(navigator.userAgent) ?
+            { maxWidth: MAX_CANVAS_WIDTH_SAFARI, maxHeight: MAX_CANVAS_HEIGHT_SAFARI, maxArea: MAX_CANVAS_AREA_CHROME_SAFARI } :
+            {
+                maxWidth: MAX_CANVAS_WIDTH_HEIGHT_CHROME,
+                maxHeight: MAX_CANVAS_WIDTH_HEIGHT_CHROME,
+                maxArea: MAX_CANVAS_AREA_CHROME_SAFARI
+            };
+    let adjustedWidth = targetWidth;
+    let adjustedHeight = targetHeight;
+    const ratio = targetWidth / targetHeight;
+    if (targetWidth > maxWidth) {
+        adjustedWidth = maxWidth;
+        const deltaWidth = targetWidth - maxWidth;
+        const deltaHeight = deltaWidth / ratio;
+        adjustedHeight = targetHeight - deltaHeight;
+    }
+    if (adjustedHeight > maxHeight) {
+        const deltaHeight = adjustedHeight - maxHeight;
+        const deltaWidth = deltaHeight * ratio;
+        adjustedHeight = maxHeight;
+        adjustedWidth -= deltaWidth;
+    }
+    const adjustedArea = adjustedWidth * adjustedHeight;
+    if (adjustedArea > maxArea) {
+        const areaRatio = Math.sqrt(maxArea / adjustedArea);
+        adjustedWidth *= areaRatio;
+        adjustedHeight *= areaRatio;
+    }
+    const adjustRatio = adjustedWidth / targetWidth;
+    return {
+        adjustedWidth: adjustedWidth !== targetWidth ? Math.floor(adjustedWidth / 2) : targetWidth,
+        adjustedHeight: adjustedHeight !== targetHeight ? Math.floor(adjustedHeight / 2) : targetHeight,
+        adjustRatio: adjustRatio !== 1 ? adjustRatio / 2 : 1
+    };
+};
+const createCanvas = (page, zoom = 1, cssClass = '') => {
+    const scaleNum = scale();
+    const viewport = page.getViewport({ scale: scaleNum });
+    const { adjustedWidth, adjustedHeight, adjustRatio } = adjustCanvasSize(viewport.width, viewport.height);
+    const styles = {
+        width: Math.floor(viewport.width / scaleNum) * zoom + 'pt',
+        height: Math.floor(viewport.height / scaleNum) * zoom + 'pt'
+    };
+    const pageElement = createElement('div', cssClass, styles);
+    const canvas = createElement('canvas', '', {
+        width: '100%',
+        height: '100%'
+    });
+    canvas.height = adjustedHeight;
+    canvas.width = adjustedWidth;
+    const canvasContext = canvas.getContext('2d');
+    pageElement.appendChild(canvas);
+    const adjustedScale = adjustRatio * scaleNum;
+    viewport.width = adjustedWidth;
+    viewport.height = adjustedHeight;
+    viewport.scale = adjustedScale;
+    viewport.transform[0] = adjustedScale;
+    viewport.transform[3] = -adjustedScale;
+    viewport.transform[5] = adjustedHeight;
+    return {
+        canvasContext,
+        viewport,
+        scaleNum,
+        canvas,
+        pageElement,
+        styles
+    };
+};

package/dist/npm/utils.js

@@ -1,10 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const kendo_file_saver_1 = require("@progress/kendo-file-saver");
+const kendo_common_1 = require("@progress/kendo-common");
 const pdfjs_dist_1 = require("pdfjs-dist");
+const MAX_CANVAS_WIDTH_HEIGHT_CHROME = 65535;
+const MAX_CANVAS_AREA_CHROME_SAFARI = 268435456;
+const MAX_CANVAS_WIDTH_HEIGHT_FIREFOX = 32767;
+const MAX_CANVAS_AREA_FIREFOX = 124992400;
+const MAX_CANVAS_WIDTH_SAFARI = 4194303;
+const MAX_CANVAS_HEIGHT_SAFARI = 8388607;
 const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.maxTouchPoints &&
     navigator.maxTouchPoints > 2 &&
     /Macintosh/i.test(navigator.userAgent));
+const isSafari = (userAgent) => {
+    return kendo_common_1.detectDesktopBrowser(userAgent).safari ||
+        (kendo_common_1.detectMobileOS(userAgent) && kendo_common_1.detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+const isFirefox = (userAgent) => {
+    const desktopBrowser = kendo_common_1.detectDesktopBrowser(userAgent);
+    const mobileOS = kendo_common_1.detectMobileOS(userAgent);
+    return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
+};
 /**
  * @hidden
  */
@@ -154,21 +170,7 @@ const openPrintDialog = (dom, width, height, done, onError) => {
     }
 };
 const renderCanvas = (page, done, error) => {
-    const scaleNum = scale();
-    const viewport = page.getViewport({ scale: scaleNum });
-    const styles = {
-        width: Math.floor(viewport.width / scaleNum) + 'pt',
-        height: Math.floor(viewport.height / scaleNum) + 'pt'
-    };
-    const pageElement = createElement('div', '', styles);
-    const canvas = createElement('canvas', '', {
-        width: '100%',
-        height: '100%'
-    });
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const canvasContext = canvas.getContext('2d');
-    pageElement.appendChild(canvas);
+    const { canvasContext, viewport, scaleNum, canvas, pageElement } = createCanvas(page);
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         const printContent = new Image(Math.floor((viewport.width / scaleNum)), Math.floor((viewport.height / scaleNum)));
@@ -193,21 +195,7 @@ const createElement = function (name, className, styles) {
     return element;
 };
 const renderPage = (page, zoom, error) => {
-    const scaleNum = scale();
-    const viewport = page.getViewport({ scale: scaleNum });
-    const styles = {
-        width: (Math.floor(viewport.width / scaleNum) * zoom) + 'pt',
-        height: (Math.floor(viewport.height / scaleNum) * zoom) + 'pt'
-    };
-    const pageElement = createElement('div', 'k-page', styles);
-    const canvas = createElement('canvas', '', {
-        width: '100%',
-        height: '100%'
-    });
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const canvasContext = canvas.getContext('2d');
-    pageElement.appendChild(canvas);
+    const { canvasContext, viewport, pageElement, styles } = createCanvas(page, zoom, 'k-page');
     page.render({ canvasContext, viewport })
         .promise.then(() => {
         page.getTextContent().then((textContent) => {
@@ -349,3 +337,82 @@ exports.currentPage = (rootElement) => {
             0.01)
         : 0;
 };
+/**
+ * @hidden
+ *
+ * related to https://github.com/telerik/kendo-pdfviewer-common/issues/6
+ * the bigger the canvas size, the worse the performance;
+ * if initial size after scaling is greater than browser limits,
+ * we are limiting it to the limits, then halving it for performance.
+ */
+const adjustCanvasSize = (targetWidth, targetHeight) => {
+    const { maxWidth, maxHeight, maxArea } = isFirefox(navigator.userAgent) ?
+        { maxWidth: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxHeight: MAX_CANVAS_WIDTH_HEIGHT_FIREFOX, maxArea: MAX_CANVAS_AREA_FIREFOX } :
+        isSafari(navigator.userAgent) ?
+            { maxWidth: MAX_CANVAS_WIDTH_SAFARI, maxHeight: MAX_CANVAS_HEIGHT_SAFARI, maxArea: MAX_CANVAS_AREA_CHROME_SAFARI } :
+            {
+                maxWidth: MAX_CANVAS_WIDTH_HEIGHT_CHROME,
+                maxHeight: MAX_CANVAS_WIDTH_HEIGHT_CHROME,
+                maxArea: MAX_CANVAS_AREA_CHROME_SAFARI
+            };
+    let adjustedWidth = targetWidth;
+    let adjustedHeight = targetHeight;
+    const ratio = targetWidth / targetHeight;
+    if (targetWidth > maxWidth) {
+        adjustedWidth = maxWidth;
+        const deltaWidth = targetWidth - maxWidth;
+        const deltaHeight = deltaWidth / ratio;
+        adjustedHeight = targetHeight - deltaHeight;
+    }
+    if (adjustedHeight > maxHeight) {
+        const deltaHeight = adjustedHeight - maxHeight;
+        const deltaWidth = deltaHeight * ratio;
+        adjustedHeight = maxHeight;
+        adjustedWidth -= deltaWidth;
+    }
+    const adjustedArea = adjustedWidth * adjustedHeight;
+    if (adjustedArea > maxArea) {
+        const areaRatio = Math.sqrt(maxArea / adjustedArea);
+        adjustedWidth *= areaRatio;
+        adjustedHeight *= areaRatio;
+    }
+    const adjustRatio = adjustedWidth / targetWidth;
+    return {
+        adjustedWidth: adjustedWidth !== targetWidth ? Math.floor(adjustedWidth / 2) : targetWidth,
+        adjustedHeight: adjustedHeight !== targetHeight ? Math.floor(adjustedHeight / 2) : targetHeight,
+        adjustRatio: adjustRatio !== 1 ? adjustRatio / 2 : 1
+    };
+};
+const createCanvas = (page, zoom = 1, cssClass = '') => {
+    const scaleNum = scale();
+    const viewport = page.getViewport({ scale: scaleNum });
+    const { adjustedWidth, adjustedHeight, adjustRatio } = adjustCanvasSize(viewport.width, viewport.height);
+    const styles = {
+        width: Math.floor(viewport.width / scaleNum) * zoom + 'pt',
+        height: Math.floor(viewport.height / scaleNum) * zoom + 'pt'
+    };
+    const pageElement = createElement('div', cssClass, styles);
+    const canvas = createElement('canvas', '', {
+        width: '100%',
+        height: '100%'
+    });
+    canvas.height = adjustedHeight;
+    canvas.width = adjustedWidth;
+    const canvasContext = canvas.getContext('2d');
+    pageElement.appendChild(canvas);
+    const adjustedScale = adjustRatio * scaleNum;
+    viewport.width = adjustedWidth;
+    viewport.height = adjustedHeight;
+    viewport.scale = adjustedScale;
+    viewport.transform[0] = adjustedScale;
+    viewport.transform[3] = -adjustedScale;
+    viewport.transform[5] = adjustedHeight;
+    return {
+        canvasContext,
+        viewport,
+        scaleNum,
+        canvas,
+        pageElement,
+        styles
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-pdfviewer-common",
   "description": "Kendo UI TypeScript package exporting functions for PDFViewer component",
-  "version": "0.2.3-dev.202310040707",
+  "version": "0.2.3-dev.202310060852",
   "keywords": [
     "Kendo UI"
   ],
@@ -28,6 +28,7 @@
     "@progress/kendo-file-saver": "^1.1.1"
   },
   "dependencies": {
+    "@progress/kendo-common": "^0.2.2",
     "pdfjs-dist": "3.11.174",
     "tslib": "^2.4.1"
   },