307 lines
11 KiB
TypeScript
307 lines
11 KiB
TypeScript
import { showLoader, hideLoader, showAlert } from '../ui.js';
|
|
import { getPDFDocument } from '../utils/helpers.js';
|
|
import { icons, createIcons } from 'lucide';
|
|
import * as pdfjsLib from 'pdfjs-dist';
|
|
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
|
|
|
interface CompareState {
|
|
pdfDoc1: pdfjsLib.PDFDocumentProxy | null;
|
|
pdfDoc2: pdfjsLib.PDFDocumentProxy | null;
|
|
currentPage: number;
|
|
viewMode: 'overlay' | 'side-by-side';
|
|
isSyncScroll: boolean;
|
|
}
|
|
|
|
const pageState: CompareState = {
|
|
pdfDoc1: null,
|
|
pdfDoc2: null,
|
|
currentPage: 1,
|
|
viewMode: 'overlay',
|
|
isSyncScroll: true,
|
|
};
|
|
|
|
async function renderPage(
|
|
pdfDoc: pdfjsLib.PDFDocumentProxy,
|
|
pageNum: number,
|
|
canvas: HTMLCanvasElement,
|
|
container: HTMLElement
|
|
) {
|
|
const page = await pdfDoc.getPage(pageNum);
|
|
|
|
const containerWidth = container.clientWidth - 2;
|
|
const viewport = page.getViewport({ scale: 1.0 });
|
|
const scale = containerWidth / viewport.width;
|
|
const scaledViewport = page.getViewport({ scale: scale });
|
|
|
|
canvas.width = scaledViewport.width;
|
|
canvas.height = scaledViewport.height;
|
|
|
|
await page.render({
|
|
canvasContext: canvas.getContext('2d')!,
|
|
viewport: scaledViewport,
|
|
canvas
|
|
}).promise;
|
|
}
|
|
|
|
async function renderBothPages() {
|
|
if (!pageState.pdfDoc1 || !pageState.pdfDoc2) return;
|
|
|
|
showLoader(`Loading page ${pageState.currentPage}...`);
|
|
|
|
const canvas1 = document.getElementById('canvas-compare-1') as HTMLCanvasElement;
|
|
const canvas2 = document.getElementById('canvas-compare-2') as HTMLCanvasElement;
|
|
const panel1 = document.getElementById('panel-1') as HTMLElement;
|
|
const panel2 = document.getElementById('panel-2') as HTMLElement;
|
|
const wrapper = document.getElementById('compare-viewer-wrapper') as HTMLElement;
|
|
|
|
const container1 = pageState.viewMode === 'overlay' ? wrapper : panel1;
|
|
const container2 = pageState.viewMode === 'overlay' ? wrapper : panel2;
|
|
|
|
await Promise.all([
|
|
renderPage(
|
|
pageState.pdfDoc1,
|
|
Math.min(pageState.currentPage, pageState.pdfDoc1.numPages),
|
|
canvas1,
|
|
container1
|
|
),
|
|
renderPage(
|
|
pageState.pdfDoc2,
|
|
Math.min(pageState.currentPage, pageState.pdfDoc2.numPages),
|
|
canvas2,
|
|
container2
|
|
),
|
|
]);
|
|
|
|
updateNavControls();
|
|
hideLoader();
|
|
}
|
|
|
|
function updateNavControls() {
|
|
const maxPages = Math.max(
|
|
pageState.pdfDoc1?.numPages || 0,
|
|
pageState.pdfDoc2?.numPages || 0
|
|
);
|
|
const currentDisplay = document.getElementById('current-page-display-compare');
|
|
const totalDisplay = document.getElementById('total-pages-display-compare');
|
|
const prevBtn = document.getElementById('prev-page-compare') as HTMLButtonElement;
|
|
const nextBtn = document.getElementById('next-page-compare') as HTMLButtonElement;
|
|
|
|
if (currentDisplay) currentDisplay.textContent = pageState.currentPage.toString();
|
|
if (totalDisplay) totalDisplay.textContent = maxPages.toString();
|
|
if (prevBtn) prevBtn.disabled = pageState.currentPage <= 1;
|
|
if (nextBtn) nextBtn.disabled = pageState.currentPage >= maxPages;
|
|
}
|
|
|
|
function setViewMode(mode: 'overlay' | 'side-by-side') {
|
|
pageState.viewMode = mode;
|
|
const wrapper = document.getElementById('compare-viewer-wrapper');
|
|
const overlayControls = document.getElementById('overlay-controls');
|
|
const sideControls = document.getElementById('side-by-side-controls');
|
|
const btnOverlay = document.getElementById('view-mode-overlay');
|
|
const btnSide = document.getElementById('view-mode-side');
|
|
const canvas2 = document.getElementById('canvas-compare-2') as HTMLCanvasElement;
|
|
const opacitySlider = document.getElementById('opacity-slider') as HTMLInputElement;
|
|
|
|
if (mode === 'overlay') {
|
|
if (wrapper) wrapper.className = 'compare-viewer-wrapper overlay-mode bg-gray-900 rounded-lg border border-gray-700 min-h-[400px] relative';
|
|
if (overlayControls) overlayControls.classList.remove('hidden');
|
|
if (sideControls) sideControls.classList.add('hidden');
|
|
if (btnOverlay) {
|
|
btnOverlay.classList.add('bg-indigo-600');
|
|
btnOverlay.classList.remove('bg-gray-700');
|
|
}
|
|
if (btnSide) {
|
|
btnSide.classList.remove('bg-indigo-600');
|
|
btnSide.classList.add('bg-gray-700');
|
|
}
|
|
if (canvas2 && opacitySlider) canvas2.style.opacity = opacitySlider.value;
|
|
} else {
|
|
if (wrapper) wrapper.className = 'compare-viewer-wrapper side-by-side-mode bg-gray-900 rounded-lg border border-gray-700 min-h-[400px]';
|
|
if (overlayControls) overlayControls.classList.add('hidden');
|
|
if (sideControls) sideControls.classList.remove('hidden');
|
|
if (btnOverlay) {
|
|
btnOverlay.classList.remove('bg-indigo-600');
|
|
btnOverlay.classList.add('bg-gray-700');
|
|
}
|
|
if (btnSide) {
|
|
btnSide.classList.add('bg-indigo-600');
|
|
btnSide.classList.remove('bg-gray-700');
|
|
}
|
|
if (canvas2) canvas2.style.opacity = '1';
|
|
}
|
|
renderBothPages();
|
|
}
|
|
|
|
async function handleFileInput(inputId: string, docKey: 'pdfDoc1' | 'pdfDoc2', displayId: string) {
|
|
const fileInput = document.getElementById(inputId) as HTMLInputElement;
|
|
const dropZone = document.getElementById(`drop-zone-${inputId.slice(-1)}`);
|
|
|
|
async function handleFile(file: File) {
|
|
if (!file || file.type !== 'application/pdf') {
|
|
showAlert('Invalid File', 'Please select a valid PDF file.');
|
|
return;
|
|
}
|
|
|
|
const displayDiv = document.getElementById(displayId);
|
|
if (displayDiv) {
|
|
displayDiv.innerHTML = '';
|
|
|
|
const icon = document.createElement('i');
|
|
icon.setAttribute('data-lucide', 'check-circle');
|
|
icon.className = 'w-10 h-10 mb-3 text-green-500';
|
|
|
|
const p = document.createElement('p');
|
|
p.className = 'text-sm text-gray-300 truncate';
|
|
p.textContent = file.name;
|
|
|
|
displayDiv.append(icon, p);
|
|
createIcons({ icons });
|
|
}
|
|
|
|
try {
|
|
showLoader(`Loading ${file.name}...`);
|
|
const arrayBuffer = await file.arrayBuffer();
|
|
pageState[docKey] = await getPDFDocument({ data: arrayBuffer }).promise;
|
|
|
|
if (pageState.pdfDoc1 && pageState.pdfDoc2) {
|
|
const compareViewer = document.getElementById('compare-viewer');
|
|
if (compareViewer) compareViewer.classList.remove('hidden');
|
|
pageState.currentPage = 1;
|
|
await renderBothPages();
|
|
}
|
|
} catch (e) {
|
|
showAlert('Error', 'Could not load PDF. It may be corrupt or password-protected.');
|
|
console.error(e);
|
|
} finally {
|
|
hideLoader();
|
|
}
|
|
}
|
|
|
|
if (fileInput) {
|
|
fileInput.addEventListener('change', function (e) {
|
|
const files = (e.target as HTMLInputElement).files;
|
|
if (files && files[0]) handleFile(files[0]);
|
|
});
|
|
}
|
|
|
|
if (dropZone) {
|
|
dropZone.addEventListener('dragover', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
dropZone.addEventListener('drop', function (e) {
|
|
e.preventDefault();
|
|
const files = e.dataTransfer?.files;
|
|
if (files && files[0]) handleFile(files[0]);
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const backBtn = document.getElementById('back-to-tools');
|
|
|
|
if (backBtn) {
|
|
backBtn.addEventListener('click', function () {
|
|
window.location.href = import.meta.env.BASE_URL;
|
|
});
|
|
}
|
|
|
|
handleFileInput('file-input-1', 'pdfDoc1', 'file-display-1');
|
|
handleFileInput('file-input-2', 'pdfDoc2', 'file-display-2');
|
|
|
|
const prevBtn = document.getElementById('prev-page-compare');
|
|
const nextBtn = document.getElementById('next-page-compare');
|
|
|
|
if (prevBtn) {
|
|
prevBtn.addEventListener('click', function () {
|
|
if (pageState.currentPage > 1) {
|
|
pageState.currentPage--;
|
|
renderBothPages();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (nextBtn) {
|
|
nextBtn.addEventListener('click', function () {
|
|
const maxPages = Math.max(
|
|
pageState.pdfDoc1?.numPages || 0,
|
|
pageState.pdfDoc2?.numPages || 0
|
|
);
|
|
if (pageState.currentPage < maxPages) {
|
|
pageState.currentPage++;
|
|
renderBothPages();
|
|
}
|
|
});
|
|
}
|
|
|
|
const btnOverlay = document.getElementById('view-mode-overlay');
|
|
const btnSide = document.getElementById('view-mode-side');
|
|
|
|
if (btnOverlay) {
|
|
btnOverlay.addEventListener('click', function () {
|
|
setViewMode('overlay');
|
|
});
|
|
}
|
|
|
|
if (btnSide) {
|
|
btnSide.addEventListener('click', function () {
|
|
setViewMode('side-by-side');
|
|
});
|
|
}
|
|
|
|
const flickerBtn = document.getElementById('flicker-btn');
|
|
const canvas2 = document.getElementById('canvas-compare-2') as HTMLCanvasElement;
|
|
const opacitySlider = document.getElementById('opacity-slider') as HTMLInputElement;
|
|
|
|
// Track flicker state
|
|
let flickerVisible = true;
|
|
|
|
if (flickerBtn && canvas2) {
|
|
flickerBtn.addEventListener('click', function () {
|
|
flickerVisible = !flickerVisible;
|
|
canvas2.style.transition = 'opacity 150ms ease-in-out';
|
|
canvas2.style.opacity = flickerVisible ? (opacitySlider?.value || '0.5') : '0';
|
|
});
|
|
}
|
|
|
|
if (opacitySlider && canvas2) {
|
|
opacitySlider.addEventListener('input', function () {
|
|
flickerVisible = true; // Reset flicker state when slider changes
|
|
canvas2.style.transition = '';
|
|
canvas2.style.opacity = opacitySlider.value;
|
|
});
|
|
}
|
|
|
|
const panel1 = document.getElementById('panel-1');
|
|
const panel2 = document.getElementById('panel-2');
|
|
const syncToggle = document.getElementById('sync-scroll-toggle') as HTMLInputElement;
|
|
|
|
if (syncToggle) {
|
|
syncToggle.addEventListener('change', function () {
|
|
pageState.isSyncScroll = syncToggle.checked;
|
|
});
|
|
}
|
|
|
|
let scrollingPanel: HTMLElement | null = null;
|
|
|
|
if (panel1 && panel2) {
|
|
panel1.addEventListener('scroll', function () {
|
|
if (pageState.isSyncScroll && scrollingPanel !== panel2) {
|
|
scrollingPanel = panel1;
|
|
panel2.scrollTop = panel1.scrollTop;
|
|
setTimeout(function () { scrollingPanel = null; }, 100);
|
|
}
|
|
});
|
|
|
|
panel2.addEventListener('scroll', function () {
|
|
if (pageState.isSyncScroll && scrollingPanel !== panel1) {
|
|
scrollingPanel = panel2;
|
|
panel1.scrollTop = panel2.scrollTop;
|
|
setTimeout(function () { scrollingPanel = null; }, 100);
|
|
}
|
|
});
|
|
}
|
|
|
|
createIcons({ icons });
|
|
});
|