@aseity/idocs-preview 0.0.0-stage → 0.1.0

package/dist/view/index.js

@@ -0,0 +1,143 @@
+import { canvasFont } 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;
+}
+/**
+ * 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 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 {
+            return await createImageBitmap(new Blob([image.bytes], { type: `image/${image.format}` }));
+        }
+        catch (error) {
+            onError(index, error);
+            return null;
+        }
+    }));
+}
+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) {
+    for (const item of items) {
+        switch (item.kind) {
+            case 'glyphs':
+                ctx.font = canvasFont(item);
+                ctx.fillStyle = item.color;
+                // Every glyph at the x its metric profile gives, never scaled. A
+                // character nothing could measure gets a box over its estimated width,
+                // as the native snapshot draws a missing glyph.
+                for (const glyph of item.glyphs) {
+                    if (glyph.unmeasured) {
+                        ctx.strokeStyle = item.color;
+                        ctx.lineWidth = 0.5;
+                        ctx.strokeRect(glyph.x, item.lineTop, glyph.width, item.lineHeight);
+                    }
+                    else {
+                        ctx.fillText(glyph.text, glyph.x, item.baseline);
+                    }
+                }
+                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);
+                ctx.restore();
+                break;
+            case 'turn':
+                ctx.save();
+                ctx.transform(0, 1, -1, 0, item.x, item.y);
+                paintItems(ctx, item.items, images);
+                ctx.restore();
+                break;
+            case 'path': {
+                // Formula glyph outlines and stretchy delimiters 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;
+                ctx.fill(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 = []) {
+    ctx.save();
+    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);
+    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;

package/dist/view/selection-layer.js

@@ -0,0 +1,269 @@
+import { Selector, TextIndex, turnedToPage, } from './selection.js';
+import { PX_PER_PT } from './viewport.js';
+/** Selection fill, drawn over the page content. */
+const HIGHLIGHT = 'rgba(0, 110, 230, 0.28)';
+/** Find matches (#451): every match, and the current one over it. */
+const MATCH = 'rgba(255, 200, 0, 0.4)';
+const CURRENT_MATCH = 'rgba(255, 130, 0, 0.55)';
+/** CSS px band along the scroller's top and bottom where a drag starts scrolling. */
+const EDGE = 16;
+/** Groups of boxes on consecutive lines that touch, to draw as one outline. */
+function runs(boxes) {
+    const out = [];
+    for (const box of boxes) {
+        const run = out.at(-1);
+        const last = run?.at(-1);
+        const joins = last &&
+            !last.turn &&
+            !box.turn &&
+            Math.abs(box.top - last.bottom) < 0.5 &&
+            box.left < last.right &&
+            box.right > last.left;
+        if (joins)
+            run.push(box);
+        else
+            out.push([box]);
+    }
+    return out;
+}
+/** The outline of a run: down the right edges, back up the left ones. */
+function outline(run) {
+    const ys = [run[0].top];
+    for (let i = 1; i < run.length; i++)
+        ys.push((run[i - 1].bottom + run[i].top) / 2);
+    ys.push(run.at(-1).bottom);
+    const points = [];
+    run.forEach((box, i) => points.push([box.right, ys[i]], [box.right, ys[i + 1]]));
+    for (let i = run.length - 1; i >= 0; i--)
+        points.push([run[i].left, ys[i + 1]], [run[i].left, ys[i]]);
+    // Drop repeated points and the middle of straight runs.
+    const kept = [];
+    for (const point of points) {
+        const last = kept.at(-1);
+        if (last && Math.abs(last[0] - point[0]) < 1e-6 && Math.abs(last[1] - point[1]) < 1e-6)
+            continue;
+        kept.push(point);
+    }
+    return kept.filter((point, i) => {
+        const a = kept[(i + kept.length - 1) % kept.length];
+        const b = kept[(i + 1) % kept.length];
+        return Math.abs((point[0] - a[0]) * (b[1] - a[1]) - (point[1] - a[1]) * (b[0] - a[0])) > 1e-9;
+    });
+}
+/** A closed path through `points` with each corner rounded (after gpui's HighlightedRange). */
+function rounded(ctx, points, radius) {
+    const n = points.length;
+    if (n < 3)
+        return;
+    const length = (a, b) => Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const last = points[n - 1];
+    ctx.moveTo((last[0] + points[0][0]) / 2, (last[1] + points[0][1]) / 2);
+    for (let i = 0; i < n; i++) {
+        const here = points[i];
+        const before = points[(i + n - 1) % n];
+        const after = points[(i + 1) % n];
+        const r = Math.min(radius, length(before, here) / 2, length(here, after) / 2);
+        ctx.arcTo(here[0], here[1], after[0], after[1], r);
+    }
+    ctx.closePath();
+}
+function paintBoxes(ctx, boxes, color) {
+    if (boxes.length === 0)
+        return;
+    ctx.beginPath();
+    for (const run of runs(boxes)) {
+        const radius = 0.15 * Math.min(...run.map((b) => b.bottom - b.top));
+        const turn = run[0].turn;
+        if (turn) {
+            // The box is in the line's frame: map its corners onto the page.
+            const page = (x, y) => turnedToPage(turn, x, y);
+            const b = run[0];
+            rounded(ctx, [page(b.left, b.top), page(b.right, b.top), page(b.right, b.bottom), page(b.left, b.bottom)], radius);
+        }
+        else {
+            rounded(ctx, outline(run), radius);
+        }
+    }
+    ctx.fillStyle = color;
+    ctx.fill();
+}
+export function createSelectionLayer(host) {
+    const { scroller, content, doc } = host;
+    const selector = new Selector(new TextIndex(doc.pages));
+    let dragging = false;
+    let last;
+    let autoscroll = 0;
+    // Focused while the preview has the selection: shortcuts and copy land here.
+    const keys = document.createElement('textarea');
+    keys.className = 'idocs-preview-keys';
+    keys.readOnly = true;
+    keys.tabIndex = -1;
+    keys.setAttribute('aria-hidden', 'true');
+    Object.assign(keys.style, {
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        width: '1px',
+        height: '1px',
+        opacity: '0',
+        padding: '0',
+        border: '0',
+        resize: 'none',
+        pointerEvents: 'none',
+    });
+    scroller.parentElement?.append(keys);
+    // The canvases are the text: no native selection, a text cursor.
+    Object.assign(content.style, { userSelect: 'none', cursor: 'text' });
+    /** Keep a non-empty selection in the textarea so the browser offers copy. */
+    const sync = () => {
+        const text = selector.selection ? selector.text() : '';
+        keys.value = text ? ' ' : '';
+        if (text && document.activeElement === keys)
+            keys.select();
+    };
+    const pointAt = (clientX, clientY) => {
+        const { pages } = host.layout();
+        if (pages.length === 0)
+            return undefined;
+        const rect = content.getBoundingClientRect();
+        const y = clientY - rect.top;
+        let index = pages.findIndex((p) => y < p.top + p.height);
+        if (index < 0)
+            index = pages.length - 1;
+        // In the gap between two pages: the nearer one.
+        if (index > 0 && y < pages[index].top) {
+            const above = pages[index - 1];
+            if (y - (above.top + above.height) < pages[index].top - y)
+                index--;
+        }
+        const placed = pages[index];
+        const left = rect.width / 2 - placed.width / 2;
+        const scale = PX_PER_PT * host.zoom();
+        return { page: index, x: (clientX - rect.left - left) / scale, y: (y - placed.top) / scale };
+    };
+    const follow = () => {
+        if (!dragging || !last)
+            return;
+        const point = pointAt(last.x, last.y);
+        if (point)
+            selector.move(point);
+        host.repaint();
+    };
+    // Dragging near or past the top or bottom edge scrolls, faster the further out.
+    const step = () => {
+        autoscroll = 0;
+        if (!dragging || !last)
+            return;
+        const rect = scroller.getBoundingClientRect();
+        const top = rect.top + EDGE;
+        const bottom = rect.bottom - EDGE;
+        const out = last.y < top ? last.y - top : last.y > bottom ? last.y - bottom : 0;
+        if (out === 0)
+            return;
+        scroller.scrollTop += Math.max(-60, Math.min(60, out / 2));
+        autoscroll = requestAnimationFrame(step);
+    };
+    // Mouse events, not pointer events: only mousedown carries the click count.
+    const onDown = (event) => {
+        if (event.button !== 0)
+            return;
+        const point = pointAt(event.clientX, event.clientY);
+        if (!point)
+            return;
+        event.preventDefault();
+        keys.focus({ preventScroll: true });
+        if (!selector.down(point, event.detail || 1, event.shiftKey)) {
+            selector.clear();
+            sync();
+            host.repaint();
+            return;
+        }
+        dragging = true;
+        last = { x: event.clientX, y: event.clientY };
+        // Follow the drag outside the pages too, until the button comes up.
+        addEventListener('mousemove', onMove);
+        addEventListener('mouseup', onUp);
+        host.repaint();
+    };
+    const onMove = (event) => {
+        if (!dragging)
+            return;
+        last = { x: event.clientX, y: event.clientY };
+        follow();
+        if (!autoscroll)
+            step();
+    };
+    const onUp = () => {
+        removeEventListener('mousemove', onMove);
+        removeEventListener('mouseup', onUp);
+        if (!dragging)
+            return;
+        dragging = false;
+        if (autoscroll)
+            cancelAnimationFrame(autoscroll);
+        autoscroll = 0;
+        selector.up();
+        sync();
+        host.repaint();
+    };
+    const onScroll = () => follow();
+    const onKey = (event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
+            event.preventDefault();
+            selector.selectAll();
+            sync();
+            host.repaint();
+        }
+        else if (event.key === 'Escape') {
+            selector.clear();
+            sync();
+            host.repaint();
+        }
+    };
+    const onCopy = (event) => {
+        const text = selector.text();
+        if (!text || !event.clipboardData)
+            return;
+        event.clipboardData.setData('text/plain', text);
+        event.preventDefault();
+    };
+    content.addEventListener('mousedown', onDown);
+    scroller.addEventListener('scroll', onScroll, { passive: true });
+    keys.addEventListener('keydown', onKey);
+    keys.addEventListener('copy', onCopy);
+    return {
+        selector,
+        select(selection) {
+            if (selection) {
+                selector.clear();
+                selector.selection = selection;
+            }
+            keys.focus({ preventScroll: true });
+            sync();
+            host.repaint();
+        },
+        paint(index, overlay, pixelsPerPoint) {
+            const ctx = overlay.getContext('2d');
+            if (!ctx)
+                return;
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.clearRect(0, 0, overlay.width, overlay.height);
+            ctx.setTransform(pixelsPerPoint, 0, 0, pixelsPerPoint, 0, 0);
+            const marks = host.marks(index);
+            paintBoxes(ctx, marks.matches, MATCH);
+            paintBoxes(ctx, marks.current, CURRENT_MATCH);
+            const selection = selector.current;
+            if (selection)
+                paintBoxes(ctx, selector.index.highlights(selection, index), HIGHLIGHT);
+        },
+        destroy() {
+            if (autoscroll)
+                cancelAnimationFrame(autoscroll);
+            content.removeEventListener('mousedown', onDown);
+            removeEventListener('mousemove', onMove);
+            removeEventListener('mouseup', onUp);
+            scroller.removeEventListener('scroll', onScroll);
+            keys.remove();
+        },
+    };
+}

package/dist/view/selection.d.ts

@@ -0,0 +1,131 @@
+import type { DisplayPage, Story, TextLine } from '../core/index.js';
+/** Offset (in the line text) of the glyph whose box holds `x`, or undefined outside the glyphs. */
+export declare function indexForX(line: TextLine, x: number): number | undefined;
+/** Offset (in the line text) of the glyph boundary nearest `x`: left half of a glyph before it, right half after. */
+export declare function closestIndexForX(line: TextLine, x: number): number;
+/** x of the glyph boundary at `index` (in the line text); an index inside a glyph gives its start. */
+export declare function xForIndex(line: TextLine, index: number): number;
+/**
+ * A story is one run of text a selection stays in: `body` and `footnotes`
+ * run through the document, a page's header and footer are their own
+ * (`header:<page index>`, `footer:<page index>`). Built only by `storyKey`.
+ */
+export type StoryKey = string;
+/** A selection in one story's text: UTF-16 offsets, `start <= end`; `reversed` when the head is at `start`. */
+export interface TextSelection {
+    story: StoryKey;
+    start: number;
+    end: number;
+    reversed: boolean;
+}
+/** A point on a page: the page's index in the document, and points from its top-left corner. */
+export interface PagePoint {
+    page: number;
+    x: number;
+    y: number;
+}
+/** One selected line's highlight box, in the line's frame (see `turn`). */
+export interface HighlightBox {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    /** For a tbRl line: the box is in the line's own frame, turned 90° clockwise about this point. */
+    turn?: [number, number];
+}
+export type SelectMode = 'character' | 'word' | 'paragraph' | 'all';
+/**
+ * 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 declare function storyKey(line: TextLine, page: number): StoryKey;
+/** The display list's story a story key stands for: `header:3` is a header. */
+export declare function storyKind(story: StoryKey): Story;
+/**
+ * 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 declare function turnedToPage([ox, oy]: [number, number], x: number, y: number): [number, number];
+/**
+ * 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 declare class TextIndex {
+    #private;
+    constructor(pages: readonly DisplayPage[]);
+    /** The story's text; empty for a story the document does not have. */
+    text(story: StoryKey): string;
+    /** Every story of the document. */
+    stories(): StoryKey[];
+    /**
+     * 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: StoryKey, offset: number): number;
+    /**
+     * 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: StoryKey, start: number, end: number): number[];
+    /** The story of the line nearest `point`, or undefined on a page without text. */
+    storyAt(point: PagePoint): StoryKey | undefined;
+    /**
+     * 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: StoryKey, point: PagePoint): {
+        offset: number;
+        under: number;
+    };
+    /** The word (by `Intl.Segmenter`) holding the character at `offset`, within its paragraph. */
+    wordAt(story: StoryKey, offset: number): [number, number];
+    /** The paragraph holding `offset`, without its ending newline. */
+    paragraphAt(story: StoryKey, offset: number): [number, number];
+    /** Plain text of `selection`, without the placeholders of formulas and images. */
+    copyText(selection: TextSelection): string;
+    /**
+     * 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: TextSelection, page: number): HighlightBox[];
+}
+/**
+ * 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 declare class Selector {
+    #private;
+    readonly index: TextIndex;
+    selection: TextSelection | undefined;
+    constructor(index: TextIndex);
+    /** The selection being dragged, until `up`. */
+    get pending(): TextSelection | undefined;
+    /** The selection to show: the pending one while dragging. */
+    get current(): TextSelection | undefined;
+    /**
+     * 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: PagePoint, clicks: number, extend?: boolean): boolean;
+    /** Pointer moved while down: the head follows, within the story. */
+    move(point: PagePoint): void;
+    /** Pointer up: the pending selection becomes the selection. */
+    up(): void;
+    /** Select the whole of `story`: the current selection's story, else the body. */
+    selectAll(story?: string): void;
+    clear(): void;
+    /** Plain text of the current selection, for the clipboard. */
+    text(): string;
+}