@paged-media/idml-viewer 0.1.0-canary.0

package/dist/viewer.js

@@ -0,0 +1,241 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * This file is part of paged (https://paged.media) and is additionally
+ * available under the Paged Media Enterprise License (PMEL). Full
+ * copyright and license information is available in LICENSE.md which is
+ * distributed with this source code.
+ *
+ *  @copyright  Copyright (c) And The Next GmbH
+ *  @license    MPL-2.0 OR Paged Media Enterprise License (PMEL)
+ */
+import { clampScroll, clampZoom, currentPageAt, fitPage, scrollToPage, zoomAt, } from "./camera.js";
+import { Emitter } from "./events.js";
+import { attachInput } from "./input.js";
+export class ViewerError extends Error {
+    code;
+    diagnostics;
+    constructor(code, message, diagnostics) {
+        super(message);
+        this.name = "ViewerError";
+        this.code = code;
+        this.diagnostics = diagnostics;
+    }
+}
+const ZOOM_STEP = Math.SQRT2;
+function mapDiagnostics(diags) {
+    const first = diags.messages.find((m) => m.severity === "error");
+    const code = first?.code === "no_gpu" || first?.code === "gpu_init"
+        ? "GPU_UNAVAILABLE"
+        : first?.code === "open" || first?.code === "build"
+            ? "PARSE_ERROR"
+            : "UNSUPPORTED";
+    return new ViewerError(code, first?.message ?? "load failed", diags);
+}
+async function sourceBytes(source) {
+    if (typeof source === "string") {
+        const res = await fetch(source);
+        if (!res.ok) {
+            throw new ViewerError("PARSE_ERROR", `fetch ${source}: ${res.status} ${res.statusText}`);
+        }
+        return new Uint8Array(await res.arrayBuffer());
+    }
+    if (source instanceof Uint8Array)
+        return source;
+    if (source instanceof ArrayBuffer)
+        return new Uint8Array(source);
+    return new Uint8Array(await source.arrayBuffer());
+}
+export async function createViewer(options) {
+    const { canvas } = options;
+    let session;
+    try {
+        session =
+            typeof options.session === "function"
+                ? await options.session()
+                : options.session;
+    }
+    catch (e) {
+        throw new ViewerError("GPU_UNAVAILABLE", e instanceof Error ? e.message : String(e));
+    }
+    const limits = {
+        min: options.zoomLimits?.min ?? 0.1,
+        max: options.zoomLimits?.max ?? 8,
+    };
+    const dpr = options.devicePixelRatio ??
+        (typeof window !== "undefined" ? window.devicePixelRatio : 1);
+    const schedule = options.schedule ??
+        (typeof requestAnimationFrame === "function"
+            ? (frame) => void requestAnimationFrame(frame)
+            : (frame) => void queueMicrotask(frame));
+    const events = new Emitter();
+    let layout = { gapPt: 0, pages: [] };
+    let camera = { zoom: 1, x: 0, y: 0 };
+    let mode = options.layoutMode ?? "continuous";
+    let page = 0;
+    let bound = false;
+    let disposed = false;
+    let frameQueued = false;
+    function viewport() {
+        return {
+            width: canvas.clientWidth || canvas.width || 1,
+            height: canvas.clientHeight || canvas.height || 1,
+        };
+    }
+    /** Layout the camera works against — single mode sees one page at y=0. */
+    function activeLayout() {
+        if (mode === "continuous")
+            return layout;
+        const p = layout.pages[page];
+        return p
+            ? { gapPt: layout.gapPt, pages: [{ ...p, yPt: 0, index: 0 }] }
+            : { gapPt: layout.gapPt, pages: [] };
+    }
+    function requestFrame() {
+        if (frameQueued || disposed || !bound)
+            return;
+        frameQueued = true;
+        schedule(() => {
+            frameQueued = false;
+            if (disposed)
+                return;
+            const diags = session.present(camera.zoom, camera.x, camera.y, dpr, mode === "single" ? page : null);
+            if (!diags.ok)
+                events.emit("error", mapDiagnostics(diags));
+        });
+    }
+    function applyCamera(next, force = false) {
+        const clamped = clampScroll(next, activeLayout(), viewport());
+        const zoomChanged = clamped.zoom !== camera.zoom;
+        const scrollChanged = clamped.x !== camera.x || clamped.y !== camera.y;
+        if (!zoomChanged && !scrollChanged && !force)
+            return;
+        camera = clamped;
+        if (zoomChanged)
+            events.emit("zoomChanged", { zoom: camera.zoom });
+        if (scrollChanged)
+            events.emit("scrollChanged", { x: camera.x, y: camera.y });
+        if (mode === "continuous") {
+            const now = currentPageAt(camera, layout, viewport());
+            if (now !== page) {
+                page = now;
+                session.set_page(page);
+                events.emit("pageChanged", { page });
+            }
+        }
+        requestFrame();
+    }
+    function setPage(index) {
+        const clamped = Math.max(0, Math.min(layout.pages.length - 1, index));
+        if (clamped === page && layout.pages.length > 0)
+            return;
+        page = clamped;
+        session.set_page(page);
+        events.emit("pageChanged", { page });
+        if (mode === "continuous") {
+            applyCamera(scrollToPage(camera, layout, page, viewport()), true);
+        }
+        else {
+            applyCamera(fitPage(activeLayout(), 0, "page", viewport(), limits), true);
+        }
+    }
+    const detachInput = attachInput(canvas, options.input ?? {}, {
+        zoomAt: (factor, anchor) => applyCamera(zoomAt(camera, camera.zoom * factor, limits, viewport(), anchor)),
+        panBy: (dx, dy) => applyCamera({ zoom: camera.zoom, x: camera.x + dx, y: camera.y + dy }),
+        zoomStep: (dir, anchor) => applyCamera(zoomAt(camera, camera.zoom * (dir > 0 ? ZOOM_STEP : 1 / ZOOM_STEP), limits, viewport(), anchor)),
+        fit: () => viewer.fit("page"),
+        pageStep: (dir) => setPage(page + dir),
+        home: () => setPage(0),
+        end: () => setPage(layout.pages.length - 1),
+    });
+    const viewer = {
+        async load(source) {
+            const bytes = await sourceBytes(source);
+            const diags = session.load(bytes);
+            if (!diags.ok) {
+                const error = mapDiagnostics(diags);
+                events.emit("error", error);
+                throw error;
+            }
+            if (!bound) {
+                const bind = await session.render_to_canvas_main(canvas);
+                if (!bind.ok) {
+                    const error = mapDiagnostics(bind);
+                    events.emit("error", error);
+                    throw error;
+                }
+                bound = true;
+                session.resize(viewport().width, viewport().height, dpr);
+            }
+            layout = session.page_layout();
+            page = 0;
+            session.set_page(0);
+            events.emit("loaded", { pageCount: layout.pages.length });
+            applyCamera(fitPage(activeLayout(), 0, "page", viewport(), limits), true);
+        },
+        get zoom() {
+            return camera.zoom;
+        },
+        setZoom(zoom, opts) {
+            applyCamera(zoomAt(camera, clampZoom(zoom, limits), limits, viewport(), opts?.anchor));
+        },
+        zoomIn() {
+            this.setZoom(camera.zoom * ZOOM_STEP);
+        },
+        zoomOut() {
+            this.setZoom(camera.zoom / ZOOM_STEP);
+        },
+        fit(fitMode) {
+            const idx = mode === "single" ? 0 : page;
+            applyCamera(fitPage(activeLayout(), idx, fitMode, viewport(), limits), true);
+        },
+        get minZoom() {
+            return limits.min;
+        },
+        get maxZoom() {
+            return limits.max;
+        },
+        get scroll() {
+            return { x: camera.x, y: camera.y };
+        },
+        scrollTo(x, y) {
+            applyCamera({ zoom: camera.zoom, x, y });
+        },
+        scrollBy(dx, dy) {
+            applyCamera({ zoom: camera.zoom, x: camera.x + dx, y: camera.y + dy });
+        },
+        get pageCount() {
+            return layout.pages.length;
+        },
+        get currentPage() {
+            return page;
+        },
+        goToPage(index) {
+            setPage(index);
+        },
+        layoutMode(next) {
+            if (next && next !== mode) {
+                mode = next;
+                applyCamera(fitPage(activeLayout(), mode === "single" ? 0 : page, "page", viewport(), limits), true);
+            }
+            return mode;
+        },
+        renderPageThumbnail(index, opts) {
+            return session.render_page_to_bytes(index, opts?.width ?? 160);
+        },
+        on(event, listener) {
+            return events.on(event, listener);
+        },
+        dispose() {
+            if (disposed)
+                return;
+            disposed = true;
+            detachInput();
+            events.clear();
+            session.free?.();
+        },
+    };
+    return viewer;
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@paged-media/idml-viewer",
+  "version": "0.1.0-canary.0",
+  "description": "Standalone IDML viewer for the browser — camera, pages, input and events over the @paged-media/sdk WebGPU ViewerSession.",
+  "license": "MPL-2.0 OR LicenseRef-PMEL",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/paged-media/core.git",
+    "directory": "web/idml-viewer"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "wasm",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "vitest": "^3.0.0"
+  }
+}

package/wasm/paged_sdk.d.ts

@@ -0,0 +1,236 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Continuous-layout geometry for every page, so the TS wrapper
+ * computes fit / goToPage / currentPage / scroll extents without
+ * wasm round-trips. `y_pt` is the page top in doc space (vertical
+ * stack with `gap_pt` between pages — the same offsets
+ * `present()` uses).
+ */
+export interface PagesLayout {
+    gapPt: number;
+    pages: PageRect[];
+}
+
+/**
+ * Stable page identity, independent of position in the page vector.
+ *
+ * Derived from the IDML `<Page Self=\"...\">` attribute where present;
+ * synthesised as `\"page-<spread_idx>-<local_idx>\"` when missing
+ * (older / synthetic fixtures without `Self`). The canvas keys
+ * display-list caches and LOD tiles by `PageId`, so the value must
+ * stay stable across re-layouts — only document-structural edits
+ * (insert/delete page) should ever change the set of `PageId`s.
+ */
+export type PageId = string;
+
+/**
+ * Structured, JSON-serialisable result of `load` / `render_*`. Unlike
+ * the legacy free functions, recoverable parse/layout problems are
+ * reported here (so the docs preview can surface them inline) rather
+ * than thrown as an opaque `JsError`.
+ */
+export interface Diagnostics {
+    ok: boolean;
+    messages: Diagnostic[];
+}
+
+export interface Diagnostic {
+    /**
+     * `\"error\" | \"warning\" | \"info\"`.
+     */
+    severity: string;
+    /**
+     * Short machine code, e.g. `\"open\"`, `\"build\"`, `\"no_gpu\"`.
+     */
+    code: string;
+    message: string;
+    /**
+     * IDML part the problem originates from, when known.
+     */
+    part?: string;
+    line?: number;
+}
+
+export interface PageRect {
+    index: number;
+    yPt: number;
+    widthPt: number;
+    heightPt: number;
+}
+
+
+/**
+ * Headless readback result. `rgba` is tightly-packed RGBA8
+ * (`width * height * 4`), surfaced to JS as a `Uint8Array`.
+ */
+export class RenderedRaster {
+    private constructor();
+    free(): void;
+    [Symbol.dispose](): void;
+    height: number;
+    rgba: Uint8Array;
+    width: number;
+}
+
+/**
+ * Renderer-core session. Holds the parsed+laid-out document and a
+ * lazily-created WebGPU presenter (device + surface). One per viewer
+ * instance / preview component.
+ */
+export class ViewerSession {
+    private constructor();
+    free(): void;
+    [Symbol.dispose](): void;
+    /**
+     * Parse + build a complete IDML package. `font` is optional. Caches
+     * the built document and resets the current page to 0. Returns
+     * structured diagnostics; does not throw on recoverable problems.
+     */
+    load(idml: Uint8Array, font?: Uint8Array | null): Diagnostics;
+    /**
+     * Acquire the session, gating on WebGPU availability. Rejects when
+     * `navigator.gpu` is absent so the consumer can map that to the
+     * WebGPU-absent note. Exposed to JS as `ViewerSession.new()`
+     * returning a `Promise`.
+     */
+    static new(): Promise<ViewerSession>;
+    page_count(): number;
+    /**
+     * Continuous-layout page geometry (doc-space pt, vertical
+     * stack with `PAGE_GAP_PT` between pages). Empty until `load`
+     * succeeds. The TS wrapper derives fit zoom, scroll extents,
+     * `goToPage` targets and the current page from this — no
+     * per-frame wasm round-trips.
+     */
+    page_layout(): PagesLayout;
+    /**
+     * Camera-transformed present of the continuous page stack —
+     * the viewer's per-frame paint (ports the editor canvas's
+     * `presentFrame`). `zoom` is CSS px per pt; `scroll_x` /
+     * `scroll_y` place the doc origin in CSS px (positive moves
+     * content right/down); `dpr` brings CSS px to device px.
+     * Off-viewport pages are culled; per-page scenes build once
+     * and cache. `only_page` restricts the pass to one page laid
+     * out at y = 0 (the wrapper's `"single"` layout mode).
+     *
+     * Requires a bound presenter (any `render_to_canvas*` call
+     * binds one).
+     */
+    present(zoom: number, scroll_x: number, scroll_y: number, dpr: number, only_page?: number | null): Diagnostics;
+    /**
+     * Register a font for an IDML `AppliedFont` family (and optional
+     * style such as `"Bold"` / `"Italic"`). Accumulates across calls
+     * and is consulted on the next `load`; real documents reference
+     * many faces, so call this once per face before `load`. Mirrors
+     * the editor's `RegisterFont` and `paged-inspect`'s
+     * `--font-family "Family[/Style]=PATH"`.
+     */
+    register_font(family: string, style: string | null | undefined, bytes: Uint8Array): void;
+    /**
+     * Headless render of ONE page scaled to `target_width_px`
+     * (thumbnails / page strips). Aspect ratio preserved.
+     */
+    render_page_to_bytes(index: number, target_width_px: number): Promise<RenderedRaster>;
+    /**
+     * Headless path: render the current page off-surface and read it
+     * back as RGBA8 (replaces the legacy `render_to_png`). For
+     * screenshots / SSR. `dpi` controls resolution (72 = 1px per pt).
+     */
+    render_to_bytes(dpi: number): Promise<RenderedRaster>;
+    /**
+     * Present the current page to a worker-owned `OffscreenCanvas` via
+     * WebGPU. The presenter is created (bound to `canvas`) on the first
+     * call; later calls reuse it and re-present — pass the same canvas.
+     */
+    render_to_canvas(canvas: OffscreenCanvas): Promise<Diagnostics>;
+    /**
+     * Main-thread variant of [`Self::render_to_canvas`] for embedders
+     * that render on an `HtmlCanvasElement` instead of a worker
+     * `OffscreenCanvas`.
+     */
+    render_to_canvas_main(canvas: HTMLCanvasElement): Promise<Diagnostics>;
+    /**
+     * Resize the bound GPU surface. `width`/`height` are CSS pixels;
+     * `device_pixel_ratio` brings them to device pixels. No-op until a
+     * presenter exists.
+     */
+    resize(width: number, height: number, device_pixel_ratio: number): void;
+    set_page(index: number): void;
+}
+
+export function on_start(): void;
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+    readonly memory: WebAssembly.Memory;
+    readonly __wbg_get_renderedraster_height: (a: number) => number;
+    readonly __wbg_get_renderedraster_rgba: (a: number) => [number, number];
+    readonly __wbg_get_renderedraster_width: (a: number) => number;
+    readonly __wbg_renderedraster_free: (a: number, b: number) => void;
+    readonly __wbg_set_renderedraster_height: (a: number, b: number) => void;
+    readonly __wbg_set_renderedraster_rgba: (a: number, b: number, c: number) => void;
+    readonly __wbg_set_renderedraster_width: (a: number, b: number) => void;
+    readonly __wbg_viewersession_free: (a: number, b: number) => void;
+    readonly viewersession_load: (a: number, b: number, c: number, d: number, e: number) => any;
+    readonly viewersession_new: () => any;
+    readonly viewersession_page_count: (a: number) => number;
+    readonly viewersession_page_layout: (a: number) => any;
+    readonly viewersession_present: (a: number, b: number, c: number, d: number, e: number, f: number) => any;
+    readonly viewersession_register_font: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+    readonly viewersession_render_page_to_bytes: (a: number, b: number, c: number) => any;
+    readonly viewersession_render_to_bytes: (a: number, b: number) => any;
+    readonly viewersession_render_to_canvas: (a: number, b: any) => any;
+    readonly viewersession_render_to_canvas_main: (a: number, b: any) => any;
+    readonly viewersession_resize: (a: number, b: number, c: number, d: number) => void;
+    readonly viewersession_set_page: (a: number, b: number) => void;
+    readonly on_start: () => void;
+    readonly qcms_enable_iccv4: () => void;
+    readonly qcms_profile_precache_output_transform: (a: number) => void;
+    readonly qcms_transform_data_bgra_out_lut: (a: number, b: number, c: number, d: number) => void;
+    readonly qcms_transform_data_bgra_out_lut_precache: (a: number, b: number, c: number, d: number) => void;
+    readonly qcms_transform_data_rgb_out_lut: (a: number, b: number, c: number, d: number) => void;
+    readonly qcms_transform_data_rgb_out_lut_precache: (a: number, b: number, c: number, d: number) => void;
+    readonly qcms_transform_data_rgba_out_lut: (a: number, b: number, c: number, d: number) => void;
+    readonly qcms_transform_data_rgba_out_lut_precache: (a: number, b: number, c: number, d: number) => void;
+    readonly qcms_transform_release: (a: number) => void;
+    readonly qcms_profile_is_bogus: (a: number) => number;
+    readonly qcms_white_point_sRGB: (a: number) => void;
+    readonly lut_inverse_interp16: (a: number, b: number, c: number) => number;
+    readonly lut_interp_linear16: (a: number, b: number, c: number) => number;
+    readonly wasm_bindgen__convert__closures_____invoke__hf764a550e1162210: (a: number, b: number, c: any) => [number, number];
+    readonly wasm_bindgen__convert__closures_____invoke__h341ac0c8ce0fce2e: (a: number, b: number, c: any, d: any) => void;
+    readonly wasm_bindgen__convert__closures_____invoke__h2c89ab360f192403: (a: number, b: number, c: any) => void;
+    readonly __wbindgen_malloc: (a: number, b: number) => number;
+    readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+    readonly __wbindgen_exn_store: (a: number) => void;
+    readonly __externref_table_alloc: () => number;
+    readonly __wbindgen_externrefs: WebAssembly.Table;
+    readonly __wbindgen_free: (a: number, b: number, c: number) => void;
+    readonly __wbindgen_destroy_closure: (a: number, b: number) => void;
+    readonly __externref_table_dealloc: (a: number) => void;
+    readonly __wbindgen_start: () => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+
+/**
+ * Instantiates the given `module`, which can either be bytes or
+ * a precompiled `WebAssembly.Module`.
+ *
+ * @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated.
+ *
+ * @returns {InitOutput}
+ */
+export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput;
+
+/**
+ * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+ * for everything else, calls `WebAssembly.instantiate` directly.
+ *
+ * @param {{ module_or_path: InitInput | Promise<InitInput> }} module_or_path - Passing `InitInput` directly is deprecated.
+ *
+ * @returns {Promise<InitOutput>}
+ */
+export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise<InitInput> } | InitInput | Promise<InitInput>): Promise<InitOutput>;