Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2026-03-13 02:18:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

TSX rewrite and query strings initial set up

Browse Source
This commit is contained in:
Reece
2025-05-21 21:47:44 +01:00
parent 5f7a4e1664
commit 41c82b15da
22 changed files with 1228 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/DeepLinks.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Button, Stack, Text, Group } from '@mantine/core';
const DeepLinks: React.FC = () => {
const commonLinks = [
{
name: "Split PDF Pages 1-5",
url: "/?tool=split&splitMode=byPages&pages=1-5&view=viewer",
description: "Split a PDF and extract pages 1-5"
},
{
name: "Compress PDF (High)",
url: "/?tool=compress&level=9&grayscale=true&view=viewer",
description: "Compress a PDF with high compression level"
},
{
name: "Merge PDFs",
url: "/?tool=merge&view=fileManager",
description: "Combine multiple PDF files into one"
}
];
return (
<Stack>
<Text fw={500}>Common PDF Operations</Text>
{commonLinks.map((link, index) => (
<Group key={index}>
<Button
component={Link}
to={link.url}
variant="subtle"
size="sm"
>
{link.name}
</Button>
<Text size="sm" color="dimmed">{link.description}</Text>
</Group>
))}
</Stack>
);
};
export default DeepLinks;

82
frontend/src/components/FileManager.js → frontend/src/components/FileManager.tsx
View File

@@ -1,25 +1,34 @@
import React, { useState, useEffect } from "react";
import { Card, Group, Text, Stack, Image, Badge, Button, Box, Flex } from "@mantine/core";
import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
import { GlobalWorkerOptions, getDocument, version as pdfjsVersion } from "pdfjs-dist";
GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;
import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
function getFileDate(file) {
GlobalWorkerOptions.workerSrc =
(import.meta as any).env?.PUBLIC_URL
? `${(import.meta as any).env.PUBLIC_URL}/pdf.worker.js`
: "/pdf.worker.js";
export interface FileWithUrl extends File {
url?: string;
file?: File;
}
function getFileDate(file: File): string {
if (file.lastModified) {
return new Date(file.lastModified).toLocaleString();
}
return "Unknown";
}
function getFileSize(file) {
function getFileSize(file: File): string {
if (!file.size) return "Unknown";
if (file.size < 1024) return `${file.size} B`;
if (file.size < 1024 * 1024) return `${(file.size / 1024).toFixed(1)} KB`;
return `${(file.size / (1024 * 1024)).toFixed(2)} MB`;
}
function usePdfThumbnail(file) {
const [thumb, setThumb] = useState(null);
function usePdfThumbnail(file: File | undefined | null): string | null {
const [thumb, setThumb] = useState<string | null>(null);
useEffect(() => {
let cancelled = false;
@@ -34,8 +43,10 @@ function usePdfThumbnail(file) {
canvas.width = viewport.width;
canvas.height = viewport.height;
const context = canvas.getContext("2d");
await page.render({ canvasContext: context, viewport }).promise;
if (!cancelled) setThumb(canvas.toDataURL());
if (context) {
await page.render({ canvasContext: context, viewport }).promise;
if (!cancelled) setThumb(canvas.toDataURL());
}
} catch {
if (!cancelled) setThumb(null);
}
@@ -47,7 +58,13 @@ function usePdfThumbnail(file) {
return thumb;
}
function FileCard({ file, onRemove, onDoubleClick }) {
interface FileCardProps {
file: File;
onRemove: () => void;
onDoubleClick?: () => void;
}
function FileCard({ file, onRemove, onDoubleClick }: FileCardProps) {
const thumb = usePdfThumbnail(file);
return (
@@ -59,7 +76,7 @@ function FileCard({ file, onRemove, onDoubleClick }) {
style={{ width: 225, minWidth: 180, maxWidth: 260, cursor: onDoubleClick ? "pointer" : undefined }}
onDoubleClick={onDoubleClick}
>
<Stack spacing={6} align="center">
<Stack gap={6} align="center">
<Box
style={{
border: "2px solid #e0e0e0",
@@ -76,13 +93,13 @@ function FileCard({ file, onRemove, onDoubleClick }) {
{thumb ? (
<Image src={thumb} alt="PDF thumbnail" height={110} width={80} fit="contain" radius="sm" />
) : (
<Image src="/images/pdf-placeholder.svg" alt="PDF" height={60} width={60} fit="contain" radius="sm" withPlaceholder />
<Image src="/images/pdf-placeholder.svg" alt="PDF" height={60} width={60} fit="contain" radius="sm" />
)}
</Box>
<Text weight={500} size="sm" lineClamp={1} align="center">
<Text fw={500} size="sm" lineClamp={1} ta="center">
{file.name}
</Text>
<Group spacing="xs" position="center">
<Group gap="xs" justify="center">
<Badge color="gray" variant="light" size="sm">
{getFileSize(file)}
</Badge>
@@ -104,12 +121,26 @@ function FileCard({ file, onRemove, onDoubleClick }) {
);
}
export default function FileManager({ files = [], setFiles, allowMultiple = true, setPdfFile, setCurrentView }) {
const handleDrop = (uploadedFiles) => {
interface FileManagerProps {
files: FileWithUrl[];
setFiles: React.Dispatch<React.SetStateAction<FileWithUrl[]>>;
allowMultiple?: boolean;
setPdfFile?: (fileObj: { file: File; url: string }) => void;
setCurrentView?: (view: string) => void;
}
const FileManager: React.FC<FileManagerProps> = ({
files = [],
setFiles,
allowMultiple = true,
setPdfFile,
setCurrentView,
}) => {
const handleDrop = (uploadedFiles: File[]) => {
setFiles((prevFiles) => (allowMultiple ? [...prevFiles, ...uploadedFiles] : uploadedFiles));
};
const handleRemoveFile = (index) => {
const handleRemoveFile = (index: number) => {
setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
};
@@ -131,14 +162,14 @@ export default function FileManager({ files = [], setFiles, allowMultiple = true
justifyContent: "center",
}}
>
<Group position="center" spacing="xl" style={{ pointerEvents: "none" }}>
<Group justify="center" gap="xl" style={{ pointerEvents: "none" }}>
<Text size="md">
Drag PDF files here or click to select
</Text>
</Group>
</Dropzone>
{files.length === 0 ? (
<Text c="dimmed" align="center">
<Text c="dimmed" ta="center">
No files uploaded yet.
</Text>
) : (
@@ -155,11 +186,12 @@ export default function FileManager({ files = [], setFiles, allowMultiple = true
file={file}
onRemove={() => handleRemoveFile(idx)}
onDoubleClick={() => {
const fileObj = file.file || file; // handle wrapped or raw File
setPdfFile && setPdfFile({
file: fileObj,
url: URL.createObjectURL(fileObj),
});
const fileObj = (file as FileWithUrl).file || file;
setPdfFile &&
setPdfFile({
file: fileObj,
url: URL.createObjectURL(fileObj),
});
setCurrentView && setCurrentView("viewer");
}}
/>
@@ -169,4 +201,6 @@ export default function FileManager({ files = [], setFiles, allowMultiple = true
)}
</div>
);
}
};
export default FileManager;

9
frontend/src/components/PageEditor.js
View File

@@ -1,9 +0,0 @@
import React from "react";
export default function PageEditor({ pdfFile }) {
return (
<div className="w-full h-full flex items-center justify-center">
<p className="text-gray-500">Page Editor is under construction.</p>
</div>
);
}

196
frontend/src/components/PageEditor.tsx Normal file
View File

@@ -0,0 +1,196 @@
import React, { useState } from "react";
import {
Paper, Button, Group, Text, Stack, Center, Checkbox, ScrollArea, Box, Tooltip, ActionIcon, Notification
} from "@mantine/core";
import UndoIcon from "@mui/icons-material/Undo";
import RedoIcon from "@mui/icons-material/Redo";
import AddIcon from "@mui/icons-material/Add";
import ContentCutIcon from "@mui/icons-material/ContentCut";
import DownloadIcon from "@mui/icons-material/Download";
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
import RotateRightIcon from "@mui/icons-material/RotateRight";
import DeleteIcon from "@mui/icons-material/Delete";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
export interface PageEditorProps {
file: { file: File; url: string } | null;
setFile?: (file: { file: File; url: string } | null) => void;
downloadUrl?: string | null;
setDownloadUrl?: (url: string | null) => void;
}
const DUMMY_PAGE_COUNT = 8; // Replace with real page count from PDF
const PageEditor: React.FC<PageEditorProps> = ({
file,
setFile,
downloadUrl,
setDownloadUrl,
}) => {
const [selectedPages, setSelectedPages] = useState<number[]>([]);
const [status, setStatus] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [undoStack, setUndoStack] = useState<number[][]>([]);
const [redoStack, setRedoStack] = useState<number[][]>([]);
// Dummy page thumbnails
const pages = Array.from({ length: DUMMY_PAGE_COUNT }, (_, i) => i + 1);
const selectAll = () => setSelectedPages(pages);
const deselectAll = () => setSelectedPages([]);
const togglePage = (page: number) =>
setSelectedPages((prev) =>
prev.includes(page) ? prev.filter((p) => p !== page) : [...prev, page]
);
// Undo/redo logic for selection
const handleUndo = () => {
if (undoStack.length > 0) {
setRedoStack([selectedPages, ...redoStack]);
setSelectedPages(undoStack[0]);
setUndoStack(undoStack.slice(1));
}
};
const handleRedo = () => {
if (redoStack.length > 0) {
setUndoStack([selectedPages, ...undoStack]);
setSelectedPages(redoStack[0]);
setRedoStack(redoStack.slice(1));
}
};
// Example action handlers (replace with real API calls)
const handleRotateLeft = () => setStatus("Rotated left: " + selectedPages.join(", "));
const handleRotateRight = () => setStatus("Rotated right: " + selectedPages.join(", "));
const handleDelete = () => setStatus("Deleted: " + selectedPages.join(", "));
const handleMoveLeft = () => setStatus("Moved left: " + selectedPages.join(", "));
const handleMoveRight = () => setStatus("Moved right: " + selectedPages.join(", "));
const handleSplit = () => setStatus("Split at: " + selectedPages.join(", "));
const handleInsertPageBreak = () => setStatus("Inserted page break at: " + selectedPages.join(", "));
const handleAddFile = () => setStatus("Add file not implemented in demo");
if (!file) {
return (
<Paper shadow="xs" radius="md" p="md">
<Center>
<Text color="dimmed">No PDF loaded. Please upload a PDF to edit.</Text>
</Center>
</Paper>
);
}
return (
<Paper shadow="xs" radius="md" p="md">
<Group align="flex-start" gap="lg">
{/* Sidebar */}
<Stack w={180} gap="xs">
<Text fw={600} size="lg">PDF Multitool</Text>
<Button onClick={selectAll} fullWidth variant="light">Select All</Button>
<Button onClick={deselectAll} fullWidth variant="light">Deselect All</Button>
<Button onClick={handleUndo} leftSection={<UndoIcon fontSize="small" />} fullWidth disabled={undoStack.length === 0}>Undo</Button>
<Button onClick={handleRedo} leftSection={<RedoIcon fontSize="small" />} fullWidth disabled={redoStack.length === 0}>Redo</Button>
<Button onClick={handleAddFile} leftSection={<AddIcon fontSize="small" />} fullWidth>Add File</Button>
<Button onClick={handleInsertPageBreak} leftSection={<ContentCutIcon fontSize="small" />} fullWidth>Insert Page Break</Button>
<Button onClick={handleSplit} leftSection={<ContentCutIcon fontSize="small" />} fullWidth>Split</Button>
<Button
component="a"
href={downloadUrl || "#"}
download="edited.pdf"
leftSection={<DownloadIcon fontSize="small" />}
fullWidth
color="green"
variant="light"
disabled={!downloadUrl}
>
Download All
</Button>
<Button
component="a"
href={downloadUrl || "#"}
download="selected.pdf"
leftSection={<DownloadIcon fontSize="small" />}
fullWidth
color="blue"
variant="light"
disabled={!downloadUrl || selectedPages.length === 0}
>
Download Selected
</Button>
<Button
color="red"
variant="light"
onClick={() => setFile && setFile(null)}
fullWidth
>
Close PDF
</Button>
</Stack>
{/* Main multitool area */}
<Box style={{ flex: 1 }}>
<Group mb="sm">
<Tooltip label="Rotate Left">
<ActionIcon onClick={handleRotateLeft} disabled={selectedPages.length === 0} color="blue" variant="light">
<RotateLeftIcon />
</ActionIcon>
</Tooltip>
<Tooltip label="Rotate Right">
<ActionIcon onClick={handleRotateRight} disabled={selectedPages.length === 0} color="blue" variant="light">
<RotateRightIcon />
</ActionIcon>
</Tooltip>
<Tooltip label="Delete">
<ActionIcon onClick={handleDelete} disabled={selectedPages.length === 0} color="red" variant="light">
<DeleteIcon />
</ActionIcon>
</Tooltip>
<Tooltip label="Move Left">
<ActionIcon onClick={handleMoveLeft} disabled={selectedPages.length === 0} color="gray" variant="light">
<ArrowBackIosNewIcon />
</ActionIcon>
</Tooltip>
<Tooltip label="Move Right">
<ActionIcon onClick={handleMoveRight} disabled={selectedPages.length === 0} color="gray" variant="light">
<ArrowForwardIosIcon />
</ActionIcon>
</Tooltip>
</Group>
<ScrollArea h={350}>
<Group>
{pages.map((page) => (
<Stack key={page} align="center" gap={2}>
<Checkbox
checked={selectedPages.includes(page)}
onChange={() => togglePage(page)}
label={`Page ${page}`}
/>
<Box
w={60}
h={80}
bg={selectedPages.includes(page) ? "blue.1" : "gray.1"}
style={{ border: "1px solid #ccc", borderRadius: 4 }}
>
{/* Replace with real thumbnail */}
<Center h="100%">
<Text size="xs" color="dimmed">
{page}
</Text>
</Center>
</Box>
</Stack>
))}
</Group>
</ScrollArea>
</Box>
</Group>
{status && (
<Notification color="blue" mt="md" onClose={() => setStatus(null)}>
{status}
</Notification>
)}
</Paper>
);
};
export default PageEditor;

76
frontend/src/components/ToolPicker.tsx Normal file
View File

@@ -0,0 +1,76 @@
import React, { useState } from "react";
import { Box, Text, Stack, Button, TextInput } from "@mantine/core";
type Tool = {
icon: React.ReactNode;
name: string;
};
type ToolRegistry = {
[id: string]: Tool;
};
interface ToolPickerProps {
selectedToolKey: string;
onSelect: (id: string) => void;
toolRegistry: ToolRegistry;
}
const ToolPicker: React.FC<ToolPickerProps> = ({ selectedToolKey, onSelect, toolRegistry }) => {
const [search, setSearch] = useState("");
const filteredTools = Object.entries(toolRegistry).filter(([_, { name }]) =>
name.toLowerCase().includes(search.toLowerCase())
);
return (
<Box
style={{
width: 220,
background: "#f8f9fa",
borderRight: "1px solid #e9ecef",
minHeight: "100vh",
padding: 16,
position: "fixed",
left: 0,
top: 0,
bottom: 0,
zIndex: 100,
overflowY: "auto",
}}
>
<Text size="lg" fw={500} mb="md">
Tools
</Text>
<TextInput
placeholder="Search tools..."
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
mb="md"
autoComplete="off"
/>
<Stack gap="sm">
{filteredTools.length === 0 ? (
<Text c="dimmed" size="sm">
No tools found
</Text>
) : (
filteredTools.map(([id, { icon, name }]) => (
<Button
key={id}
variant={selectedToolKey === id ? "filled" : "subtle"}
onClick={() => onSelect(id)}
fullWidth
size="md"
radius="md"
>
{name}
</Button>
))
)}
</Stack>
</Box>
);
};
export default ToolPicker;

33
frontend/src/components/Viewer.js → frontend/src/components/Viewer.tsx
View File

@@ -1,13 +1,18 @@
import React, { useEffect, useState } from "react";
import { Paper, Stack, Text, ScrollArea, Loader, Center, Button, Group } from "@mantine/core";
import { getDocument, GlobalWorkerOptions, version as pdfjsVersion } from "pdfjs-dist";
import { getDocument, GlobalWorkerOptions } from "pdfjs-dist";
GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;
export default function Viewer({ pdfFile, setPdfFile }) {
const [numPages, setNumPages] = useState(0);
const [pageImages, setPageImages] = useState([]);
const [loading, setLoading] = useState(false);
export interface ViewerProps {
pdfFile: { file: File; url: string } | null;
setPdfFile: (file: { file: File; url: string } | null) => void;
}
const Viewer: React.FC<ViewerProps> = ({ pdfFile, setPdfFile }) => {
const [numPages, setNumPages] = useState<number>(0);
const [pageImages, setPageImages] = useState<string[]>([]);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
let cancelled = false;
@@ -21,7 +26,7 @@ export default function Viewer({ pdfFile, setPdfFile }) {
try {
const pdf = await getDocument(pdfFile.url).promise;
setNumPages(pdf.numPages);
const images = [];
const images: string[] = [];
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 1.2 });
@@ -29,8 +34,10 @@ export default function Viewer({ pdfFile, setPdfFile }) {
canvas.width = viewport.width;
canvas.height = viewport.height;
const ctx = canvas.getContext("2d");
await page.render({ canvasContext: ctx, viewport }).promise;
images.push(canvas.toDataURL());
if (ctx) {
await page.render({ canvasContext: ctx, viewport }).promise;
images.push(canvas.toDataURL());
}
}
if (!cancelled) setPageImages(images);
} catch {
@@ -59,7 +66,7 @@ export default function Viewer({ pdfFile, setPdfFile }) {
accept="application/pdf"
hidden
onChange={(e) => {
const file = e.target.files[0];
const file = e.target.files?.[0];
if (file && file.type === "application/pdf") {
const fileUrl = URL.createObjectURL(file);
setPdfFile({ file, url: fileUrl });
@@ -75,7 +82,7 @@ export default function Viewer({ pdfFile, setPdfFile }) {
</Center>
) : (
<ScrollArea style={{ flex: 1, height: "100%" }}>
<Stack spacing="xl" align="center">
<Stack gap="xl" align="center">
{pageImages.length === 0 && (
<Text color="dimmed">No pages to display.</Text>
)}
@@ -97,7 +104,7 @@ export default function Viewer({ pdfFile, setPdfFile }) {
</ScrollArea>
)}
{pdfFile && (
<Group position="right" mt="md">
<Group justify="flex-end" mt="md">
<Button
variant="light"
color="red"
@@ -109,4 +116,6 @@ export default function Viewer({ pdfFile, setPdfFile }) {
)}
</Paper>
);
}
};
export default Viewer;

6
frontend/src/global.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
declare module "../tools/Split";
declare module "../tools/Compress";
declare module "../tools/Merge";
declare module "../components/PageEditor";
declare module "../components/Viewer";
declare module "*.js";

201
frontend/src/pages/HomePage.js
View File

@@ -1,201 +0,0 @@
import React, { useState } from "react";
import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
import ContentCutIcon from "@mui/icons-material/ContentCut";
import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import VisibilityIcon from "@mui/icons-material/Visibility";
import EditNoteIcon from "@mui/icons-material/EditNote";
import { Group, SegmentedControl, Paper, Center, Stack, Button, Text, Box } from "@mantine/core";
import FileManager from "../components/FileManager";
import SplitPdfPanel from "../tools/Split";
import CompressPdfPanel from "../tools/Compress";
import MergePdfPanel from "../tools/Merge";
import PageEditor from "../components/PageEditor";
import Viewer from "../components/Viewer";
const toolRegistry = {
split: { icon: <ContentCutIcon />, name: "Split PDF", component: SplitPdfPanel, view: "viewer" },
compress: { icon: <ZoomInMapIcon />, name: "Compress PDF", component: CompressPdfPanel, view: "viewer" },
merge: { icon: <AddToPhotosIcon />, name: "Merge PDFs", component: MergePdfPanel, view: "fileManager" },
};
const VIEW_OPTIONS = [
{
label: (
<Group gap={4}>
<VisibilityIcon fontSize="small" />
</Group>
),
value: "viewer",
},
{
label: (
<Group gap={4}>
<EditNoteIcon fontSize="small" />
</Group>
),
value: "pageEditor",
},
{
label: (
<Group gap={4}>
<InsertDriveFileIcon fontSize="small" />
</Group>
),
value: "fileManager",
},
];
export default function HomePage() {
const [selectedToolKey, setSelectedToolKey] = useState("split");
const [currentView, setCurrentView] = useState("viewer");
const [pdfFile, setPdfFile] = useState(null);
const [files, setFiles] = useState([]);
const [downloadUrl, setDownloadUrl] = useState(null);
const selectedTool = toolRegistry[selectedToolKey];
return (
<Group align="flex-start" spacing={0} style={{ minHeight: "100vh" }}>
{/* Left: Tool Picker */}
<Box
style={{
width: 220,
background: "#f8f9fa",
borderRight: "1px solid #e9ecef",
minHeight: "100vh",
padding: 16,
position: "fixed",
left: 0,
top: 0,
bottom: 0,
zIndex: 100,
overflowY: "auto",
}}
>
<Text size="lg" weight={500} mb="md">
Tools
</Text>
<Stack spacing="sm">
{Object.entries(toolRegistry).map(([id, { icon, name }]) => (
<Button
key={id}
variant={selectedToolKey === id ? "filled" : "subtle"}
leftIcon={icon}
onClick={() => {
setSelectedToolKey(id);
if (toolRegistry[id].view) setCurrentView(toolRegistry[id].view);
}}
fullWidth
size="md"
radius="md"
>
{name}
</Button>
))}
</Stack>
</Box>
{/* Middle: Main View (Viewer, Editor, Manager) */}
<Box
style={{
width: "calc(100vw - 220px - 380px)",
marginLeft: 220,
marginRight: 380,
padding: 24,
background: "#fff",
position: "relative",
minHeight: "100vh",
height: "100vh",
overflowY: "auto",
}}
>
<Center>
<Paper
radius="xl"
shadow="sm"
p={4}
style={{
display: "inline-block",
marginTop: 8,
marginBottom: 24,
background: "#f8f9fa",
zIndex: 10,
}}
>
<SegmentedControl
data={VIEW_OPTIONS}
value={currentView}
onChange={setCurrentView}
color="blue"
radius="xl"
size="md"
/>
</Paper>
</Center>
<Box>
{(currentView === "viewer" || currentView === "pageEditor") && !pdfFile ? (
<FileManager
files={files}
setFiles={setFiles}
setPdfFile={setPdfFile}
setCurrentView={setCurrentView}
/>
) : currentView === "viewer" ? (
<Viewer
pdfFile={pdfFile}
setPDFFile={setPdfFile}
downloadUrl={downloadUrl}
setDownloadUrl={setDownloadUrl}
/>
) : currentView === "pageEditor" ? (
<PageEditor
file={pdfFile}
setFile={setPdfFile}
downloadUrl={downloadUrl}
setDownloadUrl={setDownloadUrl}
/>
) : (
<FileManager
files={files}
setFiles={setFiles}
setPdfFile={setPdfFile}
setCurrentView={setCurrentView}
/>
)}
</Box>
</Box>
{/* Right: Tool Interaction */}
<Box
style={{
width: 380,
background: "#f8f9fa",
borderLeft: "1px solid #e9ecef",
minHeight: "100vh",
padding: 24,
gap: 16,
position: "fixed",
right: 0,
top: 0,
bottom: 0,
zIndex: 100,
overflowY: "auto",
}}
>
{selectedTool && selectedTool.component && (
<>
{React.createElement(selectedTool.component, {
file: pdfFile,
setPdfFile,
files,
setFiles,
downloadUrl,
setDownloadUrl,
})}
</>
)}
</Box>
</Group>
);
}

283
frontend/src/pages/HomePage.tsx Normal file
View File

@@ -0,0 +1,283 @@
import React, { useState, useCallback, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
import ContentCutIcon from "@mui/icons-material/ContentCut";
import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import VisibilityIcon from "@mui/icons-material/Visibility";
import EditNoteIcon from "@mui/icons-material/EditNote";
import { Group, SegmentedControl, Paper, Center, Box } from "@mantine/core";
import ToolPicker from "../components/ToolPicker";
import FileManager from "../components/FileManager";
import SplitPdfPanel from "../tools/Split";
import CompressPdfPanel from "../tools/Compress";
import MergePdfPanel from "../tools/Merge";
import PageEditor from "../components/PageEditor";
import Viewer from "../components/Viewer";
type ToolRegistryEntry = {
icon: React.ReactNode;
name: string;
component: React.ComponentType<any>;
view: string;
};
type ToolRegistry = {
[key: string]: ToolRegistryEntry;
};
const toolRegistry: ToolRegistry = {
split: { icon: <ContentCutIcon />, name: "Split PDF", component: SplitPdfPanel, view: "viewer" },
compress: { icon: <ZoomInMapIcon />, name: "Compress PDF", component: CompressPdfPanel, view: "viewer" },
merge: { icon: <AddToPhotosIcon />, name: "Merge PDFs", component: MergePdfPanel, view: "fileManager" },
};
const VIEW_OPTIONS = [
{
label: (
<Group gap={4}>
<VisibilityIcon fontSize="small" />
</Group>
),
value: "viewer",
},
{
label: (
<Group gap={4}>
<EditNoteIcon fontSize="small" />
</Group>
),
value: "pageEditor",
},
{
label: (
<Group gap={4}>
<InsertDriveFileIcon fontSize="small" />
</Group>
),
value: "fileManager",
},
];
export default function HomePage() {
const [searchParams, setSearchParams] = useSearchParams();
// Core app state
const [selectedToolKey, setSelectedToolKey] = useState<string>(searchParams.get("tool") || "split");
const [currentView, setCurrentView] = useState<string>(searchParams.get("view") || "viewer");
const [pdfFile, setPdfFile] = useState<any>(null);
const [files, setFiles] = useState<any[]>([]);
const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
// Tool-specific parameters
const [splitParams, setSplitParams] = useState({
mode: searchParams.get("splitMode") || "byPages",
pages: searchParams.get("pages") || "",
hDiv: searchParams.get("hDiv") || "0",
vDiv: searchParams.get("vDiv") || "1",
merge: searchParams.get("merge") === "true",
splitType: searchParams.get("splitType") || "size",
splitValue: searchParams.get("splitValue") || "",
bookmarkLevel: searchParams.get("bookmarkLevel") || "0",
includeMetadata: searchParams.get("includeMetadata") === "true",
allowDuplicates: searchParams.get("allowDuplicates") === "true",
});
// Update URL when core state changes
useEffect(() => {
const params = new URLSearchParams(searchParams);
params.set("tool", selectedToolKey);
params.set("view", currentView);
setSearchParams(params, { replace: true });
}, [selectedToolKey, currentView, setSearchParams]);
// Handle tool selection
const handleToolSelect = useCallback(
(id: string) => {
setSelectedToolKey(id);
if (toolRegistry[id]?.view) setCurrentView(toolRegistry[id].view);
},
[toolRegistry]
);
// Handle split parameter updates
const updateSplitParams = useCallback((newParams: Partial<typeof splitParams>) => {
setSplitParams(prev => {
const updated = { ...prev, ...newParams };
// Update URL with split params
const params = new URLSearchParams(searchParams);
// Clear old parameters when mode changes
if (newParams.mode && newParams.mode !== prev.mode) {
params.delete("pages");
params.delete("hDiv");
params.delete("vDiv");
params.delete("merge");
params.delete("splitType");
params.delete("splitValue");
params.delete("bookmarkLevel");
params.delete("includeMetadata");
params.delete("allowDuplicates");
}
// Set the mode
params.set("splitMode", updated.mode);
// Set mode-specific parameters
if (updated.mode === "byPages" && updated.pages) {
params.set("pages", updated.pages);
} else if (updated.mode === "bySections") {
params.set("hDiv", updated.hDiv);
params.set("vDiv", updated.vDiv);
params.set("merge", String(updated.merge));
} else if (updated.mode === "bySizeOrCount") {
params.set("splitType", updated.splitType);
if (updated.splitValue) params.set("splitValue", updated.splitValue);
} else if (updated.mode === "byChapters") {
params.set("bookmarkLevel", updated.bookmarkLevel);
params.set("includeMetadata", String(updated.includeMetadata));
params.set("allowDuplicates", String(updated.allowDuplicates));
}
setSearchParams(params, { replace: true });
return updated;
});
}, [searchParams, setSearchParams]);
const selectedTool = toolRegistry[selectedToolKey];
// Tool component rendering
const renderTool = () => {
if (!selectedTool || !selectedTool.component) {
return <div>Tool not found</div>;
}
// Pass appropriate props based on tool type
if (selectedToolKey === "split") {
return React.createElement(selectedTool.component, {
file: pdfFile,
setPdfFile,
downloadUrl,
setDownloadUrl,
// Tool-specific params and update function
params: splitParams,
updateParams: updateSplitParams
});
}
// For other tools, pass standard props
return React.createElement(selectedTool.component, {
file: pdfFile,
setPdfFile,
files,
setFiles,
downloadUrl,
setDownloadUrl,
});
};
return (
<Group align="flex-start" gap={0} style={{ minHeight: "100vh" }}>
{/* Left: Tool Picker */}
<ToolPicker
selectedToolKey={selectedToolKey}
onSelect={handleToolSelect}
toolRegistry={toolRegistry}
/>
{/* Middle: Main View (Viewer, Editor, Manager) */}
<Box
style={{
width: "calc(100vw - 220px - 380px)",
marginLeft: 220,
marginRight: 380,
padding: 24,
background: "#fff",
position: "relative",
minHeight: "100vh",
height: "100vh",
overflowY: "auto",
}}
>
<Center>
<Paper
radius="xl"
shadow="sm"
p={4}
style={{
display: "inline-block",
marginTop: 8,
marginBottom: 24,
background: "#f8f9fa",
zIndex: 10,
}}
>
<SegmentedControl
data={VIEW_OPTIONS}
value={currentView}
onChange={setCurrentView} // Using the state setter directly
color="blue"
radius="xl"
size="md"
/>
</Paper>
</Center>
<Box>
{(currentView === "viewer" || currentView === "pageEditor") && !pdfFile ? (
<FileManager
files={files}
setFiles={setFiles}
setPdfFile={setPdfFile}
setCurrentView={setCurrentView}
/>
) : currentView === "viewer" ? (
<Viewer
pdfFile={pdfFile}
setPdfFile={setPdfFile}
/>
) : currentView === "pageEditor" ? (
<PageEditor
file={pdfFile}
setFile={setPdfFile}
downloadUrl={downloadUrl}
setDownloadUrl={setDownloadUrl}
/>
) : (
<FileManager
files={files}
setFiles={setFiles}
setPdfFile={setPdfFile}
setCurrentView={setCurrentView}
/>
)}
</Box>
</Box>
{/* Right: Tool Interaction */}
<Box
style={{
width: 380,
background: "#f8f9fa",
borderLeft: "1px solid #e9ecef",
minHeight: "100vh",
padding: 24,
gap: 16,
position: "fixed",
right: 0,
top: 0,
bottom: 0,
zIndex: 100,
overflowY: "auto",
}}
>
{selectedTool && selectedTool.component && (
<>
{renderTool()}
</>
)}
</Box>
</Group>
);
}

52
frontend/src/tools/Compress.js → frontend/src/tools/Compress.tsx
View File

@@ -1,21 +1,31 @@
import React, { useState } from "react";
import { Stack, Slider, Group, Text, Button, Checkbox, TextInput, Paper } from "@mantine/core";
export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoading }) {
const [selected, setSelected] = useState(files.map(() => false));
const [compressionLevel, setCompressionLevel] = useState(5); // 1-9, default 5
const [grayscale, setGrayscale] = useState(false);
const [removeMetadata, setRemoveMetadata] = useState(false);
const [expectedSize, setExpectedSize] = useState("");
const [aggressive, setAggressive] = useState(false);
const [localLoading, setLocalLoading] = useState(false);
export interface CompressProps {
files?: File[];
setDownloadUrl?: (url: string) => void;
setLoading?: (loading: boolean) => void;
}
const CompressPdfPanel: React.FC<CompressProps> = ({
files = [],
setDownloadUrl,
setLoading,
}) => {
const [selected, setSelected] = useState<boolean[]>(files.map(() => false));
const [compressionLevel, setCompressionLevel] = useState<number>(5);
const [grayscale, setGrayscale] = useState<boolean>(false);
const [removeMetadata, setRemoveMetadata] = useState<boolean>(false);
const [expectedSize, setExpectedSize] = useState<string>("");
const [aggressive, setAggressive] = useState<boolean>(false);
const [localLoading, setLocalLoading] = useState<boolean>(false);
// Update selection state if files prop changes
React.useEffect(() => {
setSelected(files.map(() => false));
}, [files]);
const handleCheckbox = idx => {
const handleCheckbox = (idx: number) => {
setSelected(sel => sel.map((v, i) => (i === idx ? !v : v)));
};
@@ -27,10 +37,10 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
const formData = new FormData();
selectedFiles.forEach(file => formData.append("fileInput", file));
formData.append("compressionLevel", compressionLevel);
formData.append("grayscale", grayscale);
formData.append("removeMetadata", removeMetadata);
formData.append("aggressive", aggressive);
formData.append("compressionLevel", compressionLevel.toString());
formData.append("grayscale", grayscale.toString());
formData.append("removeMetadata", removeMetadata.toString());
formData.append("aggressive", aggressive.toString());
if (expectedSize) formData.append("expectedSize", expectedSize);
try {
@@ -39,7 +49,7 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
body: formData,
});
const blob = await res.blob();
setDownloadUrl(URL.createObjectURL(blob));
setDownloadUrl?.(URL.createObjectURL(blob));
} finally {
setLocalLoading(false);
setLoading?.(false);
@@ -49,9 +59,9 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
return (
<Paper shadow="xs" p="md" radius="md" withBorder>
<Stack>
<Text weight={500} mb={4}>Select files to compress:</Text>
<Stack spacing={4}>
{files.length === 0 && <Text color="dimmed" size="sm">No files loaded.</Text>}
<Text fw={500} mb={4}>Select files to compress:</Text>
<Stack gap={4}>
{files.length === 0 && <Text c="dimmed" size="sm">No files loaded.</Text>}
{files.map((file, idx) => (
<Checkbox
key={file.name + idx}
@@ -61,7 +71,7 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
/>
))}
</Stack>
<Stack spacing={4} mb={14}>
<Stack gap={4} mb={14}>
<Text size="sm" style={{ minWidth: 140 }}>Compression Level</Text>
<Slider
min={1}
@@ -76,7 +86,7 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
]}
style={{ flex: 1 }}
/>
</Stack >
</Stack>
<Checkbox
label="Convert images to grayscale"
checked={grayscale}
@@ -110,4 +120,6 @@ export default function CompressPdfPanel({ files = [], setDownloadUrl, setLoadin
</Stack>
</Paper>
);
}
};
export default CompressPdfPanel;

101
frontend/src/tools/Merge.js
View File

@@ -1,101 +0,0 @@
import React, { useState, useEffect } from "react";
export default function MergePdfPanel({ files, setDownloadUrl }) {
const [selectedFiles, setSelectedFiles] = useState([]);
const [downloadUrl, setLocalDownloadUrl] = useState(null); // Local state for download URL
const [isLoading, setIsLoading] = useState(false); // Loading state
const [errorMessage, setErrorMessage] = useState(null); // Error message state
// Sync selectedFiles with files whenever files change
useEffect(() => {
setSelectedFiles(files.map(() => true)); // Select all files by default
}, [files]);
const handleMerge = async () => {
const filesToMerge = files.filter((_, index) => selectedFiles[index]);
if (filesToMerge.length < 2) {
alert("Please select at least two PDFs to merge.");
return;
}
const formData = new FormData();
filesToMerge.forEach((file) => formData.append("fileInput", file)); // Use "fileInput" as the key
setIsLoading(true); // Start loading
setErrorMessage(null); // Clear previous errors
try {
const response = await fetch("/api/v1/general/merge-pdfs", {
method: "POST",
body: formData,
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Failed to merge PDFs: ${errorText}`);
}
const blob = await response.blob();
const downloadUrl = URL.createObjectURL(blob);
setDownloadUrl(downloadUrl); // Pass to parent component
setLocalDownloadUrl(downloadUrl); // Store locally for download button
} catch (error) {
console.error("Error merging PDFs:", error);
setErrorMessage(error.message); // Set error message
} finally {
setIsLoading(false); // Stop loading
}
};
const handleCheckboxChange = (index) => {
setSelectedFiles((prevSelectedFiles) =>
prevSelectedFiles.map((selected, i) => (i === index ? !selected : selected))
);
};
return (
<div className="space-y-4">
<h3 className="font-semibold text-lg">Merge PDFs</h3>
<ul className="list-disc pl-5 text-sm">
{files.map((file, index) => (
<li key={index} className="flex items-center space-x-2">
<input
type="checkbox"
checked={selectedFiles[index]}
onChange={() => handleCheckboxChange(index)}
className="form-checkbox"
/>
<span>{file.name}</span>
</li>
))}
</ul>
{files.filter((_, index) => selectedFiles[index]).length < 2 && (
<p className="text-sm text-red-500">
Please select at least two PDFs to merge.
</p>
)}
<button
onClick={handleMerge}
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
disabled={files.filter((_, index) => selectedFiles[index]).length < 2 || isLoading}
>
{isLoading ? "Merging..." : "Merge PDFs"}
</button>
{errorMessage && (
<p className="text-sm text-red-500 mt-2">
{errorMessage}
</p>
)}
{downloadUrl && (
<a
href={downloadUrl}
download="merged.pdf"
className="block mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-center"
>
Download Merged PDF
</a>
)}
</div>
);
}

112
frontend/src/tools/Merge.tsx Normal file
View File

@@ -0,0 +1,112 @@
import React, { useState, useEffect } from "react";
import { Paper, Button, Checkbox, Stack, Text, Group, Loader, Alert } from "@mantine/core";
export interface MergePdfPanelProps {
files: File[];
setDownloadUrl: (url: string) => void;
}
const MergePdfPanel: React.FC<MergePdfPanelProps> = ({ files, setDownloadUrl }) => {
const [selectedFiles, setSelectedFiles] = useState<boolean[]>([]);
const [downloadUrl, setLocalDownloadUrl] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
useEffect(() => {
setSelectedFiles(files.map(() => true));
}, [files]);
const handleMerge = async () => {
const filesToMerge = files.filter((_, index) => selectedFiles[index]);
if (filesToMerge.length < 2) {
setErrorMessage("Please select at least two PDFs to merge.");
return;
}
const formData = new FormData();
filesToMerge.forEach((file) => formData.append("fileInput", file));
setIsLoading(true);
setErrorMessage(null);
try {
const response = await fetch("/api/v1/general/merge-pdfs", {
method: "POST",
body: formData,
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Failed to merge PDFs: ${errorText}`);
}
const blob = await response.blob();
const url = URL.createObjectURL(blob);
setDownloadUrl(url);
setLocalDownloadUrl(url);
} catch (error: any) {
setErrorMessage(error.message || "Unknown error occurred.");
} finally {
setIsLoading(false);
}
};
const handleCheckboxChange = (index: number) => {
setSelectedFiles((prev) =>
prev.map((selected, i) => (i === index ? !selected : selected))
);
};
const selectedCount = selectedFiles.filter(Boolean).length;
return (
<Paper shadow="xs" radius="md" p="md" withBorder>
<Stack>
<Text fw={500} size="lg">Merge PDFs</Text>
<Stack gap={4}>
{files.map((file, index) => (
<Group key={index} gap="xs">
<Checkbox
checked={selectedFiles[index] || false}
onChange={() => handleCheckboxChange(index)}
/>
<Text size="sm">{file.name}</Text>
</Group>
))}
</Stack>
{selectedCount < 2 && (
<Text size="sm" c="red">
Please select at least two PDFs to merge.
</Text>
)}
<Button
onClick={handleMerge}
loading={isLoading}
disabled={selectedCount < 2 || isLoading}
mt="md"
>
Merge PDFs
</Button>
{errorMessage && (
<Alert color="red" mt="sm">
{errorMessage}
</Alert>
)}
{downloadUrl && (
<Button
component="a"
href={downloadUrl}
download="merged.pdf"
color="green"
variant="light"
mt="md"
>
Download Merged PDF
</Button>
)}
</Stack>
</Paper>
);
};
export default MergePdfPanel;

208
frontend/src/tools/Split.js
View File

@@ -1,208 +0,0 @@
import React, { useState } from "react";
import axios from "axios";
import {
Button,
Select,
TextInput,
Checkbox,
Notification,
Stack,
} from "@mantine/core";
import DownloadIcon from "@mui/icons-material/Download";
export default function SplitPdfPanel({ file, downloadUrl, setDownloadUrl }) {
const [mode, setMode] = useState("byPages");
const [pageNumbers, setPageNumbers] = useState("");
const [horizontalDivisions, setHorizontalDivisions] = useState("0");
const [verticalDivisions, setVerticalDivisions] = useState("1");
const [mergeSections, setMergeSections] = useState(false);
const [splitType, setSplitType] = useState("size");
const [splitValue, setSplitValue] = useState("");
const [bookmarkLevel, setBookmarkLevel] = useState("0");
const [includeMetadata, setIncludeMetadata] = useState(false);
const [allowDuplicates, setAllowDuplicates] = useState(false);
const [status, setStatus] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
if (!file) {
setStatus("Please upload a PDF first.");
return;
}
const formData = new FormData();
formData.append("fileInput", file.file);
let endpoint = "";
switch (mode) {
case "byPages":
formData.append("pageNumbers", pageNumbers);
endpoint = "/api/v1/general/split-pages";
break;
case "bySections":
formData.append("horizontalDivisions", horizontalDivisions);
formData.append("verticalDivisions", verticalDivisions);
formData.append("merge", mergeSections);
endpoint = "/api/v1/general/split-pdf-by-sections";
break;
case "bySizeOrCount":
formData.append("splitType", splitType === "size" ? 0 : splitType === "pages" ? 1 : 2);
formData.append("splitValue", splitValue);
endpoint = "/api/v1/general/split-by-size-or-count";
break;
case "byChapters":
formData.append("bookmarkLevel", bookmarkLevel);
formData.append("includeMetadata", includeMetadata);
formData.append("allowDuplicates", allowDuplicates);
endpoint = "/api/v1/general/split-pdf-by-chapters";
break;
default:
return;
}
setStatus("Processing split...");
setIsLoading(true);
setErrorMessage(null);
try {
const response = await axios.post(endpoint, formData, { responseType: "blob" });
const blob = new Blob([response.data], { type: "application/zip" });
const url = window.URL.createObjectURL(blob);
setDownloadUrl(url);
setStatus("Download ready.");
} catch (error) {
console.error(error);
setErrorMessage(error.response?.data || "An error occurred while splitting the PDF.");
setStatus("Split failed.");
} finally {
setIsLoading(false);
}
};
return (
<form onSubmit={handleSubmit} >
<h3 className="font-semibold">Split PDF</h3>
<Stack spacing="sm" mb={16}>
<Select
label="Split Mode"
value={mode}
onChange={setMode}
data={[
{ value: "byPages", label: "Split by Pages (e.g. 1,3,5-10)" },
{ value: "bySections", label: "Split by Grid Sections" },
{ value: "bySizeOrCount", label: "Split by Size or Count" },
{ value: "byChapters", label: "Split by Chapters" },
]}
/>
{mode === "byPages" && (
<TextInput
label="Pages"
placeholder="e.g. 1,3,5-10"
value={pageNumbers}
onChange={(e) => setPageNumbers(e.target.value)}
/>
)}
{mode === "bySections" && (
<Stack spacing="sm" gap={16}>
<TextInput
label="Horizontal Divisions"
type="number"
min="0"
max="300"
value={horizontalDivisions}
onChange={(e) => setHorizontalDivisions(e.target.value)}
/>
<TextInput
label="Vertical Divisions"
type="number"
min="0"
max="300"
value={verticalDivisions}
onChange={(e) => setVerticalDivisions(e.target.value)}
/>
<Checkbox
label="Merge sections into one PDF"
checked={mergeSections}
onChange={(e) => setMergeSections(e.currentTarget.checked)}
/>
</Stack>
)}
{mode === "bySizeOrCount" && (
<Stack spacing="sm" gap={16}>
<Select
label="Split Type"
value={splitType}
onChange={setSplitType}
data={[
{ value: "size", label: "By Size" },
{ value: "pages", label: "By Page Count" },
{ value: "docs", label: "By Document Count" },
]}
/>
<TextInput
label="Split Value"
placeholder="e.g. 10MB or 5 pages"
value={splitValue}
onChange={(e) => setSplitValue(e.target.value)}
/>
</Stack>
)}
{mode === "byChapters" && (
<Stack spacing="sm">
<TextInput
label="Bookmark Level"
type="number"
value={bookmarkLevel}
onChange={(e) => setBookmarkLevel(e.target.value)}
/>
<Checkbox
label="Include Metadata"
checked={includeMetadata}
onChange={(e) => setIncludeMetadata(e.currentTarget.checked)}
/>
<Checkbox
label="Allow Duplicate Bookmarks"
checked={allowDuplicates}
onChange={(e) => setAllowDuplicates(e.currentTarget.checked)}
/>
</Stack>
)}
<Button type="submit" loading={isLoading} fullWidth>
{isLoading ? "Processing..." : "Split PDF"}
</Button>
{status && <p className="text-xs text-gray-600">{status}</p>}
{errorMessage && (
<Notification color="red" title="Error" onClose={() => setErrorMessage(null)}>
{errorMessage}
</Notification>
)}
{status === "Download ready." && downloadUrl && (
<Button
component="a"
href={downloadUrl}
download="split_output.zip"
leftIcon={<DownloadIcon />}
color="green"
fullWidth
>
Download Split PDF
</Button>
)}
</Stack>
</form>
);
}

232
frontend/src/tools/Split.tsx Normal file
View File

@@ -0,0 +1,232 @@
import React, { useState } from "react";
import axios from "axios";
import {
Button,
Select,
TextInput,
Checkbox,
Notification,
Stack,
} from "@mantine/core";
import DownloadIcon from "@mui/icons-material/Download";
export interface SplitPdfPanelProps {
file: { file: File; url: string } | null;
downloadUrl?: string | null;
setDownloadUrl: (url: string | null) => void;
params: {
mode: string;
pages: string;
hDiv: string;
vDiv: string;
merge: boolean;
splitType: string;
splitValue: string;
bookmarkLevel: string;
includeMetadata: boolean;
allowDuplicates: boolean;
};
updateParams: (newParams: Partial<SplitPdfPanelProps['params']>) => void;
}
const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
file,
downloadUrl,
setDownloadUrl,
params,
updateParams,
}) => {
const [status, setStatus] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const {
mode, pages, hDiv, vDiv, merge,
splitType, splitValue, bookmarkLevel,
includeMetadata, allowDuplicates
} = params;
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!file) {
setStatus("Please upload a PDF first.");
return;
}
const formData = new FormData();
formData.append("fileInput", file.file);
let endpoint = "";
switch (mode) {
case "byPages":
formData.append("pageNumbers", pages);
endpoint = "/api/v1/general/split-pages";
break;
case "bySections":
formData.append("horizontalDivisions", hDiv);
formData.append("verticalDivisions", vDiv);
formData.append("merge", merge.toString());
endpoint = "/api/v1/general/split-pdf-by-sections";
break;
case "bySizeOrCount":
formData.append(
"splitType",
splitType === "size" ? "0" : splitType === "pages" ? "1" : "2"
);
formData.append("splitValue", splitValue);
endpoint = "/api/v1/general/split-by-size-or-count";
break;
case "byChapters":
formData.append("bookmarkLevel", bookmarkLevel);
formData.append("includeMetadata", includeMetadata.toString());
formData.append("allowDuplicates", allowDuplicates.toString());
endpoint = "/api/v1/general/split-pdf-by-chapters";
break;
default:
return;
}
setStatus("Processing split...");
setIsLoading(true);
setErrorMessage(null);
try {
const response = await axios.post(endpoint, formData, { responseType: "blob" });
const blob = new Blob([response.data], { type: "application/zip" });
const url = window.URL.createObjectURL(blob);
setDownloadUrl(url);
setStatus("Download ready.");
} catch (error: any) {
console.error(error);
setErrorMessage(
error.response?.data || "An error occurred while splitting the PDF."
);
setStatus("Split failed.");
} finally {
setIsLoading(false);
}
};
return (
<form onSubmit={handleSubmit}>
<Stack gap="sm" mb={16}>
<Select
label="Split Mode"
value={mode}
onChange={(v) => v && updateParams({ mode: v })}
data={[
{ value: "byPages", label: "Split by Pages (e.g. 1,3,5-10)" },
{ value: "bySections", label: "Split by Grid Sections" },
{ value: "bySizeOrCount", label: "Split by Size or Count" },
{ value: "byChapters", label: "Split by Chapters" },
]}
/>
{mode === "byPages" && (
<TextInput
label="Pages"
placeholder="e.g. 1,3,5-10"
value={pages}
onChange={(e) => updateParams({ pages: e.target.value })}
/>
)}
{mode === "bySections" && (
<Stack gap="sm">
<TextInput
label="Horizontal Divisions"
type="number"
min="0"
max="300"
value={hDiv}
onChange={(e) => updateParams({ hDiv: e.target.value })}
/>
<TextInput
label="Vertical Divisions"
type="number"
min="0"
max="300"
value={vDiv}
onChange={(e) => updateParams({ vDiv: e.target.value })}
/>
<Checkbox
label="Merge sections into one PDF"
checked={merge}
onChange={(e) => updateParams({ merge: e.currentTarget.checked })}
/>
</Stack>
)}
{mode === "bySizeOrCount" && (
<Stack gap="sm">
<Select
label="Split Type"
value={splitType}
onChange={(v) => v && updateParams({ splitType: v })}
data={[
{ value: "size", label: "By Size" },
{ value: "pages", label: "By Page Count" },
{ value: "docs", label: "By Document Count" },
]}
/>
<TextInput
label="Split Value"
placeholder="e.g. 10MB or 5 pages"
value={splitValue}
onChange={(e) => updateParams({ splitValue: e.target.value })}
/>
</Stack>
)}
{mode === "byChapters" && (
<Stack gap="sm">
<TextInput
label="Bookmark Level"
type="number"
value={bookmarkLevel}
onChange={(e) => updateParams({ bookmarkLevel: e.target.value })}
/>
<Checkbox
label="Include Metadata"
checked={includeMetadata}
onChange={(e) => updateParams({ includeMetadata: e.currentTarget.checked })}
/>
<Checkbox
label="Allow Duplicate Bookmarks"
checked={allowDuplicates}
onChange={(e) => updateParams({ allowDuplicates: e.currentTarget.checked })}
/>
</Stack>
)}
<Button type="submit" loading={isLoading} fullWidth>
{isLoading ? "Processing..." : "Split PDF"}
</Button>
{status && <p className="text-xs text-gray-600">{status}</p>}
{errorMessage && (
<Notification color="red" title="Error" onClose={() => setErrorMessage(null)}>
{errorMessage}
</Notification>
)}
{status === "Download ready." && downloadUrl && (
<Button
component="a"
href={downloadUrl}
download="split_output.zip"
leftSection={<DownloadIcon />}
color="green"
fullWidth
>
Download Split PDF
</Button>
)}
</Stack>
</form>
);
};
export default SplitPdfPanel;