@rive-app/canvas-lite 2.37.7 → 2.37.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rive-app/canvas-lite",
3
- "version": "2.37.7",
3
+ "version": "2.37.8",
4
4
  "description": "A lite version of Rive's canvas based web api.",
5
5
  "main": "rive.js",
6
6
  "homepage": "https://rive.app",
package/rive.d.ts CHANGED
@@ -215,6 +215,10 @@ export interface RiveParameters {
215
215
  layout?: Layout;
216
216
  autoplay?: boolean;
217
217
  useOffscreenRenderer?: boolean;
218
+ /**
219
+ * Optional tab index to set for the canvas element if there are any Focus nodes within the graphic
220
+ */
221
+ tabIndex?: number;
218
222
  /**
219
223
  * Allow the runtime to automatically load assets hosted in Rive's CDN.
220
224
  * enabled by default.
@@ -316,6 +320,7 @@ export interface RiveLoadParameters {
316
320
  stateMachines?: string | string[];
317
321
  useOffscreenRenderer?: boolean;
318
322
  shouldDisableRiveListeners?: boolean;
323
+ tabIndex?: number;
319
324
  }
320
325
  export interface RiveResetParameters {
321
326
  artboard?: string;
@@ -415,6 +420,7 @@ export declare class Rive {
415
420
  private runtime;
416
421
  private artboard;
417
422
  private eventCleanup;
423
+ private keyboardEventCleanup;
418
424
  private file;
419
425
  private riveFile;
420
426
  private eventManager;
@@ -438,8 +444,11 @@ export declare class Rive {
438
444
  private _currentCanvasHeight;
439
445
  private _audioEventListener;
440
446
  private _boundDraw;
447
+ private _pageVisibilityHandler;
448
+ private _explicitlyStoppedRendering;
441
449
  private _viewModelInstance;
442
450
  private _dataEnums;
451
+ private _tabIndex;
443
452
  private drawOptimization;
444
453
  private enablePerfMarks;
445
454
  durations: number[];
@@ -723,6 +732,13 @@ export declare class Rive {
723
732
  */
724
733
  startRendering(): void;
725
734
  private scheduleRendering;
735
+ /**
736
+ * Called when document.visibilitychange fires (tab change, window minimize, etc.).
737
+ * Cancels the rAF loop on hide and resets the time reference so that no accumulated time is
738
+ * applied to state machines when the tab becomes visible again. This prevents state machine
739
+ * advances with large time deltas when rAF starts up again.
740
+ */
741
+ private _onPageVisibilityChange;
726
742
  /**
727
743
  * Enables frames-per-second (FPS) reporting for the runtime
728
744
  * If no callback is provided, Rive will append a fixed-position div at the top-right corner of
package/rive.js CHANGED
@@ -2546,7 +2546,7 @@ moduleRtn = da;
2546
2546
  /* 5 */
2547
2547
  /***/ ((module) => {
2548
2548
 
2549
- module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.37.7","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_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts","runtimeLoader.d.ts","utils"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
2549
+ module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.37.8","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_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts","runtimeLoader.d.ts","utils"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
2550
2550
 
2551
2551
  /***/ }),
2552
2552
  /* 6 */
@@ -2554,26 +2554,29 @@ module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","versi
2554
2554
 
2555
2555
  __webpack_require__.r(__webpack_exports__);
2556
2556
  /* harmony export */ __webpack_require__.d(__webpack_exports__, {
2557
- /* harmony export */ AudioAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.AudioAssetWrapper),
2558
- /* harmony export */ AudioWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.AudioWrapper),
2559
- /* harmony export */ BLANK_URL: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_1__.BLANK_URL),
2560
- /* harmony export */ CustomFileAssetLoaderWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.CustomFileAssetLoaderWrapper),
2561
- /* harmony export */ FileAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FileAssetWrapper),
2562
- /* harmony export */ FileFinalizer: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FileFinalizer),
2563
- /* harmony export */ FontAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FontAssetWrapper),
2564
- /* harmony export */ FontWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FontWrapper),
2565
- /* harmony export */ ImageAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.ImageAssetWrapper),
2566
- /* harmony export */ ImageWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.ImageWrapper),
2567
- /* harmony export */ RiveFont: () => (/* reexport safe */ _riveFont__WEBPACK_IMPORTED_MODULE_3__.RiveFont),
2568
- /* harmony export */ createFinalization: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.createFinalization),
2569
- /* harmony export */ finalizationRegistry: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.finalizationRegistry),
2557
+ /* harmony export */ AudioAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.AudioAssetWrapper),
2558
+ /* harmony export */ AudioWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.AudioWrapper),
2559
+ /* harmony export */ BLANK_URL: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_2__.BLANK_URL),
2560
+ /* harmony export */ CustomFileAssetLoaderWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.CustomFileAssetLoaderWrapper),
2561
+ /* harmony export */ FileAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FileAssetWrapper),
2562
+ /* harmony export */ FileFinalizer: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FileFinalizer),
2563
+ /* harmony export */ FontAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FontAssetWrapper),
2564
+ /* harmony export */ FontWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FontWrapper),
2565
+ /* harmony export */ ImageAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.ImageAssetWrapper),
2566
+ /* harmony export */ ImageWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.ImageWrapper),
2567
+ /* harmony export */ RiveFont: () => (/* reexport safe */ _riveFont__WEBPACK_IMPORTED_MODULE_4__.RiveFont),
2568
+ /* harmony export */ createFinalization: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.createFinalization),
2569
+ /* harmony export */ finalizationRegistry: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.finalizationRegistry),
2570
+ /* harmony export */ registerKeyboardInteractions: () => (/* reexport safe */ _registerKeyboardInteractions__WEBPACK_IMPORTED_MODULE_1__.registerKeyboardInteractions),
2570
2571
  /* harmony export */ registerTouchInteractions: () => (/* reexport safe */ _registerTouchInteractions__WEBPACK_IMPORTED_MODULE_0__.registerTouchInteractions),
2571
- /* harmony export */ sanitizeUrl: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_1__.sanitizeUrl)
2572
+ /* harmony export */ sanitizeUrl: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_2__.sanitizeUrl)
2572
2573
  /* harmony export */ });
2573
2574
  /* harmony import */ var _registerTouchInteractions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
2574
- /* harmony import */ var _sanitizeUrl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
2575
- /* harmony import */ var _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
2576
- /* harmony import */ var _riveFont__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
2575
+ /* harmony import */ var _registerKeyboardInteractions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
2576
+ /* harmony import */ var _sanitizeUrl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
2577
+ /* harmony import */ var _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
2578
+ /* harmony import */ var _riveFont__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
2579
+
2577
2580
 
2578
2581
 
2579
2582
 
@@ -2875,6 +2878,68 @@ var registerTouchInteractions = function (_a) {
2875
2878
  /* 8 */
2876
2879
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2877
2880
 
2881
+ __webpack_require__.r(__webpack_exports__);
2882
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
2883
+ /* harmony export */ registerKeyboardInteractions: () => (/* binding */ registerKeyboardInteractions)
2884
+ /* harmony export */ });
2885
+ /**
2886
+ * Registers focus and tab-traversal event handlers on the canvas to route
2887
+ * Tab/Shift+Tab to the active Rive state machine's focus manager.
2888
+ *
2889
+ * Mirrors registerTouchInteractions for pointer events.
2890
+ *
2891
+ * Returns a cleanup function that removes all registered event listeners,
2892
+ * or null if the setup conditions are not met.
2893
+ */
2894
+ var registerKeyboardInteractions = function (_a) {
2895
+ var canvas = _a.canvas, stateMachine = _a.stateMachine, rive = _a.rive, hasFocusNodes = _a.hasFocusNodes;
2896
+ if (!canvas ||
2897
+ !stateMachine ||
2898
+ !rive ||
2899
+ typeof window === "undefined") {
2900
+ return null;
2901
+ }
2902
+ // Work off an assumption of a single state machine
2903
+ var mainSm = stateMachine;
2904
+ var canvasHasFocus = false;
2905
+ var onCanvasFocus = function (_event) {
2906
+ canvasHasFocus = true;
2907
+ };
2908
+ var onCanvasBlur = function (_event) {
2909
+ canvasHasFocus = false;
2910
+ };
2911
+ var onKeyDown = function (event) {
2912
+ if (!canvasHasFocus)
2913
+ return;
2914
+ if (event.code === "Tab" && hasFocusNodes) {
2915
+ var forward = !event.shiftKey;
2916
+ var focusMoved = forward ? mainSm.focusNext() : mainSm.focusPrevious();
2917
+ if (focusMoved) {
2918
+ // Keep Tab inside the canvas — a Rive node received focus.
2919
+ event.preventDefault();
2920
+ }
2921
+ else {
2922
+ // No more traversable nodes — release Tab to the page.
2923
+ // Since we're not preventing default, blur event will fire on the canvas
2924
+ canvasHasFocus = false;
2925
+ }
2926
+ }
2927
+ };
2928
+ canvas.addEventListener("focus", onCanvasFocus);
2929
+ canvas.addEventListener("blur", onCanvasBlur);
2930
+ canvas.addEventListener("keydown", onKeyDown);
2931
+ return function () {
2932
+ canvas.removeEventListener("focus", onCanvasFocus);
2933
+ canvas.removeEventListener("blur", onCanvasBlur);
2934
+ canvas.removeEventListener("keydown", onKeyDown);
2935
+ };
2936
+ };
2937
+
2938
+
2939
+ /***/ }),
2940
+ /* 9 */
2941
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2942
+
2878
2943
  __webpack_require__.r(__webpack_exports__);
2879
2944
  /* harmony export */ __webpack_require__.d(__webpack_exports__, {
2880
2945
  /* harmony export */ BLANK_URL: () => (/* binding */ BLANK_URL),
@@ -2925,7 +2990,7 @@ function sanitizeUrl(url) {
2925
2990
 
2926
2991
 
2927
2992
  /***/ }),
2928
- /* 9 */
2993
+ /* 10 */
2929
2994
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2930
2995
 
2931
2996
  __webpack_require__.r(__webpack_exports__);
@@ -3204,7 +3269,7 @@ var createFinalization = function (target, finalizable) {
3204
3269
 
3205
3270
 
3206
3271
  /***/ }),
3207
- /* 10 */
3272
+ /* 11 */
3208
3273
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
3209
3274
 
3210
3275
  __webpack_require__.r(__webpack_exports__);
@@ -4823,8 +4888,10 @@ var Rive = /** @class */ (function () {
4823
4888
  this.readyForPlaying = false;
4824
4889
  // Runtime artboard
4825
4890
  this.artboard = null;
4826
- // place to clear up event listeners
4891
+ // place to clear up pointer/touch event listeners
4827
4892
  this.eventCleanup = null;
4893
+ // place to clear up focus/keyboard event listeners
4894
+ this.keyboardEventCleanup = null;
4828
4895
  this.shouldDisableRiveListeners = false;
4829
4896
  this.automaticallyHandleEvents = false;
4830
4897
  this.dispatchPointerExit = true;
@@ -4852,8 +4919,16 @@ var Rive = /** @class */ (function () {
4852
4919
  this._audioEventListener = null;
4853
4920
  // draw method bound to the class
4854
4921
  this._boundDraw = null;
4922
+ // Page visibility handler — prevents state machine advancing / rAF from being invoked with large time delta
4923
+ // when the browser tab is switched back to after being hidden.
4924
+ this._pageVisibilityHandler = null;
4925
+ // True only when the page visibility handler itself cancelled an active frame.
4926
+ // Set by stopRendering(), cleared by startRendering(). Prevents the
4927
+ // visibilitychange handler from restarting a rendering loop the caller intentionally stopped.
4928
+ this._explicitlyStoppedRendering = false;
4855
4929
  this._viewModelInstance = null;
4856
4930
  this._dataEnums = null;
4931
+ this._tabIndex = null;
4857
4932
  this.drawOptimization = DrawOptimizationOptions.DrawOnChanged;
4858
4933
  // When true, emits performance.mark/measure entries for load and render.
4859
4934
  this.enablePerfMarks = false;
@@ -4874,12 +4949,18 @@ var Rive = /** @class */ (function () {
4874
4949
  _this.resizeToCanvas();
4875
4950
  }
4876
4951
  };
4952
+ // Tracks the current animation frame request
4953
+ this.frameRequestId = null;
4877
4954
  /**
4878
4955
  * Used be draw to track when a second of active rendering time has passed.
4879
4956
  * Used for debugging purposes
4880
4957
  */
4881
4958
  this.renderSecondTimer = 0;
4882
4959
  this._boundDraw = this.draw.bind(this);
4960
+ if (typeof document !== 'undefined') {
4961
+ this._pageVisibilityHandler = this._onPageVisibilityChange.bind(this);
4962
+ document.addEventListener('visibilitychange', this._pageVisibilityHandler);
4963
+ }
4883
4964
  this.canvas = params.canvas;
4884
4965
  if (params.canvas.constructor === HTMLCanvasElement) {
4885
4966
  this._observed = observers.add(this.canvas, this.onCanvasResize);
@@ -4958,6 +5039,7 @@ var Rive = /** @class */ (function () {
4958
5039
  stateMachines: params.stateMachines,
4959
5040
  artboard: params.artboard,
4960
5041
  useOffscreenRenderer: params.useOffscreenRenderer,
5042
+ tabIndex: params.tabIndex,
4961
5043
  });
4962
5044
  }
4963
5045
  Object.defineProperty(Rive.prototype, "viewModelCount", {
@@ -4979,13 +5061,14 @@ var Rive = /** @class */ (function () {
4979
5061
  // Initializes the Rive object either from constructor or load()
4980
5062
  Rive.prototype.init = function (_a) {
4981
5063
  var _this = this;
4982
- var src = _a.src, buffer = _a.buffer, riveFile = _a.riveFile, animations = _a.animations, stateMachines = _a.stateMachines, artboard = _a.artboard, _b = _a.autoplay, autoplay = _b === void 0 ? false : _b, _c = _a.useOffscreenRenderer, useOffscreenRenderer = _c === void 0 ? false : _c, _d = _a.autoBind, autoBind = _d === void 0 ? false : _d;
5064
+ var src = _a.src, buffer = _a.buffer, riveFile = _a.riveFile, animations = _a.animations, stateMachines = _a.stateMachines, artboard = _a.artboard, _b = _a.autoplay, autoplay = _b === void 0 ? false : _b, _c = _a.useOffscreenRenderer, useOffscreenRenderer = _c === void 0 ? false : _c, _d = _a.autoBind, autoBind = _d === void 0 ? false : _d, tabIndex = _a.tabIndex;
4983
5065
  if (this.destroyed) {
4984
5066
  return;
4985
5067
  }
4986
5068
  this.src = src;
4987
5069
  this.buffer = buffer;
4988
5070
  this.riveFile = riveFile;
5071
+ this._tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : null;
4989
5072
  // If no source file url specified, it's a bust
4990
5073
  if (!this.src && !this.buffer && !this.riveFile) {
4991
5074
  throw new RiveError(Rive.missingErrorMessage);
@@ -5056,9 +5139,14 @@ var Rive = /** @class */ (function () {
5056
5139
  if (this.eventCleanup) {
5057
5140
  this.eventCleanup();
5058
5141
  }
5142
+ if (this.keyboardEventCleanup) {
5143
+ this.keyboardEventCleanup();
5144
+ this.keyboardEventCleanup = null;
5145
+ }
5059
5146
  if (!this.shouldDisableRiveListeners) {
5060
- var activeStateMachines = (this.animator.stateMachines || [])
5061
- .filter(function (sm) { return sm.playing && _this.runtime.hasListeners(sm.instance); })
5147
+ var playingStateMachines = this.animator.stateMachines.filter(function (sm) { return sm.playing; });
5148
+ var activeStateMachines = playingStateMachines
5149
+ .filter(function (sm) { return _this.runtime.hasListeners(sm.instance); })
5062
5150
  .map(function (sm) { return sm.instance; });
5063
5151
  var touchScrollEnabledOption = this.isTouchScrollEnabled;
5064
5152
  var dispatchPointerExit = this.dispatchPointerExit;
@@ -5080,6 +5168,27 @@ var Rive = /** @class */ (function () {
5080
5168
  enableMultiTouch: enableMultiTouch,
5081
5169
  layoutScaleFactor: this._layout.layoutScaleFactor,
5082
5170
  });
5171
+ // Wire up keyboard interactions for state machines that have focus nodes.
5172
+ // hasFocusNodes — unified focus tree check, gates tab traversal
5173
+ var smWithFocusNodes = playingStateMachines
5174
+ .filter(function (sm) { return sm.instance.hasFocusNodes(); })
5175
+ .map(function (sm) { return sm.instance; });
5176
+ if (smWithFocusNodes.length) {
5177
+ // Set the canvas as a tabbable element if there are any focus nodes.
5178
+ // Prefer the tabIndex param set by the user, otherwise use 0.
5179
+ // But do not override any explicit tabIndex already set on the canvas, if any.
5180
+ var currentCanvasTabIndex = this.canvas.tabIndex;
5181
+ // By default, canvas elements have a tabIndex of -1
5182
+ if (currentCanvasTabIndex === -1 || isNaN(currentCanvasTabIndex)) {
5183
+ this.canvas.tabIndex = (this._tabIndex !== null ? this._tabIndex : 0);
5184
+ }
5185
+ this.keyboardEventCleanup = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.registerKeyboardInteractions)({
5186
+ canvas: this.canvas,
5187
+ stateMachine: smWithFocusNodes[0], // work off assumption of single state machine
5188
+ rive: this.runtime,
5189
+ hasFocusNodes: smWithFocusNodes.length > 0,
5190
+ });
5191
+ }
5083
5192
  }
5084
5193
  };
5085
5194
  /**
@@ -5090,6 +5199,10 @@ var Rive = /** @class */ (function () {
5090
5199
  this.eventCleanup();
5091
5200
  this.eventCleanup = null;
5092
5201
  }
5202
+ if (this.keyboardEventCleanup) {
5203
+ this.keyboardEventCleanup();
5204
+ this.keyboardEventCleanup = null;
5205
+ }
5093
5206
  };
5094
5207
  /**
5095
5208
  * If the instance has audio and the system audio is not ready
@@ -5489,6 +5602,10 @@ var Rive = /** @class */ (function () {
5489
5602
  audioManager.remove(this._audioEventListener);
5490
5603
  this._audioEventListener = null;
5491
5604
  }
5605
+ if (this._pageVisibilityHandler) {
5606
+ document.removeEventListener('visibilitychange', this._pageVisibilityHandler);
5607
+ this._pageVisibilityHandler = null;
5608
+ }
5492
5609
  (_b = this._viewModelInstance) === null || _b === void 0 ? void 0 : _b.cleanup();
5493
5610
  this._viewModelInstance = null;
5494
5611
  this._dataEnums = null;
@@ -5513,6 +5630,10 @@ var Rive = /** @class */ (function () {
5513
5630
  if (this.eventCleanup !== null) {
5514
5631
  this.eventCleanup();
5515
5632
  }
5633
+ if (this.keyboardEventCleanup) {
5634
+ this.keyboardEventCleanup();
5635
+ this.keyboardEventCleanup = null;
5636
+ }
5516
5637
  // Delete all animation and state machine instances
5517
5638
  this.stop();
5518
5639
  if (this.artboard) {
@@ -5581,6 +5702,10 @@ var Rive = /** @class */ (function () {
5581
5702
  if (this.eventCleanup) {
5582
5703
  this.eventCleanup();
5583
5704
  }
5705
+ if (this.keyboardEventCleanup) {
5706
+ this.keyboardEventCleanup();
5707
+ this.keyboardEventCleanup = null;
5708
+ }
5584
5709
  this.setupRiveListeners();
5585
5710
  this.startRendering();
5586
5711
  };
@@ -5598,6 +5723,10 @@ var Rive = /** @class */ (function () {
5598
5723
  if (this.eventCleanup) {
5599
5724
  this.eventCleanup();
5600
5725
  }
5726
+ if (this.keyboardEventCleanup) {
5727
+ this.keyboardEventCleanup();
5728
+ this.keyboardEventCleanup = null;
5729
+ }
5601
5730
  this.animator.pause(animationNames);
5602
5731
  };
5603
5732
  Rive.prototype.scrub = function (animationNames, value) {
@@ -5633,6 +5762,10 @@ var Rive = /** @class */ (function () {
5633
5762
  if (this.eventCleanup) {
5634
5763
  this.eventCleanup();
5635
5764
  }
5765
+ if (this.keyboardEventCleanup) {
5766
+ this.keyboardEventCleanup();
5767
+ this.keyboardEventCleanup = null;
5768
+ }
5636
5769
  };
5637
5770
  /**
5638
5771
  * Resets the animation
@@ -6092,6 +6225,7 @@ var Rive = /** @class */ (function () {
6092
6225
  * they would have been at if rendering had not been stopped.
6093
6226
  */
6094
6227
  Rive.prototype.stopRendering = function () {
6228
+ this._explicitlyStoppedRendering = true;
6095
6229
  if (this.loaded && this.frameRequestId) {
6096
6230
  if (this.runtime.cancelAnimationFrame) {
6097
6231
  this.runtime.cancelAnimationFrame(this.frameRequestId);
@@ -6107,6 +6241,7 @@ var Rive = /** @class */ (function () {
6107
6241
  * renderer is already active, then this will have zero effect.
6108
6242
  */
6109
6243
  Rive.prototype.startRendering = function () {
6244
+ this._explicitlyStoppedRendering = false;
6110
6245
  this.drawFrame();
6111
6246
  };
6112
6247
  Rive.prototype.scheduleRendering = function () {
@@ -6119,6 +6254,31 @@ var Rive = /** @class */ (function () {
6119
6254
  }
6120
6255
  }
6121
6256
  };
6257
+ /**
6258
+ * Called when document.visibilitychange fires (tab change, window minimize, etc.).
6259
+ * Cancels the rAF loop on hide and resets the time reference so that no accumulated time is
6260
+ * applied to state machines when the tab becomes visible again. This prevents state machine
6261
+ * advances with large time deltas when rAF starts up again.
6262
+ */
6263
+ Rive.prototype._onPageVisibilityChange = function () {
6264
+ var _a, _b;
6265
+ if (document.hidden) {
6266
+ if (this.frameRequestId !== null) {
6267
+ if ((_a = this.runtime) === null || _a === void 0 ? void 0 : _a.cancelAnimationFrame) {
6268
+ this.runtime.cancelAnimationFrame(this.frameRequestId);
6269
+ }
6270
+ else {
6271
+ cancelAnimationFrame(this.frameRequestId);
6272
+ }
6273
+ this.frameRequestId = null;
6274
+ }
6275
+ // Reset so the first resumed frame starts with elapsedTime === 0.
6276
+ this.lastRenderTime = 0;
6277
+ }
6278
+ else if (((_b = this.animator) === null || _b === void 0 ? void 0 : _b.isPlaying) && !this._explicitlyStoppedRendering) {
6279
+ this.scheduleRendering();
6280
+ }
6281
+ };
6122
6282
  /**
6123
6283
  * Enables frames-per-second (FPS) reporting for the runtime
6124
6284
  * If no callback is provided, Rive will append a fixed-position div at the top-right corner of