@rive-app/canvas-lite 0.1.1

package/README.md

@@ -0,0 +1,21 @@
+![npm](https://img.shields.io/npm/v/@rive-app/canvas-lite)
+# Rive 
+A lite high-level Rive API using CanvasRenderingContext2D. Please see https://help.rive.app/runtimes/overview/web-js/canvas-vs-webgl for a list of all the available web runtimes and their details.
+
+## Canvas Lite 
+```
+npm install @rive-app/canvas-lite
+```
+An easy-to-use high-level Rive API using a backing [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) renderer. This lets Rive use the browser's native high-level vector graphics renderer. Some benefits of this package:
+- Extremely small download size
+- Great for displaying many animated canvases concurrently on the screen. This is ideal for when you want to render lists or grids of Rive animations on the screen, as there is no context limit by the browser (as opposed to WebGL)
+- Support for simple vector graphics animations, raster, and mesh deformations
+- Requests the Web Assembly (WASM) backing dependency for you
+
+[Getting Started](https://help.rive.app/runtimes/overview/web-js)
+
+## Why Lite?
+
+The current `@rive-app/canvas` dependency supports all Rive features and contains the necessary backing dependencies to render those graphics. This `lite` version has the same API, but does not compile and build with certain dependencies in order to keep the package size as small as possible.
+
+At this time, this lite version of `@rive-app/canvas-lite` will not render [Rive Text](https://help.rive.app/editor/text) onto the canvas. Note however, that even if your Rive file may include Rive Text components, rendering the graphic should not cause any app errors, or cease to render.

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rive-app/canvas-lite",
+  "version": "0.1.1",
+  "description": "A lite version of Rive's canvas based web api.",
+  "main": "rive.js",
+  "homepage": "https://rive.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rive-app/rive-wasm/tree/master/js"
+  },
+  "keywords": [
+    "rive",
+    "animation"
+  ],
+  "author": "Rive",
+  "contributors": [
+    "Luigi Rosso <luigi@rive.app> (https://rive.app)",
+    "Maxwell Talbot <max@rive.app> (https://rive.app)",
+    "Arthur Vivian <arthur@rive.app> (https://rive.app)",
+    "Umberto Sonnino <umberto@rive.app> (https://rive.app)",
+    "Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"
+  ],
+  "license": "MIT",
+  "files": [
+    "rive.js",
+    "rive.js.map",
+    "rive.wasm",
+    "rive.d.ts",
+    "rive_advanced.mjs.d.ts"
+  ],
+  "typings": "rive.d.ts",
+  "dependencies": {},
+  "browser": {
+    "fs": false,
+    "path": false
+  }
+}

package/rive.d.ts

@@ -0,0 +1,538 @@
+import * as rc from "./rive_advanced.mjs";
+/**
+ * Generic type for a parameterless void callback
+ */
+export type VoidCallback = () => void;
+export type AssetLoadCallback = (asset: rc.FileAsset, bytes: Uint8Array) => Boolean;
+/**
+ * Type for artboard bounds
+ */
+export type Bounds = rc.AABB;
+export declare enum Fit {
+    Cover = "cover",
+    Contain = "contain",
+    Fill = "fill",
+    FitWidth = "fitWidth",
+    FitHeight = "fitHeight",
+    None = "none",
+    ScaleDown = "scaleDown"
+}
+export declare enum Alignment {
+    Center = "center",
+    TopLeft = "topLeft",
+    TopCenter = "topCenter",
+    TopRight = "topRight",
+    CenterLeft = "centerLeft",
+    CenterRight = "centerRight",
+    BottomLeft = "bottomLeft",
+    BottomCenter = "bottomCenter",
+    BottomRight = "bottomRight"
+}
+export interface LayoutParameters {
+    fit?: Fit;
+    alignment?: Alignment;
+    minX?: number;
+    minY?: number;
+    maxX?: number;
+    maxY?: number;
+}
+export declare class Layout {
+    private cachedRuntimeFit;
+    private cachedRuntimeAlignment;
+    readonly fit: Fit;
+    readonly alignment: Alignment;
+    readonly minX: number;
+    readonly minY: number;
+    readonly maxX: number;
+    readonly maxY: number;
+    constructor(params?: LayoutParameters);
+    static new({ fit, alignment, minX, minY, maxX, maxY, }: LayoutParameters): Layout;
+    /**
+     * Makes a copy of the layout, replacing any specified parameters
+     */
+    copyWith({ fit, alignment, minX, minY, maxX, maxY, }: LayoutParameters): Layout;
+    runtimeFit(rive: rc.RiveCanvas): rc.Fit;
+    runtimeAlignment(rive: rc.RiveCanvas): rc.Alignment;
+}
+export type RuntimeCallback = (rive: rc.RiveCanvas) => void;
+export declare class RuntimeLoader {
+    private static runtime;
+    private static isLoading;
+    private static callBackQueue;
+    private static rive;
+    private static wasmURL;
+    private constructor();
+    private static loadRuntime;
+    static getInstance(callback: RuntimeCallback): void;
+    static awaitInstance(): Promise<rc.RiveCanvas>;
+    static setWasmUrl(url: string): void;
+}
+export declare enum StateMachineInputType {
+    Number = 56,
+    Trigger = 58,
+    Boolean = 59
+}
+/**
+ * An input for a state machine
+ */
+export declare class StateMachineInput {
+    readonly type: StateMachineInputType;
+    private runtimeInput;
+    constructor(type: StateMachineInputType, runtimeInput: rc.SMIInput);
+    /**
+     * Returns the name of the input
+     */
+    get name(): string;
+    /**
+     * Returns the current value of the input
+     */
+    get value(): number | boolean;
+    /**
+     * Sets the value of the input
+     */
+    set value(value: number | boolean);
+    /**
+     * Fires a trigger; does nothing on Number or Boolean input types
+     */
+    fire(): void;
+}
+export declare enum RiveEventType {
+    General = 128,
+    OpenUrl = 131
+}
+/**
+ * Supported event types triggered in Rive
+ */
+export declare enum EventType {
+    Load = "load",
+    LoadError = "loaderror",
+    Play = "play",
+    Pause = "pause",
+    Stop = "stop",
+    Loop = "loop",
+    Draw = "draw",
+    Advance = "advance",
+    StateChange = "statechange",
+    RiveEvent = "riveevent"
+}
+export type RiveEventPayload = rc.RiveEvent | rc.OpenUrlEvent;
+export interface Event {
+    type: EventType;
+    data?: string | string[] | LoopEvent | number | RiveEventPayload;
+}
+/**
+ * Looping types: one-shot, loop, and ping-pong
+ */
+export declare enum LoopType {
+    OneShot = "oneshot",
+    Loop = "loop",
+    PingPong = "pingpong"
+}
+/**
+ * Loop events are returned through onloop callbacks
+ */
+export interface LoopEvent {
+    animation: string;
+    type: LoopType;
+}
+/**
+ * Loop events are returned through onloop callbacks
+ */
+export type EventCallback = (event: Event) => void;
+/**
+ * Event listeners registered with the event manager
+ */
+export interface EventListener {
+    type: EventType;
+    callback: EventCallback;
+}
+/**
+ * FPS Reporting through callbacks sent to the WASM runtime
+ */
+export type FPSCallback = (fps: number) => void;
+declare class EventManager {
+    private listeners;
+    constructor(listeners?: EventListener[]);
+    private getListeners;
+    add(listener: EventListener): void;
+    /**
+     * Removes a listener
+     * @param listener the listener with the callback to be removed
+     */
+    remove(listener: EventListener): void;
+    /**
+     * Clears all listeners of specified type, or every listener if no type is
+     * specified
+     * @param type the type of listeners to clear, or all listeners if not
+     * specified
+     */
+    removeAll(type?: EventType): void;
+    fire(event: Event): void;
+}
+export interface Task {
+    action?: VoidCallback;
+    event?: Event;
+}
+declare class TaskQueueManager {
+    private eventManager;
+    private queue;
+    constructor(eventManager: EventManager);
+    add(task: Task): void;
+    process(): void;
+}
+export interface RiveParameters {
+    canvas: HTMLCanvasElement | OffscreenCanvas;
+    src?: string;
+    buffer?: ArrayBuffer;
+    artboard?: string;
+    animations?: string | string[];
+    stateMachines?: string | string[];
+    layout?: Layout;
+    autoplay?: boolean;
+    useOffscreenRenderer?: boolean;
+    /**
+     * Allow the runtime to automatically load assets hosted in Rive's CDN.
+     * enabled by default.
+     */
+    enableRiveAssetCDN?: boolean;
+    /**
+     * Turn off Rive Listeners. This means state machines that have Listeners
+     * will not be invoked, and also, no event listeners pertaining to Listeners
+     * will be attached to the <canvas> element
+     */
+    shouldDisableRiveListeners?: boolean;
+    /**
+     * Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
+     * a side effect that takes place implicitly.
+     *
+     * For example, if during the render loop an OpenUrlEvent is detected, the
+     * browser may try to open the specified URL in the payload.
+     *
+     * This flag is false by default to prevent any unwanted behaviors from taking place.
+     * This means any special Rive Event will have to be handled manually by subscribing to
+     * EventType.RiveEvent
+     */
+    automaticallyHandleEvents?: boolean;
+    onLoad?: EventCallback;
+    onLoadError?: EventCallback;
+    onPlay?: EventCallback;
+    onPause?: EventCallback;
+    onStop?: EventCallback;
+    onLoop?: EventCallback;
+    onStateChange?: EventCallback;
+    onAdvance?: EventCallback;
+    assetLoader?: AssetLoadCallback;
+    /**
+     * @deprecated Use `onLoad()` instead
+     */
+    onload?: EventCallback;
+    /**
+     * @deprecated Use `onLoadError()` instead
+     */
+    onloaderror?: EventCallback;
+    /**
+     * @deprecated Use `onPoad()` instead
+     */
+    onplay?: EventCallback;
+    /**
+     * @deprecated Use `onPause()` instead
+     */
+    onpause?: EventCallback;
+    /**
+     * @deprecated Use `onStop()` instead
+     */
+    onstop?: EventCallback;
+    /**
+     * @deprecated Use `onLoop()` instead
+     */
+    onloop?: EventCallback;
+    /**
+     * @deprecated Use `onStateChange()` instead
+     */
+    onstatechange?: EventCallback;
+}
+export interface RiveLoadParameters {
+    src?: string;
+    buffer?: ArrayBuffer;
+    autoplay?: boolean;
+    artboard?: string;
+    animations?: string | string[];
+    stateMachines?: string | string[];
+    useOffscreenRenderer?: boolean;
+    shouldDisableRiveListeners?: boolean;
+}
+export interface RiveResetParameters {
+    artboard?: string;
+    animations?: string | string[];
+    stateMachines?: string | string[];
+    autoplay?: boolean;
+}
+export declare class Rive {
+    private readonly canvas;
+    private src;
+    private buffer;
+    private _layout;
+    private renderer;
+    private loaded;
+    /**
+     * Tracks if a Rive file is loaded; we need this in addition to loaded as some
+     * commands (e.g. contents) can be called as soon as the file is loaded.
+     * However, playback commands need to be queued and run in order once initial
+     * animations and autoplay has been sorted out. This applies to play, pause,
+     * and start.
+     */
+    private readyForPlaying;
+    private runtime;
+    private artboard;
+    private eventCleanup;
+    private file;
+    private eventManager;
+    private taskQueue;
+    private animator;
+    private assetLoader;
+    private static readonly missingErrorMessage;
+    private shouldDisableRiveListeners;
+    private automaticallyHandleEvents;
+    private enableRiveAssetCDN;
+    durations: number[];
+    frameTimes: number[];
+    frameCount: number;
+    constructor(params: RiveParameters);
+    static new(params: RiveParameters): Rive;
+    private init;
+    private setupRiveListeners;
+    private initData;
+    private initArtboard;
+    drawFrame(): void;
+    private lastRenderTime;
+    private frameRequestId;
+    /**
+     * Used be draw to track when a second of active rendering time has passed.
+     * Used for debugging purposes
+     */
+    private renderSecondTimer;
+    /**
+     * Draw rendering loop; renders animation frames at the correct time interval.
+     * @param time the time at which to render a frame
+     */
+    private draw;
+    /**
+     * Align the renderer
+     */
+    private alignRenderer;
+    get fps(): number;
+    get frameTime(): string | 0;
+    /**
+     * Cleans up all Wasm-generated objects that need to be manually destroyed:
+     * artboard instances, animation instances, state machine instances,
+     * renderer instance, file and runtime.
+     *
+     * Once this is called, you will need to initialise a new instance of the
+     * Rive class
+     */
+    cleanup(): void;
+    /**
+     * Cleans up any Wasm-generated objects that need to be manually destroyed:
+     * artboard instances, animation instances, state machine instances.
+     *
+     * Once this is called, things will need to be reinitialized or bad things
+     * might happen.
+     */
+    cleanupInstances(): void;
+    /**
+     * Tries to query the setup Artboard for a text run node with the given name.
+     *
+     * @param textRunName - Name of the text run node associated with a text object
+     * @returns - TextValueRun node or undefined if the text run cannot be queried
+     */
+    private retrieveTextRun;
+    /**
+     * Returns a string from a given text run node name, or undefined if the text run
+     * cannot be queried.
+     *
+     * @param textRunName - Name of the text run node associated with a text object
+     * @returns - String value of the text run node or undefined
+     */
+    getTextRunValue(textRunName: string): string | undefined;
+    /**
+     * Sets a text value for a given text run node name if possible
+     *
+     * @param textRunName - Name of the text run node associated with a text object
+     * @param textRunValue - String value to set on the text run node
+     */
+    setTextRunValue(textRunName: string, textRunValue: string): void;
+    play(animationNames?: string | string[], autoplay?: true): void;
+    pause(animationNames?: string | string[]): void;
+    scrub(animationNames?: string | string[], value?: number): void;
+    stop(animationNames?: string | string[] | undefined): void;
+    /**
+     * Resets the animation
+     * @param artboard the name of the artboard, or default if none given
+     * @param animations the names of animations for playback
+     * @param stateMachines the names of state machines for playback
+     * @param autoplay whether to autoplay when reset, defaults to false
+     *
+     */
+    reset(params?: RiveResetParameters): void;
+    load(params: RiveLoadParameters): void;
+    set layout(layout: Layout);
+    /**
+     * Returns the current layout. Note that layout should be treated as
+     * immutable. If you want to change the layout, create a new one use the
+     * layout setter
+     */
+    get layout(): Layout;
+    /**
+     * Sets the layout bounds to the current canvas size; this is typically called
+     * when the canvas is resized
+     */
+    resizeToCanvas(): void;
+    /**
+     * Accounts for devicePixelRatio as a multiplier to render the size of the canvas drawing surface.
+     * Uses the size of the backing canvas to set new width/height attributes. Need to re-render
+     * and resize the layout to match the new drawing surface afterwards.
+     * Useful function for consumers to include in a window resize listener
+     */
+    resizeDrawingSurfaceToCanvas(): void;
+    get source(): string;
+    /**
+     * Returns the name of the active artboard
+     */
+    get activeArtboard(): string;
+    get animationNames(): string[];
+    /**
+     * Returns a list of state machine names from the current artboard
+     */
+    get stateMachineNames(): string[];
+    /**
+     * Returns the inputs for the specified instanced state machine, or an empty
+     * list if the name is invalid or the state machine is not instanced
+     * @param name the state machine name
+     * @returns the inputs for the named state machine
+     */
+    stateMachineInputs(name: string): StateMachineInput[];
+    get playingStateMachineNames(): string[];
+    get playingAnimationNames(): string[];
+    get pausedAnimationNames(): string[];
+    /**
+     *  Returns a list of paused machine names
+     * @returns a list of state machine names that are paused
+     */
+    get pausedStateMachineNames(): string[];
+    /**
+     * @returns true if any animation is playing
+     */
+    get isPlaying(): boolean;
+    /**
+     * @returns true if all instanced animations are paused
+     */
+    get isPaused(): boolean;
+    /**
+     * @returns true if no animations are playing or paused
+     */
+    get isStopped(): boolean;
+    /**
+     * @returns the bounds of the current artboard, or undefined if the artboard
+     * isn't loaded yet.
+     */
+    get bounds(): Bounds;
+    /**
+     * Subscribe to Rive-generated events
+     * @param type the type of event to subscribe to
+     * @param callback callback to fire when the event occurs
+     */
+    on(type: EventType, callback: EventCallback): void;
+    /**
+     * Unsubscribes from a Rive-generated event
+     * @param type the type of event to unsubscribe from
+     * @param callback the callback to unsubscribe
+     */
+    off(type: EventType, callback: EventCallback): void;
+    /**
+     * Unsubscribes from a Rive-generated event
+     * @deprecated
+     * @param callback the callback to unsubscribe from
+     */
+    unsubscribe(type: EventType, callback: EventCallback): void;
+    /**
+     * Unsubscribes all Rive listeners from an event type, or everything if no type is
+     * given
+     * @param type the type of event to unsubscribe from, or all types if
+     * undefined
+     */
+    removeAllRiveEventListeners(type?: EventType): void;
+    /**
+     * Unsubscribes all listeners from an event type, or everything if no type is
+     * given
+     * @deprecated
+     * @param type the type of event to unsubscribe from, or all types if
+     * undefined
+     */
+    unsubscribeAll(type?: EventType): void;
+    /**
+     * Stops the rendering loop; this is different from pausing in that it doesn't
+     * change the state of any animation. It stops rendering from occurring. This
+     * is designed for situations such as when Rive isn't visible.
+     *
+     * The only way to start rendering again is to call `startRendering`.
+     * Animations that are marked as playing will start from the position that
+     * they would have been at if rendering had not been stopped.
+     */
+    stopRendering(): void;
+    /**
+     * Starts the rendering loop if it has been previously stopped. If the
+     * renderer is already active, then this will have zero effect.
+     */
+    startRendering(): void;
+    /**
+     * Enables frames-per-second (FPS) reporting for the runtime
+     * If no callback is provided, Rive will append a fixed-position div at the top-right corner of
+     * the page with the FPS reading
+     * @param fpsCallback - Callback from the runtime during the RAF loop that supplies the FPS value
+     */
+    enableFPSCounter(fpsCallback?: FPSCallback): void;
+    /**
+     * Disables frames-per-second (FPS) reporting for the runtime
+     */
+    disableFPSCounter(): void;
+    /**
+     * Returns the contents of a Rive file: the artboards, animations, and state machines
+     */
+    get contents(): RiveFileContents;
+}
+/**
+ * Contents of a state machine input
+ */
+interface StateMachineInputContents {
+    name: string;
+    type: StateMachineInputType;
+    initialValue?: boolean | number;
+}
+/**
+ * Contents of a state machine
+ */
+interface StateMachineContents {
+    name: string;
+    inputs: StateMachineInputContents[];
+}
+/**
+ * Contents of an artboard
+ */
+interface ArtboardContents {
+    animations: string[];
+    stateMachines: StateMachineContents[];
+    name: string;
+}
+/**
+ * contents of a Rive file
+ */
+interface RiveFileContents {
+    artboards?: ArtboardContents[];
+}
+export declare const Testing: {
+    EventManager: typeof EventManager;
+    TaskQueueManager: typeof TaskQueueManager;
+};
+export declare const decodeImage: (bytes: Uint8Array) => Promise<any>;
+export declare const decodeFont: (bytes: Uint8Array) => Promise<any>;
+export {};