@inizioevoke/astro-core 1.7.0 → 2.0.1

package/src/components/PdfViewer/PdfViewer.ts

@@ -1,42 +1,461 @@
+/// <reference types="vite/client" />
 import * as pdfjs from './pdf.min.mjs';
-import type { PDFDocumentProxy } from 'pdfjs-dist';
-import * as ScrollContainer from '../ScrollContainer/archive-20260417';
+import workerSrc from './pdf.worker.min.mjs?url';
+import type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist';
+import { EvoScrollContainerElement, type Scrolling } from '../ScrollContainer/ScrollContainer';
 
-pdfjs.GlobalWorkerOptions.workerSrc = './pdf.worker.min.mjs';
+const TAG_NAME = 'evo-pdf-viewer';
+const MIN_ZOOM = 1;   // 10% — stored as tenths
+const MAX_ZOOM = 80;  // 800%
+const RERENDER_DEBOUNCE_MS = 300;
+const MAX_CANVAS_DIMENSION = 16384;
 
-
-export interface PdfViewerCustomEventDetail {
+export interface EvoPdfViewerEventDetail {
   type: string;
   cmd?: string;
   args?: Record<string, string>
 }
+export type EvoPdfViewerEvent = CustomEvent<EvoPdfViewerEventDetail>;
 declare global {
   interface ElementEventMap {
-    'pdfviewer-click': CustomEvent<PdfViewerCustomEventDetail>
+    'evopdfviewer-click': EvoPdfViewerEvent
   }
 }
 
-interface LinkAnnotation {
-  rect: [number, number, number, number];
-  url?: string;
-  dest?: any;
-  newWindow?: boolean;
-}
+export type Layout = Omit<Scrolling, 'both'>
 
-interface PdfViewerSettings {
-  workerDir?: string;
-  workerSrc?: string;
+export interface IEvoPdfViewerElement {
+  scrollToPage: (page: number | string) => void;
+  zoom: (z: -1 | 0 | 1) => void;
 }
-export function init(settings: PdfViewerSettings = {}) {
-  if (!settings.workerDir) {
-    settings.workerDir = './';
+export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerElement {
+  #toolbar!: HTMLElement;
+  #pageSelect!: HTMLSelectElement;
+  #scrollContainer!: EvoScrollContainerElement;
+
+  #toolbarHeight = 0;
+  #defaultZoom = 100;
+  #pageCount = 0;
+  #layout: Layout = 'vertical';
+  #fit: 'width' | 'height' | `${string}%` | number = 'width';
+
+  #pdf!: PDFDocumentProxy;
+  #outputScale = 1;
+  #renderQuality = 2;
+  #targetQuality = 2;
+  #pageLayouts = new Map<number, { viewportScale: number; cssWidth: string; cssHeight: string }>();
+  #renderedPages = new Map<number, { effectiveQuality: number; task?: RenderTask }>();
+  #visiblePages = new Set<number>();
+  #lazyObserver!: IntersectionObserver;
+  #boundUpdateCurrentPage = () => this.#updateCurrentPage();
+  #rerenderTimer: number | null = null;
+
+  constructor() {
+    super();
+    pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+  }
+
+  connectedCallback() {
+    this.#toolbar = this.querySelector('.evo-pdf-viewer-toolbar') as HTMLElement;
+    this.#pageSelect = this.#toolbar.querySelector('.evo-pdf-viewer-nav-page select') as HTMLSelectElement;
+    this.#scrollContainer = this.querySelector('evo-scroll-container') as EvoScrollContainerElement;
+
+    this.#toolbarHeight = parseFloat(getComputedStyle(this.#toolbar).height);
+    this.#defaultZoom = parseInt(this.getAttribute('data-zoom') ?? '100', 10);
+    this.#layout = this.dataset.layout as Layout;
+    
+    const fit = this.dataset.fit;
+    if (fit) {
+      if (/^\d+%$/.test(fit)){
+        this.#fit = fit as `${string}%`;
+      } else if (/^\d+$/.test(fit)) {
+        this.#fit = parseInt(fit, 10);
+      } else if (fit === 'height' || fit === 'width') {
+        this.#fit = fit;
+      }
+    }
+
+    // *** nav
+    this.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-prev')?.addEventListener('click', () => {
+      const page = parseInt(this.#pageSelect.options[this.#pageSelect.selectedIndex].value, 10) - 1;
+      if (page > 0) {
+        this.scrollToPage(page);
+      }
+    }, { passive: true });
+
+    this.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-next')?.addEventListener('click', () => {
+      const page = parseInt(this.#pageSelect.options[this.#pageSelect.selectedIndex].value, 10) + 1;
+      if (page <= this.#pageCount) {
+        this.scrollToPage(page);
+      }
+    }, { passive: true });
+
+    this.#pageSelect.addEventListener('change', () => {
+      const page = this.#pageSelect.options[this.#pageSelect.selectedIndex].value;
+      this.scrollToPage(page);
+    }, { passive: true });
+
+    // *** zoom
+    this.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-out')?.addEventListener('click', () => {
+      this.zoom(-1);
+    }, { passive: true });
+
+    this.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-in')?.addEventListener('click', () => {
+      this.zoom(1);
+    }, { passive: true });
+
+    this.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-reset')?.addEventListener('click', () => {
+      this.zoom(0);
+    }, { passive: true });
+
+
+    // *** bookmarks
+    const bookmarksSelect = this.#toolbar.querySelector<HTMLSelectElement>('.evo-pdf-viewer-toolbar-bookmarks select');
+    if (bookmarksSelect) {
+      bookmarksSelect.addEventListener('change', () => {
+        this.scrollToPage(bookmarksSelect.options[bookmarksSelect.selectedIndex].value);
+        bookmarksSelect.selectedIndex = 0;
+      });
+    }
+
+    this.#scrollContainer.addEventListener('scroll', this.#boundUpdateCurrentPage, { passive: true });
+
+    this.#renderPDF()
+      .then(() => {
+        this.zoom(0);
+        this.#scrollContainer.refresh();
+        this.#updateCurrentPage();
+      })
+      .catch((err) => {
+        console.error('A PDF rendering error occurred', err);
+      });
+
+  }
+
+  scrollToPage(page: number | string) {
+    if (typeof page == 'string') {
+      page = parseInt(page, 10);
+    }
+    const wrapper = this.#scrollContainer.querySelector<HTMLElement>(`.evo-pdf-viewer-page-wrapper[data-page="${page}"]`);
+    if (wrapper) {
+      if (this.#layout === 'horizontal') {
+        this.#scrollContainer.scroll({
+          left: wrapper.getBoundingClientRect().left + this.#scrollContainer.scrollLeft - this.#scrollContainer.getBoundingClientRect().left,
+          behavior: 'smooth'
+        });
+      } else {
+        this.#scrollContainer.scroll({
+          top: wrapper.getBoundingClientRect().top + this.#scrollContainer.scrollTop - this.#toolbarHeight,
+          behavior: 'smooth'
+        });
+      }
+      this.#pageSelect.selectedIndex = page - 1;
+    }
+  }
+
+  zoom(z: -1 | 0 | 1) {
+    const style = getComputedStyle(this);
+    const current = Math.floor(parseFloat(style.getPropertyValue('--evo-pdf-viewer-scale')) * 10);
+    const zoomIn = z === 1;
+    if (z !== 0) {
+
+      if (current >= 12) {
+        zoomIn ? z += 1 : z -= 1; 
+        if (current >= 20) {
+          zoomIn ? z += 1 : z -= 1; 
+          if (current >= 40) {
+            zoomIn ? z += 1 : z -= 1; 
+          }
+        }
+      }
+    }
+    const target = z === 0 ? this.#defaultZoom / 10 : current + z;
+    const scale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, target));
+    if (scale === current) return;
+
+    const scroll = {
+      left: this.#scrollContainer.scrollLeft,
+      top: this.#scrollContainer.scrollTop
+    };
+    this.style.setProperty('--evo-pdf-viewer-scale', (scale / 10).toString());
+    this.#scrollContainer.scroll({
+      left: scroll.left * scale / current,
+      top: scroll.top * scale / current,
+      behavior: 'instant'
+    });
+    this.#scrollContainer.refresh();
+
+    // Update the target quality immediately so any page entering view via the
+    // lazy observer renders at the new scale; only the visible pages are
+    // re-rendered eagerly (debounced) — others get sharpened lazily on scroll.
+    this.#targetQuality = Math.max(this.#renderQuality, this.#renderQuality * (scale / 10));
+    this.#scheduleVisibleRerender();
+  }
+
+  #scheduleVisibleRerender() {
+    if (this.#rerenderTimer !== null) {
+      clearTimeout(this.#rerenderTimer);
+    }
+    this.#rerenderTimer = window.setTimeout(() => {
+      this.#rerenderTimer = null;
+      for (const pageNum of this.#visiblePages) {
+        const wrapper = this.#scrollContainer.content.querySelector<HTMLElement>(
+          `.evo-pdf-viewer-page-wrapper[data-page="${pageNum}"]`
+        );
+        if (wrapper) this.#considerRender(pageNum, wrapper);
+      }
+    }, RERENDER_DEBOUNCE_MS);
   }
-  if (!settings.workerSrc) {
-    settings.workerSrc = `${settings.workerDir}${settings.workerDir.endsWith('/') ? '' : '/'}pdf.worker.min.mjs`
+
+  // Decide whether to (re-)render a page at the current target quality.
+  // Used by both the lazy observer and the post-zoom sweep so the gating
+  // logic lives in one place.
+  #considerRender(pageNum: number, wrapper: HTMLElement) {
+    const info = this.#renderedPages.get(pageNum);
+    if (!info) {
+      this.#renderPage(pageNum, wrapper, this.#targetQuality);
+      return;
+    }
+    // Skip when an in-flight render at the same target is already running.
+    if (info.task && info.effectiveQuality >= this.#targetQuality * 0.95) return;
+
+    const ratio = info.effectiveQuality / this.#targetQuality;
+    // Zoom-in: re-render when canvas is noticeably below target sharpness.
+    // Zoom-out: re-render only on big drops (>25%) to reclaim memory without
+    // constant churn on tiny steps.
+    if (ratio >= 0.95 && ratio <= 1.25) return;
+
+    info.task?.cancel();
+    this.#renderPage(pageNum, wrapper, this.#targetQuality);
+  }
+
+  async #renderPDF() {
+    this.#outputScale = window.devicePixelRatio || 1;
+    this.#renderQuality = parseFloat(this.getAttribute('data-quality') ?? '2');
+    this.#targetQuality = this.#renderQuality;
+    this.#pdf = await pdfjs.getDocument(this.getAttribute('data-pdf') as string).promise;
+
+    const pages = new Array(this.#pdf.numPages).fill(1).map((_, i) => i + 1);
+    this.#pageCount = pages.length;
+
+    this.querySelector<HTMLElement>('.evo-pdf-viewer-nav-page-count')!.innerText = pages.length.toString();
+
+    this.#pageSelect.options.remove(0);
+    for (const pageNum of pages) {
+      const option = document.createElement('option');
+      option.value = pageNum.toString();
+      option.innerText = `${pageNum}`;
+      this.#pageSelect.options.add(option);
+    }
+
+    const containerStyle = getComputedStyle(this.#scrollContainer.content);
+    const trackWidth = parseInt(containerStyle.getPropertyValue('--evo-scroll-container-track-width'));
+    const containerWidth = parseFloat(containerStyle.width);
+    const containerHeight = parseFloat(containerStyle.height);
+    const gap = 16;
+
+    // Pass 1: create sized placeholder wrappers for all pages so the scroll
+    // container knows its total dimensions before any canvas is rendered.
+    for (const pageNum of pages) {
+      const pdfPage = await this.#pdf.getPage(pageNum);
+      const baseVp = pdfPage.getViewport({ scale: 1 });
+
+      let viewportScale: number;
+      let cssProp: 'width' | 'height';
+      let cssRenderedSize: number;
+
+      if (this.#layout === 'horizontal') {
+        if (this.#fit === 'height') {
+          viewportScale = (containerHeight - trackWidth * 2) / baseVp.height;
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale) - (trackWidth * 2);
+          cssProp = 'height';
+        } else if (this.#fit === 'width') {
+          viewportScale = containerWidth / baseVp.width;
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale);
+          cssProp = 'width';
+        } else if (/^\d+%$/.test(this.#fit.toString())) { // replacing 'actual' with a percentage
+          viewportScale = parseInt(this.#fit.toString(), 10) / 100;
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale) - (trackWidth * 2);
+          cssProp = 'height';
+        } else {
+          const n = this.#fit as number;
+          viewportScale = (containerWidth - (n - 1) * gap) / (n * baseVp.width);
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale);
+          cssProp = 'width';
+        }
+      } else {
+        if (this.#fit === 'width') {
+          viewportScale = containerWidth / baseVp.width;
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale) - (trackWidth * 2);
+          cssProp = 'width';
+        } else if (this.#fit === 'height') {
+          viewportScale = containerHeight / baseVp.height;
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale);
+          cssProp = 'height';
+        } else if (/^\d+%$/.test(this.#fit.toString())) { // replacing 'actual' with a percentage
+          viewportScale = parseInt(this.#fit.toString(), 10) / 100;
+          cssRenderedSize = Math.floor(baseVp.width * viewportScale) - (trackWidth * 2);
+          cssProp = 'width';
+        } else {
+          const n = this.#fit as number;
+          viewportScale = (containerHeight - (n - 1) * gap) / (n * baseVp.height);
+          cssRenderedSize = Math.floor(baseVp.height * viewportScale);
+          cssProp = 'height';
+        }
+      }
+
+      const layoutVp = pdfPage.getViewport({ scale: viewportScale });
+      const cssOtherSize = Math.round(cssProp === 'width'
+        ? cssRenderedSize * layoutVp.height / layoutVp.width
+        : cssRenderedSize * layoutVp.width / layoutVp.height);
+      const cssWidth  = `calc(${cssProp === 'width'  ? cssRenderedSize : cssOtherSize}px * var(--evo-pdf-viewer-scale))`;
+      const cssHeight = `calc(${cssProp === 'height' ? cssRenderedSize : cssOtherSize}px * var(--evo-pdf-viewer-scale))`;
+
+      this.#pageLayouts.set(pageNum, { viewportScale, cssWidth, cssHeight });
+
+      const pageWrapper = document.createElement('div');
+      pageWrapper.className = 'evo-pdf-viewer-page-wrapper';
+      pageWrapper.setAttribute('data-page', pageNum.toString());
+      pageWrapper.style.position = 'relative';
+      pageWrapper.style.width = cssWidth;
+      pageWrapper.style.height = cssHeight;
+      this.#scrollContainer.content.append(pageWrapper);
+      this.#scrollContainer.refresh();
+    }
+
+    // Pass 2: observe wrappers. The observer is the single gate for both
+    // initial render and post-zoom re-render — pages outside its rootMargin
+    // keep their stale-quality canvas until they scroll back into view.
+    this.#lazyObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const wrapper = entry.target as HTMLElement;
+          const pageNum = parseInt(wrapper.getAttribute('data-page')!, 10);
+          if (entry.isIntersecting) {
+            this.#visiblePages.add(pageNum);
+            this.#considerRender(pageNum, wrapper);
+          } else {
+            this.#visiblePages.delete(pageNum);
+          }
+        }
+      },
+      {
+        root: this.#scrollContainer.content,
+        // Render one full container-length ahead in the scroll direction.
+        rootMargin: this.#layout === 'horizontal'
+          ? `0px ${containerWidth}px 0px ${containerWidth}px`
+          : `${containerHeight}px 0px ${containerHeight}px 0px`,
+        threshold: 0
+      }
+    );
+
+    for (const wrapper of this.#scrollContainer.content.querySelectorAll<HTMLElement>('.evo-pdf-viewer-page-wrapper')) {
+      this.#lazyObserver.observe(wrapper);
+    }
+  }
+
+  async #renderPage(pageNum: number, wrapper: HTMLElement, quality = this.#renderQuality) {
+    const layout = this.#pageLayouts.get(pageNum)!;
+    const pdfPage = await this.#pdf.getPage(pageNum);
+
+    // Cap effective quality so the canvas never exceeds the browser's max texture
+    // dimension on any axis.
+    const baseVp = pdfPage.getViewport({ scale: layout.viewportScale });
+    const maxByWidth = MAX_CANVAS_DIMENSION / (baseVp.width * this.#outputScale);
+    const maxByHeight = MAX_CANVAS_DIMENSION / (baseVp.height * this.#outputScale);
+    const effectiveQuality = Math.min(quality, maxByWidth, maxByHeight);
+
+    const viewport = pdfPage.getViewport({ scale: layout.viewportScale * effectiveQuality });
+    const layoutVp = baseVp;
+
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('data-page', pageNum.toString());
+    canvas.width = Math.floor(viewport.width * this.#outputScale);
+    canvas.height = Math.floor(viewport.height * this.#outputScale);
+    canvas.style.width = layout.cssWidth;
+    canvas.style.height = layout.cssHeight;
+
+    const task = pdfPage.render({
+      canvas,
+      transform: this.#outputScale !== 1 ? [this.#outputScale, 0, 0, this.#outputScale, 0, 0] : undefined,
+      viewport
+    });
+    this.#renderedPages.set(pageNum, { effectiveQuality, task });
+
+    try {
+      await task.promise;
+    } catch (err: any) {
+      if (err?.name === 'RenderingCancelledException') return;
+      throw err;
+    }
+
+    // Swap the new canvas in only after a successful render so we never flash
+    // an empty canvas during a re-render.
+    const oldCanvas = wrapper.querySelector('canvas');
+    const oldOverlay = wrapper.querySelector('.evo-pdf-viewer-link-overlay');
+    if (oldCanvas) oldCanvas.remove();
+    if (oldOverlay) oldOverlay.remove();
+    wrapper.appendChild(canvas);
+    this.#renderedPages.set(pageNum, { effectiveQuality });
+
+    const links = await getPageLinks(pdfPage);
+    if (links.length > 0) {
+      const linkOverlay = createLinkOverlay(canvas, links, layoutVp, pageNum, this, this.scrollToPage.bind(this), this.#pdf);
+      wrapper.appendChild(linkOverlay);
+    }
+  }
+
+  #updateCurrentPage() {
+    const wrappers = this.#scrollContainer.content.querySelectorAll<HTMLElement>('.evo-pdf-viewer-page-wrapper');
+    let visibleWrapper: HTMLElement | undefined;
+    let maxVisibility = 0;
+
+    wrappers.forEach((wrapper) => {
+      const rect = wrapper.getBoundingClientRect();
+      const containerRect = this.#scrollContainer.getBoundingClientRect();
+
+      let intersection: number;
+      let dimension: number;
+      if (this.#layout === 'horizontal') {
+        const intersectLeft = Math.max(rect.left, containerRect.left);
+        const intersectRight = Math.min(rect.right, containerRect.right);
+        intersection = Math.max(0, intersectRight - intersectLeft);
+        dimension = rect.width || 1;
+      } else {
+        const intersectTop = Math.max(rect.top, containerRect.top);
+        const intersectBottom = Math.min(rect.bottom, containerRect.bottom);
+        intersection = Math.max(0, intersectBottom - intersectTop);
+        dimension = rect.height || 1;
+      }
+
+      const visibility = intersection / dimension;
+      if (visibility > maxVisibility) {
+        maxVisibility = visibility;
+        visibleWrapper = wrapper;
+      }
+    });
+
+    if (visibleWrapper && maxVisibility >= 0.1) {
+      const pageNum = visibleWrapper.getAttribute('data-page');
+      if (pageNum) {
+        this.#pageSelect.selectedIndex = parseInt(pageNum, 10) - 1;
+      }
+    }
   }
-  pdfjs.GlobalWorkerOptions.workerSrc = settings.workerSrc;
 }
 
+if (!customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, EvoPdfViewerElement);
+}
+
+
+
+interface LinkAnnotation {
+  rect: [number, number, number, number];
+  url?: string;
+  dest?: any;
+  newWindow?: boolean;
+}
 /**
  * Extract link annotations from a PDF page
  */
@@ -104,24 +523,16 @@ function createLinkOverlay(
   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.setAttribute('width', canvas.style.width);
+  svg.setAttribute('height', canvas.style.height);
   svg.style.position = 'absolute';
   svg.style.top = '0';
   svg.style.left = '0';
-  svg.style.cursor = 'pointer';
+  // svg.style.cursor = 'pointer';
   
   // Add link rectangles
   for (const link of links) {
@@ -143,7 +554,7 @@ function createLinkOverlay(
       e.stopPropagation();
       
       if (link.url) {
-        if (link.url.startsWith('http://pdfviewer')) {
+        if (link.url.startsWith('http://pdfviewer.evo')) {
           const url = new URL(link.url);
           const [ type, cmd ] = url.pathname.split('/').filter(p => p.trim() !== '');
           const args = url.search === '' ? undefined :
@@ -153,7 +564,7 @@ function createLinkOverlay(
               })
             );
 
-          pdfViewer.dispatchEvent(new CustomEvent('pdfviewer-click', { 
+          pdfViewer.dispatchEvent(new CustomEvent('evopdfviewer-click', { 
             detail: { type: type ?? '', cmd, args }
           }));
           return;
@@ -215,179 +626,4 @@ function createLinkOverlay(
   }
   
   return svg;
-}
-
-export async function createViewer(selector: string) {
-  const pdfViewer = document.querySelector<HTMLElement>(selector);
-  if (pdfViewer) {
-    // const ddlPage = pdfViewer.querySelector('select') as HTMLSelectElement;
-    const toolbar = pdfViewer.querySelector('.evo-pdf-viewer-toolbar') as HTMLElement;
-    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 ? defaultZoom / 10 : current + z;
-      if (scale >= 1) {
-        const scroll = ScrollContainer.getScroll(scrollContainer);
-        pdfViewer.style.setProperty('--evo-pdf-viewer-scale', (scale/10).toString());
-        ScrollContainer.scroll(scrollContainer, { left: scroll.left * scale / current, top: scroll.top * scale / current });
-        ScrollContainer.refresh(scrollContainer);
-      }
-    };
-    zoom(0);
-
-    const gotoPage = (page: number | string) => {
-      if (typeof page == 'string') {
-        page = parseInt(page, 10);
-      }
-      requestAnimationFrame(() => {
-        const container = pdfViewer.querySelector('.evo-scroll-content') as HTMLElement;
-        const canvas = container.querySelector<HTMLElement>(`canvas[data-page="${page}"]`);
-        if (canvas) { 
-          container.scroll({ top: canvas.getBoundingClientRect().top + container.scrollTop - toolbarHeight }); // , behavior: 'smooth' });
-          pageSelect.selectedIndex = page - 1;
-        }
-      })
-    };
-    
-    pageSelect.addEventListener('change', (e) => {
-      const page = pageSelect.options[pageSelect.selectedIndex].value;
-      gotoPage(page);
-    }, { passive: true });
-
-    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-out')?.addEventListener('click', () => {
-      zoom(-1);
-    }, { passive: true });
-    
-    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-in')?.addEventListener('click', () => {
-      zoom(1);
-    }, { passive: true });
-    
-    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-zoom-reset')?.addEventListener('click', () => {
-      zoom(0);
-    }, { passive: true });
-
-    const pdf: PDFDocumentProxy = await pdfjs.getDocument(pdfViewer.getAttribute('data-pdf') as string).promise;
-
-    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; });
-    
-
-    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-prev')?.addEventListener('click', () => {
-      const page = parseInt(pageSelect.options[pageSelect.selectedIndex].value, 10) - 1;
-      if (page > 0) {
-        gotoPage(page);
-      }
-    }, { passive: true });
-
-    pdfViewer.querySelector<HTMLButtonElement>('button.evo-pdf-viewer-toolbar-next')?.addEventListener('click', () => {
-      const page = parseInt(pageSelect.options[pageSelect.selectedIndex].value, 10) + 1;
-      if (page <= pages.length) {
-        gotoPage(page);
-      }
-    }, { 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);
-    for (const pageNum of pages) {
-      const option = document.createElement('option');
-      option.value = pageNum.toString();
-      option.innerText = `${pageNum}`;
-      pageSelect.options.add(option);
-    }
-    for (const pageNum of pages) {
-
-      const pdfPage = await pdf.getPage(pageNum);
-      const pdfPageWidth = pdfPage.getViewport({ scale: 1}).width;
-      const containerStyle = getComputedStyle(pdfContainer);
-      const trackWidth = parseInt(containerStyle.getPropertyValue('--evo-scroll-container-track-width'));
-      const viewport = pdfPage.getViewport({ scale: parseFloat(containerStyle.width) / pdfPageWidth });
-
-      const canvas = document.createElement('canvas');
-      canvas.setAttribute('data-page', pageNum.toString());
-      const width = Math.floor(viewport.width * outputScale);
-      const height = Math.floor(viewport.height * outputScale);
-      canvas.width = width;
-      canvas.height = height;
-      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`;
-      
-      // 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,
-        // canvasContext: canvas.getContext('2d') as CanvasRenderingContext2D,
-        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);
-    }
-
-    // Function to check and update current page
-    const updateCurrentPage = () => {
-      const canvases = pdfContainer.querySelectorAll<HTMLCanvasElement>('canvas');
-      let visiblePage: HTMLCanvasElement | undefined;
-      let maxVisibility = 0;
-
-      canvases.forEach((canvas) => {
-        const rect = canvas.getBoundingClientRect();
-        const containerRect = scrollContainer.container.getBoundingClientRect();
-        
-        // Calculate intersection height
-        const intersectTop = Math.max(rect.top, containerRect.top);
-        const intersectBottom = Math.min(rect.bottom, containerRect.bottom);
-        const intersectionHeight = Math.max(0, intersectBottom - intersectTop);
-        
-        // Calculate visibility ratio
-        const visibility = intersectionHeight / (rect.height || 1);
-        
-        if (visibility > maxVisibility) {
-          maxVisibility = visibility;
-          visiblePage = canvas;
-        }
-      });
-
-      if (visiblePage && maxVisibility >= 0.1) {
-        const pageNum = visiblePage.getAttribute('data-page');
-        if (pageNum) {
-          pageSelect.selectedIndex = parseInt(pageNum, 10) - 1;
-        }
-      }
-    };
-
-    // Update on scroll
-    scrollContainer.content.addEventListener('scroll', updateCurrentPage, { passive: true });
-    
-    // Initial update
-    updateCurrentPage();
-  }
-}
+}