svelte-pdf-view 0.1.0

package/dist/pdf-viewer/PDFPageView.js

@@ -0,0 +1,281 @@
+/* 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.
+ */
+import { setLayerDimensions } from 'pdfjs-dist';
+export const RenderingStates = {
+    INITIAL: 0,
+    RUNNING: 1,
+    PAUSED: 2,
+    FINISHED: 3
+};
+export class PDFPageView {
+    id;
+    eventBus;
+    container;
+    viewport;
+    pdfPage = null;
+    scale;
+    rotation;
+    pdfPageRotate = 0;
+    div;
+    canvas = null;
+    canvasWrapper = null;
+    textLayerDiv = null;
+    loadingDiv = null;
+    renderingState = RenderingStates.INITIAL;
+    renderTask = null;
+    // Text layer instance for updates
+    textLayer = null;
+    textLayerRendered = false;
+    // Text layer data for search
+    textDivs = [];
+    textContentItemsStr = [];
+    constructor(options) {
+        this.id = options.id;
+        this.container = options.container;
+        this.eventBus = options.eventBus;
+        this.scale = options.scale ?? 1.0;
+        this.rotation = options.rotation ?? 0;
+        this.viewport = options.defaultViewport;
+        // Create page container
+        this.div = document.createElement('div');
+        this.div.className = 'page';
+        this.div.setAttribute('data-page-number', String(this.id));
+        this.div.setAttribute('role', 'region');
+        this.setDimensions();
+        this.container.appendChild(this.div);
+        // Add loading indicator
+        this.loadingDiv = document.createElement('div');
+        this.loadingDiv.className = 'loadingIcon';
+        this.loadingDiv.textContent = 'Loading...';
+        this.div.appendChild(this.loadingDiv);
+    }
+    setDimensions() {
+        const { width, height } = this.viewport;
+        this.div.style.width = `${Math.floor(width)}px`;
+        this.div.style.height = `${Math.floor(height)}px`;
+        // Set CSS variables for text layer scaling
+        // viewport.scale already includes our scale factor
+        this.div.style.setProperty('--scale-factor', String(this.viewport.scale));
+        // Set rotation attribute for text layer
+        const totalRotation = (this.rotation + this.pdfPageRotate) % 360;
+        this.div.setAttribute('data-main-rotation', String(totalRotation));
+        // Update text layer dimensions if it exists
+        // mustFlip=false because the text layer uses raw page coordinates
+        // and rotation is handled via CSS transforms
+        if (this.textLayerDiv) {
+            setLayerDimensions(this.textLayerDiv, this.viewport, /* mustFlip */ false);
+        }
+    }
+    setPdfPage(pdfPage) {
+        this.pdfPage = pdfPage;
+        this.pdfPageRotate = pdfPage.rotate;
+        this.updateViewport();
+    }
+    updateViewport() {
+        if (!this.pdfPage)
+            return;
+        const totalRotation = (this.rotation + this.pdfPageRotate) % 360;
+        this.viewport = this.pdfPage.getViewport({
+            scale: this.scale,
+            rotation: totalRotation
+        });
+        this.setDimensions();
+    }
+    update({ scale, rotation }) {
+        if (scale !== undefined) {
+            this.scale = scale;
+        }
+        if (rotation !== undefined) {
+            this.rotation = rotation;
+        }
+        this.updateViewport();
+        // Re-render if already rendered
+        if (this.renderingState === RenderingStates.FINISHED) {
+            // Update text layer - TextLayer.update() handles both scale and rotation
+            // Rotation is applied via CSS transforms based on data-main-rotation attribute
+            if (this.textLayer && this.textLayerRendered) {
+                this.textLayerDiv.hidden = true;
+                this.textLayer.update({
+                    viewport: this.viewport
+                });
+                this.textLayerDiv.hidden = false;
+            }
+            // Re-render canvas
+            this.resetCanvas();
+            this.draw();
+        }
+    }
+    resetCanvas() {
+        this.cancelRendering();
+        this.renderingState = RenderingStates.INITIAL;
+        // Clear canvas only
+        if (this.canvas) {
+            this.canvas.width = 0;
+            this.canvas.height = 0;
+            this.canvas.remove();
+            this.canvas = null;
+        }
+        if (this.canvasWrapper) {
+            this.canvasWrapper.remove();
+            this.canvasWrapper = null;
+        }
+    }
+    reset() {
+        this.cancelRendering();
+        this.renderingState = RenderingStates.INITIAL;
+        // Clear canvas
+        if (this.canvas) {
+            this.canvas.width = 0;
+            this.canvas.height = 0;
+            this.canvas.remove();
+            this.canvas = null;
+        }
+        if (this.canvasWrapper) {
+            this.canvasWrapper.remove();
+            this.canvasWrapper = null;
+        }
+        // Clear text layer
+        if (this.textLayerDiv) {
+            this.textLayerDiv.remove();
+            this.textLayerDiv = null;
+        }
+        this.textLayer = null;
+        this.textLayerRendered = false;
+        this.textDivs = [];
+        this.textContentItemsStr = [];
+        // Show loading
+        if (this.loadingDiv) {
+            this.loadingDiv.style.display = '';
+        }
+    }
+    async draw() {
+        if (!this.pdfPage || this.renderingState !== RenderingStates.INITIAL) {
+            return;
+        }
+        this.renderingState = RenderingStates.RUNNING;
+        try {
+            // Hide loading indicator
+            if (this.loadingDiv) {
+                this.loadingDiv.style.display = 'none';
+            }
+            // Create canvas wrapper
+            this.canvasWrapper = document.createElement('div');
+            this.canvasWrapper.className = 'canvasWrapper';
+            this.div.appendChild(this.canvasWrapper);
+            // Create and render canvas
+            this.canvas = document.createElement('canvas');
+            this.canvas.className = 'pdf-canvas';
+            this.canvasWrapper.appendChild(this.canvas);
+            const outputScale = window.devicePixelRatio || 1;
+            const { width, height } = this.viewport;
+            this.canvas.width = Math.floor(width * outputScale);
+            this.canvas.height = Math.floor(height * outputScale);
+            this.canvas.style.width = `${Math.floor(width)}px`;
+            this.canvas.style.height = `${Math.floor(height)}px`;
+            const ctx = this.canvas.getContext('2d');
+            ctx.scale(outputScale, outputScale);
+            this.renderTask = this.pdfPage.render({
+                canvasContext: ctx,
+                viewport: this.viewport,
+                canvas: this.canvas
+            });
+            await this.renderTask.promise;
+            this.renderTask = null;
+            // Render text layer for search (only if not already rendered)
+            if (!this.textLayerRendered) {
+                await this.renderTextLayer();
+            }
+            this.renderingState = RenderingStates.FINISHED;
+            this.eventBus.dispatch('pagerendered', {
+                pageNumber: this.id,
+                source: this
+            });
+        }
+        catch (error) {
+            if (error.name === 'RenderingCancelledException') {
+                return;
+            }
+            this.renderingState = RenderingStates.INITIAL;
+            console.error('Error rendering page:', error);
+        }
+    }
+    async renderTextLayer() {
+        if (!this.pdfPage)
+            return;
+        // If text layer already rendered, just update it
+        if (this.textLayerRendered && this.textLayer) {
+            this.textLayerDiv.hidden = true;
+            this.textLayer.update({ viewport: this.viewport });
+            this.textLayerDiv.hidden = false;
+            return;
+        }
+        // Create text layer div
+        this.textLayerDiv = document.createElement('div');
+        this.textLayerDiv.className = 'textLayer';
+        this.div.appendChild(this.textLayerDiv);
+        try {
+            // Import TextLayer from pdfjs-dist
+            const { TextLayer } = await import('pdfjs-dist');
+            const textContent = await this.pdfPage.getTextContent();
+            this.textDivs = [];
+            this.textContentItemsStr = [];
+            // Set text layer dimensions using PDF.js utility
+            // mustFlip=false because text layer uses raw page coordinates
+            // and rotation is handled via CSS transforms
+            setLayerDimensions(this.textLayerDiv, this.viewport, /* mustFlip */ false);
+            // Use PDF.js TextLayer for proper positioning
+            this.textLayer = new TextLayer({
+                textContentSource: textContent,
+                container: this.textLayerDiv,
+                viewport: this.viewport
+            });
+            await this.textLayer.render();
+            this.textLayerRendered = true;
+            // Collect text divs and their content for search highlighting
+            // We extract text from the rendered spans to ensure 1:1 correspondence
+            // between textDivs and textContentItemsStr
+            const spans = this.textLayerDiv.querySelectorAll('span:not(.markedContent)');
+            spans.forEach((span) => {
+                this.textDivs.push(span);
+                this.textContentItemsStr.push(span.textContent || '');
+            });
+            this.eventBus.dispatch('textlayerrendered', {
+                pageNumber: this.id,
+                source: this
+            });
+        }
+        catch (error) {
+            console.error('Error rendering text layer:', error);
+        }
+    }
+    cancelRendering() {
+        if (this.renderTask) {
+            this.renderTask.cancel();
+            this.renderTask = null;
+        }
+    }
+    destroy() {
+        this.cancelRendering();
+        this.reset();
+        this.pdfPage?.cleanup();
+        this.div.remove();
+    }
+    get width() {
+        return this.viewport.width;
+    }
+    get height() {
+        return this.viewport.height;
+    }
+}

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

@@ -0,0 +1,45 @@
+/**
+ * PDFViewerCore - Main viewer that manages all pages in a scroll container.
+ * This is a derivative work based on PDF.js pdf_viewer.js
+ */
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import { EventBus } from './EventBus.js';
+import { PDFPageView } from './PDFPageView.js';
+export interface PDFViewerOptions {
+    container: HTMLElement;
+    eventBus?: EventBus;
+    initialScale?: number;
+    initialRotation?: number;
+}
+export declare class PDFViewerCore {
+    readonly container: HTMLElement;
+    readonly viewer: HTMLDivElement;
+    readonly eventBus: EventBus;
+    private pdfDocument;
+    private pages;
+    private currentScale;
+    private currentRotation;
+    private scrollAbortController;
+    private renderingQueue;
+    private isRendering;
+    constructor(options: PDFViewerOptions);
+    private setupScrollListener;
+    setDocument(pdfDocument: PDFDocumentProxy): Promise<void>;
+    private getVisiblePages;
+    private updateVisiblePages;
+    private processRenderingQueue;
+    get scale(): number;
+    set scale(value: number);
+    get rotation(): number;
+    set rotation(value: number);
+    zoomIn(): void;
+    zoomOut(): void;
+    rotateClockwise(): void;
+    rotateCounterClockwise(): void;
+    scrollToPage(pageNumber: number): void;
+    get pagesCount(): number;
+    get currentPageNumber(): number;
+    getPageView(pageIndex: number): PDFPageView | undefined;
+    cleanup(): void;
+    destroy(): void;
+}

package/dist/pdf-viewer/PDFViewerCore.js

@@ -0,0 +1,225 @@
+/* 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.
+ */
+import { EventBus } from './EventBus.js';
+import { PDFPageView, RenderingStates } from './PDFPageView.js';
+const DEFAULT_SCALE = 1.0;
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 10.0;
+const DEFAULT_SCALE_DELTA = 0.1;
+// Number of pages to render around the visible ones
+const PAGES_TO_PRERENDER = 2;
+export class PDFViewerCore {
+    container;
+    viewer;
+    eventBus;
+    pdfDocument = null;
+    pages = [];
+    currentScale;
+    currentRotation;
+    scrollAbortController = null;
+    renderingQueue = new Set();
+    isRendering = false;
+    constructor(options) {
+        this.container = options.container;
+        this.eventBus = options.eventBus ?? new EventBus();
+        this.currentScale = options.initialScale ?? DEFAULT_SCALE;
+        this.currentRotation = options.initialRotation ?? 0;
+        // Create viewer div inside container
+        this.viewer = document.createElement('div');
+        this.viewer.className = 'pdfViewer';
+        this.container.appendChild(this.viewer);
+        // Setup scroll listener for lazy rendering
+        this.setupScrollListener();
+    }
+    setupScrollListener() {
+        this.scrollAbortController?.abort();
+        this.scrollAbortController = new AbortController();
+        let scrollTimeout = null;
+        this.container.addEventListener('scroll', () => {
+            if (scrollTimeout) {
+                clearTimeout(scrollTimeout);
+            }
+            scrollTimeout = setTimeout(() => {
+                this.updateVisiblePages();
+            }, 100);
+        }, { signal: this.scrollAbortController.signal });
+    }
+    async setDocument(pdfDocument) {
+        // Cleanup previous document
+        this.cleanup();
+        this.pdfDocument = pdfDocument;
+        const numPages = pdfDocument.numPages;
+        // Create page views
+        for (let i = 1; i <= numPages; i++) {
+            const page = await pdfDocument.getPage(i);
+            const viewport = page.getViewport({
+                scale: this.currentScale,
+                rotation: this.currentRotation
+            });
+            const pageView = new PDFPageView({
+                container: this.viewer,
+                id: i,
+                defaultViewport: viewport,
+                eventBus: this.eventBus,
+                scale: this.currentScale,
+                rotation: this.currentRotation
+            });
+            pageView.setPdfPage(page);
+            this.pages.push(pageView);
+        }
+        this.eventBus.dispatch('pagesloaded', { pagesCount: numPages });
+        // Initial render of visible pages
+        this.updateVisiblePages();
+    }
+    getVisiblePages() {
+        const containerRect = this.container.getBoundingClientRect();
+        const containerTop = this.container.scrollTop;
+        const containerBottom = containerTop + containerRect.height;
+        let firstVisible = -1;
+        let lastVisible = -1;
+        const visibleIds = new Set();
+        let currentTop = 0;
+        for (let i = 0; i < this.pages.length; i++) {
+            const page = this.pages[i];
+            const pageBottom = currentTop + page.height + 10; // 10px margin
+            if (pageBottom >= containerTop && currentTop <= containerBottom) {
+                if (firstVisible === -1) {
+                    firstVisible = i;
+                }
+                lastVisible = i;
+                visibleIds.add(i + 1); // Page numbers are 1-indexed
+            }
+            currentTop = pageBottom;
+        }
+        return {
+            first: firstVisible === -1 ? 0 : firstVisible,
+            last: lastVisible === -1 ? 0 : lastVisible,
+            ids: visibleIds
+        };
+    }
+    updateVisiblePages() {
+        if (!this.pdfDocument || this.pages.length === 0)
+            return;
+        const visible = this.getVisiblePages();
+        // Calculate which pages to render (visible + buffer)
+        const startPage = Math.max(0, visible.first - PAGES_TO_PRERENDER);
+        const endPage = Math.min(this.pages.length - 1, visible.last + PAGES_TO_PRERENDER);
+        // Queue pages for rendering
+        for (let i = startPage; i <= endPage; i++) {
+            const page = this.pages[i];
+            if (page.renderingState === RenderingStates.INITIAL) {
+                this.renderingQueue.add(i);
+            }
+        }
+        this.processRenderingQueue();
+        this.eventBus.dispatch('updateviewarea', {
+            location: {
+                pageNumber: visible.first + 1,
+                scale: this.currentScale,
+                rotation: this.currentRotation
+            }
+        });
+    }
+    async processRenderingQueue() {
+        if (this.isRendering || this.renderingQueue.size === 0)
+            return;
+        this.isRendering = true;
+        while (this.renderingQueue.size > 0) {
+            const pageIndex = this.renderingQueue.values().next().value;
+            this.renderingQueue.delete(pageIndex);
+            const page = this.pages[pageIndex];
+            if (page && page.renderingState === RenderingStates.INITIAL) {
+                await page.draw();
+            }
+        }
+        this.isRendering = false;
+    }
+    get scale() {
+        return this.currentScale;
+    }
+    set scale(value) {
+        const newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, value));
+        if (newScale === this.currentScale)
+            return;
+        this.currentScale = newScale;
+        // Update all pages
+        for (const page of this.pages) {
+            page.update({ scale: newScale });
+        }
+        this.eventBus.dispatch('scalechanged', { scale: newScale });
+        this.updateVisiblePages();
+    }
+    get rotation() {
+        return this.currentRotation;
+    }
+    set rotation(value) {
+        const newRotation = ((value % 360) + 360) % 360;
+        if (newRotation === this.currentRotation)
+            return;
+        this.currentRotation = newRotation;
+        // Update all pages
+        for (const page of this.pages) {
+            page.update({ rotation: newRotation });
+        }
+        this.eventBus.dispatch('rotationchanged', { rotation: newRotation });
+        this.updateVisiblePages();
+    }
+    zoomIn() {
+        this.scale = this.currentScale + DEFAULT_SCALE_DELTA;
+    }
+    zoomOut() {
+        this.scale = this.currentScale - DEFAULT_SCALE_DELTA;
+    }
+    rotateClockwise() {
+        this.rotation = this.currentRotation + 90;
+    }
+    rotateCounterClockwise() {
+        this.rotation = this.currentRotation - 90;
+    }
+    scrollToPage(pageNumber) {
+        if (pageNumber < 1 || pageNumber > this.pages.length)
+            return;
+        const pageView = this.pages[pageNumber - 1];
+        pageView.div.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        this.eventBus.dispatch('pagechanged', { pageNumber });
+    }
+    get pagesCount() {
+        return this.pages.length;
+    }
+    get currentPageNumber() {
+        const visible = this.getVisiblePages();
+        return visible.first + 1;
+    }
+    getPageView(pageIndex) {
+        return this.pages[pageIndex];
+    }
+    cleanup() {
+        // Cancel all rendering
+        for (const page of this.pages) {
+            page.destroy();
+        }
+        this.pages = [];
+        this.renderingQueue.clear();
+        // Clear viewer
+        this.viewer.innerHTML = '';
+        this.pdfDocument = null;
+    }
+    destroy() {
+        this.scrollAbortController?.abort();
+        this.cleanup();
+        this.eventBus.destroy();
+        this.viewer.remove();
+    }
+}

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

@@ -0,0 +1,31 @@
+export interface PdfViewerState {
+    loading: boolean;
+    error: string | null;
+    totalPages: number;
+    currentPage: number;
+    scale: number;
+    rotation: number;
+    searchQuery: string;
+    searchCurrent: number;
+    searchTotal: number;
+    isSearching: boolean;
+}
+export interface PdfViewerActions {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    setScale: (scale: number) => void;
+    rotateClockwise: () => void;
+    rotateCounterClockwise: () => void;
+    goToPage: (page: number) => void;
+    search: (query: string) => Promise<void>;
+    searchNext: () => void;
+    searchPrevious: () => void;
+    clearSearch: () => void;
+}
+export interface PdfViewerContext {
+    state: PdfViewerState;
+    actions: PdfViewerActions;
+    _registerRenderer: (renderer: PdfViewerActions) => void;
+}
+export declare function setPdfViewerContext(ctx: PdfViewerContext): void;
+export declare function getPdfViewerContext(): PdfViewerContext;

package/dist/pdf-viewer/context.js

@@ -0,0 +1,15 @@
+/**
+ * PDF Viewer Context - Shared state between toolbar and renderer
+ */
+import { getContext, setContext } from 'svelte';
+const PDF_VIEWER_CONTEXT_KEY = Symbol('pdf-viewer');
+export function setPdfViewerContext(ctx) {
+    setContext(PDF_VIEWER_CONTEXT_KEY, ctx);
+}
+export function getPdfViewerContext() {
+    const ctx = getContext(PDF_VIEWER_CONTEXT_KEY);
+    if (!ctx) {
+        throw new Error('PdfToolbar must be used inside a PdfViewer component');
+    }
+    return ctx;
+}