Skip to content

Commit 9f817b5

Browse files
feat: auto-adjust PDF zoom to fit container width
Implements automatic zoom calculation to ensure PDFs fit horizontally within the viewer container, preventing overflow. - Calculates optimal scale based on widest page and container width - Handles PDFs with multiple pages of different widths - Adapts zoom on window resize - Uses 200ms delay to avoid PDF.js render conflicts Signed-off-by: Vitor Mattos <[email protected]>
1 parent 3003bba commit 9f817b5

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

src/Components/PdfEditor/PdfEditor.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,36 @@ export default {
6464
default: false,
6565
},
6666
},
67+
mounted() {
68+
window.addEventListener('resize', this.adjustZoomToFit)
69+
},
70+
beforeDestroy() {
71+
window.removeEventListener('resize', this.adjustZoomToFit)
72+
},
6773
methods: {
74+
calculateOptimalScale(maxPageWidth) {
75+
const containerWidth = this.$el?.clientWidth || 0
76+
if (!containerWidth || !maxPageWidth) return 1
77+
78+
const availableWidth = containerWidth - 80
79+
return Math.max(0.1, Math.min(2, availableWidth / maxPageWidth))
80+
},
81+
adjustZoomToFit() {
82+
const vuePdfEditor = this.$refs.vuePdfEditor
83+
const canvases = this.$el?.querySelectorAll('canvas')
84+
if (!vuePdfEditor?.pdfDocuments?.length || !canvases?.length) return
85+
86+
const maxCanvasWidth = Math.max(...Array.from(canvases).map(canvas =>
87+
canvas.width / (vuePdfEditor.scale || 1)
88+
))
89+
90+
const optimalScale = this.calculateOptimalScale(maxCanvasWidth)
91+
if (Math.abs(optimalScale - vuePdfEditor.scale) > 0.01) {
92+
vuePdfEditor.scale = optimalScale
93+
}
94+
},
6895
endInit(event) {
96+
setTimeout(() => this.adjustZoomToFit(), 200)
6997
this.$emit('pdf-editor:end-init', { ...event })
7098
},
7199
onDeleteSigner(object) {

0 commit comments

Comments
 (0)