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

pdfjs

Browse Source
This commit is contained in:
nils
2025-11-16 11:36:11 +01:00
parent 7e0768a09a
commit dae66703f2
17 changed files with 1110 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/detail/PreviewZoomOverlay.tsx
+93 -38
View File
@@ -1,11 +1,14 @@
import React, { CSSProperties, useEffect, useRef, useState } from 'react';
import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
import { clamp } from '../utils/math';
import PdfViewer from '../preview/PdfViewer';
type PreviewNavigator = {
url: string;
alt?: string;
contentType?: string | null;
pageNumber?: number | null;
canGoPrev?: boolean;
canGoNext?: boolean;
goPrev?: () => void;
@@ -20,6 +23,22 @@ interface PreviewZoomOverlayProps {
type NaturalSize = { width: number | null; height: number | null };
type FocusPoint = { xRatio: number; yRatio: number } | null;
type DisplayKind = 'image' | 'pdf';
const determineDisplayKind = (entry?: PreviewNavigator | null): DisplayKind => {
const type = entry?.contentType?.toLowerCase?.() || '';
if (type.includes('pdf')) {
return 'pdf';
}
if (type.startsWith('image/')) {
return 'image';
}
const url = entry?.url?.toLowerCase?.() || '';
if (url.endsWith('.pdf')) {
return 'pdf';
}
return 'image';
};
const noop = () => {};
@@ -35,7 +54,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
const [isBackdropVisible, setBackdropVisible] = useState(false);
const [displaySnapshot, setDisplaySnapshot] = useState<PreviewNavigator | null>(null);
const scrollRef = useRef<HTMLDivElement | null>(null);
const imageRef = useRef<HTMLImageElement | null>(null);
const mediaRef = useRef<HTMLImageElement | null>(null);
const focusRef = useRef<FocusPoint>(null);
const previouslyFocusedRef = useRef<HTMLElement | null>(null);
const visibilityTimerRef = useRef<number | null>(null);
@@ -47,6 +66,10 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
}
}, [display]);
const activeDisplay = open && display?.url ? display : displaySnapshot;
const displayKind = useMemo(() => determineDisplayKind(activeDisplay), [activeDisplay]);
const isPdfDisplay = displayKind === 'pdf';
useEffect(() => {
if (visibilityTimerRef.current) {
clearTimeout(visibilityTimerRef.current);
@@ -94,6 +117,9 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
}
}, []);
useEffect(() => {
}, [isPdfDisplay, open, activeDisplay?.url]);
useEffect(() => {
setIsNativeScale(false);
setNaturalSize({ width: null, height: null });
@@ -103,7 +129,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
scrollEl.scrollLeft = 0;
scrollEl.scrollTop = 0;
}
}, [open]);
}, [open, activeDisplay?.url, displayKind]);
useEffect(() => {
@@ -112,13 +138,13 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
}
const scrollEl = scrollRef.current;
const imageEl = imageRef.current;
if (!scrollEl || !imageEl) {
const mediaEl = mediaRef.current;
if (!scrollEl || !mediaEl) {
return;
}
const imageWidth = imageEl.naturalWidth || imageEl.clientWidth;
const imageHeight = imageEl.naturalHeight || imageEl.clientHeight;
const imageWidth = naturalSize.width || mediaEl.clientWidth;
const imageHeight = naturalSize.height || mediaEl.clientHeight;
if (!(imageWidth > 0 && imageHeight > 0)) {
return;
}
@@ -145,8 +171,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
previouslyFocusedRef.current = active instanceof HTMLElement ? active : null;
}, [open]);
const activeDisplay = open && display?.url ? display : displaySnapshot;
useEffect(() => {
if (!activeDisplay?.url) {
return;
@@ -222,10 +246,13 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
};
const toggleZoomAtPoint = (clientX: number, clientY: number) => {
const img = imageRef.current;
if (isPdfDisplay) {
return;
}
const media = mediaRef.current;
setIsNativeScale((current) => {
if (!current && img) {
const rect = img.getBoundingClientRect();
if (!current && media) {
const rect = media.getBoundingClientRect();
const xRatio = rect.width > 0 ? (clientX - rect.left) / rect.width : 0.5;
const yRatio = rect.height > 0 ? (clientY - rect.top) / rect.height : 0.5;
focusRef.current = {
@@ -239,22 +266,24 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
});
};
const handleImageClick = (event: React.MouseEvent<HTMLImageElement>) => {
const handleContentClick = (event: React.MouseEvent<HTMLElement>) => {
event.stopPropagation();
if (isPdfDisplay) {
return;
}
toggleZoomAtPoint(event.clientX ?? 0, event.clientY ?? 0);
};
if (!renderBackdrop || !activeDisplay?.url) {
return null;
}
const shouldRender = renderBackdrop && Boolean(activeDisplay?.url);
const effectiveDisplay = activeDisplay;
const navVisible = Boolean(effectiveDisplay?.canGoPrev || effectiveDisplay?.canGoNext);
const stageClassName = 'preview-zoom__stage';
const stageClassName = isPdfDisplay
? 'preview-zoom__stage preview-zoom__stage--pdf'
: 'preview-zoom__stage';
const containerClassName = [
'preview-zoom__scroll',
isNativeScale ? 'preview-zoom__scroll--native' : '',
isNativeScale ? 'preview-zoom__scroll--native' : null,
isPdfDisplay ? 'preview-zoom__scroll--pdf' : null,
]
.filter(Boolean)
.join(' ');
@@ -266,7 +295,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
.filter(Boolean)
.join(' ');
const imageStyle: CSSProperties = isNativeScale
const contentStyle: CSSProperties = isNativeScale
? {
cursor: 'zoom-out',
width: naturalSize.width ? `${naturalSize.width}px` : 'auto',
@@ -282,6 +311,13 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
touchAction: 'manipulation',
};
if (!shouldRender) {
return null;
}
const effectiveDisplay = activeDisplay;
const navVisible = Boolean(effectiveDisplay?.canGoPrev || effectiveDisplay?.canGoNext);
return createPortal(
(
<div
@@ -290,29 +326,48 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
aria-modal="true"
aria-label="Enlarged document preview"
onClick={onClose}
onKeyDown={handleKeyDown}
>
<div className={stageClassName} onKeyDown={handleKeyDown}>
<div
className={stageClassName}
onClick={(event) => {
if (event.target === event.currentTarget) {
onClose();
}
}}
>
<div
className={containerClassName}
ref={scrollRef}
tabIndex={-1}
onClick={(event) => event.stopPropagation()}
>
<img
src={effectiveDisplay.url}
alt={effectiveDisplay.alt || 'Document preview'}
className="preview-zoom__image"
ref={imageRef}
draggable={false}
onLoad={(event) => {
setNaturalSize({
width: event.currentTarget.naturalWidth || null,
height: event.currentTarget.naturalHeight || null,
});
}}
onClick={handleImageClick}
style={imageStyle}
/>
{isPdfDisplay ? (
<div className="preview-zoom__pdf">
<PdfViewer
src={effectiveDisplay.url}
title={effectiveDisplay.alt || 'Document preview'}
className="preview-zoom__pdf-viewer"
/>
</div>
) : (
<img
src={effectiveDisplay.url}
alt={effectiveDisplay.alt || 'Document preview'}
className="preview-zoom__image"
ref={(node) => {
mediaRef.current = node;
}}
draggable={false}
onLoad={(event) => {
setNaturalSize({
width: event.currentTarget.naturalWidth || null,
height: event.currentTarget.naturalHeight || null,
});
}}
onClick={handleContentClick}
style={contentStyle}
/>
)}
</div>
{navVisible ? (
<div className="preview-zoom__nav">