feat: enhance PDF tools with new features and UI improvements
- Added 'Extract Attachments' and 'Edit Attachments' functionalities to manage embedded files in PDFs. - Introduced new splitting options: by bookmarks and by a specified number of pages (N times). - Updated the user interface to include new options and improved layout for better usability. - Enhanced the GitHub link display with dynamic star count retrieval. - Bumped version to 1.4.0 and updated footer to reflect the new version. - Refactored existing code for better maintainability and added new TypeScript definitions for the new features.
This commit is contained in:
abdullahalam123
815
src/js/logic/pdf-multi-tool.ts
Normal file
815
src/js/logic/pdf-multi-tool.ts
Normal file
@@ -0,0 +1,815 @@
|
||||
import { createIcons, icons } from 'lucide';
|
||||
import { degrees, PDFDocument as PDFLibDocument } from 'pdf-lib';
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
import JSZip from 'jszip';
|
||||
import Sortable from 'sortablejs';
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url
|
||||
).toString();
|
||||
|
||||
interface PageData {
|
||||
pdfIndex: number;
|
||||
pageIndex: number;
|
||||
rotation: number;
|
||||
visualRotation: number;
|
||||
canvas: HTMLCanvasElement;
|
||||
pdfDoc: PDFLibDocument;
|
||||
originalPageIndex: number;
|
||||
}
|
||||
|
||||
let allPages: PageData[] = [];
|
||||
let selectedPages: Set<number> = new Set();
|
||||
let currentPdfDocs: PDFLibDocument[] = [];
|
||||
let splitMarkers: Set<number> = new Set();
|
||||
let isRendering = false;
|
||||
let renderCancelled = false;
|
||||
|
||||
const pageCanvasCache = new Map<string, HTMLCanvasElement>();
|
||||
|
||||
type Snapshot = { allPages: PageData[]; selectedPages: number[]; splitMarkers: number[] };
|
||||
const undoStack: Snapshot[] = [];
|
||||
const redoStack: Snapshot[] = [];
|
||||
|
||||
function snapshot() {
|
||||
const snap: Snapshot = {
|
||||
allPages: allPages.map(p => ({ ...p })),
|
||||
selectedPages: Array.from(selectedPages),
|
||||
splitMarkers: Array.from(splitMarkers),
|
||||
};
|
||||
undoStack.push(snap);
|
||||
redoStack.length = 0;
|
||||
}
|
||||
|
||||
function restore(snap: Snapshot) {
|
||||
allPages = snap.allPages.map(p => ({ ...p }));
|
||||
selectedPages = new Set(snap.selectedPages);
|
||||
splitMarkers = new Set(snap.splitMarkers);
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
function showModal(title: string, message: string, type: 'info' | 'error' | 'success' = 'info') {
|
||||
const modal = document.getElementById('modal');
|
||||
const modalTitle = document.getElementById('modal-title');
|
||||
const modalMessage = document.getElementById('modal-message');
|
||||
const modalIcon = document.getElementById('modal-icon');
|
||||
|
||||
if (!modal || !modalTitle || !modalMessage || !modalIcon) return;
|
||||
|
||||
modalTitle.textContent = title;
|
||||
modalMessage.textContent = message;
|
||||
|
||||
const iconMap = {
|
||||
info: 'info',
|
||||
error: 'alert-circle',
|
||||
success: 'check-circle'
|
||||
};
|
||||
const colorMap = {
|
||||
info: 'text-blue-400',
|
||||
error: 'text-red-400',
|
||||
success: 'text-green-400'
|
||||
};
|
||||
|
||||
modalIcon.innerHTML = `<i data-lucide="${iconMap[type]}" class="w-12 h-12 ${colorMap[type]}"></i>`;
|
||||
modal.classList.remove('hidden');
|
||||
createIcons({ icons });
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
const modal = document.getElementById('modal');
|
||||
if (modal) modal.classList.add('hidden');
|
||||
}
|
||||
|
||||
function showLoading(current: number, total: number) {
|
||||
const loader = document.getElementById('loading-overlay');
|
||||
const progress = document.getElementById('loading-progress');
|
||||
const text = document.getElementById('loading-text');
|
||||
|
||||
if (!loader || !progress || !text) return;
|
||||
|
||||
loader.classList.remove('hidden');
|
||||
const percentage = Math.round((current / total) * 100);
|
||||
progress.style.width = `${percentage}%`;
|
||||
text.textContent = `Rendering pages... ${current} of ${total}`;
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
const loader = document.getElementById('loading-overlay');
|
||||
if (loader) loader.classList.add('hidden');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initializeTool();
|
||||
});
|
||||
|
||||
function initializeTool() {
|
||||
createIcons({ icons });
|
||||
|
||||
document.getElementById('close-tool-btn')?.addEventListener('click', () => {
|
||||
window.location.href = '../../index.html';
|
||||
});
|
||||
|
||||
document.getElementById('upload-pdfs-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) {
|
||||
showModal('Please Wait', 'Pages are still being rendered. Please wait...', 'info');
|
||||
return;
|
||||
}
|
||||
document.getElementById('pdf-file-input')?.click();
|
||||
});
|
||||
|
||||
document.getElementById('pdf-file-input')?.addEventListener('change', handlePdfUpload);
|
||||
document.getElementById('insert-pdf-input')?.addEventListener('change', handleInsertPdf);
|
||||
|
||||
document.getElementById('bulk-rotate-left-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
snapshot();
|
||||
bulkRotate(-90);
|
||||
});
|
||||
document.getElementById('bulk-rotate-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
snapshot();
|
||||
bulkRotate(90);
|
||||
});
|
||||
document.getElementById('bulk-delete-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
snapshot();
|
||||
bulkDelete();
|
||||
});
|
||||
document.getElementById('bulk-duplicate-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
snapshot();
|
||||
bulkDuplicate();
|
||||
});
|
||||
document.getElementById('bulk-split-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
snapshot();
|
||||
bulkSplit();
|
||||
});
|
||||
document.getElementById('bulk-download-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
bulkDownload();
|
||||
});
|
||||
document.getElementById('select-all-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
selectAll();
|
||||
});
|
||||
document.getElementById('deselect-all-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
deselectAll();
|
||||
});
|
||||
document.getElementById('export-pdf-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
downloadAll();
|
||||
});
|
||||
document.getElementById('add-blank-page-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
snapshot();
|
||||
addBlankPage();
|
||||
});
|
||||
document.getElementById('undo-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
const last = undoStack.pop();
|
||||
if (last) {
|
||||
const current: Snapshot = {
|
||||
allPages: allPages.map(p => ({ ...p })),
|
||||
selectedPages: Array.from(selectedPages),
|
||||
splitMarkers: Array.from(splitMarkers),
|
||||
};
|
||||
redoStack.push(current);
|
||||
restore(last);
|
||||
}
|
||||
});
|
||||
document.getElementById('redo-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) return;
|
||||
const next = redoStack.pop();
|
||||
if (next) {
|
||||
const current: Snapshot = {
|
||||
allPages: allPages.map(p => ({ ...p })),
|
||||
selectedPages: Array.from(selectedPages),
|
||||
splitMarkers: Array.from(splitMarkers),
|
||||
};
|
||||
undoStack.push(current);
|
||||
restore(next);
|
||||
}
|
||||
});
|
||||
document.getElementById('reset-btn')?.addEventListener('click', () => {
|
||||
if (isRendering) {
|
||||
renderCancelled = true;
|
||||
setTimeout(() => resetAll(), 100);
|
||||
} else {
|
||||
resetAll();
|
||||
}
|
||||
});
|
||||
|
||||
// Modal close button
|
||||
document.getElementById('modal-close-btn')?.addEventListener('click', hideModal);
|
||||
document.getElementById('modal')?.addEventListener('click', (e) => {
|
||||
if (e.target === document.getElementById('modal')) {
|
||||
hideModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Drag and drop
|
||||
const uploadArea = document.getElementById('upload-area');
|
||||
if (uploadArea) {
|
||||
uploadArea.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.add('border-indigo-500');
|
||||
});
|
||||
uploadArea.addEventListener('dragleave', () => {
|
||||
uploadArea.classList.remove('border-indigo-500');
|
||||
});
|
||||
uploadArea.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.remove('border-indigo-500');
|
||||
const files = Array.from(e.dataTransfer?.files || []).filter(f => f.type === 'application/pdf');
|
||||
if (files.length > 0) {
|
||||
loadPdfs(files);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Show upload area initially
|
||||
document.getElementById('upload-area')?.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
snapshot();
|
||||
allPages = [];
|
||||
selectedPages.clear();
|
||||
splitMarkers.clear();
|
||||
currentPdfDocs = [];
|
||||
pageCanvasCache.clear();
|
||||
renderCancelled = false;
|
||||
isRendering = false;
|
||||
updatePageDisplay();
|
||||
document.getElementById('upload-area')?.classList.remove('hidden');
|
||||
}
|
||||
|
||||
async function handlePdfUpload(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const files = Array.from(input.files || []);
|
||||
if (files.length > 0) {
|
||||
await loadPdfs(files);
|
||||
}
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
async function loadPdfs(files: File[]) {
|
||||
if (isRendering) {
|
||||
showModal('Please Wait', 'Pages are still being rendered. Please wait...', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
const uploadArea = document.getElementById('upload-area');
|
||||
if (uploadArea) uploadArea.classList.add('hidden');
|
||||
|
||||
isRendering = true;
|
||||
renderCancelled = false;
|
||||
let totalPages = 0;
|
||||
let currentPage = 0;
|
||||
|
||||
try {
|
||||
// First pass: count total pages
|
||||
const pdfDocs: PDFLibDocument[] = [];
|
||||
for (const file of files) {
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const pdfDoc = await PDFLibDocument.load(arrayBuffer);
|
||||
pdfDocs.push(pdfDoc);
|
||||
totalPages += pdfDoc.getPageCount();
|
||||
} catch (e) {
|
||||
console.error(`Failed to load PDF ${file.name}:`, e);
|
||||
showModal('Error', `Failed to load ${file.name}. The file may be corrupted.`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Second pass: render pages
|
||||
for (const pdfDoc of pdfDocs) {
|
||||
if (renderCancelled) break;
|
||||
|
||||
currentPdfDocs.push(pdfDoc);
|
||||
const numPages = pdfDoc.getPageCount();
|
||||
|
||||
for (let i = 0; i < numPages; i++) {
|
||||
if (renderCancelled) break;
|
||||
|
||||
currentPage++;
|
||||
showLoading(currentPage, totalPages);
|
||||
await renderPage(pdfDoc, i, currentPdfDocs.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
if (!renderCancelled) {
|
||||
setupSortable();
|
||||
createIcons({ icons });
|
||||
}
|
||||
} finally {
|
||||
hideLoading();
|
||||
isRendering = false;
|
||||
if (renderCancelled) {
|
||||
renderCancelled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getCacheKey(pdfIndex: number, pageIndex: number): string {
|
||||
// Removed rotation from cache key - canvas is always rendered at 0 degrees
|
||||
return `${pdfIndex}-${pageIndex}`;
|
||||
}
|
||||
|
||||
async function renderPage(pdfDoc: PDFLibDocument, pageIndex: number, pdfIndex: number) {
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
if (!pagesContainer) return;
|
||||
|
||||
// Check cache first
|
||||
const cacheKey = getCacheKey(pdfIndex, pageIndex);
|
||||
let canvas: HTMLCanvasElement;
|
||||
|
||||
if (pageCanvasCache.has(cacheKey)) {
|
||||
canvas = pageCanvasCache.get(cacheKey)!;
|
||||
} else {
|
||||
// Render page preview at 0 degrees rotation using pdfjs
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
const pdf = await pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }).promise;
|
||||
const page = await pdf.getPage(pageIndex + 1);
|
||||
|
||||
// Always render at 0 rotation - visual rotation is applied via CSS
|
||||
const viewport = page.getViewport({ scale: 0.5, rotation: 0 });
|
||||
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
const context = canvas.getContext('2d');
|
||||
if (!context) return;
|
||||
|
||||
await page.render({
|
||||
canvasContext: context,
|
||||
viewport,
|
||||
background: 'white',
|
||||
canvas
|
||||
}).promise;
|
||||
|
||||
// Cache the canvas
|
||||
pageCanvasCache.set(cacheKey, canvas);
|
||||
}
|
||||
|
||||
const pageData: PageData = {
|
||||
pdfIndex,
|
||||
pageIndex,
|
||||
rotation: 0, // Actual rotation to apply when saving PDF
|
||||
visualRotation: 0, // Visual rotation for display only
|
||||
canvas,
|
||||
pdfDoc,
|
||||
originalPageIndex: pageIndex,
|
||||
};
|
||||
|
||||
allPages.push(pageData);
|
||||
createPageCard(pageData, allPages.length - 1);
|
||||
}
|
||||
|
||||
function createPageCard(pageData: PageData, index: number) {
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
if (!pagesContainer) return;
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'bg-gray-800 rounded-lg border-2 border-gray-700 p-2 relative group cursor-move';
|
||||
card.dataset.pageIndex = index.toString();
|
||||
if (selectedPages.has(index)) {
|
||||
card.classList.add('border-indigo-500', 'ring-2', 'ring-indigo-500');
|
||||
}
|
||||
|
||||
// Page preview
|
||||
const preview = document.createElement('div');
|
||||
preview.className = 'bg-white rounded mb-2 overflow-hidden w-full flex items-center justify-center relative';
|
||||
preview.style.minHeight = '160px';
|
||||
preview.style.maxHeight = '256px';
|
||||
|
||||
const previewCanvas = pageData.canvas;
|
||||
previewCanvas.className = 'max-w-full max-h-full object-contain';
|
||||
|
||||
// Apply visual rotation using CSS transform
|
||||
previewCanvas.style.transform = `rotate(${pageData.visualRotation}deg)`;
|
||||
|
||||
// Adjust container dimensions based on rotation
|
||||
if (pageData.visualRotation === 90 || pageData.visualRotation === 270) {
|
||||
preview.style.aspectRatio = `${previewCanvas.height} / ${previewCanvas.width}`;
|
||||
} else {
|
||||
preview.style.aspectRatio = `${previewCanvas.width} / ${previewCanvas.height}`;
|
||||
}
|
||||
|
||||
preview.appendChild(previewCanvas);
|
||||
|
||||
// Page info
|
||||
const info = document.createElement('div');
|
||||
info.className = 'text-xs text-gray-400 text-center mb-2';
|
||||
info.textContent = `Page ${index + 1}`;
|
||||
|
||||
// Actions toolbar
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'flex items-center justify-center gap-1 sm:opacity-0 group-hover:opacity-100 transition-opacity';
|
||||
|
||||
// Select checkbox
|
||||
const selectBtn = document.createElement('button');
|
||||
selectBtn.className = 'absolute top-2 right-2 p-1 rounded bg-gray-900/70 hover:bg-gray-800 z-10';
|
||||
selectBtn.innerHTML = selectedPages.has(index)
|
||||
? '<i data-lucide="check-square" class="w-4 h-4 text-indigo-400"></i>'
|
||||
: '<i data-lucide="square" class="w-4 h-4 text-gray-200"></i>';
|
||||
selectBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
toggleSelectOptimized(index);
|
||||
};
|
||||
|
||||
// Rotate button
|
||||
const rotateBtn = document.createElement('button');
|
||||
rotateBtn.className = 'p-1 rounded hover:bg-gray-700';
|
||||
rotateBtn.innerHTML = '<i data-lucide="rotate-cw" class="w-4 h-4 text-gray-300"></i>';
|
||||
rotateBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
rotatePage(index, 90);
|
||||
};
|
||||
const rotateLeftBtn = document.createElement('button');
|
||||
rotateLeftBtn.className = 'p-1 rounded hover:bg-gray-700';
|
||||
rotateLeftBtn.innerHTML = '<i data-lucide="rotate-ccw" class="w-4 h-4 text-gray-300"></i>';
|
||||
rotateLeftBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
rotatePage(index, -90);
|
||||
};
|
||||
|
||||
// Duplicate button
|
||||
const duplicateBtn = document.createElement('button');
|
||||
duplicateBtn.className = 'p-1 rounded hover:bg-gray-700';
|
||||
duplicateBtn.innerHTML = '<i data-lucide="copy" class="w-4 h-4 text-gray-300"></i>';
|
||||
duplicateBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
snapshot();
|
||||
duplicatePage(index);
|
||||
};
|
||||
|
||||
// Delete button
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.className = 'p-1 rounded hover:bg-gray-700';
|
||||
deleteBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4 text-red-400"></i>';
|
||||
deleteBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
snapshot();
|
||||
deletePage(index);
|
||||
};
|
||||
|
||||
// Insert PDF button
|
||||
const insertBtn = document.createElement('button');
|
||||
insertBtn.className = 'p-1 rounded hover:bg-gray-700';
|
||||
insertBtn.innerHTML = '<i data-lucide="file-plus" class="w-4 h-4 text-gray-300"></i>';
|
||||
insertBtn.title = 'Insert PDF after this page';
|
||||
insertBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
snapshot();
|
||||
insertPdfAfter(index);
|
||||
};
|
||||
|
||||
// Split button
|
||||
const splitBtn = document.createElement('button');
|
||||
splitBtn.className = 'p-1 rounded hover:bg-gray-700';
|
||||
splitBtn.innerHTML = '<i data-lucide="scissors" class="w-4 h-4 text-gray-300"></i>';
|
||||
splitBtn.title = 'Toggle split after this page';
|
||||
splitBtn.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
snapshot();
|
||||
toggleSplitMarker(index);
|
||||
renderSplitMarkers();
|
||||
};
|
||||
|
||||
actions.append(rotateLeftBtn, rotateBtn, duplicateBtn, insertBtn, splitBtn, deleteBtn);
|
||||
card.append(preview, info, actions, selectBtn);
|
||||
pagesContainer.appendChild(card);
|
||||
|
||||
createIcons({ icons });
|
||||
}
|
||||
|
||||
function setupSortable() {
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
if (!pagesContainer) return;
|
||||
|
||||
Sortable.create(pagesContainer, {
|
||||
animation: 150,
|
||||
handle: '.cursor-move',
|
||||
onEnd: (evt) => {
|
||||
const oldIndex = evt.oldIndex!;
|
||||
const newIndex = evt.newIndex!;
|
||||
if (oldIndex !== newIndex) {
|
||||
const [moved] = allPages.splice(oldIndex, 1);
|
||||
allPages.splice(newIndex, 0, moved);
|
||||
updatePageNumbers();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Optimized selection that only updates the specific card
|
||||
function toggleSelectOptimized(index: number) {
|
||||
if (selectedPages.has(index)) {
|
||||
selectedPages.delete(index);
|
||||
} else {
|
||||
selectedPages.add(index);
|
||||
}
|
||||
|
||||
// Only update the specific card instead of re-rendering everything
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
if (!pagesContainer) return;
|
||||
|
||||
const card = pagesContainer.children[index] as HTMLElement;
|
||||
if (!card) return;
|
||||
|
||||
const selectBtn = card.querySelector('button[class*="absolute top-2 right-2"]');
|
||||
if (!selectBtn) return;
|
||||
|
||||
if (selectedPages.has(index)) {
|
||||
card.classList.add('border-indigo-500', 'ring-2', 'ring-indigo-500');
|
||||
selectBtn.innerHTML = '<i data-lucide="check-square" class="w-4 h-4 text-indigo-400"></i>';
|
||||
} else {
|
||||
card.classList.remove('border-indigo-500', 'ring-2', 'ring-indigo-500');
|
||||
selectBtn.innerHTML = '<i data-lucide="square" class="w-4 h-4 text-gray-200"></i>';
|
||||
}
|
||||
|
||||
createIcons({ icons });
|
||||
}
|
||||
|
||||
function selectAll() {
|
||||
selectedPages.clear();
|
||||
allPages.forEach((_, index) => selectedPages.add(index));
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
function deselectAll() {
|
||||
selectedPages.clear();
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
// Instant rotation - just update visual rotation, no re-rendering
|
||||
function rotatePage(index: number, delta: number) {
|
||||
snapshot();
|
||||
|
||||
const pageData = allPages[index];
|
||||
pageData.visualRotation = (pageData.visualRotation + delta + 360) % 360;
|
||||
pageData.rotation = (pageData.rotation + delta + 360) % 360;
|
||||
|
||||
// Just update the specific card's transform
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
if (!pagesContainer) return;
|
||||
|
||||
const card = pagesContainer.children[index] as HTMLElement;
|
||||
if (!card) return;
|
||||
|
||||
const canvas = card.querySelector('canvas');
|
||||
const preview = card.querySelector('.bg-white');
|
||||
|
||||
if (canvas && preview) {
|
||||
canvas.style.transform = `rotate(${pageData.visualRotation}deg)`;
|
||||
|
||||
// Adjust container aspect ratio
|
||||
if (pageData.visualRotation === 90 || pageData.visualRotation === 270) {
|
||||
(preview as HTMLElement).style.aspectRatio = `${canvas.height} / ${canvas.width}`;
|
||||
} else {
|
||||
(preview as HTMLElement).style.aspectRatio = `${canvas.width} / ${canvas.height}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function duplicatePage(index: number) {
|
||||
const originalPageData = allPages[index];
|
||||
const originalCanvas = originalPageData.canvas;
|
||||
|
||||
// Create a new canvas and copy content
|
||||
const newCanvas = document.createElement('canvas');
|
||||
newCanvas.width = originalCanvas.width;
|
||||
newCanvas.height = originalCanvas.height;
|
||||
|
||||
const newContext = newCanvas.getContext('2d');
|
||||
if (newContext) {
|
||||
newContext.drawImage(originalCanvas, 0, 0);
|
||||
}
|
||||
|
||||
const newPageData: PageData = {
|
||||
...originalPageData,
|
||||
canvas: newCanvas,
|
||||
};
|
||||
|
||||
const newIndex = index + 1;
|
||||
allPages.splice(newIndex, 0, newPageData);
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
function deletePage(index: number) {
|
||||
allPages.splice(index, 1);
|
||||
selectedPages.delete(index);
|
||||
// Update selected indices
|
||||
const newSelected = new Set<number>();
|
||||
selectedPages.forEach(i => {
|
||||
if (i > index) newSelected.add(i - 1);
|
||||
else if (i < index) newSelected.add(i);
|
||||
});
|
||||
selectedPages = newSelected;
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
async function insertPdfAfter(index: number) {
|
||||
document.getElementById('insert-pdf-input')?.click();
|
||||
(window as any).__insertAfterIndex = index;
|
||||
}
|
||||
|
||||
async function handleInsertPdf(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const insertAfterIndex = (window as any).__insertAfterIndex;
|
||||
if (insertAfterIndex === undefined) return;
|
||||
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const pdfDoc = await PDFLibDocument.load(arrayBuffer);
|
||||
currentPdfDocs.push(pdfDoc);
|
||||
|
||||
const numPages = pdfDoc.getPageCount();
|
||||
const newPages: PageData[] = [];
|
||||
for (let i = 0; i < numPages; i++) {
|
||||
// Use the existing renderPage function, which adds to allPages
|
||||
await renderPage(pdfDoc, i, currentPdfDocs.length - 1);
|
||||
// Move the newly added page data to the temporary array
|
||||
newPages.push(allPages.pop()!);
|
||||
}
|
||||
|
||||
// Insert pages after the specified index
|
||||
allPages.splice(insertAfterIndex + 1, 0, ...newPages);
|
||||
updatePageDisplay();
|
||||
} catch (e) {
|
||||
console.error('Failed to insert PDF:', e);
|
||||
showModal('Error', 'Failed to insert PDF. The file may be corrupted.', 'error');
|
||||
}
|
||||
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
function toggleSplitMarker(index: number) {
|
||||
if (splitMarkers.has(index)) splitMarkers.delete(index);
|
||||
else splitMarkers.add(index);
|
||||
}
|
||||
|
||||
function renderSplitMarkers() {
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
if (!pagesContainer) return;
|
||||
|
||||
// Remove all existing split markers
|
||||
pagesContainer.querySelectorAll('.split-marker').forEach(m => m.remove());
|
||||
|
||||
// Add split markers between cards
|
||||
Array.from(pagesContainer.children).forEach((cardEl, i) => {
|
||||
if (splitMarkers.has(i)) {
|
||||
const marker = document.createElement('div');
|
||||
marker.className = 'split-marker absolute -right-3 top-0 bottom-0 w-6 flex items-center justify-center z-20 pointer-events-none';
|
||||
marker.innerHTML = '<div class="h-full w-0.5 border-l-2 border-dashed border-blue-400"></div>';
|
||||
(cardEl as HTMLElement).appendChild(marker);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addBlankPage() {
|
||||
// Create a blank page
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 595;
|
||||
canvas.height = 842;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(0, 0, 595, 842);
|
||||
}
|
||||
|
||||
const blankPageData: PageData = {
|
||||
pdfIndex: -1,
|
||||
pageIndex: -1,
|
||||
rotation: 0,
|
||||
visualRotation: 0,
|
||||
canvas,
|
||||
pdfDoc: null as any,
|
||||
originalPageIndex: -1,
|
||||
};
|
||||
|
||||
allPages.push(blankPageData);
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
// Instant bulk rotation - just update visual rotation
|
||||
function bulkRotate(delta: number) {
|
||||
if (selectedPages.size === 0) {
|
||||
showModal('No Selection', 'Please select pages to rotate.', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
selectedPages.forEach(index => {
|
||||
const pageData = allPages[index];
|
||||
pageData.visualRotation = (pageData.visualRotation + delta + 360) % 360;
|
||||
pageData.rotation = (pageData.rotation + delta + 360) % 360;
|
||||
});
|
||||
|
||||
// Update display for all rotated pages
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
function bulkDelete() {
|
||||
if (selectedPages.size === 0) {
|
||||
showModal('No Selection', 'Please select pages to delete.', 'info');
|
||||
return;
|
||||
}
|
||||
const indices = Array.from(selectedPages).sort((a, b) => b - a);
|
||||
indices.forEach(index => allPages.splice(index, 1));
|
||||
selectedPages.clear();
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
function bulkDuplicate() {
|
||||
if (selectedPages.size === 0) {
|
||||
showModal('No Selection', 'Please select pages to duplicate.', 'info');
|
||||
return;
|
||||
}
|
||||
const indices = Array.from(selectedPages).sort((a, b) => b - a);
|
||||
indices.forEach(index => {
|
||||
duplicatePage(index);
|
||||
});
|
||||
selectedPages.clear();
|
||||
updatePageDisplay();
|
||||
}
|
||||
|
||||
function bulkSplit() {
|
||||
if (selectedPages.size === 0) {
|
||||
showModal('No Selection', 'Please select pages to split.', 'info');
|
||||
return;
|
||||
}
|
||||
const indices = Array.from(selectedPages);
|
||||
downloadPagesAsPdf(indices, 'selected-pages.pdf');
|
||||
}
|
||||
|
||||
async function bulkDownload() {
|
||||
if (selectedPages.size === 0) {
|
||||
showModal('No Selection', 'Please select pages to download.', 'info');
|
||||
return;
|
||||
}
|
||||
const indices = Array.from(selectedPages);
|
||||
await downloadPagesAsPdf(indices, 'selected-pages.pdf');
|
||||
}
|
||||
|
||||
async function downloadAll() {
|
||||
const indices = Array.from({ length: allPages.length }, (_, i) => i);
|
||||
await downloadPagesAsPdf(indices, 'all-pages.pdf');
|
||||
}
|
||||
|
||||
async function downloadPagesAsPdf(indices: number[], filename: string) {
|
||||
try {
|
||||
const newPdf = await PDFLibDocument.create();
|
||||
|
||||
for (const index of indices) {
|
||||
const pageData = allPages[index];
|
||||
if (pageData.pdfDoc && pageData.originalPageIndex >= 0) {
|
||||
// Copy page from original PDF
|
||||
const [copiedPage] = await newPdf.copyPages(pageData.pdfDoc, [pageData.originalPageIndex]);
|
||||
const page = newPdf.addPage(copiedPage);
|
||||
|
||||
if (pageData.rotation !== 0) {
|
||||
const currentRotation = page.getRotation().angle;
|
||||
page.setRotation(degrees(currentRotation + pageData.rotation));
|
||||
}
|
||||
} else {
|
||||
newPdf.addPage([595, 842]);
|
||||
}
|
||||
}
|
||||
|
||||
const pdfBytes = await newPdf.save();
|
||||
const blob = new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (e) {
|
||||
console.error('Failed to create PDF:', e);
|
||||
showModal('Error', 'Failed to create PDF.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageDisplay() {
|
||||
const pagesContainer = document.getElementById('pages-container');
|
||||
if (!pagesContainer) return;
|
||||
|
||||
pagesContainer.innerHTML = '';
|
||||
allPages.forEach((pageData, index) => {
|
||||
createPageCard(pageData, index);
|
||||
});
|
||||
setupSortable();
|
||||
renderSplitMarkers();
|
||||
createIcons({ icons });
|
||||
}
|
||||
|
||||
function updatePageNumbers() {
|
||||
updatePageDisplay();
|
||||
}
|
||||
Reference in New Issue
Block a user