@aseity/idocs-preview 0.0.0-stage → 0.2.0

package/dist/view/selection.js

@@ -0,0 +1,350 @@
+import { glyphX, glyphOffset } from '../core/wire.js';
+function textLength(line) {
+    return line.text.length;
+}
+/** Right edge of glyph `k`: the next glyph's x, the last one's at the line end. */
+function glyphEnd(line, k) {
+    return k + 1 < line.glyphs.length ? glyphX(line.glyphs, k + 1) : line.x + line.width;
+}
+/** Offset of glyph `k`'s end within the line text. */
+function glyphEndOffset(line, k) {
+    return k + 1 < line.glyphs.length ? glyphOffset(line.glyphs, k + 1) : textLength(line);
+}
+/** Offset (in the line text) of the glyph whose box holds `x`, or undefined outside the glyphs. */
+export function indexForX(line, x) {
+    for (let k = 0; k < line.glyphs.length; k++) {
+        if (x >= glyphX(line.glyphs, k) && x < glyphEnd(line, k))
+            return glyphOffset(line.glyphs, k);
+    }
+    return undefined;
+}
+/** Offset (in the line text) of the glyph boundary nearest `x`: left half of a glyph before it, right half after. */
+export function closestIndexForX(line, x) {
+    for (let k = 0; k < line.glyphs.length; k++) {
+        const start = glyphX(line.glyphs, k);
+        const end = glyphEnd(line, k);
+        if (x < (start + end) / 2)
+            return glyphOffset(line.glyphs, k);
+    }
+    return textLength(line);
+}
+/** x of the glyph boundary at `index` (in the line text); an index inside a glyph gives its start. */
+export function xForIndex(line, index) {
+    for (let k = 0; k < line.glyphs.length; k++) {
+        if (index < glyphEndOffset(line, k))
+            return glyphX(line.glyphs, k);
+    }
+    return line.x + line.width;
+}
+/**
+ * The story a line belongs to. Mirrors the display list's offsets
+ * (`StoryOffsets::plan` in rust/idocs-core/src/display/build.rs): header and
+ * footer offsets restart on every page, so each page's is its own story.
+ */
+export function storyKey(line, page) {
+    return line.story === 'header' || line.story === 'footer' ? `${line.story}:${page}` : line.story;
+}
+/** The display list's story a story key stands for: `header:3` is a header. */
+export function storyKind(story) {
+    return story.split(':')[0];
+}
+/**
+ * A point of a tbRl line's own frame on the page: the frame is turned 90°
+ * clockwise about `turn` (`TextLine.turn`, `HighlightBox.turn`).
+ */
+export function turnedToPage([ox, oy], x, y) {
+    return [ox - y, oy + x];
+}
+/** A page point in a line's frame: the inverse of `turnedToPage` for a tbRl line. */
+function local(line, x, y) {
+    if (!line.turn)
+        return [x, y];
+    const [ox, oy] = line.turn;
+    return [y - oy, ox - x];
+}
+/** How far `(x, y)` is from a line's box: vertical distance first, then horizontal. */
+function distance(placed, x, y) {
+    const dx = Math.max(placed.left - x, 0, x - placed.right);
+    // Boxes are half-open: a line's bottom edge belongs to the line below.
+    const dy = y < placed.top ? placed.top - y : y >= placed.bottom ? y - placed.bottom + 1e-6 : 0;
+    return dy * 1e6 + dx;
+}
+const segmenter = new Intl.Segmenter(undefined, { granularity: 'word' });
+/**
+ * The text facts of a laid-out document for selections: each story's text
+ * (line texts at their offsets, `\n` between paragraphs) and where its
+ * lines are on each page.
+ */
+export class TextIndex {
+    #stories = new Map();
+    #pages;
+    constructor(pages) {
+        this.#pages = pages.map((page, index) => page.lines.map((line) => {
+            const story = storyKey(line, index);
+            let box = { left: line.x, right: line.x + line.width, top: line.top, bottom: line.top + line.height };
+            if (line.turn) {
+                const [x1, y1] = turnedToPage(line.turn, box.left, box.top);
+                const [x2, y2] = turnedToPage(line.turn, box.right, box.bottom);
+                box = { left: Math.min(x1, x2), right: Math.max(x1, x2), top: Math.min(y1, y2), bottom: Math.max(y1, y2) };
+            }
+            const placed = { line, page: index, story, ...box };
+            let entry = this.#stories.get(story);
+            if (!entry)
+                this.#stories.set(story, (entry = { text: '', lines: [], reading: [], repeats: [] }));
+            entry.lines.push(placed);
+            return placed;
+        }));
+        for (const story of this.#stories.values()) {
+            // Offsets follow reading order; a repeated header row shares its offsets.
+            const ordered = [...story.lines].sort((a, b) => a.line.offset - b.line.offset);
+            let text = '';
+            for (const placed of ordered) {
+                const { line } = placed;
+                if (line.offset < text.length) {
+                    story.repeats.push(placed);
+                    continue;
+                }
+                text += '\n'.repeat(line.offset - text.length) + line.text;
+                story.reading.push(placed);
+            }
+            story.text = text;
+        }
+    }
+    /** The story's text; empty for a story the document does not have. */
+    text(story) {
+        return this.#stories.get(story)?.text ?? '';
+    }
+    /** Every story of the document. */
+    stories() {
+        return [...this.#stories.keys()];
+    }
+    /**
+     * The page of the character at `offset` in `story`: the page of the line
+     * holding it (the first showing of a repeated header row), or of the
+     * nearest line before it.
+     */
+    pageAt(story, offset) {
+        const reading = this.#stories.get(story)?.reading ?? [];
+        let lo = 0;
+        let hi = reading.length;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (reading[mid].line.offset <= offset)
+                lo = mid + 1;
+            else
+                hi = mid;
+        }
+        return reading[Math.max(lo - 1, 0)]?.page ?? 0;
+    }
+    /**
+     * The pages that show any of `[start, end)` in `story`, in order: those
+     * from the page of `start` to that of `end - 1`, and those where a
+     * repeated table header row shows it again.
+     */
+    pagesShowing(story, start, end) {
+        const pages = new Set();
+        const last = this.pageAt(story, end - 1);
+        for (let page = this.pageAt(story, start); page <= last; page++)
+            pages.add(page);
+        for (const { line, page } of this.#stories.get(story)?.repeats ?? []) {
+            if (line.offset < end && line.offset + line.text.length > start)
+                pages.add(page);
+        }
+        return [...pages].sort((a, b) => a - b);
+    }
+    /** The story of the line nearest `point`, or undefined on a page without text. */
+    storyAt(point) {
+        let best;
+        let bestDistance = Infinity;
+        for (const placed of this.#pages[point.page] ?? []) {
+            const d = distance(placed, point.x, point.y);
+            if (d < bestDistance)
+                [best, bestDistance] = [placed, d];
+        }
+        return best?.story;
+    }
+    /**
+     * Where `point` falls in `story`'s text: `offset` is the nearest glyph
+     * boundary, `under` the start of the glyph under the point (the nearest
+     * boundary when there is none). Above the story's lines on that page is
+     * their start, below them their end; a page without the story's lines
+     * goes to the end of its text on the pages before.
+     */
+    locate(story, point) {
+        const lines = this.#stories.get(story)?.lines ?? [];
+        const here = lines.filter((p) => p.page === point.page);
+        if (here.length === 0) {
+            const before = lines.filter((p) => p.page < point.page);
+            const offset = before.length ? Math.max(...before.map((p) => p.line.offset + p.line.text.length)) : 0;
+            return { offset, under: offset };
+        }
+        if (point.y < Math.min(...here.map((p) => p.top))) {
+            const offset = Math.min(...here.map((p) => p.line.offset));
+            return { offset, under: offset };
+        }
+        if (point.y >= Math.max(...here.map((p) => p.bottom))) {
+            const offset = Math.max(...here.map((p) => p.line.offset + p.line.text.length));
+            return { offset, under: offset };
+        }
+        let best = here[0];
+        let bestDistance = Infinity;
+        for (const placed of here) {
+            const d = distance(placed, point.x, point.y);
+            if (d < bestDistance)
+                [best, bestDistance] = [placed, d];
+        }
+        const [x] = local(best.line, point.x, point.y);
+        const offset = best.line.offset + closestIndexForX(best.line, x);
+        const under = indexForX(best.line, x);
+        return { offset, under: under === undefined ? offset : best.line.offset + under };
+    }
+    /** The word (by `Intl.Segmenter`) holding the character at `offset`, within its paragraph. */
+    wordAt(story, offset) {
+        const [start, end] = this.paragraphAt(story, offset);
+        const text = this.text(story).slice(start, end);
+        let at = offset - start;
+        if (at >= text.length && at > 0)
+            at = text.length - 1;
+        for (const segment of segmenter.segment(text)) {
+            const stop = segment.index + segment.segment.length;
+            if (at < stop)
+                return [start + segment.index, start + stop];
+        }
+        return [offset, offset];
+    }
+    /** The paragraph holding `offset`, without its ending newline. */
+    paragraphAt(story, offset) {
+        const text = this.text(story);
+        const start = text.lastIndexOf('\n', offset - 1) + 1;
+        const next = text.indexOf('\n', offset);
+        return [start, next < 0 ? text.length : next];
+    }
+    /** Plain text of `selection`, without the placeholders of formulas and images. */
+    copyText(selection) {
+        return this.text(selection.story).slice(selection.start, selection.end).replaceAll('\ufffc', '');
+    }
+    /**
+     * Highlight boxes of `selection` on page `page`, one per line in page
+     * order, each a line tall and centred on its text. A line whose paragraph end is selected gets a little extra width,
+     * so a selected empty paragraph shows.
+     */
+    highlights(selection, page) {
+        const story = this.#stories.get(selection.story);
+        if (!story || selection.start === selection.end)
+            return [];
+        const boxes = [];
+        for (const placed of this.#pages[page] ?? []) {
+            if (placed.story !== selection.story)
+                continue;
+            const { line } = placed;
+            const start = line.offset;
+            const end = line.offset + line.text.length;
+            const from = Math.max(selection.start, start);
+            const to = Math.min(selection.end, end);
+            const newline = selection.end > end && story.text[end] === '\n';
+            if (from > to || (from === to && !newline))
+                continue;
+            // A line tall, centred on the text: an exact line height puts its
+            // leading above the text, and a box on the line box would show it there.
+            const middle = line.baseline + (line.descent - line.ascent) / 2;
+            const box = {
+                left: xForIndex(line, from - start),
+                right: xForIndex(line, to - start) + (newline ? line.height * 0.3 : 0),
+                top: middle - line.height / 2,
+                bottom: middle + line.height / 2,
+            };
+            if (line.turn)
+                box.turn = line.turn;
+            boxes.push(box);
+        }
+        return boxes;
+    }
+}
+/**
+ * The selection state (after Zed's editor): a committed selection and, while
+ * the pointer is down, a pending one with the mode the click count chose.
+ * Single click selects by character, double by word, triple by paragraph,
+ * quadruple the whole story. Dragging snaps to the mode's units and keeps
+ * the unit first clicked; it never leaves the story it started in.
+ */
+export class Selector {
+    index;
+    selection;
+    #pending;
+    constructor(index) {
+        this.index = index;
+    }
+    /** The selection being dragged, until `up`. */
+    get pending() {
+        return this.#pending?.selection;
+    }
+    /** The selection to show: the pending one while dragging. */
+    get current() {
+        return this.#pending?.selection ?? this.selection;
+    }
+    /**
+     * Pointer down at `point` with the click count `clicks` (`MouseEvent.detail`).
+     * With `extend` (shift), the committed selection's anchor stays and the
+     * selection runs to `point` by characters. Returns false off any text.
+     */
+    down(point, clicks, extend = false) {
+        const kept = this.selection;
+        if (extend && kept) {
+            const anchor = kept.reversed ? kept.end : kept.start;
+            this.#pending = { selection: kept, mode: 'character', original: [anchor, anchor] };
+            this.move(point);
+            return true;
+        }
+        const story = this.index.storyAt(point);
+        if (story === undefined)
+            return false;
+        const mode = clicks >= 4 ? 'all' : clicks === 3 ? 'paragraph' : clicks === 2 ? 'word' : 'character';
+        const original = this.#unitAt(story, mode, point);
+        this.#pending = { selection: { story, start: original[0], end: original[1], reversed: false }, mode, original };
+        return true;
+    }
+    /** Pointer moved while down: the head follows, within the story. */
+    move(point) {
+        const pending = this.#pending;
+        if (!pending || pending.mode === 'all')
+            return;
+        const { story } = pending.selection;
+        const [start, end] = this.#unitAt(story, pending.mode, point);
+        const [first, last] = pending.original;
+        pending.selection =
+            start < first
+                ? { story, start, end: last, reversed: true }
+                : { story, start: first, end: Math.max(end, last), reversed: false };
+    }
+    /** The unit of `mode` at `point` in `story`: a collapsed range by character, the whole story for `all`. */
+    #unitAt(story, mode, point) {
+        if (mode === 'all')
+            return [0, this.index.text(story).length];
+        const { offset, under } = this.index.locate(story, point);
+        if (mode === 'paragraph')
+            return this.index.paragraphAt(story, under);
+        if (mode === 'word')
+            return this.index.wordAt(story, under);
+        return [offset, offset];
+    }
+    /** Pointer up: the pending selection becomes the selection. */
+    up() {
+        if (this.#pending)
+            this.selection = this.#pending.selection;
+        this.#pending = undefined;
+    }
+    /** Select the whole of `story`: the current selection's story, else the body. */
+    selectAll(story = this.current?.story ?? 'body') {
+        this.#pending = undefined;
+        this.selection = { story, start: 0, end: this.index.text(story).length, reversed: false };
+    }
+    clear() {
+        this.#pending = undefined;
+        this.selection = undefined;
+    }
+    /** Plain text of the current selection, for the clipboard. */
+    text() {
+        const selection = this.current;
+        return selection ? this.index.copyText(selection) : '';
+    }
+}

package/dist/view/shell.d.ts

@@ -0,0 +1,77 @@
+import { type OpenOptions, type PreviewDocument, type SessionOptions } from '../core/index.js';
+import { type FindBar } from './find-bar.js';
+import type { Selector } from './selection.js';
+export interface ViewOptions {
+    /** 1 = 100% (one point is 4/3 CSS pixels). Clamped to 0.1–10. */
+    zoom?: number;
+    /** Called with the index (0-based) of the page filling most of the viewport, on mount and whenever it changes. */
+    onPageChange?: (index: number, doc: PreviewDocument) => void;
+    /**
+     * Called with the new zoom when the reader zooms with Ctrl+wheel (a
+     * trackpad pinch sends the same events); not for `setZoom`.
+     */
+    onZoomChange?: (zoom: number) => void;
+    /** Device-pixel budget of one page canvas; beyond it the page is drawn blurrier. */
+    maxCanvasPixels?: number;
+}
+export interface PreviewView {
+    /** The canvases that exist right now, in page order (visible pages and one either side). */
+    readonly canvases: readonly HTMLCanvasElement[];
+    readonly zoom: number;
+    /** Index of the current page; -1 for a document without pages. */
+    readonly currentPage: number;
+    /** The text selection (#449): read `selection`, call `selectAll`, `clear`, `text`. */
+    readonly selector: Selector;
+    /** The find bar (#451), also opened by Ctrl+F while the preview has focus. */
+    readonly find: FindBar;
+    /** The zoom at which the widest page fills the viewport width (see `fitWidthZoom`). */
+    readonly fitWidthZoom: number;
+    setZoom(zoom: number): void;
+    /**
+     * Scrolls page `index` (0-based, clamped) to the top of the viewport;
+     * `behavior: 'smooth'` animates the scroll (default: jump).
+     */
+    goToPage(index: number, options?: ScrollOptions): void;
+    /** Removes the view and frees every canvas. */
+    destroy(): void;
+}
+/**
+ * Mount `doc` into `container`, which must have a height: the view fills it
+ * and scrolls inside it.
+ */
+export declare function mountPreview(container: HTMLElement, doc: PreviewDocument, options?: ViewOptions): PreviewView;
+export interface PreviewOptions extends ViewOptions {
+    /** Where the Worker and wasm are, and the font reader (see `createSession`). */
+    session?: SessionOptions;
+    /** Shown while layout runs. */
+    loadingText?: string;
+    /** Show the first page while later display pages are generated. Selection becomes available when open completes. */
+    progressive?: boolean;
+}
+export type PreviewState = 'empty' | 'loading' | 'ready' | 'error';
+export interface Preview {
+    /**
+     * Lay out `bytes` in the Worker, showing the loading state meanwhile, then
+     * show every page at once. Rejects with a `PreviewError` (the message is
+     * shown in place of the pages). When opens overlap, the last one is shown.
+     */
+    open(bytes: Uint8Array | ArrayBuffer, options?: OpenOptions): Promise<PreviewDocument>;
+    readonly state: PreviewState;
+    /** The document on screen. */
+    readonly document: PreviewDocument | undefined;
+    /** The view of `document`, for its canvases. */
+    readonly view: PreviewView | undefined;
+    readonly zoom: number;
+    /** Index of the current page; -1 before a document is shown. */
+    readonly currentPage: number;
+    setZoom(zoom: number): void;
+    /** Scrolls page `index` (0-based) of the document on screen to the top (see `PreviewView.goToPage`). */
+    goToPage(index: number, options?: ScrollOptions): void;
+    /** Terminates the Worker and frees every canvas; later opens reject. */
+    destroy(): void;
+}
+/**
+ * The host interface: mount into `container` (which must have a height), open
+ * documents, set the zoom, hear about page changes, destroy.
+ */
+export declare function createPreview(container: HTMLElement, options?: PreviewOptions): Preview;