feat: Enhance PDF tools with new reorder and watermark removal functionalities
- Added tests for rotating PDFs, removing watermarks, and reordering pages in the backend. - Implemented frontend logic to read page counts from uploaded PDFs and validate page orders. - Updated internationalization files to include new strings for reorder and watermark removal features. - Improved user feedback during page count reading and validation in the Reorder PDF component. - Ensured that the reorder functionality requires a complete permutation of pages.
This commit is contained in:
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { ArrowUpDown } from 'lucide-react';
|
||||
import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
|
||||
import pdfWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
@@ -11,10 +13,15 @@ import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
import { useFileStore } from '@/stores/fileStore';
|
||||
|
||||
GlobalWorkerOptions.workerSrc = pdfWorker;
|
||||
|
||||
export default function ReorderPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [pageOrder, setPageOrder] = useState('');
|
||||
const [pageCount, setPageCount] = useState<number | null>(null);
|
||||
const [pageCountError, setPageCountError] = useState<string | null>(null);
|
||||
const [isReadingPageCount, setIsReadingPageCount] = useState(false);
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
@@ -38,13 +45,130 @@ export default function ReorderPdf() {
|
||||
if (storeFile) { selectFile(storeFile); clearStoreFile(); }
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let loadingTask: ReturnType<typeof getDocument> | null = null;
|
||||
|
||||
async function detectPageCount(selectedFile: File) {
|
||||
setIsReadingPageCount(true);
|
||||
setPageCount(null);
|
||||
setPageCountError(null);
|
||||
|
||||
try {
|
||||
const data = new Uint8Array(await selectedFile.arrayBuffer());
|
||||
loadingTask = getDocument({ data });
|
||||
const pdf = await loadingTask.promise;
|
||||
|
||||
if (!cancelled) {
|
||||
setPageCount(pdf.numPages);
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setPageCountError(t('tools.reorderPdf.pageCountFailed'));
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setIsReadingPageCount(false);
|
||||
}
|
||||
void loadingTask?.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
if (!file) {
|
||||
setPageCount(null);
|
||||
setPageCountError(null);
|
||||
setIsReadingPageCount(false);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
void detectPageCount(file);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
void loadingTask?.destroy();
|
||||
};
|
||||
}, [file, t]);
|
||||
|
||||
const getPageOrderError = (): string | null => {
|
||||
if (!pageOrder.trim()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isReadingPageCount) {
|
||||
return t('tools.reorderPdf.readingPageCount');
|
||||
}
|
||||
|
||||
if (pageCountError) {
|
||||
return pageCountError;
|
||||
}
|
||||
|
||||
if (pageCount === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const parts = pageOrder
|
||||
.split(',')
|
||||
.map((part) => part.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
if (parts.length === 0 || parts.some((part) => !/^\d+$/.test(part))) {
|
||||
return t('tools.reorderPdf.orderInvalidFormat');
|
||||
}
|
||||
|
||||
const values = parts.map((part) => Number(part));
|
||||
const outOfRange = [...new Set(values.filter((page) => page < 1 || page > pageCount))];
|
||||
|
||||
const seen = new Set<number>();
|
||||
const duplicates: number[] = [];
|
||||
for (const page of values) {
|
||||
if (seen.has(page) && !duplicates.includes(page)) {
|
||||
duplicates.push(page);
|
||||
}
|
||||
seen.add(page);
|
||||
}
|
||||
|
||||
const missing: number[] = [];
|
||||
for (let page = 1; page <= pageCount; page += 1) {
|
||||
if (!seen.has(page)) {
|
||||
missing.push(page);
|
||||
}
|
||||
}
|
||||
|
||||
if (outOfRange.length === 0 && duplicates.length === 0 && missing.length === 0 && values.length === pageCount) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const details: string[] = [];
|
||||
if (outOfRange.length > 0) {
|
||||
details.push(t('tools.reorderPdf.orderOutOfRange', { pages: outOfRange.join(', ') }));
|
||||
}
|
||||
if (missing.length > 0) {
|
||||
details.push(t('tools.reorderPdf.orderMissingPages', { pages: missing.join(', ') }));
|
||||
}
|
||||
if (duplicates.length > 0) {
|
||||
details.push(t('tools.reorderPdf.orderDuplicatePages', { pages: duplicates.join(', ') }));
|
||||
}
|
||||
|
||||
return `${t('tools.reorderPdf.orderMustIncludeAllPages', { count: pageCount })} ${details.join(' ')}`.trim();
|
||||
};
|
||||
|
||||
const pageOrderError = getPageOrderError();
|
||||
const canSubmit = Boolean(file && pageOrder.trim() && !pageOrderError && !isUploading);
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!pageOrder.trim()) return;
|
||||
if (!canSubmit) return;
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => { reset(); setPhase('upload'); setPageOrder(''); };
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
setPageOrder('');
|
||||
setPageCount(null);
|
||||
setPageCountError(null);
|
||||
setIsReadingPageCount(false);
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.reorderPdf.title'),
|
||||
@@ -96,8 +220,23 @@ export default function ReorderPdf() {
|
||||
<p className="mt-2 text-xs text-slate-400 dark:text-slate-500">
|
||||
{t('tools.reorderPdf.orderHint')}
|
||||
</p>
|
||||
{isReadingPageCount && (
|
||||
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
{t('tools.reorderPdf.readingPageCount')}
|
||||
</p>
|
||||
)}
|
||||
{!isReadingPageCount && pageCount !== null && (
|
||||
<p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
|
||||
{t('tools.reorderPdf.pageCount', { count: pageCount })}
|
||||
</p>
|
||||
)}
|
||||
{pageOrderError && (
|
||||
<div className="mt-3 rounded-xl bg-red-50 p-3 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{pageOrderError}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button onClick={handleUpload} disabled={!pageOrder.trim()}
|
||||
<button onClick={handleUpload} disabled={!canSubmit}
|
||||
className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{t('tools.reorderPdf.shortDesc')}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user