nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more pdfjs

Browse Source
This commit is contained in:
nils
2025-11-16 20:13:47 +01:00
parent dae66703f2
commit 4b9f74d5a8
7 changed files with 205 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/PanelManagerContext.tsx
-13
View File
@@ -166,19 +166,6 @@ export const PanelManagerProvider: React.FC<PanelManagerProviderProps> = ({ chil
if (panel === 'sidebar' && (action === 'opened' || action === 'resized') && !meetsThreshold && effectiveDetailOpen) {
closeDetailPanel();
}
const normalizedAction = action === 'resized'
? `${panel} resized to ${value}px`
: `${panel} ${action}`;
console.log(normalizedAction, {
sidebar: sidebarWidth > 0 ? `${sidebarWidth}px` : 'closed',
detail: `${detailWidth}px`,
freeSpace,
viewportWidth,
freeRatio,
minimalFreeRatio: MINIMAL_FREE_RATIO,
meetsThreshold,
});
}, [collapsed, closeDetailPanel, detailPanelOpen]);
const collapseSidebar = useCallback(() => {
frontend/src/detail/PreviewZoomOverlay.tsx
+1 -1
View File
@@ -267,7 +267,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
};
const handleContentClick = (event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation();
if (isPdfDisplay) {
return;
}
@@ -347,6 +346,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
src={effectiveDisplay.url}
title={effectiveDisplay.alt || 'Document preview'}
className="preview-zoom__pdf-viewer"
viewportRef={scrollRef}
/>
</div>
) : (
frontend/src/preview/DocumentViewerLayout.tsx
+6 -4
View File
@@ -1,4 +1,4 @@
import { useCallback, useMemo } from 'react';
import { useCallback, useMemo, useRef } from 'react';
import type { JSX } from 'react';
import DocumentInfoPanel from '../documents/DocumentInfoPanel';
import { DownloadIcon } from '../ui/icons';
@@ -62,6 +62,7 @@ const DocumentViewerLayout = ({
layoutMode = 'split',
}: DocumentViewerLayoutProps): JSX.Element => {
const isStacked = layoutMode === 'stacked';
const viewportRef = useRef<HTMLDivElement>(null);
const previewContent = useMemo(() => {
if (!document || !previewEntry?.url) {
@@ -95,6 +96,7 @@ const DocumentViewerLayout = ({
<PdfViewer
src={previewEntry.url}
title={documentTitle ? `Preview of ${documentTitle}` : undefined}
viewportRef={viewportRef}
/>
);
}
@@ -123,17 +125,17 @@ const DocumentViewerLayout = ({
</a>
</div>
);
}, [previewEntry, document]);
}, [document, previewEntry, viewportRef]);
const renderViewportPane = useCallback(() => (
<div className="document-viewer__viewport">
<div className="document-viewer__viewport" ref={viewportRef}>
{!previewEntry?.url ? (
<div className="document-viewer__message">{previewLoadingMessage}</div>
) : (
previewContent
)}
</div>
), [previewEntry?.url, previewLoadingMessage, previewContent]);
), [previewContent, previewEntry?.url, previewLoadingMessage, viewportRef]);
const viewportPane = renderViewportPane();
frontend/src/preview/DocumentViewerPanel.tsx
+1 -1
View File
@@ -271,7 +271,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
}
}, [hydrateDocument, document?.id]);
const panelRef = useRef<HTMLDivElement | HTMLFormElement | HTMLElement | null>(null);
const panelRef = useRef<HTMLDivElement | HTMLFormElement | HTMLElement | null>(null);
const isStackedLayout = useViewerLayoutMode(panelRef, document?.id);
const {
frontend/src/preview/PdfViewer.tsx
+169 -63
View File
@@ -7,7 +7,7 @@ import React, {
useRef,
useState,
} from 'react';
import type { JSX, MutableRefObject, RefObject } from 'react';
import type { CSSProperties, JSX, MutableRefObject, RefObject } from 'react';
import {
GlobalWorkerOptions,
getDocument,
@@ -17,7 +17,6 @@ import type {
PDFDocumentProxy,
RenderTask,
} from 'pdfjs-dist/types/src/display/api';
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer.mjs';
GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url,
@@ -27,9 +26,11 @@ 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;
@@ -42,6 +43,24 @@ const MIN_RENDER_WIDTH = 1200;
const MAX_RENDER_WIDTH = 2200;
const RERENDER_DELTA = 48;
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 : '/');
@@ -53,16 +72,25 @@ const resolvePdfWasmBaseUrl = (): string => {
return '/pdfjs/wasm/';
};
const PdfViewer = ({ src, title, className }: PdfViewerProps): JSX.Element => {
const PdfViewer = ({ src, title, className, viewportRef }: PdfViewerProps): JSX.Element => {
const containerRef = useRef<HTMLDivElement>(null);
const [viewportWidth, setViewportWidth] = useState(0);
const [viewportWidth, setViewportWidth] = useState(() => window.innerWidth);
const [viewportHeight, setViewportHeight] = useState(() => window.innerHeight);
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 pdfRef = useRef<PDFDocumentProxy | null>(null);
const wasmUrlRef = useRef<string | null>(null);
const focusTargetRef = useRef<{
ratioX: number;
ratioY: number;
pointerOffsetX: number;
pointerOffsetY: number;
} | null>(null);
const focusRatioRef = useRef<{ x: number; y: number } | null>(null);
const ensureWasmUrl = useCallback(() => {
if (!wasmUrlRef.current) {
wasmUrlRef.current = resolvePdfWasmBaseUrl();
@@ -71,45 +99,61 @@ const PdfViewer = ({ src, title, className }: PdfViewerProps): JSX.Element => {
}, []);
useLayoutEffect(() => {
const container = containerRef.current;
if (!container) {
return undefined;
}
let frameId: number | null = null;
let observer: ResizeObserver | null = null;
const updateWidth = () => {
const measurementTarget = (
container.closest('.document-viewer__viewport') as HTMLElement | null
) || container.parentElement || container;
const nextWidth = Math.max(1, Math.round(measurementTarget.clientWidth));
setViewportWidth((prev) => (prev === nextWidth ? prev : nextWidth));
const attach = () => {
const stackElement = containerRef.current;
const viewportElement = viewportRef?.current;
if (!stackElement || !viewportElement) {
frameId = requestAnimationFrame(attach);
return;
}
const updateBounds = () => {
const { width, height } = getAvailableViewportSize(viewportElement, 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(stackElement.parentElement);
observeNode(viewportElement);
observeNode(stackElement.closest('.document-viewer__viewport'));
};
updateWidth();
attach();
const observer = new ResizeObserver(() => {
updateWidth();
});
observer.observe(container);
const parent = container.parentElement;
if (parent) {
observer.observe(parent);
}
const viewportNode = container.closest('.document-viewer__viewport') as HTMLElement | null;
if (viewportNode) {
observer.observe(viewportNode);
}
return () => observer.disconnect();
}, []);
return () => {
if (frameId !== null) {
cancelAnimationFrame(frameId);
}
observer?.disconnect();
};
}, [viewportRef]);
useEffect(() => {
if (viewportWidth <= 0) {
return;
}
const desiredWidth = Math.min(
MAX_RENDER_WIDTH,
Math.max(viewportWidth, MIN_RENDER_WIDTH),
);
const desiredWidth = Math.min(MAX_RENDER_WIDTH, Math.max(viewportWidth, MIN_RENDER_WIDTH));
setRenderWidth((current) => {
if (current === 0 || desiredWidth > current + RERENDER_DELTA) {
return desiredWidth;
@@ -118,6 +162,31 @@ const PdfViewer = ({ src, title, className }: PdfViewerProps): JSX.Element => {
});
}, [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;
@@ -146,6 +215,7 @@ const PdfViewer = ({ src, title, className }: PdfViewerProps): JSX.Element => {
setPages([]);
setStatus('loading');
setErrorMessage(null);
console.log('[PdfViewer] rendering pages', { renderWidth, mode: viewMode, src });
const renderDocument = async () => {
try {
@@ -223,6 +293,36 @@ const PdfViewer = ({ src, title, className }: PdfViewerProps): JSX.Element => {
.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`,
}), [viewportHeight, viewportWidth]);
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 pageElements = useMemo(() => (
pages.map((page) => (
@@ -232,26 +332,21 @@ const PdfViewer = ({ src, title, className }: PdfViewerProps): JSX.Element => {
pdfRef={pdfRef}
pixelRatio={pixelRatio}
rootRef={containerRef}
viewportRef={viewportRef}
onPageClick={handlePageClick}
/>
</Fragment>
))
), [pages, pixelRatio]);
const handleCanvasStackClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
const target = event.target as HTMLElement;
if (target.closest('.pdf-viewer__page-wrapper')) {
event.stopPropagation();
}
}, []);
), [handlePageClick, pages, pixelRatio, viewportRef]);
return (
<div className={viewerClasses}>
<div
ref={containerRef}
className="pdf-viewer__canvas-stack"
className={`pdf-viewer__canvas-stack pdf-viewer__canvas-stack--${viewMode}`}
role="document"
aria-label={title || 'PDF document'}
onClick={handleCanvasStackClick}
style={stackStyle}
>
{pageElements}
</div>
@@ -271,6 +366,8 @@ interface PdfPageCanvasProps {
pdfRef: MutableRefObject<PDFDocumentProxy | null>;
pixelRatio: number;
rootRef: RefObject<HTMLDivElement>;
viewportRef?: RefObject<HTMLElement | null>;
onPageClick: (event: React.MouseEvent<HTMLDivElement>) => void;
}
function PdfPageCanvas({
@@ -278,12 +375,13 @@ function PdfPageCanvas({
pdfRef,
pixelRatio,
rootRef,
viewportRef,
onPageClick,
}: PdfPageCanvasProps): JSX.Element {
const wrapperRef = useRef<HTMLDivElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const renderTaskRef = useRef<RenderTask | null>(null);
const hasRenderedRef = useRef(false);
const textLayerBuilderRef = useRef<TextLayerBuilder | null>(null);
const renderPage = useCallback(async () => {
if (renderTaskRef.current || hasRenderedRef.current) {
@@ -311,14 +409,7 @@ function PdfPageCanvas({
const wrapper = wrapperRef.current;
if (wrapper) {
textLayerBuilderRef.current?.cancel();
const textLayerBuilder = new TextLayerBuilder({
pdfPage: page,
});
textLayerBuilderRef.current = textLayerBuilder;
wrapper.querySelector('.textLayer')?.remove();
wrapper.appendChild(textLayerBuilder.div);
await textLayerBuilder.render({ viewport });
}
} catch (error) {
console.error('Failed to render PDF page', descriptor.number, error);
@@ -332,40 +423,55 @@ function PdfPageCanvas({
if (!canvas) {
return undefined;
}
canvas.style.width = '100%';
canvas.style.height = 'auto';
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();
textLayerBuilderRef.current?.cancel();
wrapperNode?.querySelector('.textLayer')?.remove();
};
}, [descriptor.height, descriptor.width]);
useEffect(() => {
const node = canvasRef.current;
if (!node) {
const target = wrapperRef.current;
if (!target) {
return undefined;
}
const root = rootRef.current || undefined;
const root = viewportRef?.current
|| rootRef.current?.closest?.('.document-viewer__viewport') as HTMLElement | null
|| undefined;
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
void renderPage();
console.log('[PdfViewer] intersection', {
page: descriptor.number,
isIntersecting: entry.isIntersecting,
ratio: entry.intersectionRatio,
});
if (!entry.isIntersecting || hasRenderedRef.current) {
return;
}
console.log('[PdfViewer] rendering page', descriptor.number);
void renderPage();
});
}, {
root,
rootMargin: '200px 0px',
threshold: 0.1,
});
observer.observe(node);
console.log('[PdfViewer] observing page', descriptor.number, { rootMargin: '200px 0px', threshold: 0.1 });
observer.observe(target);
return () => observer.disconnect();
}, [renderPage, rootRef]);
}, [renderPage, rootRef, viewportRef]);
return (
<div ref={wrapperRef} className="pdf-viewer__page-wrapper">
<div
ref={wrapperRef}
className="pdf-viewer__page-wrapper"
onClick={(event) => {
onPageClick(event);
}}
>
<canvas
ref={canvasRef}
className="pdf-viewer__page"
frontend/src/styles/documents/viewer.css
+19 -5
View File
@@ -10,7 +10,6 @@
flex: 1;
min-height: 0;
display: flex;
padding: 0;
overflow: auto;
}
@@ -36,7 +35,7 @@
align-items: stretch;
gap: 1rem;
min-height: 0;
padding: 0.25rem 1rem 1rem;
padding: 0 1rem 0.5rem;
}
.document-viewer--stacked {
@@ -382,7 +381,7 @@
max-height: 100%;
grid-area: viewport;
background: var(--surface-subtle);
padding: 0.75rem;
--pdf-viewer-stack-padding: 0.75rem;
}
.document-viewer__object {
@@ -435,13 +434,23 @@
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
gap: var(--pdf-viewer-stack-padding, 0);
align-items: center;
--pdf-viewer-viewport-width: 100vw;
--pdf-viewer-viewport-height: 100vh;
padding: var(--pdf-viewer-stack-padding, 0);
width: 100%;
box-sizing: border-box;
}
.pdf-viewer__page-wrapper {
position: relative;
width: min(100%, 48rem);
}
.pdf-viewer__canvas-stack--contain .pdf-viewer__page {
width: auto;
max-width: min(100%, var(--pdf-viewer-viewport-width, 100vw));
max-height: var(--pdf-viewer-viewport-height, 100vh);
}
.pdf-viewer__page {
@@ -512,3 +521,8 @@
.document-viewer__summary-tab-content {
padding-top: 0.5rem;
}
.pdf-viewer__page-wrapper--contain .pdf-viewer__page {
width: auto;
max-width: 100vw;
max-height: 100vh;
}
frontend/src/styles/preview/preview-zoom.css
+9 -1
View File
@@ -55,6 +55,12 @@
height: 100%;
max-width: none;
max-height: none;
padding: 0;
box-sizing: border-box;
overflow: auto;
align-items: flex-start;
justify-content: center;
--pdf-viewer-stack-padding: 2rem;
}
.preview-zoom__scroll:focus {
@@ -126,7 +132,9 @@
.preview-zoom__pdf {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
align-items: flex-start;
}
.preview-zoom__pdf-viewer {