djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: add Quick Look page preview and unify thumbnail styles across all tools

Browse Source
This commit is contained in:
alam00000
2026-03-04 00:38:07 +05:30
parent 2aaea50031
commit 84848ab902
12 changed files with 1520 additions and 1082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/logic/delete-pages-page.ts
View File

@@ -159,7 +159,7 @@ async function renderThumbnails() {
for (let i = 1; i <= deleteState.totalPages; i++) { for (let i = 1; i <= deleteState.totalPages; i++) {
const page = await deleteState.pdfJsDoc.getPage(i); const page = await deleteState.pdfJsDoc.getPage(i);
const viewport = page.getViewport({ scale: 0.3 }); const viewport = page.getViewport({ scale: 1 });
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = viewport.width; canvas.width = viewport.width;

3
src/js/logic/merge-pdf-page.ts
View File

@@ -9,6 +9,7 @@ import {
renderPagesProgressively, renderPagesProgressively,
cleanupLazyRendering, cleanupLazyRendering,
} from '../utils/render-utils.js'; } from '../utils/render-utils.js';
import { initPagePreview } from '../utils/page-preview.js';
import { isCpdfAvailable } from '../utils/cpdf-helper.js'; import { isCpdfAvailable } from '../utils/cpdf-helper.js';
import { import {
showWasmRequiredDialog, showWasmRequiredDialog,
@@ -210,6 +211,8 @@ async function renderPageMergeThumbnails() {
}, },
} }
); );
initPagePreview(container, pdfjsDoc);
} }
mergeState.cachedThumbnails = true; mergeState.cachedThumbnails = true;

600
src/js/logic/organize-pdf-page.ts
View File

@@ -1,365 +1,425 @@
import { createIcons, icons } from 'lucide'; import { createIcons, icons } from 'lucide';
import { showAlert, showLoader, hideLoader } from '../ui.js'; import { showAlert, showLoader, hideLoader } from '../ui.js';
import { readFileAsArrayBuffer, formatBytes, downloadFile, getPDFDocument } from '../utils/helpers.js'; import {
readFileAsArrayBuffer,
formatBytes,
downloadFile,
getPDFDocument,
} from '../utils/helpers.js';
import { initPagePreview } from '../utils/page-preview.js';
import { PDFDocument } from 'pdf-lib'; import { PDFDocument } from 'pdf-lib';
import * as pdfjsLib from 'pdfjs-dist'; import * as pdfjsLib from 'pdfjs-dist';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString(); pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url
).toString();
interface OrganizeState { interface OrganizeState {
file: File | null; file: File | null;
pdfDoc: any; pdfDoc: any;
pdfJsDoc: any; pdfJsDoc: any;
totalPages: number; totalPages: number;
sortableInstance: any; sortableInstance: any;
} }
const organizeState: OrganizeState = { const organizeState: OrganizeState = {
file: null, file: null,
pdfDoc: null, pdfDoc: null,
pdfJsDoc: null, pdfJsDoc: null,
totalPages: 0, totalPages: 0,
sortableInstance: null, sortableInstance: null,
}; };
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializePage); document.addEventListener('DOMContentLoaded', initializePage);
} else { } else {
initializePage(); initializePage();
} }
function initializePage() { function initializePage() {
createIcons({ icons }); createIcons({ icons });
const fileInput = document.getElementById('file-input') as HTMLInputElement; const fileInput = document.getElementById('file-input') as HTMLInputElement;
const dropZone = document.getElementById('drop-zone'); const dropZone = document.getElementById('drop-zone');
const processBtn = document.getElementById('process-btn'); const processBtn = document.getElementById('process-btn');
if (fileInput) fileInput.addEventListener('change', handleFileUpload); if (fileInput) fileInput.addEventListener('change', handleFileUpload);
if (dropZone) { if (dropZone) {
dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('bg-gray-700'); }); dropZone.addEventListener('dragover', (e) => {
dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('bg-gray-700'); }); e.preventDefault();
dropZone.addEventListener('drop', (e) => { dropZone.classList.add('bg-gray-700');
e.preventDefault();
dropZone.classList.remove('bg-gray-700');
const droppedFiles = e.dataTransfer?.files;
if (droppedFiles && droppedFiles.length > 0) handleFile(droppedFiles[0]);
});
// Clear value on click to allow re-selecting the same file
fileInput?.addEventListener('click', () => {
if (fileInput) fileInput.value = '';
});
}
if (processBtn) processBtn.addEventListener('click', saveChanges);
document.getElementById('back-to-tools')?.addEventListener('click', () => {
window.location.href = import.meta.env.BASE_URL;
}); });
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('bg-gray-700');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('bg-gray-700');
const droppedFiles = e.dataTransfer?.files;
if (droppedFiles && droppedFiles.length > 0) handleFile(droppedFiles[0]);
});
// Clear value on click to allow re-selecting the same file
fileInput?.addEventListener('click', () => {
if (fileInput) fileInput.value = '';
});
}
const applyOrderBtn = document.getElementById('apply-order-btn'); if (processBtn) processBtn.addEventListener('click', saveChanges);
if (applyOrderBtn) applyOrderBtn.addEventListener('click', applyCustomOrder);
document.getElementById('back-to-tools')?.addEventListener('click', () => {
window.location.href = import.meta.env.BASE_URL;
});
const applyOrderBtn = document.getElementById('apply-order-btn');
if (applyOrderBtn) applyOrderBtn.addEventListener('click', applyCustomOrder);
} }
function applyCustomOrder() { function applyCustomOrder() {
const orderInput = document.getElementById('page-order-input') as HTMLInputElement; const orderInput = document.getElementById(
const grid = document.getElementById('page-grid'); 'page-order-input'
) as HTMLInputElement;
const grid = document.getElementById('page-grid');
if (!orderInput || !grid) return; if (!orderInput || !grid) return;
const orderString = orderInput.value; const orderString = orderInput.value;
if (!orderString) { if (!orderString) {
showAlert('Invalid Order', 'Please enter a page order.'); showAlert('Invalid Order', 'Please enter a page order.');
return; return;
}
const newOrder = orderString.split(',').map((s) => parseInt(s.trim(), 10));
// Validation
const currentGridCount = grid.children.length;
const validNumbers = newOrder.every((n) => !isNaN(n) && n > 0); // Basic check, will validate against available thumbnails
if (!validNumbers) {
showAlert('Invalid Page Numbers', `Please enter positive numbers.`);
return;
}
if (newOrder.length !== currentGridCount) {
showAlert(
'Incorrect Page Count',
`The number of pages specified (${newOrder.length}) does not match the current number of pages in the document (${currentGridCount}). Please provide a complete ordering for all pages.`
);
return;
}
const uniqueNumbers = new Set(newOrder);
if (uniqueNumbers.size !== newOrder.length) {
showAlert(
'Duplicate Page Numbers',
'Please ensure all page numbers in the order are unique.'
);
return;
}
const currentThumbnails = Array.from(grid.children) as HTMLElement[];
const reorderedThumbnails: HTMLElement[] = [];
const foundIndices = new Set();
for (const pageNum of newOrder) {
const originalIndexToFind = pageNum - 1; // pageNum is 1-based, originalPageIndex is 0-based
const foundThumbnail = currentThumbnails.find(
(thumb) =>
thumb.dataset.originalPageIndex === originalIndexToFind.toString()
);
if (foundThumbnail) {
reorderedThumbnails.push(foundThumbnail);
foundIndices.add(originalIndexToFind.toString());
} }
}
const newOrder = orderString.split(',').map(s => parseInt(s.trim(), 10)); const allOriginalIndicesPresent = currentThumbnails.every((thumb) =>
foundIndices.has(thumb.dataset.originalPageIndex)
);
// Validation if (
const currentGridCount = grid.children.length; reorderedThumbnails.length !== currentGridCount ||
const validNumbers = newOrder.every(n => !isNaN(n) && n > 0); // Basic check, will validate against available thumbnails !allOriginalIndicesPresent
if (!validNumbers) { ) {
showAlert('Invalid Page Numbers', `Please enter positive numbers.`); showAlert(
return; 'Invalid Page Order',
} 'The specified page order is incomplete or contains invalid page numbers. Please ensure you provide a new position for every original page.'
);
return;
}
if (newOrder.length !== currentGridCount) { // Clear the grid and append the reordered thumbnails
showAlert('Incorrect Page Count', `The number of pages specified (${newOrder.length}) does not match the current number of pages in the document (${currentGridCount}). Please provide a complete ordering for all pages.`); grid.innerHTML = '';
return; reorderedThumbnails.forEach((thumb) => grid.appendChild(thumb));
}
const uniqueNumbers = new Set(newOrder); initializeSortable(); // Re-initialize sortable on the new order
if (uniqueNumbers.size !== newOrder.length) {
showAlert('Duplicate Page Numbers', 'Please ensure all page numbers in the order are unique.');
return;
}
const currentThumbnails = Array.from(grid.children) as HTMLElement[]; showAlert('Success', 'Pages have been reordered.', 'success');
const reorderedThumbnails: HTMLElement[] = [];
const foundIndices = new Set();
for (const pageNum of newOrder) {
const originalIndexToFind = pageNum - 1; // pageNum is 1-based, originalPageIndex is 0-based
const foundThumbnail = currentThumbnails.find(
thumb => thumb.dataset.originalPageIndex === originalIndexToFind.toString()
);
if (foundThumbnail) {
reorderedThumbnails.push(foundThumbnail);
foundIndices.add(originalIndexToFind.toString());
}
}
const allOriginalIndicesPresent = currentThumbnails.every(thumb => foundIndices.has(thumb.dataset.originalPageIndex));
if (reorderedThumbnails.length !== currentGridCount || !allOriginalIndicesPresent) {
showAlert('Invalid Page Order', 'The specified page order is incomplete or contains invalid page numbers. Please ensure you provide a new position for every original page.');
return;
}
// Clear the grid and append the reordered thumbnails
grid.innerHTML = '';
reorderedThumbnails.forEach(thumb => grid.appendChild(thumb));
initializeSortable(); // Re-initialize sortable on the new order
showAlert('Success', 'Pages have been reordered.', 'success');
} }
function handleFileUpload(e: Event) { function handleFileUpload(e: Event) {
const input = e.target as HTMLInputElement; const input = e.target as HTMLInputElement;
if (input.files && input.files.length > 0) handleFile(input.files[0]); if (input.files && input.files.length > 0) handleFile(input.files[0]);
} }
async function handleFile(file: File) { async function handleFile(file: File) {
if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) { if (
showAlert('Invalid File', 'Please select a PDF file.'); file.type !== 'application/pdf' &&
return; !file.name.toLowerCase().endsWith('.pdf')
} ) {
showAlert('Invalid File', 'Please select a PDF file.');
return;
}
showLoader('Loading PDF...'); showLoader('Loading PDF...');
organizeState.file = file; organizeState.file = file;
try { try {
const arrayBuffer = await readFileAsArrayBuffer(file); const arrayBuffer = await readFileAsArrayBuffer(file);
organizeState.pdfDoc = await PDFDocument.load(arrayBuffer as ArrayBuffer, { ignoreEncryption: true, throwOnInvalidObject: false }); organizeState.pdfDoc = await PDFDocument.load(arrayBuffer as ArrayBuffer, {
organizeState.pdfJsDoc = await getPDFDocument({ data: (arrayBuffer as ArrayBuffer).slice(0) }).promise; ignoreEncryption: true,
organizeState.totalPages = organizeState.pdfDoc.getPageCount(); throwOnInvalidObject: false,
});
organizeState.pdfJsDoc = await getPDFDocument({
data: (arrayBuffer as ArrayBuffer).slice(0),
}).promise;
organizeState.totalPages = organizeState.pdfDoc.getPageCount();
updateFileDisplay(); updateFileDisplay();
await renderThumbnails(); await renderThumbnails();
hideLoader(); hideLoader();
} catch (error) { } catch (error) {
console.error('Error loading PDF:', error); console.error('Error loading PDF:', error);
hideLoader(); hideLoader();
showAlert('Error', 'Failed to load PDF file.'); showAlert('Error', 'Failed to load PDF file.');
} }
} }
function updateFileDisplay() { function updateFileDisplay() {
const fileDisplayArea = document.getElementById('file-display-area'); const fileDisplayArea = document.getElementById('file-display-area');
if (!fileDisplayArea || !organizeState.file) return; if (!fileDisplayArea || !organizeState.file) return;
fileDisplayArea.innerHTML = ''; fileDisplayArea.innerHTML = '';
const fileDiv = document.createElement('div'); const fileDiv = document.createElement('div');
fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg'; fileDiv.className =
'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
const infoContainer = document.createElement('div'); const infoContainer = document.createElement('div');
infoContainer.className = 'flex flex-col flex-1 min-w-0'; infoContainer.className = 'flex flex-col flex-1 min-w-0';
const nameSpan = document.createElement('div'); const nameSpan = document.createElement('div');
nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1'; nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
nameSpan.textContent = organizeState.file.name; nameSpan.textContent = organizeState.file.name;
const metaSpan = document.createElement('div'); const metaSpan = document.createElement('div');
metaSpan.className = 'text-xs text-gray-400'; metaSpan.className = 'text-xs text-gray-400';
metaSpan.textContent = `${formatBytes(organizeState.file.size)} • ${organizeState.totalPages} pages`; metaSpan.textContent = `${formatBytes(organizeState.file.size)} • ${organizeState.totalPages} pages`;
infoContainer.append(nameSpan, metaSpan); infoContainer.append(nameSpan, metaSpan);
const removeBtn = document.createElement('button'); const removeBtn = document.createElement('button');
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0'; removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>'; removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
removeBtn.onclick = () => resetState(); removeBtn.onclick = () => resetState();
fileDiv.append(infoContainer, removeBtn); fileDiv.append(infoContainer, removeBtn);
fileDisplayArea.appendChild(fileDiv); fileDisplayArea.appendChild(fileDiv);
createIcons({ icons }); createIcons({ icons });
} }
function renumberPages() { function renumberPages() {
const grid = document.getElementById('page-grid'); const grid = document.getElementById('page-grid');
if (!grid) return; if (!grid) return;
const labels = grid.querySelectorAll('.page-number'); const labels = grid.querySelectorAll('.page-number');
labels.forEach((label, index) => { labels.forEach((label, index) => {
label.textContent = (index + 1).toString(); label.textContent = (index + 1).toString();
}); });
} }
function attachEventListeners(element: HTMLElement) { function attachEventListeners(element: HTMLElement) {
const duplicateBtn = element.querySelector('.duplicate-btn'); const duplicateBtn = element.querySelector('.duplicate-btn');
const deleteBtn = element.querySelector('.delete-btn'); const deleteBtn = element.querySelector('.delete-btn');
duplicateBtn?.addEventListener('click', (e) => { duplicateBtn?.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
const clone = element.cloneNode(true) as HTMLElement; const clone = element.cloneNode(true) as HTMLElement;
element.after(clone); element.after(clone);
attachEventListeners(clone); attachEventListeners(clone);
renumberPages(); renumberPages();
createIcons({ icons }); createIcons({ icons });
initializeSortable(); initializeSortable();
}); });
deleteBtn?.addEventListener('click', (e) => { deleteBtn?.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
const grid = document.getElementById('page-grid'); const grid = document.getElementById('page-grid');
if (grid && grid.children.length > 1) { if (grid && grid.children.length > 1) {
element.remove(); element.remove();
renumberPages(); renumberPages();
initializeSortable(); initializeSortable();
} else { } else {
showAlert('Cannot Delete', 'You cannot delete the last page of the document.'); showAlert(
} 'Cannot Delete',
}); 'You cannot delete the last page of the document.'
);
}
});
} }
async function renderThumbnails() { async function renderThumbnails() {
const grid = document.getElementById('page-grid'); const grid = document.getElementById('page-grid');
const processBtn = document.getElementById('process-btn'); const processBtn = document.getElementById('process-btn');
const advancedSettings = document.getElementById('advanced-settings'); const advancedSettings = document.getElementById('advanced-settings');
if (!grid || !processBtn || !advancedSettings) return; if (!grid || !processBtn || !advancedSettings) return;
grid.innerHTML = ''; grid.innerHTML = '';
grid.classList.remove('hidden'); grid.classList.remove('hidden');
processBtn.classList.remove('hidden'); processBtn.classList.remove('hidden');
advancedSettings.classList.remove('hidden'); advancedSettings.classList.remove('hidden');
for (let i = 1; i <= organizeState.totalPages; i++) { for (let i = 1; i <= organizeState.totalPages; i++) {
const page = await organizeState.pdfJsDoc.getPage(i); const page = await organizeState.pdfJsDoc.getPage(i);
const viewport = page.getViewport({ scale: 0.5 }); const viewport = page.getViewport({ scale: 1 });
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = viewport.width; canvas.width = viewport.width;
canvas.height = viewport.height; canvas.height = viewport.height;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
await page.render({ canvasContext: ctx, viewport }).promise; await page.render({ canvasContext: ctx, viewport }).promise;
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.className = 'page-thumbnail relative cursor-move flex flex-col items-center gap-2'; wrapper.className =
wrapper.dataset.originalPageIndex = (i - 1).toString(); 'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
wrapper.dataset.originalPageIndex = (i - 1).toString();
wrapper.dataset.pageNumber = i.toString();
const imgContainer = document.createElement('div'); const imgContainer = document.createElement('div');
imgContainer.className = 'w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600'; imgContainer.className = 'relative';
const img = document.createElement('img'); const img = document.createElement('img');
img.src = canvas.toDataURL(); img.src = canvas.toDataURL();
img.className = 'max-w-full max-h-full object-contain'; img.className = 'rounded-md shadow-md max-w-full h-auto';
imgContainer.appendChild(img); imgContainer.appendChild(img);
const pageLabel = document.createElement('span'); const pageLabel = document.createElement('div');
pageLabel.className = 'page-number absolute top-1 left-1 bg-gray-900 bg-opacity-75 text-white text-xs rounded-full px-2 py-1'; pageLabel.className =
pageLabel.textContent = i.toString(); 'page-number absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
pageLabel.textContent = i.toString();
imgContainer.appendChild(pageLabel);
const controlsDiv = document.createElement('div'); const controlsDiv = document.createElement('div');
controlsDiv.className = 'flex items-center justify-center gap-4'; controlsDiv.className = 'flex items-center justify-center gap-4';
const duplicateBtn = document.createElement('button'); const duplicateBtn = document.createElement('button');
duplicateBtn.className = 'duplicate-btn bg-green-600 hover:bg-green-700 text-white rounded-full w-8 h-8 flex items-center justify-center'; duplicateBtn.className =
duplicateBtn.title = 'Duplicate Page'; 'duplicate-btn bg-green-600 hover:bg-green-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
duplicateBtn.innerHTML = '<i data-lucide="copy-plus" class="w-5 h-5"></i>'; duplicateBtn.title = 'Duplicate Page';
duplicateBtn.innerHTML = '<i data-lucide="copy-plus" class="w-5 h-5"></i>';
const deleteBtn = document.createElement('button'); const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn bg-red-600 hover:bg-red-700 text-white rounded-full w-8 h-8 flex items-center justify-center'; deleteBtn.className =
deleteBtn.title = 'Delete Page'; 'delete-btn bg-red-600 hover:bg-red-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
deleteBtn.innerHTML = '<i data-lucide="x-circle" class="w-5 h-5"></i>'; deleteBtn.title = 'Delete Page';
deleteBtn.innerHTML = '<i data-lucide="x-circle" class="w-5 h-5"></i>';
controlsDiv.append(duplicateBtn, deleteBtn); controlsDiv.append(duplicateBtn, deleteBtn);
wrapper.append(imgContainer, pageLabel, controlsDiv); wrapper.append(imgContainer, controlsDiv);
grid.appendChild(wrapper); grid.appendChild(wrapper);
attachEventListeners(wrapper); attachEventListeners(wrapper);
} }
createIcons({ icons }); createIcons({ icons });
initializeSortable(); initializeSortable();
initPagePreview(grid, organizeState.pdfJsDoc);
} }
function initializeSortable() { function initializeSortable() {
const grid = document.getElementById('page-grid'); const grid = document.getElementById('page-grid');
if (!grid) return; if (!grid) return;
if (organizeState.sortableInstance) organizeState.sortableInstance.destroy(); if (organizeState.sortableInstance) organizeState.sortableInstance.destroy();
organizeState.sortableInstance = Sortable.create(grid, { organizeState.sortableInstance = Sortable.create(grid, {
animation: 150, animation: 150,
ghostClass: 'sortable-ghost', ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen', chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag', dragClass: 'sortable-drag',
filter: '.duplicate-btn, .delete-btn', filter: '.duplicate-btn, .delete-btn',
preventOnFilter: true, preventOnFilter: true,
onStart: (evt) => { onStart: (evt) => {
if (evt.item) evt.item.style.opacity = '0.5'; if (evt.item) evt.item.style.opacity = '0.5';
}, },
onEnd: (evt) => { onEnd: (evt) => {
if (evt.item) evt.item.style.opacity = '1'; if (evt.item) evt.item.style.opacity = '1';
}, },
}); });
} }
async function saveChanges() { async function saveChanges() {
showLoader('Building new PDF...'); showLoader('Building new PDF...');
try { try {
const grid = document.getElementById('page-grid'); const grid = document.getElementById('page-grid');
if (!grid) return; if (!grid) return;
const finalPageElements = grid.querySelectorAll('.page-thumbnail'); const finalPageElements = grid.querySelectorAll('.page-thumbnail');
const finalIndices = Array.from(finalPageElements) const finalIndices = Array.from(finalPageElements)
.map(el => parseInt((el as HTMLElement).dataset.originalPageIndex || '', 10)) .map((el) =>
.filter(index => !isNaN(index) && index >= 0); parseInt((el as HTMLElement).dataset.originalPageIndex || '', 10)
)
.filter((index) => !isNaN(index) && index >= 0);
if (finalIndices.length === 0) { if (finalIndices.length === 0) {
showAlert('Error', 'No valid pages to save.'); showAlert('Error', 'No valid pages to save.');
return; return;
}
const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(organizeState.pdfDoc, finalIndices);
copiedPages.forEach(page => newPdf.addPage(page));
const pdfBytes = await newPdf.save();
const baseName = organizeState.file?.name.replace('.pdf', '') || 'document';
downloadFile(new Blob([pdfBytes as BlobPart], { type: 'application/pdf' }), `${baseName}_organized.pdf`);
hideLoader();
showAlert('Success', 'PDF organized successfully!', 'success', () => resetState());
} catch (error) {
console.error('Error saving changes:', error);
hideLoader();
showAlert('Error', 'Failed to save changes.');
} }
const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(
organizeState.pdfDoc,
finalIndices
);
copiedPages.forEach((page) => newPdf.addPage(page));
const pdfBytes = await newPdf.save();
const baseName = organizeState.file?.name.replace('.pdf', '') || 'document';
downloadFile(
new Blob([pdfBytes as BlobPart], { type: 'application/pdf' }),
`${baseName}_organized.pdf`
);
hideLoader();
showAlert('Success', 'PDF organized successfully!', 'success', () =>
resetState()
);
} catch (error) {
console.error('Error saving changes:', error);
hideLoader();
showAlert('Error', 'Failed to save changes.');
}
} }
function resetState() { function resetState() {
if (organizeState.sortableInstance) { if (organizeState.sortableInstance) {
organizeState.sortableInstance.destroy(); organizeState.sortableInstance.destroy();
organizeState.sortableInstance = null; organizeState.sortableInstance = null;
} }
organizeState.file = null; organizeState.file = null;
organizeState.pdfDoc = null; organizeState.pdfDoc = null;
organizeState.pdfJsDoc = null; organizeState.pdfJsDoc = null;
organizeState.totalPages = 0; organizeState.totalPages = 0;
const grid = document.getElementById('page-grid'); const grid = document.getElementById('page-grid');
if (grid) { if (grid) {
grid.innerHTML = ''; grid.innerHTML = '';
grid.classList.add('hidden'); grid.classList.add('hidden');
} }
document.getElementById('process-btn')?.classList.add('hidden'); document.getElementById('process-btn')?.classList.add('hidden');
document.getElementById('advanced-settings')?.classList.add('hidden'); document.getElementById('advanced-settings')?.classList.add('hidden');
const fileDisplayArea = document.getElementById('file-display-area'); const fileDisplayArea = document.getElementById('file-display-area');
if (fileDisplayArea) fileDisplayArea.innerHTML = ''; if (fileDisplayArea) fileDisplayArea.innerHTML = '';
} }

967
src/js/logic/pdf-booklet-page.ts
View File

File diff suppressed because it is too large Load Diff

29
src/js/logic/remove-blank-pages-page.ts
View File

@@ -1,6 +1,7 @@
import { PDFDocument } from 'pdf-lib'; import { PDFDocument } from 'pdf-lib';
import * as pdfjsLib from 'pdfjs-dist'; import * as pdfjsLib from 'pdfjs-dist';
import { createIcons, icons } from 'lucide'; import { createIcons, icons } from 'lucide';
import { initPagePreview } from '../utils/page-preview.js';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs', 'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -161,7 +162,7 @@ async function isPageBlank(
} }
async function generateThumbnail(page: any): Promise<string> { async function generateThumbnail(page: any): Promise<string> {
const viewport = page.getViewport({ scale: 1.5 }); const viewport = page.getViewport({ scale: 1 });
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
if (!ctx) return ''; if (!ctx) return '';
@@ -211,6 +212,10 @@ async function detectBlankPages() {
// Show preview panel // Show preview panel
updatePreviewPanel(); updatePreviewPanel();
document.getElementById('preview-panel')?.classList.remove('hidden'); document.getElementById('preview-panel')?.classList.remove('hidden');
const previewContainer = document.getElementById('blank-pages-preview');
if (previewContainer) initPagePreview(previewContainer, pdfDoc);
hideLoader(); hideLoader();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@@ -231,17 +236,18 @@ function updatePreviewPanel() {
pageState.detectedBlankPages.forEach((pageIndex) => { pageState.detectedBlankPages.forEach((pageIndex) => {
const thumbnail = pageState.pageThumbnails.get(pageIndex) || ''; const thumbnail = pageState.pageThumbnails.get(pageIndex) || '';
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'relative cursor-pointer group'; div.className =
'relative cursor-pointer flex flex-col items-center gap-1 p-2 border-2 border-red-500 rounded-lg bg-gray-700 transition-colors group';
div.dataset.pageIndex = String(pageIndex); div.dataset.pageIndex = String(pageIndex);
div.dataset.selected = 'true'; div.dataset.selected = 'true';
div.innerHTML = ` div.innerHTML = `
<div class="relative border-2 border-red-500 rounded-lg overflow-hidden transition-all"> <div class="relative">
<img src="${thumbnail}" alt="Page ${pageIndex + 1}" class="w-full h-auto"> <img src="${thumbnail}" alt="Page ${pageIndex + 1}" class="rounded-md shadow-md max-w-full h-auto">
<div class="absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs text-center py-1"> <div class="absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none">
Page ${pageIndex + 1} ${pageIndex + 1}
</div> </div>
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center check-mark"> <div class="absolute top-1 right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center check-mark z-10">
<i data-lucide="check" class="w-3 h-3 text-white"></i> <i data-lucide="check" class="w-3 h-3 text-white"></i>
</div> </div>
</div> </div>
@@ -256,18 +262,17 @@ function updatePreviewPanel() {
function togglePageSelection(div: HTMLElement, pageIndex: number) { function togglePageSelection(div: HTMLElement, pageIndex: number) {
const isSelected = div.dataset.selected === 'true'; const isSelected = div.dataset.selected === 'true';
const border = div.querySelector('.border-2') as HTMLElement;
const checkMark = div.querySelector('.check-mark') as HTMLElement; const checkMark = div.querySelector('.check-mark') as HTMLElement;
if (isSelected) { if (isSelected) {
div.dataset.selected = 'false'; div.dataset.selected = 'false';
border?.classList.remove('border-red-500'); div.classList.remove('border-red-500');
border?.classList.add('border-gray-500', 'opacity-50'); div.classList.add('border-gray-600', 'opacity-50');
checkMark?.classList.add('hidden'); checkMark?.classList.add('hidden');
} else { } else {
div.dataset.selected = 'true'; div.dataset.selected = 'true';
border?.classList.add('border-red-500'); div.classList.add('border-red-500');
border?.classList.remove('border-gray-500', 'opacity-50'); div.classList.remove('border-gray-600', 'opacity-50');
checkMark?.classList.remove('hidden'); checkMark?.classList.remove('hidden');
} }
} }

25
src/js/logic/split-pdf-page.ts
View File

@@ -12,6 +12,7 @@ import {
renderPagesProgressively, renderPagesProgressively,
cleanupLazyRendering, cleanupLazyRendering,
} from '../utils/render-utils.js'; } from '../utils/render-utils.js';
import { initPagePreview } from '../utils/page-preview.js';
import { isCpdfAvailable } from '../utils/cpdf-helper.js'; import { isCpdfAvailable } from '../utils/cpdf-helper.js';
import { showWasmRequiredDialog } from '../utils/wasm-provider.js'; import { showWasmRequiredDialog } from '../utils/wasm-provider.js';
import JSZip from 'jszip'; import JSZip from 'jszip';
@@ -153,18 +154,24 @@ document.addEventListener('DOMContentLoaded', () => {
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => { const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.className = wrapper.className =
'page-thumbnail-wrapper p-1 border-2 border-transparent rounded-lg cursor-pointer hover:border-indigo-500 relative'; 'page-thumbnail-wrapper p-2 border-2 border-gray-600 rounded-lg cursor-pointer hover:border-indigo-500 bg-gray-700 transition-colors relative group flex flex-col items-center gap-1';
wrapper.dataset.pageIndex = (pageNumber - 1).toString(); wrapper.dataset.pageIndex = (pageNumber - 1).toString();
wrapper.dataset.pageNumber = pageNumber.toString();
const imgContainer = document.createElement('div');
imgContainer.className = 'relative';
const img = document.createElement('img'); const img = document.createElement('img');
img.src = canvas.toDataURL(); img.src = canvas.toDataURL();
img.className = 'rounded-md w-full h-auto'; img.className = 'rounded-md shadow-md max-w-full h-auto';
const p = document.createElement('p'); const pageNumDiv = document.createElement('div');
p.className = 'text-center text-xs mt-1 text-gray-300'; pageNumDiv.className =
p.textContent = `Page ${pageNumber}`; 'absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
pageNumDiv.textContent = pageNumber.toString();
wrapper.append(img, p); imgContainer.append(img, pageNumDiv);
wrapper.appendChild(imgContainer);
const handleSelection = (e: any) => { const handleSelection = (e: any) => {
e.preventDefault(); e.preventDefault();
@@ -174,10 +181,10 @@ document.addEventListener('DOMContentLoaded', () => {
if (isSelected) { if (isSelected) {
wrapper.classList.remove('selected', 'border-indigo-500'); wrapper.classList.remove('selected', 'border-indigo-500');
wrapper.classList.add('border-transparent'); wrapper.classList.add('border-gray-600');
} else { } else {
wrapper.classList.add('selected', 'border-indigo-500'); wrapper.classList.add('selected', 'border-indigo-500');
wrapper.classList.remove('border-transparent'); wrapper.classList.remove('border-gray-600');
} }
}; };
@@ -203,6 +210,8 @@ document.addEventListener('DOMContentLoaded', () => {
createIcons({ icons }); createIcons({ icons });
}, },
}); });
initPagePreview(container, pdf);
} catch (error) { } catch (error) {
console.error('Error rendering visual selector:', error); console.error('Error rendering visual selector:', error);
showAlert('Error', 'Failed to render page previews.'); showAlert('Error', 'Failed to render page previews.');

1
src/js/types/index.ts
View File

@@ -50,3 +50,4 @@ export * from './bookmark-pdf-type.ts';
export * from './scanner-effect-type.ts'; export * from './scanner-effect-type.ts';
export * from './adjust-colors-type.ts'; export * from './adjust-colors-type.ts';
export * from './bates-numbering-type.ts'; export * from './bates-numbering-type.ts';
export * from './page-preview-type.ts';

10
src/js/types/page-preview-type.ts Normal file
View File

@@ -0,0 +1,10 @@
import { PDFDocumentProxy } from 'pdfjs-dist';
export interface PreviewState {
modal: HTMLElement | null;
pdfjsDoc: PDFDocumentProxy | null;
currentPage: number;
totalPages: number;
isOpen: boolean;
container: HTMLElement | null;
}

723
src/js/ui.ts
View File

@@ -1,177 +1,201 @@
import { resetState } from './state.js'; import { resetState } from './state.js';
import { formatBytes, getPDFDocument } from './utils/helpers.js'; import { formatBytes, getPDFDocument } from './utils/helpers.js';
import { tesseractLanguages } from './config/tesseract-languages.js'; import { tesseractLanguages } from './config/tesseract-languages.js';
import { renderPagesProgressively, cleanupLazyRendering } from './utils/render-utils.js'; import {
renderPagesProgressively,
cleanupLazyRendering,
} from './utils/render-utils.js';
import { initPagePreview } from './utils/page-preview.js';
import { icons, createIcons } from 'lucide'; import { icons, createIcons } from 'lucide';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import { getRotationState, updateRotationState } from './utils/rotation-state.js'; import {
getRotationState,
updateRotationState,
} from './utils/rotation-state.js';
import * as pdfjsLib from 'pdfjs-dist'; import * as pdfjsLib from 'pdfjs-dist';
import { t } from './i18n/i18n'; import { t } from './i18n/i18n';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString(); pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url
).toString();
// Centralizing DOM element selection // Centralizing DOM element selection
export const dom = { export const dom = {
gridView: document.getElementById('grid-view'), gridView: document.getElementById('grid-view'),
toolGrid: document.getElementById('tool-grid'), toolGrid: document.getElementById('tool-grid'),
toolInterface: document.getElementById('tool-interface'), toolInterface: document.getElementById('tool-interface'),
toolContent: document.getElementById('tool-content'), toolContent: document.getElementById('tool-content'),
backToGridBtn: document.getElementById('back-to-grid'), backToGridBtn: document.getElementById('back-to-grid'),
loaderModal: document.getElementById('loader-modal'), loaderModal: document.getElementById('loader-modal'),
loaderText: document.getElementById('loader-text'), loaderText: document.getElementById('loader-text'),
alertModal: document.getElementById('alert-modal'), alertModal: document.getElementById('alert-modal'),
alertTitle: document.getElementById('alert-title'), alertTitle: document.getElementById('alert-title'),
alertMessage: document.getElementById('alert-message'), alertMessage: document.getElementById('alert-message'),
alertOkBtn: document.getElementById('alert-ok'), alertOkBtn: document.getElementById('alert-ok'),
heroSection: document.getElementById('hero-section'), heroSection: document.getElementById('hero-section'),
featuresSection: document.getElementById('features-section'), featuresSection: document.getElementById('features-section'),
toolsHeader: document.getElementById('tools-header'), toolsHeader: document.getElementById('tools-header'),
dividers: document.querySelectorAll('.section-divider'), dividers: document.querySelectorAll('.section-divider'),
hideSections: document.querySelectorAll('.hide-section'), hideSections: document.querySelectorAll('.hide-section'),
shortcutsModal: document.getElementById('shortcuts-modal'), shortcutsModal: document.getElementById('shortcuts-modal'),
closeShortcutsModalBtn: document.getElementById('close-shortcuts-modal'), closeShortcutsModalBtn: document.getElementById('close-shortcuts-modal'),
shortcutsList: document.getElementById('shortcuts-list'), shortcutsList: document.getElementById('shortcuts-list'),
shortcutSearch: document.getElementById('shortcut-search'), shortcutSearch: document.getElementById('shortcut-search'),
resetShortcutsBtn: document.getElementById('reset-shortcuts-btn'), resetShortcutsBtn: document.getElementById('reset-shortcuts-btn'),
importShortcutsBtn: document.getElementById('import-shortcuts-btn'), importShortcutsBtn: document.getElementById('import-shortcuts-btn'),
exportShortcutsBtn: document.getElementById('export-shortcuts-btn'), exportShortcutsBtn: document.getElementById('export-shortcuts-btn'),
openShortcutsBtn: document.getElementById('open-shortcuts-btn'), openShortcutsBtn: document.getElementById('open-shortcuts-btn'),
warningModal: document.getElementById('warning-modal'), warningModal: document.getElementById('warning-modal'),
warningTitle: document.getElementById('warning-title'), warningTitle: document.getElementById('warning-title'),
warningMessage: document.getElementById('warning-message'), warningMessage: document.getElementById('warning-message'),
warningCancelBtn: document.getElementById('warning-cancel-btn'), warningCancelBtn: document.getElementById('warning-cancel-btn'),
warningConfirmBtn: document.getElementById('warning-confirm-btn'), warningConfirmBtn: document.getElementById('warning-confirm-btn'),
}; };
export const showLoader = (text = t('common.loading'), progress?: number) => { export const showLoader = (text = t('common.loading'), progress?: number) => {
if (dom.loaderText) dom.loaderText.textContent = text; if (dom.loaderText) dom.loaderText.textContent = text;
// Add or update progress bar if progress is provided // Add or update progress bar if progress is provided
const loaderModal = dom.loaderModal; const loaderModal = dom.loaderModal;
if (loaderModal) { if (loaderModal) {
let progressBar = loaderModal.querySelector('.loader-progress-bar') as HTMLElement; let progressBar = loaderModal.querySelector(
let progressContainer = loaderModal.querySelector('.loader-progress-container') as HTMLElement; '.loader-progress-bar'
) as HTMLElement;
let progressContainer = loaderModal.querySelector(
'.loader-progress-container'
) as HTMLElement;
if (progress !== undefined && progress >= 0) { if (progress !== undefined && progress >= 0) {
// Create progress container if it doesn't exist // Create progress container if it doesn't exist
if (!progressContainer) { if (!progressContainer) {
progressContainer = document.createElement('div'); progressContainer = document.createElement('div');
progressContainer.className = 'loader-progress-container w-64 mt-4'; progressContainer.className = 'loader-progress-container w-64 mt-4';
progressContainer.innerHTML = ` progressContainer.innerHTML = `
<div class="bg-gray-700 rounded-full h-2 overflow-hidden"> <div class="bg-gray-700 rounded-full h-2 overflow-hidden">
<div class="loader-progress-bar bg-indigo-500 h-full transition-all duration-300" style="width: 0%"></div> <div class="loader-progress-bar bg-indigo-500 h-full transition-all duration-300" style="width: 0%"></div>
</div> </div>
<p class="loader-progress-text text-xs text-gray-400 mt-1 text-center">0%</p> <p class="loader-progress-text text-xs text-gray-400 mt-1 text-center">0%</p>
`; `;
loaderModal.querySelector('.bg-gray-800')?.appendChild(progressContainer); loaderModal
progressBar = progressContainer.querySelector('.loader-progress-bar') as HTMLElement; .querySelector('.bg-gray-800')
} ?.appendChild(progressContainer);
progressBar = progressContainer.querySelector(
'.loader-progress-bar'
) as HTMLElement;
}
// Update progress // Update progress
if (progressBar) { if (progressBar) {
progressBar.style.width = `${progress}%`; progressBar.style.width = `${progress}%`;
} }
const progressText = progressContainer.querySelector('.loader-progress-text'); const progressText = progressContainer.querySelector(
if (progressText) { '.loader-progress-text'
progressText.textContent = `${Math.round(progress)}%`; );
} if (progressText) {
progressContainer.classList.remove('hidden'); progressText.textContent = `${Math.round(progress)}%`;
} else { }
// Hide progress bar if no progress provided progressContainer.classList.remove('hidden');
if (progressContainer) { } else {
progressContainer.classList.add('hidden'); // Hide progress bar if no progress provided
} if (progressContainer) {
} progressContainer.classList.add('hidden');
}
loaderModal.classList.remove('hidden');
} }
loaderModal.classList.remove('hidden');
}
}; };
export const hideLoader = () => { export const hideLoader = () => {
if (dom.loaderModal) dom.loaderModal.classList.add('hidden'); if (dom.loaderModal) dom.loaderModal.classList.add('hidden');
}; };
export const showAlert = (title: any, message: any, type: string = 'error', callback?: () => void) => { export const showAlert = (
if (dom.alertTitle) dom.alertTitle.textContent = title; title: any,
if (dom.alertMessage) dom.alertMessage.textContent = message; message: any,
if (dom.alertModal) dom.alertModal.classList.remove('hidden'); type: string = 'error',
callback?: () => void
) => {
if (dom.alertTitle) dom.alertTitle.textContent = title;
if (dom.alertMessage) dom.alertMessage.textContent = message;
if (dom.alertModal) dom.alertModal.classList.remove('hidden');
if (dom.alertOkBtn) { if (dom.alertOkBtn) {
const newOkBtn = dom.alertOkBtn.cloneNode(true) as HTMLElement; const newOkBtn = dom.alertOkBtn.cloneNode(true) as HTMLElement;
dom.alertOkBtn.replaceWith(newOkBtn); dom.alertOkBtn.replaceWith(newOkBtn);
dom.alertOkBtn = newOkBtn; dom.alertOkBtn = newOkBtn;
newOkBtn.addEventListener('click', () => { newOkBtn.addEventListener('click', () => {
hideAlert(); hideAlert();
if (callback) callback(); if (callback) callback();
}); });
} }
}; };
export const hideAlert = () => { export const hideAlert = () => {
if (dom.alertModal) dom.alertModal.classList.add('hidden'); if (dom.alertModal) dom.alertModal.classList.add('hidden');
}; };
export const switchView = (view: any) => { export const switchView = (view: any) => {
if (view === 'grid') { if (view === 'grid') {
dom.gridView.classList.remove('hidden'); dom.gridView.classList.remove('hidden');
dom.toolInterface.classList.add('hidden'); dom.toolInterface.classList.add('hidden');
// show hero and features and header // show hero and features and header
dom.heroSection.classList.remove('hidden'); dom.heroSection.classList.remove('hidden');
dom.featuresSection.classList.remove('hidden'); dom.featuresSection.classList.remove('hidden');
dom.toolsHeader.classList.remove('hidden'); dom.toolsHeader.classList.remove('hidden');
// show dividers // show dividers
dom.dividers.forEach((divider) => { dom.dividers.forEach((divider) => {
divider.classList.remove('hidden'); divider.classList.remove('hidden');
}); });
// show hideSections // show hideSections
dom.hideSections.forEach((section) => { dom.hideSections.forEach((section) => {
section.classList.remove('hidden'); section.classList.remove('hidden');
}); });
resetState(); resetState();
} else { } else {
dom.gridView.classList.add('hidden'); dom.gridView.classList.add('hidden');
dom.toolInterface.classList.remove('hidden'); dom.toolInterface.classList.remove('hidden');
dom.featuresSection.classList.add('hidden'); dom.featuresSection.classList.add('hidden');
dom.heroSection.classList.add('hidden'); dom.heroSection.classList.add('hidden');
dom.toolsHeader.classList.add('hidden'); dom.toolsHeader.classList.add('hidden');
dom.dividers.forEach((divider) => { dom.dividers.forEach((divider) => {
divider.classList.add('hidden'); divider.classList.add('hidden');
}); });
dom.hideSections.forEach((section) => { dom.hideSections.forEach((section) => {
section.classList.add('hidden'); section.classList.add('hidden');
}); });
} }
}; };
const thumbnailState = { const thumbnailState = {
sortableInstances: {}, sortableInstances: {},
}; };
function initializeOrganizeSortable(containerId: any) { function initializeOrganizeSortable(containerId: any) {
const container = document.getElementById(containerId); const container = document.getElementById(containerId);
if (!container) return; if (!container) return;
if (thumbnailState.sortableInstances[containerId]) { if (thumbnailState.sortableInstances[containerId]) {
thumbnailState.sortableInstances[containerId].destroy(); thumbnailState.sortableInstances[containerId].destroy();
} }
thumbnailState.sortableInstances[containerId] = Sortable.create(container, { thumbnailState.sortableInstances[containerId] = Sortable.create(container, {
animation: 150, animation: 150,
ghostClass: 'sortable-ghost', ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen', chosenClass: 'sortable-chosen',
dragClass: 'sortable-drag', dragClass: 'sortable-drag',
filter: '.delete-page-btn', filter: '.delete-page-btn',
preventOnFilter: true, preventOnFilter: true,
onStart: function (evt: any) { onStart: function (evt: any) {
evt.item.style.opacity = '0.5'; evt.item.style.opacity = '0.5';
}, },
onEnd: function (evt: any) { onEnd: function (evt: any) {
evt.item.style.opacity = '1'; evt.item.style.opacity = '1';
}, },
}); });
} }
/** /**
@@ -180,243 +204,247 @@ function initializeOrganizeSortable(containerId: any) {
* @param {object} pdfDoc The loaded pdf-lib document instance. * @param {object} pdfDoc The loaded pdf-lib document instance.
*/ */
export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => { export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
const containerId = toolId === 'organize' ? 'page-organizer' : toolId === 'delete-pages' ? 'delete-pages-preview' : 'page-rotator'; const containerId =
const container = document.getElementById(containerId); toolId === 'organize'
if (!container) return; ? 'page-organizer'
: toolId === 'delete-pages'
? 'delete-pages-preview'
: 'page-rotator';
const container = document.getElementById(containerId);
if (!container) return;
container.innerHTML = ''; container.innerHTML = '';
// Cleanup any previous lazy loading observers // Cleanup any previous lazy loading observers
cleanupLazyRendering(); cleanupLazyRendering();
const currentRenderId = Date.now(); const currentRenderId = Date.now();
container.dataset.renderId = currentRenderId.toString(); container.dataset.renderId = currentRenderId.toString();
showLoader(t('multiTool.renderingTitle')); showLoader(t('multiTool.renderingTitle'));
const pdfData = await pdfDoc.save(); const pdfData = await pdfDoc.save();
const pdf = await getPDFDocument({ data: pdfData }).promise; const pdf = await getPDFDocument({ data: pdfData }).promise;
// Function to create wrapper element for each page // Function to create wrapper element for each page
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => { const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
// @ts-expect-error TS(2322) FIXME: Type 'number' is not assignable to type 'string'. // @ts-expect-error TS(2322) FIXME: Type 'number' is not assignable to type 'string'.
wrapper.dataset.pageIndex = pageNumber - 1; wrapper.dataset.pageIndex = pageNumber - 1;
const imgContainer = document.createElement('div'); const imgContainer = document.createElement('div');
imgContainer.className = imgContainer.className = 'relative';
'w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600';
const img = document.createElement('img'); const img = document.createElement('img');
img.src = canvas.toDataURL(); img.src = canvas.toDataURL();
img.className = 'max-w-full max-h-full object-contain'; img.className = 'rounded-md shadow-md max-w-full h-auto';
imgContainer.appendChild(img); imgContainer.appendChild(img);
if (toolId === 'organize') { const pageNumSpan = document.createElement('div');
wrapper.className = 'page-thumbnail relative group'; pageNumSpan.className =
wrapper.appendChild(imgContainer); 'absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
pageNumSpan.textContent = pageNumber.toString();
const pageNumSpan = document.createElement('span'); if (toolId === 'organize') {
pageNumSpan.className = wrapper.className =
'absolute top-1 left-1 bg-gray-900 bg-opacity-75 text-white text-xs rounded-full px-2 py-1'; 'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
pageNumSpan.textContent = pageNumber.toString();
const deleteBtn = document.createElement('button'); imgContainer.appendChild(pageNumSpan);
deleteBtn.className = wrapper.appendChild(imgContainer);
'delete-page-btn absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center';
deleteBtn.innerHTML = '&times;';
deleteBtn.addEventListener('click', (e) => {
(e.currentTarget as HTMLElement).parentElement.remove();
// Renumber remaining pages const deleteBtn = document.createElement('button');
const pages = container.querySelectorAll('.page-thumbnail'); deleteBtn.className =
pages.forEach((page, index) => { 'delete-page-btn absolute top-1 right-1 bg-red-600 hover:bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center z-10';
const numSpan = page.querySelector('span'); deleteBtn.innerHTML = '&times;';
if (numSpan) { deleteBtn.addEventListener('click', (e) => {
numSpan.textContent = (index + 1).toString(); (e.currentTarget as HTMLElement).parentElement.remove();
}
});
initializeOrganizeSortable(containerId); // Renumber remaining pages
}); const pages = container.querySelectorAll('.page-thumbnail');
pages.forEach((page, index) => {
const numSpan = page.querySelector('.bg-indigo-600');
if (numSpan) {
numSpan.textContent = (index + 1).toString();
}
});
wrapper.append(pageNumSpan, deleteBtn); initializeOrganizeSortable(containerId);
} else if (toolId === 'rotate') { });
wrapper.className = 'page-rotator-item flex flex-col items-center gap-2 relative group';
// Read rotation from state (handles "Rotate All" on lazy-loaded pages) wrapper.appendChild(deleteBtn);
const rotationStateArray = getRotationState(); } else if (toolId === 'rotate') {
const pageIndex = pageNumber - 1; wrapper.className =
const initialRotation = rotationStateArray[pageIndex] || 0; 'page-rotator-item flex flex-col items-center gap-2 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors relative group';
wrapper.dataset.rotation = initialRotation.toString(); // Read rotation from state (handles "Rotate All" on lazy-loaded pages)
img.classList.add('transition-transform', 'duration-300'); const rotationStateArray = getRotationState();
const pageIndex = pageNumber - 1;
const initialRotation = rotationStateArray[pageIndex] || 0;
// Apply initial rotation if any wrapper.dataset.rotation = initialRotation.toString();
if (initialRotation !== 0) { img.classList.add('transition-transform', 'duration-300');
img.style.transform = `rotate(${initialRotation}deg)`;
}
wrapper.appendChild(imgContainer); // Apply initial rotation if any
if (initialRotation !== 0) {
img.style.transform = `rotate(${initialRotation}deg)`;
}
// Page Number Overlay (Top Left) imgContainer.appendChild(pageNumSpan);
const pageNumSpan = document.createElement('span'); wrapper.appendChild(imgContainer);
pageNumSpan.className =
'absolute top-2 left-2 bg-gray-900 bg-opacity-75 text-white text-xs font-medium rounded-md px-2 py-1 shadow-sm z-10 pointer-events-none';
pageNumSpan.textContent = pageNumber.toString();
wrapper.appendChild(pageNumSpan);
const controlsDiv = document.createElement('div'); const controlsDiv = document.createElement('div');
controlsDiv.className = 'flex flex-col lg:flex-row items-center justify-center w-full gap-2 px-1'; controlsDiv.className =
'flex flex-col lg:flex-row items-center justify-center w-full gap-2 px-1';
// Custom Stepper Component // Custom Stepper Component
const stepperContainer = document.createElement('div'); const stepperContainer = document.createElement('div');
stepperContainer.className = 'flex items-center border border-gray-600 rounded-md bg-gray-800 overflow-hidden w-24 h-8'; stepperContainer.className =
'flex items-center border border-gray-600 rounded-md bg-gray-800 overflow-hidden w-24 h-8';
const decrementBtn = document.createElement('button'); const decrementBtn = document.createElement('button');
decrementBtn.className = 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-r border-gray-600 transition-colors flex items-center justify-center'; decrementBtn.className =
decrementBtn.innerHTML = '<i data-lucide="minus" class="w-3 h-3"></i>'; 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-r border-gray-600 transition-colors flex items-center justify-center';
decrementBtn.innerHTML = '<i data-lucide="minus" class="w-3 h-3"></i>';
const angleInput = document.createElement('input'); const angleInput = document.createElement('input');
angleInput.type = 'number'; angleInput.type = 'number';
angleInput.className = 'no-spinner w-full h-full bg-transparent text-white text-xs text-center focus:outline-none appearance-none m-0 p-0 border-none'; angleInput.className =
angleInput.value = initialRotation.toString(); 'no-spinner w-full h-full bg-transparent text-white text-xs text-center focus:outline-none appearance-none m-0 p-0 border-none';
angleInput.placeholder = "0"; angleInput.value = initialRotation.toString();
angleInput.placeholder = '0';
const incrementBtn = document.createElement('button'); const incrementBtn = document.createElement('button');
incrementBtn.className = 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-l border-gray-600 transition-colors flex items-center justify-center'; incrementBtn.className =
incrementBtn.innerHTML = '<i data-lucide="plus" class="w-3 h-3"></i>'; 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-l border-gray-600 transition-colors flex items-center justify-center';
incrementBtn.innerHTML = '<i data-lucide="plus" class="w-3 h-3"></i>';
// Helper to update rotation // Helper to update rotation
const updateRotation = (newRotation: number) => { const updateRotation = (newRotation: number) => {
const card = wrapper; // Closure capture const card = wrapper; // Closure capture
const imgEl = card.querySelector('img'); const imgEl = card.querySelector('img');
const pageIndex = pageNumber - 1; const pageIndex = pageNumber - 1;
// Update UI // Update UI
angleInput.value = newRotation.toString(); angleInput.value = newRotation.toString();
card.dataset.rotation = newRotation.toString(); card.dataset.rotation = newRotation.toString();
imgEl.style.transform = `rotate(${newRotation}deg)`; imgEl.style.transform = `rotate(${newRotation}deg)`;
// Update State // Update State
updateRotationState(pageIndex, newRotation); updateRotationState(pageIndex, newRotation);
}; };
// Event Listeners // Event Listeners
decrementBtn.addEventListener('click', (e) => { decrementBtn.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
const current = parseInt(angleInput.value) || 0; const current = parseInt(angleInput.value) || 0;
updateRotation(current - 1); updateRotation(current - 1);
}); });
incrementBtn.addEventListener('click', (e) => { incrementBtn.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
const current = parseInt(angleInput.value) || 0; const current = parseInt(angleInput.value) || 0;
updateRotation(current + 1); updateRotation(current + 1);
}); });
angleInput.addEventListener('change', (e) => { angleInput.addEventListener('change', (e) => {
e.stopPropagation(); e.stopPropagation();
const val = parseInt((e.target as HTMLInputElement).value) || 0; const val = parseInt((e.target as HTMLInputElement).value) || 0;
updateRotation(val); updateRotation(val);
}); });
angleInput.addEventListener('click', (e) => e.stopPropagation()); angleInput.addEventListener('click', (e) => e.stopPropagation());
stepperContainer.append(decrementBtn, angleInput, incrementBtn); stepperContainer.append(decrementBtn, angleInput, incrementBtn);
const rotateBtn = document.createElement('button'); const rotateBtn = document.createElement('button');
rotateBtn.className = 'rotate-btn btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded-md text-gray-200 transition-colors flex-shrink-0'; rotateBtn.className =
rotateBtn.title = 'Rotate +90°'; 'rotate-btn btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded-md text-gray-200 transition-colors flex-shrink-0';
rotateBtn.innerHTML = '<i data-lucide="rotate-cw" class="w-4 h-4"></i>'; rotateBtn.title = 'Rotate +90°';
rotateBtn.addEventListener('click', (e) => { rotateBtn.innerHTML = '<i data-lucide="rotate-cw" class="w-4 h-4"></i>';
e.stopPropagation(); rotateBtn.addEventListener('click', (e) => {
const current = parseInt(angleInput.value) || 0; e.stopPropagation();
updateRotation(current + 90); const current = parseInt(angleInput.value) || 0;
}); updateRotation(current + 90);
});
controlsDiv.append(stepperContainer, rotateBtn); controlsDiv.append(stepperContainer, rotateBtn);
wrapper.appendChild(controlsDiv); wrapper.appendChild(controlsDiv);
} else if (toolId === 'delete-pages') { } else if (toolId === 'delete-pages') {
wrapper.className = 'page-thumbnail relative group cursor-pointer transition-all duration-200'; wrapper.className =
wrapper.dataset.pageNumber = pageNumber.toString(); 'page-thumbnail relative cursor-pointer flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
wrapper.dataset.pageNumber = pageNumber.toString();
const innerContainer = document.createElement('div'); imgContainer.appendChild(pageNumSpan);
innerContainer.className = 'relative w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600 transition-colors duration-200'; wrapper.appendChild(imgContainer);
innerContainer.appendChild(img);
wrapper.appendChild(innerContainer);
const pageNumSpan = document.createElement('span'); wrapper.addEventListener('click', () => {
pageNumSpan.className = const input = document.getElementById(
'absolute top-2 left-2 bg-gray-900 bg-opacity-75 text-white text-xs font-medium rounded-md px-2 py-1 shadow-sm z-10 pointer-events-none'; 'pages-to-delete'
pageNumSpan.textContent = pageNumber.toString(); ) as HTMLInputElement;
wrapper.appendChild(pageNumSpan); if (!input) return;
wrapper.addEventListener('click', () => { const currentVal = input.value;
const input = document.getElementById('pages-to-delete') as HTMLInputElement; let pages = currentVal
if (!input) return; .split(',')
.map((s) => s.trim())
.filter((s) => s);
const pageStr = pageNumber.toString();
const currentVal = input.value; if (pages.includes(pageStr)) {
let pages = currentVal.split(',').map(s => s.trim()).filter(s => s); pages = pages.filter((p) => p !== pageStr);
const pageStr = pageNumber.toString(); } else {
pages.push(pageStr);
if (pages.includes(pageStr)) {
pages = pages.filter(p => p !== pageStr);
} else {
pages.push(pageStr);
}
pages.sort((a, b) => {
const numA = parseInt(a.split('-')[0]);
const numB = parseInt(b.split('-')[0]);
return numA - numB;
});
input.value = pages.join(', ');
input.dispatchEvent(new Event('input'));
});
} }
return wrapper; pages.sort((a, b) => {
}; const numA = parseInt(a.split('-')[0]);
const numB = parseInt(b.split('-')[0]);
return numA - numB;
});
try { input.value = pages.join(', ');
// Render pages progressively with lazy loading
await renderPagesProgressively(
pdf,
container,
createWrapper,
{
batchSize: 8,
useLazyLoading: true,
lazyLoadMargin: '300px',
onProgress: (current, total) => {
showLoader(`Rendering page previews: ${current}/${total}`);
},
onBatchComplete: () => {
createIcons({ icons });
},
shouldCancel: () => {
return container.dataset.renderId !== currentRenderId.toString();
}
}
);
if (toolId === 'organize') { input.dispatchEvent(new Event('input'));
initializeOrganizeSortable(containerId); });
} else if (toolId === 'delete-pages') {
// No sortable needed for delete pages
}
// Reinitialize lucide icons for dynamically added elements
createIcons({ icons });
} catch (error) {
console.error('Error rendering page thumbnails:', error);
showAlert(t('multiTool.error'), t('multiTool.errorRendering'));
} finally {
hideLoader();
} }
return wrapper;
};
try {
// Render pages progressively with lazy loading
await renderPagesProgressively(pdf, container, createWrapper, {
batchSize: 8,
useLazyLoading: true,
lazyLoadMargin: '300px',
onProgress: (current, total) => {
showLoader(`Rendering page previews: ${current}/${total}`);
},
onBatchComplete: () => {
createIcons({ icons });
},
shouldCancel: () => {
return container.dataset.renderId !== currentRenderId.toString();
},
});
if (toolId === 'organize') {
initializeOrganizeSortable(containerId);
} else if (toolId === 'delete-pages') {
// No sortable needed for delete pages
}
// Reinitialize lucide icons for dynamically added elements
createIcons({ icons });
// Attach Quick Look page preview
initPagePreview(container, pdf);
} catch (error) {
console.error('Error rendering page thumbnails:', error);
showAlert(t('multiTool.error'), t('multiTool.errorRendering'));
} finally {
hideLoader();
}
}; };
/** /**
@@ -425,36 +453,36 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
* @param {File[]} files The array of file objects. * @param {File[]} files The array of file objects.
*/ */
export const renderFileDisplay = (container: any, files: any) => { export const renderFileDisplay = (container: any, files: any) => {
container.textContent = ''; container.textContent = '';
if (files.length > 0) { if (files.length > 0) {
files.forEach((file: any) => { files.forEach((file: any) => {
const fileDiv = document.createElement('div'); const fileDiv = document.createElement('div');
fileDiv.className = fileDiv.className =
'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm'; 'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
const nameSpan = document.createElement('span'); const nameSpan = document.createElement('span');
nameSpan.className = 'truncate font-medium text-gray-200'; nameSpan.className = 'truncate font-medium text-gray-200';
nameSpan.textContent = file.name; nameSpan.textContent = file.name;
const sizeSpan = document.createElement('span'); const sizeSpan = document.createElement('span');
sizeSpan.className = 'flex-shrink-0 ml-4 text-gray-400'; sizeSpan.className = 'flex-shrink-0 ml-4 text-gray-400';
sizeSpan.textContent = formatBytes(file.size); sizeSpan.textContent = formatBytes(file.size);
fileDiv.append(nameSpan, sizeSpan); fileDiv.append(nameSpan, sizeSpan);
container.appendChild(fileDiv); container.appendChild(fileDiv);
}); });
} }
}; };
const createFileInputHTML = (options = {}) => { const createFileInputHTML = (options = {}) => {
// @ts-expect-error TS(2339) FIXME: Property 'multiple' does not exist on type '{}'. // @ts-expect-error TS(2339) FIXME: Property 'multiple' does not exist on type '{}'.
const multiple = options.multiple ? 'multiple' : ''; const multiple = options.multiple ? 'multiple' : '';
// @ts-expect-error TS(2339) FIXME: Property 'accept' does not exist on type '{}'. // @ts-expect-error TS(2339) FIXME: Property 'accept' does not exist on type '{}'.
const acceptedFiles = options.accept || 'application/pdf'; const acceptedFiles = options.accept || 'application/pdf';
// @ts-expect-error TS(2339) FIXME: Property 'showControls' does not exist on type '{}... Remove this comment to see the full error message // @ts-expect-error TS(2339) FIXME: Property 'showControls' does not exist on type '{}... Remove this comment to see the full error message
const showControls = options.showControls || false; // NEW: Add this parameter const showControls = options.showControls || false; // NEW: Add this parameter
return ` return `
<div id="drop-zone" class="relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300"> <div id="drop-zone" class="relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
<div class="flex flex-col items-center justify-center pt-5 pb-6"> <div class="flex flex-col items-center justify-center pt-5 pb-6">
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i> <i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
@@ -465,7 +493,8 @@ const createFileInputHTML = (options = {}) => {
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" ${multiple} accept="${acceptedFiles}"> <input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" ${multiple} accept="${acceptedFiles}">
</div> </div>
${showControls ${
showControls
? ` ? `
<!-- NEW: Add control buttons for multi-file uploads --> <!-- NEW: Add control buttons for multi-file uploads -->
<div id="file-controls" class="hidden mt-4 flex gap-3"> <div id="file-controls" class="hidden mt-4 flex gap-3">

215
src/js/utils/page-preview.ts Normal file
View File

@@ -0,0 +1,215 @@
import * as pdfjsLib from 'pdfjs-dist';
import type { PDFDocumentProxy } from 'pdfjs-dist';
import { PreviewState } from '@/types';
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url
).toString();
const state: PreviewState = {
modal: null,
pdfjsDoc: null,
currentPage: 1,
totalPages: 0,
isOpen: false,
container: null,
};
function getOrCreateModal(): HTMLElement {
if (state.modal) return state.modal;
const modal = document.createElement('div');
modal.id = 'page-preview-modal';
modal.className =
'fixed inset-0 bg-black/80 backdrop-blur-sm z-[60] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-200';
modal.innerHTML = `
<button id="preview-close" class="absolute top-4 right-4 text-white/70 hover:text-white z-10 transition-colors" title="Close (Esc)">
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
<button id="preview-prev" class="absolute left-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors p-2" title="Previous page">
<svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
</button>
<button id="preview-next" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors p-2" title="Next page">
<svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
</button>
<div id="preview-canvas-container" class="flex items-center justify-center max-w-[90vw] max-h-[85vh]">
<div id="preview-loading" class="text-white/60 text-sm">Loading...</div>
</div>
<div id="preview-page-info" class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-gray-900/80 text-white text-sm px-4 py-2 rounded-full backdrop-blur-sm"></div>
`;
modal.addEventListener('click', (e) => {
if (e.target === modal) hidePreview();
});
modal.querySelector('#preview-close')!.addEventListener('click', hidePreview);
modal
.querySelector('#preview-prev')!
.addEventListener('click', () => navigatePage(-1));
modal
.querySelector('#preview-next')!
.addEventListener('click', () => navigatePage(1));
document.body.appendChild(modal);
state.modal = modal;
return modal;
}
async function renderPreviewPage(pageNumber: number): Promise<void> {
if (!state.pdfjsDoc) return;
const modal = getOrCreateModal();
const container = modal.querySelector(
'#preview-canvas-container'
) as HTMLElement;
const pageInfo = modal.querySelector('#preview-page-info') as HTMLElement;
const prevBtn = modal.querySelector('#preview-prev') as HTMLElement;
const nextBtn = modal.querySelector('#preview-next') as HTMLElement;
container.innerHTML = '<div class="text-white/60 text-sm">Loading...</div>';
pageInfo.textContent = `Page ${pageNumber} of ${state.totalPages}`;
prevBtn.style.visibility = pageNumber > 1 ? 'visible' : 'hidden';
nextBtn.style.visibility =
pageNumber < state.totalPages ? 'visible' : 'hidden';
try {
const page = await state.pdfjsDoc.getPage(pageNumber);
const scale = 2.0;
const viewport = page.getViewport({ scale });
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.className =
'max-w-[90vw] max-h-[85vh] object-contain rounded-lg shadow-2xl';
canvas.style.width = 'auto';
canvas.style.height = 'auto';
canvas.style.maxWidth = '90vw';
canvas.style.maxHeight = '85vh';
const ctx = canvas.getContext('2d')!;
await page.render({ canvasContext: ctx, viewport, canvas }).promise;
container.innerHTML = '';
container.appendChild(canvas);
state.currentPage = pageNumber;
} catch (err) {
console.error('Preview render error:', err);
container.innerHTML =
'<div class="text-red-400 text-sm">Failed to render page</div>';
}
}
function navigatePage(delta: number): void {
const newPage = state.currentPage + delta;
if (newPage >= 1 && newPage <= state.totalPages) {
renderPreviewPage(newPage);
}
}
export function showPreview(
pdfjsDoc: PDFDocumentProxy,
pageNumber: number,
totalPages: number
): void {
state.pdfjsDoc = pdfjsDoc;
state.totalPages = totalPages;
state.isOpen = true;
const modal = getOrCreateModal();
modal.classList.remove('opacity-0', 'pointer-events-none');
document.body.style.overflow = 'hidden';
renderPreviewPage(pageNumber);
}
export function hidePreview(): void {
if (!state.modal) return;
state.isOpen = false;
state.modal.classList.add('opacity-0', 'pointer-events-none');
document.body.style.overflow = '';
}
function handleKeydown(e: KeyboardEvent): void {
if (!state.isOpen) return;
switch (e.key) {
case 'Escape':
hidePreview();
break;
case 'ArrowLeft':
e.preventDefault();
navigatePage(-1);
break;
case 'ArrowRight':
e.preventDefault();
navigatePage(1);
break;
}
}
document.addEventListener('keydown', handleKeydown);
export function initPagePreview(
container: HTMLElement,
pdfjsDoc: PDFDocumentProxy,
options: { pageAttr?: string } = {}
): void {
const totalPages = pdfjsDoc.numPages;
const thumbnails = container.querySelectorAll<HTMLElement>(
'[data-page-number], [data-page-index], [data-pageIndex]'
);
thumbnails.forEach((thumb) => {
if (thumb.dataset.previewInit) return;
thumb.dataset.previewInit = 'true';
let pageNum = 1;
if (thumb.dataset.pageNumber) {
pageNum = parseInt(thumb.dataset.pageNumber, 10);
} else if (thumb.dataset.pageIndex !== undefined) {
pageNum = parseInt(thumb.dataset.pageIndex, 10) + 1;
}
const icon = document.createElement('button');
icon.className =
'page-preview-btn absolute bottom-1 right-1 bg-gray-900/80 hover:bg-indigo-600 text-white/70 hover:text-white rounded-full w-7 h-7 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10';
icon.title = 'Preview';
icon.innerHTML =
'<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>';
icon.addEventListener('click', (e) => {
e.stopPropagation();
e.preventDefault();
showPreview(pdfjsDoc, pageNum, totalPages);
});
if (!thumb.classList.contains('relative')) {
thumb.classList.add('relative');
}
if (!thumb.classList.contains('group')) {
thumb.classList.add('group');
}
thumb.appendChild(icon);
});
container.addEventListener('keydown', (e) => {
if (e.key === ' ' && !state.isOpen) {
const hovered = container.querySelector<HTMLElement>(
'[data-preview-init]:hover'
);
if (hovered) {
e.preventDefault();
let pageNum = 1;
if (hovered.dataset.pageNumber) {
pageNum = parseInt(hovered.dataset.pageNumber, 10);
} else if (hovered.dataset.pageIndex !== undefined) {
pageNum = parseInt(hovered.dataset.pageIndex, 10) + 1;
}
showPreview(pdfjsDoc, pageNum, totalPages);
}
}
});
}

10
src/js/utils/render-utils.ts
View File

@@ -24,7 +24,7 @@ export interface RenderConfig {
*/ */
interface PageTask { interface PageTask {
pageNumber: number; pageNumber: number;
pdfjsDoc: any; pdfjsDoc: pdfjsLib.PDFDocumentProxy;
fileName?: string; fileName?: string;
container: HTMLElement; container: HTMLElement;
scale?: number; scale?: number;
@@ -92,9 +92,9 @@ export function createPlaceholder(
* Renders a single page to canvas * Renders a single page to canvas
*/ */
export async function renderPageToCanvas( export async function renderPageToCanvas(
pdfjsDoc: any, pdfjsDoc: pdfjsLib.PDFDocumentProxy,
pageNumber: number, pageNumber: number,
scale: number = 0.5 scale: number = 1
): Promise<HTMLCanvasElement> { ): Promise<HTMLCanvasElement> {
const page = await pdfjsDoc.getPage(pageNumber); const page = await pdfjsDoc.getPage(pageNumber);
const viewport = page.getViewport({ scale }); const viewport = page.getViewport({ scale });
@@ -260,7 +260,7 @@ function requestIdleCallbackPolyfill(callback: () => void): void {
* Main function to render pages progressively with optional lazy loading * Main function to render pages progressively with optional lazy loading
*/ */
export async function renderPagesProgressively( export async function renderPagesProgressively(
pdfjsDoc: any, pdfjsDoc: pdfjsLib.PDFDocumentProxy,
container: HTMLElement, container: HTMLElement,
createWrapper: ( createWrapper: (
canvas: HTMLCanvasElement, canvas: HTMLCanvasElement,
@@ -298,7 +298,7 @@ export async function renderPagesProgressively(
pageNumber: i, pageNumber: i,
pdfjsDoc, pdfjsDoc,
container, container,
scale: useLazyLoading ? 0.3 : 0.5, scale: useLazyLoading ? 0.5 : 1,
createWrapper, createWrapper,
placeholderElement: placeholders[i - 1], placeholderElement: placeholders[i - 1],
}); });

17
src/pages/organize-pdf.html
View File

@@ -182,24 +182,25 @@
></div> ></div>
<!-- Advanced Settings --> <!-- Advanced Settings -->
<div id="advanced-settings" class="hidden mt-6"> <div id="advanced-settings" class="hidden mt-6 space-y-3">
<h3 class="text-lg font-semibold text-white mb-2"> <h3 class="text-lg font-semibold text-white">Advanced Settings</h3>
Advanced Settings <div class="bg-gray-800/50 p-4 rounded-lg border border-gray-700">
</h3>
<div class="bg-gray-700 p-4 rounded-lg">
<label <label
for="page-order-input" for="page-order-input"
class="block text-sm font-medium text-gray-300 mb-2" class="block text-sm font-medium text-gray-300 mb-2"
>Page Order (comma-separated)</label >Page Order (comma-separated)</label
> >
<div class="flex gap-2"> <div class="flex gap-3">
<input <input
type="text" type="text"
id="page-order-input" id="page-order-input"
class="w-full bg-gray-900 text-white rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 border border-gray-600" class="flex-1 bg-gray-900 text-white rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 border border-gray-600 placeholder-gray-500"
placeholder="e.g., 3,1,4,2" placeholder="e.g., 3,1,4,2"
/> />
<button id="apply-order-btn" class="btn-secondary"> <button
id="apply-order-btn"
class="btn-gradient whitespace-nowrap !px-5 !py-2.5 text-sm"
>
Apply Order Apply Order
</button> </button>
</div> </div>