@react-pdf-kit/viewer 2.1.0-beta.1 → 2.1.0-beta.3

package/dist/utils/hooks/usePrint.js

@@ -1,6 +1,6 @@
-import { useState as g, useRef as N, useEffect as R, useCallback as P } from "react";
-import { useDocumentContext as O } from "../../contexts/RPDocumentContext.js";
-import { PixelsPerInch as X, AnnotationMode as q, RenderingCancelledException as B } from "pdfjs-dist";
+import { useState as g, useRef as k, useEffect as D, useCallback as P } from "react";
+import { useDocumentContext as q } from "../../contexts/RPDocumentContext.js";
+import { PixelsPerInch as V, AnnotationMode as O, RenderingCancelledException as U } from "pdfjs-dist";
 import "react/jsx-runtime";
 import "./useLoadPdf.js";
 import "../types.js";
@@ -13,118 +13,111 @@ import "./usePdfProperties.js";
 import "../convertPdfDate.js";
 import "../formatFileSize.js";
 const re = () => {
-  const { pdf: l, pages: f } = O(), [D, E] = g({
+  const { pdf: l, pages: f } = q(), [R, E] = g({
     loadedPages: 0,
     totalPages: 0,
     percentage: 0
-  }), [T, b] = g(!1), [A, y] = g(!1), [Z, L] = g(null), [F, w] = g(void 0), s = N(!1);
-  R(() => {
-    s.current;
-  }, [s]);
-  const C = P(() => {
+  }), [T, y] = g(!1), [A, b] = g(!1), [Z, C] = g(null), [M, w] = g(void 0), i = k(!1);
+  D(() => {
+    i.current;
+  }, [i]);
+  const S = P(() => {
     document.documentElement.classList.remove("rp-print-html-printing"), document.body.classList.remove("rp-print-body-printing");
     const e = document.querySelector(".rp-print-zone");
     e && e.remove();
-  }, []), a = P(() => {
-    s.current = !1, b(!1), y(!1), L(null), w(void 0), E({
+  }, []), s = P(() => {
+    i.current = !1, y(!1), b(!1), C(null), w(void 0), E({
       loadedPages: 0,
       totalPages: 0,
       percentage: 0
     });
-  }, []), M = () => {
-    s.current = !0;
+  }, []), F = () => {
+    i.current = !0;
   }, I = async ({
     scratchCanvas: e,
     pdfDocument: n,
     pageNumber: t,
-    viewerPdfPage: o,
-    printResolution: r,
-    optionalContentConfigPromise: i,
+    viewerPdfPage: r,
+    printResolution: o,
+    optionalContentConfigPromise: c,
     printAnnotationStoragePromise: u
   }) => {
-    if (s.current) {
-      a();
+    if (i.current) {
+      s();
       return;
     }
-    const c = r / X.PDF;
-    e.width = Math.floor(o.width * c), e.height = Math.floor(o.height * c);
+    const a = o / V.PDF;
+    e.width = Math.floor(r.width * a), e.height = Math.floor(r.height * a);
     const p = e.getContext("2d");
     p.save(), p.fillStyle = "rgb(255, 255, 255)", p.fillRect(0, 0, e.width, e.height), p.restore();
     const [m, h] = await Promise.all([
       n.getPage(t),
       u
     ]);
-    if (s.current) {
-      a();
+    if (i.current) {
+      s();
       return;
     }
     const v = {
       canvas: e,
       canvasContext: p,
-      transform: [c, 0, 0, c, 0, 0],
-      viewport: m.getViewport({ scale: 1, rotation: o.rotation }),
+      transform: [a, 0, 0, a, 0, 0],
+      viewport: m.getViewport({ scale: 1, rotation: r.rotation }),
       intent: "print",
-      annotationMode: q.ENABLE_STORAGE,
-      optionalContentConfigPromise: i,
+      annotationMode: O.ENABLE_STORAGE,
+      optionalContentConfigPromise: c,
       printAnnotationStorage: h
     };
     try {
       return m.render(v).promise;
     } catch (d) {
-      throw d instanceof B || console.error(d), d;
+      throw d instanceof U || console.error(d), d;
     }
-  }, S = P(() => {
+  }, L = P(() => {
     const e = window.print;
     return new Promise((n) => {
-      const t = (i) => {
+      const t = (c) => {
         setTimeout(() => {
-          e.call(window), setTimeout(() => i(), 20);
+          e.call(window), setTimeout(() => c(), 20);
         }, 0);
       };
       if (document.querySelector(".rp-print-zone")) {
         t(n);
         return;
       }
-      const r = new MutationObserver(() => {
-        document.querySelector(".rp-print-zone") && (t(n), r.disconnect());
+      const o = new MutationObserver(() => {
+        document.querySelector(".rp-print-zone") && (t(n), o.disconnect());
       });
-      r.observe(document.body, { childList: !0, subtree: !0 });
+      o.observe(document.body, { childList: !0, subtree: !0 });
     });
-  }, []), U = async (e) => {
+  }, []), z = (e) => {
     const n = document.createElement("img"), t = document.createElement("div");
-    return t.classList.add("rp-print-page"), await new Promise((o, r) => {
-      e.toBlob((i) => {
-        i ? (n.src = URL.createObjectURL(i), n.onload = () => {
-          URL.revokeObjectURL(n.src), o();
-        }, n.onerror = r) : r(new Error("Failed to create blob"));
-      });
-    }).catch(() => {
-    }), t.appendChild(n), t;
+    return t.classList.add("rp-print-page"), n.src = e.toDataURL(), t.appendChild(n), t;
   }, x = (e, n) => {
     const t = document.createElement("div");
     t.classList.add("rp-print-zone");
-    const o = document.createElement("style"), r = n.get(1);
-    if (r) {
-      const { width: i, height: u } = r == null ? void 0 : r.page.getViewport({ scale: 1 });
-      o.innerHTML = `@page { size: ${i}px ${u}px }`;
+    const r = document.createElement("style"), o = n.get(1);
+    if (o) {
+      const c = o.page.getViewport({ scale: 1 }), { width: u, height: a } = c;
+      r.innerHTML = `@page { size: ${u}pt ${a}pt; margin: 0; }`;
     }
-    return t.appendChild(o), t.append(...e), t;
-  }, k = P(
+    return t.appendChild(r), t.append(...e), t;
+  }, N = P(
     async (e) => {
       if (!l)
         return;
-      a();
+      s();
       const n = e && "visibleDefaultProgress" in e ? e : void 0;
       (n == null ? void 0 : n.visibleDefaultProgress) !== void 0 ? w(n.visibleDefaultProgress) : w(!0);
-      const t = document.createElement("canvas"), o = [];
+      const t = document.createElement("canvas"), r = [];
       try {
         l.isPureXfa && console.warn("[rp] XFA Form is not supported at the moment.");
-        const i = l.getOptionalContentConfig({ intent: "print" }), u = Promise.resolve(
+        const c = l.getOptionalContentConfig({ intent: "print" }), u = Promise.resolve(
           l.annotationStorage.print ?? void 0
-        ), c = f.size;
+        ), a = f.size;
         for (const [m, h] of f) {
-          if (s.current) {
-            a();
+          if (i.current) {
+            s();
             return;
           }
           const v = h.page.getViewport({ scale: 1 });
@@ -134,50 +127,50 @@ const re = () => {
             pageNumber: m,
             viewerPdfPage: v,
             printResolution: 150,
-            optionalContentConfigPromise: i,
+            optionalContentConfigPromise: c,
             printAnnotationStoragePromise: u
-          }), s.current) {
-            a();
+          }), i.current) {
+            s();
             return;
           }
-          const d = await U(t);
-          o.push(d);
-          const z = parseFloat((o.length / c * 100).toFixed(2));
+          const d = z(t);
+          r.push(d);
+          const X = parseFloat((r.length / a * 100).toFixed(2));
           E({
             loadedPages: m,
-            totalPages: c,
-            percentage: z
+            totalPages: a,
+            percentage: X
           });
         }
-        if (s.current) {
-          a();
+        if (i.current) {
+          s();
           return;
         }
-        const p = x(o, f);
-        document.body.appendChild(p), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), b(!0), await S();
-      } catch (r) {
-        y(!0), r instanceof Error && L(r);
+        const p = x(r, f);
+        document.body.appendChild(p), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), y(!0), await L();
+      } catch (o) {
+        b(!0), o instanceof Error && C(o);
       } finally {
         t.height = 0, t.width = 0;
       }
     },
-    [l, f, s, a, x, S]
+    [l, f, i, s, x, L]
   );
-  return R(() => {
+  return D(() => {
     const e = () => {
-      a(), C();
+      s(), S();
     };
     return window.addEventListener("afterprint", e, !0), () => {
       window.removeEventListener("afterprint", e, !0);
     };
-  }, [C, a]), {
-    print: k,
-    cancel: M,
-    progress: D,
+  }, [S, s]), {
+    print: N,
+    cancel: F,
+    progress: R,
     isComplete: T,
     isError: A,
     error: Z,
-    showDefaultProgress: F
+    showDefaultProgress: M
   };
 };
 export {

package/dist/utils/injectPrintCSS.js

@@ -3,17 +3,18 @@ function e() {
     return;
   const t = document.createElement("style");
   t.id = "rp-print-style", t.textContent = `
+  @page { margin: 0; }
+
   .rp-print-zone { display: none; }
 
   @media print {
-    @page { margin: 0; }
     .rp-print-html-printing { height: 100%; }
-    .rp-print-body-printing { background: transparent; height: 100%; margin: 0; display: block; }
+    .rp-print-body-printing { background: rgb(0 0 0 / 0) none; height: 100% !important; margin: 0 !important; display: block !important; }
     .rp-print-body-printing * { display: none; }
     .rp-print-zone { display: block; height: 100%; }
     .rp-print-page { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 100%; width: 100%; page-break-after: always; page-break-inside: avoid; }
     .rp-print-page:last-child { page-break-after: auto; }
-    .rp-print-page img, .rp-print-page canvas { display: block; max-height: 100%; max-width: 100%; direction: ltr; }
+    .rp-print-page img, .rp-print-page canvas { display: block; max-width: 100%; max-height: 100%; direction: ltr; }
   }
   `, document.head.appendChild(t);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pdf-kit/viewer",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.3",
   "private": false,
   "description": "A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.",
   "keywords": [