@rive-app/canvas-lite 2.15.6 → 2.16.0

package/package.json

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

package/rive.d.ts

@@ -123,7 +123,7 @@ export declare enum EventType {
 export type RiveEventPayload = rc.RiveEvent | rc.OpenUrlEvent;
 export interface Event {
     type: EventType;
-    data?: string | string[] | LoopEvent | number | RiveEventPayload;
+    data?: string | string[] | LoopEvent | number | RiveEventPayload | RiveFile;
 }
 /**
  * Looping types: one-shot, loop, and ping-pong
@@ -189,6 +189,7 @@ export interface RiveParameters {
     canvas: HTMLCanvasElement | OffscreenCanvas;
     src?: string;
     buffer?: ArrayBuffer;
+    riveFile?: RiveFile;
     artboard?: string;
     animations?: string | string[];
     stateMachines?: string | string[];
@@ -265,6 +266,7 @@ export interface RiveParameters {
 export interface RiveLoadParameters {
     src?: string;
     buffer?: ArrayBuffer;
+    riveFile?: RiveFile;
     autoplay?: boolean;
     artboard?: string;
     animations?: string | string[];
@@ -278,6 +280,50 @@ export interface RiveResetParameters {
     stateMachines?: string | string[];
     autoplay?: boolean;
 }
+export interface RiveFileParameters {
+    src?: string;
+    buffer?: ArrayBuffer;
+    assetLoader?: AssetLoadCallback;
+    enableRiveAssetCDN?: boolean;
+    onLoad?: EventCallback;
+    onLoadError?: EventCallback;
+}
+export declare class RiveFile {
+    private static readonly missingErrorMessage;
+    private static readonly fileLoadErrorMessage;
+    private src;
+    private buffer;
+    private runtime;
+    private file;
+    private assetLoader;
+    private enableRiveAssetCDN;
+    private eventManager;
+    private referenceCount;
+    constructor(params: RiveFileParameters);
+    private initData;
+    init(): Promise<void>;
+    /**
+     * 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;
+    cleanup(): 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;
+    getInstance(): rc.File;
+}
 export declare class Rive {
     private readonly canvas;
     private src;
@@ -298,6 +344,7 @@ export declare class Rive {
     private artboard;
     private eventCleanup;
     private file;
+    private riveFile;
     private eventManager;
     private taskQueue;
     private animator;

package/rive.js

@@ -2030,7 +2030,7 @@ var Mc = {_embind_create_inheriting_constructor:function(b, a, c) {
   Ib(b, {cb:!0, name:a, argPackAdvance:0, fromWireType:function() {
   }, toWireType:function() {
   },});
-}, _emval_as:function(b, a, c) {
+}, _emscripten_get_now_is_monotonic:() => !0, _emval_as:function(b, a, c) {
   b = S(b);
   a = nb(a, "emval::as");
   var d = [], e = ab(d);
@@ -2099,7 +2099,9 @@ var Mc = {_embind_create_inheriting_constructor:function(b, a, c) {
   return ab(b);
 }, abort:() => {
   ya("");
-}, emscripten_memcpy_big:(b, a, c) => L.copyWithin(b, a, a + c), emscripten_resize_heap:b => {
+}, emscripten_date_now:function() {
+  return Date.now();
+}, emscripten_get_now:() => performance.now(), emscripten_memcpy_big:(b, a, c) => L.copyWithin(b, a, a + c), emscripten_resize_heap:b => {
   var a = L.length;
   b >>>= 0;
   if (2147483648 < b) {
@@ -2257,7 +2259,7 @@ Pc();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.15.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 = JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.16.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 */
@@ -2551,6 +2553,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   LoopType: () => (/* binding */ LoopType),
 /* harmony export */   Rive: () => (/* binding */ Rive),
 /* harmony export */   RiveEventType: () => (/* binding */ RiveEventType),
+/* harmony export */   RiveFile: () => (/* binding */ RiveFile),
 /* harmony export */   RuntimeLoader: () => (/* binding */ RuntimeLoader),
 /* harmony export */   StateMachineInput: () => (/* binding */ StateMachineInput),
 /* harmony export */   StateMachineInputType: () => (/* binding */ StateMachineInputType),
@@ -3736,6 +3739,142 @@ var ObjectObservers = /** @class */ (function () {
     return ObjectObservers;
 }());
 var observers = new ObjectObservers();
+var RiveFile = /** @class */ (function () {
+    function RiveFile(params) {
+        // Allow the runtime to automatically load assets hosted in Rive's runtime.
+        this.enableRiveAssetCDN = true;
+        this.referenceCount = 0;
+        this.src = params.src;
+        this.buffer = params.buffer;
+        if (params.assetLoader)
+            this.assetLoader = params.assetLoader;
+        this.enableRiveAssetCDN =
+            typeof params.enableRiveAssetCDN == "boolean"
+                ? params.enableRiveAssetCDN
+                : true;
+        // New event management system
+        this.eventManager = new EventManager();
+        if (params.onLoad)
+            this.on(EventType.Load, params.onLoad);
+        if (params.onLoadError)
+            this.on(EventType.LoadError, params.onLoadError);
+    }
+    RiveFile.prototype.initData = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, loader, _b;
+            return __generator(this, function (_c) {
+                switch (_c.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;
+                    case 2:
+                        if (this.assetLoader) {
+                            loader = new this.runtime.CustomFileAssetLoader({
+                                loadContents: this.assetLoader,
+                            });
+                        }
+                        // Load the Rive file
+                        _b = this;
+                        return [4 /*yield*/, this.runtime.load(new Uint8Array(this.buffer), loader, this.enableRiveAssetCDN)];
+                    case 3:
+                        // Load the Rive file
+                        _b.file = _c.sent();
+                        if (this.file !== null) {
+                            this.eventManager.fire({
+                                type: EventType.Load,
+                                data: this,
+                            });
+                        }
+                        else {
+                            this.eventManager.fire({
+                                type: EventType.LoadError,
+                                data: null,
+                            });
+                            throw new Error(RiveFile.fileLoadErrorMessage);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    RiveFile.prototype.init = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        // If no source file url specified, it's a bust
+                        if (!this.src && !this.buffer) {
+                            throw new Error(RiveFile.missingErrorMessage);
+                        }
+                        _a = this;
+                        return [4 /*yield*/, RuntimeLoader.awaitInstance()];
+                    case 1:
+                        _a.runtime = _b.sent();
+                        return [4 /*yield*/, this.initData()];
+                    case 2:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Subscribe to Rive-generated events
+     * @param type the type of event to subscribe to
+     * @param callback callback to fire when the event occurs
+     */
+    RiveFile.prototype.on = function (type, callback) {
+        this.eventManager.add({
+            type: type,
+            callback: callback,
+        });
+    };
+    /**
+     * Unsubscribes from a Rive-generated event
+     * @param type the type of event to unsubscribe from
+     * @param callback the callback to unsubscribe
+     */
+    RiveFile.prototype.off = function (type, callback) {
+        this.eventManager.remove({
+            type: type,
+            callback: callback,
+        });
+    };
+    RiveFile.prototype.cleanup = function () {
+        var _a;
+        this.referenceCount -= 1;
+        if (this.referenceCount <= 0) {
+            this.removeAllRiveEventListeners();
+            (_a = this.file) === null || _a === void 0 ? void 0 : _a.delete();
+        }
+    };
+    /**
+     * 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
+     */
+    RiveFile.prototype.removeAllRiveEventListeners = function (type) {
+        this.eventManager.removeAll(type);
+    };
+    RiveFile.prototype.getInstance = function () {
+        if (this.file !== null) {
+            this.referenceCount += 1;
+            return this.file;
+        }
+    };
+    // Error message for missing source or buffer
+    RiveFile.missingErrorMessage = "Rive source file or data buffer required";
+    // Error message for file load error
+    RiveFile.fileLoadErrorMessage = "The file failed to load";
+    return RiveFile;
+}());
+
 var Rive = /** @class */ (function () {
     function Rive(params) {
         var _this = this;
@@ -3784,6 +3923,7 @@ var Rive = /** @class */ (function () {
         }
         this.src = params.src;
         this.buffer = params.buffer;
+        this.riveFile = params.riveFile;
         this.layout = (_a = params.layout) !== null && _a !== void 0 ? _a : new Layout();
         this.shouldDisableRiveListeners = !!params.shouldDisableRiveListeners;
         this.isTouchScrollEnabled = !!params.isTouchScrollEnabled;
@@ -3837,6 +3977,7 @@ var Rive = /** @class */ (function () {
         this.init({
             src: this.src,
             buffer: this.buffer,
+            riveFile: this.riveFile,
             autoplay: params.autoplay,
             animations: params.animations,
             stateMachines: params.stateMachines,
@@ -3856,11 +3997,12 @@ var Rive = /** @class */ (function () {
     // Initializes the Rive object either from constructor or load()
     Rive.prototype.init = function (_a) {
         var _this = this;
-        var src = _a.src, buffer = _a.buffer, 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;
+        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;
         this.src = src;
         this.buffer = buffer;
+        this.riveFile = riveFile;
         // If no source file url specified, it's a bust
-        if (!this.src && !this.buffer) {
+        if (!this.src && !this.buffer && !this.riveFile) {
             throw new Error(Rive.missingErrorMessage);
         }
         // List of animations that should be initialized.
@@ -3951,59 +4093,56 @@ var Rive = /** @class */ (function () {
     Rive.prototype.initData = function (artboardName, animationNames, stateMachineNames, autoplay) {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var _b, loader, _c, msg;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+            var error_1, msg;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        if (!this.src) return [3 /*break*/, 2];
-                        _b = this;
-                        return [4 /*yield*/, loadRiveFile(this.src)];
+                        _b.trys.push([0, 3, , 4]);
+                        if (!(this.riveFile == null)) return [3 /*break*/, 2];
+                        this.riveFile = new RiveFile({
+                            src: this.src,
+                            buffer: this.buffer,
+                            enableRiveAssetCDN: this.enableRiveAssetCDN,
+                            assetLoader: this.assetLoader,
+                        });
+                        return [4 /*yield*/, this.riveFile.init()];
                     case 1:
-                        _b.buffer = _d.sent();
-                        _d.label = 2;
+                        _b.sent();
+                        _b.label = 2;
                     case 2:
-                        if (this.assetLoader) {
-                            loader = new this.runtime.CustomFileAssetLoader({
-                                loadContents: this.assetLoader,
-                            });
-                        }
-                        // Load the Rive file
-                        _c = this;
-                        return [4 /*yield*/, this.runtime.load(new Uint8Array(this.buffer), loader, this.enableRiveAssetCDN)];
+                        this.file = this.riveFile.getInstance();
+                        // Initialize and draw frame
+                        this.initArtboard(artboardName, animationNames, stateMachineNames, autoplay);
+                        // Check for audio
+                        this.initializeAudio();
+                        // Everything's set up, emit a load event
+                        this.loaded = true;
+                        this.eventManager.fire({
+                            type: EventType.Load,
+                            data: (_a = this.src) !== null && _a !== void 0 ? _a : "buffer",
+                        });
+                        // Flag ready for playback commands and clear the task queue; this order
+                        // is important or it may infinitely recurse
+                        this.readyForPlaying = true;
+                        this.taskQueue.process();
+                        this.drawFrame();
+                        return [2 /*return*/, Promise.resolve()];
                     case 3:
-                        // Load the Rive file
-                        _c.file = _d.sent();
-                        if (this.file) {
-                            // Initialize and draw frame
-                            this.initArtboard(artboardName, animationNames, stateMachineNames, autoplay);
-                            // Check for audio
-                            this.initializeAudio();
-                            // Everything's set up, emit a load event
-                            this.loaded = true;
-                            this.eventManager.fire({
-                                type: EventType.Load,
-                                data: (_a = this.src) !== null && _a !== void 0 ? _a : "buffer",
-                            });
-                            // Flag ready for playback commands and clear the task queue; this order
-                            // is important or it may infinitely recurse
-                            this.readyForPlaying = true;
-                            this.taskQueue.process();
-                            this.drawFrame();
-                            return [2 /*return*/, Promise.resolve()];
-                        }
-                        else {
-                            msg = "Problem loading file; may be corrupt!";
-                            console.warn(msg);
-                            this.eventManager.fire({ type: EventType.LoadError, data: msg });
-                            return [2 /*return*/, Promise.reject(msg)];
-                        }
-                        return [2 /*return*/];
+                        error_1 = _b.sent();
+                        msg = "Problem loading file; may be corrupt!";
+                        console.warn(msg);
+                        this.eventManager.fire({ type: EventType.LoadError, data: msg });
+                        return [2 /*return*/, Promise.reject(msg)];
+                    case 4: return [2 /*return*/];
                 }
             });
         });
     };
     // Initialize for playback
     Rive.prototype.initArtboard = function (artboardName, animationNames, stateMachineNames, autoplay) {
+        if (!this.file) {
+            return;
+        }
         // Fetch the artboard
         var rootArtboard = artboardName
             ? this.file.artboardByName(artboardName)
@@ -4223,8 +4362,8 @@ var Rive = /** @class */ (function () {
         if (this._observed !== null) {
             observers.remove(this._observed);
         }
-        // Delete the rive file
-        (_a = this.file) === null || _a === void 0 ? void 0 : _a.delete();
+        (_a = this.riveFile) === null || _a === void 0 ? void 0 : _a.cleanup();
+        this.riveFile = null;
         this.file = null;
     };
     /**
@@ -4388,6 +4527,7 @@ var Rive = /** @class */ (function () {
     };
     // Loads a new Rive file, keeping listeners in place
     Rive.prototype.load = function (params) {
+        this.file = null;
         // Stop all animations
         this.stop();
         // Reinitialize
@@ -4466,7 +4606,7 @@ var Rive = /** @class */ (function () {
         // Returns a list of animation names on the chosen artboard
         get: function () {
             // If the file's not loaded, we got nothing to return
-            if (!this.loaded) {
+            if (!this.loaded || !this.artboard) {
                 return [];
             }
             var animationNames = [];
@@ -4484,7 +4624,7 @@ var Rive = /** @class */ (function () {
          */
         get: function () {
             // If the file's not loaded, we got nothing to return
-            if (!this.loaded) {
+            if (!this.loaded || !this.artboard) {
                 return [];
             }
             var stateMachineNames = [];