9d0b68e18c
- Updated function parameters and return types in `page-preview.ts`, `pdf-decrypt.ts`, and `pymupdf-loader.ts` for improved type safety. - Introduced type definitions for `CpdfInstance`, `PyMuPDFInstance`, and other related types to ensure better type checking. - Enhanced error handling in `sanitize.ts` by creating a utility function for error messages. - Removed unnecessary type assertions and improved type inference in `editor.ts`, `serialization.ts`, and `tools.test.ts`. - Added type definitions for markdown-it plugins to improve compatibility and type safety. - Enforced stricter TypeScript settings by enabling `noImplicitAny` in `tsconfig.json`. - Cleaned up test files by refining type assertions and ensuring consistency in type usage.
514 lines
19 KiB
TypeScript
514 lines
19 KiB
TypeScript
import { resetState } from './state.js';
|
|
import { formatBytes, getPDFDocument } from './utils/helpers.js';
|
|
import {
|
|
renderPagesProgressively,
|
|
cleanupLazyRendering,
|
|
} from './utils/render-utils.js';
|
|
import { initPagePreview } from './utils/page-preview.js';
|
|
import { icons, createIcons } from 'lucide';
|
|
import Sortable from 'sortablejs';
|
|
import {
|
|
getRotationState,
|
|
updateRotationState,
|
|
} from './utils/rotation-state.js';
|
|
import * as pdfjsLib from 'pdfjs-dist';
|
|
import { t } from './i18n/i18n';
|
|
import type { FileInputOptions } from '@/types';
|
|
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
|
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
import.meta.url
|
|
).toString();
|
|
|
|
// Centralizing DOM element selection
|
|
export const dom = {
|
|
gridView: document.getElementById('grid-view'),
|
|
toolGrid: document.getElementById('tool-grid'),
|
|
toolInterface: document.getElementById('tool-interface'),
|
|
toolContent: document.getElementById('tool-content'),
|
|
backToGridBtn: document.getElementById('back-to-grid'),
|
|
loaderModal: document.getElementById('loader-modal'),
|
|
loaderText: document.getElementById('loader-text'),
|
|
alertModal: document.getElementById('alert-modal'),
|
|
alertTitle: document.getElementById('alert-title'),
|
|
alertMessage: document.getElementById('alert-message'),
|
|
alertOkBtn: document.getElementById('alert-ok'),
|
|
heroSection: document.getElementById('hero-section'),
|
|
featuresSection: document.getElementById('features-section'),
|
|
toolsHeader: document.getElementById('tools-header'),
|
|
dividers: document.querySelectorAll('.section-divider'),
|
|
hideSections: document.querySelectorAll('.hide-section'),
|
|
shortcutsModal: document.getElementById('shortcuts-modal'),
|
|
closeShortcutsModalBtn: document.getElementById('close-shortcuts-modal'),
|
|
shortcutsList: document.getElementById('shortcuts-list'),
|
|
shortcutSearch: document.getElementById('shortcut-search'),
|
|
resetShortcutsBtn: document.getElementById('reset-shortcuts-btn'),
|
|
importShortcutsBtn: document.getElementById('import-shortcuts-btn'),
|
|
exportShortcutsBtn: document.getElementById('export-shortcuts-btn'),
|
|
openShortcutsBtn: document.getElementById('open-shortcuts-btn'),
|
|
warningModal: document.getElementById('warning-modal'),
|
|
warningTitle: document.getElementById('warning-title'),
|
|
warningMessage: document.getElementById('warning-message'),
|
|
warningCancelBtn: document.getElementById('warning-cancel-btn'),
|
|
warningConfirmBtn: document.getElementById('warning-confirm-btn'),
|
|
};
|
|
|
|
export const showLoader = (text = t('common.loading'), progress?: number) => {
|
|
if (dom.loaderText) dom.loaderText.textContent = text;
|
|
|
|
// Add or update progress bar if progress is provided
|
|
const loaderModal = dom.loaderModal;
|
|
if (loaderModal) {
|
|
let progressBar = loaderModal.querySelector(
|
|
'.loader-progress-bar'
|
|
) as HTMLElement;
|
|
let progressContainer = loaderModal.querySelector(
|
|
'.loader-progress-container'
|
|
) as HTMLElement;
|
|
|
|
if (progress !== undefined && progress >= 0) {
|
|
// Create progress container if it doesn't exist
|
|
if (!progressContainer) {
|
|
progressContainer = document.createElement('div');
|
|
progressContainer.className = 'loader-progress-container w-64 mt-4';
|
|
progressContainer.innerHTML = `
|
|
<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>
|
|
<p class="loader-progress-text text-xs text-gray-400 mt-1 text-center">0%</p>
|
|
`;
|
|
loaderModal
|
|
.querySelector('.bg-gray-800')
|
|
?.appendChild(progressContainer);
|
|
progressBar = progressContainer.querySelector(
|
|
'.loader-progress-bar'
|
|
) as HTMLElement;
|
|
}
|
|
|
|
// Update progress
|
|
if (progressBar) {
|
|
progressBar.style.width = `${progress}%`;
|
|
}
|
|
const progressText = progressContainer.querySelector(
|
|
'.loader-progress-text'
|
|
);
|
|
if (progressText) {
|
|
progressText.textContent = `${Math.round(progress)}%`;
|
|
}
|
|
progressContainer.classList.remove('hidden');
|
|
} else {
|
|
// Hide progress bar if no progress provided
|
|
if (progressContainer) {
|
|
progressContainer.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
loaderModal.classList.remove('hidden');
|
|
}
|
|
};
|
|
|
|
export const hideLoader = () => {
|
|
if (dom.loaderModal) dom.loaderModal.classList.add('hidden');
|
|
};
|
|
|
|
export const showAlert = (
|
|
title: string,
|
|
message: string,
|
|
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) {
|
|
const newOkBtn = dom.alertOkBtn.cloneNode(true) as HTMLElement;
|
|
dom.alertOkBtn.replaceWith(newOkBtn);
|
|
dom.alertOkBtn = newOkBtn;
|
|
|
|
newOkBtn.addEventListener('click', () => {
|
|
hideAlert();
|
|
if (callback) callback();
|
|
});
|
|
}
|
|
};
|
|
|
|
export const hideAlert = () => {
|
|
if (dom.alertModal) dom.alertModal.classList.add('hidden');
|
|
};
|
|
|
|
export const switchView = (view: string) => {
|
|
if (view === 'grid') {
|
|
dom.gridView.classList.remove('hidden');
|
|
dom.toolInterface.classList.add('hidden');
|
|
// show hero and features and header
|
|
dom.heroSection.classList.remove('hidden');
|
|
dom.featuresSection.classList.remove('hidden');
|
|
dom.toolsHeader.classList.remove('hidden');
|
|
// show dividers
|
|
dom.dividers.forEach((divider) => {
|
|
divider.classList.remove('hidden');
|
|
});
|
|
// show hideSections
|
|
dom.hideSections.forEach((section) => {
|
|
section.classList.remove('hidden');
|
|
});
|
|
|
|
resetState();
|
|
} else {
|
|
dom.gridView.classList.add('hidden');
|
|
dom.toolInterface.classList.remove('hidden');
|
|
dom.featuresSection.classList.add('hidden');
|
|
dom.heroSection.classList.add('hidden');
|
|
dom.toolsHeader.classList.add('hidden');
|
|
dom.dividers.forEach((divider) => {
|
|
divider.classList.add('hidden');
|
|
});
|
|
dom.hideSections.forEach((section) => {
|
|
section.classList.add('hidden');
|
|
});
|
|
}
|
|
};
|
|
|
|
const thumbnailState: {
|
|
sortableInstances: Record<string, Sortable>;
|
|
} = {
|
|
sortableInstances: {},
|
|
};
|
|
|
|
function initializeOrganizeSortable(containerId: string) {
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
if (thumbnailState.sortableInstances[containerId]) {
|
|
thumbnailState.sortableInstances[containerId].destroy();
|
|
}
|
|
|
|
thumbnailState.sortableInstances[containerId] = Sortable.create(container, {
|
|
animation: 150,
|
|
ghostClass: 'sortable-ghost',
|
|
chosenClass: 'sortable-chosen',
|
|
dragClass: 'sortable-drag',
|
|
filter: '.delete-page-btn',
|
|
preventOnFilter: true,
|
|
onStart: function (evt: Sortable.SortableEvent) {
|
|
evt.item.style.opacity = '0.5';
|
|
},
|
|
onEnd: function (evt: Sortable.SortableEvent) {
|
|
evt.item.style.opacity = '1';
|
|
},
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Renders page thumbnails for tools like 'Organize' and 'Rotate'.
|
|
* @param {string} toolId The ID of the active tool.
|
|
* @param {object} pdfDoc The loaded pdf-lib document instance.
|
|
*/
|
|
export const renderPageThumbnails = async (
|
|
toolId: string,
|
|
pdfDoc: { save: () => Promise<Uint8Array> }
|
|
) => {
|
|
const containerId =
|
|
toolId === 'organize'
|
|
? 'page-organizer'
|
|
: toolId === 'delete-pages'
|
|
? 'delete-pages-preview'
|
|
: 'page-rotator';
|
|
const container = document.getElementById(containerId);
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
// Cleanup any previous lazy loading observers
|
|
cleanupLazyRendering();
|
|
|
|
const currentRenderId = Date.now();
|
|
container.dataset.renderId = currentRenderId.toString();
|
|
|
|
showLoader(t('multiTool.renderingTitle'));
|
|
|
|
const pdfData = await pdfDoc.save();
|
|
const pdf = await getPDFDocument({ data: pdfData }).promise;
|
|
|
|
// Function to create wrapper element for each page
|
|
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.dataset.pageIndex = String(pageNumber - 1);
|
|
|
|
const imgContainer = document.createElement('div');
|
|
imgContainer.className = 'relative';
|
|
|
|
const img = document.createElement('img');
|
|
img.src = canvas.toDataURL();
|
|
img.className = 'rounded-md shadow-md max-w-full h-auto';
|
|
|
|
imgContainer.appendChild(img);
|
|
|
|
const pageNumSpan = document.createElement('div');
|
|
pageNumSpan.className =
|
|
'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();
|
|
|
|
if (toolId === 'organize') {
|
|
wrapper.className =
|
|
'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';
|
|
|
|
imgContainer.appendChild(pageNumSpan);
|
|
wrapper.appendChild(imgContainer);
|
|
|
|
const deleteBtn = document.createElement('button');
|
|
deleteBtn.className =
|
|
'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';
|
|
deleteBtn.innerHTML = '×';
|
|
deleteBtn.addEventListener('click', (e) => {
|
|
(e.currentTarget as HTMLElement).parentElement.remove();
|
|
|
|
// 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();
|
|
}
|
|
});
|
|
|
|
initializeOrganizeSortable(containerId);
|
|
});
|
|
|
|
wrapper.appendChild(deleteBtn);
|
|
} else if (toolId === 'rotate') {
|
|
wrapper.className =
|
|
'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';
|
|
|
|
// Read rotation from state (handles "Rotate All" on lazy-loaded pages)
|
|
const rotationStateArray = getRotationState();
|
|
const pageIndex = pageNumber - 1;
|
|
const initialRotation = rotationStateArray[pageIndex] || 0;
|
|
|
|
wrapper.dataset.rotation = initialRotation.toString();
|
|
img.classList.add('transition-transform', 'duration-300');
|
|
|
|
// Apply initial rotation if any
|
|
if (initialRotation !== 0) {
|
|
img.style.transform = `rotate(${initialRotation}deg)`;
|
|
}
|
|
|
|
imgContainer.appendChild(pageNumSpan);
|
|
wrapper.appendChild(imgContainer);
|
|
|
|
const controlsDiv = document.createElement('div');
|
|
controlsDiv.className =
|
|
'flex flex-col lg:flex-row items-center justify-center w-full gap-2 px-1';
|
|
|
|
// Custom Stepper Component
|
|
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';
|
|
|
|
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.innerHTML = '<i data-lucide="minus" class="w-3 h-3"></i>';
|
|
|
|
const angleInput = document.createElement('input');
|
|
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.value = initialRotation.toString();
|
|
angleInput.placeholder = '0';
|
|
|
|
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.innerHTML = '<i data-lucide="plus" class="w-3 h-3"></i>';
|
|
|
|
// Helper to update rotation
|
|
const updateRotation = (newRotation: number) => {
|
|
const card = wrapper; // Closure capture
|
|
const imgEl = card.querySelector('img');
|
|
const pageIndex = pageNumber - 1;
|
|
|
|
// Update UI
|
|
angleInput.value = newRotation.toString();
|
|
card.dataset.rotation = newRotation.toString();
|
|
imgEl.style.transform = `rotate(${newRotation}deg)`;
|
|
|
|
// Update State
|
|
updateRotationState(pageIndex, newRotation);
|
|
};
|
|
|
|
// Event Listeners
|
|
decrementBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const current = parseInt(angleInput.value) || 0;
|
|
updateRotation(current - 1);
|
|
});
|
|
|
|
incrementBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const current = parseInt(angleInput.value) || 0;
|
|
updateRotation(current + 1);
|
|
});
|
|
|
|
angleInput.addEventListener('change', (e) => {
|
|
e.stopPropagation();
|
|
const val = parseInt((e.target as HTMLInputElement).value) || 0;
|
|
updateRotation(val);
|
|
});
|
|
angleInput.addEventListener('click', (e) => e.stopPropagation());
|
|
|
|
stepperContainer.append(decrementBtn, angleInput, incrementBtn);
|
|
|
|
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.title = 'Rotate +90°';
|
|
rotateBtn.innerHTML = '<i data-lucide="rotate-cw" class="w-4 h-4"></i>';
|
|
rotateBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const current = parseInt(angleInput.value) || 0;
|
|
updateRotation(current + 90);
|
|
});
|
|
|
|
controlsDiv.append(stepperContainer, rotateBtn);
|
|
wrapper.appendChild(controlsDiv);
|
|
} else if (toolId === 'delete-pages') {
|
|
wrapper.className =
|
|
'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();
|
|
|
|
imgContainer.appendChild(pageNumSpan);
|
|
wrapper.appendChild(imgContainer);
|
|
|
|
wrapper.addEventListener('click', () => {
|
|
const input = document.getElementById(
|
|
'pages-to-delete'
|
|
) as HTMLInputElement;
|
|
if (!input) return;
|
|
|
|
const currentVal = input.value;
|
|
let pages = currentVal
|
|
.split(',')
|
|
.map((s) => s.trim())
|
|
.filter((s) => s);
|
|
const pageStr = pageNumber.toString();
|
|
|
|
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;
|
|
};
|
|
|
|
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();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Renders a list of uploaded files in the specified container.
|
|
* @param {HTMLElement} container The DOM element to render the list into.
|
|
* @param {File[]} files The array of file objects.
|
|
*/
|
|
export const renderFileDisplay = (container: HTMLElement, files: File[]) => {
|
|
container.textContent = '';
|
|
if (files.length > 0) {
|
|
files.forEach((file: File) => {
|
|
const fileDiv = document.createElement('div');
|
|
fileDiv.className =
|
|
'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
|
|
|
|
const nameSpan = document.createElement('span');
|
|
nameSpan.className = 'truncate font-medium text-gray-200';
|
|
nameSpan.textContent = file.name;
|
|
|
|
const sizeSpan = document.createElement('span');
|
|
sizeSpan.className = 'flex-shrink-0 ml-4 text-gray-400';
|
|
sizeSpan.textContent = formatBytes(file.size);
|
|
|
|
fileDiv.append(nameSpan, sizeSpan);
|
|
container.appendChild(fileDiv);
|
|
});
|
|
}
|
|
};
|
|
|
|
const createFileInputHTML = (options: FileInputOptions = {}) => {
|
|
const multiple = options.multiple ? 'multiple' : '';
|
|
const acceptedFiles = options.accept || 'application/pdf';
|
|
const showControls = options.showControls || false;
|
|
|
|
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 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>
|
|
<p class="mb-2 text-sm text-gray-400"><span class="font-semibold">${t('upload.clickToSelect')}</span> ${t('upload.orDragAndDrop')}</p>
|
|
<p class="text-xs text-gray-500">${multiple ? t('upload.pdfOrImages') : 'A single PDF file'}</p>
|
|
<p class="text-xs text-gray-500">${t('upload.filesNeverLeave')}</p>
|
|
</div>
|
|
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" ${multiple} accept="${acceptedFiles}">
|
|
</div>
|
|
|
|
${
|
|
showControls
|
|
? `
|
|
<!-- NEW: Add control buttons for multi-file uploads -->
|
|
<div id="file-controls" class="hidden mt-4 flex gap-3">
|
|
<button id="add-more-btn" class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
|
|
<i data-lucide="plus"></i> ${t('upload.addMore')}
|
|
</button>
|
|
<button id="clear-files-btn" class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2">
|
|
<i data-lucide="trash-2"></i> ${t('upload.clearAll')}
|
|
</button>
|
|
</div>
|
|
`
|
|
: ''
|
|
}
|
|
`;
|
|
};
|