From 4299b87c6a3467ec42cb0c1dc739812d9ad57517 Mon Sep 17 00:00:00 2001 From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> Date: Sun, 18 Jan 2026 22:30:34 -0300 Subject: [PATCH 1/5] feat: implement auto fet zoom Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> --- src/components/PDFElements.vue | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/src/components/PDFElements.vue b/src/components/PDFElements.vue index 09fcf5b..cceea4f 100644 --- a/src/components/PDFElements.vue +++ b/src/components/PDFElements.vue @@ -179,6 +179,10 @@ export default { type: String, default: '{currentPage} of {totalPages}', }, + autoFitZoom: { + type: Boolean, + default: false, + }, }, data() { return { @@ -224,6 +228,9 @@ 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) { @@ -241,6 +248,9 @@ 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 @@ -804,6 +814,29 @@ export default { const pagesScale = doc.pagesScale[pageIndex] || 1 return pageRef.getCanvasMeasurement().canvasHeight / pagesScale }, + calculateOptimalScale(maxPageWidth) { + const containerWidth = this.$el?.clientWidth || 0 + if (!containerWidth || !maxPageWidth) return 1 + + const availableWidth = containerWidth - 40 + return Math.max(0.1, Math.min(2, availableWidth / maxPageWidth)) + }, + 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), + )) + + const optimalScale = this.calculateOptimalScale(maxCanvasWidth) + if (Math.abs(optimalScale - this.scale) > 0.01) { + this.scale = optimalScale + this.visualScale = optimalScale + } + }, }, } From f7ce097c60215fbdd01bad8266ef28cc2238d72a Mon Sep 17 00:00:00 2001 From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> Date: Sun, 18 Jan 2026 22:31:02 -0300 Subject: [PATCH 2/5] feat: update documentation Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> --- README.md | 57 +++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index b39df9a..8488f77 100644 --- a/README.md +++ b/README.md @@ -13,25 +13,58 @@ A Vue 2 component for rendering PDFs with draggable and resizable element overla ### Props -| Prop | Type | Default | -|------|------|---------| -| `width` | String | `'100%'` | -| `height` | String | `'100%'` | -| `initFiles` | Array | `[]` | -| `initFileNames` | Array | `[]` | -| `initialScale` | Number | `1` | -| `showPageFooter` | Boolean | `true` | -| `hideSelectionUI` | Boolean | `false` | -| `showSelectionHandles` | Boolean | `true` | -| `showElementActions` | Boolean | `true` | -| `pageCountFormat` | String | `'{currentPage} of {totalPages}'` | +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `width` | String | `'100%'` | Container width | +| `height` | String | `'100%'` | Container height | +| `initFiles` | Array | `[]` | PDF files to load | +| `initFileNames` | Array | `[]` | Names for the PDF files | +| `initialScale` | Number | `1` | Initial zoom scale | +| `showPageFooter` | Boolean | `true` | Show page footer with document name and page number | +| `hideSelectionUI` | Boolean | `false` | Hide selection handles and actions UI | +| `showSelectionHandles` | Boolean | `true` | Show resize/move handles on selected elements | +| `showElementActions` | Boolean | `true` | Show action buttons on selected elements | +| `pageCountFormat` | String | `'{currentPage} of {totalPages}'` | Format string for page counter | +| `autoFitZoom` | Boolean | `false` | Automatically adjust zoom to fit viewport on window resize | ### Events - `pdf-elements:end-init` - Emitted when PDF is loaded +### Methods + +- `adjustZoomToFit()` - Manually trigger zoom adjustment to fit viewport (useful when calling programmatically) + ### Slots - `element-{type}` - Custom element rendering (e.g., `element-signature`) - `custom` - Fallback for elements without specific type - `actions` - Custom action buttons + +### Usage Example + +```vue + + + +``` From b253d24c434dd56419f21b27cb7794ea9031a8c9 Mon Sep 17 00:00:00 2001 From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> Date: Sun, 18 Jan 2026 22:31:41 -0300 Subject: [PATCH 3/5] chore: bump version Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4d85f97..45ce890 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@libresign/pdf-elements", "description": "PDF viewer with draggable and resizable element overlays for Vue 2", - "version": "0.1.2", + "version": "0.2.0", "author": "LibreCode ", "private": false, "main": "dist/pdf-elements.umd.js", From 4a79cddaf94174f2178f1f5b24eaf739551066ab Mon Sep 17 00:00:00 2001 From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> Date: Sun, 18 Jan 2026 22:33:25 -0300 Subject: [PATCH 4/5] chore: clean README Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> --- README.md | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/README.md b/README.md index 8488f77..e983b62 100644 --- a/README.md +++ b/README.md @@ -31,40 +31,9 @@ A Vue 2 component for rendering PDFs with draggable and resizable element overla - `pdf-elements:end-init` - Emitted when PDF is loaded -### Methods - -- `adjustZoomToFit()` - Manually trigger zoom adjustment to fit viewport (useful when calling programmatically) - ### Slots - `element-{type}` - Custom element rendering (e.g., `element-signature`) - `custom` - Fallback for elements without specific type - `actions` - Custom action buttons -### Usage Example - -```vue - - - -``` From a1aaa2e2ce0cbc9e1f4e6d829da441acb380540f Mon Sep 17 00:00:00 2001 From: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> Date: Sun, 18 Jan 2026 22:34:40 -0300 Subject: [PATCH 5/5] fix: replace npm ci by npm i Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com> --- .github/workflows/node.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml index 2ab5d5f..a83e4e3 100644 --- a/.github/workflows/node.yml +++ b/.github/workflows/node.yml @@ -46,7 +46,7 @@ jobs: env: CYPRESS_INSTALL_BINARY: 0 PUPPETEER_SKIP_DOWNLOAD: true - run: npm ci + run: npm i - name: Lint run: npm run lint