@vue-pdf-viewer/viewer/dist/types/utils/CanvasRender.d.ts

A vue-pdf-viewer component for Vue and Nuxt. Suitable for vue-pdf document.

/**
 * Shared canvas rendering utilities for LayerCanvas and LayerCanvasDetail.
 * Consolidates common patterns to reduce code duplication and memory usage.
 *
 * Following pdf.js patterns:
 * - Dynamic canvas creation (no template canvases)
 * - Atomic swap with opacity transitions (iOS Safari compositor-friendly)
 * - Immediate cleanup via width=0, height=0 (releases GPU texture)
 * - Lifecycle guards to prevent DOM manipulation after unmount
 */
/// <reference types="node" />
import { type Ref } from 'vue';
/**
 * Canvas context options optimized for PDF rendering.
 * Matches pdf.js quality settings.
 */
export declare const CANVAS_CONTEXT_OPTIONS: CanvasRenderingContext2DSettings;
/**
 * Create a new canvas element with standard settings.
 * All canvases are created dynamically (pdf.js pattern) to prevent
 * dual-canvas confusion that causes visual overlap on iPad Safari.
 *
 * @param className - CSS class name for the canvas
 * @param ariaHidden - Whether to hide from accessibility tree (default: false)
 * @returns New canvas element configured for off-screen rendering
 */
export declare function createCanvas(className: string, ariaHidden?: boolean): HTMLCanvasElement;
/**
 * Get 2D rendering context with optimized settings for PDF rendering.
 * Disables image smoothing for pixel-perfect rendering (pdf.js pattern).
 *
 * @param canvas - Canvas element to get context from
 * @returns Canvas 2D context or null if failed
 */
export declare function getCanvasContext(canvas: HTMLCanvasElement): CanvasRenderingContext2D | null;
/**
 * Show a canvas by setting opacity to 1.
 * Uses opacity instead of hidden attribute for iOS Safari compositor compatibility.
 *
 * @param canvas - Canvas element to show
 */
export declare function showCanvas(canvas: HTMLCanvasElement): void;
/**
 * Clean up a canvas by zeroing its dimensions.
 * This immediately releases the GPU texture (pdf.js pattern).
 *
 * @param canvas - Canvas element to clean up
 * @param removeFromDom - Whether to also remove from DOM (default: false)
 */
export declare function cleanupCanvas(canvas: HTMLCanvasElement | null, removeFromDom?: boolean): void;
/**
 * Perform atomic canvas swap with proper cleanup.
 * Following pdf.js pattern: replaceWith for atomic swap, then show via opacity.
 *
 * @param oldCanvas - Existing canvas to replace (can be null for first render)
 * @param newCanvas - New canvas to insert
 * @param containerRef - Fallback container if oldCanvas has no parent
 * @param isMounted - Ref to check if component is still mounted
 * @param canvasRef - Ref to update with new canvas
 * @param prepend - If true, prepend instead of append (for base canvas under detail)
 * @returns true if swap was successful, false otherwise
 */
export declare function performAtomicSwap(oldCanvas: HTMLCanvasElement | null | undefined, newCanvas: HTMLCanvasElement, containerRef: Ref<HTMLDivElement | null | undefined>, isMounted: Ref<boolean>, canvasRef: Ref<HTMLCanvasElement | null | undefined>, prepend?: boolean): boolean;
/**
 * Options for creating a render task.
 */
export interface RenderTaskOptions {
    page: any;
    canvas: HTMLCanvasElement;
    renderParameters: any;
    queueRenderTask: any;
    queueId: string;
    priority: number;
    isMounted: Ref<boolean>;
    canvasRef: Ref<HTMLCanvasElement | null>;
    containerRef: Ref<HTMLDivElement | null>;
    prepend?: boolean;
    onSuccess?: (canvas: HTMLCanvasElement) => void;
    onError?: (error: any) => void;
}
/**
 * Create and enqueue a render task with standard callback handling.
 * Consolidates the common render task pattern used by both LayerCanvas and LayerCanvasDetail.
 *
 * @param options - Render task configuration
 * @returns Timeout ID for the safety timeout (call clearTimeout on cleanup)
 */
export declare function createRenderTask(options: RenderTaskOptions): NodeJS.Timeout;
/**
 * Clear a debounce timeout safely.
 *
 * @param timeout - Timeout to clear (can be null)
 * @returns null (for easy assignment: timeout = clearDebounceTimeout(timeout))
 */
export declare function clearDebounceTimeout(timeout: NodeJS.Timeout | null): null;
/**
 * Standard cleanup for canvas components.
 * Call this in onBeforeUnmount and onUnmounted.
 *
 * @param options - Cleanup configuration
 */
export interface CleanupOptions {
    canvasRef: Ref<HTMLCanvasElement | null>;
    containerRef: Ref<HTMLDivElement | null>;
    newCanvasElement: HTMLCanvasElement | null;
    renderDebounceTimeout: NodeJS.Timeout | null;
    renderTimeout?: NodeJS.Timeout | null;
    queueRenderTask?: any;
    queueId?: string;
    removeFromDom?: boolean;
    clearContainer?: boolean;
}
export declare function cleanupCanvasComponent(options: CleanupOptions): void;