import DragDropManager from "./dragDrop.js"; import scrollDivHorizontally from "./horizontalScroll.js"; import getImageHighlighterCallback from "./imageHighlighter.js"; import PdfActionsManager from './pdfActions.js'; const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => { var fileName = null; const pagesContainer = document.getElementById(id); const pagesContainerWrapper = document.getElementById(wrapperId); const movePageTo = (startElement, endElement, scrollTo = false) => { const childArray = Array.from(pagesContainer.childNodes); const startIndex = childArray.indexOf(startElement); const endIndex = childArray.indexOf(endElement); pagesContainer.removeChild(startElement); if(!endElement) { pagesContainer.append(startElement); } else { pagesContainer.insertBefore(startElement, endElement); } if(scrollTo) { const { width } = startElement.getBoundingClientRect(); const vector = (endIndex !== -1 && startIndex > endIndex) ? 0-width : width; pagesContainerWrapper.scroll({ left: pagesContainerWrapper.scrollLeft + vector, }) } } function addPdfs(nextSiblingElement) { var input = document.createElement('input'); input.type = 'file'; input.multiple = true; input.setAttribute("accept", "application/pdf"); input.onchange = async(e) => { const files = e.target.files; fileName = files[0].name; for (var i=0; i < files.length; i++) { addPdfFile(files[i], nextSiblingElement); } document.querySelectorAll(".enable-on-file").forEach(element => { element.disabled = false; }); } input.click(); } function rotateElement(element, deg) { var lastTransform = element.style.rotate; if (!lastTransform) { lastTransform = "0"; } const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, '')); const newAngle = lastAngle + deg; element.style.rotate = newAngle + "deg"; } scrollDivHorizontally(wrapperId); var imageHighlighterCallback; if (highlighterId) { imageHighlighterCallback = getImageHighlighterCallback(highlighterId); } var dragDropManager; if(dragElId) { dragDropManager = new DragDropManager('drag-container', movePageTo); } var pdfActionManager = new PdfActionsManager('page-container', { movePageTo, addPdfs, rotateElement }); async function addPdfFile(file, nextSiblingElement) { const { renderer, pdfDocument } = await loadFile(file); for (var i=0; i < renderer.pageCount; i++) { const div = document.createElement('div'); div.classList.add("page-container"); var img = document.createElement('img'); img.classList.add('page-image') const imageSrc = await renderer.renderPage(i) img.src = imageSrc; img.pageIdx = i; img.rend = renderer; img.doc = pdfDocument; div.appendChild(img); if(dragDropManager) { dragDropManager.attachDragDropCallbacks(div, imageSrc); } /** * Making pages larger when clicking on them */ if(imageHighlighterCallback) { img.addEventListener('click', imageHighlighterCallback) } /** * Rendering the various buttons to manipulate and move pdf pages */ pdfActionManager.attachPDFActions(div); if (nextSiblingElement) { pagesContainer.insertBefore(div, nextSiblingElement); } else { pagesContainer.appendChild(div); } } } async function toRenderer(objectUrl) { const pdf = await pdfjsLib.getDocument(objectUrl).promise; return { document: pdf, pageCount: pdf.numPages, renderPage: async function(pageIdx) { const page = await this.document.getPage(pageIdx+1); const canvas = document.createElement("canvas"); // set the canvas size to the size of the page if (page.rotate == 90 || page.rotate == 270) { canvas.width = page.view[3]; canvas.height = page.view[2]; } else { canvas.width = page.view[2]; canvas.height = page.view[3]; } // render the page onto the canvas var renderContext = { canvasContext: canvas.getContext("2d"), viewport: page.getViewport({ scale: 1 }) }; await page.render(renderContext).promise; return canvas.toDataURL(); } }; } async function toPdfLib(objectUrl) { const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer()); const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes); return pdfDoc; } async function loadFile(file) { var objectUrl = URL.createObjectURL(file); var pdfDocument = await toPdfLib(objectUrl); var renderer = await toRenderer(objectUrl); return { renderer, pdfDocument }; } function rotateAll(deg) { for (var i=0; i