@widgetic/design-system 0.3.68

package/dist/components/pdf/PDFViewer.svelte

@@ -0,0 +1,608 @@
+<script lang="ts">
+  // Svelte imports
+  import { onMount, onDestroy, tick, afterUpdate, createEventDispatcher } from 'svelte';
+
+  // Sveltekit imports
+  import { browser } from '$app/environment';
+  import { base } from '$app/paths';
+  
+  // Local components imports
+  import { WScrollArea } from '../../components';
+  
+  // Import arrow icons for navigation
+  import { IconChevronLeft, IconChevronRight } from '../../icons';
+
+  // Whether to show log messages
+  let showLogs = false;
+
+  // import pdfjs library 
+  import * as pdfjsLib from 'pdfjs-dist';  
+  import { type PDFDocumentProxy } from 'pdfjs-dist';
+
+  // Set the worker source to use local worker file from pdfjs-dist package
+  if (browser) {
+    // Try to load worker using import.meta.url for correct path resolution
+    // This works better with bundlers like Vite and provides correct paths in both dev and prod
+    try {
+      pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+        'pdfjs-dist/build/pdf.worker.min.mjs',
+        import.meta.url
+      ).toString();
+
+      if(showLogs) console.log('PDF Worker URL set to:', pdfjsLib.GlobalWorkerOptions.workerSrc);
+    } catch (error) {
+      if(showLogs) console.error('Error setting PDF worker path:', error);
+      // Fallback to CDN as a last resort
+      pdfjsLib.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.js`;
+      if(showLogs) console.log('PDF Worker URL fallback set to:', pdfjsLib.GlobalWorkerOptions.workerSrc);
+    }
+  }  
+
+  // Import PDF cache store
+  import { pdfCache } from '../../stores/pdfCache'; 
+  
+  // Component props
+  // class and style props
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+  // data props
+  export let url = '';
+  export let enableCacheClearing: boolean = true; // Flag to enable/disable cache clearing shortcut
+
+  // Consts
+  const initialContainerWidth = 500;  // Default width during loading  
+  const initialContainerHeight = 300; // Default height during loading
+  const scrolledAreaMaxHeight = 900;
+  
+  // Local vars
+  let pdfDoc: PDFDocumentProxy | null = null;
+  let pageNum = 1;
+  let pageCount = 0;
+  let pageRendering = false;
+  let pageNumPending: number | null = null;
+  let scale = 1.5;
+  let loading = true;
+  let error: string | null = null;
+  let mounted = false;
+  let currentUrl = '';
+  let canvasWidth = initialContainerWidth;  // Start with initial size
+  let canvasHeight = initialContainerHeight; // Start with initial size
+  let isCanvasReady = false;
+  let containerDiv: HTMLDivElement;
+  let canvasContainer: HTMLDivElement;
+  let renderStartTime = 0;
+  let pdfLoadStartTime = 0;
+  let renderingPhase = 'not_started'; // 'not_started', 'loading_pdf', 'calculating_dimensions', 'rendering', 'complete'
+  let showPdfContent = false; // Control visibility of PDF content
+  let loadedFromCache = false; // Track if the current PDF was loaded from cache
+
+  const dispatch = createEventDispatcher<{
+    error: { message: string };
+    pageChange: { page: number, totalPages: number };
+    cacheCleared: void;
+  }>();
+
+  // Debug reactive statement to track state changes
+  $: if (showLogs) {
+    console.log('State update:', { 
+      loading, 
+      isCanvasReady, 
+      error, 
+      mounted, 
+      url,
+      renderingPhase,
+      pageRendering,
+      hasCanvasContainer: !!canvasContainer,
+      hasPdfDoc: !!pdfDoc,
+      pageCount,
+      showPdfContent,
+      elapsedTime: renderStartTime ? Math.round((Date.now() - renderStartTime) / 100) / 10 + 's' : 'N/A',
+      canvasWidth,
+      canvasHeight,
+      loadedFromCache
+    });
+  }
+
+  // Add afterUpdate to track when the UI updates
+  afterUpdate(() => {
+    if (showLogs) {
+      console.log('UI UPDATED:', { 
+        loading, 
+        isCanvasReady, 
+        error, 
+        mounted,
+        renderingPhase,
+        hasCanvasContainer: !!canvasContainer,
+        hasPdfDoc: !!pdfDoc,
+        canvasWidth,
+        canvasHeight,
+        containerWidth: containerDiv?.clientWidth,
+        pageCount,
+        showPdfContent,
+        loadedFromCache
+      });
+    }
+  });
+
+  // Function to handle keyboard shortcuts
+  function handleKeyDown(event: KeyboardEvent) {
+    // Handle CMD/CTRL + SHIFT + P to clear PDF cache (hidden developer shortcut)
+    if (enableCacheClearing && (event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'p') {
+      event.preventDefault();
+      event.stopPropagation();
+      
+      // Clear the PDF cache
+      pdfCache.clear();
+      if (showLogs) console.log('PDF cache cleared via keyboard shortcut');
+      dispatch('cacheCleared');
+    }
+  }
+
+  // Initialize PDF.js with the bundled worker
+  onMount(async () => {
+    if (!browser) return;
+
+    try {
+      // Enable or disable logging in the PDF cache
+      pdfCache.setLogging(showLogs);
+      
+      // Add keyboard event listener for cache clearing
+      if (enableCacheClearing) {
+        window.addEventListener('keydown', handleKeyDown);
+      }
+
+      await tick();
+      mounted = true;
+      if (showLogs) console.log('Component mounted, container available:', !!containerDiv);
+
+      if (url) {
+        if (showLogs) console.log('Starting initial load with URL:', url);
+        await loadPDF();
+      }
+    } catch (err) {
+      console.error('Error in onMount:', err);
+      error = 'Failed to initialize PDF viewer';
+      dispatch('error', { message: 'Failed to initialize PDF viewer' });
+    } finally {
+      loading = false;
+    }
+  });
+
+  // Watch for URL changes - only trigger load if URL actually changes
+  $: if (url && mounted && !loading && url !== currentUrl) {
+    if (showLogs) console.log('URL changed, loading PDF');
+    currentUrl = url;
+    loadPDF();
+  }
+
+  // Watch for canvasContainer binding to become available
+  $: if (canvasContainer && !canvasContainer.querySelector('canvas') && pdfDoc && renderingPhase === 'calculating_dimensions') {
+    if (showLogs) console.log('Canvas container now available, continuing with render');
+    renderPDF();
+  }
+
+  async function loadPDF() {
+    if (!url || !browser) {
+      console.error('Cannot load PDF: missing URL or not in browser');
+      return;
+    }
+
+    if (!containerDiv) {
+      console.error('Container div not found');
+      error = 'Container not available';
+      dispatch('error', { message: 'Container not available' });
+      return;
+    }
+
+    try {
+      // Reset state
+      loading = true;
+      error = null;
+      isCanvasReady = false;
+      showPdfContent = false;
+      loadedFromCache = false;
+      
+      // Get absolute URL for cache key
+      const absoluteUrl = getAbsoluteUrl(url);
+      
+      // Check if the PDF is in the cache
+      const cachedEntry = pdfCache.get(absoluteUrl);
+      
+      // Use the cached PDF document
+      if (cachedEntry) {
+        if (showLogs) console.log('Using cached PDF document:', absoluteUrl);
+        pdfDoc = cachedEntry.document;
+        pageCount = pdfDoc.numPages;
+        pageNum = cachedEntry.pageNumber; // Restore the last viewed page
+        loadedFromCache = true;
+        renderingPhase = 'calculating_dimensions';
+        
+        // Calculate dimensions but don't apply them yet
+        if (showLogs) console.log('Calculating dimensions for cached PDF, container width:', containerDiv.clientWidth);
+        
+        const page = await pdfDoc.getPage(pageNum);
+        const containerWidth = containerDiv.clientWidth;
+        const viewport = page.getViewport({ scale: 1.0 });
+        scale = (containerWidth / viewport.width);
+        
+        // Store calculated dimensions
+        canvasWidth = viewport.width * scale;
+        canvasHeight = viewport.height * scale;
+        
+        if (showLogs) {
+          console.log('Dimensions calculated for cached PDF:', { 
+            containerWidth, 
+            originalWidth: viewport.width,
+            originalHeight: viewport.height,
+            scale,
+            canvasWidth, 
+            canvasHeight,
+            pageNum
+          });
+        }
+        
+        // Wait for the UI to update
+        await tick();
+        
+        // If canvasContainer is already bound, proceed with rendering
+        if (canvasContainer) {
+          if (showLogs) console.log('Canvas container available, rendering cached PDF');
+          await renderPDF(canvasWidth, canvasHeight);
+        }
+      } 
+      // Load the PDF from URL
+      else {
+        
+        renderingPhase = 'loading_pdf';
+        pdfLoadStartTime = Date.now();
+        
+        // Reset canvas size to initial dimensions during loading
+        canvasWidth = initialContainerWidth;
+        canvasHeight = initialContainerHeight;
+        
+        if (showLogs) console.log('Loading PDF from URL:', { url: absoluteUrl });
+
+        // Load PDF directly with URL
+        const loadingTask = pdfjsLib.getDocument(absoluteUrl);
+        pdfDoc = await loadingTask.promise;
+        if (showLogs) console.log('PDF loaded successfully:', pdfDoc);
+
+        // Update the page count
+        pageCount = pdfDoc.numPages;
+        pageNum = 1; // Start at first page for newly loaded PDFs
+        
+        // Cache the loaded PDF document
+        pdfCache.set(absoluteUrl, pdfDoc, pageNum);
+        
+        if (showLogs) {
+          console.log('PDF loaded successfully and cached:', { 
+            pageCount, 
+            loadTime: Math.round((Date.now() - pdfLoadStartTime) / 100) / 10 + 's'
+          });
+        }
+        
+        // Calculate dimensions but don't apply them yet
+        renderingPhase = 'calculating_dimensions';
+        if (showLogs) console.log('Calculating dimensions, container width:', containerDiv.clientWidth);
+        
+        const page = await pdfDoc.getPage(1);
+        const containerWidth = containerDiv.clientWidth;
+        const viewport = page.getViewport({ scale: 1.0 });
+        scale = (containerWidth / viewport.width);
+        
+        // Store calculated dimensions but don't apply them until rendering is complete
+        const calculatedWidth = viewport.width * scale;
+        const calculatedHeight = viewport.height * scale;
+        
+        if (showLogs) {
+          console.log('Dimensions calculated:', { 
+            containerWidth, 
+            originalWidth: viewport.width,
+            originalHeight: viewport.height,
+            scale,
+            calculatedWidth, 
+            calculatedHeight
+          });
+        }
+
+        // Wait for the UI to update
+        await tick();
+        
+        // If canvasContainer is already bound, proceed with rendering
+        if (canvasContainer) {
+          if (showLogs) console.log('Canvas container available, rendering PDF');
+          await renderPDF(calculatedWidth, calculatedHeight);
+        } else {
+          if (showLogs) console.log('Canvas container not available yet, waiting for binding');
+          // Store dimensions for later use when container becomes available
+          canvasWidth = calculatedWidth;
+          canvasHeight = calculatedHeight;
+          // The reactive statement will catch when canvasContainer becomes available
+        }
+      }
+    } catch (err) {
+      if(showLogs) console.error('Error loading PDF:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Failed to load PDF';
+      error = errorMessage;
+      dispatch('error', { message: errorMessage });
+      pdfDoc = null;
+      renderingPhase = 'error';
+      isCanvasReady = false;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function renderPDF(width?: number, height?: number) {
+    if (!pdfDoc) {
+      console.error('Cannot render PDF: missing PDF');
+      error = 'PDF not available';
+      return;
+    }
+    
+    if (!canvasContainer) {
+      console.error('Cannot render PDF: canvas container not available');
+      error = 'Canvas container not available';
+      return;
+    }
+    
+    try {
+      renderingPhase = 'rendering';
+      renderStartTime = Date.now();
+      if (showLogs) console.log('Starting PDF render');
+      
+      // Clear any existing canvas
+      canvasContainer.innerHTML = '';
+      
+      // Apply final dimensions if provided
+      if (width && height) {
+        canvasWidth = width;
+        canvasHeight = height;
+      }
+      
+      if (showLogs) {
+        console.log('Using dimensions for rendering:', {
+          canvasWidth,
+          canvasHeight
+        });
+      }
+      
+      // Create a new canvas element
+      const canvas = document.createElement('canvas');
+      canvas.className = 'max-w-full h-auto mx-auto';
+      canvas.width = canvasWidth;
+      canvas.height = canvasHeight;
+      
+      // Add the canvas to the container
+      canvasContainer.appendChild(canvas);
+      
+      if (showLogs) {
+        console.log('Canvas created and added to DOM:', {
+          width: canvas.width,
+          height: canvas.height
+        });
+      }
+      
+      // Render the current page (pageNum might be restored from cache)
+      await renderPage(pageNum, canvas);
+      
+      if (showLogs) console.log('Render complete, setting isCanvasReady to true');
+      renderingPhase = 'complete';
+      
+      // Now that rendering is complete, set isCanvasReady to true
+      // This will trigger the size change and content display
+      isCanvasReady = true;
+      
+      // Show PDF content after a short delay to ensure everything is ready
+      setTimeout(() => {
+        showPdfContent = true;
+      }, 100);
+    } catch (err) {
+      console.error('Error in renderPDF:', err);
+      error = err instanceof Error ? err.message : 'Failed to render PDF';
+      renderingPhase = 'error';
+    }
+  }
+
+  function getAbsoluteUrl(relativeUrl: string): string {
+    if (relativeUrl.startsWith('http://') || relativeUrl.startsWith('https://')) {
+      return relativeUrl;
+    }
+    const baseUrl = window.location.origin + (base || '');
+    const cleanRelativeUrl = relativeUrl.startsWith('/') ? relativeUrl.slice(1) : relativeUrl;
+    const cleanBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    return `${cleanBaseUrl}/${cleanRelativeUrl}`;
+  }
+
+  async function renderPage(num: number, canvas: HTMLCanvasElement) {
+    if (!pdfDoc) {
+      console.error('Cannot render: missing PDF');
+      return;
+    }
+    
+    if (!canvas) {
+      console.error('Cannot render: missing canvas');
+      return;
+    }
+
+    pageRendering = true;
+    const pageRenderStart = Date.now();
+    try {
+      if (showLogs) console.log('Starting page render:', num);
+      const page = await pdfDoc.getPage(num);
+      const scaledViewport = page.getViewport({ scale });
+      
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('Could not get canvas context');
+
+      if (showLogs) {
+        console.log('Rendering to canvas context:', { 
+          canvasWidth: canvas.width, 
+          canvasHeight: canvas.height,
+          viewportWidth: scaledViewport.width,
+          viewportHeight: scaledViewport.height
+        });
+      }
+
+      await page.render({
+        canvasContext: ctx,
+        viewport: scaledViewport
+      }).promise;
+
+      if (showLogs) {
+        console.log('Page rendered successfully', {
+          renderTime: Math.round((Date.now() - pageRenderStart) / 100) / 10 + 's',
+          totalTime: Math.round((Date.now() - renderStartTime) / 100) / 10 + 's'
+        });
+      }
+      
+      pageRendering = false;
+      pageNum = num;
+      
+      // Update the page number in the cache
+      if (pdfDoc && url) {
+        const absoluteUrl = getAbsoluteUrl(url);
+        pdfCache.updatePageNumber(absoluteUrl, pageNum);
+      }
+      
+      if (pageNumPending !== null) {
+        renderPage(pageNumPending, canvas);
+        pageNumPending = null;
+      }
+    } catch (err) {
+      console.error('Error rendering page:', err);
+      error = err instanceof Error ? err.message : 'Failed to render page';
+      pageRendering = false;
+      renderingPhase = 'error';
+    }
+  }
+
+  function queueRenderPage(num: number) {
+    if (pageRendering) {
+      pageNumPending = num;
+    } else {
+      // Get the canvas from the container
+      const canvas = canvasContainer?.querySelector('canvas') as HTMLCanvasElement;
+      if (canvas) {
+        renderPage(num, canvas);
+      } else {
+        console.error('Cannot queue render: no canvas found');
+      }
+    }
+  }
+
+  function onPrevPage() {
+    if (pageNum <= 1) return;
+    queueRenderPage(pageNum - 1);
+  }
+
+  function onNextPage() {
+    if (pageNum >= pageCount) return;
+    queueRenderPage(pageNum + 1);
+  }
+
+  // Dispatch the pageChange event when the page changes
+  $: if (pdfDoc && pageNum > 0 && pageCount > 0) {
+    dispatch('pageChange', { page: pageNum, totalPages: pageCount });
+  }
+
+  onDestroy(() => {
+    if (enableCacheClearing) {
+      window.removeEventListener('keydown', handleKeyDown);
+    }
+    
+    // Don't destroy the PDF document on component destroy
+    // as it's now cached in the store
+    // The store will handle proper cleanup when needed
+    
+    // Just clear the local reference
+    pdfDoc = null;
+  });
+</script>
+
+<!-- PDF Viewer HTML template -->
+
+<div class="{className ? className + ' ' : ''}pdf-viewer-container w-full h-full px-4 widgetic-colors relative" bind:this={containerDiv} style={style}>
+  <!-- Always render loading or error state on top of content -->
+  {#if !mounted || loading || (!isCanvasReady && !error)}
+    <div class="text-[hsl(var(--grey5))] p-6 absolute z-10 widgetic-colors flex items-center justify-center inset-0">
+      Loading PDF...
+    </div>
+  {:else if error}
+    <div class="pdf-error-overlay bg-[hsl(var(--grey1))] text-[hsl(var(--grey2))] inset-4 px-4 absolute z-10 flex flex-col items-center justify-center">
+      <p class="text-[hsl(var(--error))] mb-2">Failed to load PDF</p>
+      <p class="text-[hsl(var(--grey5))] text-sm">{error}</p>
+    </div>
+  {/if}
+  
+  <!-- Always render the content area regardless of loading state -->
+  <div class="pdf-root-container flex flex-col w-full {!isCanvasReady ? 'opacity-0' : 'opacity-100'} rounded-large bg-[hsl(var(--grey1))] relative"
+       style="height: {isCanvasReady ? 'auto' : `${initialContainerHeight}px`};">
+    <!-- Page Navigation Bar -->
+    <div class="page-navigation-bar flex items-center justify-center h-[54px] widgetic-colors border-b border-[hsl(var(--grey2))] w-full">
+      <div class="flex items-center gap-3 w-full max-w-[200px] justify-between px-0">
+        <button
+          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
+          onclick={onPrevPage}
+          disabled={pageNum <= 1}
+          aria-label="Previous page"
+        >
+          <IconChevronLeft 
+            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+          />
+        </button>
+        
+        <span class="subtext text-[hsl(var(--grey7))]">Page {pageNum} of {pageCount || '?'}</span>
+        
+        <button
+          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
+          onclick={onNextPage}
+          disabled={pageNum >= pageCount}
+          aria-label="Next page"
+        >
+          <IconChevronRight 
+            class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
+            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+          />
+        </button>
+      </div>
+    </div>
+
+    <!-- PDF Canvas Container - always rendered but initially hidden -->
+    <WScrollArea class="pdf-content-scroll-area" type="always" scrollOutside={true}>
+      <div class="canvas-container" bind:this={canvasContainer}
+           style="min-height: {initialContainerHeight}px; max-height: {scrolledAreaMaxHeight}px;" 
+      >
+        <!-- Canvas will be inserted programmatically here -->
+      </div>
+    </WScrollArea>
+  </div>
+</div>
+
+<style>
+  :global(.canvas-container canvas) {
+    margin: 0;
+  }
+  
+  /* Ensure the loading container has a minimum size */
+  .pdf-viewer-container {
+    min-width: 300px;
+    min-height: 200px;
+  }
+  
+  /* Add pseudo-element border ::after that stays on top */
+  .pdf-root-container::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid hsl(var(--grey2));
+    border-radius: var(--radius-large); /* Matches rounded-large */
+    z-index: 20; /* Higher than any child */
+    pointer-events: none; /* Allows clicking through the border */
+  }
+</style> 

package/dist/components/pdf/PDFViewer.svelte.d.ts

@@ -0,0 +1,32 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PdfViewer: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    url?: string;
+    enableCacheClearing?: boolean;
+}, {
+    error: CustomEvent<{
+        message: string;
+    }>;
+    pageChange: CustomEvent<{
+        page: number;
+        totalPages: number;
+    }>;
+    cacheCleared: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PdfViewer = InstanceType<typeof PdfViewer>;
+export default PdfViewer;