Rendering

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './basic.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: welcome }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './deep-zoom.css';

const engine = localEngine();
// Open at 250%: past what a whole-page picture shows sharply, so tiles carry it.
const plugins = [stagePlugin({ zoom: { level: 2.5 } }), renderPlugin()];

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function ZoomBar() {
  const stage = useStage();
  const zoomLevel = useStageState((state) => state.zoomLevel);

  return (
    <div className="toolbar">
      <button
        type="button"
        className="button"
        aria-label="Zoom out"
        onClick={() => stage.zoomOut()}
      >
        −
      </button>
      <output className="readout">{Math.round(zoomLevel * 100)}%</output>
      <button type="button" className="button" aria-label="Zoom in" onClick={() => stage.zoomIn()}>
        +
      </button>
      <button type="button" className="button push" onClick={() => stage.fitWidth()}>
        Fit width
      </button>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: welcome }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <ZoomBar />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin, useRender, useRenderSettings } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './budget.css';

const engine = localEngine();
// Zoomed in, where the budget and the tiles show.
const plugins = [stagePlugin({ zoom: { level: 2 } }), renderPlugin()];

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

const BUDGETS = [320, 640, 1280];

function BudgetControls() {
  const render = useRender();
  const stage = useStage();
  const maxWidth = useRenderSettings((settings) => settings.fullPage.maxWidth);
  const tiles = useRenderSettings((settings) => settings.tiles !== false);
  const zoomLevel = useStageState((state) => state.zoomLevel);

  return (
    <div className="toolbar">
      <span className="label">Budget</span>
      <div className="segmented" role="group" aria-label="Whole-page budget">
        {BUDGETS.map((width) => (
          <button
            key={width}
            type="button"
            aria-pressed={width === maxWidth}
            onClick={() => render.updateSettings({ fullPage: { maxWidth: width } })}
          >
            {width} px
          </button>
        ))}
      </div>
      <span className="label">Tiles</span>
      <div className="segmented" role="group" aria-label="Tiles">
        <button
          type="button"
          aria-pressed={tiles}
          onClick={() => render.updateSettings({ tiles: { size: 512 } })}
        >
          On
        </button>
        <button
          type="button"
          aria-pressed={!tiles}
          onClick={() => render.updateSettings({ tiles: false })}
        >
          Off
        </button>
      </div>
      <div className="zoom">
        <button
          type="button"
          className="button"
          aria-label="Zoom out"
          onClick={() => stage.zoomOut()}
        >
          −
        </button>
        <output className="readout">{Math.round(zoomLevel * 100)}%</output>
        <button
          type="button"
          className="button"
          aria-label="Zoom in"
          onClick={() => stage.zoomIn()}
        >
          +
        </button>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: welcome }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <BudgetControls />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { interactionPlugin } from '@embedpdf/react/interaction';
import { AnnotationLayer, annotationPlugin } from '@embedpdf/react/annotation';
import { localEngine } from '@embedpdf/engine';

import './annotations.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin(), interactionPlugin(), annotationPlugin()];

const report = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/report.pdf');
  return { kind: 'bytes', id: 'report', bytes: new Uint8Array(await response.arrayBuffer()) };
};

type Painter = 'picture' | 'layer';

export default function App() {
  const [painter, setPainter] = useState<Painter>('picture');

  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: report }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <div className="toolbar">
          <div className="segmented" role="group" aria-label="Who draws the annotations">
            <button
              type="button"
              aria-pressed={painter === 'picture'}
              onClick={() => setPainter('picture')}
            >
              In the page picture
            </button>
            <button
              type="button"
              aria-pressed={painter === 'layer'}
              onClick={() => setPainter('layer')}
            >
              Drawn by the annotation layer
            </button>
          </div>
          <p className="hint">
            {painter === 'picture'
              ? 'Part of the picture: it can’t be picked up.'
              : 'Left out of the picture: click it, then drag it.'}
          </p>
        </div>
        <Stage className="stage">
          {() =>
            painter === 'picture' ? (
              <RenderLayer />
            ) : (
              <>
                <RenderLayer />
                <AnnotationLayer />
              </>
            )
          }
        </Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useEffect, useState } from 'react';
import { Viewer, DocumentGate, usePageList } from '@embedpdf/react/runtime';
import type { OpenInput, PageRef } from '@embedpdf/react/runtime';
import { renderPlugin, useRender } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './render-page.css';

const engine = localEngine();
// No Stage: these pictures are plain images, rendered on demand.
const plugins = [renderPlugin()];

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

interface Thumbnail {
  page: PageRef;
  url: string;
}

function PageImages() {
  const render = useRender();
  const pages = usePageList();
  const [thumbnails, setThumbnails] = useState<Thumbnail[]>([]);
  const [selected, setSelected] = useState(0);
  const [preview, setPreview] = useState<string | null>(null);

  // A small picture of every page, a few rendered at a time.
  useEffect(() => {
    const controller = new AbortController();
    const revokes: (() => void)[] = [];
    (async () => {
      const { applied } = await render.renderPages(
        pages.map((page) => page.ref),
        { width: 120, signal: controller.signal },
      );
      const ready = await Promise.all(
        applied.map(async ({ page, image }) => {
          const { url, revoke } = await image.objectUrl();
          revokes.push(revoke);
          return { page, url };
        }),
      );
      if (!controller.signal.aborted) setThumbnails(ready);
    })().catch(() => {
      // cancelled: the document closed or the list changed
    });
    return () => {
      controller.abort();
      revokes.forEach((revoke) => revoke());
    };
  }, [render, pages]);

  // The chosen page, exactly 640 pixels wide.
  useEffect(() => {
    const controller = new AbortController();
    let revoke: (() => void) | undefined;
    (async () => {
      const image = await render.renderPage(selected, { width: 640, signal: controller.signal });
      const object = await image.objectUrl();
      if (controller.signal.aborted) {
        object.revoke();
        return;
      }
      revoke = object.revoke;
      setPreview(object.url);
    })().catch(() => {
      // cancelled: another page was picked
    });
    return () => {
      controller.abort();
      revoke?.();
    };
  }, [render, selected]);

  return (
    <div className="images">
      <div className="strip" role="listbox" aria-label="Pages">
        {thumbnails.map(({ page, url }, index) => (
          <button
            key={page.objectNumber}
            type="button"
            role="option"
            className="thumbnail"
            aria-selected={index === selected}
            onClick={() => setSelected(index)}
          >
            <img src={url} alt={`Page ${index + 1}`} />
            <span>{index + 1}</span>
          </button>
        ))}
      </div>
      <div className="preview">
        {preview ? <img src={preview} alt={`Page ${selected + 1}, 640 pixels wide`} /> : null}
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: welcome }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <PageImages />
      </DocumentGate>
    </Viewer>
  );
}

import { useEffect, useState } from 'react';
import { Viewer, DocumentGate, copyImage, saveFile } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, SnapshotLayer, renderPlugin, useSnapshot } from '@embedpdf/react/render';
import {
  interactionPlugin,
  useInteraction,
  useInteractionState,
} from '@embedpdf/react/interaction';
import { localEngine } from '@embedpdf/engine';

import './snapshot.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin(), interactionPlugin({ defaultTool: 'pan' })];

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function SnapshotToolbar() {
  const interaction = useInteraction();
  const { activeToolId } = useInteractionState();
  const snapshot = useSnapshot();
  const [said, say] = useState('');
  // A new snapshot, or none: nothing copied yet.
  useEffect(() => say(''), [snapshot]);

  const copy = () => {
    if (!snapshot) return;
    // In the click itself: the picture goes to the clipboard as it comes.
    copyImage(snapshot.image).then(
      () => say('Copied: paste it anywhere'),
      () => say('This browser didn’t allow the copy'),
    );
  };
  const save = async () => {
    if (!snapshot) return;
    saveFile(await (await snapshot.image).blob(), 'snapshot.png');
  };

  return (
    <div className="toolbar">
      <div className="segmented" role="group" aria-label="Tool">
        <button
          type="button"
          className="segment"
          aria-pressed={activeToolId === 'pan'}
          onClick={() => interaction.activateTool('pan')}
        >
          Hand
        </button>
        <button
          type="button"
          className="segment"
          aria-pressed={activeToolId === 'snapshot'}
          onClick={() => interaction.activateTool('snapshot')}
        >
          Snapshot
        </button>
      </div>
      <div className="actions">
        <button type="button" className="button" disabled={!snapshot} onClick={copy}>
          Copy
        </button>
        <button type="button" className="button" disabled={!snapshot} onClick={save}>
          Save
        </button>
      </div>
      <output className="readout">
        {said || (activeToolId === 'snapshot' && !snapshot ? 'Drag a box on a page' : '')}
      </output>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: welcome }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <SnapshotToolbar />
        <Stage className="stage">
          {() => (
            <>
              <RenderLayer />
              <SnapshotLayer />
            </>
          )}
        </Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useEffect, useRef, useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin, useRender, useRenderEvent } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './redraws.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

interface Entry {
  id: number;
  text: string;
}

function Redraws() {
  const render = useRender();
  const currentPage = useStageState((state) => state.currentPage);
  const [entries, setEntries] = useState<Entry[]>([]);
  const count = useRef(0);

  useRenderEvent(
    (render) => render.onInvalidated,
    ({ pages, scope, origin }) => {
      const what = `${pages.length === 1 ? '1 page' : `${pages.length} pages`} · ${scope}`;
      const from = origin ? `an edit (${origin.kind})` : 'your code';
      const entry = { id: count.current++, text: `${what} · from ${from}` };
      setEntries((current) => [entry, ...current].slice(0, 4));
    },
  );

  // Redraw the first page on load, so there's something in the list.
  useEffect(() => render.invalidate({ pages: [0] }), [render]);

  // Changes whenever this page's pixels do: key your own long-lived renders on it.
  const epoch = currentPage ? render.getRenderEpoch(currentPage) : 0;

  return (
    <div className="panel">
      <div className="toolbar">
        <button
          type="button"
          className="button"
          disabled={!currentPage}
          onClick={() => currentPage && render.invalidate({ pages: [currentPage] })}
        >
          Redraw this page
        </button>
        <button
          type="button"
          className="button"
          disabled={!currentPage}
          onClick={() =>
            currentPage && render.invalidate({ pages: [currentPage], scope: 'annotations' })
          }
        >
          Only its annotations
        </button>
        <output className="badge">
          render epoch <strong>{epoch}</strong>
        </output>
      </div>
      <ol className="log" aria-live="polite">
        {entries.map((entry) => (
          <li key={entry.id} className="entry">
            <code>onInvalidated</code> {entry.text}
          </li>
        ))}
      </ol>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: welcome }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <Redraws />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}