dees-catalog/ts_web/elements/dees-pdf-viewer/component.ts

import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, css, cssManager } from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base.js';
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
import { viewerStyles } from './styles.js';
import { demo as demoFunc } from './demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-pdf-viewer': DeesPdfViewer;
  }
}

@customElement('dees-pdf-viewer')
export class DeesPdfViewer extends DeesElement {
  public static demo = demoFunc;
  public static styles = viewerStyles;

  @property({ type: String })
  public pdfUrl: string = '';

  @property({ type: Number })
  public initialPage: number = 1;

  @property({ type: String })
  public initialZoom: 'auto' | 'page-fit' | 'page-width' | number = 'auto';

  @property({ type: Boolean })
  public showToolbar: boolean = true;

  @property({ type: Boolean })
  public showSidebar: boolean = false;

  @property({ type: Number })
  private currentPage: number = 1;

  @property({ type: Number })
  private totalPages: number = 1;

  @property({ type: Number })
  private currentZoom: number = 1;

  @property({ type: Boolean })
  private loading: boolean = false;

  private pdfDocument: any;
  private pageRendering: boolean = false;
  private pageNumPending: number | null = null;
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;

  constructor() {
    super();
  }

  public render(): TemplateResult {
    return html`
      <div class="pdf-viewer ${this.showSidebar ? 'with-sidebar' : ''}">
        ${this.showToolbar ? html`
          <div class="toolbar">
            <div class="toolbar-group">
              <button
                class="toolbar-button"
                @click=${this.previousPage}
                ?disabled=${this.currentPage <= 1}
              >
                <dees-icon icon="lucide:ChevronLeft"></dees-icon>
              </button>
              <div class="page-info">
                <input
                  type="number"
                  min="1"
                  max="${this.totalPages}"
                  .value=${this.currentPage}
                  @change=${this.handlePageInput}
                  class="page-input"
                />
                <span class="page-separator">/</span>
                <span class="page-total">${this.totalPages}</span>
              </div>
              <button
                class="toolbar-button"
                @click=${this.nextPage}
                ?disabled=${this.currentPage >= this.totalPages}
              >
                <dees-icon icon="lucide:ChevronRight"></dees-icon>
              </button>
            </div>

            <div class="toolbar-group">
              <button
                class="toolbar-button"
                @click=${this.zoomOut}
                ?disabled=${this.currentZoom <= 0.5}
              >
                <dees-icon icon="lucide:ZoomOut"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                @click=${this.resetZoom}
              >
                <span class="zoom-level">${Math.round(this.currentZoom * 100)}%</span>
              </button>
              <button
                class="toolbar-button"
                @click=${this.zoomIn}
                ?disabled=${this.currentZoom >= 3}
              >
                <dees-icon icon="lucide:ZoomIn"></dees-icon>
              </button>
            </div>

            <div class="toolbar-group">
              <button
                class="toolbar-button"
                @click=${this.fitToPage}
                title="Fit to page"
              >
                <dees-icon icon="lucide:Maximize"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                @click=${this.fitToWidth}
                title="Fit to width"
              >
                <dees-icon icon="lucide:ArrowLeftRight"></dees-icon>
              </button>
            </div>

            <div class="toolbar-group toolbar-group--end">
              <button
                class="toolbar-button"
                @click=${this.downloadPdf}
                title="Download"
              >
                <dees-icon icon="lucide:Download"></dees-icon>
              </button>
              <button
                class="toolbar-button"
                @click=${this.printPdf}
                title="Print"
              >
                <dees-icon icon="lucide:Printer"></dees-icon>
              </button>
            </div>
          </div>
        ` : ''}

        <div class="viewer-container">
          ${this.showSidebar ? html`
            <div class="sidebar">
              <div class="sidebar-header">
                <span>Pages</span>
                <button
                  class="sidebar-close"
                  @click=${() => this.showSidebar = false}
                >
                  <dees-icon icon="lucide:X"></dees-icon>
                </button>
              </div>
              <div class="sidebar-content">
                ${Array(this.totalPages).fill(0).map((_, i) => html`
                  <div
                    class="thumbnail ${this.currentPage === i + 1 ? 'active' : ''}"
                    @click=${() => this.goToPage(i + 1)}
                  >
                    <canvas class="thumbnail-canvas" data-page="${i + 1}"></canvas>
                    <span class="thumbnail-number">${i + 1}</span>
                  </div>
                `)}
              </div>
            </div>
          ` : ''}

          <div class="viewer-main">
            ${this.loading ? html`
              <div class="loading-container">
                <div class="loading-spinner"></div>
                <div class="loading-text">Loading PDF...</div>
              </div>
            ` : html`
              <div class="canvas-container">
                <canvas id="pdf-canvas"></canvas>
              </div>
            `}
          </div>
        </div>
      </div>
    `;
  }

  public async connectedCallback() {
    super.connectedCallback();
    await this.updateComplete;
    if (this.pdfUrl) {
      await this.loadPdf();
    }
  }

  public async updated(changedProperties: Map<PropertyKey, unknown>) {
    super.updated(changedProperties);

    if (changedProperties.has('pdfUrl') && this.pdfUrl) {
      await this.loadPdf();
    }
  }

  private async loadPdf() {
    this.loading = true;

    try {
      this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
      this.totalPages = this.pdfDocument.numPages;
      this.currentPage = this.initialPage;

      await this.updateComplete;
      this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
      this.ctx = this.canvas?.getContext('2d') as CanvasRenderingContext2D;

      await this.renderPage(this.currentPage);

      if (this.showSidebar) {
        this.renderThumbnails();
      }
    } catch (error) {
      console.error('Error loading PDF:', error);
    } finally {
      this.loading = false;
    }
  }

  private async renderPage(pageNum: number) {
    if (!this.pdfDocument || !this.canvas || !this.ctx) return;

    this.pageRendering = true;

    try {
      const page = await this.pdfDocument.getPage(pageNum);

      let viewport;
      if (this.initialZoom === 'auto' || this.initialZoom === 'page-fit') {
        const tempViewport = page.getViewport({ scale: 1 });
        const containerWidth = this.canvas.parentElement?.clientWidth || 800;
        const containerHeight = this.canvas.parentElement?.clientHeight || 600;
        const scaleX = containerWidth / tempViewport.width;
        const scaleY = containerHeight / tempViewport.height;
        this.currentZoom = Math.min(scaleX, scaleY);
        viewport = page.getViewport({ scale: this.currentZoom });
      } else if (this.initialZoom === 'page-width') {
        const tempViewport = page.getViewport({ scale: 1 });
        const containerWidth = this.canvas.parentElement?.clientWidth || 800;
        this.currentZoom = containerWidth / tempViewport.width;
        viewport = page.getViewport({ scale: this.currentZoom });
      } else {
        this.currentZoom = typeof this.initialZoom === 'number' ? this.initialZoom : 1;
        viewport = page.getViewport({ scale: this.currentZoom });
      }

      this.canvas.height = viewport.height;
      this.canvas.width = viewport.width;

      const renderContext = {
        canvasContext: this.ctx,
        viewport: viewport,
      };

      await page.render(renderContext).promise;

      this.pageRendering = false;

      if (this.pageNumPending !== null) {
        await this.renderPage(this.pageNumPending);
        this.pageNumPending = null;
      }
    } catch (error) {
      console.error('Error rendering page:', error);
      this.pageRendering = false;
    }
  }

  private queueRenderPage(pageNum: number) {
    if (this.pageRendering) {
      this.pageNumPending = pageNum;
    } else {
      this.renderPage(pageNum);
    }
  }

  private async renderThumbnails() {
    await this.updateComplete;
    const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
    const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)

    for (const canvas of Array.from(thumbnails)) {
      const pageNum = parseInt(canvas.dataset.page || '1');
      const page = await this.pdfDocument.getPage(pageNum);

      // Calculate scale to fit thumbnail width while maintaining aspect ratio
      const initialViewport = page.getViewport({ scale: 1 });
      const scale = thumbnailWidth / initialViewport.width;
      const viewport = page.getViewport({ scale });

      // Set canvas dimensions to actual render size
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      // Also set the display size via style to ensure proper display
      canvas.style.width = `${viewport.width}px`;
      canvas.style.height = `${viewport.height}px`;

      const context = canvas.getContext('2d');
      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };

      await page.render(renderContext).promise;
    }
  }

  private previousPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
      this.queueRenderPage(this.currentPage);
    }
  }

  private nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
      this.queueRenderPage(this.currentPage);
    }
  }

  private goToPage(pageNum: number) {
    if (pageNum >= 1 && pageNum <= this.totalPages) {
      this.currentPage = pageNum;
      this.queueRenderPage(this.currentPage);
    }
  }

  private handlePageInput(e: Event) {
    const input = e.target as HTMLInputElement;
    const pageNum = parseInt(input.value);
    this.goToPage(pageNum);
  }

  private zoomIn() {
    if (this.currentZoom < 3) {
      this.currentZoom = Math.min(3, this.currentZoom * 1.2);
      this.queueRenderPage(this.currentPage);
    }
  }

  private zoomOut() {
    if (this.currentZoom > 0.5) {
      this.currentZoom = Math.max(0.5, this.currentZoom / 1.2);
      this.queueRenderPage(this.currentPage);
    }
  }

  private resetZoom() {
    this.currentZoom = 1;
    this.queueRenderPage(this.currentPage);
  }

  private fitToPage() {
    this.initialZoom = 'page-fit';
    this.queueRenderPage(this.currentPage);
  }

  private fitToWidth() {
    this.initialZoom = 'page-width';
    this.queueRenderPage(this.currentPage);
  }

  private downloadPdf() {
    const link = document.createElement('a');
    link.href = this.pdfUrl;
    link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
    link.click();
  }

  private printPdf() {
    window.open(this.pdfUrl, '_blank')?.print();
  }
}