design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-pdf-preview): enhance A4 format detection and improve canvas rendering quality

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-20 21:46:52 +00:00
parent bb883ce341
commit d3463f009b
2 changed files with 119 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
ts_web/elements/dees-pdf-preview/component.ts
View File

@@ -41,9 +41,11 @@ export class DeesPdfPreview extends DeesElement {
@property({ type: Boolean })
private isHovering: boolean = false;
@property({ type: Boolean })
private isA4Format: boolean = true;
private renderPagesTask: Promise<void> | null = null;
private renderPagesQueued: boolean = false;
private hoverPageNumber: number = 1;
private observer: IntersectionObserver;
private pdfDocument: any;
@@ -81,7 +83,7 @@ export class DeesPdfPreview extends DeesElement {
` : ''}
${!this.loading && !this.error ? html`
<div class="preview-stack">
<div class="preview-stack ${!this.isA4Format ? 'non-a4' : ''}">
<canvas
class="preview-canvas"
data-page="${this.currentPreviewPage}"
@@ -197,8 +199,12 @@ export class DeesPdfPreview extends DeesElement {
this.currentPreviewPage = 1;
this.loadedPdfUrl = this.pdfUrl;
// Force an update to ensure the canvas element is in the DOM
this.loading = false;
await this.updateComplete;
this.cacheElements();
// Now render the first page
await this.scheduleRenderPages();
this.rendered = true;
@@ -208,7 +214,6 @@ export class DeesPdfPreview extends DeesElement {
} catch (error) {
console.error('Failed to load PDF preview:', error);
this.error = true;
} finally {
this.loading = false;
}
}
@@ -243,8 +248,14 @@ export class DeesPdfPreview extends DeesElement {
private async performRenderPages() {
if (!this.pdfDocument) return;
// Wait a frame to ensure DOM is ready
await new Promise(resolve => requestAnimationFrame(resolve));
const canvas = this.shadowRoot?.querySelector('.preview-canvas') as HTMLCanvasElement;
if (!canvas) return;
if (!canvas) {
console.warn('Preview canvas not found in DOM');
return;
}
// Release old canvases
this.clearCanvases();
@@ -260,17 +271,47 @@ export class DeesPdfPreview extends DeesElement {
const page = await this.pdfDocument.getPage(pageNum);
// Calculate scale to fit within available area while keeping aspect ratio
// Use higher scale for sharper rendering
const initialViewport = page.getViewport({ scale: 1 });
const scaleX = availableWidth > 0 ? availableWidth / initialViewport.width : 0;
const scaleY = availableHeight > 0 ? availableHeight / initialViewport.height : 0;
const scale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5, 1.0);
if (!Number.isFinite(scale) || scale <= 0) {
// Check if this is standard paper format (A4 or US Letter)
const aspectRatio = initialViewport.height / initialViewport.width;
// Common paper format ratios
const a4PortraitRatio = 1.414; // 297mm / 210mm
const a4LandscapeRatio = 0.707; // 210mm / 297mm
const letterPortraitRatio = 1.294; // 11" / 8.5"
const letterLandscapeRatio = 0.773; // 8.5" / 11"
// Check for standard formats with 5% tolerance
const tolerance = 0.05;
const isA4Portrait = Math.abs(aspectRatio - a4PortraitRatio) < (a4PortraitRatio * tolerance);
const isA4Landscape = Math.abs(aspectRatio - a4LandscapeRatio) < (a4LandscapeRatio * tolerance);
const isLetterPortrait = Math.abs(aspectRatio - letterPortraitRatio) < (letterPortraitRatio * tolerance);
const isLetterLandscape = Math.abs(aspectRatio - letterLandscapeRatio) < (letterLandscapeRatio * tolerance);
// Consider it standard format if it matches A4 or US Letter
this.isA4Format = isA4Portrait || isA4Landscape || isLetterPortrait || isLetterLandscape;
// Debug logging
console.log(`PDF aspect ratio: ${aspectRatio.toFixed(3)}, standard format: ${this.isA4Format}`)
// Adjust available size for non-A4 documents (account for padding)
const adjustedWidth = this.isA4Format ? availableWidth : availableWidth - 24;
const adjustedHeight = this.isA4Format ? availableHeight : availableHeight - 24;
const scaleX = adjustedWidth > 0 ? adjustedWidth / initialViewport.width : 0;
const scaleY = adjustedHeight > 0 ? adjustedHeight / initialViewport.height : 0;
// Increase scale by 2x for sharper rendering, but limit to 3.0 max
const baseScale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5);
const renderScale = Math.min(baseScale * 2, 3.0);
if (!Number.isFinite(renderScale) || renderScale <= 0) {
page.cleanup?.();
return;
}
const viewport = page.getViewport({ scale });
const viewport = page.getViewport({ scale: renderScale });
// Acquire canvas from pool
const pooledCanvas = CanvasPool.acquire(viewport.width, viewport.height);
@@ -285,13 +326,31 @@ export class DeesPdfPreview extends DeesElement {
await page.render(renderContext).promise;
// Transfer to display canvas
// Set actual canvas resolution for sharpness
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = `${viewport.width}px`;
canvas.style.height = `${viewport.height}px`;
// Scale down display size to fit the container while keeping high resolution
// For A4, fill the container; for non-A4, respect padding
const displayWidth = adjustedWidth;
const displayHeight = (viewport.height / viewport.width) * adjustedWidth;
// If it fits height-wise better, scale by height instead
if (displayHeight > adjustedHeight) {
const altDisplayHeight = adjustedHeight;
const altDisplayWidth = (viewport.width / viewport.height) * adjustedHeight;
canvas.style.width = `${altDisplayWidth}px`;
canvas.style.height = `${altDisplayHeight}px`;
} else {
canvas.style.width = `${displayWidth}px`;
canvas.style.height = `${displayHeight}px`;
}
const ctx = canvas.getContext('2d');
if (ctx) {
// Enable image smoothing for better quality
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(pooledCanvas.canvas, 0, 0);
}
@@ -323,6 +382,7 @@ export class DeesPdfPreview extends DeesElement {
this.pageCount = 0;
this.currentPreviewPage = 1;
this.isHovering = false;
this.isA4Format = true;
this.previewContainer = null;
this.stackElement = null;
this.loadedPdfUrl = null;
@@ -456,15 +516,21 @@ export class DeesPdfPreview extends DeesElement {
private getAvailableSize() {
if (!this.stackElement) {
// Try to get the stack element if it's not cached
this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
}
if (!this.stackElement) {
// Fallback to default size if element not found
return {
availableWidth: 0,
availableHeight: 0,
availableWidth: 200, // Full container width
availableHeight: 260, // Full container height
};
}
const rect = this.stackElement.getBoundingClientRect();
const availableWidth = Math.max(rect.width, 0);
const availableHeight = Math.max(rect.height, 0);
const availableWidth = Math.max(rect.width, 0) || 200;
const availableHeight = Math.max(rect.height, 0) || 260;
return { availableWidth, availableHeight };
}