fix(plugin-render): pass effective rotation to RenderLayer rendering

.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.

packages/plugin-render/src/lib/render-plugin.ts

@@ -160,6 +160,7 @@ export class RenderPlugin extends BasePlugin<RenderPluginConfig, RenderCapabilit
   // ─────────────────────────────────────────────────────────
 
   async initialize(_config: RenderPluginConfig): Promise<void> {
+    void _config;
     this.logger.info('RenderPlugin', 'Initialize', 'Render plugin initialized');
   }
 

packages/plugin-render/src/shared/components/render-layer.tsx

@@ -20,9 +20,13 @@ type RenderLayerProps = Omit<HTMLAttributes<HTMLImageElement>, '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) {

packages/plugin-render/src/svelte/components/RenderLayer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { HTMLImgAttributes } from 'svelte/elements';
-  import { ignore, PdfErrorCode } from '@embedpdf/models';
+  import { ignore, PdfErrorCode, Rotation } from '@embedpdf/models';
   import { useDocumentState } from '@embedpdf/core/svelte';
   import { useRenderCapability } from '../hooks';
 
@@ -21,6 +21,10 @@
      * Optional device pixel ratio override. If not provided, uses window.devicePixelRatio.
      */
     dpr?: number;
+    /**
+     * Optional rotation override. If not provided, uses page rotation plus document rotation.
+     */
+    rotation?: Rotation;
     class?: string;
     style?: string;
   }
@@ -33,6 +37,7 @@
     documentId,
     scale: scaleOverride,
     dpr: dprOverride,
+    rotation: rotationOverride,
     class: propsClass,
     style: propsStyle,
     pageIndex,
@@ -67,6 +72,15 @@
 
   const actualDpr = $derived(dprOverride !== undefined ? dprOverride : window.devicePixelRatio);
 
+  const actualRotation = $derived.by(() => {
+    if (rotationOverride !== undefined) return rotationOverride;
+    const pageRotation =
+      documentState.current?.document?.pages.find((page) => page.index === pageIndex)?.rotation ??
+      Rotation.Degree0;
+    const documentRotation = documentState.current?.rotation ?? Rotation.Degree0;
+    return ((pageRotation + documentRotation) % 4) as Rotation;
+  });
+
   // Effect: reruns when:
   // - documentId changes
   // - actualScale changes
@@ -79,6 +93,7 @@
     const docId = documentId;
     const scale = actualScale;
     const dpr = actualDpr;
+    const rotation = actualRotation;
     const refresh = refreshVersion;
     const page = localPageIndex;
 
@@ -99,6 +114,7 @@
       options: {
         scaleFactor: scale,
         dpr,
+        rotation,
       },
     });
 

packages/plugin-render/src/vue/components/render-layer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { ignore, PdfErrorCode } from '@embedpdf/models';
+import { ignore, PdfErrorCode, Rotation } from '@embedpdf/models';
 import { useDocumentState } from '@embedpdf/core/vue';
 import { useRenderCapability } from '../hooks';
 
@@ -21,6 +21,10 @@ interface RenderLayerProps {
    * Optional device pixel ratio override. If not provided, uses window.devicePixelRatio.
    */
   dpr?: number;
+  /**
+   * Optional rotation override. If not provided, uses page rotation plus document rotation.
+   */
+  rotation?: Rotation;
 }
 
 const props = defineProps<RenderLayerProps>();
@@ -49,17 +53,27 @@ const actualDpr = computed(() => {
   return window.devicePixelRatio;
 });
 
+const actualRotation = computed(() => {
+  if (props.rotation !== undefined) return props.rotation;
+  const pageRotation =
+    documentState.value?.document?.pages.find((page) => page.index === props.pageIndex)?.rotation ??
+    Rotation.Degree0;
+  const documentRotation = documentState.value?.rotation ?? Rotation.Degree0;
+  return ((pageRotation + documentRotation) % 4) as Rotation;
+});
+
 // Render page when dependencies change
 watch(
   [
     () => props.documentId,
     () => props.pageIndex,
+    actualRotation,
     actualScale,
     actualDpr,
     renderProvides,
     refreshVersion,
   ],
-  ([docId, pageIdx, scale, dpr, capability], [prevDocId], onCleanup) => {
+  ([docId, pageIdx, rotation, scale, dpr, capability], [prevDocId], onCleanup) => {
     if (!capability) {
       imageUrl.value = null;
       return;
@@ -87,6 +101,7 @@ watch(
       options: {
         scaleFactor: scale,
         dpr,
+        rotation,
       },
     });