Zoom Plugin

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
// ... other imports
import {
  ZoomPluginPackage,
  ZoomMode,
} from '@embedpdf/plugin-zoom/react'
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/react'
 
const plugins = [
  // ... other essential plugins like Loader, Viewport, etc.
  createPluginRegistration(LoaderPluginPackage, {
    /* ... */
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Register the interaction manager (required for marquee zoom)
  createPluginRegistration(InteractionManagerPluginPackage),
 
  // Register and configure the zoom plugin
  createPluginRegistration(ZoomPluginPackage, {
    // Set the initial zoom level when a document loads
    defaultZoomLevel: ZoomMode.FitPage,
  }),
]
 
// ... rest of your component

import { useZoom } from '@embedpdf/plugin-zoom/react'
 
export const ZoomToolbar = () => {
  const { provides: zoom, state } = useZoom()
 
  if (!zoom) {
    return null
  }
 
  return (
    <div className="toolbar">
      {/* Display current zoom */}
      <span>{Math.round(state.currentZoomLevel * 100)}%</span>
 
      {/* Buttons to control zoom */}
      <button onClick={zoom.zoomOut}>-</button>
      <button onClick={zoom.zoomIn}>+</button>
      <button onClick={() => zoom.requestZoom(1.0)}>Reset</button>
 
      {/* Button to toggle area zoom mode */}
      <button onClick={zoom.toggleMarqueeZoom}>Area Zoom</button>
    </div>
  )
}

import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/react';
 
// Inside your main PDFViewer component
<Scroller
  renderPage={({ width, height, pageIndex, scale, rotation }) => (
    <PagePointerProvider
      pageIndex={pageIndex}
      pageWidth={width}
      pageHeight={height}
      rotation={rotation}
      scale={scale}
    >
      {/* Base render layer - renders a low resolution version of the entire page for immediate display */}
      <RenderLayer pageIndex={pageIndex} scale={1} />
 
      {/* Tiling layer - renders high resolution tiles only for the visible area, scales with zoom level */}
      <TilingLayer pageIndex={pageIndex} scale={scale} />
 
      {/* Marquee layer for area zoom */}
      <MarqueeZoom pageIndex={pageIndex} scale={scale} />
    </PagePointerProvider>
  )}
/>