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

package/dist/utils/hooks/usePinch.js

@@ -1,66 +1,119 @@
-import { useDebounce as e } from "./useDebounce.js";
+import { MAX_ZOOM_SCALE as e } from "../constants.js";
 import { useZoomContext as t } from "../../contexts/ZoomContext.js";
-import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { getZoomOriginFromClientPoint as n } from "./useZoomOrigin.js";
+import { useCallback as r, useEffect as i, useRef as a } from "react";
 //#region lib/utils/hooks/usePinch.ts
-var o = (o) => {
-	let { currentZoom: s, setZoomLevel: c } = t(), [l, u] = a(0), d = e(l, 100), [f, p] = a(!1), m = i(null), h = n((e) => {
-		u(e ? (e) => e + 3 : (e) => e - 3);
-	}, []), g = n((e) => {
-		e.ctrlKey && (e.preventDefault(), h(e.deltaY < 0));
-	}, [h]);
-	r(() => {
-		if (d) {
-			let e = Math.round(s * 100 + d);
-			u(0), c(e > 25 ? e : 25);
+var o = () => 35 / (window.devicePixelRatio || 1), s = (s, c = {}) => {
+	let { targetZoom: l, zoomTo: u } = t(), { onBeforeZoom: d, onPinchEnd: f } = c, p = a(null), m = a(!1), h = a(!1), g = a(!1), _ = a(1), v = a(1), y = a(!1), b = a(!1), x = a(), S = a(l), C = a(null);
+	i(() => {
+		S.current = l;
+	}, [l]);
+	let w = r((e, t, n) => {
+		if (t === 1) return 1;
+		let r = n.current;
+		(r > 1 && t < 1 || r < 1 && t > 1) && (n.current = 1);
+		let i = Math.floor(e * t * n.current * 100) / (100 * e);
+		return n.current = t / i, i;
+	}, []), T = r((t, n, r) => {
+		let i = S.current || 1, a = 25 / 100, o = e / 100;
+		if (i >= o && t > 1 || i <= a && t < 1) return;
+		let s = Math.max(a, Math.min(o, Math.round(i * t * 100) / 100));
+		Math.abs(s - i) < 1e-10 || (d?.({
+			gesture: r,
+			previousScale: i,
+			nextScale: s,
+			origin: n
+		}), S.current = s, u(s * 100, {
+			origin: n,
+			gesture: r,
+			previousTargetZoom: i
+		}));
+	}, [d, u]), E = r((e, t) => n(s, e, t) ?? void 0, [s]), D = r(() => {
+		b.current || (y.current = !0, clearTimeout(x.current), x.current = setTimeout(() => {
+			y.current = !1;
+		}, 100));
+	}, []), O = r((e) => {
+		if (!e.ctrlKey) {
+			b.current = !1, g.current = !1;
+			return;
 		}
-	}, [d]);
-	let _ = (e, t) => {
-		let n = e.clientX - t.clientX, r = e.clientY - t.clientY;
-		return Math.sqrt(n * n + r * r);
-	}, v = n((e) => {
-		!f || e.touches.length !== 2 || (m.current = _(e.touches[0], e.touches[1]), e.preventDefault());
-	}, [f]), y = n(() => {
-		m.current = null;
-	}, []), b = n((e) => {
-		if (!f || e.touches.length !== 2 || m.current === null) return;
-		let t = _(e.touches[0], e.touches[1]), n = t - m.current;
-		Math.abs(n) > 5 && (h(n > 0), m.current = t, e.preventDefault());
-	}, [h, f]), x = () => {
-		document.activeElement instanceof HTMLElement && document.activeElement.blur();
-	};
-	r(() => {
-		if (f) {
-			document.body.style.touchAction = "pan-x pan-y";
+		g.current || (v.current = 1), g.current = !0, b.current = !0, y.current = !1, clearTimeout(x.current), e.preventDefault();
+		let t = Math.exp(-e.deltaY / 100);
+		T(w(S.current || 1, t, v), E(e.clientX, e.clientY), "wheel");
+	}, [
+		w,
+		E,
+		T
+	]), k = (e) => Array.from(e.touches).sort((e, t) => e.identifier - t.identifier), A = r(() => {
+		!s || C.current || (C.current = {
+			touchAction: s.style.touchAction,
+			webkitUserSelect: s.style.webkitUserSelect,
+			overscrollBehavior: s.style.overscrollBehavior,
+			webkitOverflowScrolling: s.style.getPropertyValue("-webkit-overflow-scrolling")
+		}, s.style.touchAction = "none", s.style.webkitUserSelect = "none", s.style.overscrollBehavior = "contain", s.style.setProperty("-webkit-overflow-scrolling", "auto"));
+	}, [s]), j = r(() => {
+		!s || !C.current || (s.style.touchAction = C.current.touchAction, s.style.webkitUserSelect = C.current.webkitUserSelect, s.style.overscrollBehavior = C.current.overscrollBehavior, C.current.webkitOverflowScrolling ? s.style.setProperty("-webkit-overflow-scrolling", C.current.webkitOverflowScrolling) : s.style.removeProperty("-webkit-overflow-scrolling"), C.current = null);
+	}, [s]), M = r(() => {
+		if (!(m.current || p.current || h.current)) {
+			j();
 			return;
 		}
-		document.body.style.touchAction = "";
-	}, [f]), r(() => {
-		let e = () => {
-			let e = document.activeElement;
-			p(!!e?.closest("[data-rp=\"container\"]"));
-		};
-		return window.addEventListener("focusin", e), window.addEventListener("focusout", e), e(), () => {
-			window.removeEventListener("focusin", e), window.removeEventListener("focusout", e);
-		};
-	}, []), r(() => {
-		if (!o) return;
-		let e = (e) => {
-			o.contains(e.target) || x();
-		};
-		return document.addEventListener("scroll", e), () => {
-			document.removeEventListener("scroll", e);
-		};
-	}, [o]), r(() => {
-		if (o) return o.addEventListener("wheel", g, { passive: !1 }), o.addEventListener("touchstart", v, { passive: !1 }), o.addEventListener("touchmove", b, { passive: !1 }), o.addEventListener("touchend", y, { passive: !1 }), () => {
-			o.removeEventListener("wheel", g), o.removeEventListener("touchstart", v), o.removeEventListener("touchmove", b), o.removeEventListener("touchend", y);
+		p.current = null, m.current = !1, h.current = !1, _.current = 1, j(), f?.();
+	}, [f, j]), N = r((e) => {
+		if (e.touches.length !== 2) {
+			M();
+			return;
+		}
+		A(), e.preventDefault(), e.stopPropagation();
+		let [t, n] = k(e);
+		m.current = !0, _.current = 1, p.current = {
+			touch0ScreenX: t.screenX,
+			touch0ScreenY: t.screenY,
+			touch1ScreenX: n.screenX,
+			touch1ScreenY: n.screenY
+		}, h.current = !1;
+	}, [A, M]), P = r((e) => {
+		let t = p.current;
+		if (!t || e.touches.length !== 2) {
+			M();
+			return;
+		}
+		e.preventDefault(), e.stopPropagation();
+		let [n, r] = k(e), i = t.touch1ScreenX - t.touch0ScreenX, a = t.touch1ScreenY - t.touch0ScreenY, s = r.screenX - n.screenX, c = r.screenY - n.screenY, l = Math.hypot(i, a) || 1, u = Math.hypot(s, c) || 1;
+		if (!h.current && Math.abs(l - u) <= o()) return;
+		if (t.touch0ScreenX = n.screenX, t.touch0ScreenY = n.screenY, t.touch1ScreenX = r.screenX, t.touch1ScreenY = r.screenY, !h.current) {
+			h.current = !0;
+			return;
+		}
+		let d = u / l;
+		T(w(S.current || 1, d, _), E((n.clientX + r.clientX) / 2, (n.clientY + r.clientY) / 2), "touch");
+	}, [
+		w,
+		E,
+		M,
+		T
+	]), F = r((e) => {
+		e.touches.length >= 2 || (M(), v.current = 1);
+	}, [M]), I = r(() => {
+		M(), v.current = 1;
+	}, [M]), L = r(() => {
+		b.current = !1, g.current = !1, v.current = 1, y.current = !1, clearTimeout(x.current), M();
+	}, [M]);
+	i(() => {
+		if (s) return s.addEventListener("wheel", O, { passive: !1 }), s.addEventListener("scroll", D, { passive: !0 }), s.addEventListener("touchstart", N, { passive: !1 }), s.addEventListener("touchmove", P, { passive: !1 }), s.addEventListener("touchend", F, { passive: !1 }), s.addEventListener("touchcancel", I, { passive: !1 }), window.addEventListener("touchend", F, { passive: !1 }), window.addEventListener("touchcancel", I, { passive: !1 }), window.addEventListener("blur", L), () => {
+			j(), s.removeEventListener("wheel", O), s.removeEventListener("scroll", D), s.removeEventListener("touchstart", N), s.removeEventListener("touchmove", P), s.removeEventListener("touchend", F), s.removeEventListener("touchcancel", I), window.removeEventListener("touchend", F), window.removeEventListener("touchcancel", I), window.removeEventListener("blur", L), clearTimeout(x.current);
 		};
 	}, [
-		o,
-		g,
-		v,
-		b,
-		y
+		s,
+		D,
+		I,
+		F,
+		P,
+		N,
+		O,
+		L,
+		j
 	]);
 };
 //#endregion
-export { o as usePinch };
+export { s as usePinch };

package/dist/utils/hooks/usePresentPage.js

@@ -1,70 +1,46 @@
-import { ViewMode as e } from "../types.js";
-import { useLayoutContainer as t } from "../../contexts/LayoutContainerContext.js";
-import { useDebounce as n } from "./useDebounce.js";
-import { useDimensionPagesContext as r } from "../../contexts/DimensionPagesContext.js";
-import { useSmoothScrollContext as i } from "../../contexts/SmoothScrollContext.js";
-import { getGridDimension as a, getPositionFromPage as o } from "../calculatePage.js";
-import { r as s } from "../../PaginationContext-C5CJiEW-.js";
-import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { useDebounce as e } from "./useDebounce.js";
+import { useSmoothScrollContext as t } from "../../contexts/SmoothScrollContext.js";
+import { r as n } from "../../PaginationContext-DIzsZhFd.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
 //#region lib/utils/hooks/usePresentPage.ts
-var p = (p, m, h, g) => {
-	let _ = d(), { contentRef: v } = t(), { heights: y, widths: b } = r(), { setFocusedPage: x } = s(), S = d(x);
-	S.current = x;
-	let [C, w] = f([]), { targetScrollPage: T } = i(), E = n(C, 0, 500), D = u(() => {
-		let t = g === e.DUAL_PAGE_WITH_COVER, { rowsHeight: n, columnsWidth: r } = a({
-			heights: y,
-			widths: b
-		}, p, t);
-		return y.map((e, i) => {
-			let a = b[i], s = o(i + 1, p, t), c = r.slice(0, s.columnIndex).reduce((e, t) => e + t, 0), l = n.slice(0, s.rowIndex).reduce((e, t) => e + t, 0), u = c + a, d = l + e;
-			return {
-				pageNumber: i + 1,
-				...s,
-				width: a,
-				height: e,
-				startX: c,
-				startY: l,
-				endX: u,
-				endY: d
-			};
-		});
-	}, [
-		y,
-		b,
-		p,
-		m,
-		g
-	]);
-	l(() => {
-		E.length > 0 && !T.current && S.current(E[0].pageNumber), E[0]?.ratio && E.some((e) => e.pageNumber === T.current) && setTimeout(() => {
-			T.current = void 0;
-		}, 500);
-	}, [E]);
-	let O = c((e) => {
-		_.current && cancelAnimationFrame(_.current), _.current = requestAnimationFrame(() => {
+var s = (s, c) => {
+	let l = a(), u = a(), { setFocusedPage: d } = n(), f = a(d);
+	f.current = d;
+	let [p, m] = o([]), { targetScrollPage: h } = t(), g = e(p, 0, 500);
+	i(() => {
+		g.length > 0 && !h.current && f.current(g[0].pageNumber);
+		let e = g[0]?.ratio, t = h.current;
+		e && g.some((e) => e.pageNumber === t) && (clearTimeout(u.current), u.current = setTimeout(() => {
+			h.current === t && (h.current = void 0);
+		}, 500));
+	}, [g, h]), i(() => () => {
+		clearTimeout(u.current), l.current && cancelAnimationFrame(l.current);
+	}, []);
+	let _ = r((e) => {
+		c && (l.current && cancelAnimationFrame(l.current), l.current = requestAnimationFrame(() => {
 			let t = e.target, n = {
-				startTop: t.scrollTop,
-				startLeft: t.scrollLeft,
-				endTop: t.scrollTop + t.clientHeight,
-				endLeft: t.scrollLeft + t.clientWidth
+				startTop: t.scrollTop - c.offsetTop,
+				startLeft: t.scrollLeft - c.offsetLeft,
+				endTop: t.scrollTop - c.offsetTop + t.clientHeight,
+				endLeft: t.scrollLeft - c.offsetLeft + t.clientWidth
 			};
-			w(D.filter((e) => {
-				let t = e.endX >= n.startLeft && e.endY >= n.startTop, r = e.startX <= n.endLeft && e.startY <= n.endTop;
+			m(c.pages.filter((e) => {
+				let t = e.left + e.width >= n.startLeft && e.top + e.height >= n.startTop, r = e.left <= n.endLeft && e.top <= n.endTop;
 				return t && r;
 			}).map((e) => {
-				let t = n.startLeft > e.startX ? n.startLeft : e.startX, r = n.startTop > e.startY ? n.startTop : e.startY, i = n.endLeft < e.endX ? n.endLeft : e.endX, a = n.endTop < e.endY ? n.endTop : e.endY, o = +((i - t) * (a - r) / (e.width * e.height) * 100).toFixed(2);
+				let t = Math.max(n.startLeft, e.left), r = Math.max(n.startTop, e.top), i = Math.min(n.endLeft, e.left + e.width), a = Math.min(n.endTop, e.top + e.height), o = +(Math.max(0, i - t) * Math.max(0, a - r) / (e.width * e.height || 1) * 100).toFixed(2);
 				return {
 					pageNumber: e.pageNumber,
 					ratio: o
 				};
 			}).sort((e, t) => t.ratio - e.ratio));
-		});
-	}, [v, D]);
-	l(() => {
-		if (h) return h?.addEventListener("scroll", O), () => {
-			h?.removeEventListener("scroll", O);
+		}));
+	}, [c]);
+	i(() => {
+		if (s) return s?.addEventListener("scroll", _), _({ target: s }), () => {
+			s?.removeEventListener("scroll", _);
 		};
-	}, [h, O]);
+	}, [s, _]);
 };
 //#endregion
-export { p as usePresentPage };
+export { s as usePresentPage };

package/dist/utils/hooks/useScrollToPage.js

@@ -1,2 +1,2 @@
-import { a as e } from "../../PaginationContext-C5CJiEW-.js";
+import { a as e } from "../../PaginationContext-DIzsZhFd.js";
 export { e as useScrollToPage };

package/dist/utils/hooks/useSearch.js

@@ -1,81 +1,80 @@
-import { ScrollMode as e, ViewMode as t } from "../types.js";
-import { useDocumentContext as n } from "../../contexts/RPDocumentContext.js";
-import { useScrollModeContext as r } from "../../contexts/ScrollModeContext.js";
-import { useViewModeContext as i } from "../../contexts/ViewModeContext.js";
-import { useVirtualScrollContext as a } from "../../contexts/VirtualScrollContext.js";
-import { useLayoutContainer as o } from "../../contexts/LayoutContainerContext.js";
-import { useZoomContext as s } from "../../contexts/ZoomContext.js";
-import { usePagesRotateContext as c } from "../../contexts/PagesRotateContext.js";
-import { useDimensionPagesContext as l } from "../../contexts/DimensionPagesContext.js";
-import { useSmoothScrollContext as u } from "../../contexts/SmoothScrollContext.js";
-import { getScrollDistance as d } from "../getScrollDistance.js";
-import { r as f } from "../../PaginationContext-C5CJiEW-.js";
+import { ScrollMode as e } from "../types.js";
+import { useDocumentContext as t } from "../../contexts/RPDocumentContext.js";
+import { useScrollModeContext as n } from "../../contexts/ScrollModeContext.js";
+import { useViewModeContext as r } from "../../contexts/ViewModeContext.js";
+import { useVirtualScrollContext as i } from "../../contexts/VirtualScrollContext.js";
+import { useLayoutContainer as a } from "../../contexts/LayoutContainerContext.js";
+import { useZoomContext as o } from "../../contexts/ZoomContext.js";
+import { usePagesRotateContext as s } from "../../contexts/PagesRotateContext.js";
+import { useDimensionPagesContext as c } from "../../contexts/DimensionPagesContext.js";
+import { useSmoothScrollContext as l } from "../../contexts/SmoothScrollContext.js";
+import { buildDocumentLayout as u, getPagePlacement as d } from "../documentLayout.js";
+import { r as f } from "../../PaginationContext-DIzsZhFd.js";
 import { findMatches as p } from "../highlight.js";
 import { getWordPositionInPage as m } from "../getWordPositionInPage.js";
 import { useCallback as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
 //#region lib/utils/hooks/useSearch.ts
 var b = (b = {}, x = "") => {
-	let [S, C] = y(x), [w, T] = y(!1), { pdf: E, pages: D } = n(), { widths: O, heights: k } = l(), A = v(!S), { currentZoom: j } = s(), [M, N] = y([]), { setFocusedPage: P } = f(), { columnCount: F, viewMode: I } = i(), { pageRotate: L } = c(), [R, z] = y(0), { pageScrollElementRef: B, virtualScrollableElementRef: V } = a(), { scrollMode: H } = r(), { pagesRef: U } = o(), { scrollBehavior: W } = u(), G = v({}), K = v(0), q = _(() => R === 0 ? null : M[R - 1], [R, M]), J = _(() => M.length, [M]), Y = h((n) => {
-		if (n === 0) return;
-		let r = M[n - 1];
-		if (!r || !D) return;
-		let i = V || B;
-		if (!i || !U) return;
-		let a = D.get(r.page);
-		if (H === e.PAGE_SCROLLING && P(r.page), !a) return;
-		let o = 0, s = 0;
-		if (H === e.VERTICAL_SCROLLING) {
-			let e = r.page - 1, n = F, i, a;
-			if (I === t.DUAL_PAGE_WITH_COVER) if (r.page === 1) i = 0, a = 0;
-			else {
-				let e = r.page - 2;
-				i = e % 2, a = Math.floor(e / 2) + 1;
-			}
-			else i = e % n, a = Math.floor(e / n);
-			o = d(k, a), s = d(O, i);
-		}
-		H === e.HORIZONTAL_SCROLLING && (s = O.slice(0, r.page - 1).reduce((e, t) => e + t, 0));
-		let c = {
-			height: k[r.page - 1],
-			width: O[r.page - 1]
-		}, l = L[r.page], { leftInPage: u, topInPage: f } = m(c, U, r.rect, j, l), p = s + u, h = o + f, g = {
+	let [S, C] = y(x), [w, T] = y(!1), { pdf: E, pages: D } = t(), { widths: O, heights: k } = c(), A = v(!S), { currentZoom: j } = o(), [M, N] = y([]), { setFocusedPage: P } = f(), { viewMode: F } = r(), { pageRotate: I } = s(), [L, R] = y(0), { pageScrollElementRef: z, virtualScrollableElementRef: B } = i(), { scrollMode: V } = n(), { pagesRef: H } = a(), { scrollBehavior: U } = l(), W = v({}), G = v(0), K = _(() => L === 0 ? null : M[L - 1], [L, M]), q = _(() => M.length, [M]), J = h((t) => {
+		if (t === 0) return;
+		let n = M[t - 1];
+		if (!n || !D) return;
+		let r = B || z;
+		if (!r || !H) return;
+		let i = D.get(n.page);
+		if (V === e.PAGE_SCROLLING && P(n.page), !i) return;
+		let a = u({
+			pageDimensions: {
+				widths: O,
+				heights: k
+			},
+			viewportWidth: r.clientWidth,
+			viewportHeight: r.clientHeight,
+			scrollMode: V,
+			viewMode: F,
+			focusedPage: n.page
+		}), o = d(a, n.page);
+		if (!o) return;
+		let s = {
+			height: k[n.page - 1],
+			width: O[n.page - 1]
+		}, c = I[n.page], { leftInPage: l, topInPage: f } = m(s, H, n.rect, j, c), p = a.offsetLeft + o.left + l, h = a.offsetTop + o.top + f, g = {
 			left: Math.max(p, 0),
 			top: Math.max(h, 0)
 		};
-		i.scrollTo({
+		r.scrollTo({
 			...g,
-			behavior: W
+			behavior: U
 		});
 	}, [
 		D,
 		P,
 		O,
 		k,
-		H,
-		I,
-		F,
 		V,
+		F,
 		B,
-		U,
+		z,
+		H,
 		M,
 		j,
-		L,
-		W
+		I,
+		U
 	]);
 	g(() => {
-		R && Y(R);
-	}, [R]);
-	let X = h(() => {
-		z((e) => {
+		L && J(L);
+	}, [L]);
+	let Y = h(() => {
+		R((e) => {
 			let t;
-			return t = J ? e + 1 > J ? 1 : e + 1 : 0, K.current = t, t;
-		}), K.current === 1 && Y(K.current);
-	}, [J, Y]), Z = h(() => {
-		z((e) => {
+			return t = q ? e + 1 > q ? 1 : e + 1 : 0, G.current = t, t;
+		}), G.current === 1 && J(G.current);
+	}, [q, J]), X = h(() => {
+		R((e) => {
 			let t;
-			return t = J ? e - 1 <= 0 ? J : e - 1 : 0, K.current = t, t;
-		}), K.current === 1 && Y(K.current);
-	}, [J, Y]), Q = h(async (e) => {
+			return t = q ? e - 1 <= 0 ? q : e - 1 : 0, G.current = t, t;
+		}), G.current === 1 && J(G.current);
+	}, [q, J]), Z = h(async (e) => {
 		if (!e) return {};
 		let t = e.numPages, n = {};
 		for (let r = 1; r <= t; r++) {
@@ -87,11 +86,11 @@ var b = (b = {}, x = "") => {
 	}, []);
 	return g(() => {
 		if (!S) {
-			A.current = !0, N([]), z(0);
+			A.current = !0, N([]), R(0);
 			return;
 		}
-		A.current = !1, T(!0), N([]), z(0), Q(E).then((e) => {
-			G.current = e;
+		A.current = !1, T(!0), N([]), R(0), Z(E).then((e) => {
+			W.current = e;
 			let t = Object.keys(e).reduce((t, n) => {
 				let r = p([S], e[n], Number(n) - 1, b).map((e, t) => ({
 					...e,
@@ -100,13 +99,13 @@ var b = (b = {}, x = "") => {
 				}));
 				return [...t, ...r];
 			}, []);
-			N(t), z(+!!t.length);
+			N(t), R(+!!t.length);
 		}).catch(() => {
-			N([]), z(0);
+			N([]), R(0);
 		}).finally(() => T(!1));
 	}, [
 		S,
-		Q,
+		Z,
 		E,
 		b
 	]), {
@@ -114,12 +113,12 @@ var b = (b = {}, x = "") => {
 		setSearch: C,
 		loading: w,
 		matches: M,
-		totalMatches: J,
-		currentMatchPosition: R,
-		currentMatch: q,
-		nextMatch: X,
-		prevMatch: Z,
-		setCurrentMatchPosition: z
+		totalMatches: q,
+		currentMatchPosition: L,
+		currentMatch: K,
+		nextMatch: Y,
+		prevMatch: X,
+		setCurrentMatchPosition: R
 	};
 };
 //#endregion

package/dist/utils/hooks/useZoomOrigin.js

@@ -0,0 +1,37 @@
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+//#region lib/utils/hooks/useZoomOrigin.ts
+var r = (e, t, n) => Math.max(t, Math.min(e, n)), i = (e) => Number.isFinite(e.left) && Number.isFinite(e.top) && Number.isFinite(e.width) && Number.isFinite(e.height) && e.width > 0 && e.height > 0, a = (e, t, n) => {
+	if (!e || !Number.isFinite(t) || !Number.isFinite(n)) return null;
+	let a = e.getBoundingClientRect();
+	return i(a) ? [r(t - a.left, 0, a.width), r(n - a.top, 0, a.height)] : null;
+}, o = (e) => {
+	if (!e) return;
+	let t = e.getBoundingClientRect();
+	if (!i(t)) return;
+	let { width: n, height: r } = t;
+	return [n / 2, r / 2];
+}, s = (s) => {
+	let c = n(null), l = e((e, t) => a(s, e, t), [s]);
+	return t(() => {
+		if (!s) {
+			c.current = null;
+			return;
+		}
+		let e = (e) => {
+			c.current = l(e.clientX, e.clientY);
+		}, t = (e) => {
+			c.current = l(e.clientX, e.clientY);
+		};
+		return s.addEventListener("pointermove", e, { passive: !0 }), s.addEventListener("mousemove", t, { passive: !0 }), () => {
+			s.removeEventListener("pointermove", e), s.removeEventListener("mousemove", t);
+		};
+	}, [s, l]), e(() => {
+		if (!s) return;
+		let e = s.getBoundingClientRect();
+		if (!i(e)) return;
+		let { width: t, height: n } = e, a = c.current;
+		return a ? [r(a[0], 0, t), r(a[1], 0, n)] : o(s);
+	}, [s]);
+};
+//#endregion
+export { o as getZoomCenterOrigin, a as getZoomOriginFromClientPoint, s as useZoomOrigin };

package/dist/utils/renderPage.js

@@ -1,21 +1,28 @@
-import { AnnotationMode as e } from "pdfjs-dist";
+import { IOS_MAX_CANVAS_PIXELS as e, MAX_CANVAS_DIM as t, MAX_CANVAS_PIXELS as n, SAFARI_MAX_CANVAS_PIXELS as r } from "./constants.js";
+import { AnnotationMode as i } from "pdfjs-dist";
 //#region lib/utils/renderPage.ts
-var t = (t, n, r = {}) => {
-	let { scale: i = 1, rotate: a = 0, renderForms: o = !1, interactiveForm: s = !0 } = r, c = n.getContext("2d", { desynchronized: !1 }), l = window.devicePixelRatio, u = t.getViewport({
-		scale: i,
+var a = () => {
+	let t = navigator.userAgent, i = /iPad|iPhone|iPod/.test(t) && !window.MSStream, a = /^((?!chrome|android).)*safari/i.test(t);
+	return i ? e : a ? r : n;
+}, o = (e, n) => {
+	let r = window.devicePixelRatio || 1, i = Math.max(e * n, 1), o = Math.min(a(), i * 200), s = Math.sqrt(o / i), c = t / Math.max(e, 1), l = t / Math.max(n, 1), u = Math.min(r, s, c, l);
+	return Number.isFinite(u) && u > 0 ? u : 1;
+}, s = (e, t, n = {}) => {
+	let { scale: r = 1, rotate: a = 0, renderForms: s = !1, interactiveForm: c = !0 } = n, l = t.getContext("2d", { desynchronized: !1 }), u = e.getViewport({
+		scale: r,
 		rotation: a
-	}), d = t.getViewport({
-		scale: i * l,
+	}), d = o(u.width, u.height), f = e.getViewport({
+		scale: r * d,
 		rotation: a
 	});
-	n.width = d.width, n.height = d.height, n.style.width = `${Math.floor(u.width)}px`, n.style.height = `${Math.floor(u.height)}px`;
-	let f = o ? e.ENABLE_FORMS : void 0;
-	return s || (f = e.ENABLE), t.render({
-		canvas: n,
-		canvasContext: c,
-		viewport: d,
-		annotationMode: f
+	t.width = Math.floor(f.width), t.height = Math.floor(f.height), t.style.width = `${Math.floor(u.width)}px`, t.style.height = `${Math.floor(u.height)}px`;
+	let p = s ? i.ENABLE_FORMS : void 0;
+	return c || (p = i.ENABLE), e.render({
+		canvas: t,
+		canvasContext: l,
+		viewport: f,
+		annotationMode: p
 	});
 };
 //#endregion
-export { t as renderPage };
+export { s as renderPage };

package/dist/utils/types.js

@@ -1,11 +1,11 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../de_DE--0LF-SJR.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../de_DE-x4Z-jQrz.js";
 //#region lib/utils/types.ts
 var o = /* @__PURE__ */ function(e) {
 	return e[e.Text = 1] = "Text", e[e.Link = 2] = "Link", e[e.FreeText = 3] = "FreeText", e[e.Line = 4] = "Line", e[e.Square = 5] = "Square", e[e.Circle = 6] = "Circle", e[e.Polygon = 7] = "Polygon", e[e.Polyline = 8] = "Polyline", e[e.Highlight = 9] = "Highlight", e[e.Underline = 10] = "Underline", e[e.Squiggly = 11] = "Squiggly", e[e.StrikeOut = 12] = "StrikeOut", e[e.Stamp = 13] = "Stamp", e[e.Caret = 14] = "Caret", e[e.Ink = 15] = "Ink", e[e.Popup = 16] = "Popup", e[e.FileAttachment = 17] = "FileAttachment", e[e.Widget = 20] = "Widget", e;
 }({}), s = /* @__PURE__ */ function(e) {
 	return e.INTERNAL_LINK = "internal-link", e.LINK = "link", e.FILE_ATTACHMENT = "file-attachment", e.FORM_TEXT = "form-text", e.FORM_SELECT = "form-select", e.FORM_CHECKBOX = "form-checkbox", e.FORM_RADIO = "form-radio", e.FORM_BUTTON = "form-button", e.BUTTON = "button", e;
 }({}), c = /* @__PURE__ */ function(e) {
-	return e.NOT_SUPPORTED = "not-supported", e.INVALID_OR_CORRUPTED_PDF = "invalid-or-corrupted-pdf", e;
+	return e.NOT_SUPPORTED = "not-supported", e.INVALID_OR_CORRUPTED_PDF = "invalid-or-corrupted-pdf", e.WASM_URL_REQUIRED = "wasm-url-required", e;
 }({}), l = /* @__PURE__ */ function(e) {
 	return e.ACTUAL = "Actual Size", e.PAGE_FIT = "Page Fit", e.PAGE_WIDTH = "Page Width", e;
 }({}), u = /* @__PURE__ */ function(e) {
@@ -13,7 +13,7 @@ var o = /* @__PURE__ */ function(e) {
 }({}), d = /* @__PURE__ */ function(e) {
 	return e.SINGLE_PAGE = "Single", e.DUAL_PAGE = "Dual", e.DUAL_PAGE_WITH_COVER = "DualWithCover", e;
 }({}), f = /* @__PURE__ */ function(e) {
-	return e.FONT_FAMILY = "--rp-font-family", e.PRIMARY_COLOR = "--rp-primary-color", e.BORDER_RADIUS = "--rp-border-radius", e.TEXT_COLOR = "--rp-text-color", e.OUTLINE_COLOR = "--rp-outline-color", e.FONT_SIZE = "--rp-font-size", e.DROP_MASK_BACKGROUND_COLOR = "--rp-drop-mask-background-color", e.LOADER_BACKDROP_COLOR = "--rp-loader-backdrop-color", e.ICON_DISABLED = "--rp-icon-disabled", e.ICON_FONT_SIZE = "--rp-icon-font-size", e.TOOLBAR_BACKGROUND = "--rp-toolbar-background", e.TOOLBAR_BORDER_COLOR = "--rp-toolbar-border-color", e.TOOLBAR_PADDING = "--rp-toolbar-padding", e.TOOLBAR_GAP = "--rp-toolbar-gap", e.TOOLBAR_SIZE = "--rp-toolbar-size", e.SIDEBAR_WIDTH = "--rp-sidebar-width", e.THUMBNAIL_BORDER_COLOR = "--rp-thumbnail-border-color", e.THUMBNAIL_BACKGROUND_COLOR = "--rp-thumbnail-background-color", e.THUMBNAIL_ACTIVE_COLOR = "--rp-thumbnail-active-color", e.THUMBNAIL_PADDING_Y = "--rp-thumbnail-padding-y", e.BUTTON_HOVER_BACKGROUND = "--rp-button-hover-background", e.BUTTON_PADDING = "--rp-button-padding", e.INPUT_PADDING = "--rp-input-padding", e.INPUT_BORDER_RADIUS = "--rp-input-border-radius", e.INPUT_BACKGROUND_COLOR = "--rp-input-background-color", e.INPUT_PLACEHOLDER_COLOR = "--rp-input-placeholder-color", e.PAGES_BACKGROUND_COLOR = "--rp-pages-background-color", e.PAGE_SHADOW = "--rp-page-shadow", e.PAGE_OUTLINE = "--rp-page-outline", e.PAGE_OUTLINE_OFFSET = "--rp-page-outline-offset", e.ANNOTATION_LAYER_LINK_HOVER_BACKGROUND = "--rp-annotation-layer__link-hover-background", e.DROPDOWN_BACKGROUND_COLOR = "--rp-dropdown-background-color", e.DROPDOWN_PADDING = "--rp-dropdown-padding", e.DROPDOWN_HOVER_BACKGROUND_COLOR = "--rp-dropdown-hover-background-color", e.DROPDOWN_SEPARATOR_COLOR = "--rp-dropdown-separator-color", e.DROPDOWN_SEPARATOR_MARGIN = "--rp-dropdown-separator-margin", e.DROPDOWN_PADDING_MENU_ITEM = "--rp-dropdown-padding-menu-item", e.DROPDOWN_FONT_SIZE = "--rp-dropdown-font-size", e.DROPDOWN_BORDER_RADIUS = "--rp-dropdown-border-radius", e.SEARCH_TOOL_DROPDOWN_PADDING = "--rp-search-tool-dropdown-padding", e.POPOVER_FONT_SIZE = "--rp-popover-font-size", e.POPOVER_BACKGROUND_COLOR = "--rp-popover-background-color", e.POPOVER_COLOR = "--rp-popover-color", e.POPOVER_BORDER_COLOR = "--rp-popover-border-color", e.POPOVER_BORDER_RADIUS = "--rp-popover-border-radius", e.OVERLAY_BACKGROUND_COLOR = "--rp-overlay-background-color", e.DIALOG_BACKGROUND_COLOR = "--rp-dialog-background-color", e.PROPERTIES_DIVIDER_COLOR = "--rp-properties-divider-color", e.PROPERTIES_DIVIDER_MARGIN = "--rp-properties-divider-margin", e.PROPERTY_ITEM_GAP = "--rp-property-item-gap", e.DIALOG_TITLE_COLOR = "--rp-dialog-title-color", e.PROPERTY_ITEM_LABEL_COLOR = "--rp-property-item-label-color", e.PROPERTY_CLOSE_ICON_SIZE = "--rp-property-close-icon-size", e.PROPERTY_ITEM_FONT_SIZE = "--rp-property-item-font-size", e.PROPERTY_ITEM_FONT_WEIGHT = "--rp-property-item-font-weight", e.DIALOG_TITLE_FONT_SIZE = "--rp-dialog-title-font-size", e.DIALOG_TITLE_FONT_WEIGHT = "--rp-dialog-title-font-weight", e.MENU_ITEM_ICON_SIZE = "--rp-menu-item-icon-size", e.PRINT_PROGRESS_BACKGROUND = "--rp-print-progress-background", e.PRINT_PROGRESS_COLOR = "--rp-print-progress-color", e.DROP_ZONE_BORDER = "--rp-drop-zone-border", e.DROP_ZONE_FONT_COLOR = "--rp-drop-zone-font-color", e.DROP_ZONE_FONT_SIZE = "--rp-drop-zone-font-size", e.DROP_ZONE_BACKGROUND_COLOR = "--rp-drop-zone-background-color", e.CHECKBOX_BORDER_RADIUS = "--rp-checkbox-border-radius", e.CHECKBOX_BORDER_COLOR = "--rp-checkbox-border-color", e.CHECKBOX_INDICATOR_COLOR = "--rp-checkbox-indicator-color", e.HIGHLIGHT_BACKGROUND_COLOR = "--rp-highlight-background-color", e.TEXT_LAYER_HIGHLIGHT_BORDER_RADIUS = "--rp-text-layer-highlight-border-radius", e.CURRENT_HIGHLIGHT_BACKGROUND_COLOR = "--rp-current-highlight-background-color", e.TOOLTIP_BACKGROUND_COLOR = "--rp-tooltip-background-color", e.TOOLTIP_BORDER_RADIUS = "--rp-tooltip-border-radius", e.TOOLTIP_FONT_COLOR = "--rp-tooltip-font-color", e.TOOLTIP_FONT_SIZE = "--rp-tooltip-font-size", e.TOOLTIP_PADDING = "--rp-tooltip-padding", e.PASSWORD_MODAL_BACKGROUND_COLOR = "--rp-password-background-color", e.PASSWORD_MODAL_TITLE_FONT_COLOR = "--rp-password-title-font-color", e.PASSWORD_MODAL_CONTENT_FONT_COLOR = "--rp-password-content-font-color", e.PASSWORD_MODAL_INPUT_PLACEHOLDER_COLOR = "--rp-password-input-placeholder-color", e.PASSWORD_MODAL_INPUT_BORDER_COLOR = "--rp-password-input-border-color", e.PASSWORD_MODAL_INPUT_FONT_COLOR = "--rp-password-input-font-color", e.PASSWORD_MODAL_BUTTON_FONT_COLOR = "--rp-password-button-font-color", e.PASSWORD_MODAL_BUTTON_BACKGROUND_COLOR = "--rp-password-button-background-color", e.PASSWORD_MODAL_BUTTON_BORDER_COLOR = "--rp-password-button-border-color", e.PASSWORD_MODAL_BORDER_COLOR = "--rp-password-border-color", e.CONTAINER_FOCUS_OUTLINE_WIDTH = "--rp-container-focus-outline-width", e.CONTAINER_FOCUS_OUTLINE_COLOR = "--rp-container-focus-outline-color", e.CONTAINER_FOCUS_OUTLINE_OFFSET = "--rp-container-focus-outline-offset", e.BUTTON_BORDER_RADIUS = "--rp-button-border-radius", e.SKIP_LINK_FONT_SIZE = "--rp-skip-link-font-size", e.SKIP_LINK_COLOR = "--rp-skip-link-color", e.SKIP_LINK_BACKGROUND_COLOR = "--rp-skip-link-background-color", e.SKIP_LINK_BORDER_COLOR = "--rp-skip-link-border-color", e;
+	return e.FONT_FAMILY = "--rp-font-family", e.PRIMARY_COLOR = "--rp-primary-color", e.BORDER_RADIUS = "--rp-border-radius", e.TEXT_COLOR = "--rp-text-color", e.OUTLINE_COLOR = "--rp-outline-color", e.FONT_SIZE = "--rp-font-size", e.DROP_MASK_BACKGROUND_COLOR = "--rp-drop-mask-background-color", e.LOADER_BACKDROP_COLOR = "--rp-loader-backdrop-color", e.ICON_DISABLED = "--rp-icon-disabled", e.ICON_FONT_SIZE = "--rp-icon-font-size", e.TOOLBAR_BACKGROUND = "--rp-toolbar-background", e.TOOLBAR_BORDER_COLOR = "--rp-toolbar-border-color", e.TOOLBAR_PADDING = "--rp-toolbar-padding", e.TOOLBAR_GAP = "--rp-toolbar-gap", e.TOOLBAR_SIZE = "--rp-toolbar-size", e.SIDEBAR_WIDTH = "--rp-sidebar-width", e.THUMBNAIL_BORDER_COLOR = "--rp-thumbnail-border-color", e.THUMBNAIL_BACKGROUND_COLOR = "--rp-thumbnail-background-color", e.THUMBNAIL_ACTIVE_COLOR = "--rp-thumbnail-active-color", e.THUMBNAIL_PADDING_Y = "--rp-thumbnail-padding-y", e.BUTTON_HOVER_BACKGROUND = "--rp-button-hover-background", e.BUTTON_PADDING = "--rp-button-padding", e.INPUT_PADDING = "--rp-input-padding", e.INPUT_BORDER_RADIUS = "--rp-input-border-radius", e.INPUT_BACKGROUND_COLOR = "--rp-input-background-color", e.INPUT_PLACEHOLDER_COLOR = "--rp-input-placeholder-color", e.SEARCH_INPUT_BORDER_COLOR = "--rp-search-input-border-color", e.PAGES_BACKGROUND_COLOR = "--rp-pages-background-color", e.PAGE_SHADOW = "--rp-page-shadow", e.PAGE_OUTLINE = "--rp-page-outline", e.PAGE_OUTLINE_OFFSET = "--rp-page-outline-offset", e.ANNOTATION_LAYER_LINK_HOVER_BACKGROUND = "--rp-annotation-layer__link-hover-background", e.DROPDOWN_BACKGROUND_COLOR = "--rp-dropdown-background-color", e.DROPDOWN_PADDING = "--rp-dropdown-padding", e.DROPDOWN_HOVER_BACKGROUND_COLOR = "--rp-dropdown-hover-background-color", e.DROPDOWN_SEPARATOR_COLOR = "--rp-dropdown-separator-color", e.DROPDOWN_SEPARATOR_MARGIN = "--rp-dropdown-separator-margin", e.DROPDOWN_PADDING_MENU_ITEM = "--rp-dropdown-padding-menu-item", e.DROPDOWN_FONT_SIZE = "--rp-dropdown-font-size", e.DROPDOWN_BORDER_RADIUS = "--rp-dropdown-border-radius", e.SEARCH_TOOL_DROPDOWN_PADDING = "--rp-search-tool-dropdown-padding", e.POPOVER_FONT_SIZE = "--rp-popover-font-size", e.POPOVER_BACKGROUND_COLOR = "--rp-popover-background-color", e.POPOVER_COLOR = "--rp-popover-color", e.POPOVER_BORDER_COLOR = "--rp-popover-border-color", e.POPOVER_BORDER_RADIUS = "--rp-popover-border-radius", e.OVERLAY_BACKGROUND_COLOR = "--rp-overlay-background-color", e.DIALOG_BACKGROUND_COLOR = "--rp-dialog-background-color", e.PROPERTIES_DIVIDER_COLOR = "--rp-properties-divider-color", e.PROPERTIES_DIVIDER_MARGIN = "--rp-properties-divider-margin", e.PROPERTY_ITEM_GAP = "--rp-property-item-gap", e.DIALOG_TITLE_COLOR = "--rp-dialog-title-color", e.PROPERTY_ITEM_LABEL_COLOR = "--rp-property-item-label-color", e.PROPERTY_CLOSE_ICON_SIZE = "--rp-property-close-icon-size", e.PROPERTY_ITEM_FONT_SIZE = "--rp-property-item-font-size", e.PROPERTY_ITEM_FONT_WEIGHT = "--rp-property-item-font-weight", e.DIALOG_TITLE_FONT_SIZE = "--rp-dialog-title-font-size", e.DIALOG_TITLE_FONT_WEIGHT = "--rp-dialog-title-font-weight", e.MENU_ITEM_ICON_SIZE = "--rp-menu-item-icon-size", e.PRINT_PROGRESS_BACKGROUND = "--rp-print-progress-background", e.PRINT_PROGRESS_COLOR = "--rp-print-progress-color", e.PRINT_PROGRESS_CANCEL_BUTTON_BORDER_COLOR = "--rp-print-progress-cancel-button-border-color", e.DROP_ZONE_BORDER = "--rp-drop-zone-border", e.DROP_ZONE_FONT_COLOR = "--rp-drop-zone-font-color", e.DROP_ZONE_FONT_SIZE = "--rp-drop-zone-font-size", e.DROP_ZONE_BACKGROUND_COLOR = "--rp-drop-zone-background-color", e.CHECKBOX_BORDER_RADIUS = "--rp-checkbox-border-radius", e.CHECKBOX_BORDER_COLOR = "--rp-checkbox-border-color", e.CHECKBOX_INDICATOR_COLOR = "--rp-checkbox-indicator-color", e.HIGHLIGHT_BACKGROUND_COLOR = "--rp-highlight-background-color", e.TEXT_LAYER_HIGHLIGHT_BORDER_RADIUS = "--rp-text-layer-highlight-border-radius", e.CURRENT_HIGHLIGHT_BACKGROUND_COLOR = "--rp-current-highlight-background-color", e.TOOLTIP_BACKGROUND_COLOR = "--rp-tooltip-background-color", e.TOOLTIP_BORDER_RADIUS = "--rp-tooltip-border-radius", e.TOOLTIP_FONT_COLOR = "--rp-tooltip-font-color", e.TOOLTIP_FONT_SIZE = "--rp-tooltip-font-size", e.TOOLTIP_PADDING = "--rp-tooltip-padding", e.PASSWORD_MODAL_BACKGROUND_COLOR = "--rp-password-background-color", e.PASSWORD_MODAL_TITLE_FONT_COLOR = "--rp-password-title-font-color", e.PASSWORD_MODAL_CONTENT_FONT_COLOR = "--rp-password-content-font-color", e.PASSWORD_MODAL_INPUT_PLACEHOLDER_COLOR = "--rp-password-input-placeholder-color", e.PASSWORD_MODAL_INPUT_BORDER_COLOR = "--rp-password-input-border-color", e.PASSWORD_MODAL_INPUT_FONT_COLOR = "--rp-password-input-font-color", e.PASSWORD_MODAL_BUTTON_FONT_COLOR = "--rp-password-button-font-color", e.PASSWORD_MODAL_BUTTON_BACKGROUND_COLOR = "--rp-password-button-background-color", e.PASSWORD_MODAL_BUTTON_BORDER_COLOR = "--rp-password-button-border-color", e.PASSWORD_MODAL_BORDER_COLOR = "--rp-password-border-color", e.CONTAINER_FOCUS_OUTLINE_WIDTH = "--rp-container-focus-outline-width", e.CONTAINER_FOCUS_OUTLINE_COLOR = "--rp-container-focus-outline-color", e.CONTAINER_FOCUS_OUTLINE_OFFSET = "--rp-container-focus-outline-offset", e.BUTTON_BORDER_RADIUS = "--rp-button-border-radius", e.SKIP_LINK_FONT_SIZE = "--rp-skip-link-font-size", e.SKIP_LINK_COLOR = "--rp-skip-link-color", e.SKIP_LINK_BACKGROUND_COLOR = "--rp-skip-link-background-color", e.SKIP_LINK_BORDER_COLOR = "--rp-skip-link-border-color", e;
 }({}), p = /* @__PURE__ */ function(e) {
 	return e.PAGE_SCROLLING = "PAGE", e.VERTICAL_SCROLLING = "VERTICAL", e.HORIZONTAL_SCROLLING = "HORIZONTAL", e;
 }({}), m = /* @__PURE__ */ function(e) {

package/dist/utils/zoom.js

@@ -1,5 +1,11 @@
 import { MAX_ZOOM_SCALE as e } from "./constants.js";
 //#region lib/utils/zoom.ts
-var t = (e) => e * 100 <= 25, n = (t) => t * 100 >= e;
+var t = (e) => e * 100 <= 25, n = (t) => t * 100 >= e, r = (t) => {
+	let n = Math.floor(t / 25) * 25;
+	return Math.min(n + 25, e);
+}, i = (e) => {
+	let t = Math.ceil(e / 25) * 25;
+	return Math.max(t - 25, 25);
+};
 //#endregion
-export { n as isZoomInDisabled, t as isZoomOutDisabled };
+export { r as getNextZoomInLevel, i as getNextZoomOutLevel, n as isZoomInDisabled, t as isZoomOutDisabled };

package/package.json

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