pdf-tsx 0.12.0 → 0.14.0

package/dist/es/components/PDFViewer.js

@@ -3,91 +3,136 @@ import { useScrollTracking as t } from "../hooks/useScrollTracking.js";
 import { useKeyboardShortcuts as n } from "../hooks/useKeyboardShortcuts.js";
 import { useTextLayer as r } from "../hooks/useTextLayer.js";
 import { isSafeUrl as i } from "../utils/url.js";
-import { useAnnotationLayer as a } from "../hooks/useAnnotationLayer.js";
-import { usePDFLoader as ee } from "../hooks/usePDFLoader.js";
-import { usePDFRenderer as te } from "../hooks/usePDFRenderer.js";
-import { useOverlayRects as ne } from "../hooks/useOverlayRects.js";
-import { computeFit as o } from "../utils/pdfFit.js";
-import { ThemeProvider as re } from "../context/ThemeContext.js";
-import { LabelsProvider as ie } from "../context/LabelsContext.js";
+import { useAnnotationLayer as ee } from "../hooks/useAnnotationLayer.js";
+import { usePDFLoader as te } from "../hooks/usePDFLoader.js";
+import { usePDFRenderer as ne } from "../hooks/usePDFRenderer.js";
+import { useOverlayRects as re } from "../hooks/useOverlayRects.js";
+import { computeFit as a } from "../utils/pdfFit.js";
+import { ThemeProvider as ie } from "../context/ThemeContext.js";
+import { LabelsProvider as ae } from "../context/LabelsContext.js";
+import { useLabels as o } from "../hooks/useLabels.js";
 import s from "./PDFViewer.module.js";
 import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import * as ae from "pdfjs-dist";
-import { Fragment as oe, jsx as p, jsxs as m } from "react/jsx-runtime";
+import * as oe from "pdfjs-dist";
+import { Fragment as se, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/PDFViewer.tsx
-var h = 2, g = ({ file: g, workerSrc: _, sidebar: se, toolbar: v, onChangeFile: y, themeOverrides: ce, defaultTheme: le, defaultFit: b, language: ue, className: x, style: de }) => {
+var h = 2;
+function ce({ hasRead: e }) {
+	let t = o();
+	return /* @__PURE__ */ m("div", {
+		className: `${s.requireReadBanner} ${e ? s.requireReadDone : ""}`,
+		children: [e ? /* @__PURE__ */ p("svg", {
+			width: "16",
+			height: "16",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ p("path", {
+				d: "M3 8l3.5 3.5L13 4.5",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}) : /* @__PURE__ */ p("svg", {
+			width: "16",
+			height: "16",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ p("path", {
+				d: "M8 3v10M4 9l4 4 4-4",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}), /* @__PURE__ */ p("span", { children: e ? t.requireReadDone : t.requireReadPending })]
+	});
+}
+var g = ({ file: o, workerSrc: g, sidebar: le, toolbar: _, onChangeFile: v, themeOverrides: ue, defaultTheme: de, defaultFit: y, language: fe, className: b, style: pe, requireRead: x, onDocumentRead: S }) => {
 	l(() => {
-		ae.GlobalWorkerOptions.workerSrc = _;
-	}, [_]);
-	let [S, C] = f(1), [w, T] = f(0), [E, D] = f(null), [O, k] = f([]), [A, fe] = f(!1), [j, M] = f(b ?? null), [N, P] = f(null), F = d(null), I = d([]), L = d([]), R = d(w);
+		oe.GlobalWorkerOptions.workerSrc = g;
+	}, [g]);
+	let [C, w] = f(1), [T, E] = f(0), [D, O] = f(null), [k, me] = f([]), [A, he] = f(!1), [j, M] = f(y ?? null), [N, P] = f(null), [F, I] = f(!1), L = d(!1), R = d(null), z = d([]), B = d([]), V = d(T);
 	l(() => {
-		R.current = w;
-	}, [w]);
-	let [z, B] = f(null);
-	z !== g && (B(g), D(null));
-	let { pdf: V, numPages: H, loading: pe } = ee(g);
+		V.current = T;
+	}, [T]);
+	let [ge, _e] = f(null);
+	ge !== o && (_e(o), O(null), I(!1), L.current = !1);
+	let { pdf: H, numPages: U, loading: ve } = te(o);
 	l(() => {
-		V && (I.current = Array(V.numPages).fill(null), L.current = Array(V.numPages).fill(null));
-	}, [V]), l(() => {
-		!V || !b || !F.current || o(b, V, F.current, R.current).then(C);
-	}, [V, b]);
-	let U = d(j);
+		H && (z.current = Array(H.numPages).fill(null), B.current = Array(H.numPages).fill(null));
+	}, [H]), l(() => {
+		!H || !y || !R.current || a(y, H, R.current, V.current).then(w);
+	}, [H, y]);
+	let W = d(j);
 	l(() => {
-		U.current = j;
+		W.current = j;
 	}, [j]), l(() => {
-		if (!V || !F.current) return;
-		let e = F.current, t = new ResizeObserver(() => {
-			U.current && o(U.current, V, e, R.current).then(C);
+		if (!H || !R.current) return;
+		let e = R.current, t = new ResizeObserver(() => {
+			W.current && a(W.current, H, e, V.current).then(w);
 		});
 		return t.observe(e), () => t.disconnect();
-	}, [V]);
-	let { currentPage: W, goToPage: G } = t({
-		numPages: H,
-		containerRef: F,
-		pageRefs: I
-	}), K = u(() => {
-		if (H === 0) return [];
-		let e = /* @__PURE__ */ new Set(), t = Math.max(W - h, 1), n = Math.min(W + h, H);
+	}, [H]);
+	let { currentPage: G, goToPage: K } = t({
+		numPages: U,
+		containerRef: R,
+		pageRefs: z
+	});
+	l(() => {
+		U === 0 || G < U || (x && !F && I(!0), L.current || (L.current = !0, S?.()));
+	}, [
+		G,
+		U,
+		x,
+		F,
+		S
+	]);
+	let q = u(() => {
+		if (U === 0) return [];
+		let e = /* @__PURE__ */ new Set(), t = Math.max(G - h, 1), n = Math.min(G + h, U);
 		for (let r = t; r <= n; r++) e.add(r);
-		E && e.add(E.page);
-		for (let t of O) e.add(t.page);
+		D && e.add(D.page);
+		for (let t of k) e.add(t.page);
 		return Array.from(e).sort((e, t) => e - t);
 	}, [
-		W,
-		H,
-		E,
-		O
-	]), { pageSizes: me, renderedPages: q } = te({
-		pdf: V,
-		zoom: S,
-		rotation: w,
-		visiblePages: K,
-		canvasRefs: L
-	}), J = u(() => {
-		let e = new Set(K);
-		for (let t of q) e.add(t);
+		G,
+		U,
+		D,
+		k
+	]), { pageSizes: ye, renderedPages: J } = ne({
+		pdf: H,
+		zoom: C,
+		rotation: T,
+		visiblePages: q,
+		canvasRefs: B
+	}), Y = u(() => {
+		let e = new Set(q);
+		for (let t of J) e.add(t);
 		return Array.from(e).sort((e, t) => e - t);
-	}, [K, q]);
+	}, [q, J]);
 	n({
-		pdf: V,
-		currentPage: W,
-		goToPage: G,
-		setZoom: C,
-		setRotation: T,
+		pdf: H,
+		currentPage: G,
+		goToPage: K,
+		setZoom: w,
+		setRotation: E,
 		setFitMode: M
 	});
-	let he = r({
-		pdf: V,
-		zoom: S,
-		rotation: w,
-		mountedPages: J,
-		canvasRefs: L
-	}), { linkOverlays: ge, noteOverlays: _e } = a({
-		pdf: V,
-		zoom: S,
-		rotation: w,
-		mountedPages: J,
-		goToPage: G
+	let be = r({
+		pdf: H,
+		zoom: C,
+		rotation: T,
+		mountedPages: Y,
+		canvasRefs: B
+	}), { linkOverlays: xe, noteOverlays: Se } = ee({
+		pdf: H,
+		zoom: C,
+		rotation: T,
+		mountedPages: Y,
+		goToPage: K
 	});
 	l(() => {
 		if (!N) return;
@@ -98,16 +143,16 @@ var h = 2, g = ({ file: g, workerSrc: _, sidebar: se, toolbar: v, onChangeFile:
 			document.removeEventListener("click", e), document.removeEventListener("keydown", t);
 		};
 	}, [N]);
-	let { overlayRect: Y, searchOverlays: ve } = ne({
-		pdf: V,
-		highlight: E,
-		searchMatches: O,
-		zoom: S,
-		rotation: w
-	}), ye = c((e, t) => {
+	let { overlayRect: X, searchOverlays: Ce } = re({
+		pdf: H,
+		highlight: D,
+		searchMatches: k,
+		zoom: C,
+		rotation: T
+	}), we = c((e, t) => {
 		(!e.url || !i(e.url)) && (t.preventDefault(), e.url || e._handleClick());
-	}, []), X = d(null), Z = c((e, t) => {
-		X.current && clearTimeout(X.current);
+	}, []), Z = d(null), Te = c((e, t) => {
+		Z.current && clearTimeout(Z.current);
 		let n = t.clientY > window.innerHeight * .6;
 		P({
 			x: Math.min(t.clientX, window.innerWidth - 304),
@@ -117,196 +162,203 @@ var h = 2, g = ({ file: g, workerSrc: _, sidebar: se, toolbar: v, onChangeFile:
 			title: e.title
 		});
 	}, []), Q = c(() => {
-		X.current = setTimeout(() => P(null), 200);
+		Z.current = setTimeout(() => P(null), 200);
 	}, []), $ = c((e) => {
-		D({
+		O({
 			page: e.page,
 			pdfRect: e.pdfRect
-		}), G(e.page);
-	}, [D, G]), be = u(() => ({
-		pdf: V,
-		numPages: H,
-		zoom: S,
-		setZoom: C,
-		rotation: w,
-		setRotation: T,
-		currentPage: W,
-		goToPage: G,
-		containerRef: F,
-		canvasRefs: L,
-		file: g,
-		highlight: E,
-		setHighlight: D,
-		searchMatches: O,
-		setSearchMatches: k,
-		onChangeFile: y,
+		}), K(e.page);
+	}, [O, K]), Ee = u(() => ({
+		pdf: H,
+		numPages: U,
+		zoom: C,
+		setZoom: w,
+		rotation: T,
+		setRotation: E,
+		currentPage: G,
+		goToPage: K,
+		containerRef: R,
+		canvasRefs: B,
+		file: o,
+		highlight: D,
+		setHighlight: O,
+		searchMatches: k,
+		setSearchMatches: me,
+		onChangeFile: v,
 		sidebarCollapsed: A,
-		setSidebarCollapsed: fe,
+		setSidebarCollapsed: he,
 		fitMode: j,
-		setFitMode: M
+		setFitMode: M,
+		navigationLocked: !!x && !F
 	}), [
-		V,
 		H,
-		S,
-		w,
-		W,
+		U,
+		C,
+		T,
 		G,
-		g,
-		E,
-		O,
-		y,
+		K,
+		o,
+		D,
+		k,
+		v,
 		A,
-		j
+		j,
+		x,
+		F
 	]);
-	return /* @__PURE__ */ p(re, {
-		themeOverrides: ce,
-		defaultTheme: le,
-		children: /* @__PURE__ */ p(ie, {
-			language: ue,
+	return /* @__PURE__ */ p(ie, {
+		themeOverrides: ue,
+		defaultTheme: de,
+		children: /* @__PURE__ */ p(ae, {
+			language: fe,
 			children: /* @__PURE__ */ m(e.Provider, {
-				value: be,
+				value: Ee,
 				children: [/* @__PURE__ */ m("div", {
-					className: `${s.appLayout}${x ? ` ${x}` : ""}`,
-					style: de,
-					children: [v && /* @__PURE__ */ p("div", {
+					className: `${s.appLayout}${b ? ` ${b}` : ""}`,
+					style: pe,
+					children: [_ && /* @__PURE__ */ p("div", {
 						className: s.toolbar,
-						children: v
+						children: _
 					}), /* @__PURE__ */ m("div", {
 						className: s.body,
-						children: [se, /* @__PURE__ */ m("div", {
+						children: [le, /* @__PURE__ */ m("div", {
 							className: s.scrollContainer,
-							ref: F,
-							children: [pe && /* @__PURE__ */ p("div", { className: s.documentLoading }), Array.from({ length: H }, (e, t) => {
-								let n = q.has(t + 1), r = me[t], a = J.includes(t + 1);
-								return /* @__PURE__ */ m("div", {
-									className: s.pageWrapper,
-									ref: (e) => {
-										I.current[t] = e;
-									},
-									style: r ? {
-										width: r.width,
-										height: r.height
-									} : void 0,
-									children: [
-										r && !n && /* @__PURE__ */ p("div", {
-											className: s.pageSkeleton,
-											style: {
-												width: r.width,
-												height: r.height
-											}
-										}),
-										a && /* @__PURE__ */ m(oe, { children: [/* @__PURE__ */ p("canvas", {
-											className: s.pageCanvas,
-											ref: (e) => {
-												L.current[t] = e;
-											},
-											style: { display: n ? "block" : "none" }
-										}), /* @__PURE__ */ p("div", {
-											className: `textLayer ${s.textLayer}`,
-											ref: (e) => {
-												he.current[t] = e;
-											}
-										})] }),
-										ge.filter((e) => e.page === t + 1).map((e, t) => /* @__PURE__ */ p("a", {
-											className: s.linkOverlay,
-											href: e.url && i(e.url) ? e.url : "#",
-											target: "_blank",
-											rel: "noopener noreferrer",
-											style: {
-												left: e.x,
-												top: e.y,
-												width: e.width,
-												height: e.height
-											},
-											onClick: (t) => ye(e, t)
-										}, t)),
-										_e.filter((e) => e.page === t + 1).map((e, t) => e.subtype === "Text" ? /* @__PURE__ */ p("div", {
-											className: s.noteIconOverlay,
-											style: {
-												left: e.x,
-												top: e.y,
-												width: Math.max(e.width, 26),
-												height: Math.max(e.height, 26)
-											},
-											onMouseEnter: (t) => Z(e, t),
-											onMouseLeave: Q,
-											onClick: () => $(e),
-											children: /* @__PURE__ */ m("svg", {
-												width: "22",
-												height: "22",
-												viewBox: "0 0 12 12",
-												fill: "none",
-												"aria-hidden": "true",
-												children: [
-													/* @__PURE__ */ p("rect", {
-														x: "0.5",
-														y: "0.5",
-														width: "9",
-														height: "8",
-														rx: "1",
-														fill: "rgba(255,210,0,0.9)",
-														stroke: "rgba(160,120,0,0.7)",
-														strokeWidth: "1"
-													}),
-													/* @__PURE__ */ p("path", {
-														d: "M9.5 5.5v3l2.5-3z",
-														fill: "rgba(255,210,0,0.9)",
-														stroke: "rgba(160,120,0,0.7)",
-														strokeWidth: "1"
-													}),
-													/* @__PURE__ */ p("line", {
-														x1: "2",
-														y1: "3",
-														x2: "8",
-														y2: "3",
-														stroke: "rgba(90,60,0,0.8)",
-														strokeWidth: "1",
-														strokeLinecap: "round"
-													}),
-													/* @__PURE__ */ p("line", {
-														x1: "2",
-														y1: "5.5",
-														x2: "7",
-														y2: "5.5",
-														stroke: "rgba(90,60,0,0.8)",
-														strokeWidth: "1",
-														strokeLinecap: "round"
-													})
-												]
+							ref: R,
+							children: [
+								ve && /* @__PURE__ */ p("div", { className: s.documentLoading }),
+								Array.from({ length: U }, (e, t) => {
+									let n = J.has(t + 1), r = ye[t], ee = Y.includes(t + 1);
+									return /* @__PURE__ */ m("div", {
+										className: s.pageWrapper,
+										ref: (e) => {
+											z.current[t] = e;
+										},
+										style: r ? {
+											width: r.width,
+											height: r.height
+										} : void 0,
+										children: [
+											r && !n && /* @__PURE__ */ p("div", {
+												className: s.pageSkeleton,
+												style: {
+													width: r.width,
+													height: r.height
+												}
+											}),
+											ee && /* @__PURE__ */ m(se, { children: [/* @__PURE__ */ p("canvas", {
+												className: s.pageCanvas,
+												ref: (e) => {
+													B.current[t] = e;
+												},
+												style: { display: n ? "block" : "none" }
+											}), /* @__PURE__ */ p("div", {
+												className: `textLayer ${s.textLayer}`,
+												ref: (e) => {
+													be.current[t] = e;
+												}
+											})] }),
+											xe.filter((e) => e.page === t + 1).map((e, t) => /* @__PURE__ */ p("a", {
+												className: s.linkOverlay,
+												href: e.url && i(e.url) ? e.url : "#",
+												target: "_blank",
+												rel: "noopener noreferrer",
+												style: {
+													left: e.x,
+													top: e.y,
+													width: e.width,
+													height: e.height
+												},
+												onClick: (t) => we(e, t)
+											}, t)),
+											Se.filter((e) => e.page === t + 1).map((e, t) => e.subtype === "Text" ? /* @__PURE__ */ p("div", {
+												className: s.noteIconOverlay,
+												style: {
+													left: e.x,
+													top: e.y,
+													width: Math.max(e.width, 26),
+													height: Math.max(e.height, 26)
+												},
+												onMouseEnter: (t) => Te(e, t),
+												onMouseLeave: Q,
+												onClick: () => $(e),
+												children: /* @__PURE__ */ m("svg", {
+													width: "22",
+													height: "22",
+													viewBox: "0 0 12 12",
+													fill: "none",
+													"aria-hidden": "true",
+													children: [
+														/* @__PURE__ */ p("rect", {
+															x: "0.5",
+															y: "0.5",
+															width: "9",
+															height: "8",
+															rx: "1",
+															fill: "rgba(255,210,0,0.9)",
+															stroke: "rgba(160,120,0,0.7)",
+															strokeWidth: "1"
+														}),
+														/* @__PURE__ */ p("path", {
+															d: "M9.5 5.5v3l2.5-3z",
+															fill: "rgba(255,210,0,0.9)",
+															stroke: "rgba(160,120,0,0.7)",
+															strokeWidth: "1"
+														}),
+														/* @__PURE__ */ p("line", {
+															x1: "2",
+															y1: "3",
+															x2: "8",
+															y2: "3",
+															stroke: "rgba(90,60,0,0.8)",
+															strokeWidth: "1",
+															strokeLinecap: "round"
+														}),
+														/* @__PURE__ */ p("line", {
+															x1: "2",
+															y1: "5.5",
+															x2: "7",
+															y2: "5.5",
+															stroke: "rgba(90,60,0,0.8)",
+															strokeWidth: "1",
+															strokeLinecap: "round"
+														})
+													]
+												})
+											}, t) : /* @__PURE__ */ p("div", {
+												className: s.noteOverlay,
+												style: {
+													left: e.x,
+													top: e.y,
+													width: e.width,
+													height: e.height
+												},
+												onMouseEnter: (t) => Te(e, t),
+												onMouseLeave: Q,
+												onClick: () => $(e)
+											}, t)),
+											Ce.filter((e) => e.page === t + 1).map((e, t) => /* @__PURE__ */ p("div", {
+												className: s.searchMatchOverlay,
+												style: {
+													left: e.x,
+													top: e.y,
+													width: e.width,
+													height: e.height
+												}
+											}, t)),
+											D && X?.page === t + 1 && /* @__PURE__ */ p("div", {
+												className: s.highlightOverlay,
+												style: {
+													left: X.x,
+													top: X.y,
+													width: X.width,
+													height: X.height
+												}
 											})
-										}, t) : /* @__PURE__ */ p("div", {
-											className: s.noteOverlay,
-											style: {
-												left: e.x,
-												top: e.y,
-												width: e.width,
-												height: e.height
-											},
-											onMouseEnter: (t) => Z(e, t),
-											onMouseLeave: Q,
-											onClick: () => $(e)
-										}, t)),
-										ve.filter((e) => e.page === t + 1).map((e, t) => /* @__PURE__ */ p("div", {
-											className: s.searchMatchOverlay,
-											style: {
-												left: e.x,
-												top: e.y,
-												width: e.width,
-												height: e.height
-											}
-										}, t)),
-										E && Y?.page === t + 1 && /* @__PURE__ */ p("div", {
-											className: s.highlightOverlay,
-											style: {
-												left: Y.x,
-												top: Y.y,
-												width: Y.width,
-												height: Y.height
-											}
-										})
-									]
-								}, `${t}-${w}`);
-							})]
+										]
+									}, `${t}-${T}`);
+								}),
+								x && /* @__PURE__ */ p(ce, { hasRead: F })
+							]
 						})]
 					})]
 				}), N && /* @__PURE__ */ m("div", {
@@ -319,7 +371,7 @@ var h = 2, g = ({ file: g, workerSrc: _, sidebar: se, toolbar: v, onChangeFile:
 						top: N.y
 					},
 					onMouseEnter: () => {
-						X.current && clearTimeout(X.current);
+						Z.current && clearTimeout(Z.current);
 					},
 					onMouseLeave: Q,
 					onClick: (e) => e.stopPropagation(),