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

import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, } from '@design.estate/dees-element';

import { Deferred } from '@push.rocks/smartpromise';
import { DeesContextmenu } from '../dees-contextmenu.js';
import '../dees-icon.js';

// import type pdfjsTypes from 'pdfjs-dist';

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

/**
 * @deprecated Use DeesPdfViewer or DeesPdfPreview instead
 * - DeesPdfViewer: Full-featured PDF viewing with controls, navigation, zoom
 * - DeesPdfPreview: Lightweight, performance-optimized preview for grids
 */
@customElement('dees-pdf')
export class DeesPdf extends DeesElement {
  // DEMO
  public static demo = () => html` <dees-pdf></dees-pdf> `;

  // INSTANCE

  @property()
  public pdfUrl: string =
    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';



  constructor() {
    super();

    // you have access to all kinds of things through this.
    // this.setAttribute('gotIt','true');
  }

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          font-family: 'Geist Sans', sans-serif;
          display: block;
          box-sizing: border-box;
          max-width: 800px;
        }
        :host([hidden]) {
          display: none;
        }

        #pdfcanvas {
          box-shadow: 0px 0px 5px #ccc;
          width: 100%;
          cursor: pointer;
        }
      </style>
      <canvas
        id="pdfcanvas"
        .height=${0}
        .width=${0}

      ></canvas>
    `;
  }

  public static pdfJsReady: Promise<any>;
  public static pdfjsLib: any // typeof pdfjsTypes;
  public async connectedCallback() {
    super.connectedCallback();
    if (!DeesPdf.pdfJsReady) {
      const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
      DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
      // @ts-ignore
      DeesPdf.pdfjsLib = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
      DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs';
      pdfJsReadyDeferred.resolve();
    }
    await DeesPdf.pdfJsReady;
    this.displayContent();


  }

  public async displayContent() {
    await DeesPdf.pdfJsReady;

    // Asynchronous download of PDF
    const loadingTask = DeesPdf.pdfjsLib.getDocument(this.pdfUrl);
    loadingTask.promise.then(
      (pdf) => {
        console.log('PDF loaded');

        // Fetch the first page
        const pageNumber = 1;
        pdf.getPage(pageNumber).then((page) => {
          console.log('Page loaded');

          const scale = 10;
          const viewport = page.getViewport({ scale: scale });

          // Prepare canvas using PDF page dimensions
          const canvas: any = this.shadowRoot.querySelector('#pdfcanvas');
          const context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          // Render PDF page into canvas context
          const renderContext = {
            canvasContext: context,
            viewport: viewport,
          };

          const renderTask = page.render(renderContext);
          renderTask.promise.then(function () {
            console.log('Page rendered');
          });
        });
      },
      (reason) => {
        // PDF loading error
        console.error(reason);
      }
    );
  }

  /**
   * Provide context menu items for the global context menu handler
   */
  public getContextMenuItems() {
    return [
      {
        name: 'Open PDF in New Tab',
        iconName: 'lucide:ExternalLink',
        action: async () => {
          window.open(this.pdfUrl, '_blank');
        }
      },
      { divider: true },
      {
        name: 'Copy PDF URL',
        iconName: 'lucide:Copy',
        action: async () => {
          await navigator.clipboard.writeText(this.pdfUrl);
        }
      },
      {
        name: 'Download PDF',
        iconName: 'lucide:Download',
        action: async () => {
          const link = document.createElement('a');
          link.href = this.pdfUrl;
          link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
          link.click();
        }
      }
    ];
  }
}