@aceshooting/lyra-ui 6.2.0 → 7.0.0

package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js

@@ -8,23 +8,24 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { LyraElement } from '../../../internal/lyra-element.js';
-import { finiteNumber, finiteRange } from '../../../internal/numbers.js';
+import { finiteCount, finiteNumber, finiteRange } from '../../../internal/numbers.js';
 import { safeFetchUrl } from '../../../internal/safe-url.js';
-import { isAbortError, isResourceLimitError, readResponseArrayBuffer } from '../../../internal/resource-loader.js';
+import { isAbortError, isResourceLimitError, LyraUserFacingError, readResponseArrayBuffer, } from '../../../internal/resource-loader.js';
 import { srOnly } from '../../../internal/a11y.js';
 import { prefersReducedMotion } from '../../../internal/motion.js';
 import { DocumentAnchorTarget } from '../../../internal/anchor-target.js';
 import { normalizeQuoteText, scopeFromItems, resolveTextQuote, buildQuoteAnchor, } from '../../../internal/text-quote.js';
-import '../../layout/virtual-list/virtual-list.js';
-import '../../overlays/skeleton/skeleton.js';
-import '../highlight-layer/highlight-layer.js';
 import { loadPdfJs } from './pdf-loader.js';
 import { styles } from './pdf-viewer.styles.js';
+import { getNumberFormat, getSegmenter } from '../../../internal/intl-cache.js';
 const MIN_ZOOM = 0.25;
 const MAX_ZOOM = 4;
 const ZOOM_STEP = 0.25;
 const PAGE_TEXT_CACHE_LIMIT = 64;
 const DEFAULT_THUMBNAIL_WIDTH = 96;
+const MAX_THUMBNAIL_WIDTH = 2048;
+const MAX_PAGE_COUNT = 100_000;
+const MAX_SEARCH_MATCHES = 10_000;
 /** Clamps a candidate zoom multiplier to `[MIN_ZOOM, MAX_ZOOM]`, defaulting non-finite/`NaN` input
  *  to `1` (100%) rather than letting it reach the PDF.js viewport scale unsanitized. */
 function clampZoom(value) {
@@ -45,32 +46,107 @@ function containsAcrossShadowBoundaries(ancestor, node) {
     }
     return false;
 }
-/** Collapses whitespace runs to single spaces and lower-cases for case-insensitive search, while
- *  keeping a normalized-index -> raw-index offset table so a match found in the normalized text can
- *  be mapped back to a range in the original `getPageText()` output for painting. */
-function normalizeForSearch(raw) {
+function searchCaseFold(value, locale) {
+    let lowered;
+    try {
+        lowered = value.toLocaleLowerCase(locale);
+    }
+    catch (error) {
+        if (!(error instanceof RangeError))
+            throw error;
+        lowered = value.toLowerCase();
+    }
+    // Unicode caseless matching treats the medial and final lowercase sigma forms as equivalent.
+    return lowered.replaceAll('ς', 'σ');
+}
+function searchCaseSegments(value, locale) {
+    if (typeof Intl.Segmenter === 'function') {
+        let segments;
+        try {
+            segments = getSegmenter(locale, { granularity: 'grapheme' }).segment(value);
+        }
+        catch (error) {
+            if (!(error instanceof RangeError))
+                throw error;
+            segments = getSegmenter(undefined, { granularity: 'grapheme' }).segment(value);
+        }
+        return [...segments].map(({ segment, index }) => ({
+            text: segment,
+            start: index,
+            end: index + segment.length,
+        }));
+    }
+    const segments = [];
+    let start = 0;
+    for (const text of value) {
+        segments.push({ text, start, end: start + text.length });
+        start += text.length;
+    }
+    return segments;
+}
+/** Collapses whitespace runs to single spaces and locale-folds the complete string so contextual
+ *  Unicode casing is preserved. Start/end maps retain the raw range behind each folded UTF-16 unit;
+ *  an expanded grapheme maps every expansion unit to the complete raw grapheme so painted matches
+ *  never split or overrun the original PDF text layer. */
+function normalizeForSearch(raw, locale) {
     let text = '';
-    const rawOffsets = [];
+    const rawStarts = [];
+    const rawEnds = [];
     let lastWasSpace = false;
     for (let i = 0; i < raw.length; i++) {
         const ch = raw[i];
         if (/\s/.test(ch)) {
             if (!lastWasSpace && text.length > 0) {
                 text += ' ';
-                rawOffsets.push(i);
+                rawStarts.push(i);
+                rawEnds.push(i + 1);
                 lastWasSpace = true;
             }
             continue;
         }
-        text += ch.toLowerCase();
-        rawOffsets.push(i);
+        text += ch;
+        rawStarts.push(i);
+        rawEnds.push(i + 1);
         lastWasSpace = false;
     }
     if (text.endsWith(' ')) {
         text = text.slice(0, -1);
-        rawOffsets.pop();
+        rawStarts.pop();
+        rawEnds.pop();
+    }
+    const folded = searchCaseFold(text, locale);
+    if (folded.length === text.length)
+        return { text: folded, rawStarts, rawEnds };
+    const segments = searchCaseSegments(text, locale);
+    const isolatedLength = segments.reduce((length, segment) => length + searchCaseFold(segment.text, locale).length, 0);
+    const foldedStarts = [];
+    const foldedEnds = [];
+    let foldedStart = 0;
+    for (const segment of segments) {
+        const foldedEnd = segment.end === text.length
+            ? folded.length
+            : isolatedLength === folded.length
+                ? foldedStart + searchCaseFold(segment.text, locale).length
+                : searchCaseFold(text.slice(0, segment.end), locale).length;
+        const foldedLength = foldedEnd - foldedStart;
+        const rawLength = segment.end - segment.start;
+        if (foldedLength === rawLength) {
+            for (let offset = 0; offset < foldedLength; offset++) {
+                foldedStarts.push(rawStarts[segment.start + offset]);
+                foldedEnds.push(rawEnds[segment.start + offset]);
+            }
+        }
+        else {
+            const rawStart = rawStarts[segment.start];
+            const rawEnd = rawEnds[segment.end - 1];
+            for (let offset = 0; offset < foldedLength; offset++) {
+                foldedStarts.push(rawStart);
+                foldedEnds.push(rawEnd);
+            }
+        }
+        foldedStart = foldedEnd;
     }
-    return { text, rawOffsets };
+    return { text: folded, rawStarts: foldedStarts, rawEnds: foldedEnds };
 }
 class LyraPdfViewerBase extends LyraElement {
 }
@@ -144,6 +220,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         this.generation = 0;
         this.pageCanvases = new Map();
         this.pageRenderTasks = new Map();
+        this.pageRenderVersions = new Map();
         this.pageCanvasRefs = new Map();
         this.textLayerContainers = new Map();
         this.textLayerContainerRefs = new Map();
@@ -151,6 +228,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         this.textLayerReadyPromises = new Map();
         this.pageTextCache = new Map();
         this.thumbnailRenderTasks = new Map();
+        this.thumbnailRenderVersions = new Map();
         this.pageHighlightItems = new Map();
         this.pageHighlightLayerElements = new Map();
         this.highlightLayerRefs = new Map();
@@ -171,6 +249,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
     </div>`;
         };
         this.onVisibleRangeChanged = (event) => {
+            event.stopPropagation();
             if (this.loadState.kind !== 'ready')
                 return;
             const next = this.clampPage(event.detail.start + 1);
@@ -236,8 +315,20 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         if (base)
             this.bindTextSelection(base);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            const base = this.shadowRoot?.querySelector('[part="base"]');
+            if (base && !this.textSelectionCleanup)
+                this.bindTextSelection(base);
+            if (this.src)
+                this.scheduleAfterUpdate(() => { void this.load(); });
+        }
+    }
     disconnectedCallback() {
-        super.disconnectedCallback();
+        this.generation++;
+        this.searchGeneration++;
+        this.beginAbortableLoad();
         this.textSelectionCleanup?.();
         this.textSelectionCleanup = undefined;
         for (const task of this.pageRenderTasks.values())
@@ -247,13 +338,17 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         for (const task of this.thumbnailRenderTasks.values())
             task.cancel();
         this.pageRenderTasks.clear();
+        this.pageRenderVersions.clear();
         this.textLayers.clear();
         this.pageCanvases.clear();
         this.textLayerContainers.clear();
         this.textLayerReadyPromises.clear();
         this.pageTextCache.clear();
         this.thumbnailRenderTasks.clear();
+        this.thumbnailRenderVersions.clear();
         this.destroyLoadedDoc();
+        this.loadState = { kind: 'idle' };
+        super.disconnectedCallback();
     }
     /** Releases the current PDF.js document's worker and buffered pages before replacing or dropping
      *  `loadState` -- `PDFDocumentProxy` is not garbage-collected on its own; every `src` change and
@@ -280,33 +375,53 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         }
         const url = safeFetchUrl(this.src);
         if (!url) {
-            this.loadState = { kind: 'error', message: this.localize('documentPreviewUrlNotAllowed') };
+            const error = new LyraUserFacingError(this.localize('documentPreviewUrlNotAllowed'));
+            this.loadState = { kind: 'error', message: error.message };
+            this.emit('lr-render-error', { error });
             return;
         }
         this.loadState = { kind: 'loading' };
         try {
             const response = await fetch(url, signal ? { signal } : undefined);
+            if (!this.isConnected || generation !== this.generation)
+                return;
             if (!response.ok)
                 throw new Error(`${response.status} ${response.statusText}`);
             const data = await readResponseArrayBuffer(response);
+            if (!this.isConnected || generation !== this.generation)
+                return;
             const pdfjsLib = await this.loadLibrary();
             if (!this.isConnected || generation !== this.generation)
                 return;
             if (!pdfjsLib) {
-                this.loadState = { kind: 'error', message: this.localize('pdfViewerMissingLibrary') };
+                const error = new LyraUserFacingError(this.localize('pdfViewerMissingLibrary'));
+                this.loadState = { kind: 'error', message: error.message };
+                this.emit('lr-render-error', { error });
                 return;
             }
             const doc = await pdfjsLib.getDocument({ data }).promise;
-            if (!this.isConnected || generation !== this.generation)
+            if (!this.isConnected || generation !== this.generation) {
+                await doc.destroy?.();
                 return;
+            }
+            const pageCount = finiteCount(doc.numPages, 0, MAX_PAGE_COUNT);
+            if (pageCount < 1 || pageCount !== doc.numPages) {
+                await doc.destroy?.();
+                throw new LyraUserFacingError(this.localize('documentPreviewResourceTooLarge'));
+            }
             this.page = 1;
-            this.loadState = { kind: 'ready', doc, pageCount: doc.numPages };
-            this.emit('lr-load', { pageCount: doc.numPages });
+            this.loadState = { kind: 'ready', doc, pageCount };
+            this.emit('lr-load', { pageCount });
         }
         catch (error) {
             if (isAbortError(error) || !this.isConnected || generation !== this.generation)
                 return;
-            this.loadState = { kind: 'error', message: this.localize(isResourceLimitError(error) ? 'documentPreviewResourceTooLarge' : 'documentPreviewFailedToLoad') };
+            this.loadState = {
+                kind: 'error',
+                message: error instanceof LyraUserFacingError
+                    ? error.message
+                    : this.localize(isResourceLimitError(error) ? 'documentPreviewResourceTooLarge' : 'documentPreviewFailedToLoad'),
+            };
             this.emit('lr-render-error', { error });
         }
     }
@@ -327,27 +442,26 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         this.scrollDrivenPage = false;
         this.page = page;
         await this.updateComplete;
-        await this.waitForPageMount(page);
-        return true;
+        return this.waitForPageMount(page);
     }
     waitForPageMount(page) {
         if (this.pageCanvases.has(page))
-            return Promise.resolve();
+            return Promise.resolve(true);
         const list = this.shadowRoot?.querySelector('lr-virtual-list');
         if (!list)
-            return Promise.resolve();
+            return Promise.resolve(false);
         return new Promise((resolve) => {
             const onRange = () => {
                 if (this.pageCanvases.has(page)) {
                     list.removeEventListener('lr-visible-range-changed', onRange);
                     clearTimeout(timeoutId);
-                    resolve();
+                    resolve(true);
                 }
             };
             list.addEventListener('lr-visible-range-changed', onRange);
             const timeoutId = setTimeout(() => {
                 list.removeEventListener('lr-visible-range-changed', onRange);
-                resolve();
+                resolve(false);
             }, 500);
         });
     }
@@ -598,8 +712,13 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
     async loadPageText(page) {
         if (this.loadState.kind !== 'ready')
             throw new Error('No PDF document is loaded.');
-        const pdfPage = await this.loadState.doc.getPage(page);
+        const doc = this.loadState.doc;
+        const pdfPage = await doc.getPage(page);
+        if (this.loadState.kind !== 'ready' || this.loadState.doc !== doc)
+            throw new DOMException('Superseded', 'AbortError');
         const content = await pdfPage.getTextContent();
+        if (this.loadState.kind !== 'ready' || this.loadState.doc !== doc)
+            throw new DOMException('Superseded', 'AbortError');
         let text = '';
         for (const item of content.items) {
             text += item.str ?? '';
@@ -618,11 +737,20 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
             return false;
         this.thumbnailRenderTasks.get(canvas)?.cancel();
         this.thumbnailRenderTasks.delete(canvas);
-        const pdfPage = await this.loadState.doc.getPage(page);
-        if (this.loadState.kind !== 'ready')
+        const version = (this.thumbnailRenderVersions.get(canvas) ?? 0) + 1;
+        this.thumbnailRenderVersions.set(canvas, version);
+        const doc = this.loadState.doc;
+        const pdfPage = await doc.getPage(page);
+        if (this.loadState.kind !== 'ready' ||
+            this.loadState.doc !== doc ||
+            this.thumbnailRenderVersions.get(canvas) !== version)
             return false;
         const width = options?.width ?? DEFAULT_THUMBNAIL_WIDTH;
+        if (!Number.isFinite(width) || width <= 0 || width > MAX_THUMBNAIL_WIDTH)
+            return false;
         const unscaledViewport = pdfPage.getViewport({ scale: 1 });
+        if (!Number.isFinite(unscaledViewport.width) || unscaledViewport.width <= 0)
+            return false;
         const scale = width / unscaledViewport.width;
         const viewport = pdfPage.getViewport({ scale });
         const dpr = window.devicePixelRatio || 1;
@@ -638,7 +766,8 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         this.thumbnailRenderTasks.set(canvas, renderTask);
         try {
             await renderTask.promise;
-            return this.thumbnailRenderTasks.get(canvas) === renderTask;
+            return this.thumbnailRenderTasks.get(canvas) === renderTask &&
+                this.thumbnailRenderVersions.get(canvas) === version;
         }
         catch (error) {
             if (isAbortError(error))
@@ -708,7 +837,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
             return 0;
         }
         const { pageCount } = this.loadState;
-        const normalizedQuery = query.trim().toLowerCase();
+        const normalizedQuery = normalizeForSearch(query.trim(), this.effectiveLocale).text;
         const matches = [];
         for (let page = 1; page <= pageCount; page++) {
             if (generation !== this.searchGeneration)
@@ -720,15 +849,21 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
             catch {
                 continue;
             }
-            const { text, rawOffsets } = normalizeForSearch(raw);
+            if (generation !== this.searchGeneration)
+                return this.searchMatches.length;
+            const { text, rawStarts, rawEnds } = normalizeForSearch(raw, this.effectiveLocale);
             let from = 0;
             let idx;
             while ((idx = text.indexOf(normalizedQuery, from)) !== -1) {
-                const rawStart = rawOffsets[idx] ?? 0;
-                const rawEndExclusive = (rawOffsets[idx + normalizedQuery.length - 1] ?? rawStart) + 1;
+                const rawStart = rawStarts[idx] ?? 0;
+                const rawEndExclusive = rawEnds[idx + normalizedQuery.length - 1] ?? rawStart;
                 matches.push({ page, start: rawStart, length: rawEndExclusive - rawStart });
+                if (matches.length >= MAX_SEARCH_MATCHES)
+                    break;
                 from = idx + Math.max(1, normalizedQuery.length);
             }
+            if (matches.length >= MAX_SEARCH_MATCHES)
+                break;
         }
         if (generation !== this.searchGeneration)
             return this.searchMatches.length;
@@ -976,26 +1111,38 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         if (this.loadState.kind !== 'ready')
             return html ``;
         const { pageCount } = this.loadState;
+        const numberFormat = getNumberFormat(this.effectiveLocale);
+        const formattedZoom = numberFormat.format(Math.round(this.zoom * 100));
         return html `<div part="toolbar">
       <button type="button" data-action="previous" ?disabled=${this.page <= 1} aria-label=${this.localize('pdfViewerPreviousPage')} @click=${this.previousPage}>${this.localize('pdfViewerPreviousPage')}</button>
-      <span part="page-indicator">${this.localize('pdfViewerPageOf', undefined, { page: this.page, total: pageCount })}</span>
+      <span part="page-indicator">${this.localize('pdfViewerPageOf', undefined, {
+            page: numberFormat.format(this.page),
+            total: numberFormat.format(pageCount),
+        })}</span>
       <button type="button" data-action="next" ?disabled=${this.page >= pageCount} aria-label=${this.localize('pdfViewerNextPage')} @click=${this.nextPage}>${this.localize('pdfViewerNextPage')}</button>
       <button type="button" data-action="zoom-out" ?disabled=${this.zoom <= MIN_ZOOM} aria-label=${this.localize('pdfViewerZoomOut')} @click=${this.zoomOut}>${this.localize('pdfViewerZoomOut')}</button>
-      <span part="zoom-indicator" aria-label=${this.localize('pdfViewerCurrentZoom', undefined, { percent: Math.round(this.zoom * 100) })}>${this.localize('pdfViewerCurrentZoom', undefined, { percent: Math.round(this.zoom * 100) })}</span>
+      <span part="zoom-indicator" aria-label=${this.localize('pdfViewerCurrentZoom', undefined, { percent: formattedZoom })}>${this.localize('pdfViewerCurrentZoom', undefined, { percent: formattedZoom })}</span>
       <button type="button" data-action="zoom-in" ?disabled=${this.zoom >= MAX_ZOOM} aria-label=${this.localize('pdfViewerZoomIn')} @click=${this.zoomIn}>${this.localize('pdfViewerZoomIn')}</button>
     </div>`;
     }
     async renderPage(pageNumber, canvas) {
         if (this.loadState.kind !== 'ready')
             return;
+        const version = (this.pageRenderVersions.get(pageNumber) ?? 0) + 1;
+        this.pageRenderVersions.set(pageNumber, version);
+        const doc = this.loadState.doc;
+        const zoom = this.zoom;
         this.pageRenderTasks.get(pageNumber)?.cancel();
         this.pageRenderTasks.delete(pageNumber);
         this.textLayers.get(pageNumber)?.cancel();
         this.textLayers.delete(pageNumber);
-        const page = await this.loadState.doc.getPage(pageNumber);
-        if (this.loadState.kind !== 'ready' || this.pageCanvases.get(pageNumber) !== canvas)
+        const page = await doc.getPage(pageNumber);
+        if (this.loadState.kind !== 'ready' ||
+            this.loadState.doc !== doc ||
+            this.pageRenderVersions.get(pageNumber) !== version ||
+            this.pageCanvases.get(pageNumber) !== canvas)
             return;
-        const viewport = page.getViewport({ scale: this.zoom });
+        const viewport = page.getViewport({ scale: zoom });
         const dpr = window.devicePixelRatio || 1;
         canvas.width = Math.floor(viewport.width * dpr);
         canvas.height = Math.floor(viewport.height * dpr);
@@ -1005,7 +1152,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         if (container) {
             container.style.width = `${viewport.width}px`;
             container.style.height = `${viewport.height}px`;
-            container.style.setProperty('--total-scale-factor', String(this.zoom));
+            container.style.setProperty('--total-scale-factor', String(zoom));
         }
         const highlightLayerEl = this.pageHighlightLayerElements.get(pageNumber);
         if (highlightLayerEl) {
@@ -1018,7 +1165,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         canvasContext.setTransform(dpr, 0, 0, dpr, 0, 0);
         const renderTask = page.render({ canvasContext, viewport });
         this.pageRenderTasks.set(pageNumber, renderTask);
-        void this.renderTextLayer(pageNumber, page, viewport);
+        void this.renderTextLayer(pageNumber, page, viewport, version);
         try {
             await renderTask.promise;
         }
@@ -1031,12 +1178,15 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
                 this.pageRenderTasks.delete(pageNumber);
         }
     }
-    async renderTextLayer(pageNumber, page, viewport) {
+    async renderTextLayer(pageNumber, page, viewport, version) {
         const container = this.textLayerContainers.get(pageNumber);
         if (!container || !page.streamTextContent || this.loadState.kind !== 'ready')
             return;
         const pdfjsLib = await this.loadLibrary();
-        if (!pdfjsLib || !pdfjsLib.TextLayer || this.textLayerContainers.get(pageNumber) !== container)
+        if (!pdfjsLib ||
+            !pdfjsLib.TextLayer ||
+            this.pageRenderVersions.get(pageNumber) !== version ||
+            this.textLayerContainers.get(pageNumber) !== container)
             return;
         container.replaceChildren();
         const textLayer = new pdfjsLib.TextLayer({ textContentSource: page.streamTextContent(), container, viewport });
@@ -1047,7 +1197,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         });
         this.textLayerReadyPromises.set(pageNumber, renderPromise);
         await renderPromise;
-        if (this.textLayers.get(pageNumber) === textLayer) {
+        if (this.textLayers.get(pageNumber) === textLayer && this.pageRenderVersions.get(pageNumber) === version) {
             this.markTextRunParts(container);
             void this.resolvePageHighlights(pageNumber);
             // A page that mounts (or remounts, e.g. after a zoom change re-renders every visible page) while
@@ -1071,6 +1221,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
         if (!callback) {
             callback = (element) => {
                 if (!element) {
+                    this.pageRenderVersions.set(pageNumber, (this.pageRenderVersions.get(pageNumber) ?? 0) + 1);
                     this.pageCanvases.delete(pageNumber);
                     this.pageRenderTasks.get(pageNumber)?.cancel();
                     this.pageRenderTasks.delete(pageNumber);
@@ -1115,6 +1266,7 @@ export class LyraPdfViewer extends DocumentAnchorTarget(LyraPdfViewerBase) {
     render() {
         return html `<div
       part="base"
+      role="region"
       style=${this.maxHeight ? `--lr-pdf-viewer-height:${this.maxHeight}` : nothing}
       aria-label=${this.getAttribute('aria-label') || this.name || this.localize('pdfViewerLabel')}
     >${this.renderBody()}${this.renderAnchorLiveRegion()}</div>`;