pdfView = async (url, opts) => { const options = Object.assign( {}, { startPage: 1, scale: 1, backgroundColor: "#f4f4f4", fontColor: "#6e6e6e", zoomStep: 0.25, minScale: 0.5, maxScale: 3 }, opts ); const { startPage } = options; let rootEl; let prevButton, nextButton, zoomInButton, zoomOutButton, downloadButton; let currentPage = startPage || 1; let scale = options.scale; const uid = initializeStyles(options); const ns = uid.id; // --- Charger le PDF const pdfDoc = await pdfjsLib.getDocument(url).promise; const totalPages = pdfDoc.numPages; // --- Créer les éléments const canvas = html`

`; const innerWrapper = html`

${canvas}

`; const outerWrapper = html`

${innerWrapper}

`; const pagePicker = pagePickerInput(currentPage, totalPages); // --- Rendu PDF initial async function renderCurrentPage() { return renderPageToCanvas(canvas, pdfDoc, currentPage, { ...options, scale: 1 }); } async function showPage(num) { if (num >= 1 && num <= totalPages) { currentPage = num; await renderCurrentPage(); updateUI(); } } function showNextPage() { showPage(Math.min(currentPage + 1, totalPages)); } function showPreviousPage() { showPage(Math.max(currentPage - 1, 1)); } // --- 🔍 Zoom visuel (sur le wrapper interne) function updateUI() { pagePicker.value = currentPage; prevButton[0].disabled = currentPage <= 1; nextButton[0].disabled = currentPage >= totalPages; zoomDisplay.textContent = `${Math.round(scale * 100)}%`; innerWrapper.style.transform = `scale(${scale})`; innerWrapper.style.transition = "transform 0.25s ease-out"; } function zoomIn() { scale = Math.min(scale + options.zoomStep, options.maxScale); updateUI(); } function zoomOut() { scale = Math.max(scale - options.zoomStep, options.minScale); updateUI(); } // --- Pagination handler const pageChangeHandler = (e) => { const nextPage = +e.currentTarget.value; showPage(nextPage); }; pagePicker.addEventListener("change", pageChangeHandler); invalidation.then(() => pagePicker.removeEventListener("change", pageChangeHandler) ); // --- Boutons prevButton = Inputs.button("Previous", { reduce: () => showPreviousPage() }); nextButton = Inputs.button("Next", { reduce: () => showNextPage() }); zoomInButton = Inputs.button("Zoom +", { reduce: () => zoomIn() }); zoomOutButton = Inputs.button("Zoom –", { reduce: () => zoomOut() }); // --- 🧩 Bouton de téléchargement downloadButton = Inputs.button("Download PDF", { reduce: () => { const a = document.createElement("a"); a.href = url; a.download = url.split("/").pop() || "document.pdf"; a.target = "_blank"; a.rel = "noopener"; a.click(); } }); const zoomDisplay = html`${Math.round( scale * 100 )}%`; // --- Rendu initial await renderCurrentPage(); updateUI(); // --- Barre de pagination, zoom et téléchargement const paginationEl = totalPages > 1 ? html`

${prevButton} ${nextButton} ${zoomOutButton} ${zoomInButton} ${zoomDisplay}

${pagePicker} of ${totalPages} ${downloadButton}

` : null; // --- 🖱️ Déplacement à la souris (pan) let isPanning = false; let startX, startY, scrollLeft, scrollTop; outerWrapper.addEventListener("mousedown", (e) => { isPanning = true; startX = e.pageX - outerWrapper.offsetLeft; startY = e.pageY - outerWrapper.offsetTop; scrollLeft = outerWrapper.scrollLeft; scrollTop = outerWrapper.scrollTop; outerWrapper.style.cursor = "grabbing"; }); outerWrapper.addEventListener("mouseleave", () => { isPanning = false; outerWrapper.style.cursor = "default"; }); outerWrapper.addEventListener("mouseup", () => { isPanning = false; outerWrapper.style.cursor = "default"; }); outerWrapper.addEventListener("mousemove", (e) => { if (!isPanning) return; e.preventDefault(); const x = e.pageX - outerWrapper.offsetLeft; const y = e.pageY - outerWrapper.offsetTop; const walkX = x - startX; const walkY = y - startY; outerWrapper.scrollLeft = scrollLeft - walkX; outerWrapper.scrollTop = scrollTop - walkY; }); // --- 🎚️ Zoom avec Ctrl + molette (centré sur le pointeur) outerWrapper.addEventListener( "wheel", (e) => { if (e.ctrlKey || e.metaKey) { e.preventDefault(); const rect = outerWrapper.getBoundingClientRect(); const mouseX = e.clientX - rect.left + outerWrapper.scrollLeft; const mouseY = e.clientY - rect.top + outerWrapper.scrollTop; const zoomFactor = e.deltaY < 0 ? 1 + options.zoomStep : 1 - options.zoomStep; const prevScale = scale; scale = Math.min(Math.max(scale * zoomFactor, options.minScale), options.maxScale); const scaleRatio = scale / prevScale; outerWrapper.scrollLeft = mouseX * scaleRatio - (e.clientX - rect.left); outerWrapper.scrollTop = mouseY * scaleRatio - (e.clientY - rect.top); updateUI(); } }, { passive: false } ); // --- Structure finale rootEl = html`

${outerWrapper} ${paginationEl}

`; return rootEl; };