872 lines
28 KiB
TypeScript
872 lines
28 KiB
TypeScript
import React, {
|
|
Fragment,
|
|
useCallback,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from 'react';
|
|
import type { CSSProperties, JSX, MutableRefObject, RefObject } from 'react';
|
|
import {
|
|
GlobalWorkerOptions,
|
|
PasswordResponses,
|
|
getDocument,
|
|
} from 'pdfjs-dist';
|
|
import type {
|
|
PDFDocumentLoadingTask,
|
|
PDFDocumentProxy,
|
|
RenderTask,
|
|
} from 'pdfjs-dist/types/src/display/api';
|
|
import {
|
|
FAST_SCROLL_DWELL_THRESHOLD_MS,
|
|
FAST_SCROLL_VELOCITY_THRESHOLD,
|
|
MAX_PIXEL_RATIO,
|
|
RERENDER_DELTA,
|
|
SCROLL_VELOCITY_MIN_DELTA,
|
|
} from '../constants/preview';
|
|
GlobalWorkerOptions.workerSrc = new URL(
|
|
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
import.meta.url,
|
|
).toString();
|
|
|
|
interface PdfViewerProps {
|
|
src: string;
|
|
title?: string;
|
|
className?: string;
|
|
viewportRef?: RefObject<HTMLElement | null>;
|
|
}
|
|
|
|
type RenderStatus = 'idle' | 'loading' | 'ready' | 'error';
|
|
type ViewMode = 'fit-width' | 'contain';
|
|
|
|
interface PageDescriptor {
|
|
number: number;
|
|
width: number;
|
|
height: number;
|
|
scale: number;
|
|
}
|
|
|
|
interface RenderQueueRequest {
|
|
pageNumber: number;
|
|
resume: () => void;
|
|
cancel: () => void;
|
|
}
|
|
|
|
const getAvailableViewportSize = (viewportNode: Element, stackNode: Element) => {
|
|
const viewportStyle = window.getComputedStyle(viewportNode);
|
|
const viewportPaddingX = parseFloat(viewportStyle.paddingLeft || '0')
|
|
+ parseFloat(viewportStyle.paddingRight || '0');
|
|
const viewportPaddingY = parseFloat(viewportStyle.paddingTop || '0')
|
|
+ parseFloat(viewportStyle.paddingBottom || '0');
|
|
|
|
const stackStyle = window.getComputedStyle(stackNode);
|
|
const stackPaddingX = parseFloat(stackStyle.paddingLeft || '0')
|
|
+ parseFloat(stackStyle.paddingRight || '0');
|
|
const stackPaddingY = parseFloat(stackStyle.paddingTop || '0')
|
|
+ parseFloat(stackStyle.paddingBottom || '0');
|
|
|
|
const width = Math.max(0, viewportNode.clientWidth - viewportPaddingX - stackPaddingX);
|
|
const height = Math.max(0, viewportNode.clientHeight - viewportPaddingY - stackPaddingY);
|
|
return { width, height };
|
|
};
|
|
|
|
const resolvePdfWasmBaseUrl = (): string => {
|
|
if (typeof document !== 'undefined') {
|
|
const base = document.baseURI || (typeof window !== 'undefined' ? window.location.href : '/');
|
|
return new URL('./pdfjs/wasm/', base).toString();
|
|
}
|
|
if (typeof window !== 'undefined' && window.location) {
|
|
return new URL('./pdfjs/wasm/', window.location.href).toString();
|
|
}
|
|
return '/pdfjs/wasm/';
|
|
};
|
|
|
|
const PdfViewer = ({ src, title, className, viewportRef }: PdfViewerProps): JSX.Element => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [viewportWidth, setViewportWidth] = useState(0);
|
|
const [viewportHeight, setViewportHeight] = useState(0);
|
|
const [renderWidth, setRenderWidth] = useState(0);
|
|
const [status, setStatus] = useState<RenderStatus>('idle');
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
const [pages, setPages] = useState<PageDescriptor[]>([]);
|
|
const [pixelRatio, setPixelRatio] = useState(1);
|
|
const [viewMode, setViewMode] = useState<ViewMode>('contain');
|
|
const [visiblePages, setVisiblePages] = useState<Set<number>>(new Set());
|
|
const [scrollVelocity, setScrollVelocity] = useState(0);
|
|
const pdfRef = useRef<PDFDocumentProxy | null>(null);
|
|
const wasmUrlRef = useRef<string | null>(null);
|
|
const pageNodeMapRef = useRef<Map<number, HTMLElement>>(new Map());
|
|
const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
|
|
const renderQueueRef = useRef<RenderQueueRequest[]>([]);
|
|
const activeRendersRef = useRef(new Set<number>());
|
|
const maxConcurrentRendersRef = useRef(2);
|
|
const scrollVelocityRef = useRef({
|
|
lastPosition: 0,
|
|
lastTime: 0,
|
|
velocity: 0,
|
|
});
|
|
const scrollElementRef = useRef<HTMLElement | null>(null);
|
|
const [isEncrypted, setIsEncrypted] = useState(false);
|
|
const [passwordError, setPasswordError] = useState(false);
|
|
const [passwordCallback, setPasswordCallback] = useState<((password: string) => void) | null>(null);
|
|
const passwordInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const requestQueueFlush = useCallback(() => {
|
|
const queue = renderQueueRef.current;
|
|
while (queue.length > 0 && activeRendersRef.current.size < maxConcurrentRendersRef.current) {
|
|
const next = queue.pop();
|
|
if (!next) {
|
|
break;
|
|
}
|
|
if (activeRendersRef.current.has(next.pageNumber)) {
|
|
next.cancel();
|
|
continue;
|
|
}
|
|
activeRendersRef.current.add(next.pageNumber);
|
|
next.resume();
|
|
}
|
|
}, []);
|
|
|
|
const enqueueRender = useCallback((request: RenderQueueRequest) => {
|
|
renderQueueRef.current.push(request);
|
|
requestQueueFlush();
|
|
}, [requestQueueFlush]);
|
|
|
|
const releaseRenderSlot = useCallback((pageNumber: number) => {
|
|
if (activeRendersRef.current.delete(pageNumber)) {
|
|
requestQueueFlush();
|
|
}
|
|
}, [requestQueueFlush]);
|
|
|
|
const cancelRenderRequest = useCallback((pageNumber: number) => {
|
|
const queue = renderQueueRef.current;
|
|
const index = queue.findIndex((entry) => entry.pageNumber === pageNumber);
|
|
if (index >= 0) {
|
|
const [entry] = queue.splice(index, 1);
|
|
entry.cancel();
|
|
}
|
|
releaseRenderSlot(pageNumber);
|
|
}, [releaseRenderSlot]);
|
|
|
|
const handleRenderFinished = useCallback((pageNumber: number) => {
|
|
releaseRenderSlot(pageNumber);
|
|
}, [releaseRenderSlot]);
|
|
const focusTargetRef = useRef<{
|
|
ratioX: number;
|
|
ratioY: number;
|
|
pointerOffsetX: number;
|
|
pointerOffsetY: number;
|
|
} | null>(null);
|
|
const ensureWasmUrl = useCallback(() => {
|
|
if (!wasmUrlRef.current) {
|
|
wasmUrlRef.current = resolvePdfWasmBaseUrl();
|
|
}
|
|
return wasmUrlRef.current;
|
|
}, []);
|
|
|
|
useLayoutEffect(() => {
|
|
let frameId: number | null = null;
|
|
let observer: ResizeObserver | null = null;
|
|
|
|
const attach = () => {
|
|
const stackElement = containerRef.current;
|
|
const viewportElement = viewportRef?.current;
|
|
const sizingElement = stackElement?.parentElement;
|
|
|
|
if (!stackElement || !sizingElement) {
|
|
frameId = requestAnimationFrame(attach);
|
|
return;
|
|
}
|
|
|
|
const updateBounds = () => {
|
|
const { width, height } = getAvailableViewportSize(sizingElement, stackElement);
|
|
const nextWidth = Math.max(1, Math.round(width || 0));
|
|
const nextHeight = Math.max(1, Math.round(height || 0));
|
|
setViewportWidth((prev) => (prev === nextWidth ? prev : nextWidth));
|
|
setViewportHeight((prev) => (prev === nextHeight ? prev : nextHeight));
|
|
};
|
|
|
|
updateBounds();
|
|
|
|
observer = new ResizeObserver(() => {
|
|
updateBounds();
|
|
});
|
|
|
|
const observedNodes = new Set<Element>();
|
|
const observeNode = (node: Element | null) => {
|
|
if (!node || observedNodes.has(node)) {
|
|
return;
|
|
}
|
|
observer?.observe(node);
|
|
observedNodes.add(node);
|
|
};
|
|
|
|
observeNode(stackElement);
|
|
observeNode(sizingElement);
|
|
if (viewportElement) {
|
|
observeNode(viewportElement);
|
|
}
|
|
observeNode(stackElement.closest('.document-viewer__viewport'));
|
|
};
|
|
|
|
attach();
|
|
|
|
return () => {
|
|
if (frameId !== null) {
|
|
cancelAnimationFrame(frameId);
|
|
}
|
|
observer?.disconnect();
|
|
};
|
|
}, [viewportRef]);
|
|
|
|
useEffect(() => {
|
|
if (viewportWidth <= 0) {
|
|
return;
|
|
}
|
|
const desiredWidth = viewportWidth;
|
|
setRenderWidth((current) => {
|
|
if (current === 0 || desiredWidth > current + RERENDER_DELTA) {
|
|
return desiredWidth;
|
|
}
|
|
return current;
|
|
});
|
|
}, [viewportWidth]);
|
|
|
|
useEffect(() => {
|
|
const focus = focusTargetRef.current;
|
|
if (!focus) {
|
|
return;
|
|
}
|
|
const viewportElement = viewportRef?.current || containerRef.current?.closest('.document-viewer__viewport');
|
|
const stackElement = containerRef.current;
|
|
if (!viewportElement || !stackElement) {
|
|
focusTargetRef.current = null;
|
|
return;
|
|
}
|
|
const contentWidth = Math.max(1, stackElement.scrollWidth || stackElement.clientWidth);
|
|
const contentHeight = Math.max(1, stackElement.scrollHeight || stackElement.clientHeight);
|
|
const targetX = focus.ratioX * contentWidth;
|
|
const targetY = focus.ratioY * contentHeight;
|
|
const nextScrollLeft = Math.max(0, targetX - focus.pointerOffsetX);
|
|
const nextScrollTop = Math.max(0, targetY - focus.pointerOffsetY);
|
|
viewportElement.scrollTo({
|
|
left: nextScrollLeft,
|
|
top: nextScrollTop,
|
|
behavior: 'auto',
|
|
});
|
|
focusTargetRef.current = null;
|
|
}, [viewMode, viewportRef]);
|
|
|
|
useEffect(() => {
|
|
if (!src || renderWidth <= 0) {
|
|
return undefined;
|
|
}
|
|
|
|
let cancelled = false;
|
|
let loadingTask: PDFDocumentLoadingTask | null = null;
|
|
let activePdf: PDFDocumentProxy | null = null;
|
|
const wasmUrl = ensureWasmUrl();
|
|
|
|
const disposeActivePdf = () => {
|
|
if (activePdf) {
|
|
void activePdf.destroy();
|
|
if (pdfRef.current === activePdf) {
|
|
pdfRef.current = null;
|
|
}
|
|
activePdf = null;
|
|
}
|
|
};
|
|
|
|
if (pdfRef.current) {
|
|
void pdfRef.current.destroy();
|
|
pdfRef.current = null;
|
|
}
|
|
|
|
setPages([]);
|
|
setStatus('loading');
|
|
setErrorMessage(null);
|
|
const renderDocument = async () => {
|
|
try {
|
|
loadingTask = getDocument({
|
|
url: src,
|
|
wasmUrl,
|
|
});
|
|
loadingTask.onPassword = (callback, reason) => {
|
|
setIsEncrypted(true);
|
|
setPasswordCallback(() => callback);
|
|
if (reason === PasswordResponses.INCORRECT_PASSWORD) {
|
|
setPasswordError(true);
|
|
}
|
|
};
|
|
|
|
const pdf = await loadingTask.promise;
|
|
if (cancelled) {
|
|
await pdf.destroy();
|
|
return;
|
|
}
|
|
|
|
const ratio = Math.min(window.devicePixelRatio || 1, MAX_PIXEL_RATIO);
|
|
const descriptors: PageDescriptor[] = [];
|
|
for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
|
|
if (cancelled) {
|
|
break;
|
|
}
|
|
const page = await pdf.getPage(pageNumber);
|
|
if (cancelled) {
|
|
break;
|
|
}
|
|
const baseViewport = page.getViewport({ scale: 1 });
|
|
const desiredScale = Math.max(0.5, renderWidth / baseViewport.width);
|
|
const viewport = page.getViewport({ scale: desiredScale });
|
|
descriptors.push({
|
|
number: pageNumber,
|
|
width: viewport.width,
|
|
height: viewport.height,
|
|
scale: desiredScale,
|
|
});
|
|
}
|
|
|
|
if (cancelled) {
|
|
await pdf.destroy();
|
|
return;
|
|
}
|
|
|
|
activePdf = pdf;
|
|
pdfRef.current = pdf;
|
|
setPixelRatio(ratio);
|
|
setPages(descriptors);
|
|
setStatus('ready');
|
|
} catch (error) {
|
|
if (!cancelled) {
|
|
console.error('Failed to prepare PDF preview', error);
|
|
setStatus('error');
|
|
setErrorMessage('Unable to render PDF preview.');
|
|
}
|
|
}
|
|
};
|
|
|
|
renderDocument().catch((error) => {
|
|
console.error('Unhandled PDF render error', error);
|
|
setStatus('error');
|
|
setErrorMessage('Unable to render PDF preview.');
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
loadingTask?.destroy();
|
|
disposeActivePdf();
|
|
};
|
|
}, [ensureWasmUrl, renderWidth, src]);
|
|
|
|
const handlePasswordSubmit = useCallback((event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
if (passwordCallback && passwordInputRef.current) {
|
|
passwordCallback(passwordInputRef.current.value);
|
|
}
|
|
}, [passwordCallback]);
|
|
|
|
const viewerClasses = ['document-viewer__object', 'document-viewer__object--pdf', className]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
const statusMessage = status === 'error'
|
|
? (errorMessage || 'Unable to render PDF preview.')
|
|
: 'Preparing preview…';
|
|
const statusClasses = ['pdf-viewer__status', status === 'error' ? 'pdf-viewer__status--error' : null]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
const showStatus = status !== 'ready' || pages.length === 0;
|
|
const stackStyle = useMemo<CSSProperties>(() => ({
|
|
'--pdf-viewer-viewport-width': `${viewportWidth}px`,
|
|
'--pdf-viewer-viewport-height': `${viewportHeight}px`,
|
|
cursor: viewMode === 'fit-width' ? 'zoom-out' : 'zoom-in',
|
|
}), [viewportHeight, viewportWidth, viewMode]);
|
|
|
|
const toggleViewMode = useCallback(() => {
|
|
setViewMode((prev) => (prev === 'fit-width' ? 'contain' : 'fit-width'));
|
|
}, []);
|
|
|
|
const handlePageClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
|
|
const stack = containerRef.current;
|
|
const viewportElement = viewportRef?.current || stack?.closest('.document-viewer__viewport');
|
|
if (stack && viewportElement) {
|
|
const viewportRect = viewportElement.getBoundingClientRect();
|
|
const pointerOffsetX = event.clientX - viewportRect.left;
|
|
const pointerOffsetY = event.clientY - viewportRect.top;
|
|
const contentWidth = Math.max(1, stack.scrollWidth || stack.clientWidth);
|
|
const contentHeight = Math.max(1, stack.scrollHeight || stack.clientHeight);
|
|
const ratioX = (viewportElement.scrollLeft + pointerOffsetX) / contentWidth;
|
|
const ratioY = (viewportElement.scrollTop + pointerOffsetY) / contentHeight;
|
|
focusTargetRef.current = {
|
|
ratioX: Math.max(0, Math.min(1, ratioX)),
|
|
ratioY: Math.max(0, Math.min(1, ratioY)),
|
|
pointerOffsetX: Math.max(0, Math.min(viewportElement.clientWidth, pointerOffsetX)),
|
|
pointerOffsetY: Math.max(0, Math.min(viewportElement.clientHeight, pointerOffsetY)),
|
|
};
|
|
}
|
|
event.stopPropagation();
|
|
toggleViewMode();
|
|
}, [toggleViewMode, viewportRef]);
|
|
|
|
const handlePageVisibilityChange = useCallback((pageNumber: number, isVisible: boolean) => {
|
|
setVisiblePages((prev) => {
|
|
const alreadyVisible = prev.has(pageNumber);
|
|
if (alreadyVisible === isVisible) {
|
|
return prev;
|
|
}
|
|
const next = new Set(prev);
|
|
if (isVisible) {
|
|
next.add(pageNumber);
|
|
} else {
|
|
next.delete(pageNumber);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
const shouldRenderPage = useCallback((pageNumber: number) => {
|
|
if (visiblePages.size === 0) {
|
|
return pageNumber === 1;
|
|
}
|
|
for (const visiblePage of visiblePages) {
|
|
if (Math.abs(visiblePage - pageNumber) <= 2) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}, [visiblePages]);
|
|
|
|
const intersectionRoot = viewportRef?.current || null;
|
|
|
|
const updateScrollVelocityState = useCallback((nextVelocity: number) => {
|
|
setScrollVelocity((previous) => {
|
|
const wasFast = Math.abs(previous) > FAST_SCROLL_VELOCITY_THRESHOLD;
|
|
const isFast = Math.abs(nextVelocity) > FAST_SCROLL_VELOCITY_THRESHOLD;
|
|
if (!isFast && !wasFast && Math.abs(previous - nextVelocity) < SCROLL_VELOCITY_MIN_DELTA) {
|
|
return previous;
|
|
}
|
|
if (Math.abs(previous - nextVelocity) < SCROLL_VELOCITY_MIN_DELTA && wasFast === isFast) {
|
|
return previous;
|
|
}
|
|
return nextVelocity;
|
|
});
|
|
}, []);
|
|
|
|
const registerPageNode = useCallback((pageNumber: number, node: HTMLElement | null) => {
|
|
const map = pageNodeMapRef.current;
|
|
const existing = map.get(pageNumber);
|
|
if (existing === node) {
|
|
return;
|
|
}
|
|
if (existing) {
|
|
intersectionObserverRef.current?.unobserve(existing);
|
|
map.delete(pageNumber);
|
|
}
|
|
if (node) {
|
|
node.dataset.pageNumber = String(pageNumber);
|
|
map.set(pageNumber, node);
|
|
intersectionObserverRef.current?.observe(node);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let frame: number | null = null;
|
|
let observer: IntersectionObserver | null = null;
|
|
let scrollElement: HTMLElement | null = null;
|
|
let scrollListener: (() => void) | null = null;
|
|
|
|
const attachObserver = () => {
|
|
const stackElement = containerRef.current;
|
|
if (!stackElement) {
|
|
frame = requestAnimationFrame(attachObserver);
|
|
return;
|
|
}
|
|
const root = intersectionRoot
|
|
|| stackElement.closest('.document-viewer__viewport')
|
|
|| undefined;
|
|
scrollElement = (viewportRef?.current || stackElement.closest('.document-viewer__viewport')) ?? null;
|
|
scrollElementRef.current = scrollElement;
|
|
if (scrollElement && !scrollListener) {
|
|
scrollVelocityRef.current = {
|
|
lastPosition: scrollElement.scrollTop,
|
|
lastTime: performance.now(),
|
|
velocity: 0,
|
|
};
|
|
scrollListener = () => {
|
|
if (!scrollElement) {
|
|
return;
|
|
}
|
|
const now = performance.now();
|
|
const position = scrollElement.scrollTop;
|
|
const elapsed = now - scrollVelocityRef.current.lastTime;
|
|
if (elapsed <= 0) {
|
|
return;
|
|
}
|
|
const velocity = (position - scrollVelocityRef.current.lastPosition) / elapsed;
|
|
scrollVelocityRef.current = {
|
|
lastPosition: position,
|
|
lastTime: now,
|
|
velocity,
|
|
};
|
|
updateScrollVelocityState(velocity);
|
|
};
|
|
scrollElement.addEventListener('scroll', scrollListener, { passive: true });
|
|
}
|
|
observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
const attr = entry.target.getAttribute('data-page-number');
|
|
if (!attr) {
|
|
return;
|
|
}
|
|
const pageNumber = Number(attr);
|
|
if (!(pageNumber > 0)) {
|
|
return;
|
|
}
|
|
handlePageVisibilityChange(pageNumber, entry.isIntersecting);
|
|
});
|
|
}, {
|
|
root: root as Element | undefined,
|
|
rootMargin: '200px 0px',
|
|
threshold: 0.1,
|
|
});
|
|
intersectionObserverRef.current = observer;
|
|
pageNodeMapRef.current.forEach((node) => observer?.observe(node));
|
|
};
|
|
|
|
attachObserver();
|
|
|
|
return () => {
|
|
if (frame !== null) {
|
|
cancelAnimationFrame(frame);
|
|
}
|
|
observer?.disconnect();
|
|
if (intersectionObserverRef.current === observer) {
|
|
intersectionObserverRef.current = null;
|
|
}
|
|
if (scrollElement && scrollListener) {
|
|
scrollElement.removeEventListener('scroll', scrollListener);
|
|
}
|
|
if (scrollElementRef.current === scrollElement) {
|
|
scrollElementRef.current = null;
|
|
}
|
|
};
|
|
}, [handlePageVisibilityChange, intersectionRoot, updateScrollVelocityState, viewMode, viewportRef]);
|
|
|
|
const pageElements = useMemo(() => (
|
|
pages.map((page) => (
|
|
<Fragment key={`${page.number}-${Math.round(page.scale * 100)}-${Math.round(pixelRatio * 100)}`}>
|
|
<PdfPageCanvas
|
|
descriptor={page}
|
|
pdfRef={pdfRef}
|
|
pixelRatio={pixelRatio}
|
|
onPageClick={handlePageClick}
|
|
viewportWidth={viewportWidth}
|
|
viewportHeight={viewportHeight}
|
|
viewMode={viewMode}
|
|
shouldRender={shouldRenderPage(page.number)}
|
|
registerPageNode={registerPageNode}
|
|
enqueueRender={enqueueRender}
|
|
cancelRenderRequest={cancelRenderRequest}
|
|
onRenderFinished={handleRenderFinished}
|
|
scrollVelocity={scrollVelocity}
|
|
/>
|
|
</Fragment>
|
|
))
|
|
), [cancelRenderRequest, enqueueRender, handlePageClick, handleRenderFinished,
|
|
pages, pixelRatio, registerPageNode, scrollVelocity, shouldRenderPage, viewportHeight, viewportWidth,
|
|
viewMode]);
|
|
|
|
return (
|
|
<div className={viewerClasses}>
|
|
{isEncrypted && !pdfRef.current ? (
|
|
<div
|
|
className="pdf-viewer__password-container"
|
|
onClick={(e) => e.stopPropagation()}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
>
|
|
<form onSubmit={handlePasswordSubmit} className="pdf-viewer__password-form">
|
|
<div className="pdf-viewer__password-message">
|
|
This document is password protected.
|
|
</div>
|
|
<div className="pdf-viewer__password-input-group">
|
|
<input
|
|
ref={passwordInputRef}
|
|
type="password"
|
|
className="pdf-viewer__password-input"
|
|
placeholder="Enter password"
|
|
autoFocus
|
|
/>
|
|
<button type="submit" className="button button--primary">
|
|
Unlock
|
|
</button>
|
|
</div>
|
|
{passwordError ? (
|
|
<div className="pdf-viewer__password-error">
|
|
Incorrect password. Please try again.
|
|
</div>
|
|
) : null}
|
|
</form>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div
|
|
ref={containerRef}
|
|
className={`pdf-viewer__canvas-stack pdf-viewer__canvas-stack--${viewMode}`}
|
|
role="document"
|
|
aria-label={title || 'PDF document'}
|
|
style={stackStyle}
|
|
>
|
|
{pageElements}
|
|
</div>
|
|
{showStatus ? (
|
|
<div className={statusClasses}>
|
|
<div className="document-viewer__message">
|
|
{statusMessage}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface PdfPageCanvasProps {
|
|
descriptor: PageDescriptor;
|
|
pdfRef: MutableRefObject<PDFDocumentProxy | null>;
|
|
pixelRatio: number;
|
|
onPageClick: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
viewportWidth: number;
|
|
viewportHeight: number;
|
|
viewMode: ViewMode;
|
|
shouldRender: boolean;
|
|
registerPageNode: (pageNumber: number, node: HTMLElement | null) => void;
|
|
enqueueRender: (request: RenderQueueRequest) => void;
|
|
cancelRenderRequest: (pageNumber: number) => void;
|
|
onRenderFinished: (pageNumber: number) => void;
|
|
scrollVelocity: number;
|
|
}
|
|
|
|
function PdfPageCanvas({
|
|
descriptor,
|
|
pdfRef,
|
|
pixelRatio,
|
|
onPageClick,
|
|
viewportWidth,
|
|
viewportHeight,
|
|
viewMode,
|
|
shouldRender,
|
|
registerPageNode,
|
|
enqueueRender,
|
|
cancelRenderRequest,
|
|
onRenderFinished,
|
|
scrollVelocity,
|
|
}: PdfPageCanvasProps): JSX.Element {
|
|
const wrapperRef = useRef<HTMLDivElement | null>(null);
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const renderTaskRef = useRef<RenderTask | null>(null);
|
|
const hasRenderedRef = useRef(false);
|
|
const setWrapperNode = useCallback((node: HTMLDivElement | null) => {
|
|
wrapperRef.current = node;
|
|
registerPageNode(descriptor.number, node);
|
|
}, [descriptor.number, registerPageNode]);
|
|
const [canvasMounted, setCanvasMounted] = useState(false);
|
|
const [allowRender, setAllowRender] = useState(false);
|
|
|
|
const resetCanvas = useCallback(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) {
|
|
return;
|
|
}
|
|
canvas.width = 0;
|
|
canvas.height = 0;
|
|
const context = canvas.getContext('2d');
|
|
context?.clearRect(0, 0, context.canvas.width || 0, context.canvas.height || 0);
|
|
}, []);
|
|
|
|
const renderPage = useCallback(async () => {
|
|
if (renderTaskRef.current || hasRenderedRef.current) {
|
|
return;
|
|
}
|
|
const pdf = pdfRef.current;
|
|
const canvas = canvasRef.current;
|
|
if (!pdf || !canvas) {
|
|
onRenderFinished(descriptor.number);
|
|
return;
|
|
}
|
|
try {
|
|
const page = await pdf.getPage(descriptor.number);
|
|
const viewport = page.getViewport({ scale: descriptor.scale });
|
|
const qualityScale = 1;
|
|
const renderContext = canvas.getContext('2d');
|
|
if (!renderContext) {
|
|
return;
|
|
}
|
|
|
|
canvas.width = viewport.width * pixelRatio * qualityScale;
|
|
canvas.height = viewport.height * pixelRatio * qualityScale;
|
|
renderContext.setTransform(pixelRatio * qualityScale, 0, 0, pixelRatio * qualityScale, 0, 0);
|
|
|
|
const renderTask = page.render({
|
|
canvasContext: renderContext,
|
|
viewport,
|
|
canvas,
|
|
});
|
|
renderTaskRef.current = renderTask;
|
|
await renderTask.promise;
|
|
hasRenderedRef.current = true;
|
|
|
|
page.cleanup();
|
|
|
|
const wrapper = wrapperRef.current;
|
|
if (wrapper) {
|
|
wrapper.querySelector('.textLayer')?.remove();
|
|
}
|
|
} catch (error) {
|
|
if (error instanceof Error && error.name === 'RenderingCancelledException') {
|
|
return;
|
|
}
|
|
console.error('Failed to render PDF page', descriptor.number, error);
|
|
} finally {
|
|
renderTaskRef.current = null;
|
|
onRenderFinished(descriptor.number);
|
|
}
|
|
}, [descriptor.number, descriptor.scale, onRenderFinished, pdfRef, pixelRatio]);
|
|
|
|
const meetsVelocityRequirement = useMemo(() => {
|
|
if (!shouldRender) {
|
|
return true;
|
|
}
|
|
const absoluteVelocity = Math.abs(scrollVelocity);
|
|
if (absoluteVelocity <= FAST_SCROLL_VELOCITY_THRESHOLD) {
|
|
return true;
|
|
}
|
|
const estimatedMs = (descriptor.height + viewportHeight)
|
|
/ Math.max(absoluteVelocity, 0.001);
|
|
return estimatedMs >= FAST_SCROLL_DWELL_THRESHOLD_MS;
|
|
}, [descriptor.height, scrollVelocity, shouldRender, viewportHeight]);
|
|
|
|
useEffect(() => {
|
|
if (!canvasMounted) {
|
|
return undefined;
|
|
}
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) {
|
|
return undefined;
|
|
}
|
|
canvas.width = descriptor.width;
|
|
canvas.height = descriptor.height;
|
|
canvas.style.setProperty('aspect-ratio', `${descriptor.width} / ${descriptor.height}`);
|
|
const wrapperNode = wrapperRef.current;
|
|
return () => {
|
|
renderTaskRef.current?.cancel();
|
|
wrapperNode?.querySelector('.textLayer')?.remove();
|
|
};
|
|
}, [canvasMounted, descriptor.height, descriptor.width]);
|
|
|
|
useEffect(() => {
|
|
setCanvasMounted(false);
|
|
hasRenderedRef.current = false;
|
|
renderTaskRef.current?.cancel();
|
|
resetCanvas();
|
|
}, [descriptor.number, resetCanvas]);
|
|
|
|
useEffect(() => {
|
|
if (!shouldRender || !meetsVelocityRequirement) {
|
|
setAllowRender(false);
|
|
cancelRenderRequest(descriptor.number);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
const request: RenderQueueRequest = {
|
|
pageNumber: descriptor.number,
|
|
resume: () => {
|
|
if (cancelled) {
|
|
return;
|
|
}
|
|
setAllowRender(true);
|
|
},
|
|
cancel: () => {
|
|
cancelled = true;
|
|
setAllowRender(false);
|
|
},
|
|
};
|
|
enqueueRender(request);
|
|
return () => {
|
|
cancelled = true;
|
|
setAllowRender(false);
|
|
cancelRenderRequest(descriptor.number);
|
|
};
|
|
}, [cancelRenderRequest, descriptor.number, enqueueRender, meetsVelocityRequirement, shouldRender]);
|
|
|
|
useEffect(() => {
|
|
if (allowRender) {
|
|
setCanvasMounted((prev) => (prev ? prev : true));
|
|
return;
|
|
}
|
|
setCanvasMounted((prev) => {
|
|
if (!prev) {
|
|
return prev;
|
|
}
|
|
hasRenderedRef.current = false;
|
|
renderTaskRef.current?.cancel();
|
|
wrapperRef.current?.querySelector('.textLayer')?.remove();
|
|
resetCanvas();
|
|
return false;
|
|
});
|
|
}, [allowRender, resetCanvas]);
|
|
|
|
useEffect(() => {
|
|
if (!canvasMounted || !allowRender) {
|
|
return;
|
|
}
|
|
void renderPage();
|
|
}, [allowRender, canvasMounted, renderPage]);
|
|
|
|
const limitAxis: 'width' | 'height' = useMemo(() => {
|
|
if (viewMode === 'fit-width') {
|
|
return 'width';
|
|
}
|
|
const safeViewportWidth = Math.max(1, viewportWidth);
|
|
const safeViewportHeight = Math.max(1, viewportHeight);
|
|
const safePageWidth = Math.max(1, descriptor.width);
|
|
const safePageHeight = Math.max(1, descriptor.height);
|
|
const widthScale = safeViewportWidth / safePageWidth;
|
|
const heightScale = safeViewportHeight / safePageHeight;
|
|
return widthScale <= heightScale ? 'width' : 'height';
|
|
}, [descriptor.height, descriptor.width, viewMode, viewportHeight, viewportWidth]);
|
|
|
|
const wrapperClassName = useMemo(() => (
|
|
['pdf-viewer__page-wrapper',
|
|
limitAxis === 'width' ? 'pdf-viewer__page-wrapper--limit-width' : 'pdf-viewer__page-wrapper--limit-height',
|
|
].filter(Boolean).join(' ')
|
|
), [limitAxis]);
|
|
|
|
return (
|
|
<div
|
|
ref={setWrapperNode}
|
|
className={wrapperClassName}
|
|
data-page-number={descriptor.number}
|
|
style={{
|
|
aspectRatio: `${descriptor.width} / ${descriptor.height}`,
|
|
'--pdf-viewer-page-width': `${descriptor.width}px`,
|
|
'--pdf-viewer-page-height': `${descriptor.height}px`,
|
|
'--pdf-viewer-page-aspect': `${descriptor.width / descriptor.height}`,
|
|
}}
|
|
onClick={(event) => {
|
|
onPageClick(event);
|
|
}}
|
|
>
|
|
{canvasMounted ? (
|
|
<canvas
|
|
ref={canvasRef}
|
|
className="pdf-viewer__page"
|
|
aria-label={`Page ${descriptor.number}`}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PdfViewer;
|