@react-pdf-kit/viewer 2.8.0-beta.1 → 2.8.0-beta.10

package/dist/contexts/ElementPageContext.js

@@ -1,51 +1,58 @@
-import { LicenseType as e, ScrollMode as t } from "../utils/types.js";
-import { ORGANIZATION_ALLOWED_FEATURES_MESSAGE as n } from "../utils/const.js";
-import { useScrollModeContext as r } from "./ScrollModeContext.js";
-import { useViewModeContext as i } from "./ViewModeContext.js";
-import { useVirtualScrollContext as a } from "./VirtualScrollContext.js";
-import { useLayoutContainer as o } from "./LayoutContainerContext.js";
-import { useZoomContext as s } from "./ZoomContext.js";
-import { usePagesRotateContext as c } from "./PagesRotateContext.js";
-import { useDimensionPagesContext as l } from "./DimensionPagesContext.js";
-import { useSmoothScrollContext as u } from "./SmoothScrollContext.js";
-import { getScrollDistance as d } from "../utils/getScrollDistance.js";
+import { LicenseType as e } from "../utils/types.js";
+import { ORGANIZATION_ALLOWED_FEATURES_MESSAGE as t } from "../utils/const.js";
+import { useScrollModeContext as n } from "./ScrollModeContext.js";
+import { useViewModeContext as r } from "./ViewModeContext.js";
+import { useVirtualScrollContext as i } from "./VirtualScrollContext.js";
+import { useLayoutContainer as a } from "./LayoutContainerContext.js";
+import { useZoomContext as o } from "./ZoomContext.js";
+import { usePagesRotateContext as s } from "./PagesRotateContext.js";
+import { useDimensionPagesContext as c } from "./DimensionPagesContext.js";
+import { useSmoothScrollContext as l } from "./SmoothScrollContext.js";
+import { buildDocumentLayout as u, getPagePlacement as d } from "../utils/documentLayout.js";
 import { useLicenseContext as f } from "./LicenseContext.js";
 import { getElementPagePosition as p } from "../utils/getElementPositionInPage.js";
 import { createContext as m, useCallback as h, useContext as g, useMemo as _, useRef as v, useState as y } from "react";
 import { jsx as b } from "react/jsx-runtime";
 //#region lib/contexts/ElementPageContext.tsx
 var x = m(void 0), S = ({ children: e }) => {
-	let [n, f] = y({}), { widths: m, heights: g } = l(), { pagesRef: _ } = o(), { scrollMode: v } = r(), { pageRotate: S } = c(), { currentZoom: C } = s(), { columnCount: w } = i(), { pageScrollElementRef: T, virtualScrollableElementRef: E } = a(), { scrollBehavior: D } = u(), O = h((e, r, i) => {
-		let a = i ?? { behavior: D }, o = E || T;
-		if (!_ || !o) return;
-		let s = n[e]?.[r];
-		if (!s) return;
-		let c = 0, l = 0;
-		if (v === t.VERTICAL_SCROLLING) {
-			let t = e - 1, n = w, r = t % n;
-			c = d(g, Math.floor(t / n)), l = d(m, r);
-		}
-		v === t.HORIZONTAL_SCROLLING && (l = m.slice(0, e - 1).reduce((e, t) => e + t, 0));
-		let u = {
+	let [t, f] = y({}), { widths: m, heights: g } = c(), { pagesRef: _ } = a(), { scrollMode: v } = n(), { pageRotate: S } = s(), { currentZoom: C } = o(), { viewMode: w } = r(), { pageScrollElementRef: T, virtualScrollableElementRef: E } = i(), { scrollBehavior: D } = l(), O = h((e, n, r) => {
+		let i = r ?? { behavior: D }, a = E || T;
+		if (!_ || !a) return;
+		let o = t[e]?.[n];
+		if (!o) return;
+		let s = u({
+			pageDimensions: {
+				widths: m,
+				heights: g
+			},
+			viewportWidth: a.clientWidth,
+			viewportHeight: a.clientHeight,
+			scrollMode: v,
+			viewMode: w,
+			focusedPage: e
+		}), c = d(s, e);
+		if (!c) return;
+		let l = {
 			height: g[e - 1],
 			width: m[e - 1]
-		}, f = S[e], { left: h, top: y } = p(u, _, s, f, C), b = l + h, x = c + y, O = {
+		}, f = S[e], { left: h, top: y } = p(l, _, o, f, C), b = s.offsetLeft + c.left + h, x = s.offsetTop + c.top + y, O = {
 			left: Math.max(b, 0),
 			top: Math.max(x, 0)
 		};
-		o.scrollTo({
+		a.scrollTo({
 			...O,
-			behavior: a.behavior
+			behavior: i.behavior
 		});
 	}, [
-		n,
+		C,
+		t,
 		g,
-		m,
-		_,
 		S,
-		C,
+		_,
+		D,
 		v,
-		D
+		w,
+		m
 	]), k = h((e, t) => {
 		f((n) => {
 			let r = {
@@ -78,13 +85,13 @@ var x = m(void 0), S = ({ children: e }) => {
 			updateElement: k,
 			clearElements: A,
 			removeElement: j,
-			elementList: n,
+			elementList: t,
 			scrollToElement: O
 		},
 		children: e
 	});
 }, C = () => {}, w = () => {
-	let t = g(x), { type: r, validating: i } = f(), a = v(0), o = _(() => {
+	let n = g(x), { type: r, validating: i } = f(), a = v(0), o = _(() => {
 		if (i !== !1) return {
 			updateElement: C,
 			clearElements: C,
@@ -94,22 +101,22 @@ var x = m(void 0), S = ({ children: e }) => {
 		};
 		if (r === e.Developer) return {
 			updateElement: () => {
-				a.current === 0 && (console.error(n), a.current++);
+				a.current === 0 && (console.error(t), a.current++);
 			},
 			clearElements: () => {
-				a.current === 0 && (console.error(n), a.current++);
+				a.current === 0 && (console.error(t), a.current++);
 			},
 			removeElement: () => {
-				a.current === 0 && (console.error(n), a.current++);
+				a.current === 0 && (console.error(t), a.current++);
 			},
 			elementList: {},
 			scrollToElement: () => {
-				a.current === 0 && (console.error(n), a.current++);
+				a.current === 0 && (console.error(t), a.current++);
 			}
 		};
 	}, [r, i]);
-	if (!t) throw Error("useElementPageContext must be used within a ElementPageProvider");
-	return o || t;
+	if (!n) throw Error("useElementPageContext must be used within a ElementPageProvider");
+	return o || n;
 };
 //#endregion
 export { x as ElementPageContext, S as ElementPageProvider, w as useElementPageContext };

package/dist/contexts/ElementThumbnailContext.js

@@ -2,7 +2,7 @@ import { LicenseType as e } from "../utils/types.js";
 import { ORGANIZATION_ALLOWED_FEATURES_MESSAGE as t } from "../utils/const.js";
 import { usePagesRotateContext as n } from "./PagesRotateContext.js";
 import { useSmoothScrollContext as r } from "./SmoothScrollContext.js";
-import { r as i } from "../PaginationContext-C5CJiEW-.js";
+import { r as i } from "../PaginationContext-DIzsZhFd.js";
 import { useThumbnailContext as a } from "./ThumbnailsContext.js";
 import { useLicenseContext as o } from "./LicenseContext.js";
 import { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";

package/dist/contexts/PaginationContext.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../PaginationContext-C5CJiEW-.js";
+import { n as e, r as t, t as n } from "../PaginationContext-DIzsZhFd.js";
 export { n as PaginationContext, e as PaginationProvider, t as usePaginationContext };

package/dist/contexts/RenderQueueProvider.js

@@ -1,38 +1,46 @@
-import { r as e } from "../PaginationContext-C5CJiEW-.js";
+import { r as e } from "../PaginationContext-DIzsZhFd.js";
 import { Queue as t } from "../utils/Queue.js";
 import { renderPage as n } from "../utils/renderPage.js";
 import { createContext as r, useCallback as i, useContext as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
 import { jsx as u } from "react/jsx-runtime";
 //#region lib/contexts/RenderQueueProvider.tsx
 var d = r(null), f = ({ children: r }) => {
-	let a = c(!1), [f, p] = l([]), m = i((e) => {
-		p((t) => [...t, {
+	let a = c(!1), f = c(/* @__PURE__ */ new Map()), [p, m] = l([]), h = i((e) => {
+		m((t) => [...t, {
 			id: e.page.pageNumber.toString(),
 			data: e,
 			priority: 0
 		}]);
-	}, []), h = s(() => new t(m), [m]), { focusedPage: g } = e(), _ = i((e) => (a.current = !0, n(e.data.page, e.data.canvasElem, e.data.options).promise.then(() => {
-		e.data.canvasElem.hidden = !1;
-	}).finally(() => {
-		e.data.onLoaded && e.data.onLoaded();
-	})), []);
+	}, []), g = s(() => new t(h), [h]), { focusedPage: _ } = e(), v = i((e) => {
+		a.current = !0;
+		let t = f.current.get(e.id);
+		t && (t.cancel(), f.current.delete(e.id));
+		let r = n(e.data.page, e.data.canvasElem, e.data.options);
+		return f.current.set(e.id, r), e.data.onRenderTask?.(r), r.promise.then(() => {
+			e.data.canvasElem.hidden = !1, e.data.onLoaded && e.data.onLoaded();
+		}).catch((t) => {
+			t.name !== "RenderingCancelledException" && console.error(`Error rendering page ${e.data.page.pageNumber}:`, t);
+		}).finally(() => {
+			f.current.delete(e.id), e.data.onRenderTask?.(null);
+		});
+	}, []);
 	return o(() => {
-		g && (h.changePagePriority(`^page-${g}`, 0), h.changePagePriority(`^thumbnail-${g}`, 1));
-	}, [g]), o(() => {
-		if (h.isEmpty() || a.current) return;
+		_ && (g.changePagePriority(`^page-${_}`, 0), g.changePagePriority(`^thumbnail-${_}`, 1));
+	}, [_]), o(() => {
+		if (g.isEmpty() || a.current) return;
 		let e = () => {
-			let t = h.dequeue();
-			t ? _(t).finally(() => {
+			let t = g.dequeue();
+			t ? v(t).catch(() => {}).finally(() => {
 				e();
-			}) : (a.current = !1, p(h.peekAll()));
+			}) : (a.current = !1, m(g.peekAll()));
 		};
 		e();
 	}, [
-		h,
-		_,
-		f
+		g,
+		v,
+		p
 	]), /* @__PURE__ */ u(d.Provider, {
-		value: h,
+		value: g,
 		children: r
 	});
 }, p = () => {

package/dist/contexts/RenderedPagesCache.js

@@ -1,18 +1,37 @@
-import { createContext as e, useContext as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { useDocumentContext as e } from "./RPDocumentContext.js";
+import { createContext as t, useCallback as n, useContext as r, useEffect as i, useMemo as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region lib/contexts/RenderedPagesCache.tsx
-var r = e({
+var c = t({
 	viewports: /* @__PURE__ */ new Map(),
-	pages: /* @__PURE__ */ new Map()
-}), i = () => t(r), a = ({ children: e }) => {
-	let t = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
-	return /* @__PURE__ */ n(r.Provider, {
-		value: {
-			viewports: t,
-			pages: i
-		},
-		children: e
+	pages: /* @__PURE__ */ new Map(),
+	hasRenderedPage: () => !1,
+	markRenderedPage: () => {},
+	clearRenderedPages: () => {}
+}), l = () => r(c), u = ({ children: t }) => {
+	let { pdfSrc: r } = e(), l = o(/* @__PURE__ */ new Map()), u = o(/* @__PURE__ */ new Map()), d = o(/* @__PURE__ */ new Set()), f = n((e) => d.current.has(e), []), p = n((e) => {
+		d.current.add(e);
+	}, []), m = n(() => {
+		d.current.clear();
+	}, []);
+	i(() => {
+		d.current.clear();
+	}, [r]);
+	let h = a(() => ({
+		viewports: l.current,
+		pages: u.current,
+		hasRenderedPage: f,
+		markRenderedPage: p,
+		clearRenderedPages: m
+	}), [
+		m,
+		f,
+		p
+	]);
+	return /* @__PURE__ */ s(c.Provider, {
+		value: h,
+		children: t
 	});
 };
 //#endregion
-export { r as RenderedPagesCacheContext, a as RenderedPagesCacheProvider, i as useRenderedPagesCache };
+export { c as RenderedPagesCacheContext, u as RenderedPagesCacheProvider, l as useRenderedPagesCache };

package/dist/contexts/VirtualScrollContext.js

@@ -2,7 +2,6 @@ import { createContext as e, useContext as t, useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 //#region lib/contexts/VirtualScrollContext.tsx
 var i = e({
-	getVirtualScrollRef: () => {},
 	getPageScrollElementRef: () => {},
 	getVirtualScrollableElementRef: () => {},
 	scrollPosition: {
@@ -16,25 +15,23 @@ var i = e({
 	},
 	setTotalInnerDimensions: () => {}
 }), a = () => t(i), o = ({ children: e }) => {
-	let [t, a] = n(), [o, s] = n(), [c, l] = n(), [u, d] = n({
+	let [t, a] = n(), [o, s] = n(), [c, l] = n({
 		scrollTop: 0,
 		scrollLeft: 0
-	}), [f, p] = n({
+	}), [u, d] = n({
 		height: 0,
 		width: 0
 	});
 	return /* @__PURE__ */ r(i.Provider, {
 		value: {
-			virtualScrollRef: t,
-			getVirtualScrollRef: a,
-			pageScrollElementRef: c,
-			getPageScrollElementRef: l,
-			virtualScrollableElementRef: o,
-			getVirtualScrollableElementRef: s,
-			scrollPosition: u,
-			setScrollPosition: d,
-			totalInnerDimensions: f,
-			setTotalInnerDimensions: p
+			pageScrollElementRef: o,
+			getPageScrollElementRef: s,
+			virtualScrollableElementRef: t,
+			getVirtualScrollableElementRef: a,
+			scrollPosition: c,
+			setScrollPosition: l,
+			totalInnerDimensions: u,
+			setTotalInnerDimensions: d
 		},
 		children: e
 	});

package/dist/contexts/ZoomContext.js

@@ -3,94 +3,152 @@ import { appConsole as t } from "../utils/appConsole.js";
 import { useDocumentContext as n } from "./RPDocumentContext.js";
 import { useInitialStateContext as r } from "./InitialStateContext.js";
 import { useViewModeContext as i } from "./ViewModeContext.js";
-import "../utils/constants.js";
-import { getZoomLevel as a } from "../utils/getZoomLevel.js";
-import { useLayoutContainer as o } from "./LayoutContainerContext.js";
-import { useRotationContext as s } from "./RotationContext.js";
-import { useGlobalCurrentPage as c } from "./GlobalCurrentPage.js";
-import { useDebounce as l } from "../utils/hooks/useDebounce.js";
-import { createContext as u, useCallback as d, useContext as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
-import { jsx as _ } from "react/jsx-runtime";
+import { MAX_ZOOM_SCALE as a, ZOOM_SAFETY_TIMEOUT_MS as o } from "../utils/constants.js";
+import { getZoomLevel as s } from "../utils/getZoomLevel.js";
+import { useLayoutContainer as c } from "./LayoutContainerContext.js";
+import { useRotationContext as ee } from "./RotationContext.js";
+import { useGlobalCurrentPage as te } from "./GlobalCurrentPage.js";
+import { useDebounce as ne } from "../utils/hooks/useDebounce.js";
+import { createContext as l, useCallback as u, useContext as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as re } from "react/jsx-runtime";
 //#region lib/contexts/ZoomContext.tsx
-var v = u({
+var g = l({
 	zoomLevel: 100,
 	currentZoom: 1,
+	targetZoom: 1,
+	isZooming: !1,
+	zoomOrigin: null,
+	zoomGesture: null,
+	previousTargetZoom: null,
+	zoomTo: () => {},
 	setZoomLevel: () => {}
-}), y = () => {
-	let e = f(v);
+}), _ = () => {
+	let e = d(g);
 	return typeof e.currentZoom != "number" && t.warn("Please use this hooks inside children component of RPProvider"), e;
-}, b = ({ children: t }) => {
-	let { initialScale: u = e.PAGE_FIT } = r(), [f, y] = g(u), { pages: b } = n(), { pagesRef: x } = o(), { viewMode: S } = i(), [C, w] = g({
-		width: x?.clientWidth || 0,
-		height: x?.clientHeight || 0
-	}), T = l(C, 100), { rotate: E } = s(), [D, O] = g(null), k = h(null), { currentPage: A } = c(), [j, M] = g(A);
-	p(() => {
-		let e = b.get(j);
-		e ||= b.get(1);
+}, v = ({ children: t }) => {
+	let { initialScale: l = e.PAGE_FIT } = r(), [d, _] = h(l), [v, ie] = h(0), [y, b] = h(0), [x, S] = h(!1), [C, w] = h(null), [T, E] = h(null), [D, O] = h(null), k = m(0), A = m(0), { pages: j } = n(), { pagesRef: M } = c(), { viewMode: N } = i(), [ae, P] = h({
+		width: M?.clientWidth || 0,
+		height: M?.clientHeight || 0
+	}), F = ne(ae, 100), { rotate: I } = ee(), [L, R] = h(null), z = m(null), { currentPage: B } = te(), [V, oe] = h(B), H = m(), U = m(), W = m(), G = m({});
+	f(() => {
+		let e = j.get(V);
+		e ||= j.get(1);
 		let t = e?.page.getViewport({
 			scale: 1,
-			rotation: e.defaultRotation + E
+			rotation: e.defaultRotation + I
 		});
-		t && JSON.stringify(t) !== JSON.stringify(k.current) && (k.current = t, O(t));
+		t && JSON.stringify(t) !== JSON.stringify(z.current) && (z.current = t, R(t));
 	}, [
-		b,
-		E,
-		j
+		j,
+		I,
+		V
 	]);
-	let N = d(() => D ? {
-		pageWidth: (D?.width || 0) + 8,
-		pageHeight: D?.height || 0,
-		clientWidth: x?.clientWidth || 0,
-		clientHeight: x?.clientHeight || 0
-	} : null, [D, x]), P = m(() => {
-		let e = N();
-		if (!T.width || !T.height || !e) return 0;
-		if (typeof f == "number") return f / 100;
-		let { clientWidth: t, clientHeight: n, pageWidth: r, pageHeight: i } = e;
-		return a(f, t, n, r, i, S) / 100;
+	let K = u(() => L ? {
+		pageWidth: (L?.width || 0) + 8,
+		pageHeight: L?.height || 0,
+		clientWidth: M?.clientWidth || 0,
+		clientHeight: M?.clientHeight || 0
+	} : null, [L, M]), q = p(() => {
+		let e = K();
+		if (!F.width || !F.height || !e) return 0;
+		if (typeof d == "number") return Math.max(25, Math.min(d, a)) / 100;
+		let { clientWidth: t, clientHeight: n, pageWidth: r, pageHeight: i } = e, o = s(d, t, n, r, i, N) / 100;
+		return Math.max(25 / 100, Math.min(o, a / 100));
 	}, [
-		f,
-		T,
-		N,
-		S
-	]);
-	p(() => {
-		M(A);
-	}, [f]), p(() => {
+		d,
+		F,
+		K,
+		N
+	]), J = u(() => {
+		H.current &&= (clearTimeout(H.current), void 0), U.current &&= (clearTimeout(U.current), void 0), W.current &&= (cancelAnimationFrame(W.current), void 0);
+	}, []), Y = u((e) => {
+		ie(e), S(!1), w(null), E(null), O(null);
+	}, []), X = u((e, t = {}) => {
+		if (!e) return;
+		let n = k.current === 0;
+		if (!(!(Math.abs(e - A.current) > 1e-10) && !n)) {
+			if (J(), w(t.origin ?? null), E(t.gesture ?? null), O(t.previousTargetZoom ?? A.current ?? k.current ?? null), A.current = e, b(e), n || t.immediate) {
+				Y(e);
+				return;
+			}
+			S(!0), U.current = setTimeout(() => {
+				H.current &&= (clearTimeout(H.current), void 0), W.current &&= (cancelAnimationFrame(W.current), void 0), U.current = void 0, Y(e);
+			}, o), W.current = requestAnimationFrame(() => {
+				W.current = void 0, H.current = setTimeout(() => {
+					H.current = void 0, U.current &&= (clearTimeout(U.current), void 0), Y(e);
+				}, 400);
+			});
+		}
+	}, [J, Y]);
+	f(() => {
+		if (!q) return;
+		let e = G.current;
+		G.current = {}, X(q, e);
+	}, [q, X]);
+	let Z = u((e) => {
+		if (typeof e == "number") return Math.max(25, Math.min(e, a)) / 100;
+		let t = K();
+		if (!t) return 0;
+		let { clientWidth: n, clientHeight: r, pageWidth: i, pageHeight: o } = t, c = s(e, n, r, i, o, N);
+		return Math.max(25, Math.min(c, a)) / 100;
+	}, [K, N]), Q = u((e, t = {}) => {
+		G.current = t, _(e), X(Z(e), t);
+	}, [Z, X]);
+	f(() => {
+		y && (A.current = y);
+	}, [y]), f(() => {
+		v && (k.current = v);
+	}, [v]), f(() => () => {
+		J();
+	}, [J]), f(() => {
+		oe(B);
+	}, [d]), f(() => {
 		let e = new ResizeObserver((e) => {
 			e.forEach((e) => {
-				w({
+				P({
 					width: e.contentRect.width,
 					height: e.contentRect.height
 				});
 			});
 		});
-		return x && e.observe(x), () => {
+		return M && e.observe(M), () => {
 			e.disconnect();
 		};
-	}, [x]);
-	let F = d((e) => {
+	}, [M]);
+	let $ = u((e) => {
 		let t = 0;
 		if (typeof e == "function") {
-			let n = N();
+			let n = K();
 			if (!n) return;
-			let { clientWidth: r, clientHeight: i, pageWidth: o, pageHeight: s } = n;
-			t = (t) => e(a(t, r, i, o, s, S));
+			let { clientWidth: r, clientHeight: i, pageWidth: a, pageHeight: o } = n;
+			t = (t) => e(s(t, r, i, a, o, N));
 		} else t = e;
-		t && y(t);
-	}, [N]), I = m(() => ({
-		zoomLevel: f,
-		currentZoom: P,
-		setZoomLevel: F
+		t && (G.current = {}, _(typeof t == "number" ? Math.max(25, Math.min(t, a)) : t));
+	}, [K, N]), se = p(() => ({
+		zoomLevel: d,
+		currentZoom: v,
+		targetZoom: y || v,
+		isZooming: x,
+		zoomOrigin: C,
+		zoomGesture: T,
+		previousTargetZoom: D,
+		zoomTo: Q,
+		setZoomLevel: $
 	}), [
-		P,
-		f,
-		F
+		v,
+		y,
+		x,
+		d,
+		C,
+		T,
+		D,
+		Q,
+		$
 	]);
-	return /* @__PURE__ */ _(v.Provider, {
-		value: I,
+	return /* @__PURE__ */ re(g.Provider, {
+		value: se,
 		children: t
 	});
 };
 //#endregion
-export { v as ZoomContext, b as ZoomProvider, y as useZoomContext };
+export { g as ZoomContext, v as ZoomProvider, _ as useZoomContext };