@rive-app/canvas 2.25.7 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas",
-  "version": "2.25.7",
+  "version": "2.26.0",
   "description": "Rive's canvas based web api.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -307,6 +307,7 @@ export declare class RiveFile {
     private enableRiveAssetCDN;
     private eventManager;
     private referenceCount;
+    private destroyed;
     constructor(params: RiveFileParameters);
     private initData;
     init(): Promise<void>;
@@ -358,6 +359,7 @@ export declare class Rive {
     private animator;
     private assetLoader;
     private static readonly missingErrorMessage;
+    private static readonly cleanupErrorMessage;
     private shouldDisableRiveListeners;
     private automaticallyHandleEvents;
     private enableRiveAssetCDN;
@@ -367,6 +369,7 @@ export declare class Rive {
     private _devicePixelRatioUsed;
     private _hasZeroSize;
     private _audioEventListener;
+    private _boundDraw;
     durations: number[];
     frameTimes: number[];
     frameCount: number;

package/rive.js

@@ -746,7 +746,7 @@ function Ya(a, b) {
     return Xa(c, a, b);
   }));
 }
-var Za, $a, db = {446236:(a, b, c, d, e) => {
+var Za, $a, db = {447260:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -809,9 +809,9 @@ var Za, $a, db = {446236:(a, b, c, d, e) => {
   }
   window.h.Aa += 1;
   return 1;
-}, 448414:() => {
+}, 449438:() => {
   "undefined" !== typeof window.h && (--window.h.Aa, 0 === window.h.Aa && delete window.h);
-}, 448578:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 448682:() => {
+}, 449602:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 449706:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -819,7 +819,7 @@ var Za, $a, db = {446236:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 448853:(a, b, c, d, e, f) => {
+}, 449877:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -865,7 +865,7 @@ var Za, $a, db = {446236:(a, b, c, d, e) => {
   a == window.h.I.ya && g.Z.connect(g.J.destination);
   g.pb = f;
   return window.h.yc(g);
-}, 451730:a => window.h.ra(a).J.sampleRate, 451803:a => {
+}, 452754:a => window.h.ra(a).J.sampleRate, 452827:a => {
   a = window.h.ra(a);
   void 0 !== a.Z && (a.Z.onaudioprocess = function() {
   }, a.Z.disconnect(), a.Z = void 0);
@@ -873,13 +873,13 @@ var Za, $a, db = {446236:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.pb = void 0;
-}, 452203:a => {
+}, 453227:a => {
   window.h.Cb(a);
-}, 452253:a => {
+}, 453277:a => {
   a = window.h.ra(a);
   a.J.resume();
   a.state = window.h.ga.xb;
-}, 452392:a => {
+}, 453416:a => {
   a = window.h.ra(a);
   a.J.suspend();
   a.state = window.h.ga.stopped;
@@ -3365,7 +3365,7 @@ $d();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.25.7","description":"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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.26.0","description":"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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -3898,6 +3898,21 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
 
 
 
+var RiveError = /** @class */ (function (_super) {
+    __extends(RiveError, _super);
+    function RiveError() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.isHandledError = true;
+        return _this;
+    }
+    return RiveError;
+}(Error));
+// #regions helpers
+var resolveErrorMessage = function (error) {
+    return error && error.isHandledError
+        ? error.message
+        : "Problem loading file; may be corrupt!";
+};
 // #region layout
 // Fit options for the canvas
 var Fit;
@@ -4984,6 +4999,7 @@ var RiveFile = /** @class */ (function () {
         // Allow the runtime to automatically load assets hosted in Rive's runtime.
         this.enableRiveAssetCDN = true;
         this.referenceCount = 0;
+        this.destroyed = false;
         this.src = params.src;
         this.buffer = params.buffer;
         if (params.assetLoader)
@@ -5002,16 +5018,20 @@ var RiveFile = /** @class */ (function () {
     RiveFile.prototype.initData = function () {
         return __awaiter(this, void 0, void 0, function () {
             var _a, loader, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         if (!this.src) return [3 /*break*/, 2];
                         _a = this;
                         return [4 /*yield*/, loadRiveFile(this.src)];
                     case 1:
-                        _a.buffer = _c.sent();
-                        _c.label = 2;
+                        _a.buffer = _d.sent();
+                        _d.label = 2;
                     case 2:
+                        if (this.destroyed) {
+                            return [2 /*return*/];
+                        }
                         if (this.assetLoader) {
                             loader = new this.runtime.CustomFileAssetLoader({
                                 loadContents: this.assetLoader,
@@ -5022,7 +5042,12 @@ var RiveFile = /** @class */ (function () {
                         return [4 /*yield*/, this.runtime.load(new Uint8Array(this.buffer), loader, this.enableRiveAssetCDN)];
                     case 3:
                         // Load the Rive file
-                        _b.file = _c.sent();
+                        _b.file = _d.sent();
+                        if (this.destroyed) {
+                            (_c = this.file) === null || _c === void 0 ? void 0 : _c.delete();
+                            this.file = null;
+                            return [2 /*return*/];
+                        }
                         if (this.file !== null) {
                             this.eventManager.fire({
                                 type: EventType.Load,
@@ -5055,6 +5080,9 @@ var RiveFile = /** @class */ (function () {
                         return [4 /*yield*/, RuntimeLoader.awaitInstance()];
                     case 1:
                         _a.runtime = _b.sent();
+                        if (this.destroyed) {
+                            return [2 /*return*/];
+                        }
                         return [4 /*yield*/, this.initData()];
                     case 2:
                         _b.sent();
@@ -5091,6 +5119,8 @@ var RiveFile = /** @class */ (function () {
         if (this.referenceCount <= 0) {
             this.removeAllRiveEventListeners();
             (_a = this.file) === null || _a === void 0 ? void 0 : _a.delete();
+            this.file = null;
+            this.destroyed = true;
         }
     };
     /**
@@ -5151,14 +5181,22 @@ var Rive = /** @class */ (function () {
         this._hasZeroSize = false;
         // Audio event listener
         this._audioEventListener = null;
+        // draw method bound to the class
+        this._boundDraw = null;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
         this.frameCount = 0;
         this.isTouchScrollEnabled = false;
         this.onCanvasResize = function (hasZeroSize) {
+            var toggledDisplay = _this._hasZeroSize !== hasZeroSize;
             _this._hasZeroSize = hasZeroSize;
-            if (!_this._layout.maxX || !_this._layout.maxY) {
+            if (!hasZeroSize) {
+                if (toggledDisplay) {
+                    _this.resizeDrawingSurfaceToCanvas();
+                }
+            }
+            else if (!_this._layout.maxX || !_this._layout.maxY) {
                 _this.resizeToCanvas();
             }
         };
@@ -5167,6 +5205,7 @@ var Rive = /** @class */ (function () {
          * Used for debugging purposes
          */
         this.renderSecondTimer = 0;
+        this._boundDraw = this.draw.bind(this);
         this.canvas = params.canvas;
         if (params.canvas.constructor === HTMLCanvasElement) {
             this._observed = observers.add(this.canvas, this.onCanvasResize);
@@ -5377,6 +5416,10 @@ var Rive = /** @class */ (function () {
                         _b.sent();
                         _b.label = 2;
                     case 2:
+                        // Check for riveFile in case it has been cleaned up while initializing;
+                        if (!this.riveFile) {
+                            throw new RiveError(Rive.cleanupErrorMessage);
+                        }
                         this.file = this.riveFile.getInstance();
                         // Initialize and draw frame
                         this.initArtboard(artboardName, animationNames, stateMachineNames, autoplay);
@@ -5398,7 +5441,7 @@ var Rive = /** @class */ (function () {
                         return [2 /*return*/, Promise.resolve()];
                     case 3:
                         error_1 = _b.sent();
-                        msg = "Problem loading file; may be corrupt!";
+                        msg = resolveErrorMessage(error_1);
                         console.warn(msg);
                         this.eventManager.fire({ type: EventType.LoadError, data: msg });
                         return [2 /*return*/, Promise.reject(msg)];
@@ -5456,7 +5499,15 @@ var Rive = /** @class */ (function () {
     };
     // Draws the current artboard frame
     Rive.prototype.drawFrame = function () {
-        this.startRendering();
+        var _a;
+        if ((_a = document === null || document === void 0 ? void 0 : document.timeline) === null || _a === void 0 ? void 0 : _a.currentTime) {
+            if (this.loaded && this.artboard && !this.frameRequestId) {
+                this._boundDraw(document.timeline.currentTime);
+            }
+        }
+        else {
+            this.startRendering();
+        }
     };
     /**
      * Draw rendering loop; renders animation frames at the correct time interval.
@@ -5866,8 +5917,8 @@ var Rive = /** @class */ (function () {
             this.devicePixelRatioUsed = dpr;
             this.canvas.width = dpr * width;
             this.canvas.height = dpr * height;
-            this.startRendering();
             this.resizeToCanvas();
+            this.drawFrame();
             if (this.layout.fit === Fit.Layout) {
                 var scaleFactor = this._layout.layoutScaleFactor;
                 this.artboard.width = width / scaleFactor;
@@ -6256,10 +6307,10 @@ var Rive = /** @class */ (function () {
     Rive.prototype.startRendering = function () {
         if (this.loaded && this.artboard && !this.frameRequestId) {
             if (this.runtime.requestAnimationFrame) {
-                this.frameRequestId = this.runtime.requestAnimationFrame(this.draw.bind(this));
+                this.frameRequestId = this.runtime.requestAnimationFrame(this._boundDraw);
             }
             else {
-                this.frameRequestId = requestAnimationFrame(this.draw.bind(this));
+                this.frameRequestId = requestAnimationFrame(this._boundDraw);
             }
         }
     };
@@ -6427,6 +6478,8 @@ var Rive = /** @class */ (function () {
     });
     // Error message for missing source or buffer
     Rive.missingErrorMessage = "Rive source file or data buffer required";
+    // Error message for removed rive file
+    Rive.cleanupErrorMessage = "Attempt to use file after calling cleanup.";
     return Rive;
 }());