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

feat(dees-pdf-viewer): optimize thumbnail rendering and styles for improved layout and responsiveness

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-20 22:07:41 +00:00
parent 352fe79791
commit 53b5cbed07
2 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
ts_web/elements/dees-pdf-viewer/component.ts
View File

@@ -604,41 +604,56 @@ export class DeesPdfViewer extends DeesElement {
try {
await this.updateComplete;
const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)
const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail') as NodeListOf<HTMLElement>;
const thumbnailCanvases = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
const sidebarContent = this.shadowRoot?.querySelector('.sidebar-content') as HTMLElement;
// Get the actual available width for thumbnails (sidebar width minus padding)
const sidebarStyles = window.getComputedStyle(sidebarContent);
const sidebarPadding = parseFloat(sidebarStyles.paddingLeft) + parseFloat(sidebarStyles.paddingRight);
const maxThumbnailWidth = 200 - sidebarPadding - 4; // Account for border
// Clear all canvases first to prevent conflicts
for (const canvas of Array.from(thumbnails)) {
for (const canvas of Array.from(thumbnailCanvases)) {
const context = canvas.getContext('2d');
if (context) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
for (const canvas of Array.from(thumbnails)) {
for (let i = 0; i < thumbnailCanvases.length; i++) {
if (signal?.aborted) return;
const canvas = thumbnailCanvases[i];
const thumbnail = thumbnails[i];
const pageNum = parseInt(canvas.dataset.page || '1');
const page = await this.pdfDocument.getPage(pageNum);
// Calculate scale to fit thumbnail width while maintaining aspect ratio
// Get the page's natural dimensions
const initialViewport = page.getViewport({ scale: 1 });
const scale = thumbnailWidth / initialViewport.width;
// Calculate scale to fit within the max thumbnail width
const scale = maxThumbnailWidth / initialViewport.width;
const viewport = page.getViewport({ scale });
// Set canvas dimensions to actual render size
canvas.width = viewport.width;
canvas.height = viewport.height;
// Also set the display size via style to ensure proper display
// Set the display size via style to ensure proper display
canvas.style.width = `${viewport.width}px`;
canvas.style.height = `${viewport.height}px`;
// Set the actual thumbnail container height
thumbnail.style.height = `${viewport.height}px`;
thumbnail.style.minHeight = `${viewport.height}px`;
const context = canvas.getContext('2d');
if (!context) {
page.cleanup?.();
continue;
}
const renderContext = {
canvasContext: context,
viewport: viewport,