Merge pull request #1601 from privy-open-source/renovate/pdfjs-dist-5.x

fix(deps): update dependency pdfjs-dist to v5

Author: adenvt

.github/codeql/codeql-config.yml

@@ -0,0 +1,2 @@
+paths-ignore:
+  - src/public/js

.github/workflows/ci.yml

@@ -147,6 +147,7 @@ jobs:
         uses: github/codeql-action/init@v3
         with:
           languages: javascript
+          config-file: ./.github/codeql/codeql-config.yml
 
       - name: Autobuild
         uses: github/codeql-action/autobuild@v3

package.json

@@ -123,7 +123,7 @@
     "lodash-es": "4.17.21",
     "marked": "^15.0.0",
     "nanodelay": "2.0.2",
-    "pdfjs-dist": "^4.0.0",
+    "pdfjs-dist": "^5.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
     "pspdfkit": "^2024.3.1",

packages/persona/package.json

@@ -96,7 +96,7 @@
     "marked": "15.0.7",
     "nanodelay": "2.0.2",
     "pathe": "^2.0.0",
-    "pdfjs-dist": "4.10.38",
+    "pdfjs-dist": "5.0.375",
     "pspdfkit": "^2024.6.0",
     "scroll-into-view": "1.16.2",
     "tabbable": "6.2.0",

src/components/pdf-viewer/PdfNavigation.vue

@@ -125,7 +125,7 @@ const pages = computed<SelectItem[]>(() => {
 <style lang="postcss">
 .pdf {
   &__navigation {
-    @apply absolute bottom-4 inset-x-0 justify-center items-center flex w-96 mx-auto z-10;
+    @apply absolute bottom-4 inset-x-0 justify-center items-center flex min-w-96 mx-auto z-10;
 
     &-container {
       @apply flex bg-inverse text-subtlest rounded p-2 space-x-1 items-center;

src/components/pdf-viewer/PdfViewer.vue

@@ -321,6 +321,8 @@ interface PdfViewerSlotScope {
   zoomOut: () => void,
   next: () => void,
   prev: () => void,
+  first: () => void,
+  last: () => void,
 }
 
 defineSlots<{
@@ -359,6 +361,10 @@ defineSlots<{
         @apply ring-info ring;
         @apply dark:ring-dark-info;
       }
+
+      .annotationWidget {
+        @apply absolute;
+      }
     }
   }
 

src/components/pdf-viewer/utils/pdfjs.ts

@@ -66,3 +66,78 @@ export async function createLinkService (...params: ConstructorParameters<typeof
 export type * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer.mjs'
 
 export type * as PDFJS from 'pdfjs-dist'
+
+export function normalizeRect (rect: number[]) {
+  const r = [...rect] // clone rect
+
+  if (rect[0] > rect[2]) {
+    r[0] = rect[2]
+    r[2] = rect[0]
+  }
+
+  if (rect[1] > rect[3]) {
+    r[1] = rect[3]
+    r[3] = rect[1]
+  }
+
+  return r
+}
+
+export interface PDFJSAnnotation {
+  id: string,
+  annotationFlags: number,
+  borderStyle?: {
+    width: number,
+    rawWidth: number,
+    style: number,
+    dashArray: number[],
+    horizontalCornerRadius: number,
+    verticalCornerRadius: number,
+  },
+  color?: Uint8ClampedArray,
+  backgroundColor?: Uint8ClampedArray,
+  borderColor?: Uint8ClampedArray,
+  rotation: 0 | 90 | 180 | 270,
+  contentsObj: {
+    str: string,
+    dir: 'ltr' | 'rtl',
+  },
+  hasAppearance: boolean,
+  modificationDate?: Date,
+  rect: [
+    number,
+    number,
+    number,
+    number,
+  ],
+  subtype: string,
+  hasOwnCanvas: boolean,
+  noRotate: boolean,
+  noHTML: boolean,
+  isEditable: boolean,
+  structParent: number,
+  annotationType: number,
+  fieldName: string,
+  actions?: string,
+  fieldValue?: string,
+  defaultFieldValue?: string,
+  alternativeText: string,
+  defaultAppearanceData?: {
+    fontSize: number,
+    fontName: string,
+    fontColor: Uint8ClampedArray,
+  },
+  fieldType: string,
+  fieldFlags: number,
+  password: boolean,
+  readOnly: boolean,
+  required: boolean,
+  hidden: boolean,
+}
+
+export interface PDFJSRawDimension {
+  pageWidth: number,
+  pageHeight: number,
+  pageX: number,
+  pageY: number,
+}

src/components/pdf-viewer/utils/use-viewer.ts

@@ -6,20 +6,23 @@ import {
   shallowRef,
   watch,
 } from 'vue-demi'
-import type {
-  PDFJS,
-  PDFJSViewer,
-} from './pdfjs'
-import useLoading from '../../overlay/utils/use-loading'
-import { useClamp, useMax } from '@vueuse/math'
-import { createEventHook } from '@vueuse/core'
 import {
   createEventBus,
   createLinkService,
   createViewer,
   getCMAPUri,
   getDocument,
+  normalizeRect,
+} from './pdfjs'
+import type {
+  PDFJS,
+  PDFJSAnnotation,
+  PDFJSRawDimension,
+  PDFJSViewer,
 } from './pdfjs'
+import useLoading from '../../overlay/utils/use-loading'
+import { useClamp, useMax } from '@vueuse/math'
+import { createEventHook } from '@vueuse/core'
 
 export interface OpenDocConfig {
   disableStream?: boolean,
@@ -123,6 +126,47 @@ export function useViewer (container: Ref<HTMLDivElement>, viewer: Ref<HTMLDivEl
         scale.value = event.scale
       })
 
+      bus.on('annotationlayerrendered', async (event: { source: PDFJSViewer.PDFPageView, error?: Error }) => {
+        if (!event.error) {
+          const source      = event.source
+          const page        = source.pdfPage as PDFJS.PDFPageProxy
+          const annotations = await page.getAnnotations() as PDFJSAnnotation[]
+
+          for (const data of annotations) {
+            if (data.noHTML && !source.annotationLayer.annotationStorage.has(data.id)) {
+              const {
+                pageWidth,
+                pageHeight,
+                pageX,
+                pageY,
+              } = source.viewport.rawDims as PDFJSRawDimension
+
+              const width  = (data.rotation % 180 === 0) ? data.rect[2] - data.rect[0] : data.rect[3] - data.rect[1]
+              const height = (data.rotation % 180 === 0) ? data.rect[3] - data.rect[1] : data.rect[2] - data.rect[0]
+
+              const rect = normalizeRect([
+                data.rect[0],
+                page.view[3] - data.rect[1] + page.view[1],
+                data.rect[2],
+                page.view[3] - data.rect[3] + page.view[1],
+              ])
+
+              const div = document.createElement('div')
+
+              div.classList.add('annotationWidget', data.subtype, data.fieldType)
+
+              div.style.left   = `${(100 * (rect[0] - pageX)) / pageWidth}%`
+              div.style.top    = `${(100 * (rect[1] - pageY)) / pageHeight}%`
+              div.style.width  = `${(100 * width) / pageWidth}%`
+              div.style.height = `${(100 * height) / pageHeight}%`
+
+              source.annotationLayer.div.append(div)
+              source.annotationLayer.annotationStorage.setValue(data.id, { div })
+            }
+          }
+        }
+      })
+
       pdfEventBus.value    = bus
       pdfLinkService.value = await createLinkService({ eventBus: pdfEventBus.value })
       pdfViewer.value      = await createViewer({