@rive-app/webgl 2.15.6 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl",
-  "version": "2.15.6",
+  "version": "2.17.0",
   "description": "Rive's webgl 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;
@@ -448,6 +495,27 @@ export declare class Rive {
      * @returns the inputs for the named state machine
      */
     stateMachineInputs(name: string): StateMachineInput[];
+    private retrieveInputAtPath;
+    /**
+     * Set the boolean input with the provided name at the given path with value
+     * @param input the state machine input name
+     * @param value the value to set the input to
+     * @param path the path the input is located at an artboard level
+     */
+    setBooleanStateAtPath(inputName: string, value: boolean, path: string): void;
+    /**
+     * Set the number input with the provided name at the given path with value
+     * @param input the state machine input name
+     * @param value the value to set the input to
+     * @param path the path the input is located at an artboard level
+     */
+    setNumberStateAtPath(inputName: string, value: number, path: string): void;
+    /**
+     * Fire the trigger with the provided name at the given path
+     * @param input the state machine input name
+     * @param path the path the input is located at an artboard level
+     */
+    fireStateAtPath(inputName: string, path: string): void;
     get playingStateMachineNames(): string[];
     get playingAnimationNames(): string[];
     get pausedAnimationNames(): string[];

package/rive.js

@@ -400,7 +400,7 @@ function Qa(a, b) {
     return Pa(c, a, b);
   }));
 }
-var Ra, Sa, Wa = {685180:(a, b, c, d, e) => {
+var Ra, Sa, Wa = {685308:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -463,9 +463,9 @@ var Ra, Sa, Wa = {685180:(a, b, c, d, e) => {
   }
   window.h.Ea += 1;
   return 1;
-}, 687358:() => {
+}, 687486:() => {
   "undefined" !== typeof window.h && (--window.h.Ea, 0 === window.h.Ea && delete window.h);
-}, 687522:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 687626:() => {
+}, 687650:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 687754:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -473,7 +473,7 @@ var Ra, Sa, Wa = {685180:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 687797:(a, b, c, d, e, f) => {
+}, 687925:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -519,7 +519,7 @@ var Ra, Sa, Wa = {685180:(a, b, c, d, e) => {
   a == window.h.H.Ca && g.X.connect(g.I.destination);
   g.lb = f;
   return window.h.nc(g);
-}, 690674:a => window.h.ta(a).I.sampleRate, 690747:a => {
+}, 690802:a => window.h.ta(a).I.sampleRate, 690875:a => {
   a = window.h.ta(a);
   void 0 !== a.X && (a.X.onaudioprocess = function() {
   }, a.X.disconnect(), a.X = void 0);
@@ -527,13 +527,13 @@ var Ra, Sa, Wa = {685180:(a, b, c, d, e) => {
   a.I.close();
   a.I = void 0;
   a.lb = void 0;
-}, 691147:a => {
+}, 691275:a => {
   window.h.xb(a);
-}, 691197:a => {
+}, 691325:a => {
   a = window.h.ta(a);
   a.I.resume();
   a.state = window.h.ha.sb;
-}, 691336:a => {
+}, 691464:a => {
   a = window.h.ta(a);
   a.I.suspend();
   a.state = window.h.ha.stopped;
@@ -4053,7 +4053,7 @@ Ie();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl","version":"2.15.6","description":"Rive\'s webgl 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.wasm","rive_fallback.wasm","rive.js.map","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/webgl","version":"2.17.0","description":"Rive\'s webgl 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.wasm","rive_fallback.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -4347,6 +4347,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),
@@ -5532,6 +5533,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;
@@ -5580,6 +5717,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;
@@ -5633,6 +5771,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,
@@ -5652,11 +5791,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.
@@ -5747,59 +5887,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)
@@ -6019,8 +6156,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;
     };
     /**
@@ -6184,6 +6321,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
@@ -6262,7 +6400,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 = [];
@@ -6280,7 +6418,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 = [];
@@ -6306,6 +6444,73 @@ var Rive = /** @class */ (function () {
         var stateMachine = this.animator.stateMachines.find(function (m) { return m.name === name; });
         return stateMachine === null || stateMachine === void 0 ? void 0 : stateMachine.inputs;
     };
+    // Returns the input with the provided name at the given path
+    Rive.prototype.retrieveInputAtPath = function (name, path) {
+        if (!name) {
+            console.warn("No input name provided for path '".concat(path, "'"));
+            return;
+        }
+        if (!this.artboard) {
+            console.warn("Tried to access input: '".concat(name, "', at path: '").concat(path, "', but the Artboard is null"));
+            return;
+        }
+        var input = this.artboard.inputByPath(name, path);
+        if (!input) {
+            console.warn("Could not access an input with name: '".concat(name, "', at path:'").concat(path, "'"));
+            return;
+        }
+        return input;
+    };
+    /**
+     * Set the boolean input with the provided name at the given path with value
+     * @param input the state machine input name
+     * @param value the value to set the input to
+     * @param path the path the input is located at an artboard level
+     */
+    Rive.prototype.setBooleanStateAtPath = function (inputName, value, path) {
+        var input = this.retrieveInputAtPath(inputName, path);
+        if (!input)
+            return;
+        if (input.type === StateMachineInputType.Boolean) {
+            input.asBool().value = value;
+        }
+        else {
+            console.warn("Input with name: '".concat(inputName, "', at path:'").concat(path, "' is not a boolean"));
+        }
+    };
+    /**
+     * Set the number input with the provided name at the given path with value
+     * @param input the state machine input name
+     * @param value the value to set the input to
+     * @param path the path the input is located at an artboard level
+     */
+    Rive.prototype.setNumberStateAtPath = function (inputName, value, path) {
+        var input = this.retrieveInputAtPath(inputName, path);
+        if (!input)
+            return;
+        if (input.type === StateMachineInputType.Number) {
+            input.asNumber().value = value;
+        }
+        else {
+            console.warn("Input with name: '".concat(inputName, "', at path:'").concat(path, "' is not a number"));
+        }
+    };
+    /**
+     * Fire the trigger with the provided name at the given path
+     * @param input the state machine input name
+     * @param path the path the input is located at an artboard level
+     */
+    Rive.prototype.fireStateAtPath = function (inputName, path) {
+        var input = this.retrieveInputAtPath(inputName, path);
+        if (!input)
+            return;
+        if (input.type === StateMachineInputType.Trigger) {
+            input.asTrigger().fire();
+        }
+        else {
+            console.warn("Input with name: '".concat(inputName, "', at path:'").concat(path, "' is not a trigger"));
+        }
+    };
     Object.defineProperty(Rive.prototype, "playingStateMachineNames", {
         // Returns a list of playing machine names
         get: function () {