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

cleanup

Browse Source
This commit is contained in:
nils
2025-11-16 21:08:07 +01:00
parent 4b9f74d5a8
commit 1f2c62241c
6 changed files with 82 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/detail/PreviewZoomOverlay.tsx
+45 -80
View File
@@ -1,31 +1,38 @@
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;
goNext?: () => void;
type DocumentLike = {
id?: string | number;
title?: string;
content_type?: string | null;
[key: string]: unknown;
};
interface PreviewZoomOverlayProps {
open?: boolean;
display?: PreviewNavigator | null;
onClose?: () => void;
document?: DocumentLike | null;
}
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 => {
type PreviewEntry = {
url: string;
alt?: string;
contentType?: string | null;
canGoPrev?: boolean;
canGoNext?: boolean;
goPrev?: () => void;
goNext?: () => void;
};
type DocumentLikeWithPreview = DocumentLike & { previewEntry?: PreviewEntry };
const determineDisplayKind = (entry?: PreviewEntry | null): DisplayKind => {
const type = entry?.contentType?.toLowerCase?.() || '';
if (type.includes('pdf')) {
return 'pdf';
@@ -44,15 +51,15 @@ const noop = () => {};
const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
open = false,
display = null,
onClose = noop,
document: overlayDocument = null,
}) => {
const portalTarget = document.body;
const [isNativeScale, setIsNativeScale] = useState(false);
const [naturalSize, setNaturalSize] = useState<NaturalSize>({ width: null, height: null });
const [renderBackdrop, setRenderBackdrop] = useState(false);
const [isBackdropVisible, setBackdropVisible] = useState(false);
const [displaySnapshot, setDisplaySnapshot] = useState<PreviewNavigator | null>(null);
const [documentSnapshot, setDocumentSnapshot] = useState<DocumentLikeWithPreview | null>(null);
const scrollRef = useRef<HTMLDivElement | null>(null);
const mediaRef = useRef<HTMLImageElement | null>(null);
const focusRef = useRef<FocusPoint>(null);
@@ -60,15 +67,20 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
const visibilityTimerRef = useRef<number | null>(null);
const displayTimerRef = useRef<number | null>(null);
useEffect(() => {
if (display?.url) {
setDisplaySnapshot(display);
}
}, [display]);
const currentDocument = overlayDocument as DocumentLikeWithPreview | null;
const activeDisplay = open && display?.url ? display : displaySnapshot;
const displayKind = useMemo(() => determineDisplayKind(activeDisplay), [activeDisplay]);
useEffect(() => {
if (currentDocument?.previewEntry?.url) {
setDocumentSnapshot(currentDocument);
}
}, [currentDocument]);
const activeDocument = open && currentDocument?.previewEntry?.url ? currentDocument : documentSnapshot;
const previewEntry = activeDocument?.previewEntry || null;
const displayKind = useMemo(() => determineDisplayKind(previewEntry), [previewEntry]);
const isPdfDisplay = displayKind === 'pdf';
const documentTitle = activeDocument?.title || undefined;
const effectiveAlt = previewEntry?.alt || documentTitle || 'Document preview';
useEffect(() => {
if (visibilityTimerRef.current) {
@@ -80,7 +92,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
displayTimerRef.current = null;
}
if (open && display?.url) {
if (open && previewEntry?.url) {
setRenderBackdrop(true);
displayTimerRef.current = requestAnimationFrame(() => {
displayTimerRef.current = requestAnimationFrame(() => {
@@ -106,7 +118,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
visibilityTimerRef.current = null;
}
};
}, [open, display?.url]);
}, [open, previewEntry?.url]);
useEffect(() => () => {
if (visibilityTimerRef.current) {
@@ -118,7 +130,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
}, []);
useEffect(() => {
}, [isPdfDisplay, open, activeDisplay?.url]);
}, [isPdfDisplay, open, previewEntry?.url]);
useEffect(() => {
setIsNativeScale(false);
@@ -129,7 +141,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
scrollEl.scrollLeft = 0;
scrollEl.scrollTop = 0;
}
}, [open, activeDisplay?.url, displayKind]);
}, [open, previewEntry?.url, displayKind]);
useEffect(() => {
@@ -172,7 +184,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
}, [open]);
useEffect(() => {
if (!activeDisplay?.url) {
if (!previewEntry?.url) {
return;
}
@@ -182,10 +194,10 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
scrollEl.scrollTop = 0;
}
focusRef.current = null;
}, [activeDisplay?.url]);
}, [previewEntry?.url]);
useEffect(() => {
if (!renderBackdrop || !activeDisplay?.url) {
if (!renderBackdrop || !previewEntry?.url) {
return undefined;
}
@@ -194,7 +206,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
});
return () => cancelAnimationFrame(frame);
}, [renderBackdrop, activeDisplay?.url]);
}, [renderBackdrop, previewEntry?.url]);
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
event.stopPropagation();
@@ -229,20 +241,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
return;
}
if (key === 'ArrowLeft') {
if (activeDisplay?.canGoPrev && activeDisplay?.goPrev) {
event.preventDefault();
activeDisplay.goPrev();
}
return;
}
if (key === 'ArrowRight') {
if (activeDisplay?.canGoNext && activeDisplay?.goNext) {
event.preventDefault();
activeDisplay.goNext();
}
}
};
const toggleZoomAtPoint = (clientX: number, clientY: number) => {
@@ -273,7 +271,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
toggleZoomAtPoint(event.clientX ?? 0, event.clientY ?? 0);
};
const shouldRender = renderBackdrop && Boolean(activeDisplay?.url);
const shouldRender = renderBackdrop && Boolean(previewEntry?.url);
const stageClassName = isPdfDisplay
? 'preview-zoom__stage preview-zoom__stage--pdf'
@@ -314,8 +312,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
return null;
}
const effectiveDisplay = activeDisplay;
const navVisible = Boolean(effectiveDisplay?.canGoPrev || effectiveDisplay?.canGoNext);
const effectiveDisplay = previewEntry;
return createPortal(
(
@@ -344,7 +341,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
<div className="preview-zoom__pdf">
<PdfViewer
src={effectiveDisplay.url}
title={effectiveDisplay.alt || 'Document preview'}
title={effectiveAlt}
className="preview-zoom__pdf-viewer"
viewportRef={scrollRef}
/>
@@ -352,7 +349,7 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
) : (
<img
src={effectiveDisplay.url}
alt={effectiveDisplay.alt || 'Document preview'}
alt={effectiveAlt}
className="preview-zoom__image"
ref={(node) => {
mediaRef.current = node;
@@ -369,38 +366,6 @@ const PreviewZoomOverlay: React.FC<PreviewZoomOverlayProps> = ({
/>
)}
</div>
{navVisible ? (
<div className="preview-zoom__nav">
<button
type="button"
className="preview-zoom__nav-button"
onClick={(event) => {
event.stopPropagation();
if (effectiveDisplay?.canGoPrev && effectiveDisplay?.goPrev) {
effectiveDisplay.goPrev();
}
}}
aria-label="Previous preview"
disabled={!effectiveDisplay?.canGoPrev}
>
<ArrowLeftIcon />
</button>
<button
type="button"
className="preview-zoom__nav-button"
onClick={(event) => {
event.stopPropagation();
if (effectiveDisplay?.canGoNext && effectiveDisplay?.goNext) {
effectiveDisplay.goNext();
}
}}
aria-label="Next preview"
disabled={!effectiveDisplay?.canGoNext}
>
<ArrowRightIcon />
</button>
</div>
) : null}
</div>
</div>
),