Organizing pages

import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';
import { EpdfDocument, EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput, PageRef } from '@embedpdf/angular/runtime';
import { EpdfPageView } from '@embedpdf/angular/page-view';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { EpdfPageEdit, withPageEdit } from '@embedpdf/angular/page-edit';
import { localEngine } from '@embedpdf/engine';

const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', 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.
@Component({
  selector: 'demo-page-organizer',
  imports: [EpdfPageView, EpdfRenderLayer],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @let canEdit = pageEdit.canEdit();
    @let selected = pageEdit.selected();
    @let count = selected.length;
    <div class="toolbar">
      <output class="readout">{{ count }} of {{ document.pages().length }} selected</output>
      <span class="spacer"></span>
      <button
        type="button"
        class="button"
        [disabled]="!canEdit || count === 0"
        (click)="pageEdit.rotateBy(selected, -90)"
      >
        ⟲ Rotate left
      </button>
      <button
        type="button"
        class="button"
        [disabled]="!canEdit || count === 0"
        (click)="pageEdit.rotateBy(selected, 90)"
      >
        ⟳ Rotate right
      </button>
      <button
        type="button"
        class="button"
        [disabled]="!canEdit || count === 0"
        (click)="pageEdit.reorder(selected, 'start')"
      >
        Move to front
      </button>
      <!-- A document keeps at least one page. -->
      <button
        type="button"
        class="button danger"
        [disabled]="!canEdit || count === 0 || count === document.pages().length"
        (click)="pageEdit.delete(selected)"
      >
        Delete
      </button>
    </div>
    <ol class="pages">
      @for (page of document.pages(); track page.ref.objectNumber) {
        <li>
          <button
            type="button"
            class="card"
            [attr.aria-pressed]="isSelected(page.ref)"
            (click)="toggle(page.ref)"
          >
            <epdf-page-view [page]="page.ref" [width]="120" class="thumbnail">
              <epdf-render-layer />
            </epdf-page-view>
            <span class="label">
              Page {{ page.index + 1 }}
              @if (page.rotation !== 0) {
                <span class="turn"> · {{ page.rotation }}°</span>
              }
            </span>
          </button>
        </li>
      }
    </ol>
  `,
})
export class PageOrganizer {
  protected readonly pageEdit = inject(EpdfPageEdit);
  protected readonly document = inject(EpdfDocument);

  constructor() {
    // The second and third pages start selected. The selection holds refs: it names the same
    // pages after a reorder, and a deleted page leaves it.
    this.pageEdit.select([1, 2]);
  }

  protected isSelected(page: PageRef): boolean {
    return this.pageEdit.selected().some((ref) => sameRef(ref, page));
  }

  protected toggle(page: PageRef) {
    const selected = this.pageEdit.selected();
    this.pageEdit.select(
      this.isSelected(page) ? selected.filter((ref) => !sameRef(ref, page)) : [...selected, page],
    );
  }
}

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, PageOrganizer],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome }] },
      withRender(),
      withPageEdit(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './organize.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <demo-page-organizer *epdfDocumentGate="let document; fallback: loading" />

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  ViewEncapsulation,
} from '@angular/core';
import { EpdfDocument, EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { EpdfPageEdit, withPageEdit } from '@embedpdf/angular/page-edit';
import { localEngine } from '@embedpdf/engine';

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

// Rotates the page you're on, in the file: the turn is kept when the document is downloaded.
@Component({
  selector: 'demo-rotate-toolbar',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (page(); as page) {
      <div class="toolbar">
        <output class="readout">
          Page {{ stage().currentPageIndex() + 1 }} · {{ page.rotation }}°
        </output>
        <span class="spacer"></span>
        <button
          type="button"
          class="button"
          [disabled]="!pageEdit.canEdit()"
          (click)="pageEdit.rotateBy([page.ref], -90)"
        >
          ⟲ Rotate left
        </button>
        <button
          type="button"
          class="button"
          [disabled]="!pageEdit.canEdit()"
          (click)="pageEdit.rotateBy([page.ref], 90)"
        >
          ⟳ Rotate right
        </button>
        <button
          type="button"
          class="button"
          [disabled]="!pageEdit.canEdit()"
          (click)="everyPageUpright()"
        >
          Every page upright
        </button>
      </div>
    }
  `,
})
export class RotateToolbar {
  readonly stage = input.required<EpdfStage>();
  protected readonly pageEdit = inject(EpdfPageEdit);
  private readonly document = inject(EpdfDocument);
  protected readonly page = computed(
    () => this.document.pages()[this.stage().currentPageIndex()] ?? null,
  );

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

  protected everyPageUpright() {
    void this.pageEdit.setRotation(
      this.document.pages().map((each) => each.ref),
      0,
    );
  }
}

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer, RotateToolbar],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome }] },
      withStage(),
      withRender(),
      withPageEdit(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './rotate.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ng-container *epdfDocumentGate="let document; fallback: loading">
      <demo-rotate-toolbar [stage]="stage" />
      <epdf-stage #stage="epdfStage" class="stage">
        <ng-template epdfPage>
          <epdf-render-layer />
        </ng-template>
      </epdf-stage>
    </ng-container>

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import { EpdfDocument, EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput, PageInfo, PageRef } from '@embedpdf/angular/runtime';
import { EpdfPageView } from '@embedpdf/angular/page-view';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { EpdfPageEdit, withPageEdit, type PagePosition } from '@embedpdf/angular/page-edit';
import { localEngine } from '@embedpdf/engine';

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

// Pick a page, then move it. Each button uses another position.
@Component({
  selector: 'demo-page-order',
  imports: [EpdfPageView, EpdfRenderLayer],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @let canEdit = pageEdit.canEdit();
    <div class="toolbar">
      <output class="readout">
        @if (page(); as page) {
          Page {{ page.index + 1 }} selected
        } @else {
          Pick a page
        }
      </output>
      <span class="spacer"></span>
      <button
        type="button"
        class="button"
        [disabled]="!canEdit || !before()"
        (click)="moveTo('start')"
      >
        ⇤ To the front
      </button>
      <button
        type="button"
        class="button"
        [disabled]="!canEdit || !before()"
        (click)="moveBefore(before())"
      >
        ← Earlier
      </button>
      <button
        type="button"
        class="button"
        [disabled]="!canEdit || !after()"
        (click)="moveAfter(after())"
      >
        Later →
      </button>
      <button
        type="button"
        class="button"
        [disabled]="!canEdit || !after()"
        (click)="moveTo('end')"
      >
        To the back ⇥
      </button>
    </div>
    <ol class="strip">
      @for (each of document.pages(); track each.ref.objectNumber) {
        <li>
          <button
            type="button"
            class="card"
            [attr.aria-pressed]="each.ref.objectNumber === selected()?.objectNumber"
            (click)="selected.set(each.ref)"
          >
            <epdf-page-view [page]="each.ref" [width]="110" class="thumbnail">
              <epdf-render-layer />
            </epdf-page-view>
            <span class="label">{{ each.index + 1 }}</span>
          </button>
        </li>
      }
    </ol>
  `,
})
export class PageOrder {
  protected readonly pageEdit = inject(EpdfPageEdit);
  protected readonly document = inject(EpdfDocument);
  // The last page starts selected. Its ref names it wherever it moves.
  protected readonly selected = signal<PageRef | null>(this.document.pages().at(-1)?.ref ?? null);

  protected readonly page = computed(
    () =>
      this.document
        .pages()
        .find((each) => each.ref.objectNumber === this.selected()?.objectNumber) ?? null,
  );
  protected readonly before = computed(() => {
    const page = this.page();
    return (page && this.document.pages()[page.index - 1]) ?? null;
  });
  protected readonly after = computed(() => {
    const page = this.page();
    return (page && this.document.pages()[page.index + 1]) ?? null;
  });

  protected moveTo(position: PagePosition) {
    const page = this.page();
    if (page) void this.pageEdit.reorder([page.ref], position);
  }

  protected moveBefore(other: PageInfo | null) {
    if (other) this.moveTo({ before: other.ref });
  }

  protected moveAfter(other: PageInfo | null) {
    if (other) this.moveTo({ after: other.ref });
  }
}

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, PageOrder],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome }] },
      withRender(),
      withPageEdit(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './reorder.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <demo-page-order *epdfDocumentGate="let document; fallback: loading" />

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  input,
  signal,
  untracked,
  ViewEncapsulation,
} from '@angular/core';
import { EpdfDocument, EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput, PageRef } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { EpdfPageEdit, withPageEdit } from '@embedpdf/angular/page-edit';
import { localEngine } from '@embedpdf/engine';

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

/** Another PDF's bytes, to insert pages from. */
const otherPdf = async () => (await fetch('/pdfs/welcome.pdf')).arrayBuffer();

// Inserts next to the page you're on, then goes to the first new page.
@Component({
  selector: 'demo-insert-toolbar',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (page(); as page) {
      <div class="toolbar">
        <button
          type="button"
          class="button"
          [disabled]="!pageEdit.canEdit()"
          (click)="insertBlankAfter(page.ref)"
        >
          + Blank page after
        </button>
        <button
          type="button"
          class="button"
          [disabled]="!pageEdit.canEdit()"
          (click)="duplicate(page.ref)"
        >
          Duplicate page
        </button>
        <button
          type="button"
          class="button"
          [disabled]="!pageEdit.canEdit()"
          (click)="insertFromOtherPdf(page.ref)"
        >
          + Pages 1 and 3 of another PDF
        </button>
        <span class="spacer"></span>
        <output class="readout">{{ readout() }}</output>
      </div>
    }
  `,
})
export class InsertToolbar {
  readonly stage = input.required<EpdfStage>();
  protected readonly pageEdit = inject(EpdfPageEdit);
  private readonly document = inject(EpdfDocument);
  protected readonly page = computed(
    () => this.document.pages()[this.stage().currentPageIndex()] ?? null,
  );
  private readonly added = signal<readonly PageRef[]>([]);
  protected readonly readout = computed(() => {
    const pages = this.document.pages();
    const positions = this.added()
      .map((ref) => pages.findIndex((each) => each.ref.objectNumber === ref.objectNumber) + 1)
      .filter((position) => position > 0);
    return positions.length > 0
      ? `New: page ${positions.join(' and ')} of ${pages.length}`
      : `${pages.length} pages`;
  });

  constructor() {
    // A blank page after the cover, once, on load.
    const insertOnLoad = effect(() => {
      const cover = this.document.pages()[0];
      if (!cover) return;
      insertOnLoad.destroy();
      untracked(() => this.insertBlankAfter(cover.ref));
    });
  }

  protected async insertBlankAfter(page: PageRef) {
    this.show(await this.pageEdit.insertBlank({ position: { after: page } }));
  }

  protected async duplicate(page: PageRef) {
    this.show(await this.pageEdit.duplicate([page]));
  }

  protected async insertFromOtherPdf(page: PageRef) {
    this.show(
      await this.pageEdit.insertFromBytes(await otherPdf(), {
        pageIndexes: [0, 2],
        position: { after: page },
      }),
    );
  }

  // Every insert resolves { pages }: the new pages, to go to or select.
  private show(result: { pages: readonly PageRef[] }) {
    this.added.set(result.pages);
    this.stage().goToPage(result.pages[0]);
  }
}

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer, InsertToolbar],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome }] },
      withStage(),
      withRender(),
      withPageEdit(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './insert.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ng-container *epdfDocumentGate="let document; fallback: loading">
      <demo-insert-toolbar [stage]="stage" />
      <epdf-stage #stage="epdfStage" class="stage">
        <ng-template epdfPage>
          <epdf-render-layer />
        </ng-template>
      </epdf-stage>
    </ng-container>

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import {
  EpdfDocument,
  EpdfDocumentGate,
  provideEmbedPdf,
  saveFile,
} from '@embedpdf/angular/runtime';
import type { OpenInput, PageRef } from '@embedpdf/angular/runtime';
import { EpdfPageView } from '@embedpdf/angular/page-view';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { EpdfPageEdit, withPageEdit } from '@embedpdf/angular/page-edit';
import { localEngine } from '@embedpdf/engine';

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

// Tick pages, then download them as a PDF of their own. This document doesn't change.
@Component({
  selector: 'demo-extract-pages',
  imports: [EpdfPageView, EpdfRenderLayer],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="toolbar">
      <button
        type="button"
        class="button primary"
        [disabled]="chosen().length === 0 || !pageEdit.canExtract()"
        (click)="download()"
      >
        Download {{ chosen().length === 1 ? '1 page' : chosen().length + ' pages' }} as a PDF
      </button>
      <output class="readout">{{ saved() }}</output>
    </div>
    <ol class="grid">
      @for (page of document.pages(); track page.ref.objectNumber) {
        <li>
          <label class="card" [attr.data-ticked]="isTicked(page.ref)">
            <epdf-page-view [page]="page.ref" [width]="110" class="thumbnail">
              <epdf-render-layer />
            </epdf-page-view>
            <span class="label">
              <input type="checkbox" [checked]="isTicked(page.ref)" (change)="toggle(page.ref)" />
              Page {{ page.index + 1 }}
            </span>
          </label>
        </li>
      }
    </ol>
  `,
})
export class ExtractPages {
  protected readonly pageEdit = inject(EpdfPageEdit);
  protected readonly document = inject(EpdfDocument);
  // The middle two pages start ticked.
  private readonly ticked = signal<PageRef[]>(
    this.document
      .pages()
      .slice(1, 3)
      .map((page) => page.ref),
  );
  protected readonly saved = signal<string | null>(null);

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

  protected isTicked(ref: PageRef): boolean {
    return this.ticked().some((each) => each.objectNumber === ref.objectNumber);
  }

  protected toggle(ref: PageRef) {
    this.ticked.update((ticked) =>
      this.isTicked(ref)
        ? ticked.filter((each) => each.objectNumber !== ref.objectNumber)
        : [...ticked, ref],
    );
  }

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

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, ExtractPages],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome }] },
      withRender(),
      withPageEdit(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './extract.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <demo-extract-pages *epdfDocumentGate="let document; fallback: loading" />

    <ng-template #loading><p class="loading">Loading…</p></ng-template>
  `,
})
export class App {}