pdf-tsx 0.11.0 → 0.13.0

package/dist/es/components/PDFViewer.js

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

package/dist/es/components/PDFViewer.module.js

@@ -1,20 +1,27 @@
 var e = {
-	appLayout: "_appLayout_18euq_1",
-	body: "_body_18euq_9",
-	toolbar: "_toolbar_18euq_17",
-	scrollContainer: "_scrollContainer_18euq_29",
-	pageWrapper: "_pageWrapper_18euq_40",
-	pageCanvas: "_pageCanvas_18euq_45",
-	textLayer: "_textLayer_18euq_54",
-	markedContent: "_markedContent_18euq_80",
-	endOfContent: "_endOfContent_18euq_95",
-	selecting: "_selecting_18euq_104",
-	documentLoading: "_documentLoading_18euq_124",
-	spin: "_spin_18euq_1",
-	pageSkeleton: "_pageSkeleton_18euq_144",
-	highlightOverlay: "_highlightOverlay_18euq_173",
-	linkOverlay: "_linkOverlay_18euq_182",
-	searchMatchOverlay: "_searchMatchOverlay_18euq_189"
+	appLayout: "_appLayout_1xasy_1",
+	body: "_body_1xasy_9",
+	toolbar: "_toolbar_1xasy_17",
+	scrollContainer: "_scrollContainer_1xasy_29",
+	pageWrapper: "_pageWrapper_1xasy_40",
+	pageCanvas: "_pageCanvas_1xasy_45",
+	textLayer: "_textLayer_1xasy_54",
+	markedContent: "_markedContent_1xasy_80",
+	endOfContent: "_endOfContent_1xasy_95",
+	selecting: "_selecting_1xasy_104",
+	documentLoading: "_documentLoading_1xasy_124",
+	spin: "_spin_1xasy_1",
+	pageSkeleton: "_pageSkeleton_1xasy_144",
+	highlightOverlay: "_highlightOverlay_1xasy_173",
+	linkOverlay: "_linkOverlay_1xasy_182",
+	searchMatchOverlay: "_searchMatchOverlay_1xasy_189",
+	noteOverlay: "_noteOverlay_1xasy_197",
+	noteIconOverlay: "_noteIconOverlay_1xasy_204",
+	requireReadBanner: "_requireReadBanner_1xasy_221",
+	requireReadDone: "_requireReadDone_1xasy_245",
+	notePopover: "_notePopover_1xasy_249",
+	notePopoverTitle: "_notePopoverTitle_1xasy_262",
+	notePopoverContent: "_notePopoverContent_1xasy_269"
 };
 //#endregion
 export { e as default };