svelte-pdf-view 0.1.13 → 0.3.0

package/README.md

@@ -314,11 +314,9 @@ interface PdfViewerActions {
 />
 ```
 
-## Browser Support
+## Use Cases
 
-- Chrome/Edge 88+
-- Firefox 78+
-- Safari 14+
+**Texpile** ([texpile.com](https://texpile.com/)) uses this package to display generated documents (PDFs) directly in the browser.
 
 ## License
 

package/dist/PdfRenderer.svelte

@@ -7,6 +7,7 @@
 		type PdfSource
 	} from './pdf-viewer/context.js';
 	import { getPdfJs } from './pdf-viewer/pdfjs-singleton.js';
+	import { PdfPresentationMode } from './pdf-viewer/PdfPresentationMode.js';
 	import { rendererStyles } from './pdf-viewer/renderer-styles.js';
 
 	interface Props {
@@ -51,6 +52,17 @@
 	let viewer: import('./pdf-viewer/PDFViewerCore.js').PDFViewerCore | null = null;
 	let findController: import('./pdf-viewer/FindController.js').FindController | null = null;
 
+	// Presentation mode
+	const presentationMode = new PdfPresentationMode({
+		onStateChange: (newState) => {
+			viewerState.presentationMode = newState;
+		},
+		onPageChange: (pageNumber) => {
+			// Sync page number back to main viewer when changed in presentation mode
+			viewer?.scrollToPage(pageNumber);
+		}
+	});
+
 	async function loadPdf(source: PdfSource) {
 		if (!BROWSER || !scrollContainerEl) return;
 
@@ -127,10 +139,13 @@
 			}
 
 			const loadingTask = pdfjs.getDocument(documentSource);
-			const pdfDocument = await loadingTask.promise;
+			const loadedPdfDocument = await loadingTask.promise;
 
-			await newViewer.setDocument(pdfDocument);
-			findController.setDocument(pdfDocument);
+			await newViewer.setDocument(loadedPdfDocument);
+			findController.setDocument(loadedPdfDocument);
+
+			// Set document on presentation mode
+			presentationMode.setDocument(loadedPdfDocument);
 
 			viewer = newViewer;
 			viewerState.loading = false;
@@ -174,7 +189,14 @@
 				viewerState.searchTotal = 0;
 			}
 		},
-		download: async () => {} // Download is handled by PdfViewer, not renderer
+		download: async () => {}, // Download is handled by PdfViewer, not renderer
+		enterPresentationMode: async () => {
+			presentationMode.setCurrentPage(viewerState.currentPage);
+			return presentationMode.request();
+		},
+		exitPresentationMode: async () => {
+			await presentationMode.exit();
+		}
 	};
 
 	onMount(async () => {
@@ -225,6 +247,7 @@
 			viewer = null;
 		}
 		findController = null;
+		presentationMode.destroy();
 		// Note: Worker is a global singleton, not cleaned up per-component
 		// Use destroyPdfJs() from pdfjs-singleton.js if you need to fully cleanup
 	});

package/dist/PdfToolbar.svelte

@@ -7,7 +7,8 @@
 		Search,
 		ChevronLeft,
 		ChevronRight,
-		Download
+		Download,
+		Presentation
 	} from '@lucide/svelte';
 	import { getPdfViewerContext } from './pdf-viewer/context.js';
 
@@ -116,8 +117,15 @@
 		{/if}
 	</div>
 
-	<!-- Download -->
+	<!-- Presentation & Download -->
 	<div class="pdf-toolbar-group">
+		<button
+			onclick={() => actions.enterPresentationMode()}
+			aria-label="Presentation Mode"
+			title="Presentation Mode"
+		>
+			<Presentation size={18} />
+		</button>
 		<button onclick={() => actions.download()} aria-label="Download PDF" title="Download">
 			<Download size={18} />
 		</button>

package/dist/PdfViewer.svelte

@@ -8,6 +8,7 @@
 	import type { Snippet } from 'svelte';
 	import {
 		setPdfViewerContext,
+		PresentationModeState,
 		type PdfViewerState,
 		type PdfViewerActions,
 		type PdfSource
@@ -52,7 +53,8 @@
 		searchQuery: '',
 		searchCurrent: 0,
 		searchTotal: 0,
-		isSearching: false
+		isSearching: false,
+		presentationMode: PresentationModeState.NORMAL
 	});
 
 	// Renderer actions - will be populated when renderer mounts
@@ -116,7 +118,18 @@
 		searchNext: () => rendererActions?.searchNext(),
 		searchPrevious: () => rendererActions?.searchPrevious(),
 		clearSearch: () => rendererActions?.clearSearch(),
-		download: downloadPdf
+		download: downloadPdf,
+		enterPresentationMode: async () => {
+			if (rendererActions) {
+				return rendererActions.enterPresentationMode();
+			}
+			return false;
+		},
+		exitPresentationMode: async () => {
+			if (rendererActions) {
+				await rendererActions.exitPresentationMode();
+			}
+		}
 	};
 
 	// Set up context

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
 export type { PdfSource } from './pdf-viewer/context.js';
-export { getPdfViewerContext, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';
+export { getPdfViewerContext, PresentationModeState, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';
 export { destroyPdfJs } from './pdf-viewer/pdfjs-singleton.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 // Reexport your entry components here
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
 // Export context for custom toolbars
-export { getPdfViewerContext } from './pdf-viewer/context.js';
+export { getPdfViewerContext, PresentationModeState } from './pdf-viewer/context.js';
 // Export PDF.js singleton utilities
 export { destroyPdfJs } from './pdf-viewer/pdfjs-singleton.js';

package/dist/pdf-viewer/AnnotationLayerBuilder.d.ts

@@ -0,0 +1,54 @@
+/**
+ * AnnotationLayerBuilder - Renders PDF annotations (links, form widgets, popups).
+ * Adapted from PDF.js annotation_layer_builder.js
+ */
+import type { PDFPageProxy, PageViewport } from 'pdfjs-dist/legacy/build/pdf.mjs';
+import type { SimpleLinkService } from './SimpleLinkService.js';
+export interface AnnotationLayerBuilderOptions {
+    pdfPage: PDFPageProxy;
+    linkService: SimpleLinkService;
+    annotationStorage?: any;
+    imageResourcesPath?: string;
+    renderForms?: boolean;
+    onAppend?: (div: HTMLDivElement) => void;
+}
+export interface AnnotationLayerBuilderRenderOptions {
+    viewport: PageViewport;
+    intent?: string;
+}
+export declare class AnnotationLayerBuilder {
+    private pdfPage;
+    private linkService;
+    private annotationStorage;
+    private imageResourcesPath;
+    private renderForms;
+    private onAppend;
+    private annotationLayer;
+    div: HTMLDivElement | null;
+    private cancelled;
+    constructor(options: AnnotationLayerBuilderOptions);
+    /**
+     * Render the annotation layer.
+     */
+    render(options: AnnotationLayerBuilderRenderOptions): Promise<void>;
+    /**
+     * Update the annotation layer viewport.
+     */
+    update(viewport: PageViewport): void;
+    /**
+     * Cancel rendering.
+     */
+    cancel(): void;
+    /**
+     * Hide the annotation layer.
+     */
+    hide(): void;
+    /**
+     * Show the annotation layer.
+     */
+    show(): void;
+    /**
+     * Destroy the annotation layer.
+     */
+    destroy(): void;
+}

package/dist/pdf-viewer/AnnotationLayerBuilder.js

@@ -0,0 +1,145 @@
+/* Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Dynamically loaded pdfjs components
+let AnnotationLayer;
+async function ensurePdfJsLoaded() {
+    if (!AnnotationLayer) {
+        const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
+        AnnotationLayer = pdfjs.AnnotationLayer;
+    }
+}
+export class AnnotationLayerBuilder {
+    pdfPage;
+    linkService;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    annotationStorage;
+    imageResourcesPath;
+    renderForms;
+    onAppend;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    annotationLayer = null;
+    div = null;
+    cancelled = false;
+    constructor(options) {
+        this.pdfPage = options.pdfPage;
+        this.linkService = options.linkService;
+        this.annotationStorage = options.annotationStorage ?? null;
+        this.imageResourcesPath = options.imageResourcesPath ?? '';
+        this.renderForms = options.renderForms ?? true;
+        this.onAppend = options.onAppend ?? null;
+    }
+    /**
+     * Render the annotation layer.
+     */
+    async render(options) {
+        const { viewport, intent = 'display' } = options;
+        if (this.div) {
+            // Already rendered - just update
+            if (this.cancelled || !this.annotationLayer) {
+                return;
+            }
+            this.annotationLayer.update({
+                viewport: viewport.clone({ dontFlip: true })
+            });
+            return;
+        }
+        await ensurePdfJsLoaded();
+        const annotations = await this.pdfPage.getAnnotations({ intent });
+        if (this.cancelled) {
+            return;
+        }
+        // Create annotation layer div
+        this.div = document.createElement('div');
+        this.div.className = 'annotationLayer';
+        this.onAppend?.(this.div);
+        // Set layer dimensions directly (setLayerDimensions uses CSS round() which may not work everywhere)
+        const { width, height } = viewport;
+        this.div.style.width = `${Math.floor(width)}px`;
+        this.div.style.height = `${Math.floor(height)}px`;
+        // Initialize the annotation layer
+        this.annotationLayer = new AnnotationLayer({
+            div: this.div,
+            accessibilityManager: null,
+            annotationCanvasMap: null,
+            annotationEditorUIManager: null,
+            page: this.pdfPage,
+            viewport: viewport.clone({ dontFlip: true }),
+            structTreeLayer: null,
+            commentManager: null,
+            linkService: this.linkService,
+            annotationStorage: this.annotationStorage
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        });
+        if (annotations.length === 0) {
+            return;
+        }
+        // Render annotations
+        await this.annotationLayer.render({
+            annotations,
+            imageResourcesPath: this.imageResourcesPath,
+            renderForms: this.renderForms,
+            linkService: this.linkService,
+            downloadManager: undefined,
+            annotationStorage: this.annotationStorage,
+            enableScripting: false,
+            hasJSActions: false,
+            fieldObjects: null
+        });
+    }
+    /**
+     * Update the annotation layer viewport.
+     */
+    update(viewport) {
+        if (!this.div || !this.annotationLayer) {
+            return;
+        }
+        this.annotationLayer.update({
+            viewport: viewport.clone({ dontFlip: true })
+        });
+    }
+    /**
+     * Cancel rendering.
+     */
+    cancel() {
+        this.cancelled = true;
+    }
+    /**
+     * Hide the annotation layer.
+     */
+    hide() {
+        if (this.div) {
+            this.div.hidden = true;
+        }
+    }
+    /**
+     * Show the annotation layer.
+     */
+    show() {
+        if (this.div) {
+            this.div.hidden = false;
+        }
+    }
+    /**
+     * Destroy the annotation layer.
+     */
+    destroy() {
+        this.cancel();
+        if (this.div) {
+            this.div.remove();
+            this.div = null;
+        }
+        this.annotationLayer = null;
+    }
+}

package/dist/pdf-viewer/PDFPageView.d.ts

@@ -1,9 +1,10 @@
 /**
- * PDFPageView - Renders a single PDF page with canvas and text layer.
+ * PDFPageView - Renders a single PDF page with canvas, text layer, and annotation layer.
  * This is a derivative work based on PDF.js pdf_page_view.js
  */
 import type { PDFPageProxy, PageViewport } from 'pdfjs-dist/legacy/build/pdf.mjs';
 import type { EventBus } from './EventBus.js';
+import type { SimpleLinkService } from './SimpleLinkService.js';
 export interface PDFPageViewOptions {
     container: HTMLElement;
     id: number;
@@ -11,6 +12,7 @@ export interface PDFPageViewOptions {
     eventBus: EventBus;
     scale?: number;
     rotation?: number;
+    linkService?: SimpleLinkService;
 }
 export declare const RenderingStates: {
     readonly INITIAL: 0;
@@ -33,6 +35,9 @@ export declare class PDFPageView {
     private canvasWrapper;
     private textLayerDiv;
     private loadingDiv;
+    private linkService;
+    private annotationLayerBuilder;
+    private annotationLayerRendered;
     renderingState: RenderingState;
     private renderTask;
     private textLayer;
@@ -51,6 +56,7 @@ export declare class PDFPageView {
     reset(): void;
     draw(): Promise<void>;
     private renderTextLayer;
+    private renderAnnotationLayer;
     cancelRendering(): void;
     destroy(): void;
     get width(): number;

package/dist/pdf-viewer/PDFPageView.js

@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { AnnotationLayerBuilder } from './AnnotationLayerBuilder.js';
 // Dynamically loaded pdfjs utilities
 let setLayerDimensions;
 async function ensurePdfJsLoaded() {
@@ -40,6 +41,10 @@ export class PDFPageView {
     canvasWrapper = null;
     textLayerDiv = null;
     loadingDiv = null;
+    // Annotation layer
+    linkService = null;
+    annotationLayerBuilder = null;
+    annotationLayerRendered = false;
     renderingState = RenderingStates.INITIAL;
     renderTask = null;
     // Text layer instance for updates
@@ -55,6 +60,7 @@ export class PDFPageView {
         this.scale = options.scale ?? 1.0;
         this.rotation = options.rotation ?? 0;
         this.viewport = options.defaultViewport;
+        this.linkService = options.linkService ?? null;
         // Create page container
         this.div = document.createElement('div');
         this.div.className = 'page';
@@ -120,6 +126,10 @@ export class PDFPageView {
                 });
                 this.textLayerDiv.hidden = false;
             }
+            // Update annotation layer
+            if (this.annotationLayerBuilder && this.annotationLayerRendered) {
+                this.annotationLayerBuilder.update(this.viewport);
+            }
             // Re-render canvas
             this.resetCanvas();
             this.draw();
@@ -163,6 +173,12 @@ export class PDFPageView {
         this.textLayerRendered = false;
         this.textDivs = [];
         this.textContentItemsStr = [];
+        // Clear annotation layer
+        if (this.annotationLayerBuilder) {
+            this.annotationLayerBuilder.destroy();
+            this.annotationLayerBuilder = null;
+        }
+        this.annotationLayerRendered = false;
         // Show loading
         if (this.loadingDiv) {
             this.loadingDiv.style.display = '';
@@ -205,6 +221,10 @@ export class PDFPageView {
             if (!this.textLayerRendered) {
                 await this.renderTextLayer();
             }
+            // Render annotation layer (only if not already rendered)
+            if (!this.annotationLayerRendered) {
+                await this.renderAnnotationLayer();
+            }
             this.renderingState = RenderingStates.FINISHED;
             this.eventBus.dispatch('pagerendered', {
                 pageNumber: this.id,
@@ -271,6 +291,37 @@ export class PDFPageView {
             console.error('Error rendering text layer:', error);
         }
     }
+    async renderAnnotationLayer() {
+        if (!this.pdfPage || !this.linkService) {
+            return;
+        }
+        // If annotation layer already rendered, just update it
+        if (this.annotationLayerRendered && this.annotationLayerBuilder) {
+            this.annotationLayerBuilder.update(this.viewport);
+            return;
+        }
+        try {
+            this.annotationLayerBuilder = new AnnotationLayerBuilder({
+                pdfPage: this.pdfPage,
+                linkService: this.linkService,
+                renderForms: true,
+                onAppend: (div) => {
+                    this.div.appendChild(div);
+                }
+            });
+            await this.annotationLayerBuilder.render({
+                viewport: this.viewport
+            });
+            this.annotationLayerRendered = true;
+            this.eventBus.dispatch('annotationlayerrendered', {
+                pageNumber: this.id,
+                source: this
+            });
+        }
+        catch (error) {
+            console.error('Error rendering annotation layer:', error);
+        }
+    }
     cancelRendering() {
         if (this.renderTask) {
             this.renderTask.cancel();

package/dist/pdf-viewer/PDFViewerCore.d.ts

@@ -22,6 +22,7 @@ export declare class PDFViewerCore {
     private scrollAbortController;
     private renderingQueue;
     private isRendering;
+    private linkService;
     constructor(options: PDFViewerOptions);
     private setupScrollListener;
     setDocument(pdfDocument: PDFDocumentProxy): Promise<void>;

package/dist/pdf-viewer/PDFViewerCore.js

@@ -14,6 +14,7 @@
  */
 import { EventBus } from './EventBus.js';
 import { PDFPageView, RenderingStates } from './PDFPageView.js';
+import { SimpleLinkService } from './SimpleLinkService.js';
 const DEFAULT_SCALE = 1.0;
 const MIN_SCALE = 0.1;
 const MAX_SCALE = 10.0;
@@ -31,6 +32,8 @@ export class PDFViewerCore {
     scrollAbortController = null;
     renderingQueue = new Set();
     isRendering = false;
+    // Link service for annotation navigation
+    linkService;
     constructor(options) {
         this.container = options.container;
         this.eventBus = options.eventBus ?? new EventBus();
@@ -40,6 +43,10 @@ export class PDFViewerCore {
         this.viewer = document.createElement('div');
         this.viewer.className = 'pdfViewer';
         this.container.appendChild(this.viewer);
+        // Create link service for annotation navigation
+        this.linkService = new SimpleLinkService({
+            eventBus: this.eventBus
+        });
         // Setup scroll listener for lazy rendering
         this.setupScrollListener();
     }
@@ -61,6 +68,9 @@ export class PDFViewerCore {
         this.cleanup();
         this.pdfDocument = pdfDocument;
         const numPages = pdfDocument.numPages;
+        // Setup link service with document and viewer
+        this.linkService.setDocument(pdfDocument);
+        this.linkService.setViewer(this);
         // Create page views
         for (let i = 1; i <= numPages; i++) {
             const page = await pdfDocument.getPage(i);
@@ -74,7 +84,8 @@ export class PDFViewerCore {
                 defaultViewport: viewport,
                 eventBus: this.eventBus,
                 scale: this.currentScale,
-                rotation: this.currentRotation
+                rotation: this.currentRotation,
+                linkService: this.linkService
             });
             pageView.setPdfPage(page);
             this.pages.push(pageView);

package/dist/pdf-viewer/PdfPresentationMode.d.ts

@@ -0,0 +1,96 @@
+/**
+ * PdfPresentationMode - Fullscreen presentation mode for PDF viewing.
+ * This is a derivative work based on PDF.js pdf_presentation_mode.js
+ *
+ * Features:
+ * - Browser fullscreen mode
+ * - Black background
+ * - Single page view scaled to fit screen
+ * - No text layer or toolbar
+ * - Mouse/keyboard/touch navigation
+ */
+import type { PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
+export declare enum PresentationModeState {
+    UNKNOWN = 0,
+    NORMAL = 1,
+    CHANGING = 2,
+    FULLSCREEN = 3
+}
+export interface PresentationModeCallbacks {
+    onStateChange?: (state: PresentationModeState) => void;
+    onPageChange?: (pageNumber: number) => void;
+}
+export declare class PdfPresentationMode {
+    private state;
+    private pdfDocument;
+    private currentPageNumber;
+    private totalPages;
+    private container;
+    private canvas;
+    private callbacks;
+    private fullscreenChangeAbortController;
+    private windowAbortController;
+    private mouseScrollTimeStamp;
+    private mouseScrollDelta;
+    private touchSwipeState;
+    private renderingPage;
+    constructor(callbacks?: PresentationModeCallbacks);
+    /**
+     * Set the PDF document for presentation
+     */
+    setDocument(pdfDocument: PDFDocumentProxy | null): void;
+    /**
+     * Set the current page number (used when entering presentation mode)
+     */
+    setCurrentPage(pageNumber: number): void;
+    /**
+     * Check if presentation mode is active
+     */
+    get active(): boolean;
+    /**
+     * Get current state
+     */
+    get currentState(): PresentationModeState;
+    /**
+     * Request entering fullscreen presentation mode
+     */
+    request(): Promise<boolean>;
+    /**
+     * Exit presentation mode
+     */
+    exit(): Promise<void>;
+    /**
+     * Go to next page
+     */
+    nextPage(): boolean;
+    /**
+     * Go to previous page
+     */
+    previousPage(): boolean;
+    /**
+     * Go to a specific page
+     */
+    goToPage(pageNumber: number): boolean;
+    /**
+     * Destroy and cleanup
+     */
+    destroy(): void;
+    private createPresentationContainer;
+    private destroyPresentationContainer;
+    private renderCurrentPage;
+    private notifyStateChange;
+    private enter;
+    private doExit;
+    private handleMouseWheel;
+    private normalizeWheelDelta;
+    private handleMouseDown;
+    private handleKeyDown;
+    private handleContextMenu;
+    private handleTouchSwipe;
+    private handleResize;
+    private resetMouseScrollState;
+    private addWindowListeners;
+    private removeWindowListeners;
+    private addFullscreenChangeListeners;
+    private removeFullscreenChangeListeners;
+}