diff --git a/changelog.md b/changelog.md index 04ba297..31d20e7 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2026-01-28 - 3.41.2 - fix(dees-pdf-viewer) +account for devicePixelRatio when setting canvas dimensions and scale 2D context to render crisp PDF pages and thumbnails on high-DPI displays + +- Multiply canvas.width and canvas.height by window.devicePixelRatio (dpr) and use Math.floor to set the actual pixel buffer size +- Call ctx.scale(dpr, dpr) so drawing is rendered at device pixels while keeping CSS display size unchanged +- Apply the same high-DPI adjustments to both main page rendering and thumbnail generation +- Keep canvas.style.width and canvas.style.height set to viewport dimensions to preserve layout + ## 2026-01-27 - 3.41.1 - fix(dataview-codebox) fix dees-dataview codebox layout to ensure full-height, proper flex behavior and scrolling; bump internal dependencies diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 8bfa092..550e219 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.41.1', + version: '3.41.2', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-media/dees-pdf-viewer/component.ts b/ts_web/elements/00group-media/dees-pdf-viewer/component.ts index a3399ac..b4d8f22 100644 --- a/ts_web/elements/00group-media/dees-pdf-viewer/component.ts +++ b/ts_web/elements/00group-media/dees-pdf-viewer/component.ts @@ -444,9 +444,10 @@ export class DeesPdfViewer extends DeesElement { const page = await this.pdfDocument.getPage(pageNum); const viewport = this.computeViewport(page); - // Set canvas dimensions - canvas.height = viewport.height; - canvas.width = viewport.width; + // Set canvas dimensions with device pixel ratio for sharp rendering + const dpr = window.devicePixelRatio || 1; + canvas.width = Math.floor(viewport.width * dpr); + canvas.height = Math.floor(viewport.height * dpr); canvas.style.width = `${viewport.width}px`; canvas.style.height = `${viewport.height}px`; @@ -457,6 +458,9 @@ export class DeesPdfViewer extends DeesElement { return; } + // Scale context for high-DPI displays + ctx.scale(dpr, dpr); + const renderContext = { canvasContext: ctx, viewport: viewport, @@ -652,9 +656,10 @@ export class DeesPdfViewer extends DeesElement { 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; + // Set canvas dimensions with device pixel ratio for sharp thumbnails + const dpr = window.devicePixelRatio || 1; + canvas.width = Math.floor(viewport.width * dpr); + canvas.height = Math.floor(viewport.height * dpr); // Set the display size via style to ensure proper display canvas.style.width = `${viewport.width}px`; @@ -670,6 +675,9 @@ export class DeesPdfViewer extends DeesElement { continue; } + // Scale context for high-DPI displays + context.scale(dpr, dpr); + const renderContext = { canvasContext: context, viewport: viewport,