@rive-app/canvas-lite 2.37.7 → 2.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.37.7",
+  "version": "2.38.0",
   "description": "A lite version of Rive's canvas based web api.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -40,6 +40,21 @@ export declare enum DrawOptimizationOptions {
     AlwaysDraw = "alwaysDraw",
     DrawOnChanged = "drawOnChanged"
 }
+export interface RiveFocusOptions {
+    /**
+     * When true, allows Rive to interrupt browser focus and programmatically
+     * set/release focus on the canvas when the state machine reports focus
+     * changes in Rive. This allows apps to direct focus to/from the canvas or
+     * related elements as needed if not currently focused, which can happen at
+     * any point in the Rive render loop.
+     *
+     * Note: Nodes in the Rive graphic may still receive/release focus respecting
+     * any focus rules defined in the state machine.
+     *
+     * @default false to prevent unwanted focus interruptions
+     */
+    allowFocusInterrupt: boolean;
+}
 export interface LayoutParameters {
     fit?: Fit;
     alignment?: Alignment;
@@ -215,6 +230,14 @@ export interface RiveParameters {
     layout?: Layout;
     autoplay?: boolean;
     useOffscreenRenderer?: boolean;
+    /**
+     * Optional tab index to set for the canvas element if there are any Focus nodes within the graphic
+     */
+    tabIndex?: number;
+    /**
+     * Optional settings for focus behavior
+     */
+    focusOptions?: RiveFocusOptions;
     /**
      * Allow the runtime to automatically load assets hosted in Rive's CDN.
      * enabled by default.
@@ -316,6 +339,7 @@ export interface RiveLoadParameters {
     stateMachines?: string | string[];
     useOffscreenRenderer?: boolean;
     shouldDisableRiveListeners?: boolean;
+    tabIndex?: number;
 }
 export interface RiveResetParameters {
     artboard?: string;
@@ -415,6 +439,7 @@ export declare class Rive {
     private runtime;
     private artboard;
     private eventCleanup;
+    private _keyboardInteractions;
     private file;
     private riveFile;
     private eventManager;
@@ -438,8 +463,13 @@ export declare class Rive {
     private _currentCanvasHeight;
     private _audioEventListener;
     private _boundDraw;
+    private _pageVisibilityHandler;
+    private _explicitlyStoppedRendering;
     private _viewModelInstance;
     private _dataEnums;
+    private _tabIndex;
+    private _prevHasFocus;
+    private _focusOptions;
     private drawOptimization;
     private enablePerfMarks;
     durations: number[];
@@ -459,6 +489,7 @@ export declare class Rive {
      * i.e. { isTouchScrollEnabled: true }
      */
     setupRiveListeners(riveListenerOptions?: SetupRiveListenersOptions): void;
+    private cleanupKeyboardInteractions;
     /**
      * Remove Rive Listeners setup on the canvas
      */
@@ -473,6 +504,11 @@ export declare class Rive {
     private initArtboard;
     drawFrame(): void;
     private _canvasSizeChanged;
+    /**
+     * Poll focus state each frame to see if we should focus/blur the canvas in case
+     * Rive internally updated focus outside of user interaction (e.g., via listener action)
+     */
+    private pollFocusState;
     private lastRenderTime;
     private frameRequestId;
     /**
@@ -480,6 +516,13 @@ export declare class Rive {
      * Used for debugging purposes
      */
     private renderSecondTimer;
+    /**
+     * Handles important sequence of reporting Rive events, advancing the state machine or animation, and invoking various callbacks
+     * due to state changes, view model property changes, etc.
+     *
+     * @param elapsedTime time to advance the state machine by
+     */
+    private advanceAndReportChanges;
     /**
      * Draw rendering loop; renders animation frames at the correct time interval.
      * @param time the time at which to render a frame
@@ -723,6 +766,13 @@ export declare class Rive {
      */
     startRendering(): void;
     private scheduleRendering;
+    /**
+     * Called when document.visibilitychange fires (tab change, window minimize, etc.).
+     * Cancels the rAF loop on hide and resets the time reference so that no accumulated time is
+     * applied to state machines when the tab becomes visible again. This prevents state machine
+     * advances with large time deltas when rAF starts up again.
+     */
+    private _onPageVisibilityChange;
     /**
      * 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
@@ -797,6 +847,11 @@ export declare class Rive {
     getArtboard(name: string): Artboard | null;
     getBindableArtboard(name: string): BindableArtboard | null;
     getDefaultBindableArtboard(): BindableArtboard | null;
+    /**
+     * Clear focus applicable to active state machines with focus nodes. Useful if users want to
+     * reset focus state and behavior within the Rive graphic at any point (i.e. blurring off the canvas)
+     */
+    clearFocus(): void;
 }
 export declare enum DataType {
     none = "none",