Rotate Plugin

The Rotate Plugin allows you to change the orientation of the entire document. It applies a rotation to every page, letting users view content in 90-degree increments.

Installation

This plugin is available as a separate NPM package.


npm install @embedpdf/plugin-rotate


pnpm add @embedpdf/plugin-rotate


yarn add @embedpdf/plugin-rotate


bun add @embedpdf/plugin-rotate

Registration

Import RotatePluginPackage and add it to the plugins array. You can also specify a default rotation to apply when a document is first loaded.


import { createPluginRegistration } from '@embedpdf/core'
import { Rotation } from '@embedpdf/models'
import { RotatePluginPackage } from '@embedpdf/plugin-rotate/svelte'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(DocumentManagerPluginPackage, {
    /* ... */
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Register and configure the rotate plugin
  createPluginRegistration(RotatePluginPackage, {
    defaultRotation: Rotation.Degree90, // Start documents rotated 90° clockwise
  }),
]

Usage

The plugin provides the useRotate store to control the rotation from your UI and a <Rotate /> component to apply the visual transformation to each page.

Use the useRotate store to get the current rotation state and the provides object, which contains methods to change it for a specific document. The rotation state is a number from the Rotation enum (0 = 0°, 1 = 90°, 2 = 180°, 3 = 270°).


<script lang="ts">
import { useRotate } from '@embedpdf/plugin-rotate/svelte';
 
let { documentId }: { documentId: string } = $props();
const rotate = useRotate(() => documentId);
</script>
 
{#if rotate.provides}
  <div class="toolbar">
    <span>Current Rotation: {rotate.rotation * 90}°</span>
    <button onclick={() => rotate.provides?.rotateBackward()}>Rotate Left</button>
    <button onclick={() => rotate.provides?.rotateForward()}>Rotate Right</button>
  </div>
{/if}

Applying the Rotation

For the rotation to be visible, you must wrap your page layers with the <Rotate /> component inside the <Scroller>’s renderPage snippet. This component calculates and applies the necessary CSS transform. It’s important to place it outside the PagePointerProvider to ensure interactions are correctly mapped to the rotated page.


<script lang="ts">
import { Rotate } from '@embedpdf/plugin-rotate/svelte';
import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/svelte';
 
let { documentId }: { documentId: string } = $props();
</script>
 
{#snippet renderPage(page)}
  <Rotate {documentId} pageIndex={page.pageIndex}>
    <PagePointerProvider
      {documentId}
      pageIndex={page.pageIndex}
    >
      <RenderLayer {documentId} pageIndex={page.pageIndex} />
    </PagePointerProvider>
  </Rotate>
{/snippet}
 
<Scroller {documentId} {renderPage} />

Live Example

This is a complete viewer that uses the rotate toolbar and correctly applies the <Rotate /> component to each page.

API Reference

Configuration (`RotatePluginConfig`)

Option	Type	Description
`defaultRotation`	`Rotation`	Sets the initial rotation for loaded documents. The `Rotation` enum can be imported from `@embedpdf/models`. Default: `Rotation.Degree0`

Store: `useRotate(documentId)`

Connects your component to the rotate plugin’s state and functions for a specific document.

Parameters

Parameter	Type	Description
`documentId`	`() => string`	A getter function that returns the document ID to track.

Returns

Property	Type	Description
`rotation`	`Rotation`	The current reactive rotation state (0, 1, 2, or 3).
`provides`	`RotateCapability \| null`	An object with methods to control rotation, or `null` if the plugin is not ready.

`RotateCapability` Methods

Method	Description
`rotateForward()`	Rotates the document 90 degrees clockwise.
`rotateBackward()`	Rotates the document 90 degrees counter-clockwise.
`setRotation(rotation)`	Sets the document to a specific `Rotation` value.
`getRotation()`	Returns the current rotation value.

Component: `<Rotate />`

A wrapper component that applies the correct CSS rotation transform to its children.

Props

Prop	Type	Description
`documentId`	`string`	(Required) The ID of the document.
`pageIndex`	`number`	(Required) The page index.