@inizioevoke/astro-core 1.5.1 → 1.6.0

package/src/components/PdfViewer/PdfViewer.css

@@ -133,7 +133,7 @@
     .evo-scroll-container {
       --evo-scroll-container-track-color: #cccccc;
       .evo-scroll-content {
-        canvas {
+        .evo-pdf-viewer-page-wrapper {
           display: block;
           margin: 18px auto;
           background-color: white;
@@ -145,6 +145,21 @@
             margin-bottom: 0;
           }
         }
+        
+        canvas {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+        
+        .evo-pdf-viewer-link-overlay {
+          pointer-events: auto;
+          z-index: 1;
+          
+          rect {
+            cursor: pointer;
+          }
+        }
       }
     }
   }

package/src/components/PdfViewer/PdfViewer.ts

@@ -4,6 +4,25 @@ import * as ScrollContainer from '../ScrollContainer/archive-20260417';
 
 pdfjs.GlobalWorkerOptions.workerSrc = './pdf.worker.min.mjs';
 
+
+export interface PdfViewerCustomEventDetail {
+  type: string;
+  cmd?: string;
+  args?: Record<string, string>
+}
+declare global {
+  interface ElementEventMap {
+    'pdfviewer-click': CustomEvent<PdfViewerCustomEventDetail>
+  }
+}
+
+interface LinkAnnotation {
+  rect: [number, number, number, number];
+  url?: string;
+  dest?: any;
+  newWindow?: boolean;
+}
+
 interface PdfViewerSettings {
   workerDir?: string;
   workerSrc?: string;
@@ -18,6 +37,186 @@ export function init(settings: PdfViewerSettings = {}) {
   pdfjs.GlobalWorkerOptions.workerSrc = settings.workerSrc;
 }
 
+/**
+ * Extract link annotations from a PDF page
+ */
+async function getPageLinks(pdfPage: any): Promise<LinkAnnotation[]> {
+  const annotations = await pdfPage.getAnnotations();
+  const links: LinkAnnotation[] = [];
+  
+  for (const annotation of annotations) {
+    // Only process link annotations (type 2 is subtype for URI links and internal links)
+    if (annotation.subtype === 'Link') {
+      const link: LinkAnnotation = {
+        rect: annotation.rect
+      };
+      
+      if (annotation.url) {
+        link.url = annotation.url;
+        link.newWindow = annotation.newWindow;
+      } else if (annotation.dest) {
+        link.dest = annotation.dest;
+      }
+      
+      links.push(link);
+    }
+  }
+  
+  return links;
+}
+
+/**
+ * Convert PDF coordinates to viewport coordinates
+ * PDF coords: [left, bottom, right, top] with origin at bottom-left
+ * Return: {x, y, width, height} with origin at top-left
+ */
+function convertPdfRectToViewport(
+  pdfRect: [number, number, number, number],
+  viewport: any
+): { x: number; y: number; width: number; height: number } {
+  const [pdfLeft, pdfBottom, pdfRight, pdfTop] = pdfRect;
+  const pageHeight = viewport.height / viewport.scale;
+  
+  // Scale coordinates
+  const x = pdfLeft * viewport.scale;
+  const y = (pageHeight - pdfTop) * viewport.scale;
+  const width = (pdfRight - pdfLeft) * viewport.scale;
+  const height = (pdfTop - pdfBottom) * viewport.scale;
+  
+  return { x, y, width, height };
+}
+
+/*
+ * Custom PDF link events
+ * To create a custom event, create a link in the PDF that starts with `http://pdfviewer`
+ * Arguments can be passed via the path and query string
+ * http://pdfviewer/type/cmd/?args=1
+ */
+/**
+ * Create an SVG overlay with link areas above a canvas element
+ */
+function createLinkOverlay(
+  canvas: HTMLCanvasElement,
+  links: LinkAnnotation[],
+  viewport: any,
+  pageNum: number,
+  pdfViewer: HTMLElement,
+  gotoPage: (page: number | string) => void,
+  pdf: PDFDocumentProxy
+): SVGSVGElement {
+  const trackWidth = parseInt(
+    getComputedStyle(canvas.parentElement!).getPropertyValue('--evo-scroll-container-track-width')
+  );
+  
+  const canvasWidth = Math.floor(viewport.width) - trackWidth * 2;
+  const canvasHeight = Math.floor(viewport.height);
+  
+  // Create SVG overlay
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('class', 'evo-pdf-viewer-link-overlay');
+  svg.setAttribute('data-page', pageNum.toString());
+  svg.setAttribute('viewBox', `0 0 ${viewport.width} ${viewport.height}`);
+  svg.setAttribute('width', `calc(${canvasWidth}px * var(--evo-pdf-viewer-scale))`);
+  svg.setAttribute('height', `calc(${canvasHeight}px * var(--evo-pdf-viewer-scale))`);
+  svg.style.position = 'absolute';
+  svg.style.top = '0';
+  svg.style.left = '0';
+  svg.style.cursor = 'pointer';
+  
+  // Add link rectangles
+  for (const link of links) {
+    const rect = convertPdfRectToViewport(link.rect, viewport);
+    
+    // Create invisible clickable area
+    const linkRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    linkRect.setAttribute('x', rect.x.toString());
+    linkRect.setAttribute('y', rect.y.toString());
+    linkRect.setAttribute('width', rect.width.toString());
+    linkRect.setAttribute('height', rect.height.toString());
+    linkRect.setAttribute('fill', 'transparent');
+    linkRect.setAttribute('stroke', 'none');
+    linkRect.style.cursor = 'pointer';
+    
+    // Handle click on link
+    linkRect.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      if (link.url) {
+        if (link.url.startsWith('http://pdfviewer')) {
+          const url = new URL(link.url);
+          const [ type, cmd ] = url.pathname.split('/').filter(p => p.trim() !== '');
+          const args = url.search === '' ? undefined :
+            Object.fromEntries(url.search.slice(1).split('&')
+              .map((pair) => {
+                return pair.split('=').slice(0, 2);
+              })
+            );
+
+          pdfViewer.dispatchEvent(new CustomEvent('pdfviewer-click', { 
+            detail: { type: type ?? '', cmd, args }
+          }));
+          return;
+        }
+        // Check for custom protocol
+        // if (link.url.includes('://')) {
+        //   const protocol = link.url.split('://')[0];
+        //   if (!['http', 'https', 'ftp', 'ftps', 'mailto'].includes(protocol)) {
+        //     // Dispatch custom event for non-standard protocols
+        //     const event = new CustomEvent('pdf-link-click', {
+        //       detail: {
+        //         type: 'uri',
+        //         uri: link.url,
+        //         pageNum,
+        //         newWindow: link.newWindow
+        //       }
+        //     });
+        //     pdfViewer.dispatchEvent(event);
+        //     return;
+        //   }
+        // }
+        
+        // Handle standard URLs
+        const target = link.newWindow ? '_blank' : '_self';
+        window.open(link.url, target);
+      } else if (link.dest) {
+        // Handle internal navigation
+        // dest is typically an array [pageRef, ...] where pageRef is {num, gen} or a page index
+        if (Array.isArray(link.dest)) {
+          const destRef = link.dest[0];
+          
+          // Check if it's a reference object with num and gen properties
+          if (destRef && typeof destRef === 'object' && 'num' in destRef && 'gen' in destRef) {
+            // Resolve the reference to a page index using the PDF document
+            pdf.getPageIndex(destRef).then((pageIndex: number) => {
+              gotoPage(pageIndex + 1); // PDF pages are 0-indexed, but gotoPage expects 1-indexed
+            }).catch((err: Error) => {
+              console.error('Failed to resolve PDF link destination:', err);
+            });
+          } else if (typeof destRef === 'number') {
+            // Direct page index
+            gotoPage(destRef + 1);
+          }
+        }
+        
+        // Dispatch event for custom dest handling
+        const event = new CustomEvent('pdf-link-click', {
+          detail: {
+            type: 'goto',
+            dest: link.dest,
+            pageNum
+          }
+        });
+        pdfViewer.dispatchEvent(event);
+      }
+    }, { passive: false });
+    
+    svg.appendChild(linkRect);
+  }
+  
+  return svg;
+}
+
 export async function createViewer(selector: string) {
   const pdfViewer = document.querySelector<HTMLElement>(selector);
   if (pdfViewer) {
@@ -123,7 +322,16 @@ export async function createViewer(selector: string) {
       canvas.style.aspectRatio = `${width}/${height}`;
       canvas.style.width = `calc(${Math.floor(viewport.width) - (trackWidth * 2)}px * var(--evo-pdf-viewer-scale)`;
       // canvas.style.height = `${Math.floor(viewport.height)}px`;
-      pdfContainer.append(canvas);
+      
+      // Create wrapper for canvas and overlay
+      const pageWrapper = document.createElement('div');
+      pageWrapper.className = 'evo-pdf-viewer-page-wrapper';
+      pageWrapper.style.position = 'relative';
+      pageWrapper.style.width = canvas.style.width;
+      pageWrapper.style.aspectRatio = canvas.style.aspectRatio;
+      pageWrapper.appendChild(canvas);
+      
+      pdfContainer.append(pageWrapper);
 
       pdfPage.render({
         canvas,
@@ -131,6 +339,14 @@ export async function createViewer(selector: string) {
         transform: outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined,
         viewport
       });
+      
+      // Extract and render links
+      const links = await getPageLinks(pdfPage);
+      if (links.length > 0) {
+        const linkOverlay = createLinkOverlay(canvas, links, viewport, pageNum, pdfViewer, gotoPage, pdf);
+        pageWrapper.appendChild(linkOverlay);
+      }
+      
       ScrollContainer.refresh(scrollContainer);
     }