AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add configurable PDF viewer options and improve rendering

Browse Source 
Introduced `PdfViewerOptions` class to centralize PDF viewer
settings such as scaling, HiDPI support, zoom transitions,
and rendering delays. Bound these options to `appsettings.json`
for dynamic configuration.

Injected `PdfViewerOptions` into `EnvelopeViewer.razor` and
updated `OnInitializedAsync` to pass settings to JavaScript.
Replaced hardcoded values in `pdf-viewer.js` with configurable
options, improving maintainability and flexibility.

Enhanced rendering logic to respect HiDPI settings, maximum
DPR, and smooth zoom transitions. Improved thumbnail rendering
with configurable delays to optimize performance.
This commit is contained in:
tekh
2026-06-06 12:15:48 +02:00
parent ca3b74f939
commit 139b92ed8c
5 changed files with 136 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js
View File

@@ -11,6 +11,27 @@ window.pdfViewer = {
currentRenderTask: null,
dotNetReference: null,
wheelEventAttached: false,
// Quality options (configurable from appsettings.json)
qualityOptions: {
thumbnailBaseScale: 0.75,
thumbnailEnableHiDPI: true,
thumbnailMaxDPR: 2.0,
mainCanvasEnableHiDPI: true,
mainCanvasMaxDPR: 2.0,
enableSmoothZoom: true,
zoomTransitionDuration: 150,
renderingOpacity: 0.85
},
setQualityOptions(options) {
this.qualityOptions = { ...this.qualityOptions, ...options };
console.log('PDF Viewer quality options updated:', this.qualityOptions);
// Apply CSS variables for dynamic styling
document.documentElement.style.setProperty('--zoom-transition-duration', `${options.zoomTransitionDuration}ms`);
document.documentElement.style.setProperty('--rendering-opacity', options.renderingOpacity);
},
async initialize(canvasId, pdfDataUrl, dotNetRef) {
try {
@@ -98,8 +119,10 @@ window.pdfViewer = {
async renderPage(num) {
this.pageRendering = true;
// Add rendering class for smooth transition
this.canvas.classList.add('rendering');
// Add rendering class for smooth transition (if enabled)
if (this.qualityOptions.enableSmoothZoom) {
this.canvas.classList.add('rendering');
}
try {
// Get scroll container
@@ -120,9 +143,11 @@ window.pdfViewer = {
const page = await this.pdfDoc.getPage(num);
// HiDPI support for main canvas
const dpr = window.devicePixelRatio || 1;
const viewport = page.getViewport({ scale: this.scale * Math.min(dpr, 2) });
// HiDPI support for main canvas (configurable)
const dpr = this.qualityOptions.mainCanvasEnableHiDPI
? Math.min(window.devicePixelRatio || 1, this.qualityOptions.mainCanvasMaxDPR)
: 1.0;
const viewport = page.getViewport({ scale: this.scale * dpr });
// Set internal canvas resolution (high quality)
this.canvas.width = viewport.width;
@@ -161,7 +186,9 @@ window.pdfViewer = {
}
// Remove rendering class after completion
this.canvas.classList.remove('rendering');
if (this.qualityOptions.enableSmoothZoom) {
this.canvas.classList.remove('rendering');
}
this.currentRenderTask = null;
this.pageRendering = false;
@@ -275,10 +302,12 @@ window.pdfViewer = {
const page = await this.pdfDoc.getPage(pageNum);
// High-quality rendering with HiDPI support
const dpr = window.devicePixelRatio || 1;
const baseScale = 0.75; // Increased base scale for better quality
const scale = baseScale * Math.min(dpr, 2); // Cap at 2x for performance
// High-quality rendering with HiDPI support (configurable)
const dpr = this.qualityOptions.thumbnailEnableHiDPI
? Math.min(window.devicePixelRatio || 1, this.qualityOptions.thumbnailMaxDPR)
: 1.0;
const baseScale = this.qualityOptions.thumbnailBaseScale;
const scale = baseScale * dpr;
const viewport = page.getViewport({ scale: scale });