@aseity/idocs-preview 0.0.0-stage → 0.2.0

package/dist/view/shell.js

@@ -0,0 +1,452 @@
+// The web preview's view shell (#448): a scrolled column of pages, one Canvas
+// each, kept only for the visible pages and one page either side. Geometry
+// lives in viewport.ts (pure, tested in Node); this file is the DOM side.
+import { createSession } from '../core/index.js';
+import { createFindBar } from './find-bar.js';
+import { Finder, matchSelection } from './find.js';
+import { decodeImages, paintPage } from './index.js';
+import { createSelectionLayer } from './selection-layer.js';
+import { anchorAt, canvasResolution, currentPage, fitWidthZoom, layoutPages, PX_PER_PT, pagesToKeep, revealScroll, scrollTopFor, } from './viewport.js';
+const SPACING = { gap: 16, padding: 16 };
+function clampZoom(zoom) {
+    return Number.isFinite(zoom) && zoom > 0 ? Math.min(10, Math.max(0.1, zoom)) : 1;
+}
+function element(tag, className) {
+    const node = document.createElement(tag);
+    node.className = className;
+    return node;
+}
+/** Empty the backing store before dropping a canvas, so its memory goes now, not at GC. */
+function freeCanvas(canvas) {
+    canvas.width = 0;
+    canvas.height = 0;
+    canvas.remove();
+}
+/**
+ * Mount `doc` into `container`, which must have a height: the view fills it
+ * and scrolls inside it.
+ */
+export function mountPreview(container, doc, options = {}) {
+    let zoom = clampZoom(options.zoom);
+    let layout = layoutPages(doc.pages, zoom, SPACING);
+    let current = -1;
+    let frame = 0;
+    let destroyed = false;
+    const slots = new Map();
+    // Decoded once per document; canvases released by zoom or virtualization
+    // are repainted from these bitmaps.
+    let images = [];
+    // The view box holds the scroller and what floats over it: the find bar and
+    // the selection's hidden textarea.
+    const view = element('div', 'idocs-preview-view');
+    Object.assign(view.style, { height: '100%', position: 'relative' });
+    const scroller = element('div', 'idocs-preview-scroller');
+    Object.assign(scroller.style, { height: '100%', overflow: 'auto', position: 'relative' });
+    // Focusable, so the preview has focus (for Ctrl+F) when tabbed into, not only once clicked.
+    scroller.tabIndex = 0;
+    const content = element('div', 'idocs-preview-pages');
+    content.style.position = 'relative';
+    scroller.append(content);
+    view.append(scroller);
+    container.append(view);
+    const selection = createSelectionLayer({
+        scroller,
+        content,
+        doc,
+        layout: () => layout,
+        zoom: () => zoom,
+        repaint,
+        marks: (page) => finder.marks(page),
+    });
+    function repaint() {
+        for (const [index, slot] of slots)
+            selection.paint(index, slot.overlay, slot.pixelsPerPoint);
+    }
+    const finder = new Finder(selection.selector.index);
+    const find = createFindBar({
+        frame: view,
+        finder,
+        currentPage: () => current,
+        reveal: (bounds) => {
+            // From the layout alone: the page may have no canvas yet, scrolling mounts it.
+            const { top, left } = revealScroll(layout, zoom, bounds, { top: scroller.scrollTop, left: scroller.scrollLeft }, { width: scroller.clientWidth, height: scroller.clientHeight });
+            scroller.scrollTop = top;
+            scroller.scrollLeft = left;
+        },
+        repaint,
+        closed: () => {
+            const match = finder.match;
+            selection.select(match && matchSelection(match));
+        },
+    });
+    // Ctrl+F anywhere in the preview (the scroller, the pages' hidden
+    // textarea, the find bar) opens the find bar; Escape closes it.
+    const onKey = (event) => {
+        if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === 'f') {
+            event.preventDefault();
+            find.open();
+        }
+        else if (event.key === 'Escape' && find.isOpen) {
+            event.preventDefault();
+            find.close();
+        }
+    };
+    view.addEventListener('keydown', onKey);
+    // Zoom keeping the spot at (x, y), CSS px from the scroller's top-left,
+    // where it is: the viewport top for setZoom, the pointer for Ctrl+wheel.
+    const zoomAround = (next, x, y) => {
+        next = clampZoom(next);
+        if (next === zoom)
+            return false;
+        const anchor = anchorAt(layout, scroller.scrollTop + y);
+        const across = (scroller.scrollLeft + x) / Math.max(content.offsetWidth, 1);
+        zoom = next;
+        layout = layoutPages(doc.pages, zoom, SPACING);
+        releaseAll();
+        sizeContent();
+        scroller.scrollTop = scrollTopFor(layout, anchor) - y;
+        scroller.scrollLeft = across * content.offsetWidth - x;
+        update();
+        return true;
+    };
+    // Ctrl+wheel and pinch zoom, the wheel's deltas summed per frame so a
+    // fast pinch relays the pages once a frame.
+    let wheelFrame = 0;
+    let wheelDelta = 0;
+    let wheelPoint = { x: 0, y: 0 };
+    const onWheel = (event) => {
+        if (!event.ctrlKey)
+            return;
+        event.preventDefault();
+        const unit = event.deltaMode === WheelEvent.DOM_DELTA_LINE
+            ? 16
+            : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+                ? scroller.clientHeight
+                : 1;
+        wheelDelta += event.deltaY * unit;
+        const box = scroller.getBoundingClientRect();
+        wheelPoint = { x: event.clientX - box.left, y: event.clientY - box.top };
+        if (wheelFrame)
+            return;
+        wheelFrame = requestAnimationFrame(() => {
+            wheelFrame = 0;
+            const delta = wheelDelta;
+            wheelDelta = 0;
+            if (!destroyed && zoomAround(zoom * Math.exp(-delta / 500), wheelPoint.x, wheelPoint.y))
+                options.onZoomChange?.(zoom);
+        });
+    };
+    scroller.addEventListener('wheel', onWheel, { passive: false });
+    const sizeContent = () => {
+        content.style.width = `max(100%, ${layout.width}px)`;
+        content.style.height = `${layout.height}px`;
+    };
+    const paint = (index, slot) => {
+        const placed = layout.pages[index];
+        const res = canvasResolution(placed.width, placed.height, globalThis.devicePixelRatio || 1, options.maxCanvasPixels);
+        const { canvas } = slot;
+        canvas.width = res.width;
+        canvas.height = res.height;
+        // The backing store is rounded up; show it at exactly scale px per CSS px.
+        canvas.style.width = `${res.width / res.scale}px`;
+        canvas.style.height = `${res.height / res.scale}px`;
+        const ctx = canvas.getContext('2d');
+        slot.pixelsPerPoint = PX_PER_PT * zoom * res.scale;
+        if (ctx)
+            paintPage(ctx, doc.pages[index], slot.pixelsPerPoint, images, doc.glyphOutlines);
+        const { overlay } = slot;
+        overlay.width = res.width;
+        overlay.height = res.height;
+        overlay.style.width = canvas.style.width;
+        overlay.style.height = canvas.style.height;
+        selection.paint(index, overlay, slot.pixelsPerPoint);
+    };
+    const mountSlot = (index) => {
+        const placed = layout.pages[index];
+        const box = element('div', 'idocs-preview-page');
+        box.dataset.page = String(doc.pages[index].number);
+        Object.assign(box.style, {
+            position: 'absolute',
+            top: `${placed.top}px`,
+            left: `calc(50% - ${placed.width / 2}px)`,
+            width: `${placed.width}px`,
+            height: `${placed.height}px`,
+            overflow: 'hidden',
+            background: '#fff',
+        });
+        const canvas = element('canvas', 'idocs-preview-content');
+        canvas.style.display = 'block';
+        const overlay = element('canvas', 'idocs-preview-selection');
+        Object.assign(overlay.style, { position: 'absolute', left: '0', top: '0', pointerEvents: 'none' });
+        box.append(canvas, overlay);
+        const slot = { box, canvas, overlay, pixelsPerPoint: 1 };
+        paint(index, slot);
+        content.append(box);
+        return slot;
+    };
+    const release = (index) => {
+        const slot = slots.get(index);
+        if (!slot)
+            return;
+        freeCanvas(slot.canvas);
+        freeCanvas(slot.overlay);
+        slot.box.remove();
+        slots.delete(index);
+    };
+    const releaseAll = () => {
+        for (const index of [...slots.keys()])
+            release(index);
+    };
+    const update = () => {
+        frame = 0;
+        if (destroyed)
+            return;
+        const { scrollTop, clientHeight } = scroller;
+        const keep = pagesToKeep(layout, scrollTop, clientHeight);
+        for (const index of [...slots.keys()])
+            if (index < keep.first || index > keep.last)
+                release(index);
+        for (let index = keep.first; index <= keep.last; index++)
+            if (!slots.has(index))
+                slots.set(index, mountSlot(index));
+        const now = currentPage(layout, scrollTop, clientHeight);
+        if (now !== current) {
+            current = now;
+            if (now >= 0)
+                options.onPageChange?.(now, doc);
+        }
+    };
+    const schedule = () => {
+        if (!frame && !destroyed)
+            frame = requestAnimationFrame(update);
+    };
+    // Redraw everything at the new resolution: zoom, or devicePixelRatio
+    // changing (browser zoom, moving the window to another screen).
+    const redraw = () => {
+        releaseAll();
+        update();
+    };
+    let resolution;
+    const watchResolution = () => {
+        resolution?.removeEventListener('change', onResolution);
+        resolution = globalThis.matchMedia?.(`(resolution: ${globalThis.devicePixelRatio || 1}dppx)`);
+        resolution?.addEventListener('change', onResolution);
+    };
+    function onResolution() {
+        watchResolution();
+        redraw();
+    }
+    const resize = new ResizeObserver(schedule);
+    scroller.addEventListener('scroll', schedule, { passive: true });
+    resize.observe(scroller);
+    watchResolution();
+    sizeContent();
+    update();
+    if (doc.images.length > 0) {
+        decodeImages(doc.images).then((decoded) => {
+            if (destroyed)
+                return decoded.forEach((bitmap) => bitmap?.close());
+            images = decoded;
+            // Pages mounted before decoding finished were painted without images.
+            for (const [index, slot] of slots)
+                paint(index, slot);
+        });
+    }
+    return {
+        get canvases() {
+            return [...slots.entries()].sort((a, b) => a[0] - b[0]).map(([, slot]) => slot.canvas);
+        },
+        get zoom() {
+            return zoom;
+        },
+        get currentPage() {
+            return current;
+        },
+        get selector() {
+            return selection.selector;
+        },
+        find,
+        get fitWidthZoom() {
+            return fitWidthZoom(doc.pages, scroller.clientWidth, SPACING);
+        },
+        setZoom(next) {
+            if (destroyed)
+                return;
+            // The same spot at the viewport top, and horizontally in the middle.
+            zoomAround(next, scroller.clientWidth / 2, 0);
+        },
+        goToPage(index, options) {
+            if (destroyed || layout.pages.length === 0)
+                return;
+            const page = Math.min(Math.max(0, Math.trunc(index)), layout.pages.length - 1);
+            scroller.scrollTo({
+                top: scrollTopFor(layout, { page, fraction: 0, above: SPACING.padding }),
+                behavior: options?.behavior,
+            });
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            if (frame)
+                cancelAnimationFrame(frame);
+            frame = 0;
+            if (wheelFrame)
+                cancelAnimationFrame(wheelFrame);
+            wheelFrame = 0;
+            scroller.removeEventListener('wheel', onWheel);
+            resize.disconnect();
+            scroller.removeEventListener('scroll', schedule);
+            resolution?.removeEventListener('change', onResolution);
+            view.removeEventListener('keydown', onKey);
+            find.destroy();
+            selection.destroy();
+            releaseAll();
+            for (const bitmap of images)
+                bitmap?.close();
+            images = [];
+            view.remove();
+        },
+    };
+}
+/**
+ * The host interface: mount into `container` (which must have a height), open
+ * documents, set the zoom, hear about page changes, destroy.
+ */
+export function createPreview(container, options = {}) {
+    const session = createSession(options.session);
+    let zoom = clampZoom(options.zoom);
+    let state = 'empty';
+    let doc;
+    let view;
+    let latest = 0;
+    let destroyed = false;
+    let firstPage;
+    let firstImages = [];
+    const clearFirstPage = () => {
+        if (firstPage)
+            freeCanvas(firstPage);
+        firstPage = undefined;
+        for (const image of firstImages)
+            image?.close();
+        firstImages = [];
+    };
+    const root = element('div', 'idocs-preview');
+    Object.assign(root.style, { height: '100%', position: 'relative' });
+    const status = element('div', 'idocs-preview-status');
+    status.setAttribute('role', 'status');
+    Object.assign(status.style, { padding: '16px', textAlign: 'center' });
+    root.append(status);
+    container.append(root);
+    const setState = (next, message = '') => {
+        state = next;
+        root.dataset.state = next;
+        status.textContent = message;
+        status.hidden = message === '';
+    };
+    setState('empty');
+    return {
+        async open(bytes, openOptions) {
+            if (destroyed)
+                throw new Error('the preview was destroyed');
+            const ticket = ++latest;
+            clearFirstPage();
+            view?.destroy();
+            view = undefined;
+            doc = undefined;
+            setState('loading', options.loadingText ?? '正在排版…');
+            try {
+                const opened = await session.open(bytes, {
+                    ...openOptions,
+                    onPage: options.progressive ? (part) => {
+                        openOptions?.onPage?.(part);
+                        if (ticket !== latest || destroyed || part.page.number !== 1)
+                            return;
+                        clearFirstPage();
+                        const canvas = element('canvas', 'idocs-preview-first-page');
+                        firstPage = canvas;
+                        const scale = Math.min(zoom * PX_PER_PT, Math.max(1, root.clientWidth - 32) / part.page.width);
+                        const resolution = canvasResolution(part.page.width * scale, part.page.height * scale, globalThis.devicePixelRatio || 1, options.maxCanvasPixels);
+                        canvas.width = resolution.width;
+                        canvas.height = resolution.height;
+                        Object.assign(canvas.style, {
+                            width: `${resolution.width / resolution.scale}px`,
+                            height: `${resolution.height / resolution.scale}px`,
+                            display: 'block', margin: '0 auto',
+                        });
+                        const paint = (images) => {
+                            const context = canvas.getContext('2d');
+                            if (context)
+                                paintPage(context, part.page, scale * resolution.scale, images, part.glyphOutlines);
+                        };
+                        paint([]);
+                        root.append(canvas);
+                        void decodeImages(part.images).then((images) => {
+                            if (firstPage !== canvas || ticket !== latest || destroyed) {
+                                for (const image of images)
+                                    image?.close();
+                                return;
+                            }
+                            firstImages = images;
+                            paint(images);
+                        });
+                    } : openOptions?.onPage,
+                });
+                if (ticket === latest && !destroyed) {
+                    clearFirstPage();
+                    setState('ready');
+                    doc = opened;
+                    view = mountPreview(root, opened, {
+                        ...options,
+                        zoom,
+                        onZoomChange: (next) => {
+                            zoom = next;
+                            options.onZoomChange?.(next);
+                        },
+                    });
+                }
+                return opened;
+            }
+            catch (error) {
+                if (ticket === latest && !destroyed) {
+                    clearFirstPage();
+                    setState('error', error.message);
+                }
+                throw error;
+            }
+        },
+        get state() {
+            return state;
+        },
+        get document() {
+            return doc;
+        },
+        get view() {
+            return view;
+        },
+        get zoom() {
+            return zoom;
+        },
+        get currentPage() {
+            return view?.currentPage ?? -1;
+        },
+        setZoom(next) {
+            zoom = clampZoom(next);
+            view?.setZoom(zoom);
+        },
+        goToPage(index, options) {
+            view?.goToPage(index, options);
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            clearFirstPage();
+            view?.destroy();
+            view = undefined;
+            doc = undefined;
+            session.dispose();
+            root.remove();
+        },
+    };
+}

package/dist/view/viewport.d.ts

@@ -0,0 +1,100 @@
+/** CSS pixels per point. */
+export declare const PX_PER_PT: number;
+export interface PageSize {
+    /** Points. */
+    width: number;
+    height: number;
+}
+export interface Spacing {
+    /** CSS px between pages; not zoomed. */
+    gap: number;
+    /** CSS px around the column; not zoomed. */
+    padding: number;
+}
+export interface PlacedPage {
+    /** CSS px from the top of the scrolled content. */
+    top: number;
+    /** CSS px, zoomed. */
+    width: number;
+    height: number;
+}
+export interface PageLayout {
+    pages: PlacedPage[];
+    /** CSS px of the whole scrolled content, padding included. */
+    width: number;
+    height: number;
+}
+/**
+ * The zoom at which the widest page, with the padding either side, fills
+ * `width` CSS px; 1 when there are no pages or no room.
+ */
+export declare function fitWidthZoom(sizes: readonly PageSize[], width: number, spacing: Spacing): number;
+/** A run of page indexes, both ends included. */
+export interface PageRange {
+    first: number;
+    last: number;
+}
+/** Stack the pages top to bottom at `zoom` (1 = 100%). */
+export declare function layoutPages(sizes: readonly PageSize[], zoom: number, spacing: Spacing): PageLayout;
+/** Pages that intersect the viewport; empty (`first > last`) when it only shows a gap. */
+export declare function visiblePages(layout: PageLayout, scrollTop: number, viewportHeight: number): PageRange;
+/**
+ * Pages that keep a canvas: the visible ones and one either side. When the
+ * viewport shows only a gap, the pages on both sides of it.
+ */
+export declare function pagesToKeep(layout: PageLayout, scrollTop: number, viewportHeight: number): PageRange;
+/**
+ * The page that fills most of the viewport (the earlier one on a tie); when
+ * the viewport shows only a gap, the page below it. -1 without pages.
+ */
+export declare function currentPage(layout: PageLayout, scrollTop: number, viewportHeight: number): number;
+/** A scroll position that survives a zoom: a spot on a page, or a gap above one. */
+export interface ScrollAnchor {
+    page: number;
+    /** How far down the page, 0..1. */
+    fraction: number;
+    /** CSS px of gap or padding between the viewport top and the page; not zoomed. */
+    above: number;
+}
+/** Where the viewport top is, in terms of pages. */
+export declare function anchorAt(layout: PageLayout, scrollTop: number): ScrollAnchor;
+/** The scroll position of `anchor` in `layout` (clamping is left to the browser). */
+export declare function scrollTopFor(layout: PageLayout, anchor: ScrollAnchor): number;
+/** A box on one page, in points from its top-left corner (a find match, #451). */
+export interface PageRect {
+    page: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+/** A scroll position, CSS px. */
+export interface ScrollPosition {
+    top: number;
+    left: number;
+}
+/**
+ * The scroll position that shows `rect`: along each axis unchanged while it
+ * is wholly in the viewport, else with it in the middle. Pages are centred
+ * in a column at least as wide as the viewport, as the view lays them out.
+ * Works from the layout alone, so the page need not have a canvas yet.
+ */
+export declare function revealScroll(layout: PageLayout, zoom: number, rect: PageRect, scroll: ScrollPosition, viewport: {
+    width: number;
+    height: number;
+}): ScrollPosition;
+/** Default device-pixel budget of one page canvas (32 Mpx, as pdf.js on desktop). */
+export declare const MAX_CANVAS_PIXELS: number;
+export interface CanvasResolution {
+    /** Backing store size in device pixels. */
+    width: number;
+    height: number;
+    /** Device pixels per CSS pixel actually used. */
+    scale: number;
+}
+/**
+ * Backing store of a canvas shown at `cssWidth × cssHeight`: `ratio` device
+ * pixels per CSS pixel (devicePixelRatio), reduced when that would exceed
+ * the pixel budget.
+ */
+export declare function canvasResolution(cssWidth: number, cssHeight: number, ratio: number, maxPixels?: number): CanvasResolution;

package/dist/view/viewport.js

@@ -0,0 +1,145 @@
+// Scroll geometry for the web preview (#448): where each page sits in the
+// scrolled column, which pages keep a canvas, which page is current, and how
+// many device pixels a page canvas gets. Pure: no DOM, tested in Node.
+/** CSS pixels per point. */
+export const PX_PER_PT = 96 / 72;
+/**
+ * The zoom at which the widest page, with the padding either side, fills
+ * `width` CSS px; 1 when there are no pages or no room.
+ */
+export function fitWidthZoom(sizes, width, spacing) {
+    const widest = sizes.reduce((max, size) => Math.max(max, size.width), 0) * PX_PER_PT;
+    const room = width - 2 * spacing.padding;
+    return widest > 0 && room > 0 ? room / widest : 1;
+}
+/** Stack the pages top to bottom at `zoom` (1 = 100%). */
+export function layoutPages(sizes, zoom, spacing) {
+    const scale = PX_PER_PT * zoom;
+    let top = spacing.padding;
+    let widest = 0;
+    const pages = sizes.map((size, i) => {
+        if (i > 0)
+            top += spacing.gap;
+        const page = { top, width: size.width * scale, height: size.height * scale };
+        top += page.height;
+        widest = Math.max(widest, page.width);
+        return page;
+    });
+    return { pages, width: widest + 2 * spacing.padding, height: top + spacing.padding };
+}
+/** Index of the first page whose bottom edge is below `y`; `pages.length` if none. */
+function firstEndingAfter(pages, y) {
+    let lo = 0;
+    let hi = pages.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (pages[mid].top + pages[mid].height > y)
+            hi = mid;
+        else
+            lo = mid + 1;
+    }
+    return lo;
+}
+/** Pages that intersect the viewport; empty (`first > last`) when it only shows a gap. */
+export function visiblePages(layout, scrollTop, viewportHeight) {
+    const { pages } = layout;
+    const bottom = scrollTop + viewportHeight;
+    const first = firstEndingAfter(pages, scrollTop);
+    let last = first - 1;
+    while (last + 1 < pages.length && pages[last + 1].top < bottom)
+        last++;
+    return { first, last };
+}
+/**
+ * Pages that keep a canvas: the visible ones and one either side. When the
+ * viewport shows only a gap, the pages on both sides of it.
+ */
+export function pagesToKeep(layout, scrollTop, viewportHeight) {
+    const count = layout.pages.length;
+    if (count === 0)
+        return { first: 0, last: -1 };
+    const visible = visiblePages(layout, scrollTop, viewportHeight);
+    return { first: Math.max(0, visible.first - 1), last: Math.min(count - 1, visible.last + 1) };
+}
+/**
+ * The page that fills most of the viewport (the earlier one on a tie); when
+ * the viewport shows only a gap, the page below it. -1 without pages.
+ */
+export function currentPage(layout, scrollTop, viewportHeight) {
+    const { pages } = layout;
+    if (pages.length === 0)
+        return -1;
+    const bottom = scrollTop + viewportHeight;
+    const visible = visiblePages(layout, scrollTop, viewportHeight);
+    if (visible.first > visible.last)
+        return Math.min(visible.first, pages.length - 1);
+    let best = visible.first;
+    let bestShown = -1;
+    for (let i = visible.first; i <= visible.last; i++) {
+        const page = pages[i];
+        const shown = Math.min(bottom, page.top + page.height) - Math.max(scrollTop, page.top);
+        if (shown > bestShown) {
+            best = i;
+            bestShown = shown;
+        }
+    }
+    return best;
+}
+/** Where the viewport top is, in terms of pages. */
+export function anchorAt(layout, scrollTop) {
+    const { pages } = layout;
+    const page = Math.min(firstEndingAfter(pages, scrollTop), pages.length - 1);
+    if (page < 0)
+        return { page: 0, fraction: 0, above: 0 };
+    const { top, height } = pages[page];
+    if (scrollTop < top)
+        return { page, fraction: 0, above: top - scrollTop };
+    return { page, fraction: Math.min(1, (scrollTop - top) / height), above: 0 };
+}
+/** The scroll position of `anchor` in `layout` (clamping is left to the browser). */
+export function scrollTopFor(layout, anchor) {
+    const page = layout.pages[Math.min(anchor.page, layout.pages.length - 1)];
+    if (!page)
+        return 0;
+    return Math.max(0, page.top + anchor.fraction * page.height - anchor.above);
+}
+/** Where `[start, end]` sits in a viewport at `scroll` of `size`: unchanged when it shows, else centred. */
+function reveal(start, end, scroll, size) {
+    if (start >= scroll && end <= scroll + size)
+        return scroll;
+    return Math.max(0, (start + end) / 2 - size / 2);
+}
+/**
+ * The scroll position that shows `rect`: along each axis unchanged while it
+ * is wholly in the viewport, else with it in the middle. Pages are centred
+ * in a column at least as wide as the viewport, as the view lays them out.
+ * Works from the layout alone, so the page need not have a canvas yet.
+ */
+export function revealScroll(layout, zoom, rect, scroll, viewport) {
+    const page = layout.pages[rect.page];
+    if (!page)
+        return scroll;
+    const scale = PX_PER_PT * zoom;
+    const left = Math.max(viewport.width, layout.width) / 2 - page.width / 2;
+    return {
+        top: reveal(page.top + rect.top * scale, page.top + rect.bottom * scale, scroll.top, viewport.height),
+        left: reveal(left + rect.left * scale, left + rect.right * scale, scroll.left, viewport.width),
+    };
+}
+/** Default device-pixel budget of one page canvas (32 Mpx, as pdf.js on desktop). */
+export const MAX_CANVAS_PIXELS = 2 ** 25;
+/** No canvas side beyond this many device pixels (Safari's limit). */
+const MAX_CANVAS_SIDE = 16384;
+/**
+ * Backing store of a canvas shown at `cssWidth × cssHeight`: `ratio` device
+ * pixels per CSS pixel (devicePixelRatio), reduced when that would exceed
+ * the pixel budget.
+ */
+export function canvasResolution(cssWidth, cssHeight, ratio, maxPixels = MAX_CANVAS_PIXELS) {
+    let scale = ratio;
+    const area = cssWidth * cssHeight * scale * scale;
+    if (area > maxPixels)
+        scale *= Math.sqrt(maxPixels / area) * 0.999;
+    scale = Math.min(scale, MAX_CANVAS_SIDE / Math.max(cssWidth, cssHeight, 1));
+    return { width: Math.ceil(cssWidth * scale), height: Math.ceil(cssHeight * scale), scale };
+}