@inizioevoke/astro-core 1.5.2 → 1.6.1

package/src/components/PdfViewer/PdfViewer.css

@@ -127,13 +127,13 @@
   }*/
   .evo-pdf-viewer-container {
     height: calc(var(--evo-pdf-viewer-height) - var(--evo-pdf-viewer-toolbar-height));
-    padding: 0 9px 9px 9px;
+    padding: 0 9px 9px var(--evo-scroll-container-content-padding-right);
     box-sizing: border-box;
 
     .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) {
@@ -26,11 +225,11 @@ export async function createViewer(selector: string) {
     const toolbarHeight = parseFloat(getComputedStyle(toolbar).height);
     const pageSelect = toolbar.querySelector('.evo-pdf-viewer-nav-page select') as HTMLSelectElement;
     const scrollContainer = ScrollContainer.getScrollContainer(pdfViewer.querySelector('.evo-scroll-container') as HTMLElement) as ScrollContainer.IScrollContainer;
-
+    const defaultZoom = parseInt(pdfViewer.getAttribute('data-zoom') ?? '100', 10);
     const zoom = (z: number) => {
       const style = getComputedStyle(pdfViewer);
       const current = Math.floor(parseFloat(style.getPropertyValue('--evo-pdf-viewer-scale')) * 10);
-      const scale = z === 0 ? 10 : current + z;
+      const scale = z === 0 ? defaultZoom / 10 : current + z;
       if (scale >= 1) {
         const scroll = ScrollContainer.getScroll(scrollContainer);
         pdfViewer.style.setProperty('--evo-pdf-viewer-scale', (scale/10).toString());
@@ -38,6 +237,7 @@ export async function createViewer(selector: string) {
         ScrollContainer.refresh(scrollContainer);
       }
     };
+    zoom(0);
 
     const gotoPage = (page: number | string) => {
       if (typeof page == 'string') {
@@ -72,11 +272,13 @@ export async function createViewer(selector: string) {
 
     const pdf: PDFDocumentProxy = await pdfjs.getDocument(pdfViewer.getAttribute('data-pdf') as string).promise;
 
-    const bookmarksSelect = toolbar.querySelector('.evo-pdf-viewer-toolbar-bookmarks select') as HTMLSelectElement;
-    bookmarksSelect.addEventListener('change', () => {
-      gotoPage(bookmarksSelect.options[bookmarksSelect.selectedIndex].value);
-      bookmarksSelect.selectedIndex = 0;
-    });
+    const bookmarksSelect = toolbar.querySelector<HTMLSelectElement>('.evo-pdf-viewer-toolbar-bookmarks select');
+    if (bookmarksSelect) {
+      bookmarksSelect.addEventListener('change', () => {
+        gotoPage(bookmarksSelect.options[bookmarksSelect.selectedIndex].value);
+        bookmarksSelect.selectedIndex = 0;
+      });
+    }
 
     const outputScale = window.devicePixelRatio || 1;
     const pages = new Array(pdf.numPages).fill(1).map((v, i) => { return i + 1; });
@@ -96,7 +298,6 @@ export async function createViewer(selector: string) {
       }
     }, { passive: true });
 
-
     const pdfContainer = pdfViewer.querySelector('.evo-scroll-content') as HTMLElement;
     pdfViewer.querySelector<HTMLElement>('.evo-pdf-viewer-nav-page-count')!.innerText = pages.length.toString();
     pageSelect.options.remove(0);
@@ -123,7 +324,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 +341,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);
     }