export default class Page { constructor(viewerElement, pdfPage, pageNum, scale = 1.5) { this.viewerElement = viewerElement; this.pdfPage = pdfPage; this.pageNum = pageNum; this.scale = scale; this.pageElement = null; this.textLayer = null; this.highlightLayer = null; this.viewport = null; } async render() { this.viewport = this.pdfPage.getViewport({ scale: this.scale }); this.pageElement = document.createElement('div'); this.pageElement.className = 'page'; this.pageElement.setAttribute('data-page-number', this.pageNum); this.pageElement.style.width = this.viewport.width + 'px'; this.pageElement.style.height = this.viewport.height + 'px'; this.pageElement.style.setProperty('--scale-factor', this.scale); this.viewerElement.appendChild(this.pageElement); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = this.viewport.width; canvas.height = this.viewport.height; this.pageElement.appendChild(canvas); const renderContext = { canvasContext: context, viewport: this.viewport }; await this.pdfPage.render(renderContext).promise; this.textLayer = document.createElement('div'); this.textLayer.className = 'textLayer'; this.textLayer.style.left = '0'; this.textLayer.style.top = '0'; this.textLayer.style.right = '0'; this.textLayer.style.bottom = '0'; this.textLayer.style.position = 'absolute'; this.textLayer.style.transformOrigin = '0% 0%'; this.textLayer.style.setProperty('--scale-factor', this.viewport.scale.toString()); this.pageElement.appendChild(this.textLayer); this.highlightLayer = document.createElement('div'); this.highlightLayer.className = 'highlightLayer'; this.highlightLayer.style.left = '0'; this.highlightLayer.style.top = '0'; this.highlightLayer.style.right = '0'; this.highlightLayer.style.bottom = '0'; this.highlightLayer.style.position = 'absolute'; this.highlightLayer.style.transformOrigin = '0% 0%'; this.pageElement.appendChild(this.highlightLayer); const textLayer = new pdfjsLib.TextLayer({ textContentSource: this.pdfPage.streamTextContent(), container: this.textLayer, viewport: this.viewport }); await textLayer.render(); } getPageElement() { return this.pageElement; } getTextLayer() { return this.textLayer; } getHighlightLayer() { return this.highlightLayer; } getPageNumber() { return this.pageNum; } getViewport() { return this.viewport; } }