@aseity/idocs-preview 0.0.0-stage → 0.1.0

package/dist/core/index.js

@@ -0,0 +1,119 @@
+export class PreviewError extends Error {
+    code;
+    diagnostics;
+    constructor(error) {
+        super(error.message);
+        this.name = 'PreviewError';
+        this.code = error.code;
+        this.diagnostics = error.diagnostics;
+    }
+}
+function isZip(bytes) {
+    return bytes[0] === 0x50 && bytes[1] === 0x4b;
+}
+const OLE_MAGIC = [0xd0, 0xcf, 0x11, 0xe0, 0xa1, 0xb1, 0x1a, 0xe1];
+function isWordFile(bytes, name) {
+    return (isZip(bytes) ||
+        OLE_MAGIC.every((byte, i) => bytes[i] === byte) ||
+        /\.(docx|docm|dotx|dotm|doc)$/i.test(name ?? ''));
+}
+/** A private copy whose buffer can be transferred (a Node Buffer may share its pool). */
+function copyBytes(bytes) {
+    return new Uint8Array(bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes));
+}
+export function createSession(options = {}) {
+    const worker = options.worker ??
+        (options.workerUrl
+            ? new Worker(options.workerUrl, { type: 'module' })
+            : // Literally `new Worker(new URL(...), ...)`: the form bundlers
+                // (Turbopack, webpack, Vite) recognize to bundle the worker with its
+                // imports. Behind `??` they copy the file as a bare asset instead.
+                new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }));
+    const post = (message, transfer = []) => worker.postMessage(message, transfer);
+    const jobs = new Map();
+    let next = 1;
+    let disposed = false;
+    /** Set once the worker fails: every pending and later open rejects with it. */
+    let broken;
+    const answer = async (read, name) => {
+        if (!read)
+            return null;
+        try {
+            const bytes = await read(name);
+            return bytes ? copyBytes(bytes) : null;
+        }
+        catch {
+            return null;
+        }
+    };
+    worker.addEventListener('message', async (event) => {
+        const message = event.data;
+        const job = jobs.get(message.id);
+        if (!job)
+            return;
+        if (message.type === 'needs') {
+            const answers = await Promise.all(message.needs.map(async (need) => ({
+                need,
+                bytes: await answer(need.kind === 'font' ? options.readFont : job.options.readResource, need.name),
+            })));
+            if (disposed)
+                return;
+            post({ type: 'resources', id: message.id, answers }, answers.flatMap((a) => (a.bytes ? [a.bytes.buffer] : [])));
+            return;
+        }
+        jobs.delete(message.id);
+        if (message.type === 'opened')
+            job.resolve(message.document);
+        else
+            job.reject(new PreviewError(message.error));
+    });
+    // A worker script that fails to load or run, or a message that cannot be
+    // deserialized, leaves no reply to wait for: give up on the worker.
+    const fail = (event) => {
+        if (disposed || broken)
+            return;
+        const detail = event.message;
+        broken = new PreviewError({
+            code: 'worker-unavailable',
+            message: `The preview worker failed (${event.type}${detail ? `: ${detail}` : ''})`,
+            diagnostics: [],
+        });
+        worker.terminate?.();
+        for (const job of jobs.values())
+            job.reject(broken);
+        jobs.clear();
+    };
+    worker.addEventListener('error', fail);
+    worker.addEventListener('messageerror', fail);
+    worker.start?.();
+    post({ type: 'init', wasmUrl: options.wasmUrl?.toString() });
+    return {
+        open(input, openOptions = {}) {
+            if (disposed)
+                return Promise.reject(new Error('The preview session is disposed'));
+            if (broken)
+                return Promise.reject(broken);
+            const bytes = copyBytes(input);
+            const id = next++;
+            return new Promise((resolve, reject) => {
+                jobs.set(id, { options: openOptions, resolve, reject });
+                post({
+                    type: 'open',
+                    id,
+                    kind: openOptions.kind ?? (isWordFile(bytes, openOptions.name) ? 'docx' : 'idoc'),
+                    name: openOptions.name ?? 'document.idoc',
+                    bytes,
+                }, [bytes.buffer]);
+            });
+        },
+        dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            worker.terminate?.();
+            for (const job of jobs.values())
+                job.reject(new Error('The preview session is disposed'));
+            jobs.clear();
+        },
+    };
+}

package/dist/core/protocol.d.ts

@@ -0,0 +1,106 @@
+import type { DisplayPage } from './display.js';
+export type DocumentKind = 'idoc' | 'docx';
+/**
+ * Either end of the channel: a Worker (or a MessagePort) on the session side,
+ * the worker's global scope (or the other port) on the engine side.
+ */
+export interface Endpoint {
+    postMessage(message: unknown, transfer?: Transferable[]): void;
+    /** On the session side `error` and `messageerror` make the session unusable (`worker-unavailable`). */
+    addEventListener(type: 'message' | 'error' | 'messageerror', listener: (event: MessageEvent) => void): void;
+    start?(): void;
+    terminate?(): void;
+}
+/** A core diagnostic (load, layout or host-resource), as the CLI reports it. */
+export interface Diagnostic {
+    severity: 'error' | 'warning' | string;
+    code: string;
+    message: string;
+    file?: string;
+    line?: number;
+    col?: number;
+    path?: string;
+    nodeId?: string;
+    predicted?: boolean;
+    [key: string]: unknown;
+}
+export interface ConversionLoss {
+    code: string;
+    message: string;
+    /** Export losses (`.idoc`) only: whether the loss is approved. Convert losses (DOCX) have none. */
+    approved?: boolean;
+    /** Where in the source the loss is; for DOCX, in the converted source `<stem>.idoc`. */
+    source?: {
+        file?: string;
+        line?: number;
+        col?: number;
+        path?: string;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+export interface PreviewImage {
+    format: 'png' | 'jpeg';
+    bytes: Uint8Array;
+    /**
+     * A placeholder for an image `readResource` could not give or core could
+     * not read; the matching `image-missing` / `image-format` diagnostic is a
+     * warning. Draw a placeholder box rather than `bytes`.
+     */
+    missing?: boolean;
+}
+/** A laid-out document: the whole layout converged, every page at once. */
+export interface PreviewDocument {
+    pageCount: number;
+    pages: DisplayPage[];
+    images: PreviewImage[];
+    /** Load diagnostics, plus warnings about resources the host could not give. */
+    diagnostics: Diagnostic[];
+    layoutDiagnostics: Diagnostic[];
+    /** For `.idoc`: what export to DOCX would lose. For DOCX: what DOCX conversion lost. */
+    conversionLosses: ConversionLoss[];
+}
+/** A lookup core made that the host has not answered yet. */
+export type ResourceNeed = {
+    kind: 'asset';
+    name: string;
+} | {
+    kind: 'font';
+    name: string;
+};
+export type ToWorker = {
+    type: 'init';
+    wasmUrl?: string;
+} | {
+    type: 'open';
+    id: number;
+    kind: DocumentKind;
+    name: string;
+    bytes: Uint8Array;
+}
+/** Answers to a `needs` message; `bytes: null` means the host has none. */
+ | {
+    type: 'resources';
+    id: number;
+    answers: {
+        need: ResourceNeed;
+        bytes: Uint8Array | null;
+    }[];
+};
+export type FromWorker = {
+    type: 'needs';
+    id: number;
+    needs: ResourceNeed[];
+} | {
+    type: 'opened';
+    id: number;
+    document: PreviewDocument;
+} | {
+    type: 'failed';
+    id: number;
+    error: {
+        code: string;
+        message: string;
+        diagnostics: Diagnostic[];
+    };
+};

package/dist/core/protocol.js

@@ -0,0 +1 @@
+export {};

package/dist/core/worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/core/worker.js

@@ -0,0 +1,5 @@
+// Web Worker entry. The session creates it with `new URL('./worker.ts',
+// import.meta.url)` so the host's bundler emits it; hosts without a bundler
+// pass `workerUrl` to createSession instead.
+import { serve } from './engine.js';
+serve(self);

package/dist/view/find-bar.d.ts

@@ -0,0 +1,26 @@
+import type { Finder } from './find.js';
+import type { PageRect } from './viewport.js';
+export interface FindHost {
+    /** The positioned box the bar floats in, over the top-right of the pages. */
+    frame: HTMLElement;
+    finder: Finder;
+    /** Index of the current page, where a new search starts. */
+    currentPage(): number;
+    /** Scroll so the current match shows. */
+    reveal(bounds: PageRect): void;
+    /** Repaint every overlay that exists (the matches changed). */
+    repaint(): void;
+    /** The find bar closed: select the match (if any) and give the preview the keyboard back. */
+    closed(): void;
+}
+export interface FindBar {
+    readonly isOpen: boolean;
+    /** Show the bar and focus its field; with `query`, search for it. */
+    open(query?: string): void;
+    /** Hide the bar and drop the matches. */
+    close(): void;
+    next(): void;
+    previous(): void;
+    destroy(): void;
+}
+export declare function createFindBar(host: FindHost): FindBar;

package/dist/view/find-bar.js

@@ -0,0 +1,117 @@
+function button(label, text) {
+    const node = document.createElement('button');
+    node.type = 'button';
+    node.textContent = text;
+    node.title = label;
+    node.setAttribute('aria-label', label);
+    Object.assign(node.style, { border: '0', background: 'transparent', padding: '2px 6px', cursor: 'pointer', font: 'inherit' });
+    return node;
+}
+export function createFindBar(host) {
+    const { frame, finder } = host;
+    const bar = document.createElement('div');
+    bar.className = 'idocs-preview-find';
+    bar.setAttribute('role', 'search');
+    Object.assign(bar.style, {
+        display: 'none',
+        position: 'absolute',
+        top: '8px',
+        right: '24px',
+        zIndex: '1',
+        alignItems: 'center',
+        gap: '4px',
+        padding: '4px 6px',
+        background: '#fff',
+        border: '1px solid #d1d5db',
+        borderRadius: '6px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+        font: '13px system-ui, sans-serif',
+    });
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = '查找';
+    input.setAttribute('aria-label', '查找');
+    Object.assign(input.style, { width: '180px', border: '0', outline: 'none', font: 'inherit' });
+    const count = document.createElement('span');
+    count.className = 'idocs-preview-find-count';
+    count.setAttribute('aria-live', 'polite');
+    Object.assign(count.style, { minWidth: '4em', color: '#6b7280', textAlign: 'right' });
+    const previousButton = button('上一个', '↑');
+    const nextButton = button('下一个', '↓');
+    const closeButton = button('关闭', '×');
+    bar.append(input, count, previousButton, nextButton, closeButton);
+    frame.append(bar);
+    const show = () => {
+        const total = finder.matches.length;
+        count.textContent = input.value === '' ? '' : total === 0 ? '无结果' : `${finder.current + 1}/${total}`;
+        const bounds = finder.bounds();
+        if (bounds)
+            host.reveal(bounds);
+        host.repaint();
+    };
+    const search = () => {
+        finder.search(input.value, Math.max(host.currentPage(), 0));
+        show();
+    };
+    const api = {
+        get isOpen() {
+            return bar.style.display !== 'none';
+        },
+        open(query) {
+            bar.style.display = 'flex';
+            if (query !== undefined)
+                input.value = query;
+            // Reopened with the last query: its matches were dropped on close.
+            if (query !== undefined || finder.matches.length === 0)
+                search();
+            input.focus();
+            input.select();
+        },
+        close() {
+            if (!api.isOpen)
+                return;
+            bar.style.display = 'none';
+            host.closed();
+            finder.clear();
+            count.textContent = '';
+            host.repaint();
+        },
+        next() {
+            finder.next();
+            show();
+        },
+        previous() {
+            finder.previous();
+            show();
+        },
+        destroy() {
+            bar.remove();
+        },
+    };
+    // While an input method composes, search once the text is committed:
+    // Chromium sends the last input event before compositionend.
+    input.addEventListener('input', (event) => {
+        if (!event.isComposing)
+            search();
+    });
+    input.addEventListener('compositionend', search);
+    input.addEventListener('keydown', (event) => {
+        if (event.isComposing)
+            return;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (event.shiftKey)
+                api.previous();
+            else
+                api.next();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            api.close();
+        }
+    });
+    previousButton.addEventListener('click', () => api.previous());
+    nextButton.addEventListener('click', () => api.next());
+    closeButton.addEventListener('click', () => api.close());
+    return api;
+}

package/dist/view/find.d.ts

@@ -0,0 +1,46 @@
+import { type HighlightBox, type StoryKey, type TextIndex, type TextSelection } from './selection.js';
+import type { PageRect } from './viewport.js';
+/** One match: UTF-16 offsets in its story's text, and the page it starts on. */
+export interface FindMatch {
+    story: StoryKey;
+    start: number;
+    end: number;
+    page: number;
+}
+/** The selection covering `match`. */
+export declare function matchSelection(match: FindMatch): TextSelection;
+/**
+ * Every match of `query` in the document, ignoring case and not
+ * overlapping, in reading order: page by page (by where a match starts),
+ * and on a page header, body, footnotes, footer. A match never runs over a
+ * paragraph end or a formula or image placeholder.
+ */
+export declare function findMatches(index: TextIndex, query: string): FindMatch[];
+/**
+ * The find state: the matches of the last search and the current one.
+ * Stepping wraps around at either end.
+ */
+export declare class Finder {
+    #private;
+    readonly index: TextIndex;
+    matches: FindMatch[];
+    /** Index of the current match in `matches`; -1 without matches. */
+    current: number;
+    constructor(index: TextIndex);
+    /**
+     * Search for `query`; the current match is the first on or after page
+     * `fromPage` (the first match when none is). Returns the number of matches.
+     */
+    search(query: string, fromPage?: number): number;
+    get match(): FindMatch | undefined;
+    next(): void;
+    previous(): void;
+    clear(): void;
+    /** Highlight boxes on page `page`: every match there, and the current one's. */
+    marks(page: number): {
+        matches: HighlightBox[];
+        current: HighlightBox[];
+    };
+    /** The current match's box on the page it starts on, to scroll to. */
+    bounds(): PageRect | undefined;
+}

package/dist/view/find.js

@@ -0,0 +1,121 @@
+import { storyKind, turnedToPage, } from './selection.js';
+/** The selection covering `match`. */
+export function matchSelection(match) {
+    return { story: match.story, start: match.start, end: match.end, reversed: false };
+}
+/** Reading order of the stories on one page. */
+const RANK = { header: 0, body: 1, footnotes: 2, footer: 3 };
+function rank(story) {
+    return RANK[storyKind(story)];
+}
+/** Lower case, code point by code point, keeping the text's length so offsets carry over. */
+function fold(text) {
+    let out = '';
+    for (const ch of text) {
+        const lower = ch.toLowerCase();
+        out += lower.length === ch.length ? lower : ch;
+    }
+    return out;
+}
+/**
+ * Every match of `query` in the document, ignoring case and not
+ * overlapping, in reading order: page by page (by where a match starts),
+ * and on a page header, body, footnotes, footer. A match never runs over a
+ * paragraph end or a formula or image placeholder.
+ */
+export function findMatches(index, query) {
+    const needle = fold(query);
+    if (needle === '' || needle.includes('\n') || needle.includes(''))
+        return [];
+    const matches = [];
+    for (const story of index.stories()) {
+        const text = fold(index.text(story));
+        for (let at = text.indexOf(needle); at >= 0; at = text.indexOf(needle, at + needle.length)) {
+            matches.push({ story, start: at, end: at + needle.length, page: index.pageAt(story, at) });
+        }
+    }
+    return matches.sort((a, b) => a.page - b.page || rank(a.story) - rank(b.story) || a.start - b.start);
+}
+/**
+ * The find state: the matches of the last search and the current one.
+ * Stepping wraps around at either end.
+ */
+export class Finder {
+    index;
+    matches = [];
+    /** Index of the current match in `matches`; -1 without matches. */
+    current = -1;
+    /** Matches by every page they show on (running onto the next page, in a repeated header row). */
+    #byPage = new Map();
+    constructor(index) {
+        this.index = index;
+    }
+    /**
+     * Search for `query`; the current match is the first on or after page
+     * `fromPage` (the first match when none is). Returns the number of matches.
+     */
+    search(query, fromPage = 0) {
+        this.matches = findMatches(this.index, query);
+        this.#byPage.clear();
+        for (const match of this.matches) {
+            for (const page of this.index.pagesShowing(match.story, match.start, match.end)) {
+                let list = this.#byPage.get(page);
+                if (!list)
+                    this.#byPage.set(page, (list = []));
+                list.push(match);
+            }
+        }
+        const from = this.matches.findIndex((match) => match.page >= fromPage);
+        this.current = this.matches.length === 0 ? -1 : Math.max(from, 0);
+        return this.matches.length;
+    }
+    get match() {
+        return this.matches[this.current];
+    }
+    next() {
+        if (this.matches.length)
+            this.current = (this.current + 1) % this.matches.length;
+    }
+    previous() {
+        if (this.matches.length)
+            this.current = (this.current - 1 + this.matches.length) % this.matches.length;
+    }
+    clear() {
+        this.matches = [];
+        this.current = -1;
+        this.#byPage.clear();
+    }
+    /** Highlight boxes on page `page`: every match there, and the current one's. */
+    marks(page) {
+        const here = this.#byPage.get(page) ?? [];
+        const current = this.match;
+        return {
+            matches: here.flatMap((match) => this.index.highlights(matchSelection(match), page)),
+            current: current && here.includes(current) ? this.index.highlights(matchSelection(current), page) : [],
+        };
+    }
+    /** The current match's box on the page it starts on, to scroll to. */
+    bounds() {
+        const match = this.match;
+        if (!match)
+            return undefined;
+        const corners = this.index.highlights(matchSelection(match), match.page).flatMap((box) => {
+            const points = [
+                [box.left, box.top],
+                [box.right, box.bottom],
+            ];
+            return box.turn ? points.map(([x, y]) => turnedToPage(box.turn, x, y)) : points;
+        });
+        if (corners.length === 0)
+            return undefined;
+        const xs = corners.map(([x]) => x);
+        const ys = corners.map(([, y]) => y);
+        return {
+            page: match.page,
+            left: Math.min(...xs),
+            right: Math.max(...xs),
+            top: Math.min(...ys),
+            bottom: Math.max(...ys),
+        };
+    }
+}

package/dist/view/index.d.ts

@@ -0,0 +1,24 @@
+import type { DisplayPage, PreviewImage } from '../core/index.js';
+export { canvasFont, type CanvasFontInput, fontChain, type FontChainInput } from '../core/fonts.js';
+/**
+ * Decoded images by resource index (`ImageItem.image`): a source is drawn
+ * into its frame, `null` (missing or undecodable) as a placeholder box,
+ * `undefined` (not decoded yet) not at all.
+ */
+export type PageImages = readonly (CanvasImageSource | null | undefined)[];
+/**
+ * Decode every image resource of a document with `createImageBitmap`. A
+ * placeholder resource (`missing`) or bytes the browser cannot decode give
+ * `null`; the latter is reported through `onError`.
+ */
+export declare function decodeImages(images: readonly PreviewImage[], onError?: (index: number, error: unknown) => void): Promise<(ImageBitmap | null)[]>;
+/**
+ * Paint one page onto `ctx`, whose origin is the page's top-left corner and
+ * whose unit is `pixelsPerPoint` device pixels.
+ */
+export declare function paintPage(ctx: CanvasRenderingContext2D, page: DisplayPage, pixelsPerPoint: number, images?: PageImages): void;
+export * from './shell.js';
+export * from './viewport.js';
+export * from './selection.js';
+export * from './find.js';
+export type { FindBar } from './find-bar.js';