@aseity/idocs-preview 0.0.0-stage → 0.2.0

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, textbox: 4, lineNumber: 5 };
+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,27 @@
+import type { GlyphOutline, 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 raster resources as bitmaps and SVGs as vector image elements. A
+ * placeholder resource (`missing`) or bytes the browser cannot decode give
+ * `null`; the latter is reported through `onError`.
+ */
+export type DecodedImage = ImageBitmap | (HTMLImageElement & {
+    close(): void;
+});
+export declare function decodeImages(images: readonly PreviewImage[], onError?: (index: number, error: unknown) => void): Promise<(DecodedImage | 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, outlines?: readonly GlyphOutline[]): void;
+export * from './shell.js';
+export * from './viewport.js';
+export * from './selection.js';
+export * from './find.js';
+export type { FindBar } from './find-bar.js';

package/dist/view/index.js

@@ -0,0 +1,274 @@
+import { packedGlyphs } from '../core/wire.js';
+import { canvasFont, CANVAS_TEXT_LANGUAGE } from '../core/fonts.js';
+export { canvasFont, fontChain } from '../core/fonts.js';
+/** Parsed paths, kept while the page's display list lives (redraws on zoom). */
+const paths = new WeakMap();
+function path2d(item) {
+    let path = paths.get(item);
+    if (!path) {
+        path = new Path2D(item.d);
+        paths.set(item, path);
+    }
+    return path;
+}
+export function decodeImages(images, onError = (index, error) => console.warn(`image ${index} cannot be decoded`, error)) {
+    return Promise.all(images.map(async (image, index) => {
+        if (image.missing)
+            return null;
+        try {
+            if (image.format === 'svg+xml')
+                return await decodeSvg(image.bytes);
+            const bitmap = await createImageBitmap(new Blob([image.bytes], { type: `image/${image.format}` }));
+            return image.washout ? await washedOut(bitmap) : bitmap;
+        }
+        catch (error) {
+            onError(index, error);
+            return null;
+        }
+    }));
+}
+/** Keep vectors available for every Canvas zoom; ImageBitmap cannot decode SVG. */
+async function decodeSvg(bytes) {
+    const xml = new DOMParser().parseFromString(new TextDecoder().decode(bytes), 'image/svg+xml');
+    const root = xml.documentElement;
+    // Browsers give viewBox-only image documents a 300×150 viewport. Match the
+    // source's intrinsic ratio instead, including when just one dimension is set.
+    const box = root.viewBox.baseVal;
+    const width = root.getAttribute('width');
+    const height = root.getAttribute('height');
+    if (box.width > 0 && box.height > 0) {
+        if (!width)
+            root.setAttribute('width', String(height ? root.height.baseVal.value * box.width / box.height : box.width));
+        if (!height)
+            root.setAttribute('height', String(width ? root.width.baseVal.value * box.height / box.width : box.height));
+    }
+    const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(xml)], { type: 'image/svg+xml' }));
+    const image = Object.assign(new Image(), { close: () => URL.revokeObjectURL(url) });
+    image.src = url;
+    try {
+        await image.decode();
+        return image;
+    }
+    catch (error) {
+        image.close();
+        throw error;
+    }
+}
+/** Word's washout (#473): each channel `min(255, 205 + 0.3 × value)`. */
+async function washedOut(bitmap) {
+    const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return bitmap;
+    ctx.drawImage(bitmap, 0, 0);
+    const pixels = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+    const data = pixels.data;
+    for (let i = 0; i < data.length; i += 4) {
+        for (let k = 0; k < 3; k++)
+            data[i + k] = Math.min(255, Math.round(205 + 0.3 * data[i + k]));
+    }
+    ctx.putImageData(pixels, 0, 0);
+    bitmap.close();
+    return createImageBitmap(canvas);
+}
+function paintImage(ctx, item, images) {
+    const source = images[item.image];
+    if (source) {
+        ctx.drawImage(source, item.x, item.y, item.width, item.height);
+        return;
+    }
+    if (source === undefined)
+        return;
+    // Placeholder: a grey box with a cross, inside the frame.
+    ctx.save();
+    ctx.fillStyle = '#f3f4f6';
+    ctx.fillRect(item.x, item.y, item.width, item.height);
+    ctx.strokeStyle = '#9ca3af';
+    ctx.lineWidth = 0.75;
+    const inset = ctx.lineWidth / 2;
+    ctx.strokeRect(item.x + inset, item.y + inset, item.width - 2 * inset, item.height - 2 * inset);
+    ctx.beginPath();
+    ctx.moveTo(item.x, item.y);
+    ctx.lineTo(item.x + item.width, item.y + item.height);
+    ctx.moveTo(item.x + item.width, item.y);
+    ctx.lineTo(item.x, item.y + item.height);
+    ctx.stroke();
+    ctx.restore();
+}
+function paintItems(ctx, items, images, outlines) {
+    for (const item of items) {
+        switch (item.kind) {
+            case 'glyphs':
+                ctx.fillStyle = item.color;
+                ctx.font = canvasFont(item);
+                ctx.fontKerning = 'none';
+                // File mode supplies outlines; browser mode shares the measurement CSS.
+                const packed = packedGlyphs(item.glyphs);
+                const count = packed?.count ?? item.glyphs.length;
+                for (let i = 0; i < count; i++) {
+                    const glyph = packed ? undefined : item.glyphs[i];
+                    const x = packed ? packed.f64[i * 4] : glyph.x;
+                    const width = packed ? packed.f64[i * 4 + 1] : glyph.width;
+                    const text = packed ? packed.texts[packed.u32[i * 8 + 5]] : glyph.text;
+                    const unmeasured = packed ? (packed.u32[i * 8 + 6] & 1) !== 0 : glyph.unmeasured;
+                    const shapes = packed ? packed.shapes[packed.u32[i * 8 + 7] - 1] : glyph.shapes;
+                    if (shapes?.length) {
+                        for (const shape of shapes) {
+                            const outline = outlines[shape.outline];
+                            if (!outline)
+                                throw new Error(`Missing glyph outline ${shape.outline}`);
+                            ctx.save();
+                            const sx = item.scaleX ?? 1;
+                            ctx.transform(item.size * sx, 0, item.size * (item.syntheticSlant ?? 0) * sx, -item.size, x + shape.xOffset * item.size * sx, item.baseline - shape.yOffset * item.size);
+                            ctx.fill(path2d(outline));
+                            ctx.restore();
+                        }
+                    }
+                    else if (!unmeasured) {
+                        if (item.scaleX !== undefined) {
+                            ctx.save();
+                            ctx.translate(x, item.baseline);
+                            ctx.scale(item.scaleX, 1);
+                            ctx.fillText(text, 0, 0);
+                            ctx.restore();
+                        }
+                        else
+                            ctx.fillText(text, x, item.baseline);
+                    }
+                    else {
+                        ctx.strokeStyle = item.color;
+                        ctx.lineWidth = 0.5;
+                        ctx.strokeRect(x, item.lineTop, width, item.lineHeight);
+                    }
+                }
+                break;
+            case 'rect':
+                ctx.fillStyle = item.color;
+                ctx.fillRect(item.x, item.y, item.width, item.height);
+                break;
+            case 'line':
+                ctx.strokeStyle = item.color;
+                ctx.lineWidth = item.width;
+                ctx.beginPath();
+                ctx.moveTo(item.x1, item.y1);
+                ctx.lineTo(item.x2, item.y2);
+                ctx.stroke();
+                break;
+            case 'clip':
+                ctx.save();
+                ctx.beginPath();
+                ctx.rect(item.rect.x, item.rect.y, item.rect.width, item.rect.height);
+                ctx.clip();
+                paintItems(ctx, item.items, images, outlines);
+                ctx.restore();
+                break;
+            case 'turn':
+                ctx.save();
+                ctx.transform(0, 1, -1, 0, item.x, item.y);
+                paintItems(ctx, item.items, images, outlines);
+                ctx.restore();
+                break;
+            case 'transform':
+                ctx.save();
+                ctx.transform(...item.matrix);
+                paintItems(ctx, item.items, images, outlines);
+                ctx.restore();
+                break;
+            case 'shape': {
+                const path = path2d(item);
+                if (item.fill !== undefined) {
+                    if (typeof item.fill === 'string') {
+                        ctx.fillStyle = item.fill;
+                    }
+                    else {
+                        const paint = item.fill;
+                        const scale = 4;
+                        const tile = new OffscreenCanvas(paint.width * scale, paint.height * scale);
+                        const brush = tile.getContext('2d');
+                        if (!brush)
+                            throw new Error('Pattern canvas context unavailable');
+                        brush.scale(scale, scale);
+                        brush.fillStyle = paint.background;
+                        brush.fillRect(0, 0, paint.width, paint.height);
+                        brush.fillStyle = paint.foreground;
+                        for (const rectangle of paint.rects)
+                            brush.fillRect(...rectangle);
+                        const pattern = ctx.createPattern(tile, 'repeat');
+                        if (!pattern)
+                            throw new Error('Pattern fill unavailable');
+                        pattern.setTransform(new DOMMatrix().scale(1 / scale));
+                        ctx.fillStyle = pattern;
+                    }
+                    ctx.fill(path);
+                }
+                if (item.stroke) {
+                    ctx.save();
+                    ctx.strokeStyle = item.stroke.color;
+                    ctx.lineWidth = item.stroke.width;
+                    ctx.setLineDash(item.stroke.dash ?? []);
+                    ctx.stroke(path);
+                    ctx.restore();
+                }
+                break;
+            }
+            case 'path': {
+                // Formula glyph outlines, stretchy delimiters and emphasis marks come
+                // with the display list (KaTeX outlines in core), so no math font is
+                // needed here.
+                ctx.save();
+                if (item.clip) {
+                    ctx.beginPath();
+                    ctx.rect(item.clip.x, item.clip.y, item.clip.width, item.clip.height);
+                    ctx.clip();
+                }
+                ctx.transform(...item.transform);
+                ctx.fillStyle = item.color;
+                const browserFont = item.glyph?.text?.browser;
+                if (browserFont) {
+                    // Formula coordinates use an em square with an upward y axis.
+                    ctx.scale(1 / 100, -1 / 100);
+                    ctx.font = canvasFont({ ...browserFont, role: 'serif', size: 100 });
+                    ctx.fontKerning = 'none';
+                    ctx.fillText(item.glyph.char, 0, 0);
+                }
+                else {
+                    ctx.fill(path2d(item));
+                }
+                const stroke = item.glyph?.text?.standIn.strokeEm;
+                if (stroke && item.transform[3] !== 0) {
+                    ctx.strokeStyle = item.color;
+                    ctx.lineWidth = stroke * item.glyph.size / Math.abs(item.transform[3]);
+                    ctx.stroke(path2d(item));
+                }
+                ctx.restore();
+                break;
+            }
+            case 'image':
+                paintImage(ctx, item, images);
+                break;
+        }
+    }
+}
+/**
+ * Paint one page onto `ctx`, whose origin is the page's top-left corner and
+ * whose unit is `pixelsPerPoint` device pixels.
+ */
+export function paintPage(ctx, page, pixelsPerPoint, images = [], outlines = []) {
+    ctx.save();
+    Object.assign(ctx, { lang: CANVAS_TEXT_LANGUAGE });
+    ctx.setTransform(pixelsPerPoint, 0, 0, pixelsPerPoint, 0, 0);
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, page.width, page.height);
+    ctx.textBaseline = 'alphabetic';
+    ctx.textAlign = 'left';
+    ctx.direction = 'ltr';
+    paintItems(ctx, page.items, images, outlines);
+    ctx.restore();
+}
+// The shell (scrolling, zoom, virtualization, host interface): shell.ts.
+export * from './shell.js';
+export * from './viewport.js';
+// Selection and copy (#449): the model is pure (selection.ts); the shell wires it up.
+export * from './selection.js';
+// The find bar (#451): the model is pure too (find.ts).
+export * from './find.js';

package/dist/view/selection-layer.d.ts

@@ -0,0 +1,27 @@
+import type { PreviewDocument } from '../core/index.js';
+import { type HighlightBox, Selector, type TextSelection } from './selection.js';
+import { type PageLayout } from './viewport.js';
+export interface SelectionHost {
+    scroller: HTMLElement;
+    /** The positioned column that holds the page boxes. */
+    content: HTMLElement;
+    doc: PreviewDocument;
+    layout(): PageLayout;
+    zoom(): number;
+    /** Repaint every overlay that exists (the selection changed). */
+    repaint(): void;
+    /** Find matches to paint under the selection on page `page` (#451). */
+    marks(page: number): {
+        matches: HighlightBox[];
+        current: HighlightBox[];
+    };
+}
+export interface SelectionLayer {
+    readonly selector: Selector;
+    /** Focus the preview for the keyboard, selecting `selection` if given. */
+    select(selection: TextSelection | undefined): void;
+    /** Paint page `index`'s highlight onto its overlay, already sized like the page canvas. */
+    paint(index: number, overlay: HTMLCanvasElement, pixelsPerPoint: number): void;
+    destroy(): void;
+}
+export declare function createSelectionLayer(host: SelectionHost): SelectionLayer;