first commit
This commit is contained in:
225
src/components/ReorderPanel.tsx
Normal file
225
src/components/ReorderPanel.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
interface ReorderPanelProps {
|
||||
pageCount: number;
|
||||
thumbnails: string[] | null;
|
||||
isBusy: boolean;
|
||||
hasPdf: boolean;
|
||||
rotations: Record<number, number>;
|
||||
onRotate: (pageIndex: number) => void;
|
||||
onExportReordered: (order: number[]) => void;
|
||||
reorderDownloadUrl: string | null;
|
||||
reorderFilename: string | null;
|
||||
}
|
||||
|
||||
const ReorderPanel: React.FC<ReorderPanelProps> = ({
|
||||
pageCount,
|
||||
thumbnails,
|
||||
isBusy,
|
||||
hasPdf,
|
||||
rotations,
|
||||
onRotate,
|
||||
onExportReordered,
|
||||
reorderDownloadUrl,
|
||||
reorderFilename,
|
||||
}) => {
|
||||
const [order, setOrder] = useState<number[]>([]);
|
||||
const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (pageCount > 0) {
|
||||
setOrder(Array.from({ length: pageCount }, (_, i) => i));
|
||||
} else {
|
||||
setOrder([]);
|
||||
}
|
||||
}, [pageCount]);
|
||||
|
||||
const handleDragStart = (index: number) => (e: React.DragEvent) => {
|
||||
setDraggingIndex(index);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
const handleDragOver = (index: number) => (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
const handleDrop = (index: number) => (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
if (draggingIndex === null || draggingIndex === index) return;
|
||||
|
||||
setOrder((prev) => {
|
||||
const updated = [...prev];
|
||||
const [moved] = updated.splice(draggingIndex, 1);
|
||||
updated.splice(index, 0, moved);
|
||||
return updated;
|
||||
});
|
||||
setDraggingIndex(null);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggingIndex(null);
|
||||
};
|
||||
|
||||
const handleDelete = (visualIndex: number) => () => {
|
||||
setOrder((prev) => prev.filter((_, idx) => idx !== visualIndex));
|
||||
};
|
||||
|
||||
const handleRotateClick = (pageIndex: number) => () => {
|
||||
onRotate(pageIndex);
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
if (!hasPdf || order.length === 0) return;
|
||||
onExportReordered(order);
|
||||
};
|
||||
|
||||
if (!hasPdf) {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Reorder pages</h2>
|
||||
<p>Load a PDF first to reorder, delete, or rotate its pages.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Reorder / delete / rotate</h2>
|
||||
<p>
|
||||
Drag pages to reorder them. Use rotate and delete controls below each
|
||||
thumbnail. All changes stay in memory until you export a new PDF.
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '0.5rem',
|
||||
marginBottom: '0.75rem',
|
||||
}}
|
||||
>
|
||||
{order.map((pageIndex, visualIndex) => {
|
||||
const thumb = thumbnails?.[pageIndex];
|
||||
const isDragging = visualIndex === draggingIndex;
|
||||
const rotation = rotations[pageIndex] ?? 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${pageIndex}-${visualIndex}`}
|
||||
draggable
|
||||
onDragStart={handleDragStart(visualIndex)}
|
||||
onDragOver={handleDragOver(visualIndex)}
|
||||
onDrop={handleDrop(visualIndex)}
|
||||
onDragEnd={handleDragEnd}
|
||||
style={{
|
||||
width: '130px',
|
||||
padding: '0.4rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: isDragging ? '2px solid #2563eb' : '1px solid #e5e7eb',
|
||||
background: isDragging ? '#dbeafe' : '#f9fafb',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '0.25rem',
|
||||
cursor: 'grab',
|
||||
}}
|
||||
>
|
||||
{thumb ? (
|
||||
<img
|
||||
src={thumb}
|
||||
alt={`Page ${pageIndex + 1}`}
|
||||
style={{
|
||||
maxHeight: '90px',
|
||||
width: 'auto',
|
||||
borderRadius: '0.25rem',
|
||||
border: '1px solid #e5e7eb',
|
||||
background: 'white',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '60px',
|
||||
height: '80px',
|
||||
borderRadius: '0.25rem',
|
||||
border: '1px dashed #d1d5db',
|
||||
background: '#f3f4f6',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span style={{ fontSize: '0.8rem' }}>Page {pageIndex + 1}</span>
|
||||
<span style={{ fontSize: '0.7rem', color: '#6b7280' }}>
|
||||
Pos {visualIndex + 1} · Rot {rotation}°
|
||||
</span>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.25rem',
|
||||
marginTop: '0.25rem',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRotateClick(pageIndex)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '0.15rem 0.4rem',
|
||||
fontSize: '0.75rem',
|
||||
background: '#e5e7eb',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
↻ 90°
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete(visualIndex)}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: '999px',
|
||||
padding: '0.15rem 0.4rem',
|
||||
fontSize: '0.75rem',
|
||||
background: '#fecaca',
|
||||
color: '#b91c1c',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
title="Remove this page from the exported PDF"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="button-row">
|
||||
<button
|
||||
className="primary"
|
||||
disabled={!hasPdf || isBusy || order.length === 0}
|
||||
onClick={handleExport}
|
||||
>
|
||||
{isBusy ? 'Exporting…' : 'Export reordered PDF'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{reorderDownloadUrl && reorderFilename && (
|
||||
<div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
|
||||
<strong>Reordered result:</strong>{' '}
|
||||
<a
|
||||
href={reorderDownloadUrl}
|
||||
download={reorderFilename}
|
||||
className="download-link"
|
||||
>
|
||||
Download {reorderFilename}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReorderPanel;
|
||||
Reference in New Issue
Block a user