Organizing pages

import { useState } from 'react';
import { Viewer, DocumentGate, usePageList } from '@embedpdf/react/runtime';
import type { OpenInput, PageRef } from '@embedpdf/react/runtime';
import { PageView } from '@embedpdf/react/page-view';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { pageEditPlugin, usePageEdit } from '@embedpdf/react/page-edit';
import { localEngine } from '@embedpdf/engine';

import './organize.css';

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

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

const sameRef = (left: PageRef, right: PageRef) => left.objectNumber === right.objectNumber;

// Every page as a card. Click cards to select them; the toolbar edits every selected page at once.
function PageOrganizer() {
  const pageEdit = usePageEdit();
  const pages = usePageList();
  const canEdit = pageEdit.canEdit();
  // The second and third pages start selected. Refs, not indexes: they still name the
  // same pages after a reorder.
  const [selected, setSelected] = useState(() => pages.slice(1, 3).map((page) => page.ref));

  const isSelected = (page: PageRef) => selected.some((ref) => sameRef(ref, page));
  const toggle = (page: PageRef) =>
    setSelected(
      isSelected(page) ? selected.filter((ref) => !sameRef(ref, page)) : [...selected, page],
    );
  const count = selected.length;

  return (
    <>
      <div className="toolbar">
        <output className="readout">
          {count} of {pages.length} selected
        </output>
        <span className="spacer" />
        <button
          type="button"
          className="button"
          disabled={!canEdit || count === 0}
          onClick={() => pageEdit.rotateBy(selected, -90)}
        >
          ⟲ Rotate left
        </button>
        <button
          type="button"
          className="button"
          disabled={!canEdit || count === 0}
          onClick={() => pageEdit.rotateBy(selected, 90)}
        >
          ⟳ Rotate right
        </button>
        <button
          type="button"
          className="button"
          disabled={!canEdit || count === 0}
          onClick={() => pageEdit.reorder(selected, 'start')}
        >
          Move to front
        </button>
        <button
          type="button"
          className="button danger"
          // A document keeps at least one page.
          disabled={!canEdit || count === 0 || count === pages.length}
          onClick={async () => {
            await pageEdit.delete(selected);
            setSelected([]);
          }}
        >
          Delete
        </button>
      </div>
      <ol className="pages">
        {pages.map((page) => (
          <li key={page.ref.objectNumber}>
            <button
              type="button"
              className="card"
              aria-pressed={isSelected(page.ref)}
              onClick={() => toggle(page.ref)}
            >
              <PageView page={page.ref} width={120} className="thumbnail">
                <RenderLayer />
              </PageView>
              <span className="label">
                Page {page.index + 1}
                {page.rotation !== 0 && <span className="turn"> · {page.rotation}°</span>}
              </span>
            </button>
          </li>
        ))}
      </ol>
    </>
  );
}

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

import { useEffect } from 'react';
import { Viewer, DocumentGate, usePageList } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { pageEditPlugin, usePageEdit } from '@embedpdf/react/page-edit';
import { localEngine } from '@embedpdf/engine';

import './rotate.css';

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

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

// Rotates the page you're on, in the file: the turn is kept when the document is downloaded.
function RotateToolbar() {
  const pageEdit = usePageEdit();
  const pages = usePageList();
  const currentPageIndex = useStageState((state) => state.currentPageIndex);
  const page = pages[currentPageIndex];

  // The first page starts a quarter turn clockwise. setRotation() sets the same rotation
  // however often it runs; rotateBy() would turn it again.
  useEffect(() => {
    void pageEdit.setRotation([0], 90);
  }, [pageEdit]);

  if (!page) return null;
  const canEdit = pageEdit.canEdit();
  return (
    <div className="toolbar">
      <output className="readout">
        Page {currentPageIndex + 1} · {page.rotation}°
      </output>
      <span className="spacer" />
      <button
        type="button"
        className="button"
        disabled={!canEdit}
        onClick={() => pageEdit.rotateBy([page.ref], -90)}
      >
        ⟲ Rotate left
      </button>
      <button
        type="button"
        className="button"
        disabled={!canEdit}
        onClick={() => pageEdit.rotateBy([page.ref], 90)}
      >
        ⟳ Rotate right
      </button>
      <button
        type="button"
        className="button"
        disabled={!canEdit}
        onClick={() =>
          pageEdit.setRotation(
            pages.map((each) => each.ref),
            0,
          )
        }
      >
        Every page upright
      </button>
    </div>
  );
}

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

import { useState } from 'react';
import { Viewer, DocumentGate, usePageList } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { PageView } from '@embedpdf/react/page-view';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { pageEditPlugin, usePageEdit } from '@embedpdf/react/page-edit';
import { localEngine } from '@embedpdf/engine';

import './reorder.css';

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

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

// Pick a page, then move it. Each button uses another placement.
function PageOrder() {
  const pageEdit = usePageEdit();
  const pages = usePageList();
  // The last page starts selected. Its ref names it wherever it moves.
  const [selected, setSelected] = useState(() => pages[pages.length - 1]?.ref ?? null);

  const page = pages.find((each) => each.ref.objectNumber === selected?.objectNumber);
  const before = page && pages[page.index - 1];
  const after = page && pages[page.index + 1];
  const canEdit = pageEdit.canEdit();

  return (
    <>
      <div className="toolbar">
        <output className="readout">
          {page ? `Page ${page.index + 1} selected` : 'Pick a page'}
        </output>
        <span className="spacer" />
        <button
          type="button"
          className="button"
          disabled={!canEdit || !before}
          onClick={() => page && pageEdit.reorder([page.ref], 'start')}
        >
          ⇤ To the front
        </button>
        <button
          type="button"
          className="button"
          disabled={!canEdit || !before}
          onClick={() => page && before && pageEdit.reorder([page.ref], { before: before.ref })}
        >
          ← Earlier
        </button>
        <button
          type="button"
          className="button"
          disabled={!canEdit || !after}
          onClick={() => page && after && pageEdit.reorder([page.ref], { after: after.ref })}
        >
          Later →
        </button>
        <button
          type="button"
          className="button"
          disabled={!canEdit || !after}
          onClick={() => page && pageEdit.reorder([page.ref], 'end')}
        >
          To the back ⇥
        </button>
      </div>
      <ol className="strip">
        {pages.map((each) => (
          <li key={each.ref.objectNumber}>
            <button
              type="button"
              className="card"
              aria-pressed={each.ref.objectNumber === selected?.objectNumber}
              onClick={() => setSelected(each.ref)}
            >
              <PageView page={each.ref} width={110} className="thumbnail">
                <RenderLayer />
              </PageView>
              <span className="label">{each.index + 1}</span>
            </button>
          </li>
        ))}
      </ol>
    </>
  );
}

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

import { useEffect, useRef, useState } from 'react';
import { Viewer, DocumentGate, usePageList } from '@embedpdf/react/runtime';
import type { OpenInput, PageRef } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { pageEditPlugin, usePageEdit } from '@embedpdf/react/page-edit';
import { localEngine } from '@embedpdf/engine';

import './insert.css';

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

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

/** Another PDF's bytes, to insert pages from. */
const otherPdf = async () => (await fetch('https://snippet.embedpdf.com/ebook.pdf')).arrayBuffer();

// Inserts next to the page you're on, then goes to the first new page.
function InsertToolbar() {
  const pageEdit = usePageEdit();
  const stage = useStage();
  const pages = usePageList();
  const currentPageIndex = useStageState((state) => state.currentPageIndex);
  const page = pages[currentPageIndex];
  const [added, setAdded] = useState<readonly PageRef[]>([]);

  // Every insert resolves { pages }: the new pages, to go to or select.
  const show = (result: { pages: readonly PageRef[] }) => {
    setAdded(result.pages);
    stage.goToPage(result.pages[0]);
  };

  // A blank page after the cover, once, on load.
  const inserted = useRef(false);
  useEffect(() => {
    if (inserted.current || !pages[0]) return;
    inserted.current = true;
    void pageEdit.insertBlank({ placement: { after: pages[0].ref } }).then(show);
  });

  if (!page) return null;
  const canEdit = pageEdit.canEdit();
  const positions = added
    .map((ref) => pages.findIndex((each) => each.ref.objectNumber === ref.objectNumber) + 1)
    .filter((position) => position > 0);

  return (
    <div className="toolbar">
      <button
        type="button"
        className="button"
        disabled={!canEdit}
        onClick={() => pageEdit.insertBlank({ placement: { after: page.ref } }).then(show)}
      >
        + Blank page after
      </button>
      <button
        type="button"
        className="button"
        disabled={!canEdit || !pageEdit.canExtract()}
        onClick={() => pageEdit.duplicate([page.ref]).then(show)}
      >
        Duplicate page
      </button>
      <button
        type="button"
        className="button"
        disabled={!canEdit}
        onClick={async () =>
          show(
            await pageEdit.insertFromBytes(await otherPdf(), {
              pageIndexes: [0, 2],
              placement: { after: page.ref },
            }),
          )
        }
      >
        + Pages 1 and 3 of another PDF
      </button>
      <span className="spacer" />
      <output className="readout">
        {positions.length > 0
          ? `New: page ${positions.join(' and ')} of ${pages.length}`
          : `${pages.length} pages`}
      </output>
    </div>
  );
}

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

import { useState } from 'react';
import { Viewer, DocumentGate, saveFile, usePageList } from '@embedpdf/react/runtime';
import type { OpenInput, PageRef } from '@embedpdf/react/runtime';
import { PageView } from '@embedpdf/react/page-view';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { pageEditPlugin, usePageEdit } from '@embedpdf/react/page-edit';
import { localEngine } from '@embedpdf/engine';

import './extract.css';

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

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

// Tick pages, then download them as a PDF of their own. This document doesn't change.
function ExtractPages() {
  const pageEdit = usePageEdit();
  const pages = usePageList();
  // The middle two pages start ticked.
  const [ticked, setTicked] = useState(() => pages.slice(1, 3).map((page) => page.ref));
  const [saved, setSaved] = useState<string | null>(null);

  const isTicked = (ref: PageRef) => ticked.some((each) => each.objectNumber === ref.objectNumber);
  const toggle = (ref: PageRef) =>
    setTicked(
      isTicked(ref)
        ? ticked.filter((each) => each.objectNumber !== ref.objectNumber)
        : [...ticked, ref],
    );

  // In document order, whatever order they were ticked in.
  const chosen = pages.filter((page) => isTicked(page.ref)).map((page) => page.ref);

  const download = async () => {
    const bytes = await pageEdit.extract(chosen);
    saveFile(bytes, 'pages.pdf');
    setSaved(`pages.pdf · ${chosen.length} pages · ${Math.round(bytes.byteLength / 1024)} KB`);
  };

  return (
    <>
      <div className="toolbar">
        <button
          type="button"
          className="button primary"
          disabled={chosen.length === 0 || !pageEdit.canExtract()}
          onClick={download}
        >
          Download {chosen.length === 1 ? '1 page' : `${chosen.length} pages`} as a PDF
        </button>
        <output className="readout">{saved}</output>
      </div>
      <ol className="grid">
        {pages.map((page) => (
          <li key={page.ref.objectNumber}>
            <label className="card" data-ticked={isTicked(page.ref)}>
              <PageView page={page.ref} width={110} className="thumbnail">
                <RenderLayer />
              </PageView>
              <span className="label">
                <input
                  type="checkbox"
                  checked={isTicked(page.ref)}
                  onChange={() => toggle(page.ref)}
                />
                Page {page.index + 1}
              </span>
            </label>
          </li>
        ))}
      </ol>
    </>
  );
}

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