@libresign/pdf-elements 0.2.1 → 0.2.3

package/package.json

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

package/src/components/PDFElements.vue

@@ -213,6 +213,7 @@ export default {
       boundHandleWheel: null,
       debouncedApplyZoom: null,
       visualScale: this.initialScale,
+      autoFitApplied: false,
     }
   },
   mounted() {
@@ -228,9 +229,6 @@ export default {
     window.addEventListener('resize', this.onViewportScroll)
     this.$el?.addEventListener('scroll', this.onViewportScroll, { passive: true })
     this.$el?.addEventListener('wheel', this.boundHandleWheel, { passive: false })
-    if (this.autoFitZoom) {
-      window.addEventListener('resize', this.adjustZoomToFit)
-    }
   },
   beforeUnmount() {
     if (this.zoomRafId) {
@@ -248,9 +246,6 @@ export default {
     window.removeEventListener('scroll', this.onViewportScroll)
     window.removeEventListener('resize', this.onViewportScroll)
     this.$el?.removeEventListener('scroll', this.onViewportScroll)
-    if (this.autoFitZoom) {
-      window.removeEventListener('resize', this.adjustZoomToFit)
-    }
     if (this.viewportRafId) {
       window.cancelAnimationFrame(this.viewportRafId)
       this.viewportRafId = 0
@@ -260,6 +255,7 @@ export default {
     async init() {
       if (!this.initFiles || this.initFiles.length === 0) return
       const docs = []
+      this.autoFitApplied = false
 
       for (let i = 0; i < this.initFiles.length; i++) {
         const file = this.initFiles[i]
@@ -274,8 +270,16 @@ export default {
         }
 
         const pages = []
+        const pageWidths = Array(pdfDoc.numPages).fill(0)
         for (let p = 1; p <= pdfDoc.numPages; p++) {
-          pages.push(pdfDoc.getPage(p))
+          const pagePromise = pdfDoc.getPage(p)
+          pagePromise.then((page) => {
+            pageWidths[p - 1] = page.getViewport({ scale: 1 }).width
+            if (this.autoFitZoom) {
+              this.scheduleAutoFitZoom()
+            }
+          })
+          pages.push(pagePromise)
         }
 
         docs.push({
@@ -284,6 +288,7 @@ export default {
           pdfDoc,
           numPages: pdfDoc.numPages,
           pages,
+          pageWidths,
           pagesScale: Array(pdfDoc.numPages).fill(this.scale),
           allObjects: Array(pdfDoc.numPages).fill(0).map(() => []),
         })
@@ -296,7 +301,7 @@ export default {
         this.$emit('pdf-elements:end-init', { docsCount: docs.length })
         this.$nextTick(() => {
           if (this.autoFitZoom) {
-            this.adjustZoomToFit()
+            this.scheduleAutoFitZoom()
           }
         })
       }
@@ -798,6 +803,9 @@ export default {
       if (docIndex < 0 || docIndex >= this.pdfDocuments.length) return
       this.pdfDocuments[docIndex].pagesScale[pageIndex] = e.scale
       this.cachePageBounds()
+      if (this.autoFitZoom) {
+        this.scheduleAutoFitZoom()
+      }
     },
 
     formatPageNumber(currentPage, totalPages) {
@@ -826,17 +834,38 @@ export default {
       const availableWidth = containerWidth - 40
       return Math.max(0.1, Math.min(2, availableWidth / maxPageWidth))
     },
+    scheduleAutoFitZoom() {
+      if (this.autoFitApplied) return
+      if (this.zoomRafId) return
+      this.zoomRafId = window.requestAnimationFrame(() => {
+        this.zoomRafId = 0
+        this.adjustZoomToFit()
+      })
+    },
     adjustZoomToFit() {
-      if (!this.autoFitZoom || !this.pdfDocuments.length) return
-
-      const canvases = this.$el?.querySelectorAll('canvas')
-      if (!canvases?.length) return
-
-      const maxCanvasWidth = Math.max(...Array.from(canvases).map(canvas =>
-        canvas.width / (this.scale || 1),
-      ))
+      if (!this.autoFitZoom || this.autoFitApplied || !this.pdfDocuments.length) return
+
+      const widths = this.pdfDocuments
+        .flatMap(doc => doc.pageWidths || [])
+        .filter(width => width > 0)
+
+      let maxCanvasWidth = 0
+      if (widths.length) {
+        maxCanvasWidth = Math.max(...widths)
+      } else {
+        if (this.autoFitZoom) {
+          this.scheduleAutoFitZoom()
+          return
+        }
+        const canvases = this.$el?.querySelectorAll('canvas')
+        if (!canvases?.length) return
+        maxCanvasWidth = Math.max(...Array.from(canvases).map(canvas =>
+          canvas.width / (this.scale || 1),
+        ))
+      }
 
       const optimalScale = this.calculateOptimalScale(maxCanvasWidth)
+      this.autoFitApplied = true
       if (Math.abs(optimalScale - this.scale) > 0.01) {
         this.scale = optimalScale
         this.visualScale = optimalScale