@rive-app/webgl2 2.15.0 → 2.15.2

package/package.json

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

package/rive.d.ts

@@ -285,6 +285,7 @@ export declare class Rive {
     private _layout;
     private renderer;
     private loaded;
+    private _observed;
     /**
      * Tracks if a Rive file is loaded; we need this in addition to loaded as some
      * commands (e.g. contents) can be called as soon as the file is loaded.
@@ -306,6 +307,7 @@ export declare class Rive {
     private automaticallyHandleEvents;
     private enableRiveAssetCDN;
     private _volume;
+    private _hasZeroSize;
     durations: number[];
     frameTimes: number[];
     frameCount: number;
@@ -313,6 +315,7 @@ export declare class Rive {
     constructor(params: RiveParameters);
     static new(params: RiveParameters): Rive;
     private onSystemAudioChanged;
+    private onCanvasResize;
     private init;
     /**
      * Setup Rive Listeners on the canvas
@@ -325,6 +328,11 @@ export declare class Rive {
      * Remove Rive Listeners setup on the canvas
      */
     removeRiveListeners(): void;
+    /**
+     * If the instance has audio and the system audio is not ready
+     * we hook the instance to the audio manager
+     */
+    private initializeAudio;
     private initData;
     private initArtboard;
     drawFrame(): void;

package/rive.js

@@ -415,7 +415,7 @@ function Pa(a, b) {
     return Oa(c, a, b);
   }));
 }
-var J, K, Ta = {474240:(a, b, c, d, e) => {
+var J, K, Ta = {474256:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -478,9 +478,9 @@ var J, K, Ta = {474240:(a, b, c, d, e) => {
   }
   window.h.Da += 1;
   return 1;
-}, 476418:() => {
+}, 476434:() => {
   "undefined" !== typeof window.h && (--window.h.Da, 0 === window.h.Da && delete window.h);
-}, 476582:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 476686:() => {
+}, 476598:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 476702:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -488,7 +488,7 @@ var J, K, Ta = {474240:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 476857:(a, b, c, d, e, f) => {
+}, 476873:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -534,7 +534,7 @@ var J, K, Ta = {474240:(a, b, c, d, e) => {
   a == window.h.I.Ca && g.Z.connect(g.J.destination);
   g.kb = f;
   return window.h.tc(g);
-}, 479734:a => window.h.wa(a).J.sampleRate, 479807:a => {
+}, 479750:a => window.h.wa(a).J.sampleRate, 479823:a => {
   a = window.h.wa(a);
   void 0 !== a.Z && (a.Z.onaudioprocess = function() {
   }, a.Z.disconnect(), a.Z = void 0);
@@ -542,13 +542,13 @@ var J, K, Ta = {474240:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.kb = void 0;
-}, 480207:a => {
+}, 480223:a => {
   window.h.xb(a);
-}, 480257:a => {
+}, 480273:a => {
   a = window.h.wa(a);
   a.J.resume();
   a.state = window.h.ha.sb;
-}, 480396:a => {
+}, 480412:a => {
   a = window.h.wa(a);
   a.J.suspend();
   a.state = window.h.ha.stopped;
@@ -3553,8 +3553,8 @@ n.dynCall_viijii = (a, b, c, d, e, f, g) => (n.dynCall_viijii = y.dynCall_viijii
 n.dynCall_iiiiij = (a, b, c, d, e, f, g) => (n.dynCall_iiiiij = y.dynCall_iiiiij)(a, b, c, d, e, f, g);
 n.dynCall_iiiiijj = (a, b, c, d, e, f, g, m, p) => (n.dynCall_iiiiijj = y.dynCall_iiiiijj)(a, b, c, d, e, f, g, m, p);
 n.dynCall_iiiiiijj = (a, b, c, d, e, f, g, m, p, l) => (n.dynCall_iiiiiijj = y.dynCall_iiiiiijj)(a, b, c, d, e, f, g, m, p, l);
-n.___start_em_js = 471616;
-n.___stop_em_js = 474240;
+n.___start_em_js = 471632;
+n.___stop_em_js = 474256;
 var $d;
 Ia = function ae() {
   $d || be();
@@ -3614,7 +3614,7 @@ be();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl2","version":"2.15.0","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.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/webgl2","version":"2.15.2","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -5037,6 +5037,60 @@ var AudioManager = /** @class */ (function (_super) {
     return AudioManager;
 }(EventManager));
 var audioManager = new AudioManager();
+var FakeResizeObserver = /** @class */ (function () {
+    function FakeResizeObserver() {
+    }
+    FakeResizeObserver.prototype.observe = function () { };
+    FakeResizeObserver.prototype.unobserve = function () { };
+    FakeResizeObserver.prototype.disconnect = function () { };
+    return FakeResizeObserver;
+}());
+var MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
+/**
+ * This class takes care of any observers that will be attached to an animation.
+ * It should be treated as a singleton because observers are much more performant
+ * when used for observing multiple elements by a single instance.
+ */
+var ObjectObservers = /** @class */ (function () {
+    function ObjectObservers() {
+        var _this = this;
+        this._elementsMap = new Map();
+        /**
+         * Resize observers trigger both when the element changes its size and also when the
+         * element is added or removed from the document.
+         */
+        this._onObservedEntry = function (entry) {
+            var observed = _this._elementsMap.get(entry.target);
+            if (observed !== null) {
+                observed.onResize(entry.target.clientWidth == 0 || entry.target.clientHeight == 0);
+            }
+            else {
+                _this._resizeObserver.unobserve(entry.target);
+            }
+        };
+        this._onObserved = function (entries) {
+            entries.forEach(_this._onObservedEntry);
+        };
+        this._resizeObserver = new MyResizeObserver(this._onObserved);
+    }
+    // Adds an observable element
+    ObjectObservers.prototype.add = function (element, onResize) {
+        var observed = {
+            onResize: onResize,
+            element: element,
+        };
+        this._elementsMap.set(element, observed);
+        this._resizeObserver.observe(element);
+        return observed;
+    };
+    // Removes an observable element
+    ObjectObservers.prototype.remove = function (observed) {
+        this._resizeObserver.unobserve(observed.element);
+        this._elementsMap.delete(observed.element);
+    };
+    return ObjectObservers;
+}());
+var observers = new ObjectObservers();
 var Rive = /** @class */ (function () {
     function Rive(params) {
         var _this = this;
@@ -5061,17 +5115,28 @@ var Rive = /** @class */ (function () {
         this.enableRiveAssetCDN = true;
         // Keep a local value of the set volume to update it asynchronously
         this._volume = 1;
+        // Whether the canvas element's size is 0
+        this._hasZeroSize = false;
         // 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) {
+            _this._hasZeroSize = hasZeroSize;
+            if (!_this._layout.maxX || !_this._layout.maxY) {
+                _this.resizeToCanvas();
+            }
+        };
         /**
          * Used be draw to track when a second of active rendering time has passed.
          * Used for debugging purposes
          */
         this.renderSecondTimer = 0;
         this.canvas = params.canvas;
+        if (params.canvas.constructor === HTMLCanvasElement) {
+            this._observed = observers.add(this.canvas, this.onCanvasResize);
+        }
         this.src = params.src;
         this.buffer = params.buffer;
         this.layout = (_a = params.layout) !== null && _a !== void 0 ? _a : new Layout();
@@ -5124,14 +5189,6 @@ var Rive = /** @class */ (function () {
             this.assetLoader = params.assetLoader;
         // Hook up the task queue
         this.taskQueue = new TaskQueueManager(this.eventManager);
-        // Initialize audio
-        if (audioManager.status == SystemAudioStatus.UNAVAILABLE) {
-            audioManager.add({
-                type: EventType.AudioStatusChange,
-                callback: function () { return _this.onSystemAudioChanged(); },
-            });
-            audioManager.establishAudio();
-        }
         this.init({
             src: this.src,
             buffer: this.buffer,
@@ -5227,6 +5284,24 @@ var Rive = /** @class */ (function () {
             this.eventCleanup();
         }
     };
+    /**
+     * If the instance has audio and the system audio is not ready
+     * we hook the instance to the audio manager
+     */
+    Rive.prototype.initializeAudio = function () {
+        var _this = this;
+        var _a;
+        // Initialize audio if needed
+        if (audioManager.status == SystemAudioStatus.UNAVAILABLE) {
+            if ((_a = this.artboard) === null || _a === void 0 ? void 0 : _a.hasAudio) {
+                audioManager.add({
+                    type: EventType.AudioStatusChange,
+                    callback: function () { return _this.onSystemAudioChanged(); },
+                });
+                audioManager.establishAudio();
+            }
+        }
+    };
     // Initializes runtime with Rive data and preps for playing
     Rive.prototype.initData = function (artboardName, animationNames, stateMachineNames, autoplay) {
         var _a;
@@ -5256,6 +5331,8 @@ var Rive = /** @class */ (function () {
                         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({
@@ -5333,9 +5410,9 @@ var Rive = /** @class */ (function () {
      * @param time the time at which to render a frame
      */
     Rive.prototype.draw = function (time, onSecond) {
-        var before = performance.now();
         // Clear the frameRequestId, as we're now rendering a fresh frame
         this.frameRequestId = null;
+        var before = performance.now();
         // On the first pass, make sure lastTime has a valid value
         if (!this.lastRenderTime) {
             this.lastRenderTime = time;
@@ -5414,7 +5491,10 @@ var Rive = /** @class */ (function () {
         renderer.save();
         // Update the renderer alignment if necessary
         this.alignRenderer();
-        this.artboard.draw(renderer);
+        // Do not draw on 0 canvas size
+        if (!this._hasZeroSize) {
+            this.artboard.draw(renderer);
+        }
         renderer.restore();
         renderer.flush();
         // Check for any animations that looped
@@ -5494,6 +5574,10 @@ var Rive = /** @class */ (function () {
         this.stopRendering();
         // Clean up any artboard, animation or state machine instances.
         this.cleanupInstances();
+        // Remove from observer
+        if (this._observed !== null) {
+            observers.remove(this._observed);
+        }
         // Delete the rive file
         (_a = this.file) === null || _a === void 0 ? void 0 : _a.delete();
         this.file = null;