2021-09-30 07:29:25 -04:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { memo, useCallback, useEffect, useState } from 'react'
|
|
|
|
import { debounce } from 'lodash'
|
|
|
|
import PdfViewerControls from './pdf-viewer-controls'
|
|
|
|
import { useProjectContext } from '../../../shared/context/project-context'
|
|
|
|
import usePersistedState from '../../../shared/hooks/use-persisted-state'
|
|
|
|
import { buildHighlightElement } from '../util/highlights'
|
|
|
|
import PDFJSWrapper from '../util/pdf-js-wrapper'
|
2021-10-06 04:33:24 -04:00
|
|
|
import withErrorBoundary from '../../../infrastructure/error-boundary'
|
|
|
|
import ErrorBoundaryFallback from './error-boundary-fallback'
|
2021-10-15 05:52:07 -04:00
|
|
|
import { useCompileContext } from '../../../shared/context/compile-context'
|
2021-10-20 04:45:10 -04:00
|
|
|
import getMeta from '../../../utils/meta'
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
function PdfJsViewer({ url }) {
|
|
|
|
const { _id: projectId } = useProjectContext()
|
|
|
|
|
2021-10-21 06:31:51 -04:00
|
|
|
const {
|
|
|
|
setError,
|
|
|
|
firstRenderDone,
|
|
|
|
highlights,
|
|
|
|
setPosition,
|
|
|
|
} = useCompileContext()
|
2021-10-20 04:45:10 -04:00
|
|
|
const [timePDFFetched, setTimePDFFetched] = useState()
|
2021-10-15 05:52:07 -04:00
|
|
|
|
2021-09-30 07:29:25 -04:00
|
|
|
// state values persisted in localStorage to restore on load
|
|
|
|
const [scale, setScale] = usePersistedState(
|
|
|
|
`pdf-viewer-scale:${projectId}`,
|
|
|
|
'page-width'
|
|
|
|
)
|
|
|
|
|
|
|
|
// local state values
|
|
|
|
const [pdfJsWrapper, setPdfJsWrapper] = useState()
|
|
|
|
const [initialised, setInitialised] = useState(false)
|
|
|
|
|
|
|
|
// create the viewer when the container is mounted
|
|
|
|
const handleContainer = useCallback(parent => {
|
2021-10-06 04:33:11 -04:00
|
|
|
if (parent) {
|
|
|
|
const viewer = new PDFJSWrapper(parent.firstChild)
|
|
|
|
setPdfJsWrapper(viewer)
|
|
|
|
return () => viewer.destroy()
|
|
|
|
}
|
2021-09-30 07:29:25 -04:00
|
|
|
}, [])
|
|
|
|
|
|
|
|
// listen for initialize event
|
|
|
|
useEffect(() => {
|
|
|
|
if (pdfJsWrapper) {
|
2021-10-20 04:45:10 -04:00
|
|
|
const handlePagesinit = () => {
|
|
|
|
setInitialised(true)
|
|
|
|
if (getMeta('ol-trackPdfDownload') && firstRenderDone) {
|
|
|
|
const visible = !document.hidden
|
|
|
|
if (!visible) {
|
|
|
|
firstRenderDone({
|
|
|
|
timePDFFetched,
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
const timePDFRendered = performance.now()
|
|
|
|
firstRenderDone({
|
|
|
|
timePDFFetched,
|
|
|
|
timePDFRendered,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-10-06 04:33:11 -04:00
|
|
|
pdfJsWrapper.eventBus.on('pagesinit', handlePagesinit)
|
|
|
|
return () => pdfJsWrapper.eventBus.off('pagesinit', handlePagesinit)
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|
2021-10-20 04:45:10 -04:00
|
|
|
}, [pdfJsWrapper, firstRenderDone, timePDFFetched])
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
// load the PDF document from the URL
|
|
|
|
useEffect(() => {
|
|
|
|
if (pdfJsWrapper && url) {
|
2021-10-20 04:45:10 -04:00
|
|
|
setTimePDFFetched(performance.now())
|
2021-09-30 07:29:25 -04:00
|
|
|
setInitialised(false)
|
|
|
|
setError(undefined)
|
|
|
|
|
2021-10-15 05:52:07 -04:00
|
|
|
pdfJsWrapper.loadDocument(url).catch(error => {
|
|
|
|
console.error(error)
|
|
|
|
setError('rendering-error')
|
|
|
|
})
|
2021-10-06 04:33:11 -04:00
|
|
|
return () => pdfJsWrapper.abortDocumentLoading()
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|
2021-10-15 05:52:07 -04:00
|
|
|
}, [pdfJsWrapper, url, setError])
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
// listen for scroll events
|
|
|
|
useEffect(() => {
|
2021-10-15 05:39:56 -04:00
|
|
|
let storePositionTimer
|
|
|
|
|
2021-10-06 04:33:11 -04:00
|
|
|
if (initialised && pdfJsWrapper) {
|
2021-09-30 07:29:25 -04:00
|
|
|
// store the scroll position in localStorage, for the synctex button
|
|
|
|
const storePosition = debounce(pdfViewer => {
|
|
|
|
// set position for "sync to code" button
|
|
|
|
try {
|
|
|
|
setPosition(pdfViewer.currentPosition)
|
|
|
|
} catch (error) {
|
2021-10-15 05:39:56 -04:00
|
|
|
// TODO: investigate handling missing offsetParent in jsdom
|
|
|
|
// console.error(error)
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|
|
|
|
}, 500)
|
|
|
|
|
2021-10-15 05:39:56 -04:00
|
|
|
storePositionTimer = window.setTimeout(() => {
|
|
|
|
storePosition(pdfJsWrapper)
|
|
|
|
}, 100)
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
const scrollListener = () => {
|
|
|
|
storePosition(pdfJsWrapper)
|
|
|
|
}
|
|
|
|
|
|
|
|
pdfJsWrapper.container.addEventListener('scroll', scrollListener)
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
pdfJsWrapper.container.removeEventListener('scroll', scrollListener)
|
2021-10-15 05:39:56 -04:00
|
|
|
if (storePositionTimer) {
|
|
|
|
window.clearTimeout(storePositionTimer)
|
|
|
|
}
|
|
|
|
storePosition.cancel()
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|
|
|
|
}
|
2021-10-15 05:39:56 -04:00
|
|
|
}, [setPosition, pdfJsWrapper, initialised])
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
// listen for double-click events
|
|
|
|
useEffect(() => {
|
|
|
|
if (pdfJsWrapper) {
|
2021-10-06 04:33:11 -04:00
|
|
|
const handleTextlayerrendered = textLayer => {
|
2021-09-30 07:29:25 -04:00
|
|
|
const pageElement = textLayer.source.textLayerDiv.closest('.page')
|
|
|
|
|
|
|
|
const doubleClickListener = event => {
|
|
|
|
window.dispatchEvent(
|
|
|
|
new CustomEvent('synctex:sync-to-position', {
|
|
|
|
detail: pdfJsWrapper.clickPosition(event, pageElement, textLayer),
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
pageElement.addEventListener('dblclick', doubleClickListener)
|
2021-10-06 04:33:11 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
pdfJsWrapper.eventBus.on('textlayerrendered', handleTextlayerrendered)
|
|
|
|
return () =>
|
|
|
|
pdfJsWrapper.eventBus.off('textlayerrendered', handleTextlayerrendered)
|
2021-09-30 07:29:25 -04:00
|
|
|
}
|
|
|
|
}, [pdfJsWrapper])
|
|
|
|
|
|
|
|
// restore the saved scale and scroll position
|
|
|
|
useEffect(() => {
|
|
|
|
if (initialised && pdfJsWrapper) {
|
|
|
|
setScale(scale => {
|
2021-10-21 06:31:51 -04:00
|
|
|
setPosition(position => {
|
|
|
|
if (position) {
|
|
|
|
pdfJsWrapper.scrollToPosition(position, scale)
|
|
|
|
} else {
|
|
|
|
pdfJsWrapper.viewer.currentScaleValue = scale
|
|
|
|
}
|
|
|
|
return position
|
|
|
|
})
|
2021-09-30 07:29:25 -04:00
|
|
|
|
2021-10-21 06:31:51 -04:00
|
|
|
return scale
|
2021-09-30 07:29:25 -04:00
|
|
|
})
|
|
|
|
}
|
2021-10-15 05:39:56 -04:00
|
|
|
}, [initialised, setScale, setPosition, pdfJsWrapper])
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
// transmit scale value to the viewer when it changes
|
|
|
|
useEffect(() => {
|
|
|
|
if (pdfJsWrapper) {
|
|
|
|
pdfJsWrapper.viewer.currentScaleValue = scale
|
|
|
|
}
|
|
|
|
}, [scale, pdfJsWrapper])
|
|
|
|
|
|
|
|
// when highlights are created, build the highlight elements
|
|
|
|
useEffect(() => {
|
|
|
|
if (pdfJsWrapper && highlights?.length) {
|
2021-10-15 05:47:45 -04:00
|
|
|
const elements = []
|
|
|
|
|
|
|
|
for (const highlight of highlights) {
|
|
|
|
try {
|
|
|
|
const element = buildHighlightElement(highlight, pdfJsWrapper.viewer)
|
|
|
|
elements.push(element)
|
|
|
|
} catch (error) {
|
|
|
|
// ignore invalid highlights
|
|
|
|
}
|
|
|
|
}
|
2021-09-30 07:29:25 -04:00
|
|
|
|
|
|
|
// scroll to the first highlighted element
|
2021-10-15 05:47:45 -04:00
|
|
|
elements[0]?.scrollIntoView({
|
2021-11-08 06:15:33 -05:00
|
|
|
block: 'nearest',
|
|
|
|
inline: 'start',
|
2021-09-30 07:29:25 -04:00
|
|
|
behavior: 'smooth',
|
|
|
|
})
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
for (const element of elements) {
|
|
|
|
element.remove()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [highlights, pdfJsWrapper])
|
|
|
|
|
|
|
|
// set the scale in response to zoom option changes
|
|
|
|
const setZoom = useCallback(
|
|
|
|
zoom => {
|
|
|
|
switch (zoom) {
|
|
|
|
case 'fit-width':
|
|
|
|
setScale('page-width')
|
|
|
|
break
|
|
|
|
|
|
|
|
case 'fit-height':
|
|
|
|
setScale('page-height')
|
|
|
|
break
|
|
|
|
|
|
|
|
case 'zoom-in':
|
|
|
|
setScale(pdfJsWrapper.viewer.currentScale * 1.25)
|
|
|
|
break
|
|
|
|
|
|
|
|
case 'zoom-out':
|
|
|
|
setScale(pdfJsWrapper.viewer.currentScale * 0.75)
|
|
|
|
break
|
|
|
|
}
|
|
|
|
},
|
|
|
|
[pdfJsWrapper, setScale]
|
|
|
|
)
|
|
|
|
|
|
|
|
// adjust the scale when the container is resized
|
|
|
|
useEffect(() => {
|
|
|
|
if (pdfJsWrapper) {
|
|
|
|
const resizeListener = () => {
|
|
|
|
pdfJsWrapper.updateOnResize()
|
|
|
|
}
|
|
|
|
|
|
|
|
const resizeObserver = new ResizeObserver(resizeListener)
|
|
|
|
resizeObserver.observe(pdfJsWrapper.container)
|
|
|
|
|
|
|
|
window.addEventListener('resize', resizeListener)
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
resizeObserver.disconnect()
|
|
|
|
window.removeEventListener('resize', resizeListener)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [pdfJsWrapper])
|
|
|
|
|
2021-10-08 05:25:43 -04:00
|
|
|
const handleKeyDown = useCallback(
|
|
|
|
event => {
|
|
|
|
if (!initialised) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if ((event.metaKey || event.ctrlKey) && event.key === '=') {
|
|
|
|
event.preventDefault()
|
|
|
|
setZoom('zoom-in')
|
|
|
|
} else if ((event.metaKey || event.ctrlKey) && event.key === '-') {
|
|
|
|
event.preventDefault()
|
|
|
|
setZoom('zoom-out')
|
|
|
|
} else if ((event.metaKey || event.ctrlKey) && event.key === '0') {
|
|
|
|
event.preventDefault()
|
|
|
|
setZoom('fit-width')
|
|
|
|
}
|
|
|
|
},
|
|
|
|
[initialised, setZoom]
|
|
|
|
)
|
|
|
|
|
2021-09-30 07:29:25 -04:00
|
|
|
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
|
2021-10-08 05:25:43 -04:00
|
|
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
2021-09-30 07:29:25 -04:00
|
|
|
return (
|
2021-10-15 05:51:04 -04:00
|
|
|
<div className="pdfjs-viewer pdfjs-viewer-outer" ref={handleContainer}>
|
2021-10-08 05:25:43 -04:00
|
|
|
<div
|
|
|
|
className="pdfjs-viewer-inner"
|
|
|
|
role="tabpanel"
|
|
|
|
tabIndex="0"
|
|
|
|
onKeyDown={handleKeyDown}
|
|
|
|
>
|
2021-09-30 07:29:25 -04:00
|
|
|
<div className="pdfViewer" />
|
|
|
|
</div>
|
|
|
|
<div className="pdfjs-controls">
|
|
|
|
<PdfViewerControls setZoom={setZoom} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
PdfJsViewer.propTypes = {
|
|
|
|
url: PropTypes.string.isRequired,
|
|
|
|
}
|
|
|
|
|
2021-10-06 04:33:24 -04:00
|
|
|
export default withErrorBoundary(memo(PdfJsViewer), () => (
|
|
|
|
<ErrorBoundaryFallback type="pdf" />
|
|
|
|
))
|