865 lines
25 KiB
TypeScript
865 lines
25 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import Layout from './components/Layout';
|
|
import FileLoader from './components/FileLoader';
|
|
import ReorderPanel from './components/ReorderPanel';
|
|
import ActionsPanel from './components/ActionsPanel';
|
|
import PagePreviewModal from './components/PagePreviewModal';
|
|
import { PDFDocument } from 'pdf-lib';
|
|
import type { PageRef, PdfFile, SplitResult } from './pdf/pdfTypes';
|
|
import {
|
|
loadPdfFromFile,
|
|
mergePdfFiles,
|
|
splitIntoSinglePages,
|
|
exportPages,
|
|
} from './pdf/pdfService';
|
|
import {
|
|
generateThumbnailsProgressive,
|
|
generateThumbnailsWithRotationsProgressive,
|
|
} from './pdf/pdfThumbnailService';
|
|
|
|
const THUMBNAIL_MAX_HEIGHT = 150;
|
|
const THUMBNAIL_MAX_WIDTH = 140;
|
|
const THUMBNAIL_CONCURRENCY = 3;
|
|
|
|
function createPageRefId(): string {
|
|
return Math.random().toString(36).slice(2);
|
|
}
|
|
|
|
function createInitialPageRefs(pageCount: number): PageRef[] {
|
|
return Array.from({ length: pageCount }, (_, sourcePageIndex) => ({
|
|
id: createPageRefId(),
|
|
sourcePageIndex,
|
|
rotation: 0,
|
|
}));
|
|
}
|
|
|
|
function normalizeRotation(rotation: number | undefined): number {
|
|
return (((rotation ?? 0) % 360) + 360) % 360;
|
|
}
|
|
|
|
function thumbnailCacheKey(
|
|
pdfId: string,
|
|
sourcePageIndex: number,
|
|
rotation: number
|
|
): string {
|
|
return [
|
|
pdfId,
|
|
sourcePageIndex,
|
|
normalizeRotation(rotation),
|
|
THUMBNAIL_MAX_WIDTH,
|
|
THUMBNAIL_MAX_HEIGHT,
|
|
].join(':');
|
|
}
|
|
|
|
function isEditableKeyboardTarget(target: EventTarget | null): boolean {
|
|
if (!(target instanceof HTMLElement)) return false;
|
|
|
|
const tagName = target.tagName.toLowerCase();
|
|
return (
|
|
target.isContentEditable ||
|
|
tagName === 'input' ||
|
|
tagName === 'textarea' ||
|
|
tagName === 'select'
|
|
);
|
|
}
|
|
|
|
const App: React.FC = () => {
|
|
const [pdf, setPdf] = useState<PdfFile | null>(null);
|
|
const [isBusy, setIsBusy] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const [pages, setPages] = useState<PageRef[]>([]);
|
|
const [reorderThumbnails, setReorderThumbnails] = useState<Record<string, string>>({});
|
|
|
|
const [selectedPageIds, setSelectedPageIds] = useState<string[]>([]);
|
|
const [lastSelectedVisualIndex, setLastSelectedVisualIndex] = useState<number | null>(null);
|
|
|
|
const [splitResults, setSplitResults] = useState<SplitResult[]>([]);
|
|
const [subsetUrl, setSubsetUrl] = useState<string | null>(null);
|
|
const [subsetFilename, setSubsetFilename] = useState<string | null>(null);
|
|
const [exportUrl, setExportUrl] = useState<string | null>(null);
|
|
const [exportFilename, setExportFilename] = useState<string | null>(null);
|
|
|
|
const [previewPageId, setPreviewPageId] = useState<string | null>(null);
|
|
|
|
const [pendingFile, setPendingFile] = useState<File | null>(null);
|
|
const [showMergeOptions, setShowMergeOptions] = useState(false);
|
|
const [mergeMode, setMergeMode] = useState<'overwrite' | 'append' | 'insertAt'>('append');
|
|
const [mergeInsertAt, setMergeInsertAt] = useState<string>('');
|
|
|
|
const thumbnailCacheRef = useRef<Map<string, string>>(new Map());
|
|
const latestPagesRef = useRef<PageRef[]>([]);
|
|
const previousPageRotationsRef = useRef<Map<string, number>>(new Map());
|
|
|
|
const resetGeneratedUrls = () => {
|
|
if (subsetUrl) {
|
|
URL.revokeObjectURL(subsetUrl);
|
|
setSubsetUrl(null);
|
|
setSubsetFilename(null);
|
|
}
|
|
|
|
if (exportUrl) {
|
|
URL.revokeObjectURL(exportUrl);
|
|
setExportUrl(null);
|
|
setExportFilename(null);
|
|
}
|
|
};
|
|
|
|
const resetWorkspaceState = () => {
|
|
setSplitResults([]);
|
|
setSelectedPageIds([]);
|
|
setLastSelectedVisualIndex(null);
|
|
resetGeneratedUrls();
|
|
setReorderThumbnails({});
|
|
thumbnailCacheRef.current.clear();
|
|
previousPageRotationsRef.current.clear();
|
|
latestPagesRef.current = [];
|
|
setPages([]);
|
|
setPreviewPageId(null);
|
|
};
|
|
|
|
const loadFileAsNew = async (file: File) => {
|
|
setError(null);
|
|
resetWorkspaceState();
|
|
|
|
setIsBusy(true);
|
|
try {
|
|
const loaded = await loadPdfFromFile(file);
|
|
const initialPages = createInitialPageRefs(loaded.pageCount);
|
|
|
|
setPdf(loaded);
|
|
setPages(initialPages);
|
|
latestPagesRef.current = initialPages;
|
|
} catch (e) {
|
|
console.error(e);
|
|
setError('Failed to load PDF (see console).');
|
|
} finally {
|
|
setIsBusy(false);
|
|
}
|
|
};
|
|
|
|
const handleFileLoaded = (file: File) => {
|
|
if (!pdf || pages.length === 0) {
|
|
void loadFileAsNew(file);
|
|
} else {
|
|
setPendingFile(file);
|
|
setShowMergeOptions(true);
|
|
setMergeMode('append');
|
|
setMergeInsertAt(String(pages.length + 1));
|
|
}
|
|
};
|
|
|
|
const handleMergeCancel = () => {
|
|
setPendingFile(null);
|
|
setShowMergeOptions(false);
|
|
};
|
|
|
|
const handleMergeConfirm = async () => {
|
|
if (!pendingFile) return;
|
|
|
|
if (!pdf || mergeMode === 'overwrite') {
|
|
await loadFileAsNew(pendingFile);
|
|
setPendingFile(null);
|
|
setShowMergeOptions(false);
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
setIsBusy(true);
|
|
|
|
try {
|
|
// 1) Materialize the current in-memory workspace (page refs + rotations)
|
|
const currentBlob = await exportPages(pdf, pages);
|
|
const currentArrayBuffer = await currentBlob.arrayBuffer();
|
|
const currentDoc = await PDFDocument.load(currentArrayBuffer);
|
|
const currentPdf: PdfFile = {
|
|
id: pdf.id,
|
|
name: pdf.name,
|
|
doc: currentDoc,
|
|
arrayBuffer: currentArrayBuffer,
|
|
pageCount: pages.length,
|
|
};
|
|
|
|
// 2) Load the new PDF
|
|
const newPdf = await loadPdfFromFile(pendingFile);
|
|
|
|
// 3) Determine insert position (0-based)
|
|
let insertAt = pages.length; // default: append at end
|
|
if (mergeMode === 'insertAt') {
|
|
const parsed = parseInt(mergeInsertAt, 10);
|
|
if (Number.isFinite(parsed)) {
|
|
insertAt = Math.min(Math.max(parsed - 1, 0), pages.length);
|
|
}
|
|
} else if (mergeMode === 'append') {
|
|
insertAt = pages.length;
|
|
}
|
|
|
|
// 4) Merge
|
|
const mergedPdf = await mergePdfFiles(currentPdf, newPdf, insertAt);
|
|
const mergedPages = createInitialPageRefs(mergedPdf.pageCount);
|
|
|
|
// 5) Reset state to the merged document
|
|
setPdf(mergedPdf);
|
|
|
|
setPages(mergedPages);
|
|
latestPagesRef.current = mergedPages;
|
|
setSelectedPageIds([]);
|
|
setLastSelectedVisualIndex(null);
|
|
setSplitResults([]);
|
|
resetGeneratedUrls();
|
|
setReorderThumbnails({});
|
|
thumbnailCacheRef.current.clear();
|
|
previousPageRotationsRef.current.clear();
|
|
setPreviewPageId(null);
|
|
} catch (e) {
|
|
console.error(e);
|
|
setError('Failed to merge PDF (see console).');
|
|
} finally {
|
|
setIsBusy(false);
|
|
setPendingFile(null);
|
|
setShowMergeOptions(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
latestPagesRef.current = pages;
|
|
}, [pages]);
|
|
|
|
useEffect(() => {
|
|
if (!pdf) {
|
|
setReorderThumbnails({});
|
|
thumbnailCacheRef.current.clear();
|
|
previousPageRotationsRef.current.clear();
|
|
return;
|
|
}
|
|
|
|
const controller = new AbortController();
|
|
|
|
latestPagesRef.current = pages;
|
|
thumbnailCacheRef.current.clear();
|
|
previousPageRotationsRef.current = new Map(
|
|
pages.map((page) => [page.id, normalizeRotation(page.rotation)])
|
|
);
|
|
setReorderThumbnails({});
|
|
|
|
void generateThumbnailsProgressive(pdf.arrayBuffer, {
|
|
maxHeight: THUMBNAIL_MAX_HEIGHT,
|
|
maxWidth: THUMBNAIL_MAX_WIDTH,
|
|
concurrency: THUMBNAIL_CONCURRENCY,
|
|
signal: controller.signal,
|
|
onThumbnail: ({ pageIndex, dataUrl }) => {
|
|
if (controller.signal.aborted) return;
|
|
|
|
thumbnailCacheRef.current.set(
|
|
thumbnailCacheKey(pdf.id, pageIndex, 0),
|
|
dataUrl
|
|
);
|
|
|
|
const currentPages = latestPagesRef.current;
|
|
const updates: Record<string, string> = {};
|
|
|
|
for (const page of currentPages) {
|
|
if (
|
|
page.sourcePageIndex === pageIndex &&
|
|
normalizeRotation(page.rotation) === 0
|
|
) {
|
|
updates[page.id] = dataUrl;
|
|
}
|
|
}
|
|
|
|
if (Object.keys(updates).length === 0) return;
|
|
|
|
setReorderThumbnails((prev) => ({
|
|
...prev,
|
|
...updates,
|
|
}));
|
|
},
|
|
}).catch((e) => {
|
|
if (!controller.signal.aborted) {
|
|
console.error(e);
|
|
setError('Failed to generate thumbnails (see console).');
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [pdf]);
|
|
|
|
useEffect(() => {
|
|
if (!pdf) {
|
|
previousPageRotationsRef.current.clear();
|
|
return;
|
|
}
|
|
|
|
const previousRotations = previousPageRotationsRef.current;
|
|
const changedPages = pages.filter(
|
|
(page) =>
|
|
normalizeRotation(previousRotations.get(page.id)) !==
|
|
normalizeRotation(page.rotation)
|
|
);
|
|
|
|
previousPageRotationsRef.current = new Map(
|
|
pages.map((page) => [page.id, normalizeRotation(page.rotation)])
|
|
);
|
|
|
|
if (changedPages.length === 0) return;
|
|
|
|
const cachedUpdates: Record<string, string> = {};
|
|
const pagesToRender: PageRef[] = [];
|
|
|
|
for (const page of changedPages) {
|
|
const rotation = normalizeRotation(page.rotation);
|
|
const cached = thumbnailCacheRef.current.get(
|
|
thumbnailCacheKey(pdf.id, page.sourcePageIndex, rotation)
|
|
);
|
|
|
|
if (cached) {
|
|
cachedUpdates[page.id] = cached;
|
|
} else {
|
|
pagesToRender.push(page);
|
|
}
|
|
}
|
|
|
|
if (Object.keys(cachedUpdates).length > 0) {
|
|
setReorderThumbnails((prev) => ({
|
|
...prev,
|
|
...cachedUpdates,
|
|
}));
|
|
}
|
|
|
|
if (pagesToRender.length === 0) return;
|
|
|
|
const controller = new AbortController();
|
|
const groups = new Map<number, PageRef[]>();
|
|
|
|
for (const page of pagesToRender) {
|
|
const rotation = normalizeRotation(page.rotation);
|
|
const group = groups.get(rotation) ?? [];
|
|
group.push(page);
|
|
groups.set(rotation, group);
|
|
}
|
|
|
|
const renderGroups = async () => {
|
|
for (const [rotation, groupPages] of groups) {
|
|
if (controller.signal.aborted) return;
|
|
|
|
const pageIndices = Array.from(
|
|
new Set(groupPages.map((page) => page.sourcePageIndex))
|
|
);
|
|
const rotationsBySourcePage: Record<number, number> = {};
|
|
|
|
for (const pageIndex of pageIndices) {
|
|
rotationsBySourcePage[pageIndex] = rotation;
|
|
}
|
|
|
|
await generateThumbnailsWithRotationsProgressive(
|
|
pdf.arrayBuffer,
|
|
rotationsBySourcePage,
|
|
{
|
|
maxHeight: THUMBNAIL_MAX_HEIGHT,
|
|
maxWidth: THUMBNAIL_MAX_WIDTH,
|
|
concurrency: Math.min(THUMBNAIL_CONCURRENCY, pageIndices.length),
|
|
pageIndices,
|
|
signal: controller.signal,
|
|
onThumbnail: ({ pageIndex, dataUrl }) => {
|
|
if (controller.signal.aborted) return;
|
|
|
|
thumbnailCacheRef.current.set(
|
|
thumbnailCacheKey(pdf.id, pageIndex, rotation),
|
|
dataUrl
|
|
);
|
|
|
|
const updates: Record<string, string> = {};
|
|
|
|
for (const page of latestPagesRef.current) {
|
|
if (
|
|
page.sourcePageIndex === pageIndex &&
|
|
normalizeRotation(page.rotation) === rotation
|
|
) {
|
|
updates[page.id] = dataUrl;
|
|
}
|
|
}
|
|
|
|
if (Object.keys(updates).length === 0) return;
|
|
|
|
setReorderThumbnails((prev) => ({
|
|
...prev,
|
|
...updates,
|
|
}));
|
|
},
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
void renderGroups().catch((e) => {
|
|
if (!controller.signal.aborted) {
|
|
console.error(e);
|
|
setError('Failed to generate rotated thumbnails (see console).');
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
controller.abort();
|
|
};
|
|
}, [pdf, pages]);
|
|
|
|
useEffect(() => {
|
|
if (previewPageId != null && !pages.some((page) => page.id === previewPageId)) {
|
|
setPreviewPageId(null);
|
|
}
|
|
}, [previewPageId, pages]);
|
|
|
|
const hasPdf = !!pdf;
|
|
|
|
// === UI interactions ===
|
|
|
|
const handleRotatePageClockwise = (pageId: string) => {
|
|
setPages((prev) =>
|
|
prev.map((page) =>
|
|
page.id === pageId
|
|
? { ...page, rotation: (normalizeRotation(page.rotation) + 90) % 360 }
|
|
: page
|
|
)
|
|
);
|
|
};
|
|
|
|
const handleRotatePageCounterclockwise = (pageId: string) => {
|
|
setPages((prev) =>
|
|
prev.map((page) =>
|
|
page.id === pageId
|
|
? { ...page, rotation: (normalizeRotation(page.rotation) + 270) % 360 }
|
|
: page
|
|
)
|
|
);
|
|
};
|
|
|
|
const handleDeletePage = (pageId: string) => {
|
|
setPages((prev) => prev.filter((page) => page.id !== pageId));
|
|
setSelectedPageIds((prev) => prev.filter((id) => id !== pageId));
|
|
};
|
|
|
|
const handleReorder = (newPages: PageRef[]) => {
|
|
setPages(newPages);
|
|
};
|
|
|
|
const handleToggleSelect = (
|
|
pageId: string,
|
|
visualIndex: number,
|
|
e: React.MouseEvent<HTMLButtonElement>
|
|
) => {
|
|
setSelectedPageIds((prev) => {
|
|
if (e.shiftKey && lastSelectedVisualIndex !== null && pages.length > 0) {
|
|
const from = Math.min(lastSelectedVisualIndex, visualIndex);
|
|
const to = Math.max(lastSelectedVisualIndex, visualIndex);
|
|
const rangeIds = pages.slice(from, to + 1).map((page) => page.id);
|
|
|
|
const set = new Set(prev);
|
|
rangeIds.forEach((id) => set.add(id));
|
|
return Array.from(set);
|
|
}
|
|
|
|
if (prev.includes(pageId)) {
|
|
return prev.filter((id) => id !== pageId);
|
|
}
|
|
|
|
return [...prev, pageId];
|
|
});
|
|
|
|
setLastSelectedVisualIndex(visualIndex);
|
|
};
|
|
|
|
const handleSelectAll = () => {
|
|
setSelectedPageIds(pages.map((page) => page.id));
|
|
setLastSelectedVisualIndex(null);
|
|
};
|
|
|
|
const handleClearSelection = () => {
|
|
setSelectedPageIds([]);
|
|
setLastSelectedVisualIndex(null);
|
|
};
|
|
|
|
const handleDeleteSelected = () => {
|
|
if (selectedPageIds.length === 0) return;
|
|
const selectedSet = new Set(selectedPageIds);
|
|
setPages((prev) => prev.filter((page) => !selectedSet.has(page.id)));
|
|
setSelectedPageIds([]);
|
|
setLastSelectedVisualIndex(null);
|
|
};
|
|
|
|
const handleCopyPagesToSlot = (pageIds: string[], insertSlot: number) => {
|
|
if (!pdf || pageIds.length === 0) return;
|
|
|
|
const pageIdSet = new Set(pageIds);
|
|
|
|
// Copy in current visual order, not in arbitrary selectedPageIds order.
|
|
const sourcePages = pages.filter((page) => pageIdSet.has(page.id));
|
|
|
|
if (sourcePages.length === 0) return;
|
|
|
|
const copiedPages: PageRef[] = sourcePages.map((page) => ({
|
|
...page,
|
|
id: createPageRefId(),
|
|
}));
|
|
|
|
const clampedSlot = Math.min(Math.max(insertSlot, 0), pages.length);
|
|
|
|
const thumbnailUpdates: Record<string, string> = {};
|
|
|
|
sourcePages.forEach((sourcePage, index) => {
|
|
const copiedPage = copiedPages[index];
|
|
|
|
const thumbnail =
|
|
reorderThumbnails[sourcePage.id] ??
|
|
thumbnailCacheRef.current.get(
|
|
thumbnailCacheKey(
|
|
pdf.id,
|
|
sourcePage.sourcePageIndex,
|
|
sourcePage.rotation
|
|
)
|
|
);
|
|
|
|
if (thumbnail) {
|
|
thumbnailUpdates[copiedPage.id] = thumbnail;
|
|
}
|
|
});
|
|
|
|
setPages((prev) => {
|
|
const slot = Math.min(Math.max(clampedSlot, 0), prev.length);
|
|
|
|
return [
|
|
...prev.slice(0, slot),
|
|
...copiedPages,
|
|
...prev.slice(slot),
|
|
];
|
|
});
|
|
|
|
// Select the newly created copies.
|
|
setSelectedPageIds(copiedPages.map((page) => page.id));
|
|
setLastSelectedVisualIndex(null);
|
|
|
|
if (Object.keys(thumbnailUpdates).length > 0) {
|
|
setReorderThumbnails((prev) => ({
|
|
...prev,
|
|
...thumbnailUpdates,
|
|
}));
|
|
}
|
|
|
|
// Existing generated outputs no longer represent the current workspace.
|
|
setSplitResults([]);
|
|
resetGeneratedUrls();
|
|
};
|
|
|
|
const handleOpenPreview = (pageId: string) => {
|
|
setPreviewPageId(pageId);
|
|
};
|
|
|
|
const handleClosePreview = () => {
|
|
setPreviewPageId(null);
|
|
};
|
|
|
|
const handlePreviewPrevious = () => {
|
|
setPreviewPageId((current) => {
|
|
if (current == null || pages.length === 0) return current;
|
|
|
|
const visualIndex = pages.findIndex((page) => page.id === current);
|
|
if (visualIndex <= 0) return current;
|
|
|
|
return pages[visualIndex - 1].id;
|
|
});
|
|
};
|
|
|
|
const handlePreviewNext = () => {
|
|
setPreviewPageId((current) => {
|
|
if (current == null || pages.length === 0) return current;
|
|
|
|
const visualIndex = pages.findIndex((page) => page.id === current);
|
|
if (visualIndex < 0 || visualIndex >= pages.length - 1) return current;
|
|
|
|
return pages[visualIndex + 1].id;
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!hasPdf || previewPageId !== null) return;
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (isEditableKeyboardTarget(e.target)) return;
|
|
|
|
const key = e.key.toLowerCase();
|
|
|
|
if ((e.ctrlKey || e.metaKey) && key === 'a') {
|
|
e.preventDefault();
|
|
setSelectedPageIds(pages.map((page) => page.id));
|
|
setLastSelectedVisualIndex(null);
|
|
return;
|
|
}
|
|
|
|
if ((e.key === 'Delete' || e.key === 'Backspace') && selectedPageIds.length > 0) {
|
|
e.preventDefault();
|
|
const selectedSet = new Set(selectedPageIds);
|
|
setPages((prev) => prev.filter((page) => !selectedSet.has(page.id)));
|
|
setSelectedPageIds([]);
|
|
setLastSelectedVisualIndex(null);
|
|
return;
|
|
}
|
|
|
|
if (e.key === 'Escape' && selectedPageIds.length > 0) {
|
|
e.preventDefault();
|
|
setSelectedPageIds([]);
|
|
setLastSelectedVisualIndex(null);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
|
|
return () => {
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [hasPdf, previewPageId, pages, selectedPageIds]);
|
|
|
|
const handleSplit = async () => {
|
|
if (!pdf) return;
|
|
setError(null);
|
|
setIsBusy(true);
|
|
try {
|
|
const result = await splitIntoSinglePages(pdf);
|
|
setSplitResults(result);
|
|
} catch (e) {
|
|
console.error(e);
|
|
setError('Error while splitting PDF (see console).');
|
|
} finally {
|
|
setIsBusy(false);
|
|
}
|
|
};
|
|
|
|
const handleExtractSelected = async () => {
|
|
if (!pdf || selectedPageIds.length === 0) return
|
|
setError(null);
|
|
setIsBusy(true);
|
|
|
|
if (subsetUrl) {
|
|
URL.revokeObjectURL(subsetUrl);
|
|
setSubsetUrl(null);
|
|
setSubsetFilename(null);
|
|
}
|
|
|
|
try {
|
|
const selectedSet = new Set(selectedPageIds);
|
|
const selectedPages = pages.filter((page) => selectedSet.has(page.id));
|
|
const blob = await exportPages(pdf, selectedPages);
|
|
const url = URL.createObjectURL(blob);
|
|
const base = pdf.name.replace(/\.pdf$/i, '');
|
|
const filename = `${base}_selected.pdf`;
|
|
setSubsetUrl(url);
|
|
setSubsetFilename(filename);
|
|
} catch (e) {
|
|
console.error(e);
|
|
setError('Error while extracting selected pages (see console).');
|
|
} finally {
|
|
setIsBusy(false);
|
|
}
|
|
};
|
|
|
|
const handleExportReordered = async () => {
|
|
if (!pdf || pages.length === 0) return;
|
|
setError(null);
|
|
setIsBusy(true);
|
|
|
|
if (exportUrl) {
|
|
URL.revokeObjectURL(exportUrl);
|
|
setExportUrl(null);
|
|
setExportFilename(null);
|
|
}
|
|
|
|
try {
|
|
const blob = await exportPages(pdf, pages);
|
|
const url = URL.createObjectURL(blob);
|
|
const base = pdf.name.replace(/\.pdf$/i, '');
|
|
const filename = `${base}_reordered.pdf`;
|
|
setExportUrl(url);
|
|
setExportFilename(filename);
|
|
} catch (e) {
|
|
console.error(e);
|
|
setError('Error while exporting reordered PDF (see console).');
|
|
} finally {
|
|
setIsBusy(false);
|
|
}
|
|
};
|
|
|
|
const previewVisualIndex =
|
|
previewPageId != null
|
|
? pages.findIndex((page) => page.id === previewPageId)
|
|
: -1;
|
|
const previewPage =
|
|
previewVisualIndex >= 0 ? pages[previewVisualIndex] : null;
|
|
|
|
const canPreviewPrevious = previewVisualIndex > 0;
|
|
const canPreviewNext =
|
|
previewVisualIndex >= 0 && previewVisualIndex < pages.length - 1;
|
|
|
|
return (
|
|
<Layout>
|
|
<FileLoader pdf={pdf} onFileLoaded={handleFileLoaded} />
|
|
|
|
{showMergeOptions && pendingFile && pdf && pages.length > 0 && (
|
|
<div
|
|
className="card"
|
|
style={{ border: '1px solid #bfdbfe', background: '#eff6ff' }}
|
|
>
|
|
<h2>Open file: merge or replace?</h2>
|
|
<p style={{ fontSize: '0.85rem', color: '#374151' }}>
|
|
You already have <strong>{pdf.name}</strong> with {pages.length}{' '}
|
|
pages open. What should happen with{' '}
|
|
<strong>{pendingFile.name}</strong>?
|
|
</p>
|
|
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.5rem',
|
|
marginTop: '0.5rem',
|
|
fontSize: '0.9rem',
|
|
}}
|
|
>
|
|
<label
|
|
style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="mergeMode"
|
|
value="overwrite"
|
|
checked={mergeMode === 'overwrite'}
|
|
onChange={() => setMergeMode('overwrite')}
|
|
/>
|
|
<span>Replace current document</span>
|
|
</label>
|
|
|
|
<label
|
|
style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="mergeMode"
|
|
value="append"
|
|
checked={mergeMode === 'append'}
|
|
onChange={() => setMergeMode('append')}
|
|
/>
|
|
<span>Merge and append pages at the end</span>
|
|
</label>
|
|
|
|
<label
|
|
style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="mergeMode"
|
|
value="insertAt"
|
|
checked={mergeMode === 'insertAt'}
|
|
onChange={() => setMergeMode('insertAt')}
|
|
/>
|
|
<span>
|
|
Merge and insert starting at position{' '}
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
max={pages.length + 1}
|
|
value={mergeInsertAt}
|
|
onChange={(e) => setMergeInsertAt(e.target.value)}
|
|
style={{
|
|
width: '4rem',
|
|
padding: '0.15rem 0.3rem',
|
|
fontSize: '0.85rem',
|
|
}}
|
|
/>{' '}
|
|
<span style={{ color: '#6b7280' }}>
|
|
(1 = before first page, {pages.length + 1} = after last page)
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="button-row" style={{ marginTop: '0.75rem' }}>
|
|
<button
|
|
className="secondary"
|
|
type="button"
|
|
onClick={handleMergeCancel}
|
|
disabled={isBusy}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className="primary"
|
|
type="button"
|
|
onClick={handleMergeConfirm}
|
|
disabled={isBusy}
|
|
>
|
|
{isBusy ? 'Working…' : 'Continue'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<ReorderPanel
|
|
pages={pages}
|
|
thumbnails={reorderThumbnails}
|
|
isBusy={isBusy}
|
|
hasPdf={hasPdf}
|
|
selectedPageIds={selectedPageIds}
|
|
onRotateClockwise={handleRotatePageClockwise}
|
|
onRotateCounterclockwise={handleRotatePageCounterclockwise}
|
|
onDelete={handleDeletePage}
|
|
onReorder={handleReorder}
|
|
onCopyPagesToSlot={handleCopyPagesToSlot}
|
|
onToggleSelect={handleToggleSelect}
|
|
onSelectAll={handleSelectAll}
|
|
onOpenPreview={handleOpenPreview}
|
|
onClearSelection={handleClearSelection}
|
|
onDeleteSelected={handleDeleteSelected}
|
|
/>
|
|
|
|
|
|
<ActionsPanel
|
|
hasPdf={hasPdf}
|
|
isBusy={isBusy}
|
|
selectedCount={selectedPageIds.length}
|
|
onSplit={handleSplit}
|
|
onExtractSelected={handleExtractSelected}
|
|
onExportReordered={handleExportReordered}
|
|
splitResults={splitResults}
|
|
subsetDownloadUrl={subsetUrl}
|
|
subsetFilename={subsetFilename}
|
|
exportDownloadUrl={exportUrl}
|
|
exportFilename={exportFilename}
|
|
/>
|
|
|
|
{error && (
|
|
<div
|
|
className="card"
|
|
style={{ border: '1px solid #fecaca', background: '#fef2f2' }}
|
|
>
|
|
<strong>Error:</strong> {error}
|
|
</div>
|
|
)}
|
|
|
|
<PagePreviewModal
|
|
isOpen={previewPage !== null}
|
|
pdf={pdf}
|
|
pageIndex={previewPage?.sourcePageIndex ?? null}
|
|
rotation={previewPage?.rotation ?? 0}
|
|
visualIndex={previewVisualIndex >= 0 ? previewVisualIndex : null}
|
|
totalPages={pages.length}
|
|
canGoPrevious={canPreviewPrevious}
|
|
canGoNext={canPreviewNext}
|
|
onPrevious={handlePreviewPrevious}
|
|
onNext={handlePreviewNext}
|
|
onClose={handleClosePreview}
|
|
/>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default App;
|