Commands & shortcuts

import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { 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 { EpdfCommand, standardCommands, withCommands } from '@embedpdf/angular/commands';
import { localEngine } from '@embedpdf/engine';

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()) };
};

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer, EpdfCommand],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withStage(),
      withRender(),
      withCommands({ commands: standardCommands }),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './buttons.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ng-container *epdfDocumentGate="let document; fallback: loading">
      <div class="toolbar">
        <!--
          One button per command: epdfCommand runs it, and keeps disabled, aria-pressed and the
          title in step; the label and the shortcut come from its template reference.
        -->
        @for (id of commands; track id) {
          <button type="button" class="button" [epdfCommand]="id" #command="epdfCommand">
            {{ command.label() }}
            @if (command.shortcut(); as shortcut) {
              <kbd class="shortcut">{{ shortcut }}</kbd>
            }
          </button>
        }
      </div>
      <epdf-stage 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 {
  protected readonly commands = [
    'page:previous',
    'page:next',
    'zoom:out',
    'zoom:in',
    'zoom:fit-width',
    'view:rotate-clockwise',
    'document:download',
  ];
}

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { 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 { withInteraction } from '@embedpdf/angular/interaction';
import {
  EpdfCommands,
  EpdfCommandShortcuts,
  formatShortcut,
  standardCommands,
  withCommands,
} from '@embedpdf/angular/commands';
import { localEngine } from '@embedpdf/engine';

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()) };
};

// One row of the sheet: the key, and what it does. A command that can't run now is greyed out.
@Component({
  selector: 'li[demoShortcutRow]',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    class: 'row',
    '[attr.data-disabled]': "command().enabled ? null : ''",
    '[style.display]': "command().visible ? null : 'none'",
  },
  template: `<kbd class="key">{{ key() }}</kbd><span>{{ command().label }}</span>`,
})
export class ShortcutRow {
  readonly commandId = input.required<string>();
  readonly shortcut = input.required<string>();

  protected readonly command = inject(EpdfCommands).commandOf(() => this.commandId());
  protected readonly key = computed(() => formatShortcut(this.shortcut()));
}

// The sheet lists every shortcut, and shows the last command a key ran.
@Component({
  selector: 'aside[demoKeyboardHelp]',
  imports: [ShortcutRow],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'sheet' },
  template: `
    <p class="status">
      {{ last() ? 'Ran: ' + last() : 'Click the viewer, then press a key, such as → for the next page' }}
    </p>
    <ul class="rows">
      @for (row of shortcuts; track row.commandId + ' ' + row.shortcut) {
        <li demoShortcutRow [commandId]="row.commandId" [shortcut]="row.shortcut"></li>
      }
    </ul>
  `,
})
export class KeyboardHelp {
  private readonly commands = inject(EpdfCommands);
  protected readonly shortcuts = this.commands.listShortcuts();
  protected readonly last = signal<string | null>(null);

  constructor() {
    this.commands.executed$
      .pipe(takeUntilDestroyed())
      .subscribe(({ commandId }) =>
        this.last.set(this.commands.resolveCommand(commandId)?.label ?? commandId),
      );
  }
}

// The keys work while focus is inside this viewer, so they leave the rest of the page alone. A
// click anywhere in it gives it focus: `tabindex="-1"` makes it a place for keys, not a stop in the
// Tab order.
@Component({
  selector: 'demo-root',
  imports: [
    EpdfDocumentGate,
    EpdfStage,
    EpdfPageTemplate,
    EpdfRenderLayer,
    EpdfCommandShortcuts,
    KeyboardHelp,
  ],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withStage(),
      withRender(),
      withInteraction(),
      withCommands({ commands: standardCommands }),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './shortcuts.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div
      *epdfDocumentGate="let document; fallback: loading"
      class="layout"
      tabindex="-1"
      epdfCommandShortcuts
    >
      <aside demoKeyboardHelp></aside>
      <epdf-stage class="stage">
        <ng-template epdfPage>
          <epdf-render-layer />
        </ng-template>
      </epdf-stage>
    </div>

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

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  signal,
  ViewEncapsulation,
} from '@angular/core';
import { 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 { withInteraction } from '@embedpdf/angular/interaction';
import {
  EpdfCommand,
  EpdfCommands,
  standardCommands,
  withCommands,
} from '@embedpdf/angular/commands';
import { localEngine } from '@embedpdf/engine';

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()) };
};

@Component({
  selector: 'div[demoCommandPalette]',
  imports: [EpdfCommand],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'palette' },
  template: `
    <input
      #field
      class="field"
      type="search"
      aria-label="Search commands"
      placeholder="Type a command…"
      [value]="query()"
      (input)="query.set(field.value)"
      (keydown.enter)="runFirst()"
    />
    <ul class="results">
      <!-- A result follows its command, so it greys out the moment the command can't run. -->
      @for (result of results(); track result.id) {
        <li>
          <button type="button" class="result" [epdfCommand]="result.id" #command="epdfCommand">
            <span>{{ command.label() }}</span>
            @if (command.shortcut(); as shortcut) {
              <kbd class="shortcut">{{ shortcut }}</kbd>
            }
          </button>
        </li>
      } @empty {
        <li class="empty">No command matches</li>
      }
    </ul>
  `,
})
export class CommandPalette {
  private readonly commands = inject(EpdfCommands);
  protected readonly query = signal('page');
  protected readonly results = computed(() => this.commands.searchCommands(this.query()));

  // Enter runs the first result that can run now.
  protected runFirst() {
    const first = this.results().find((command) => this.commands.canExecute(command.id));
    if (first) void this.commands.execute(first.id);
  }
}

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer, CommandPalette],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withStage(),
      withRender(),
      withInteraction(),
      withCommands({ commands: standardCommands }),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './palette.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <div *epdfDocumentGate="let document; fallback: loading" class="layout">
      <div demoCommandPalette></div>
      <epdf-stage class="stage">
        <ng-template epdfPage>
          <epdf-render-layer />
        </ng-template>
      </epdf-stage>
    </div>

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

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  ViewEncapsulation,
} from '@angular/core';
import { EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, StageToken, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import {
  EpdfCommand,
  EpdfCommands,
  standardCommands,
  withCommands,
} from '@embedpdf/angular/commands';
import type { CommandDef } from '@embedpdf/angular/commands';
import { localEngine } from '@embedpdf/engine';

// A command of your own: pressed while the pages show two at a time.
const twoPages: CommandDef = {
  id: 'layout:two-pages',
  label: 'Two pages',
  categories: ['layout'],
  active: ({ get }) => get(StageToken).getSettings().spread === 'odd',
  run: ({ get }) => {
    const stage = get(StageToken);
    stage.updateSettings({ spread: stage.getSettings().spread === 'odd' ? 'none' : 'odd' });
  },
};

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()) };
};

// Turning a category off hides its commands wherever they appear.
@Component({
  selector: 'label[demoCategorySwitch]',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'switch' },
  template: `
    <input #box type="checkbox" [checked]="!off()" (change)="toggle(box.checked)" />
    <ng-content />
  `,
})
export class CategorySwitch {
  readonly category = input.required<string>({ alias: 'demoCategorySwitch' });

  private readonly commands = inject(EpdfCommands);
  protected readonly off = computed(() =>
    this.commands.settings().disabledCategories.includes(this.category()),
  );

  protected toggle(on: boolean) {
    if (on) this.commands.enableCategory(this.category());
    else this.commands.disableCategory(this.category());
  }
}

@Component({
  selector: 'div[demoToolbar]',
  imports: [EpdfCommand, CategorySwitch],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'toolbar' },
  template: `
    <div class="buttons">
      @for (id of buttons; track id) {
        <button type="button" class="button" [epdfCommand]="id" #command="epdfCommand">
          {{ command.label() }}
        </button>
      }
    </div>
    <div class="switches">
      <label demoCategorySwitch="zoom">Zoom</label>
      <label demoCategorySwitch="layout">Layout</label>
    </div>
  `,
})
export class Toolbar {
  protected readonly buttons = ['zoom:out', 'zoom:in', 'zoom:fit-page', 'layout:two-pages'];

  constructor() {
    // Run from code: the document opens with its whole first page in view.
    void inject(EpdfCommands).execute('zoom:fit-page');
  }
}

@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer, Toolbar],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: ebook }] },
      withStage(),
      withRender(),
      withCommands({ commands: [...standardCommands, twoPages] }),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './custom.css',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ng-container *epdfDocumentGate="let document; fallback: loading">
      <div demoToolbar></div>
      <epdf-stage 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 {}