Fix issues with PDF Viewer

omnivore-app · Jan 25, 2025 · 2aa59fd · 2aa59fd
1 parent 6457aa4
commit 2aa59fd
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/packages/web/components/templates/article/pdf.js/PdfArticleContainer.tsx b/packages/web/components/templates/article/pdf.js/PdfArticleContainer.tsx
@@ -103,7 +103,7 @@ export default function PdfArticleContainer(props: PdfArticleContainerProps) {
     // Uses the existing mechanism to hide the reader toolbar from pspdfkit
     const updateReaderSettings = () => {
       const show = localStorage.getItem('reader-show-pdf-tool-bar')
-      const showBar = show ? JSON.parse(show) == true : false
+      const showBar = show ? JSON.parse(show) == true : true
       setShowToolbar(showBar)
 
       const latestPage = localStorage.getItem('reader-remember-latest-page')

diff --git a/packages/web/components/templates/article/pdf.js/PdfViewer.tsx b/packages/web/components/templates/article/pdf.js/PdfViewer.tsx
@@ -58,8 +58,13 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
     []
   )
 
+  const removeAllHighlightsNotAtScale = (scaleId: string) => {
+    const highlights = document.querySelectorAll(`.canvasWrapper .highlight:not(.scale${scaleId})`)
+    highlights.forEach((highlight) => highlight.remove())
+  }
+
   const addHighlightToPage = useCallback(
-    (page: PDFPageView, highlight: Highlight) => {
+    (page: PDFPageView, highlight: Highlight,) => {
       const scale = page.viewport.scale
       const element = document.createElement('div')
       element.id = highlight.id
@@ -68,7 +73,7 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
 
       boundingRects.forEach((rect: number[]) => {
         const svgElement = document.createElement('svg')
-        svgElement.className = 'highlight'
+        svgElement.className = `highlight scale${scale.toString().replace('.','')}`
         svgElement.setAttribute('viewBox', '0 0 1 1')
         svgElement.style.borderRadius = '0px'
         svgElement.style.background = colorMap[color]
@@ -352,7 +357,8 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
   useEffect(() => {
     const render = (data: { source: PDFPageView }) => {
       const page = data.source
-      if (page) {
+      if (page && highlights) {
+        removeAllHighlightsNotAtScale(page.viewport.scale.toString().replace('.',''))
         highlights
           ?.filter((it) => it.highlightPositionAnchorIndex == page.id)
           .forEach((it) => addHighlightToPage(page as PDFPageView, it))
@@ -361,6 +367,8 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
     const setPage = (e: { pageNumber: number }) =>
       setCurrentPageNum(e.pageNumber)
 
+
+
     if (props.eventBus && props.pdfViewer) {
       props.eventBus.on('textlayerrendered', render)
       props.eventBus.on('pagechanging', setPage)
@@ -370,6 +378,7 @@ export default function PdfViewer(props: PdfArticleContainerProps) {
       if (props.eventBus) {
         props.eventBus.off('textlayerrendered', render)
         props.eventBus.off('pagechanging', setPage)
+
       }
     }
   }, [props.eventBus, props.pdfViewer, highlights, addHighlightToPage])

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -53,7 +53,7 @@
     "next": "^13.5.6",
     "node-html-markdown": "^1.3.0",
     "papaparse": "^5.4.1",
-    "pdfjs-dist": "^4.9.155",
+    "pdfjs-dist": "4.10.38",
     "pspdfkit": "^2023.4.6",
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",

diff --git a/packages/web/public/pdfjs-dist/pdf.worker.min.mjs b/packages/web/public/pdfjs-dist/pdf.worker.min.mjs