diff --git a/.changeset/render-layer-rotation.md b/.changeset/render-layer-rotation.md new file mode 100644 index 000000000..786dba7ed --- /dev/null +++ b/.changeset/render-layer-rotation.md @@ -0,0 +1,5 @@ +--- +'@embedpdf/plugin-render': patch +--- + +Pass the effective page rotation to RenderLayer rendering so rotated PDF pages match their layout dimensions. diff --git a/packages/plugin-render/src/lib/render-plugin.ts b/packages/plugin-render/src/lib/render-plugin.ts index 18eda1e1a..7eac5c919 100644 --- a/packages/plugin-render/src/lib/render-plugin.ts +++ b/packages/plugin-render/src/lib/render-plugin.ts @@ -160,6 +160,7 @@ export class RenderPlugin extends BasePlugin { + void _config; this.logger.info('RenderPlugin', 'Initialize', 'Render plugin initialized'); } diff --git a/packages/plugin-render/src/shared/components/render-layer.tsx b/packages/plugin-render/src/shared/components/render-layer.tsx index 7caafd35c..a8c999dfd 100644 --- a/packages/plugin-render/src/shared/components/render-layer.tsx +++ b/packages/plugin-render/src/shared/components/render-layer.tsx @@ -20,9 +20,13 @@ type RenderLayerProps = Omit, 'style'> & { */ scale?: number; /** - * Optional device pixel ratio override. If not provided, uses window.devicePixelRatio. + * Optional device pixel ratio override. If not provided, uses the browser device pixel ratio. */ dpr?: number; + /** + * Optional rotation override. If not provided, uses page rotation plus document rotation. + */ + rotation?: Rotation; /** * Additional styles for the image element */ @@ -44,6 +48,7 @@ export function RenderLayer({ pageIndex, scale: scaleOverride, dpr: dprOverride, + rotation: rotationOverride, style, ...props }: RenderLayerProps) { @@ -67,9 +72,18 @@ export function RenderLayer({ const actualDpr = useMemo(() => { if (dprOverride !== undefined) return dprOverride; - return window.devicePixelRatio; + return globalThis.devicePixelRatio ?? 1; }, [dprOverride]); + const actualRotation = useMemo(() => { + if (rotationOverride !== undefined) return rotationOverride; + const pageRotation = + documentState?.document?.pages.find((page) => page.index === pageIndex)?.rotation ?? + Rotation.Degree0; + const documentRotation = documentState?.rotation ?? Rotation.Degree0; + return ((pageRotation + documentRotation) % 4) as Rotation; + }, [rotationOverride, documentState?.document, documentState?.rotation, pageIndex]); + useEffect(() => { if (!renderProvides) return; @@ -78,6 +92,7 @@ export function RenderLayer({ options: { scaleFactor: actualScale, dpr: actualDpr, + rotation: actualRotation, }, }); @@ -98,7 +113,15 @@ export function RenderLayer({ }); } }; - }, [documentId, pageIndex, actualScale, actualDpr, renderProvides, refreshVersion]); + }, [ + documentId, + pageIndex, + actualScale, + actualDpr, + actualRotation, + renderProvides, + refreshVersion, + ]); const handleImageLoad = () => { if (urlRef.current) { diff --git a/packages/plugin-render/src/svelte/components/RenderLayer.svelte b/packages/plugin-render/src/svelte/components/RenderLayer.svelte index 3737196d5..763d51840 100644 --- a/packages/plugin-render/src/svelte/components/RenderLayer.svelte +++ b/packages/plugin-render/src/svelte/components/RenderLayer.svelte @@ -1,6 +1,6 @@