@rive-app/canvas 2.15.0 → 2.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "Rive's canvas 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

@@ -3409,7 +3409,7 @@ Zd();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/canvas","version":"2.15.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.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","version":"2.15.1","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.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -4832,6 +4832,51 @@ var AudioManager = /** @class */ (function (_super) {
     return AudioManager;
 }(EventManager));
 var audioManager = new AudioManager();
+/**
+ * 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 ResizeObserver(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;
@@ -4856,17 +4901,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();
@@ -4919,14 +4975,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,
@@ -5022,6 +5070,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;
@@ -5051,6 +5117,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({
@@ -5128,9 +5196,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;
@@ -5209,7 +5277,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
@@ -5289,6 +5360,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;