web-doc 0.4.0 → 0.5.0

package/dist/adapters/docx-images.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Word draws an inline picture at its declared extent even when that is wider
+ * than the text area, so a generated document that embeds a 21-inch chart on
+ * a 6.5-inch column shows a clipped picture. A viewer has no margin to spill
+ * into, so before the page layout runs the oversized inline pictures are
+ * scaled down to fit the section's content box, aspect ratio preserved.
+ * Anchored (floating) pictures keep their geometry: their position is part of
+ * the author's layout.
+ */
+export interface DocxSectionGeometry {
+    readonly pageWidth: number;
+    readonly pageHeight: number;
+    readonly marginLeft: number;
+    readonly marginRight: number;
+    readonly marginTop: number;
+    readonly marginBottom: number;
+}
+export interface DocxModelLike {
+    readonly section: DocxSectionGeometry;
+    readonly body: readonly unknown[];
+}
+/**
+ * Shrink every inline picture that would not fit its section's content box.
+ * Mutates the model in place and returns how many pictures were scaled.
+ */
+export declare function fitInlineImagesToPage(model: DocxModelLike): number;

package/dist/adapters/docx-images.js

@@ -0,0 +1,74 @@
+/**
+ * Shrink every inline picture that would not fit its section's content box.
+ * Mutates the model in place and returns how many pictures were scaled.
+ */
+export function fitInlineImagesToPage(model) {
+    let scaled = 0;
+    // A `<w:sectPr>` closes the section that ENDS at it, so the geometry for a
+    // run of body elements is only known once the break after them is reached.
+    let pending = [];
+    const flush = (geometry) => {
+        for (const element of pending)
+            scaled += fitElement(element, geometry);
+        pending = [];
+    };
+    for (const element of model.body) {
+        if (isSectionBreak(element)) {
+            flush(element.geom ?? model.section);
+            continue;
+        }
+        pending.push(element);
+    }
+    flush(model.section);
+    return scaled;
+}
+function fitElement(element, geometry) {
+    if (isParagraph(element)) {
+        let scaled = 0;
+        for (const run of element.runs ?? [])
+            if (isInlineImage(run) && fitImage(run, geometry))
+                scaled += 1;
+        return scaled;
+    }
+    if (isTable(element)) {
+        let scaled = 0;
+        for (const row of element.rows ?? [])
+            for (const cell of row.cells ?? [])
+                for (const child of cell.content ?? [])
+                    scaled += fitElement(child, geometry);
+        return scaled;
+    }
+    return 0;
+}
+function fitImage(image, geometry) {
+    const contentWidth = geometry.pageWidth - geometry.marginLeft - geometry.marginRight;
+    const contentHeight = geometry.pageHeight - geometry.marginTop - geometry.marginBottom;
+    if (!(contentWidth > 0 && contentHeight > 0) ||
+        !(image.widthPt > 0 && image.heightPt > 0))
+        return false;
+    const scale = Math.min(1, contentWidth / image.widthPt, contentHeight / image.heightPt);
+    if (scale >= 1)
+        return false;
+    image.widthPt *= scale;
+    image.heightPt *= scale;
+    return true;
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null;
+}
+function isParagraph(value) {
+    return isRecord(value) && value.type === "paragraph";
+}
+function isTable(value) {
+    return isRecord(value) && value.type === "table";
+}
+function isSectionBreak(value) {
+    return isRecord(value) && value.type === "sectionBreak";
+}
+function isInlineImage(value) {
+    return (isRecord(value) &&
+        value.type === "image" &&
+        value.anchor !== true &&
+        typeof value.widthPt === "number" &&
+        typeof value.heightPt === "number");
+}

package/dist/adapters/office.d.ts

@@ -1,4 +1,5 @@
 import type { AdapterOpenContext, DocumentAdapter, DocumentFormat, DocumentInfo, HyperlinkTarget, RenderViewport, SpreadsheetSheetInfo, TextRun, ViewerWarning } from "../contracts.js";
+import { type DocxModelLike } from "./docx-images.js";
 declare const LEGACY_FORMATS: readonly ["doc", "xls", "ppt"];
 type LegacyFormat = (typeof LEGACY_FORMATS)[number];
 interface EngineLoadOptions {
@@ -27,6 +28,10 @@ interface DocxRun {
 }
 interface DocxBackend {
     readonly pageCount: number;
+    /** Render mode; the parsed model is only reachable in `main` mode. */
+    readonly mode?: "main" | "worker";
+    /** Parsed document model (main mode). Read lazily by the page layout. */
+    readonly document?: DocxModelLike;
     pageSize(pageIndex: number): {
         widthPt: number;
         heightPt: number;

package/dist/adapters/office.js

@@ -1,4 +1,5 @@
 import { abortError, ViewerError } from "../errors.js";
+import { fitInlineImagesToPage } from "./docx-images.js";
 import { enforceContainerLimits } from "../limits.js";
 const MODERN_FORMATS = [
     "docx",
@@ -325,10 +326,11 @@ export class OfficeDocumentAdapter {
         return convertInWorker(data, format, workerUrl, moduleUrl, context.signal, context.limits.maxOperationMs);
     }
     async #loadDocx(data, options) {
-        if (this.#options.engines?.docx)
-            return this.#options.engines.docx(data, options);
-        const { DocxDocument } = await import("@silurus/ooxml/docx");
-        return DocxDocument.load(data, options);
+        const backend = this.#options.engines?.docx
+            ? await this.#options.engines.docx(data, options)
+            : await (await import("@silurus/ooxml/docx")).DocxDocument.load(data, options);
+        fitDocxInlineImages(backend);
+        return backend;
     }
     async #loadXlsx(data, options) {
         if (this.#options.engines?.xlsx)
@@ -670,3 +672,22 @@ function normalizeOfficeError(error) {
 function textDirection(text) {
     return /[\u0590-\u08ff\ufb1d-\ufefc]/u.test(text) ? "rtl" : "ltr";
 }
+/**
+ * Oversized inline pictures are shrunk to the section's content box before
+ * the engine paginates (the layout is built lazily on first page access).
+ * The model is reachable in `main` mode only; a worker-mode engine keeps
+ * Word's geometry.
+ */
+function fitDocxInlineImages(backend) {
+    if (backend.mode === "worker")
+        return;
+    let model;
+    try {
+        model = backend.document;
+    }
+    catch {
+        return;
+    }
+    if (model)
+        fitInlineImagesToPage(model);
+}

package/dist/contracts.d.ts

@@ -236,16 +236,27 @@ export interface FuzzySearchOptions {
      * partly survives on a page, such as a citation that spans a page break.
      */
     readonly maxScore?: number;
-    /** Query characters considered. Default `2000`. */
+    /**
+     * Query characters considered. The matcher's cost grows with the query and
+     * a passage is identified well before its end, so the default `600` keeps
+     * a page under about 100 ms; the highlight covers the matched prefix.
+     */
     readonly maxQueryLength?: number;
     /** Characters of each page's text considered. Default `20000`. */
     readonly maxPageTextLength?: number;
     /**
      * Pages compared per batch. The scan proceeds nearest to `nearPage` first
      * and stops after the first batch with a match, yielding to the event loop
-     * between batches. Default `4`.
+     * between batches. Default `2`.
      */
     readonly pagesPerBatch?: number;
+    /**
+     * With `nearPage`, how many pages nearest to the hint the fallback scans
+     * before giving up; the passage a hint points at sits within a few pages
+     * of it, and the rest of a long document is not worth the cost. Without a
+     * hint every page in range is scanned. Default `12`.
+     */
+    readonly pageWindow?: number;
 }
 export interface SearchOptions {
     readonly caseSensitive?: boolean;

package/dist/fuzzy-search.d.ts

@@ -13,6 +13,7 @@ export interface ResolvedFuzzySearchOptions {
     readonly maxQueryLength: number;
     readonly maxPageTextLength: number;
     readonly pagesPerBatch: number;
+    readonly pageWindow: number;
 }
 export declare const DEFAULT_FUZZY_SEARCH_OPTIONS: ResolvedFuzzySearchOptions;
 /**

package/dist/fuzzy-search.js

@@ -2,9 +2,12 @@ import Fuse from "fuse.js";
 export const DEFAULT_FUZZY_SEARCH_OPTIONS = Object.freeze({
     threshold: 0.3,
     maxScore: 0.4,
-    maxQueryLength: 2000,
+    // Bitap cost grows with the query; 600 characters still identifies a
+    // passage while keeping a page under ~100 ms on a laptop.
+    maxQueryLength: 600,
     maxPageTextLength: 20_000,
-    pagesPerBatch: 4,
+    pagesPerBatch: 2,
+    pageWindow: 12,
 });
 /**
  * Layer fuzzy settings in precedence order (viewer defaults first, then the
@@ -29,6 +32,7 @@ export function resolveFuzzySearchOptions(...layers) {
             maxQueryLength: positiveInteger(layer.maxQueryLength, resolved.maxQueryLength),
             maxPageTextLength: positiveInteger(layer.maxPageTextLength, resolved.maxPageTextLength),
             pagesPerBatch: positiveInteger(layer.pagesPerBatch, resolved.pagesPerBatch),
+            pageWindow: positiveInteger(layer.pageWindow, resolved.pageWindow),
         };
     }
     return enabled ? resolved : undefined;

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export * from "./format.js";
 export * from "./limits.js";
 export * from "./interaction.js";
 export * from "./fuzzy-search.js";
+export * from "./search-reveal.js";
+export * from "./adapters/docx-images.js";
 export * from "./render-scheduler.js";
 export * from "./i18n.js";
 export * from "./font-manifest.js";

package/dist/index.js

@@ -6,6 +6,8 @@ export * from "./format.js";
 export * from "./limits.js";
 export * from "./interaction.js";
 export * from "./fuzzy-search.js";
+export * from "./search-reveal.js";
+export * from "./adapters/docx-images.js";
 export * from "./render-scheduler.js";
 export * from "./i18n.js";
 export * from "./font-manifest.js";

package/dist/search-reveal.d.ts

@@ -0,0 +1,21 @@
+import type { SearchMatch, TextRun } from "./contracts.js";
+/**
+ * Vertical position of a match inside its page, in the coordinate units of
+ * the page's text layer: the `y` of the first run the match overlaps.
+ * Offsets follow the same convention as the highlight layers (a run's
+ * explicit `logicalStart`/`logicalEnd`, else the running text length), so
+ * the position agrees with where the highlight is painted. `undefined` when
+ * no run overlaps the match.
+ */
+export declare function matchTopInPage(runs: readonly TextRun[], match: SearchMatch): number | undefined;
+/**
+ * Scroll offset that places a match about a third of the way down the
+ * viewport — far enough from the top edge to read the line before it, never
+ * above the page's own top so a match near the top of a page still shows the
+ * page head. `matchTop` is the match's offset from the page top in CSS px.
+ */
+export declare function revealScrollTop(options: {
+    readonly pageTop: number;
+    readonly matchTop: number;
+    readonly viewportHeight: number;
+}): number;

package/dist/search-reveal.js

@@ -0,0 +1,29 @@
+/**
+ * Vertical position of a match inside its page, in the coordinate units of
+ * the page's text layer: the `y` of the first run the match overlaps.
+ * Offsets follow the same convention as the highlight layers (a run's
+ * explicit `logicalStart`/`logicalEnd`, else the running text length), so
+ * the position agrees with where the highlight is painted. `undefined` when
+ * no run overlaps the match.
+ */
+export function matchTopInPage(runs, match) {
+    let offset = 0;
+    for (const run of runs) {
+        const start = run.logicalStart ?? offset;
+        const end = run.logicalEnd ?? start + run.text.length;
+        offset = end;
+        if (match.start < end && match.end > start)
+            return run.y;
+    }
+    return undefined;
+}
+/**
+ * Scroll offset that places a match about a third of the way down the
+ * viewport — far enough from the top edge to read the line before it, never
+ * above the page's own top so a match near the top of a page still shows the
+ * page head. `matchTop` is the match's offset from the page top in CSS px.
+ */
+export function revealScrollTop(options) {
+    const lead = Math.max(0, options.viewportHeight) / 3;
+    return Math.max(options.pageTop, options.pageTop + options.matchTop - lead);
+}

package/dist/spreadsheet-viewport.d.ts

@@ -24,6 +24,8 @@ export declare class SpreadsheetViewport {
     setDocument(info: DocumentInfo | undefined): void;
     update(): void;
     panBy(deltaX: number, deltaY: number): void;
+    /** Sheet matches are cell-addressed; the sheet viewport scrolls per cell already. */
+    revealMatch(): Promise<void>;
     goToPage(pageIndex: number): void;
     fitWidth(): number;
     fitPage(): number;

package/dist/spreadsheet-viewport.js

@@ -241,6 +241,8 @@ export class SpreadsheetViewport {
         this.#reportPan();
         this.schedule();
     }
+    /** Sheet matches are cell-addressed; the sheet viewport scrolls per cell already. */
+    async revealMatch() { }
     goToPage(pageIndex) {
         if (pageIndex === this.#sheetIndex)
             return;

package/dist/viewer.js

@@ -415,7 +415,9 @@ export class DocumentViewer {
                 // Pages are compared nearest to the hint first, a batch at a time,
                 // and the scan stops at the first batch that holds the passage; a
                 // yield between batches keeps a long document from freezing the UI.
-                const order = pagesNearestFirst(firstPage, lastPage, nearPage);
+                // With a hint the passage sits near it, so only that neighbourhood is
+                // worth the fuzzy cost; without one every page is a candidate.
+                const order = pagesNearestFirst(firstPage, lastPage, nearPage).slice(0, nearPage === undefined ? undefined : fuzzy.pageWindow);
                 for (let offset = 0; offset < order.length && matches.length === 0; offset += fuzzy.pagesPerBatch) {
                     if (offset > 0)
                         await yieldToEventLoop();
@@ -442,7 +444,7 @@ export class DocumentViewer {
             });
             this.#searchResult = result;
             if (result.activeIndex >= 0)
-                this.#goToPage(result.matches[result.activeIndex].pageIndex, true);
+                this.#revealSearchMatch(result.matches[result.activeIndex]);
             this.#emit("searchchange", result);
             this.#viewport?.update();
             return result;
@@ -683,11 +685,16 @@ export class DocumentViewer {
             current.matches.length;
         const result = immutableSearchResult({ ...current, activeIndex });
         this.#searchResult = result;
-        this.#goToPage(result.matches[activeIndex].pageIndex, true);
+        this.#revealSearchMatch(result.matches[activeIndex]);
         this.#emit("searchchange", result);
         this.#viewport?.update();
         return result;
     }
+    /** Land on the match's page, then bring the match itself into view. */
+    #revealSearchMatch(match) {
+        this.#goToPage(match.pageIndex, true);
+        void this.#viewport?.revealMatch(match);
+    }
     #goToPage(pageIndex, scrollViewport) {
         this.#assertAlive();
         const upperBound = Math.max(0, this.#state.pageCount - 1);

package/dist/viewport.d.ts

@@ -18,6 +18,7 @@ interface ViewportStrategy {
     update(): void;
     panBy(deltaX: number, deltaY: number): void;
     goToPage(pageIndex: number): void;
+    revealMatch(match: SearchMatch): Promise<void>;
     fitWidth(): number;
     fitPage(): number;
     destroy(): void;
@@ -32,6 +33,7 @@ export declare class AdaptiveViewport implements ViewportStrategy {
     update(): void;
     panBy(deltaX: number, deltaY: number): void;
     goToPage(pageIndex: number): void;
+    revealMatch(match: SearchMatch): Promise<void>;
     fitWidth(): number;
     fitPage(): number;
     destroy(): void;
@@ -46,6 +48,13 @@ export declare class ViewerViewport {
     update(): void;
     panBy(deltaX: number, deltaY: number): void;
     goToPage(pageIndex: number): void;
+    /**
+     * Scroll so the match itself is in view, not just its page: a page can be
+     * taller than the viewport, and a search that only lands on the page top
+     * leaves a match further down invisible until the reader scrolls. Resolves
+     * once the text runs are known; a navigation that happened meanwhile wins.
+     */
+    revealMatch(match: SearchMatch): Promise<void>;
     fitWidth(): number;
     fitPage(): number;
     schedule(): void;

package/dist/viewport.js

@@ -1,8 +1,11 @@
+import { matchTopInPage, revealScrollTop } from "./search-reveal.js";
 import { snapGraphemeOffset } from "./interaction.js";
 import { SpreadsheetViewport } from "./spreadsheet-viewport.js";
 const BASE_WIDTH = 816;
 const BASE_HEIGHT = 1056;
 const PAGE_GAP = 24;
+/** Page slots sit this far inside the spacer (top and left). */
+const SLOT_INSET = 12;
 export class AdaptiveViewport {
     #container;
     #host;
@@ -36,6 +39,9 @@ export class AdaptiveViewport {
     goToPage(pageIndex) {
         this.#strategy.goToPage(pageIndex);
     }
+    revealMatch(match) {
+        return this.#strategy.revealMatch(match);
+    }
     fitWidth() {
         return this.#strategy.fitWidth();
     }
@@ -154,6 +160,36 @@ export class ViewerViewport {
         }
         this.schedule();
     }
+    /**
+     * Scroll so the match itself is in view, not just its page: a page can be
+     * taller than the viewport, and a search that only lands on the page top
+     * leaves a match further down invisible until the reader scrolls. Resolves
+     * once the text runs are known; a navigation that happened meanwhile wins.
+     */
+    async revealMatch(match) {
+        if (this.#layout !== "continuous" || !this.#info)
+            return;
+        let runs;
+        try {
+            runs = await this.#host.getTextRuns(match.pageIndex);
+        }
+        catch {
+            return;
+        }
+        if (this.#destroyed || this.#host.state.pageIndex !== match.pageIndex)
+            return;
+        const top = matchTopInPage(runs, match);
+        if (top === undefined)
+            return;
+        const zoom = this.#host.state.zoom;
+        const metrics = pageMetrics(this.#info, zoom);
+        this.#root.scrollTop = revealScrollTop({
+            pageTop: metrics.offsets[match.pageIndex] ?? 0,
+            matchTop: SLOT_INSET + top * zoom,
+            viewportHeight: this.#root.clientHeight,
+        });
+        this.schedule();
+    }
     fitWidth() {
         const size = naturalPageSize(this.#info, this.#host.state.pageIndex);
         return Math.max(0.1, Math.min(8, (this.#root.clientWidth - 24) / size.width));
@@ -217,7 +253,9 @@ export class ViewerViewport {
             const slot = this.#slots.get(pageIndex) ?? this.#createSlot(pageIndex);
             const width = metrics.widths[pageIndex] ?? BASE_WIDTH * state.zoom;
             const height = metrics.heights[pageIndex] ?? BASE_HEIGHT * state.zoom;
-            const top = this.#layout === "single" ? 12 : (metrics.offsets[pageIndex] ?? 0) + 12;
+            const top = this.#layout === "single"
+                ? SLOT_INSET
+                : (metrics.offsets[pageIndex] ?? 0) + SLOT_INSET;
             const contentWidth = Math.max(this.#root.clientWidth, metrics.maxWidth + 24);
             slot.root.style.top = `${top}px`;
             slot.root.style.left = `${Math.max(12, (contentWidth - width) / 2)}px`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-doc",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "web-doc — embeddable browser-only document viewer with Rust/WASM adapters (a fork of Zrimo)",
   "keywords": [
     "document-viewer",