@rive-app/webgl 2.32.1 → 2.33.0

package/package.json

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

package/rive.d.ts

@@ -33,6 +33,10 @@ export declare enum Alignment {
     BottomCenter = "bottomCenter",
     BottomRight = "bottomRight"
 }
+export declare enum DrawOptimizationOptions {
+    AlwaysDraw = "alwaysDraw",
+    DrawOnChanged = "drawOnChanged"
+}
 export interface LayoutParameters {
     fit?: Fit;
     alignment?: Alignment;
@@ -260,6 +264,10 @@ export interface RiveParameters {
      * Enables multi touch support
      */
     enableMultiTouch?: boolean;
+    /**
+     * Enum with drawing options for optimizations
+     */
+    drawingOptions?: DrawOptimizationOptions;
     onLoad?: EventCallback;
     onLoadError?: EventCallback;
     onPlay?: EventCallback;
@@ -421,6 +429,7 @@ export declare class Rive {
     private _boundDraw;
     private _viewModelInstance;
     private _dataEnums;
+    private drawOptimization;
     durations: number[];
     frameTimes: number[];
     frameCount: number;
@@ -700,6 +709,7 @@ export declare class Rive {
      * renderer is already active, then this will have zero effect.
      */
     startRendering(): void;
+    private scheduleRendering;
     /**
      * Enables frames-per-second (FPS) reporting for the runtime
      * If no callback is provided, Rive will append a fixed-position div at the top-right corner of

package/rive.js

@@ -393,7 +393,7 @@ function Ra(a, b) {
     return Qa(c, a, b);
   }));
 }
-var Sa, Ta, Xa = {719232:(a, b, c, d, e) => {
+var Sa, Ta, Xa = {722258:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -456,11 +456,11 @@ var Sa, Ta, Xa = {719232:(a, b, c, d, e) => {
   }
   window.h.Ca += 1;
   return 1;
-}, 721410:() => {
+}, 724436:() => {
   "undefined" !== typeof window.h && (window.h.Ra.map(function(a) {
     document.removeEventListener(a, window.h.unlock, !0);
   }), --window.h.Ca, 0 === window.h.Ca && delete window.h);
-}, 721714:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 721818:() => {
+}, 724740:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 724844:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -468,7 +468,7 @@ var Sa, Ta, Xa = {719232:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 721989:(a, b, c, d, e, f) => {
+}, 725015:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -514,7 +514,7 @@ var Sa, Ta, Xa = {719232:(a, b, c, d, e) => {
   a == window.h.H.Aa && g.W.connect(g.J.destination);
   g.kb = f;
   return window.h.fc(g);
-}, 724866:a => window.h.ra(a).J.sampleRate, 724939:a => {
+}, 727892:a => window.h.ra(a).J.sampleRate, 727965:a => {
   a = window.h.ra(a);
   void 0 !== a.W && (a.W.onaudioprocess = function() {
   }, a.W.disconnect(), a.W = void 0);
@@ -522,13 +522,13 @@ var Sa, Ta, Xa = {719232:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.kb = void 0;
-}, 725339:a => {
+}, 728365:a => {
   window.h.ub(a);
-}, 725389:a => {
+}, 728415:a => {
   a = window.h.ra(a);
   a.J.resume();
   a.state = window.h.ga.qb;
-}, 725528:a => {
+}, 728554:a => {
   a = window.h.ra(a);
   a.J.suspend();
   a.state = window.h.ga.stopped;
@@ -3610,7 +3610,9 @@ var Ie = {__syscall_fcntl64:function(a, b, c) {
     }
     return E.Y;
   }
-}, glBindFramebuffer:Ud, glGetIntegerv:ae, invoke_ii:te, invoke_iii:ue, invoke_iiii:ve, invoke_iiiii:we, invoke_iiiiii:xe, invoke_iiiiiii:ye, invoke_iiiiiiiiii:ze, invoke_v:Ae, invoke_vi:Be, invoke_vii:Ce, invoke_viii:De, invoke_viiii:Ee, invoke_viiiiii:Fe, invoke_viiiiiii:Ge, invoke_viiiiiiii:He, strftime_l:(a, b, c, d) => oe(a, b, c, d)}, W = function() {
+}, glBindFramebuffer:Ud, glGetIntegerv:ae, invoke_ii:te, invoke_iii:ue, invoke_iiii:ve, invoke_iiiii:we, invoke_iiiiii:xe, invoke_iiiiiii:ye, invoke_iiiiiiiiii:ze, invoke_v:Ae, invoke_vi:Be, invoke_vii:Ce, invoke_viii:De, invoke_viiii:Ee, invoke_viiiiii:Fe, invoke_viiiiiii:Ge, invoke_viiiiiiii:He, isWindowsBrowser:function() {
+  return -1 < navigator.platform.indexOf("Win");
+}, strftime_l:(a, b, c, d) => oe(a, b, c, d)}, W = function() {
   function a(c) {
     W = c.exports;
     ya = W.memory;
@@ -3899,7 +3901,7 @@ moduleRtn = ca;
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/webgl","version":"2.32.1","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 = /*#__PURE__*/JSON.parse('{"name":"@rive-app/webgl","version":"2.33.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 */
@@ -4714,6 +4716,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Alignment: () => (/* binding */ Alignment),
 /* harmony export */   DataEnum: () => (/* binding */ DataEnum),
+/* harmony export */   DrawOptimizationOptions: () => (/* binding */ DrawOptimizationOptions),
 /* harmony export */   EventType: () => (/* binding */ EventType),
 /* harmony export */   Fit: () => (/* binding */ Fit),
 /* harmony export */   Layout: () => (/* binding */ Layout),
@@ -4861,6 +4864,12 @@ var Alignment;
     Alignment["BottomCenter"] = "bottomCenter";
     Alignment["BottomRight"] = "bottomRight";
 })(Alignment || (Alignment = {}));
+// Drawing optimization options
+var DrawOptimizationOptions;
+(function (DrawOptimizationOptions) {
+    DrawOptimizationOptions["AlwaysDraw"] = "alwaysDraw";
+    DrawOptimizationOptions["DrawOnChanged"] = "drawOnChanged";
+})(DrawOptimizationOptions || (DrawOptimizationOptions = {}));
 // Alignment options for Rive animations in a HTML canvas
 var Layout = /** @class */ (function () {
     function Layout(params) {
@@ -6183,7 +6192,7 @@ var RiveFile = /** @class */ (function () {
 var Rive = /** @class */ (function () {
     function Rive(params) {
         var _this = this;
-        var _a;
+        var _a, _b;
         // Tracks if a Rive file is loaded
         this.loaded = false;
         // Tracks if a Rive file is destroyed
@@ -6225,6 +6234,7 @@ var Rive = /** @class */ (function () {
         this._boundDraw = null;
         this._viewModelInstance = null;
         this._dataEnums = null;
+        this.drawOptimization = DrawOptimizationOptions.DrawOnChanged;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
@@ -6264,6 +6274,7 @@ var Rive = /** @class */ (function () {
                 ? params.dispatchPointerExit
                 : this.dispatchPointerExit;
         this.enableMultiTouch = !!params.enableMultiTouch;
+        this.drawOptimization = (_b = params.drawingOptions) !== null && _b !== void 0 ? _b : this.drawOptimization;
         this.enableRiveAssetCDN =
             params.enableRiveAssetCDN === undefined
                 ? true
@@ -6588,7 +6599,7 @@ var Rive = /** @class */ (function () {
             }
         }
         else {
-            this.startRendering();
+            this.scheduleRendering();
         }
     };
     /**
@@ -6675,17 +6686,21 @@ var Rive = /** @class */ (function () {
             this.artboard.advance(elapsedTime);
         }
         var renderer = this.renderer;
-        // Canvas must be wiped to prevent artifacts
-        renderer.clear();
-        renderer.save();
-        // Update the renderer alignment if necessary
-        this.alignRenderer();
         // Do not draw on 0 canvas size
         if (!this._hasZeroSize) {
-            this.artboard.draw(renderer);
+            // If there was no dirt on this frame, do not clear and draw
+            if (this.drawOptimization == DrawOptimizationOptions.AlwaysDraw ||
+                this.artboard.didChange()) {
+                // Canvas must be wiped to prevent artifacts
+                renderer.clear();
+                renderer.save();
+                // Update the renderer alignment if necessary
+                this.alignRenderer();
+                this.artboard.draw(renderer);
+                renderer.restore();
+                renderer.flush();
+            }
         }
-        renderer.restore();
-        renderer.flush();
         // Check for any animations that looped
         this.animator.handleLooping();
         // Check for any state machines that had a state change
@@ -6706,7 +6721,7 @@ var Rive = /** @class */ (function () {
         // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
         if (this.animator.isPlaying) {
             // Request a new rendering frame
-            this.startRendering();
+            this.scheduleRendering();
         }
         else if (this.animator.isPaused) {
             // Reset the end time so on playback it starts at the correct frame
@@ -7396,6 +7411,9 @@ var Rive = /** @class */ (function () {
      * renderer is already active, then this will have zero effect.
      */
     Rive.prototype.startRendering = function () {
+        this.drawFrame();
+    };
+    Rive.prototype.scheduleRendering = function () {
         if (this.loaded && this.artboard && !this.frameRequestId) {
             if (this.runtime.requestAnimationFrame) {
                 this.frameRequestId = this.runtime.requestAnimationFrame(this._boundDraw);