2022-08-18 04:17:12 -04:00
|
|
|
import { captureException } from '../../../infrastructure/error-reporter'
|
2022-07-06 07:06:53 -04:00
|
|
|
import { generatePdfCachingTransportFactory } from './pdf-caching-transport'
|
2023-09-27 05:45:49 -04:00
|
|
|
import { debugConsole } from '@/utils/debugging'
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
const params = new URLSearchParams(window.location.search)
|
|
|
|
const disableFontFace = params.get('disable-font-face') === 'true'
|
2021-10-15 05:52:07 -04:00
|
|
|
const disableStream = process.env.NODE_ENV !== 'test'
|
2021-09-30 07:29:25 -04:00
|
|
|
|
2022-07-20 04:15:58 -04:00
|
|
|
const DEFAULT_RANGE_CHUNK_SIZE = 128 * 1024 // 128K chunks
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
export default class PDFJSWrapper {
|
|
|
|
constructor(container) {
|
|
|
|
this.container = container
|
2022-03-18 06:27:29 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
async init() {
|
2022-07-27 06:15:43 -04:00
|
|
|
const {
|
|
|
|
PDFJS,
|
|
|
|
PDFJSViewer,
|
|
|
|
cMapUrl,
|
|
|
|
imageResourcesPath,
|
|
|
|
standardFontDataUrl,
|
|
|
|
} = await import('./pdf-js-versions').then(m => {
|
2022-04-06 05:59:13 -04:00
|
|
|
return m.default
|
|
|
|
})
|
2022-03-18 06:27:29 -04:00
|
|
|
|
|
|
|
this.PDFJS = PDFJS
|
2022-07-06 07:06:53 -04:00
|
|
|
this.genPdfCachingTransport = generatePdfCachingTransportFactory(PDFJS)
|
2022-03-18 06:27:29 -04:00
|
|
|
this.PDFJSViewer = PDFJSViewer
|
|
|
|
this.cMapUrl = cMapUrl
|
2022-07-27 06:15:43 -04:00
|
|
|
this.standardFontDataUrl = standardFontDataUrl
|
2022-03-18 06:27:29 -04:00
|
|
|
this.imageResourcesPath = imageResourcesPath
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
// create the event bus
|
|
|
|
const eventBus = new PDFJSViewer.EventBus()
|
|
|
|
|
|
|
|
// create the link service
|
|
|
|
const linkService = new PDFJSViewer.PDFLinkService({
|
|
|
|
eventBus,
|
|
|
|
externalLinkTarget: 2,
|
|
|
|
externalLinkRel: 'noopener',
|
|
|
|
})
|
|
|
|
|
|
|
|
// create the localization
|
2021-10-06 04:33:11 -04:00
|
|
|
// const l10n = new PDFJSViewer.GenericL10n('en-GB') // TODO: locale mapping?
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
// create the viewer
|
|
|
|
const viewer = new PDFJSViewer.PDFViewer({
|
2022-03-18 06:27:29 -04:00
|
|
|
container: this.container,
|
2021-09-30 07:29:25 -04:00
|
|
|
eventBus,
|
|
|
|
imageResourcesPath,
|
|
|
|
linkService,
|
2021-10-06 04:33:11 -04:00
|
|
|
// l10n, // commented out since it currently breaks `aria-label` rendering in pdf pages
|
2021-09-30 07:29:25 -04:00
|
|
|
enableScripting: false, // default is false, but set explicitly to be sure
|
2021-10-12 08:38:33 -04:00
|
|
|
enableXfa: false, // default is false (2021-10-12), but set explicitly to be sure
|
2021-09-30 07:29:25 -04:00
|
|
|
renderInteractiveForms: false,
|
2022-03-25 05:31:29 -04:00
|
|
|
maxCanvasPixels: 8192 * 8192, // default is 4096 * 4096, increased for better resolution at high zoom levels
|
2022-12-08 04:27:13 -05:00
|
|
|
annotationMode: PDFJS.AnnotationMode?.ENABLE, // enable annotations but not forms
|
|
|
|
annotationEditorMode: PDFJS.AnnotationEditorType?.DISABLE, // disable annotation editing
|
2021-09-30 07:29:25 -04:00
|
|
|
})
|
|
|
|
|
|
|
|
linkService.setViewer(viewer)
|
|
|
|
|
|
|
|
this.eventBus = eventBus
|
|
|
|
this.linkService = linkService
|
|
|
|
this.viewer = viewer
|
|
|
|
}
|
|
|
|
|
|
|
|
// load a document from a URL
|
2022-08-01 07:16:29 -04:00
|
|
|
loadDocument({ url, pdfFile, abortController, handleFetchError }) {
|
2021-10-15 05:52:07 -04:00
|
|
|
// cancel any previous loading task
|
|
|
|
if (this.loadDocumentTask) {
|
|
|
|
this.loadDocumentTask.destroy()
|
|
|
|
this.loadDocumentTask = undefined
|
|
|
|
}
|
2021-10-06 04:33:11 -04:00
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2022-08-01 07:16:29 -04:00
|
|
|
const rangeTransport = this.genPdfCachingTransport({
|
|
|
|
url,
|
|
|
|
pdfFile,
|
|
|
|
abortController,
|
|
|
|
handleFetchError,
|
|
|
|
})
|
2022-07-20 04:15:58 -04:00
|
|
|
let rangeChunkSize = DEFAULT_RANGE_CHUNK_SIZE
|
|
|
|
if (rangeTransport && pdfFile.size < 2 * DEFAULT_RANGE_CHUNK_SIZE) {
|
|
|
|
// pdf.js disables the "bulk" download optimization when providing a
|
|
|
|
// custom range transport. Restore it by bumping the chunk size.
|
|
|
|
rangeChunkSize = pdfFile.size
|
|
|
|
}
|
2022-03-18 06:27:29 -04:00
|
|
|
this.loadDocumentTask = this.PDFJS.getDocument({
|
2021-10-06 04:33:11 -04:00
|
|
|
url,
|
2022-03-18 06:27:29 -04:00
|
|
|
cMapUrl: this.cMapUrl,
|
2021-10-06 04:33:11 -04:00
|
|
|
cMapPacked: true,
|
2022-07-27 06:15:43 -04:00
|
|
|
standardFontDataUrl: this.standardFontDataUrl,
|
2021-10-06 04:33:11 -04:00
|
|
|
disableFontFace,
|
|
|
|
rangeChunkSize,
|
|
|
|
disableAutoFetch: true,
|
2021-10-15 05:52:07 -04:00
|
|
|
disableStream,
|
2024-05-21 07:35:07 -04:00
|
|
|
isEvalSupported: false,
|
2021-10-06 04:33:11 -04:00
|
|
|
textLayerMode: 2, // PDFJSViewer.TextLayerMode.ENABLE,
|
2022-07-20 04:15:58 -04:00
|
|
|
range: rangeTransport,
|
2021-10-06 04:33:11 -04:00
|
|
|
})
|
|
|
|
|
|
|
|
this.loadDocumentTask.promise
|
|
|
|
.then(doc => {
|
|
|
|
if (!this.loadDocumentTask) {
|
|
|
|
return // ignoring the response since loading task has been aborted
|
|
|
|
}
|
|
|
|
|
|
|
|
const previousDoc = this.viewer.pdfDocument
|
|
|
|
|
|
|
|
this.viewer.setDocument(doc)
|
|
|
|
this.linkService.setDocument(doc)
|
|
|
|
resolve(doc)
|
|
|
|
|
|
|
|
if (previousDoc) {
|
2023-09-27 05:45:49 -04:00
|
|
|
previousDoc.cleanup().catch(debugConsole.error)
|
2021-10-06 04:33:11 -04:00
|
|
|
previousDoc.destroy()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(error => {
|
|
|
|
if (this.loadDocumentTask) {
|
2021-11-03 10:29:54 -04:00
|
|
|
if (!error || error.name !== 'MissingPDFException') {
|
2022-08-18 04:17:12 -04:00
|
|
|
captureException(error, {
|
|
|
|
tags: { handler: 'pdf-preview' },
|
|
|
|
})
|
2021-10-15 05:51:27 -04:00
|
|
|
}
|
|
|
|
|
2021-10-06 04:33:11 -04:00
|
|
|
reject(error)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
this.loadDocumentTask = undefined
|
|
|
|
})
|
|
|
|
})
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
// update the current scale value if the container size changes
|
|
|
|
updateOnResize() {
|
2022-01-19 06:54:52 -05:00
|
|
|
if (!this.isVisible()) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2023-09-05 10:46:51 -04:00
|
|
|
// Use requestAnimationFrame to prevent errors like "ResizeObserver loop
|
|
|
|
// completed with undelivered notifications" that can occur if updating the
|
|
|
|
// viewer causes another repaint. The cost of this is that the viewer update
|
|
|
|
// lags one frame behind, but it's unlikely to matter.
|
|
|
|
// Further reading: https://github.com/WICG/resize-observer/issues/38
|
|
|
|
window.requestAnimationFrame(() => {
|
|
|
|
const currentScaleValue = this.viewer.currentScaleValue
|
|
|
|
|
|
|
|
if (
|
|
|
|
currentScaleValue === 'auto' ||
|
|
|
|
currentScaleValue === 'page-fit' ||
|
|
|
|
currentScaleValue === 'page-width'
|
|
|
|
) {
|
|
|
|
this.viewer.currentScaleValue = currentScaleValue
|
|
|
|
}
|
2021-09-30 07:29:25 -04:00
|
|
|
|
2023-09-05 10:46:51 -04:00
|
|
|
this.viewer.update()
|
|
|
|
})
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
// get the page and offset of a click event
|
|
|
|
clickPosition(event, pageElement, textLayer) {
|
|
|
|
const { viewport } = this.viewer.getPageView(textLayer.pageNumber - 1)
|
|
|
|
|
2022-08-04 05:39:31 -04:00
|
|
|
const pageCanvas = pageElement.querySelector('canvas')
|
|
|
|
|
|
|
|
if (!pageCanvas) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const pageRect = pageCanvas.getBoundingClientRect()
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
const dx = event.clientX - pageRect.left
|
|
|
|
const dy = event.clientY - pageRect.top
|
|
|
|
|
|
|
|
const [left, top] = viewport.convertToPdfPoint(dx, dy)
|
|
|
|
|
|
|
|
return {
|
|
|
|
page: textLayer.pageNumber - 1,
|
|
|
|
offset: {
|
|
|
|
left,
|
|
|
|
top: viewport.viewBox[3] - top,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// get the current page, offset and page size
|
|
|
|
get currentPosition() {
|
|
|
|
const pageIndex = this.viewer.currentPageNumber - 1
|
|
|
|
const pageView = this.viewer.getPageView(pageIndex)
|
|
|
|
const pageRect = pageView.div.getBoundingClientRect()
|
|
|
|
|
|
|
|
const containerRect = this.container.getBoundingClientRect()
|
|
|
|
const dy = containerRect.top - pageRect.top
|
2021-12-07 04:19:10 -05:00
|
|
|
const dx = containerRect.left - pageRect.left
|
|
|
|
const [left, top] = pageView.viewport.convertToPdfPoint(dx, dy)
|
2021-09-30 07:29:25 -04:00
|
|
|
const [, , width, height] = pageView.viewport.viewBox
|
|
|
|
|
|
|
|
return {
|
|
|
|
page: pageIndex,
|
2021-12-07 04:19:10 -05:00
|
|
|
offset: { top, left },
|
2021-09-30 07:29:25 -04:00
|
|
|
pageSize: { height, width },
|
|
|
|
}
|
|
|
|
}
|
2021-10-06 04:33:11 -04:00
|
|
|
|
2021-10-21 06:31:51 -04:00
|
|
|
scrollToPosition(position, scale = null) {
|
2021-10-15 05:39:56 -04:00
|
|
|
const destArray = [
|
|
|
|
null,
|
|
|
|
{
|
|
|
|
name: 'XYZ', // 'XYZ' = scroll to the given coordinates
|
|
|
|
},
|
|
|
|
position.offset.left,
|
|
|
|
position.offset.top,
|
2021-10-21 06:31:51 -04:00
|
|
|
scale,
|
2021-10-15 05:39:56 -04:00
|
|
|
]
|
|
|
|
|
|
|
|
this.viewer.scrollPageIntoView({
|
|
|
|
pageNumber: position.page + 1,
|
|
|
|
destArray,
|
|
|
|
})
|
2021-12-02 06:59:41 -05:00
|
|
|
|
2023-03-16 06:35:04 -04:00
|
|
|
// scroll the page left and down by an extra few pixels to account for the pdf.js viewer page border
|
|
|
|
const pageIndex = this.viewer.currentPageNumber - 1
|
|
|
|
const pageView = this.viewer.getPageView(pageIndex)
|
|
|
|
const offset = parseFloat(getComputedStyle(pageView.div).borderWidth)
|
2021-12-02 06:59:41 -05:00
|
|
|
this.viewer.container.scrollBy({
|
2023-03-16 06:35:04 -04:00
|
|
|
top: -offset,
|
|
|
|
left: -offset,
|
2021-12-02 06:59:41 -05:00
|
|
|
})
|
2021-10-15 05:39:56 -04:00
|
|
|
}
|
|
|
|
|
2022-01-10 08:58:31 -05:00
|
|
|
isVisible() {
|
|
|
|
return this.viewer.container.offsetParent !== null
|
|
|
|
}
|
|
|
|
|
2021-10-06 04:33:11 -04:00
|
|
|
abortDocumentLoading() {
|
|
|
|
this.loadDocumentTask = undefined
|
|
|
|
}
|
|
|
|
|
|
|
|
destroy() {
|
|
|
|
if (this.loadDocumentTask) {
|
|
|
|
this.loadDocumentTask.destroy()
|
|
|
|
this.loadDocumentTask = undefined
|
|
|
|
}
|
2022-03-18 06:27:29 -04:00
|
|
|
if (this.viewer) {
|
|
|
|
this.viewer.destroy()
|
|
|
|
}
|
2021-10-06 04:33:11 -04:00
|
|
|
}
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|