zemion/pdf-tools
1
0
Fork 0
Code Issues Pull Requests Releases Activity

mostly formatting, dependency fix

Browse Source
This commit is contained in:
zemion
2026-05-17 02:39:32 +02:00
parent a5dc70aabf
commit cf9a0dd0b7
32 changed files with 837 additions and 836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/PagePreviewModal.tsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useRef } from "react";
import type { PdfFile } from "../pdf/pdfTypes";
import * as pdfjsLib from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker?worker&url";
import React, { useEffect, useRef } from 'react';
import type { PdfFile } from '../pdf/pdfTypes';
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker?worker&url';
// pdf.js worker setup
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -43,28 +43,28 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
if (e.key === 'Escape') {
e.preventDefault();
onClose();
return;
}
if (e.key === "ArrowLeft" && canGoPrevious) {
if (e.key === 'ArrowLeft' && canGoPrevious) {
e.preventDefault();
onPrevious();
return;
}
if (e.key === "ArrowRight" && canGoNext) {
if (e.key === 'ArrowRight' && canGoNext) {
e.preventDefault();
onNext();
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, canGoPrevious, canGoNext, onPrevious, onNext, onClose]);
@@ -77,7 +77,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
try {
const canvas = canvasRef.current;
if (canvas) {
const ctx = canvas.getContext("2d");
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
@@ -102,7 +102,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
const scale = Math.min(
maxWidth / viewport.width,
maxHeight / viewport.height,
maxHeight / viewport.height
);
const scaledViewport = page.getViewport({ scale });
@@ -110,7 +110,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
const visibleCanvas = canvasRef.current;
if (!visibleCanvas) return;
const visibleCtx = visibleCanvas.getContext("2d");
const visibleCtx = visibleCanvas.getContext('2d');
if (!visibleCtx) return;
let canvasWidth = scaledViewport.width;
@@ -126,14 +126,15 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
visibleCanvas.width = canvasWidth;
visibleCanvas.height = canvasHeight;
const baseCanvas = document.createElement("canvas");
const baseCtx = baseCanvas.getContext("2d");
const baseCanvas = document.createElement('canvas');
const baseCtx = baseCanvas.getContext('2d');
if (!baseCtx) return;
baseCanvas.width = scaledViewport.width;
baseCanvas.height = scaledViewport.height;
const renderTask = page.render({
canvas: baseCanvas,
canvasContext: baseCtx,
viewport: scaledViewport,
});
@@ -161,7 +162,7 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
visibleCtx.drawImage(baseCanvas, 0, 0);
visibleCtx.restore();
} catch (e) {
console.error("Error rendering preview", e);
console.error('Error rendering preview', e);
}
})();
@@ -181,30 +182,30 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
<div
onClick={onClose}
style={{
position: "fixed",
position: 'fixed',
inset: 0,
background: "rgba(15, 23, 42, 0.8)",
background: 'rgba(15, 23, 42, 0.8)',
zIndex: 50,
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: "1rem",
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '1rem',
}}
>
<div
onClick={(e) => e.stopPropagation()}
style={{
position: "relative",
background: "#111827",
borderRadius: "0.75rem",
padding: "0.75rem",
maxWidth: "90vw",
maxHeight: "90vh",
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "0.5rem",
overflow: "visible",
position: 'relative',
background: '#111827',
borderRadius: '0.75rem',
padding: '0.75rem',
maxWidth: '90vw',
maxHeight: '90vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '0.5rem',
overflow: 'visible',
}}
>
{/* Previous page */}
@@ -216,22 +217,22 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
}}
disabled={!canGoPrevious}
style={{
position: "absolute",
position: 'absolute',
left: 0,
top: "50%",
transform: "translate(-50%, -50%)",
width: "2.5rem",
height: "2.5rem",
borderRadius: "999px",
border: "none",
background: canGoPrevious ? "#374151" : "#1f2937",
color: canGoPrevious ? "#e5e7eb" : "#6b7280",
cursor: canGoPrevious ? "pointer" : "default",
fontSize: "1.35rem",
top: '50%',
transform: 'translate(-50%, -50%)',
width: '2.5rem',
height: '2.5rem',
borderRadius: '999px',
border: 'none',
background: canGoPrevious ? '#374151' : '#1f2937',
color: canGoPrevious ? '#e5e7eb' : '#6b7280',
cursor: canGoPrevious ? 'pointer' : 'default',
fontSize: '1.35rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 2,
}}
title="Previous page (←)"
@@ -249,22 +250,22 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
}}
disabled={!canGoNext}
style={{
position: "absolute",
position: 'absolute',
right: 0,
top: "50%",
transform: "translate(50%, -50%)",
width: "2.5rem",
height: "2.5rem",
borderRadius: "999px",
border: "none",
background: canGoNext ? "#374151" : "#1f2937",
color: canGoNext ? "#e5e7eb" : "#6b7280",
cursor: canGoNext ? "pointer" : "default",
fontSize: "1.35rem",
top: '50%',
transform: 'translate(50%, -50%)',
width: '2.5rem',
height: '2.5rem',
borderRadius: '999px',
border: 'none',
background: canGoNext ? '#374151' : '#1f2937',
color: canGoNext ? '#e5e7eb' : '#6b7280',
cursor: canGoNext ? 'pointer' : 'default',
fontSize: '1.35rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 2,
}}
title="Next page (→)"
@@ -281,22 +282,22 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
onClose();
}}
style={{
position: "absolute",
position: 'absolute',
top: 0,
right: 0,
transform: "translate(50%, -50%)",
width: "2.25rem",
height: "2.25rem",
borderRadius: "999px",
border: "none",
background: "#374151",
color: "#e5e7eb",
cursor: "pointer",
fontSize: "1.2rem",
transform: 'translate(50%, -50%)',
width: '2.25rem',
height: '2.25rem',
borderRadius: '999px',
border: 'none',
background: '#374151',
color: '#e5e7eb',
cursor: 'pointer',
fontSize: '1.2rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 3,
}}
title="Close preview (Esc)"
@@ -308,14 +309,14 @@ const PagePreviewModal: React.FC<PagePreviewModalProps> = ({
<canvas
ref={canvasRef}
style={{
maxWidth: "100%",
maxHeight: "75vh",
background: "white",
borderRadius: "0.5rem",
maxWidth: '100%',
maxHeight: '75vh',
background: 'white',
borderRadius: '0.5rem',
}}
/>
<div style={{ color: "#e5e7eb", fontSize: "0.85rem" }}>
<div style={{ color: '#e5e7eb', fontSize: '0.85rem' }}>
{positionLabel} · Original page {pageIndex + 1} · Rot {rotation}°
</div>
</div>