@inizioevoke/astro-core 1.6.5 → 2.0.0

package/src/components/PdfViewer/PdfViewer.ts

@@ -1,42 +1,245 @@
+/// <reference types="vite/client" />
 import * as pdfjs from './pdf.min.mjs';
+import workerSrc from './pdf.worker.min.mjs?url';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
-import * as ScrollContainer from '../ScrollContainer/archive-20260417';
+import { EvoScrollContainerElement } from '../ScrollContainer/ScrollContainer';
 
-pdfjs.GlobalWorkerOptions.workerSrc = './pdf.worker.min.mjs';
+const TAG_NAME = 'evo-pdf-viewer';
 
-
-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 interface IEvoPdfViewerElement {
+  scrollToPage: (page: number | string) => void;
+  zoom: (z: number) => void;
 }
+export class EvoPdfViewerElement extends HTMLElement implements IEvoPdfViewerElement {
+  #toolbar!: HTMLElement;
+  #pageSelect!: HTMLSelectElement;
+  #scrollContainer!: EvoScrollContainerElement;
 
-interface PdfViewerSettings {
-  workerDir?: string;
-  workerSrc?: string;
-}
-export function init(settings: PdfViewerSettings = {}) {
-  if (!settings.workerDir) {
-    settings.workerDir = './';
+  #toolbarHeight = 0;
+  #defaultZoom = 100;
+  #pageCount = 0;
+
+  constructor() {
+    super();
+    pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
   }
-  if (!settings.workerSrc) {
-    settings.workerSrc = `${settings.workerDir}${settings.workerDir.endsWith('/') ? '' : '/'}pdf.worker.min.mjs`
+
+  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);
+
+    // *** 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.#updateCurrentPage, { passive: true });
+
+    this.#renderPDF()
+      .then(() => {
+        this.zoom(0);
+        this.#updateCurrentPage();
+      })
+      .catch((err) => {
+        console.error('A PDF rendering error occurred', err);
+      });
+
+  }
+
+  scrollToPage(page: number | string) {
+    if (typeof page == 'string') {
+      page = parseInt(page, 10);
+    }
+    // requestAnimationFrame(() => {
+    const canvas = this.#scrollContainer.querySelector<HTMLElement>(`canvas[data-page="${page}"]`);
+    if (canvas) { 
+      this.#scrollContainer.scroll({ 
+        top: canvas.getBoundingClientRect().top + this.#scrollContainer.scrollTop - this.#toolbarHeight 
+      }); // , behavior: 'smooth' });
+      this.#pageSelect.selectedIndex = page - 1;
+    }
+    // }
+  }
+
+  zoom(z: number) {
+    const style = getComputedStyle(this);
+    const current = Math.floor(parseFloat(style.getPropertyValue('--evo-pdf-viewer-scale')) * 10);
+    const scale = z === 0 ? this.#defaultZoom / 10 : current + z;
+    if (scale >= 1) {
+      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 
+      });
+      this.#scrollContainer.refresh();
+    }
+  }
+
+  async #renderPDF() {
+    const outputScale = window.devicePixelRatio || 1;
+    const pdf: PDFDocumentProxy = await pdfjs.getDocument(this.getAttribute('data-pdf') as string).promise;
+    
+    const pages = new Array(pdf.numPages).fill(1).map((v, i) => { return 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);
+    }
+
+    for (const pageNum of pages) {
+
+      const pdfPage = await pdf.getPage(pageNum);
+      const pdfPageWidth = pdfPage.getViewport({ scale: 1}).width;
+      const containerStyle = getComputedStyle(this.#scrollContainer.content);
+      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);
+      
+      this.#scrollContainer.content.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, this, this.scrollToPage.bind(this), pdf);
+        pageWrapper.appendChild(linkOverlay);
+      }
+      
+      this.#scrollContainer.refresh();
+    }
+  }
+
+  #updateCurrentPage() {
+    const canvases = this.#scrollContainer.content.querySelectorAll<HTMLCanvasElement>('canvas');
+    let visiblePage: HTMLCanvasElement | undefined;
+    let maxVisibility = 0;
+
+    canvases.forEach((canvas) => {
+      const rect = canvas.getBoundingClientRect();
+      const containerRect = this.#scrollContainer.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) {
+        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
  */
@@ -143,7 +346,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 +356,7 @@ function createLinkOverlay(
               })
             );
 
-          pdfViewer.dispatchEvent(new CustomEvent('pdfviewer-click', { 
+          pdfViewer.dispatchEvent(new CustomEvent('evopdfviewer-click', { 
             detail: { type: type ?? '', cmd, args }
           }));
           return;
@@ -215,179 +418,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();
-  }
-}
+}

package/src/components/ScrollContainer/ScrollContainer.ts

@@ -24,8 +24,25 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
-
-export class EvoScrollContainerElement extends HTMLElement {
+export interface IEvoScrollContainerElement {
+  content: HTMLElement;
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+  scrollHeight: number;
+  configureScrollbar: (settings: ScrollbarSettings) => void;
+  getScroll: () => { left: number, top: number };
+  resize: (opts: { height?: number }) => void;
+  resetScrollbar: () => void;
+  refresh: () => void;
+  scroll(opts?: ScrollToOptions): void;
+  scroll(x: number, y: number): void;
+  scrollTo(opts?: ScrollToOptions): void;
+  scrollTo(x: number, y: number): void;
+  scrollBy(opts?: ScrollToOptions): void;
+  scrollBy(x: number, y: number): void;
+}
+export class EvoScrollContainerElement extends HTMLElement implements IEvoScrollContainerElement {
   static get htmlTagName() {
     return 'evo-scroll-container';
   }
@@ -69,6 +86,10 @@ export class EvoScrollContainerElement extends HTMLElement {
     window.removeEventListener('resize', this.#boundResizeHandler);
   }
 
+  get content() {
+    return this.#content;
+  }
+
   scroll(opts?: ScrollToOptions): void;
   scroll(x: number, y: number): void;
   scroll(...args: any[]) {

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as FlipCard } from './FlipCard/FlipCard.astro';
+export { default as RightISI } from './ISI/Right/RightISI.astro';
 export { default as Modal } from './Modal/Modal.astro';
 export { default as ModalOverlay } from './Modal/ModalOverlay.astro';
 export { default as ModalTrigger } from './Modal/ModalTrigger.astro';

package/src/lib/gestures/index.ts

@@ -0,0 +1,2 @@
+export * from './pinch';
+export * from './swipe';

package/src/lib/gestures/pinch.ts

@@ -0,0 +1,66 @@
+export function createPinchListener() {
+  type PinchDirection = 'in' | 'out';
+
+  let initialDist: number = 0;
+  let lastDistance: number = 0;
+  let currentScale: number = 1;
+  let activeScale: number = 1;
+
+  function getTouchDistance(touches: TouchList) {
+    return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+  }
+  
+  function reset() {
+    window.removeEventListener('touchmove', touchmove);
+    window.removeEventListener('touchend', touchend);
+    currentScale = activeScale;
+    initialDist = 0;
+    lastDistance = 0;
+  }
+
+  const touchstart = (e: TouchEvent) => {
+    if (e.touches.length === 2) {
+      initialDist = getTouchDistance(e.touches);
+      lastDistance = initialDist;
+      window.addEventListener('touchmove', touchmove, { passive: true });
+      window.addEventListener('touchend', touchend, { passive: true });
+    } else {
+      reset();
+    }
+  };
+
+  const touchmove = (e: TouchEvent) => {
+    if (e.touches.length === 2) {
+      const currentDistance = getTouchDistance(e.touches);
+      const ratio = currentDistance / initialDist;
+
+      const rawScale = currentScale * ratio;
+
+      // Detect if we're crossing 1 from either direction
+      const crossingOne =
+        (currentScale > 1 && rawScale < 1) ||
+        (currentScale < 1 && rawScale > 1);
+
+      activeScale = crossingOne ? 1 : rawScale; // snap to 1
+
+      let direction: PinchDirection | undefined = undefined;
+      if (currentDistance > lastDistance) {
+        direction = 'in';
+      } else if (currentDistance < lastDistance) {
+        direction = 'out';
+      }
+
+      if (direction !== undefined) {
+        console.log(activeScale, direction);
+        lastDistance = currentDistance;
+      }
+    }
+  };
+
+  const touchend = (e: TouchEvent) => {
+    if (e.touches.length < 2) {
+      reset();
+    }
+  };
+  window.addEventListener('touchstart', touchstart, { passive: true });
+}