import JSZip from "jszip"; /** * Complete set of options. */ export interface Settings { record: boolean; clear: boolean; size: [number, number]; frames: number; onComplete: (blob: Blob) => void; color: string; fps: number; canvas?: HTMLCanvasElement; } /** * Interface to descrive the possible settings when set in an `options()` call. */ export declare type DrawOptions = Partial; /** * Possible options to be sent to bootstrapping a sketch. */ export interface BoostrapOptions { clear: boolean; } /** * Abstract base class that implements shared internal functionality to record a canvas was animation frame by frame. */ export declare abstract class BaseRecorder { protected canvas: HTMLCanvasElement; protected context: T; protected callback?: (context: T, time: number, percent: number) => void; protected teardown?: () => void; protected before?: (context: T) => void; protected count: number; protected startTime: number; protected raf: number; protected isLooping: boolean; protected zip: JSZip; /** * State of settings currently in use. For more detail please refer to the README. */ protected readonly settings: Settings; constructor(canvas: HTMLCanvasElement, context: T); /** * Sets specific details on how the recorder functions. * * @param opts settings for recording behavior */ options(opts: DrawOptions): void; /** * Starts a recording. This will create an asyncronous loop that continously calls the draw function until the * recorder is either manually stopped or automatically terminated after reaching and amount of desired frames. * * Once the recording was started, options can not be changed. */ start(): void; /** * Stops the recording process. When a desired amount of frames is set, this method is not needed as it is * invoked internally. * Stopping the recording also starts an asyncrounous routine to finalize the zip file that contains all images. * Due to the inherent asyncrounous nature of the process, the stop function has no return value. To recieve the * archive instead of downloading it, set the onComplete method in the option. */ stop(): void; /** * Resets the recorder options to it's originaly state. Terminates any recording if in process. Disposes all * currently recorded frames. */ reset(): void; /** * Sets the callback used to capture a frame. Repeatedly setting callbacks will overwrite the previous one. * Multiple callbacks can not be set. The callback given will recieve the context and the time passed since the * start of the recording. Be advised that the time does not represent real time but is dependend on the desired * amount of FPD set in the options. * * @param action callback to capture the animation. */ draw(action: (context: T, time: number, t: number) => void): void; /** * Optinall callback after the animation has terminated. Use this if you need to run some cleanup code after all the * animating is done. * @param action callback */ cleanup(action: () => void): void; setup(action: (context: T) => void): void; /** * Returns the canvas html element in use. Useful to inject it into the DOM when in development mode. */ getCanvas(): HTMLCanvasElement; /** * Returns the context being used. The type depends on the non-abstract implementation of this class. */ getContext(): T; /** * Shorthand to both insert the canvas into the DOM as the last element of the body as * well as calling `start()`. Useful for short demos that require no further setup. */ bootstrap(options?: BoostrapOptions): void; /** * Adds a single frame to the current bundle. */ addFrame(canvas: HTMLCanvasElement): Promise; /** * Returns a reference to the current collection of all frames in the form of a JSZip. */ getBundle(): JSZip; /** * Empties all frames and resets the frame count to 0. Leaves all other settings in tact. * For a more comprehensive reset use the `reset()` method as it reestablishes the default * mode of the recorder. */ resetBundle(): void; /** * Download the current bundle of frames. This will also reset the bundle to a new empty one. * All further frames will not be included but can be downloaded subsequently. */ downloadBundle(): Promise; protected abstract clear(): void; protected abstract updateCanvas(canvas: HTMLCanvasElement): void; private init; private loop; private nextFrame; } /** * Helper that uses browser internal methods to convert CSS based color string into a RGBA number array. * The array returned contains 4 numbers ranging from 0 to 1. * * @param color Variously formatted color string. */ export declare function colorToRGBA(color: string): [number, number, number, number]; export declare function download(blob: Blob): void; export declare function record(canvas: HTMLCanvasElement, frame: number, zip: JSZip): Promise;