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

docs(pdf-coordinate-finder): improve annotation area

Author: adenvt

src/components/pdf-viewer/PdfViewer.vue

@@ -361,10 +361,6 @@ defineSlots<{
         @apply ring-info ring;
         @apply dark:ring-dark-info;
       }
-
-      .annotationWidget {
-        @apply absolute;
-      }
     }
   }
 

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

@@ -133,16 +133,16 @@ export function useViewer (container: Ref<HTMLDivElement>, viewer: Ref<HTMLDivEl
           const annotations = await page.getAnnotations() as PDFJSAnnotation[]
 
           for (const data of annotations) {
-            if (data.noHTML && !source.annotationLayer.annotationStorage.has(data.id)) {
+            if (data.annotationType === 20 /* Widget */ && data.fieldType === 'Sig' && !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 width  = data.rect[2] - data.rect[0]
+              const height = data.rect[3] - data.rect[1]
 
               const rect = normalizeRect([
                 data.rect[0],
@@ -151,14 +151,26 @@ export function useViewer (container: Ref<HTMLDivElement>, viewer: Ref<HTMLDivEl
                 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}%`
+              const div = document.createElement('section')
+
+              div.dataset.annotationId = data.id
+              div.tabIndex             = 1000
+              div.className            = 'signatureWidgetAnnotation'
+              div.role                 = 'img'
+              div.id                   = `pdfjs_internal_id_${data.id}`
+              div.style.zIndex         = '0'
+              div.style.left           = `${(100 * (rect[0] - pageX)) / pageWidth}%`
+              div.style.top            = `${(100 * (rect[1] - pageY)) / pageHeight}%`
+
+              if (data.rotation === 0) {
+                div.style.width  = `${(100 * width) / pageWidth}%`
+                div.style.height = `${(100 * height) / pageHeight}%`
+              } else {
+                div.style.width  = `${(100 * height) / pageWidth}%`
+                div.style.height = `${(100 * width) / pageHeight}%`
+
+                div.dataset.mainRotation = `${(360 - data.rotation) % 360}`
+              }
 
               source.annotationLayer.div.append(div)
               source.annotationLayer.annotationStorage.setValue(data.id, { div })

src/tools/pdf-coordinate-finder.md

@@ -18,10 +18,11 @@ layout: false
   import { reactive, ref } from 'vue-demi'
   import { withBase } from 'vitepress'
 
-  const scale  = ref(1)
-  const file   = ref()
-  const debug  = ref(false)
-  const src    = usePreview(file, withBase('/assets/pdf/Calibrator-v3.pdf'))
+  const scale           = ref(1)
+  const file            = ref()
+  const debug           = ref(false)
+  const debugAnnotation = ref(false)
+  const src             = usePreview(file, withBase('/assets/pdf/Calibrator-v3.pdf'))
 
   const items  = reactive([])
   const item   = ref()
@@ -68,7 +69,7 @@ layout: false
 </script>
 
 <style lang="postcss">
-  .pdf-viewer--debug .annotationWidget {
+  .pdf-viewer--debug .annotationLayer > section {
     @apply pointer-events-auto border-2 border-dashed border-info-emphasis bg-info-emphasis/5;
     @apply dark:border-dark-info-emphasis dark:bg-info-emphasis/5;
   }
@@ -77,7 +78,7 @@ layout: false
 <div class="flex w-full h-full">
   <p-pdf-viewer
     layout="fit"
-    :class="{ 'pdf-viewer--debug': debug }"
+    :class="{ 'pdf-viewer--debug': debugAnnotation }"
     :src="src"
     v-model:scale="scale">
     <template #header>
@@ -89,10 +90,13 @@ layout: false
             </p-button>
           </template>
         </p-dropzone>
-        <div class="flex items-center px-2 space-x-2 shrink-0">
+        <div class="flex items-center px-2 space-x-4 shrink-0">
           <p-checkbox v-model="debug">
             Show Debug
           </p-checkbox>
+          <p-checkbox v-model="debugAnnotation">
+            Show Annotation Area
+          </p-checkbox>
         </div>
         <div class="flex flex-wrap gap-2 shrink-0 md:flex-nowrap">
           <p-button @click="add(198, 106)">