@rive-app/canvas-lite 2.25.6 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.25.6",
+  "version": "2.26.0",
   "description": "A lite version of 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

@@ -2269,7 +2269,7 @@ Qc();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.25.6","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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.26.0","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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -2802,6 +2802,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;
@@ -3888,6 +3903,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)
@@ -3906,16 +3922,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,
@@ -3926,7 +3946,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,
@@ -3959,6 +3984,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();
@@ -3995,6 +4023,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;
         }
     };
     /**
@@ -4055,14 +4085,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();
             }
         };
@@ -4071,6 +4109,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);
@@ -4281,6 +4320,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);
@@ -4302,7 +4345,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)];
@@ -4360,7 +4403,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.
@@ -4770,8 +4821,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;
@@ -5160,10 +5211,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);
             }
         }
     };
@@ -5331,6 +5382,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;
 }());