@react-pdf-kit/viewer 0.0.0-experimental.0

package/dist/components/page/DualPageWithCover.js

@@ -0,0 +1,132 @@
+import { jsx as h } from "react/jsx-runtime";
+import { memo as b, useMemo as f } from "react";
+import { u as y } from "../../PaginationContext-9217cab4.js";
+import { RPPage as I } from "./RPPage.js";
+import "../../utils/types.js";
+import "../../de_DE-a553b162.js";
+import "../../contexts/ScrollModeContext.js";
+import "../../utils/appConsole.js";
+import "../../contexts/InitialStateContext.js";
+import "../../contexts/RPDocumentContext.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../utils/getThumbnailViewport.js";
+import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+import "../../contexts/GlobalCurrentPage.js";
+import "../../contexts/EventCallbackContext.js";
+import "../../contexts/ViewModeContext.js";
+import "../../contexts/VirtualScrollContext.js";
+import "../../contexts/VirtualGridContext.js";
+import "../../utils/smoothScrollTo.js";
+import "../../contexts/DimensionPagesContext.js";
+import "../../contexts/ZoomContext.js";
+import "../../utils/constants.js";
+import "../../utils/getZoomLevel.js";
+import "../../contexts/LayoutContainerContext.js";
+import "../../contexts/RotationContext.js";
+import "../../utils/hooks/useDebounce.js";
+import "../../contexts/PagesRotateContext.js";
+import "../../contexts/SmoothScrollContext.js";
+import "../../utils/getScrollDistance.js";
+import "../../utils/calculatePage.js";
+import "./CanvasLayer.js";
+import "../../contexts/RenderQueueProvider.js";
+import "../../utils/Queue.js";
+import "../../utils/renderPage.js";
+import "../../contexts/SmoothScaleContext.js";
+import "./TextLayer.js";
+import "../../utils/highlight.js";
+import "../../utils/charators.js";
+import "../../contexts/SearchContext.js";
+import "../../utils/hooks/useSearch.js";
+import "../../utils/getWordPositionInPage.js";
+import "./AnnotationLayer.js";
+import "../../contexts/PrintContext.js";
+import "../../utils/hooks/usePrint.js";
+import "../../utils/link_service.js";
+import "../../utils/annotations.js";
+import "../../utils/sanitizeExternalUrl.js";
+import "../../utils/dateFormatter.js";
+import "../../utils/hooks/useFileDownload.js";
+import "../../contexts/DownloadContext.js";
+import "../../contexts/LayerContext.js";
+import "../../contexts/LoaderContext.js";
+import "../icons/LoaderIcon.js";
+import "../../clsx-0c6e471a.js";
+import "./TextHighlightLayer.js";
+import "../../contexts/HighlightContext.js";
+import "../../utils/hooks/useHighlight.js";
+import "./searchHighlight.js";
+import "../../utils/const.js";
+import "./CustomElement.js";
+import "../../contexts/ElementPageContext.js";
+import "../../contexts/LicenseContext.js";
+import "../../utils/hooks/useLicense.js";
+import "../../utils/getElementPositionInPage.js";
+import "../../utils/withRef.js";
+const Ft = b(({ widths: o, heights: a }) => {
+  const { focusedPage: l, totalPages: m } = y(), i = f(() => {
+    const t = [];
+    if (l === 1)
+      return t.push(1), t;
+    const r = l - 1, e = Math.ceil(r / 2) * 2;
+    return t.push(e), e + 1 <= m && t.push(e + 1), t;
+  }, [l, m]), W = f(() => {
+    if (i.length === 1) {
+      const P = i[0] - 1, p = o(P);
+      let n = p * 2;
+      if (m >= 3) {
+        const s = o(1), d = o(2);
+        n = s + d;
+      } else if (m >= 2) {
+        const s = o(1);
+        n = p + s;
+      }
+      return {
+        width: n,
+        position: "relative",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-start"
+      };
+    }
+    const r = i[0] - 1, g = o(r), e = i.length > 1 ? o(r + 1) : 0;
+    return {
+      width: g + e,
+      position: "relative"
+    };
+  }, [o, i, m]), x = f(() => {
+    if (i.length === 1) {
+      const p = i[0], n = p - 1, s = a(p === 1 ? 0 : Math.floor((p - 2) / 2) + 1);
+      return [{
+        width: o(n),
+        height: s,
+        position: "relative"
+        // Use relative for flexbox centering
+      }];
+    }
+    const t = i[0], r = t - 1, g = Math.floor((t - 2) / 2) + 1, e = a(g), c = o(r), u = o(r + 1);
+    return [
+      {
+        position: "absolute",
+        left: 0,
+        width: c,
+        height: e
+      },
+      {
+        position: "absolute",
+        left: c,
+        width: u,
+        height: e
+      }
+    ];
+  }, [o, a, i]);
+  return /* @__PURE__ */ h("div", { style: W, children: i.map((t, r) => /* @__PURE__ */ h(I, { style: x[r], pageNumber: t }, t)) });
+});
+export {
+  Ft as DualPageWithCover
+};

package/dist/components/page/RPPage.js

@@ -0,0 +1,144 @@
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { useRef as u, useState as l, useImperativeHandle as P, useMemo as d, useEffect as V, useCallback as f } from "react";
+import { useDocumentContext as b } from "../../contexts/RPDocumentContext.js";
+import { CanvasLayer as E } from "./CanvasLayer.js";
+import { TextLayer as H } from "./TextLayer.js";
+import { AnnotationLayer as I } from "./AnnotationLayer.js";
+import { useLayerContext as T } from "../../contexts/LayerContext.js";
+import { useZoomContext as Z } from "../../contexts/ZoomContext.js";
+import { useLoaderContext as k } from "../../contexts/LoaderContext.js";
+import { TextHighlightLayer as A } from "./TextHighlightLayer.js";
+import { usePagesRotateContext as D } from "../../contexts/PagesRotateContext.js";
+import { CustomElement as M } from "./CustomElement.js";
+import { withRef as O } from "../../utils/withRef.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../utils/types.js";
+import "../../de_DE-a553b162.js";
+import "../../utils/getThumbnailViewport.js";
+import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "../../utils/appConsole.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+import "../../contexts/RenderQueueProvider.js";
+import "../../utils/Queue.js";
+import "../../utils/renderPage.js";
+import "../../PaginationContext-9217cab4.js";
+import "../../contexts/ScrollModeContext.js";
+import "../../contexts/InitialStateContext.js";
+import "../../contexts/GlobalCurrentPage.js";
+import "../../contexts/EventCallbackContext.js";
+import "../../contexts/ViewModeContext.js";
+import "../../contexts/VirtualScrollContext.js";
+import "../../contexts/VirtualGridContext.js";
+import "../../utils/smoothScrollTo.js";
+import "../../contexts/DimensionPagesContext.js";
+import "../../utils/constants.js";
+import "../../utils/getZoomLevel.js";
+import "../../contexts/LayoutContainerContext.js";
+import "../../contexts/RotationContext.js";
+import "../../utils/hooks/useDebounce.js";
+import "../../contexts/SmoothScrollContext.js";
+import "../../utils/getScrollDistance.js";
+import "../../utils/calculatePage.js";
+import "../../contexts/SmoothScaleContext.js";
+import "../../utils/highlight.js";
+import "../../utils/charators.js";
+import "../../contexts/SearchContext.js";
+import "../../utils/hooks/useSearch.js";
+import "../../utils/getWordPositionInPage.js";
+import "../../contexts/PrintContext.js";
+import "../../utils/hooks/usePrint.js";
+import "../../utils/link_service.js";
+import "../../utils/annotations.js";
+import "../../utils/sanitizeExternalUrl.js";
+import "../../utils/dateFormatter.js";
+import "../../utils/hooks/useFileDownload.js";
+import "../../contexts/DownloadContext.js";
+import "../icons/LoaderIcon.js";
+import "../../clsx-0c6e471a.js";
+import "../../contexts/HighlightContext.js";
+import "../../utils/hooks/useHighlight.js";
+import "./searchHighlight.js";
+import "../../utils/const.js";
+import "../../contexts/ElementPageContext.js";
+import "../../contexts/LicenseContext.js";
+import "../../utils/hooks/useLicense.js";
+import "../../utils/getElementPositionInPage.js";
+const a = {
+  "rp-page-wrapper": "_rp-page-wrapper_1j4cr_1",
+  "rp-page": "_rp-page_1j4cr_1",
+  "rp-loader-wrapper": "_rp-loader-wrapper_1j4cr_21"
+}, ot = O((h, w) => {
+  const { pageNumber: r, style: x, ...L } = h, { pages: p } = b(), { pageRotate: s } = D(), { textLayer: $ } = T(), { currentZoom: i } = Z(), { LoaderImageComponent: n } = k(), m = u(p.get(r)), [v, c] = l(!1), g = u(null), [t, y] = l({
+    width: 0,
+    height: 0
+  });
+  P(w, () => g.current);
+  const e = d(() => m.current ? s[r] : 0, [r, s]);
+  V(() => {
+    if (!(!p || i === 0) && (m.current = p.get(r), m.current)) {
+      const j = m.current.page.getViewport({
+        scale: i,
+        rotation: e
+      });
+      y(j);
+    }
+  }, [p, r, e, i]);
+  const C = d(() => {
+    switch (e) {
+      case 90:
+        return `${t.width / 2}px ${t.width / 2}px`;
+      case -90:
+      case 270:
+        return `${t.height / 2}px ${t.height / 2}px`;
+      default:
+        return "center";
+    }
+  }, [e, t]), _ = f(() => {
+    c(!0);
+  }, []), R = f(() => {
+    c(!1);
+  }, []);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: g,
+      id: `page-${r}`,
+      "data-rp": `page-${r}`,
+      ...L,
+      style: {
+        ...x,
+        "--rp-rotate": `${e}deg`,
+        "--rp-page-rotate-translate": `${C}`,
+        "--user-unit": t.userUnit || 1,
+        "--scale-factor": i,
+        "--total-scale-factor": "calc(var(--scale-factor) * var(--user-unit))"
+      },
+      className: a["rp-page-wrapper"],
+      children: /* @__PURE__ */ N(
+        "div",
+        {
+          style: {
+            width: `${t.width}px`,
+            height: `${t.height}px`
+          },
+          className: a["rp-page"],
+          children: [
+            /* @__PURE__ */ o(E, { onLoading: _, onLoaded: R, pageNumber: r }),
+            v && n && /* @__PURE__ */ o("div", { className: a["rp-loader-wrapper"], children: /* @__PURE__ */ o(n, {}) }),
+            /* @__PURE__ */ o(M, { pageNumber: r }),
+            $ && /* @__PURE__ */ o(H, { pageNumber: r }),
+            /* @__PURE__ */ o(A, { pageNumber: r, viewport: t }),
+            /* @__PURE__ */ o(I, { pageNumber: r })
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  ot as RPPage
+};

package/dist/components/page/SinglePage.js

@@ -0,0 +1,90 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { u as n } from "../../PaginationContext-9217cab4.js";
+import { RPPage as s } from "./RPPage.js";
+import "../../utils/types.js";
+import "../../de_DE-a553b162.js";
+import "../../contexts/ScrollModeContext.js";
+import "../../utils/appConsole.js";
+import "../../contexts/InitialStateContext.js";
+import "../../contexts/RPDocumentContext.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../utils/getThumbnailViewport.js";
+import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+import "../../contexts/GlobalCurrentPage.js";
+import "../../contexts/EventCallbackContext.js";
+import "../../contexts/ViewModeContext.js";
+import "../../contexts/VirtualScrollContext.js";
+import "../../contexts/VirtualGridContext.js";
+import "../../utils/smoothScrollTo.js";
+import "../../contexts/DimensionPagesContext.js";
+import "../../contexts/ZoomContext.js";
+import "../../utils/constants.js";
+import "../../utils/getZoomLevel.js";
+import "../../contexts/LayoutContainerContext.js";
+import "../../contexts/RotationContext.js";
+import "../../utils/hooks/useDebounce.js";
+import "../../contexts/PagesRotateContext.js";
+import "../../contexts/SmoothScrollContext.js";
+import "../../utils/getScrollDistance.js";
+import "../../utils/calculatePage.js";
+import "./CanvasLayer.js";
+import "../../contexts/RenderQueueProvider.js";
+import "../../utils/Queue.js";
+import "../../utils/renderPage.js";
+import "../../contexts/SmoothScaleContext.js";
+import "./TextLayer.js";
+import "../../utils/highlight.js";
+import "../../utils/charators.js";
+import "../../contexts/SearchContext.js";
+import "../../utils/hooks/useSearch.js";
+import "../../utils/getWordPositionInPage.js";
+import "./AnnotationLayer.js";
+import "../../contexts/PrintContext.js";
+import "../../utils/hooks/usePrint.js";
+import "../../utils/link_service.js";
+import "../../utils/annotations.js";
+import "../../utils/sanitizeExternalUrl.js";
+import "../../utils/dateFormatter.js";
+import "../../utils/hooks/useFileDownload.js";
+import "../../contexts/DownloadContext.js";
+import "../../contexts/LayerContext.js";
+import "../../contexts/LoaderContext.js";
+import "../icons/LoaderIcon.js";
+import "../../clsx-0c6e471a.js";
+import "./TextHighlightLayer.js";
+import "../../contexts/HighlightContext.js";
+import "../../utils/hooks/useHighlight.js";
+import "./searchHighlight.js";
+import "../../utils/const.js";
+import "./CustomElement.js";
+import "../../contexts/ElementPageContext.js";
+import "../../contexts/LicenseContext.js";
+import "../../utils/hooks/useLicense.js";
+import "../../utils/getElementPositionInPage.js";
+import "../../utils/withRef.js";
+const So = ({ widths: t, heights: r }) => {
+  const { focusedPage: o } = n(), p = m(() => ({
+    position: "absolute",
+    width: t(o - 1),
+    height: r(o - 1)
+  }), [t, r, o]), e = m(() => t(o - 1), [t]);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        width: e,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ i(s, { style: p, pageNumber: o }, o)
+    }
+  );
+};
+export {
+  So as SinglePage
+};

package/dist/components/page/TextHighlightLayer.js

@@ -0,0 +1,198 @@
+import { jsx as k, Fragment as J } from "react/jsx-runtime";
+import { useState as A, useRef as N, useEffect as H, useMemo as Q } from "react";
+import { useDocumentContext as U } from "../../contexts/RPDocumentContext.js";
+import { useHighlightContext as V } from "../../contexts/HighlightContext.js";
+import { normalizeSingleKeyword as Y, sortHighlightPosition as Z, unwrap as tt } from "./searchHighlight.js";
+import { isMatchEntireWord as et } from "../../utils/highlight.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../utils/types.js";
+import "../../de_DE-a553b162.js";
+import "../../utils/getThumbnailViewport.js";
+import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "../../utils/appConsole.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+import "../../utils/hooks/useHighlight.js";
+import "../../utils/charators.js";
+import "../../utils/const.js";
+const nt = {
+  "rp-text-highlight": "_rp-text-highlight_jdkf8_1"
+}, Tt = ({ pageNumber: w, viewport: O }) => {
+  const [$, v] = A(), { pages: R } = U(), { highlightKeywords: d } = V(), M = !0, C = N(null), [P, q] = A(null), [_, b] = A([]);
+  H(() => {
+    C.current && q(C.current.parentElement);
+  }, [C]), H(() => {
+    (async () => {
+      const e = R.get(w);
+      if (!e || !C.current)
+        return;
+      const n = await e.page.getTextContent();
+      v(n);
+    })();
+  }, [R, w]);
+  const j = Q(() => d ? d.map((t) => {
+    var e, n;
+    return {
+      ...Y(t.keyword, (e = t.options) == null ? void 0 : e.matchCase, (n = t.options) == null ? void 0 : n.wholeWords),
+      color: t.highlightColor
+    };
+  }) : [], [d]);
+  function D(t, e) {
+    if (!t)
+      return;
+    const n = `[data-rp="page-${e}-textLayer"]`;
+    return new Promise((r) => {
+      const s = t.querySelector(n);
+      if (s) {
+        r(s);
+        return;
+      }
+      new MutationObserver((i, c) => {
+        const l = t.querySelector(n);
+        l && (r(l), c.disconnect());
+      }).observe(t, { childList: !0, subtree: !0 });
+    });
+  }
+  function K(t) {
+    return new Promise((e) => {
+      const n = t.querySelectorAll(
+        '[data-rp="rp-text-layer-text"]'
+      );
+      if (n.length) {
+        e(Array.from(n));
+        return;
+      }
+      new MutationObserver((s, o) => {
+        const i = t.querySelectorAll(
+          ".rp-text-layer-text"
+        );
+        i.length && (e(Array.from(i)), o.disconnect());
+      }).observe(t, { childList: !0, subtree: !0 });
+    });
+  }
+  const W = (t, e, n, r) => {
+    var I;
+    const s = document.createRange(), o = n.firstChild;
+    if (!o || o.nodeType !== Node.TEXT_NODE)
+      return null;
+    const i = ((I = o.textContent) == null ? void 0 : I.length) ?? 0, c = r[0].charIdxInSpan, l = r.length === 1 ? c : r[r.length - 1].charIdxInSpan;
+    if (c > i || l + 1 > i)
+      return null;
+    s.setStart(o, c), s.setEnd(o, l + 1);
+    const h = document.createElement("span");
+    h.style.width = "auto", s.surroundContents(h);
+    const a = h.getBoundingClientRect(), f = t.getBoundingClientRect(), m = f.height, p = f.width, x = 100 * (a.left - f.left) / p, E = 100 * (a.top - f.top) / m, S = 100 * a.height / m, g = 100 * a.width / p;
+    return tt(h), {
+      keywordStr: e,
+      left: x,
+      top: E,
+      height: S,
+      width: g,
+      pageHeight: m,
+      pageWidth: p
+    };
+  };
+  async function z(t, e) {
+    const n = await D(P, t);
+    if (!n)
+      return;
+    const r = await K(n);
+    if (r.length) {
+      const s = r.map((i) => i.tagName === "BR" ? " " : i.textContent).reduce(
+        (i, c, l) => i.concat(
+          c.split("").map((h, a) => ({
+            char: h,
+            charIdxInSpan: a,
+            spanIdx: l
+          }))
+        ),
+        [
+          {
+            char: "",
+            charIdxInSpan: 0,
+            spanIdx: 0
+          }
+        ]
+      ).slice(1), o = B(n, e, r, s);
+      b(o);
+    }
+  }
+  const B = (t, e, n, r) => {
+    const s = e.length;
+    if (!r.length || !s)
+      return [];
+    const o = [], i = r.map((c) => c.char).join("");
+    return j.forEach((c) => {
+      const { keyword: l, regExp: h, wholeWords: a, color: f } = c, m = l;
+      if (!m.trim())
+        return;
+      const p = h.flags.indexOf("g") === -1 ? new RegExp(h, `${h.flags}g`) : h;
+      let x;
+      const E = [];
+      for (; (x = p.exec(i)) !== null; )
+        a && !et(i, x.index, x[0].length) || E.push({
+          keyword: p,
+          startIndex: x.index,
+          endIndex: p.lastIndex
+        });
+      const S = E.map((g) => ({
+        keyword: g.keyword,
+        indexes: r.slice(g.startIndex, g.endIndex),
+        color: f
+      }));
+      for (const g of S) {
+        const I = g.indexes.reduce(
+          (u, y) => (u[y.spanIdx] = (u[y.spanIdx] || []).concat([y]), u),
+          {}
+        );
+        for (const u of Object.values(I))
+          if (u.length !== 1 || u[0].char.trim() !== "") {
+            const y = u, F = n[y[0].spanIdx], T = W(
+              t,
+              m,
+              F,
+              y
+            );
+            if (T) {
+              const { left: X, top: G } = T;
+              if (o.find((L) => L.left === X && L.top === G))
+                continue;
+              o.push({ ...T, highlightColor: g.color });
+            }
+          }
+      }
+    }), o.sort(Z), o;
+  };
+  return H(() => {
+    (async () => {
+      if (!d || d.length === 0) {
+        b([]);
+        return;
+      }
+      try {
+        await z(w, d);
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, [M, d, w, $, O]), /* @__PURE__ */ k(J, { children: /* @__PURE__ */ k("div", { ref: C, "data-rp": `page-${w}-textHighlightLayer`, children: _.map((t, e) => /* @__PURE__ */ k(
+    "div",
+    {
+      className: nt["rp-text-highlight"],
+      style: {
+        top: `${t.top}%`,
+        left: `${t.left}%`,
+        width: `${t.width}%`,
+        height: `${t.height}%`,
+        backgroundColor: t.highlightColor
+      }
+    },
+    e
+  )) }) });
+};
+export {
+  Tt as TextHighlightLayer
+};