svelte-pdf-view 0.1.0

package/dist/pdf-viewer/EventBus.js

@@ -0,0 +1,42 @@
+/* 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.
+ */
+/**
+ * Simple event bus for PDF viewer component communication.
+ * This is a derivative work based on PDF.js event_utils.js
+ */
+export class EventBus {
+    listeners = new Map();
+    on(eventName, listener) {
+        if (!this.listeners.has(eventName)) {
+            this.listeners.set(eventName, new Set());
+        }
+        this.listeners.get(eventName).add(listener);
+    }
+    off(eventName, listener) {
+        this.listeners.get(eventName)?.delete(listener);
+    }
+    dispatch(eventName, data) {
+        const eventListeners = this.listeners.get(eventName);
+        if (!eventListeners || eventListeners.size === 0) {
+            return;
+        }
+        for (const listener of eventListeners) {
+            listener({ source: this, ...data });
+        }
+    }
+    destroy() {
+        this.listeners.clear();
+    }
+}

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

@@ -0,0 +1,53 @@
+/**
+ * FindController - Text search functionality for PDF viewer.
+ * This is a derivative work based on PDF.js pdf_find_controller.js and text_highlighter.js
+ */
+import type { EventBus } from './EventBus.js';
+import type { PDFViewerCore } from './PDFViewerCore.js';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+export declare const FindState: {
+    readonly FOUND: 0;
+    readonly NOT_FOUND: 1;
+    readonly WRAPPED: 2;
+    readonly PENDING: 3;
+};
+export interface FindOptions {
+    query: string;
+    highlightAll?: boolean;
+    caseSensitive?: boolean;
+    entireWord?: boolean;
+    findPrevious?: boolean;
+}
+export declare class FindController {
+    private viewer;
+    private eventBus;
+    private pdfDocument;
+    private query;
+    private caseSensitive;
+    private entireWord;
+    private highlightAll;
+    private pageContents;
+    private extractTextPromises;
+    private pageMatches;
+    private pageMatchesLength;
+    private allMatches;
+    private selectedMatchIndex;
+    private matchesCountTotal;
+    constructor(viewer: PDFViewerCore, eventBus: EventBus);
+    setDocument(pdfDocument: PDFDocumentProxy): void;
+    private extractText;
+    find(options: FindOptions): Promise<void>;
+    findNext(): void;
+    findPrevious(): void;
+    private highlightAllPages;
+    private highlightPage;
+    private convertMatches;
+    private renderMatches;
+    private scrollToSelectedMatch;
+    private clearHighlights;
+    get matchesCount(): {
+        current: number;
+        total: number;
+    };
+    reset(): void;
+}

package/dist/pdf-viewer/FindController.js

@@ -0,0 +1,423 @@
+/* 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.
+ */
+export const FindState = {
+    FOUND: 0,
+    NOT_FOUND: 1,
+    WRAPPED: 2,
+    PENDING: 3
+};
+export class FindController {
+    viewer;
+    eventBus;
+    pdfDocument = null;
+    query = '';
+    caseSensitive = false;
+    entireWord = false;
+    highlightAll = true;
+    // Page text content extracted directly from PDF
+    pageContents = [];
+    extractTextPromises = [];
+    // Matches per page
+    pageMatches = [];
+    pageMatchesLength = [];
+    // Flattened matches for navigation
+    allMatches = [];
+    selectedMatchIndex = -1;
+    matchesCountTotal = 0;
+    constructor(viewer, eventBus) {
+        this.viewer = viewer;
+        this.eventBus = eventBus;
+    }
+    setDocument(pdfDocument) {
+        this.pdfDocument = pdfDocument;
+        this.pageContents = [];
+        this.extractTextPromises = [];
+        this.reset();
+    }
+    async extractText() {
+        if (!this.pdfDocument || this.extractTextPromises.length > 0) {
+            return;
+        }
+        const numPages = this.pdfDocument.numPages;
+        for (let i = 0; i < numPages; i++) {
+            const promise = (async () => {
+                try {
+                    const page = await this.pdfDocument.getPage(i + 1);
+                    // Don't use disableNormalization - let PDF.js normalize the text
+                    // This matches how TextLayer will render it
+                    const textContent = await page.getTextContent();
+                    const strBuf = [];
+                    for (const item of textContent.items) {
+                        if ('str' in item) {
+                            strBuf.push(item.str);
+                        }
+                    }
+                    // Join all text items directly (no separator)
+                    // This creates a searchable string that matches the concatenation
+                    // of all text spans in the rendered page
+                    this.pageContents[i] = strBuf.join('');
+                }
+                catch (e) {
+                    console.error(`Unable to get text content for page ${i + 1}`, e);
+                    this.pageContents[i] = '';
+                }
+            })();
+            this.extractTextPromises[i] = promise;
+        }
+        await Promise.all(this.extractTextPromises);
+    }
+    async find(options) {
+        const { query, highlightAll = true, caseSensitive = false, entireWord = false, findPrevious = false } = options;
+        // Clear previous state
+        this.clearHighlights();
+        if (!query || query.trim() === '') {
+            this.query = '';
+            this.allMatches = [];
+            this.selectedMatchIndex = -1;
+            this.matchesCountTotal = 0;
+            this.eventBus.dispatch('updatefindmatchescount', {
+                matchesCount: { current: 0, total: 0 }
+            });
+            return;
+        }
+        this.query = query;
+        this.highlightAll = highlightAll;
+        this.caseSensitive = caseSensitive;
+        this.entireWord = entireWord;
+        this.eventBus.dispatch('updatefindcontrolstate', {
+            state: FindState.PENDING
+        });
+        // Extract text from PDF if not already done
+        await this.extractText();
+        // Search all pages
+        this.pageMatches = [];
+        this.pageMatchesLength = [];
+        this.allMatches = [];
+        this.matchesCountTotal = 0;
+        const searchQuery = caseSensitive ? query : query.toLowerCase();
+        for (let pageIndex = 0; pageIndex < this.pageContents.length; pageIndex++) {
+            const pageContent = this.pageContents[pageIndex];
+            const searchContent = caseSensitive ? pageContent : pageContent.toLowerCase();
+            const matches = [];
+            const matchesLength = [];
+            let pos = 0;
+            while ((pos = searchContent.indexOf(searchQuery, pos)) !== -1) {
+                // Check entire word if required
+                if (entireWord) {
+                    const before = pos > 0 ? searchContent[pos - 1] : ' ';
+                    const after = pos + searchQuery.length < searchContent.length
+                        ? searchContent[pos + searchQuery.length]
+                        : ' ';
+                    if (/\w/.test(before) || /\w/.test(after)) {
+                        pos++;
+                        continue;
+                    }
+                }
+                matches.push(pos);
+                matchesLength.push(searchQuery.length);
+                this.allMatches.push({
+                    pageIndex,
+                    matchIndex: matches.length - 1
+                });
+                pos++;
+            }
+            this.pageMatches[pageIndex] = matches;
+            this.pageMatchesLength[pageIndex] = matchesLength;
+            this.matchesCountTotal += matches.length;
+        }
+        // Select first or last match based on direction
+        if (this.allMatches.length > 0) {
+            this.selectedMatchIndex = findPrevious ? this.allMatches.length - 1 : 0;
+            this.highlightAllPages();
+            this.scrollToSelectedMatch();
+            this.eventBus.dispatch('updatefindcontrolstate', {
+                state: FindState.FOUND
+            });
+        }
+        else {
+            this.selectedMatchIndex = -1;
+            this.eventBus.dispatch('updatefindcontrolstate', {
+                state: FindState.NOT_FOUND
+            });
+        }
+        this.eventBus.dispatch('updatefindmatchescount', {
+            matchesCount: {
+                current: this.selectedMatchIndex + 1,
+                total: this.matchesCountTotal
+            }
+        });
+    }
+    findNext() {
+        if (this.allMatches.length === 0)
+            return;
+        this.selectedMatchIndex = (this.selectedMatchIndex + 1) % this.allMatches.length;
+        this.highlightAllPages();
+        this.scrollToSelectedMatch();
+        const wrapped = this.selectedMatchIndex === 0;
+        this.eventBus.dispatch('updatefindcontrolstate', {
+            state: wrapped ? FindState.WRAPPED : FindState.FOUND
+        });
+        this.eventBus.dispatch('updatefindmatchescount', {
+            matchesCount: {
+                current: this.selectedMatchIndex + 1,
+                total: this.matchesCountTotal
+            }
+        });
+    }
+    findPrevious() {
+        if (this.allMatches.length === 0)
+            return;
+        this.selectedMatchIndex =
+            (this.selectedMatchIndex - 1 + this.allMatches.length) % this.allMatches.length;
+        this.highlightAllPages();
+        this.scrollToSelectedMatch();
+        const wrapped = this.selectedMatchIndex === this.allMatches.length - 1;
+        this.eventBus.dispatch('updatefindcontrolstate', {
+            state: wrapped ? FindState.WRAPPED : FindState.FOUND
+        });
+        this.eventBus.dispatch('updatefindmatchescount', {
+            matchesCount: {
+                current: this.selectedMatchIndex + 1,
+                total: this.matchesCountTotal
+            }
+        });
+    }
+    highlightAllPages() {
+        this.clearHighlights();
+        for (let pageIndex = 0; pageIndex < this.viewer.pagesCount; pageIndex++) {
+            this.highlightPage(pageIndex);
+        }
+    }
+    highlightPage(pageIndex) {
+        const pageView = this.viewer.getPageView(pageIndex);
+        if (!pageView)
+            return;
+        const matches = this.pageMatches[pageIndex];
+        const matchesLength = this.pageMatchesLength[pageIndex];
+        if (!matches || matches.length === 0)
+            return;
+        const textDivs = pageView.textDivs;
+        const textContentItemsStr = pageView.textContentItemsStr;
+        if (!textDivs || !textContentItemsStr || textContentItemsStr.length === 0)
+            return;
+        // Convert match positions to div positions
+        const convertedMatches = this.convertMatches(matches, matchesLength, textContentItemsStr);
+        // Find which match in allMatches corresponds to this page's selected match
+        let selectedMatchOnPage = -1;
+        if (this.selectedMatchIndex >= 0) {
+            const selectedGlobal = this.allMatches[this.selectedMatchIndex];
+            if (selectedGlobal.pageIndex === pageIndex) {
+                selectedMatchOnPage = selectedGlobal.matchIndex;
+            }
+        }
+        // Render the matches
+        this.renderMatches(convertedMatches, textDivs, textContentItemsStr, selectedMatchOnPage, this.highlightAll);
+    }
+    convertMatches(matches, matchesLength, textContentItemsStr) {
+        if (!matches || matches.length === 0) {
+            return [];
+        }
+        const result = [];
+        // Build cumulative text length array
+        const textLengths = [];
+        let totalLen = 0;
+        for (const str of textContentItemsStr) {
+            textLengths.push(totalLen);
+            totalLen += str.length;
+        }
+        for (let m = 0; m < matches.length; m++) {
+            const matchStart = matches[m];
+            const matchEnd = matchStart + matchesLength[m];
+            // Find the div containing the start of the match
+            let beginDivIdx = 0;
+            for (let i = 0; i < textLengths.length; i++) {
+                if (i === textLengths.length - 1 ||
+                    (matchStart >= textLengths[i] &&
+                        matchStart < textLengths[i] + textContentItemsStr[i].length)) {
+                    beginDivIdx = i;
+                    break;
+                }
+            }
+            // Find the div containing the end of the match
+            let endDivIdx = beginDivIdx;
+            for (let i = beginDivIdx; i < textLengths.length; i++) {
+                if (i === textLengths.length - 1 ||
+                    matchEnd <= textLengths[i] + textContentItemsStr[i].length) {
+                    endDivIdx = i;
+                    break;
+                }
+            }
+            result.push({
+                begin: {
+                    divIdx: beginDivIdx,
+                    offset: matchStart - textLengths[beginDivIdx]
+                },
+                end: {
+                    divIdx: endDivIdx,
+                    offset: matchEnd - textLengths[endDivIdx]
+                }
+            });
+        }
+        return result;
+    }
+    renderMatches(matches, textDivs, textContentItemsStr, selectedMatchIdx, highlightAll) {
+        if (matches.length === 0)
+            return;
+        let prevEnd = null;
+        const infinity = { divIdx: -1, offset: undefined };
+        const beginText = (begin, className) => {
+            const divIdx = begin.divIdx;
+            textDivs[divIdx].textContent = '';
+            appendTextToDiv(divIdx, 0, begin.offset, className);
+        };
+        const appendTextToDiv = (divIdx, fromOffset, toOffset, className) => {
+            const div = textDivs[divIdx];
+            if (!div)
+                return;
+            const text = textContentItemsStr[divIdx];
+            const content = text.substring(fromOffset, toOffset);
+            if (!content)
+                return;
+            const node = document.createTextNode(content);
+            if (className) {
+                const span = document.createElement('span');
+                span.className = `${className} appended`;
+                span.appendChild(node);
+                div.appendChild(span);
+            }
+            else {
+                div.appendChild(node);
+            }
+        };
+        // Determine range of matches to highlight
+        let i0 = selectedMatchIdx;
+        let i1 = i0 + 1;
+        if (highlightAll) {
+            i0 = 0;
+            i1 = matches.length;
+        }
+        else if (selectedMatchIdx < 0) {
+            return;
+        }
+        let lastDivIdx = -1;
+        let lastOffset = -1;
+        for (let i = i0; i < i1; i++) {
+            const match = matches[i];
+            const begin = match.begin;
+            // Skip duplicate matches at the same position (e.g., ligatures)
+            if (begin.divIdx === lastDivIdx && begin.offset === lastOffset) {
+                continue;
+            }
+            lastDivIdx = begin.divIdx;
+            lastOffset = begin.offset;
+            const end = match.end;
+            const isSelected = i === selectedMatchIdx;
+            const highlightSuffix = isSelected ? ' selected' : '';
+            // Match inside new div
+            if (!prevEnd || begin.divIdx !== prevEnd.divIdx) {
+                // If there was a previous div, add remaining text
+                if (prevEnd !== null) {
+                    appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
+                }
+                // Clear the div and set content until the match start
+                beginText(begin);
+            }
+            else {
+                // Same div as previous match - add text between matches
+                appendTextToDiv(prevEnd.divIdx, prevEnd.offset, begin.offset);
+            }
+            if (begin.divIdx === end.divIdx) {
+                // Single div match
+                appendTextToDiv(begin.divIdx, begin.offset, end.offset, 'highlight' + highlightSuffix);
+            }
+            else {
+                // Multi-div match
+                // Highlight from begin to end of first div
+                appendTextToDiv(begin.divIdx, begin.offset, infinity.offset, 'highlight begin' + highlightSuffix);
+                // Highlight entire middle divs
+                for (let n = begin.divIdx + 1; n < end.divIdx; n++) {
+                    textDivs[n].className = 'highlight middle' + highlightSuffix;
+                }
+                // Start end div and highlight up to match end
+                beginText(end, 'highlight end' + highlightSuffix);
+            }
+            prevEnd = end;
+        }
+        // Add remaining text after last match
+        if (prevEnd) {
+            appendTextToDiv(prevEnd.divIdx, prevEnd.offset, infinity.offset);
+        }
+    }
+    scrollToSelectedMatch() {
+        if (this.selectedMatchIndex === -1)
+            return;
+        const match = this.allMatches[this.selectedMatchIndex];
+        if (!match)
+            return;
+        // First scroll to the page
+        this.viewer.scrollToPage(match.pageIndex + 1);
+        // Then scroll to the highlighted element only if it's not already visible
+        setTimeout(() => {
+            const selectedElement = this.viewer.container.querySelector('.highlight.selected');
+            if (selectedElement) {
+                const container = this.viewer.container;
+                const containerRect = container.getBoundingClientRect();
+                const elementRect = selectedElement.getBoundingClientRect();
+                // Check if element is visible within the container
+                const isVisible = elementRect.top >= containerRect.top &&
+                    elementRect.bottom <= containerRect.bottom &&
+                    elementRect.left >= containerRect.left &&
+                    elementRect.right <= containerRect.right;
+                if (!isVisible) {
+                    selectedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+        }, 100);
+    }
+    clearHighlights() {
+        // Clear all highlights from all pages
+        for (let pageIndex = 0; pageIndex < this.viewer.pagesCount; pageIndex++) {
+            const pageView = this.viewer.getPageView(pageIndex);
+            if (!pageView)
+                continue;
+            const textDivs = pageView.textDivs;
+            const textContentItemsStr = pageView.textContentItemsStr;
+            if (!textDivs || !textContentItemsStr)
+                continue;
+            for (let i = 0; i < textDivs.length; i++) {
+                const div = textDivs[i];
+                if (div) {
+                    div.textContent = textContentItemsStr[i] || '';
+                    div.className = '';
+                }
+            }
+        }
+    }
+    get matchesCount() {
+        return {
+            current: this.selectedMatchIndex + 1,
+            total: this.matchesCountTotal
+        };
+    }
+    reset() {
+        this.clearHighlights();
+        this.query = '';
+        this.allMatches = [];
+        this.pageMatches = [];
+        this.pageMatchesLength = [];
+        this.selectedMatchIndex = -1;
+        this.matchesCountTotal = 0;
+    }
+}

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

@@ -0,0 +1,58 @@
+/**
+ * PDFPageView - Renders a single PDF page with canvas and text layer.
+ * This is a derivative work based on PDF.js pdf_page_view.js
+ */
+import type { PDFPageProxy, PageViewport } from 'pdfjs-dist';
+import type { EventBus } from './EventBus.js';
+export interface PDFPageViewOptions {
+    container: HTMLElement;
+    id: number;
+    defaultViewport: PageViewport;
+    eventBus: EventBus;
+    scale?: number;
+    rotation?: number;
+}
+export declare const RenderingStates: {
+    readonly INITIAL: 0;
+    readonly RUNNING: 1;
+    readonly PAUSED: 2;
+    readonly FINISHED: 3;
+};
+export type RenderingState = (typeof RenderingStates)[keyof typeof RenderingStates];
+export declare class PDFPageView {
+    readonly id: number;
+    readonly eventBus: EventBus;
+    private container;
+    private viewport;
+    private pdfPage;
+    private scale;
+    private rotation;
+    private pdfPageRotate;
+    div: HTMLDivElement;
+    private canvas;
+    private canvasWrapper;
+    private textLayerDiv;
+    private loadingDiv;
+    renderingState: RenderingState;
+    private renderTask;
+    private textLayer;
+    private textLayerRendered;
+    textDivs: HTMLElement[];
+    textContentItemsStr: string[];
+    constructor(options: PDFPageViewOptions);
+    private setDimensions;
+    setPdfPage(pdfPage: PDFPageProxy): void;
+    private updateViewport;
+    update({ scale, rotation }: {
+        scale?: number;
+        rotation?: number;
+    }): void;
+    private resetCanvas;
+    reset(): void;
+    draw(): Promise<void>;
+    private renderTextLayer;
+    cancelRendering(): void;
+    destroy(): void;
+    get width(): number;
+    get height(): number;
+}