import type { InitOptions } from './options.init.mjs'; import { PageInfo, RenderCanvasResult } from './internal.types.mjs'; import { CreateSessionOptions, RenderToCanvasOptions, RenderOptions, RenderCanvasOptions, RenderToSvgOptions, ManipulateDataOptions, RenderSvgOptions, RenderInSessionOptions, MountDomOptions, OffscreenRenderCanvasOptions } from './options.render.mjs'; import { TypstDomDocument } from './dom.mjs'; /** * The result of rendering a Typst document. * @typedef {Object} RenderResult * @property {number} width - The width of the rendered Typst document (single page). * @property {number} height - The height of the rendered Typst document (single page). */ export interface RenderResult { width: number; height: number; } type ContextedRenderOptions = T | RenderOptions; /** * The session of a Typst document. * @property {string} backgroundColor - The background color of the Typst * document. * @property {number} pixelPerPt - The pixel per point scale up the image. * */ export declare class RenderSession { /** * @deprecated set in {@link RenderToCanvasOptions} instead * * Set the background color of the Typst document. * @param {string} t - The background color in format of `^#?[0-9a-f]{6}$` * * Note: Default to `#ffffff`. * * Note: Only available in canvas rendering mode. */ set backgroundColor(t: string | undefined); /** * Get the background color of the Typst document. * * Note: Default to `#ffffff`. * * Note: Only available in canvas rendering mode. */ get backgroundColor(): string | undefined; /** * Set the pixel per point scale up the canvas panel. * * Note: Default to `3`. * * Note: Only available in canvas rendering mode. */ set pixelPerPt(t: number | undefined); /** * @deprecated set in {@link RenderToCanvasOptions} instead * * Get the pixel per point scale up the canvas panel. * * Note: Default to `3`. * * Note: Only available in canvas rendering mode. */ get pixelPerPt(): number | undefined; /** * Reset state */ reset(): void; /** * @deprecated * use {@link docWidth} instead */ get doc_width(): number; get docWidth(): number; /** * @deprecated * use {@link docHeight} instead */ get doc_height(): number; get docHeight(): number; retrievePagesInfo(): PageInfo[]; getSourceLoc(path: Uint32Array): string | undefined; /** * See {@link TypstRenderer#renderSvg} for more details. */ renderSvg(options: ContextedRenderOptions): Promise; /** * See {@link TypstRenderer#renderToSvg} for more details. */ renderToSvg(options: ContextedRenderOptions): Promise; /** * See {@link TypstRenderer#renderCanvas} for more details. */ renderCanvas(options: ContextedRenderOptions): Promise; /** * See {@link TypstRenderer#manipulateData} for more details. */ manipulateData(opts: ManipulateDataOptions): void; /** * See {@link TypstRenderer#renderSvgDiff} for more details. */ renderSvgDiff(opts: RenderSvgOptions): string; /** * @deprecated * use {@link getSourceLoc} instead */ get_source_loc(path: Uint32Array): string | undefined; /** * @deprecated * use {@link renderSvgDiff} instead */ render_in_window(rect_lo_x: number, rect_lo_y: number, rect_hi_x: number, rect_hi_y: number): string; /** * @deprecated * use {@link manipulateData} instead */ merge_delta(data: Uint8Array): void; } export declare class TypstWorker { /** * See {@link TypstRenderer#manipulateData} for more details. */ manipulateData(action: string, data: Uint8Array): Promise; /** * You must submit all canvas in pages to ensure synchronization with the background worker * * See {@link TypstRenderer#renderCanvas} for more details. */ renderCanvas(canvasElemList: OffscreenRenderCanvasOptions[]): Promise; retrievePagesInfo(): Promise; } /** * @deprecated * use {@link TypstRenderer} instead */ export interface TypstSvgRenderer { /** * Render a Typst document to svg. * @param {RenderOptions} options - The options for * rendering a Typst document to specified container. * @returns {void} - The result of rendering a Typst document. * @example * ```typescript * let fetchDoc = (path) => fetch(path).then( * response => new Uint8Array(response.arrayBuffer())) * renderer.renderToSvg({ * container: document.getElementById('container'), * artifactContent: await fetchDoc('typst-main.sir.in'), * }); * ``` */ renderToSvg(options: RenderOptions): Promise; } /** * The interface of Typst renderer. */ export interface TypstRenderer extends TypstSvgRenderer { /** * Initialize the typst renderer. * @param {Partial} options - The options for initializing the * typst renderer. */ init(options?: Partial): Promise; /** * Load a glyph pack for all of the Typst documents to render. * Note: this function is still under development. * @param pack */ loadGlyphPack(pack: unknown): Promise; /** * Reset state */ resetSession(session: RenderSession): void; /** * Retrieve page information of current selected document */ retrievePagesInfoFromSession(session: RenderSession): PageInfo[]; /** * Render a Typst document to canvas. */ renderCanvas(options: RenderOptions): Promise; /** * Render a Typst document to canvas. * @param {RenderOptions} options - The options for * rendering a Typst document to specified container. * @returns {void} - The result of rendering a Typst document. * @example * ```typescript * let fetchDoc = (path) => fetch(path).then( * response => new Uint8Array(response.arrayBuffer())) * renderer.renderToCanvas({ * container: document.getElementById('container'), * pixelPerPt: 3, * backgroundColor: '#ffffff', * artifactContent: await fetchDoc('typst-main.sir.in'), * }); * ``` */ renderToCanvas(options: RenderOptions): Promise; /** * Render a Typst document to (non-incremental) svg string. * @param {RenderOptions} options - The options for * rendering a Typst document to specified container. * @returns {string} - The rendered content. * @example * ```typescript * let fetchDoc = (path) => fetch(path).then( * response => new Uint8Array(response.arrayBuffer())) * const svg = renderer.renderSvg({ * artifactContent: await fetchDoc('typst-main.sir.in'), * }); * ``` */ renderSvg(options: RenderOptions): Promise; /** * Render a Typst document to svg. * @param {RenderOptions} options - The options for * rendering a Typst document to specified container. * @example * ```typescript * let fetchDoc = (path) => fetch(path).then( * response => new Uint8Array(response.arrayBuffer())) * renderer.renderToSvg({ * container: document.getElementById('container'), * artifactContent: await fetchDoc('typst-main.sir.in'), * }); * ``` */ renderToSvg(options: RenderOptions): Promise; /** * Return selected current svg */ getCustomV1(options: RenderInSessionOptions<{}>): Promise; /** * experimental */ renderSvgDiff(options: RenderInSessionOptions): string; /** * Manipulate the Typst document in the session. * See {@link ManipulateDataOptions} for more details. * @param {RenderSession} session - The Typst document session that has been * created by TypstRenderer. * @param {ManipulateDataOptions} opts - The options for manipulating the * Typst document in the session. * * @example * reset the data to the initial state. * ```typescript * const session = await renderer.createSession(...); * await renderer.manipulateData(session, { * action: 'reset', * data: new Uint8Array(...), * }); * ``` * @example * merge the data to the current state. * ```typescript * const session = await renderer.createSession(...); * /// reset the data to the initial state * await renderer.manipulateData(session, data('reset')); * /// merge the data to the current state * await renderer.manipulateData(session, data('merge')); * /// incrementally merge the data again * await renderer.manipulateData(session, data('merge')); * ``` */ manipulateData(opts: RenderInSessionOptions): void; /** * Run a function with a session, and the session is only available during * the function call. * * the lifetime of session is quite bug-prone, so we current does not make it * longer live than the function call. * @param {function} fn - The function to run with a session. * @returns {Promise} - The result of the function. * @example * run a function with an session with empty state. * * ```typescript * const res = await renderer.runWithSession(async session => { * await renderer.manipulateData(session, data('reset')); * return await renderer.renderToCanvas({ * renderSession: session, * container: document.getElementById('container'), * backgroundColor: '#ffffff', * }); * }); * ``` * * @example * run a function with an session with initial state. * * ```typescript * const res = await renderer.runWithSession({ * format: 'vector', * artifactContent: new Uint8Array(...), * }, workWithSession(session)); * ``` * * @example * leak the life span of session (need typescript >= v5.2) * * ```typescript * class StackedSession { * session: RenderSession; * private resolve: (session: RenderSession) => void; * [Symbol.dispose]() { * this.resolve(); * } * static async create() { * return new Promise(resolve => { * const session = await renderer.runWithSession(session => { * const stackedSession = new StackedSession(); * stackedSession.session = session; * stackedSession.resolve = resolve; * return stackedSession; * }); * } * } * * { * await using session = StackedSession.create(); * /// do something with session * } * ``` */ runWithSession(fn: (session: RenderSession) => Promise): Promise; runWithSession(options: CreateSessionOptions, fn: (session: RenderSession) => Promise): Promise; createWorkerV0(worker: Worker): Promise; renderDom(options: RenderInSessionOptions): Promise; /** * alias to {@link TypstRenderer#renderToCanvas}, will remove in v0.5.0 * @deprecated * use {@link renderToCanvas} instead */ render(options: RenderOptions): Promise; } /** * create a Typst renderer. * @returns {TypstRenderer} - The Typst renderer. * @example * ```typescript * import { createTypstRenderer } from 'typst'; * const renderer = createTypstRenderer(); * await renderer.init(); * await renderer.render({ * container: document.getElementById('container'), * artifactContent: '{ ... }', * }); * ``` */ export declare function createTypstRenderer(): TypstRenderer; export declare function rendererBuildInfo(): Promise; export {}; //# sourceMappingURL=renderer.d.mts.map