@libresign/pdf-elements 1.0.1 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@libresign/pdf-elements",
   "description": "PDF viewer with draggable and resizable element overlays for Vue 3",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": "LibreCode <contact@librecode.coop>",
   "private": false,
   "main": "dist/index.js",

package/src/components/PDFElements.vue

@@ -23,14 +23,19 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               />
                 <div
                 class="overlay"
+                :role="isAddingMode ? 'button' : undefined"
+                :tabindex="isAddingMode ? 0 : -1"
+                :aria-label="getOverlayAriaLabel(docIndex, pIndex)"
                 @mousemove="handleMouseMove"
                 @touchmove="handleMouseMove"
                 @click="handleOverlayClick(docIndex, pIndex, $event)"
                 @touchend="handleOverlayClick(docIndex, pIndex, $event)"
+                @keydown="handleOverlayKeyDown(docIndex, pIndex, $event)"
               >
                 <div
                   v-if="isAddingMode && previewPageDocIndex === docIndex && previewPageIndex === pIndex && previewElement && previewVisible"
                   class="preview-element"
+                  aria-hidden="true"
                   :style="{
                     left: `${previewPosition.x * previewScale.x}px`,
                     top: `${previewPosition.y * previewScale.y}px`,
@@ -217,6 +222,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    pageAriaLabel: {
+      type: Function as PropType<(info: { docIndex: number; docName: string; totalDocs: number; pageNumber: number; totalPages: number; isAddingMode: boolean }) => string>,
+      default: null,
+    },
     pdfjsOptions: {
       type: Object as PropType<Record<string, unknown>>,
       default: () => ({}),
@@ -730,6 +739,42 @@ export default defineComponent({
       }
     },
 
+    getOverlayAriaLabel(docIndex, pageIndex) {
+      const doc = this.pdfDocuments?.[docIndex]
+      const docName = doc?.name ?? `Document ${docIndex + 1}`
+      const totalDocs = this.pdfDocuments?.length ?? 1
+      const totalPages = doc?.numPages ?? 0
+      const pageNumber = pageIndex + 1
+      if (this.pageAriaLabel) {
+        return this.pageAriaLabel({ docIndex, docName, totalDocs, pageNumber, totalPages, isAddingMode: this.isAddingMode })
+      }
+      const docPrefix = totalDocs > 1 ? `Document ${docIndex + 1} of ${totalDocs} (${docName}), ` : ''
+      if (this.isAddingMode) {
+        return `${docPrefix}Page ${pageNumber} of ${totalPages}. Press Enter or Space to place here.`
+      }
+      return `${docPrefix}Page ${pageNumber} of ${totalPages}.`
+    },
+
+    handleOverlayKeyDown(docIndex, pageIndex, event) {
+      if (!this.isAddingMode || !this.previewElement) return
+      if (event.key !== 'Enter' && event.key !== ' ') return
+      event.preventDefault()
+
+      const pageWidth = this.getPageWidth(docIndex, pageIndex)
+      const pageHeight = this.getPageHeight(docIndex, pageIndex)
+      const scale = this.getDisplayedPageScale(docIndex, pageIndex) || 1
+
+      this.previewPageDocIndex = docIndex
+      this.previewPageIndex = pageIndex
+      this.previewScale = { x: scale, y: scale }
+      this.previewPosition = {
+        x: Math.round((pageWidth - this.previewElement.width) / 2),
+        y: Math.round((pageHeight - this.previewElement.height) / 2),
+      }
+      this.previewVisible = true
+      this.finishAdding()
+    },
+
     handleWheel(event) {
       if (!event.ctrlKey) return
       event.preventDefault()

package/src/utils/asyncReader.ts

@@ -8,9 +8,16 @@ let pdfjsPromise: Promise<typeof import('pdfjs-dist')> | null = null
 let workerUrlPromise: Promise<string> | null = null
 let workerSrcOverride: string | null = null
 
+type PdfjsModule = typeof import('pdfjs-dist')
+
+function normalizePdfjs(mod: PdfjsModule): PdfjsModule {
+  const m = mod as PdfjsModule & { default?: PdfjsModule }
+  return (m.default?.PDFWorker ? m.default : m) as PdfjsModule
+}
+
 function loadPdfjs() {
   if (!pdfjsPromise) {
-    pdfjsPromise = import('pdfjs-dist')
+    pdfjsPromise = import('pdfjs-dist').then(normalizePdfjs)
   }
   return pdfjsPromise
 }
@@ -24,7 +31,10 @@ function loadWorkerUrl() {
   return workerUrlPromise
 }
 
-async function ensureWorkerSrc(pdfjs: typeof import('pdfjs-dist')) {
+async function ensureWorkerSrc(pdfjs: PdfjsModule) {
+  if (!pdfjs?.GlobalWorkerOptions) {
+    return
+  }
   if (workerSrcOverride) {
     pdfjs.GlobalWorkerOptions.workerSrc = workerSrcOverride
     return
@@ -34,7 +44,7 @@ async function ensureWorkerSrc(pdfjs: typeof import('pdfjs-dist')) {
   }
 }
 
-async function getSharedWorker(pdfjs: typeof import('pdfjs-dist')): Promise<PDFWorker> {
+async function getSharedWorker(pdfjs: PdfjsModule): Promise<PDFWorker> {
   if (!sharedWorker) {
     await ensureWorkerSrc(pdfjs)
     sharedWorker = new pdfjs.PDFWorker({}) as PDFWorker
@@ -44,9 +54,14 @@ async function getSharedWorker(pdfjs: typeof import('pdfjs-dist')): Promise<PDFW
 
 export function setWorkerPath(path: string) {
   workerSrcOverride = path
+  sharedWorker = null
   if (pdfjsPromise) {
     pdfjsPromise.then((pdfjs) => {
-      pdfjs.GlobalWorkerOptions.workerSrc = path
+      if (pdfjs?.GlobalWorkerOptions) {
+        pdfjs.GlobalWorkerOptions.workerSrc = path
+      }
+    }).catch((error) => {
+      console.warn('setWorkerPath: failed to update pdfjs workerSrc immediately', error)
     })
   }
 }