@rive-app/canvas 2.32.1 → 2.33.0

package/package.json

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

@@ -732,7 +732,7 @@ function Wa(a, b) {
     return Va(c, a, b);
   }));
 }
-var Xa, Ya, bb = {464448:(a, b, c, d, e) => {
+var Xa, Ya, bb = {467490:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -795,11 +795,11 @@ var Xa, Ya, bb = {464448:(a, b, c, d, e) => {
   }
   window.h.ya += 1;
   return 1;
-}, 466626:() => {
+}, 469668:() => {
   "undefined" !== typeof window.h && (window.h.Ra.map(function(a) {
     document.removeEventListener(a, window.h.unlock, !0);
   }), --window.h.ya, 0 === window.h.ya && delete window.h);
-}, 466930:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 467034:() => {
+}, 469972:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 470076:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -807,7 +807,7 @@ var Xa, Ya, bb = {464448:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 467205:(a, b, c, d, e, f) => {
+}, 470247:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -853,7 +853,7 @@ var Xa, Ya, bb = {464448:(a, b, c, d, e) => {
   a == window.h.I.wa && g.Y.connect(g.K.destination);
   g.ob = f;
   return window.h.rc(g);
-}, 470082:a => window.h.pa(a).K.sampleRate, 470155:a => {
+}, 473124:a => window.h.pa(a).K.sampleRate, 473197:a => {
   a = window.h.pa(a);
   void 0 !== a.Y && (a.Y.onaudioprocess = function() {
   }, a.Y.disconnect(), a.Y = void 0);
@@ -861,13 +861,13 @@ var Xa, Ya, bb = {464448:(a, b, c, d, e) => {
   a.K.close();
   a.K = void 0;
   a.ob = void 0;
-}, 470555:a => {
+}, 473597:a => {
   window.h.zb(a);
-}, 470605:a => {
+}, 473647:a => {
   a = window.h.pa(a);
   a.K.resume();
   a.state = window.h.fa.vb;
-}, 470744:a => {
+}, 473786:a => {
   a = window.h.pa(a);
   a.K.suspend();
   a.state = window.h.fa.stopped;
@@ -3225,6 +3225,8 @@ var Yd = {__syscall_fcntl64:function(a, b, c) {
     }
     return w.$;
   }
+}, isWindowsBrowser:function() {
+  return -1 < navigator.platform.indexOf("Win");
 }, strftime_l:(a, b, c, d) => Ud(a, b, c, d)}, X = function() {
   function a(c) {
     X = c.exports;
@@ -3325,7 +3327,7 @@ moduleRtn = da;
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.32.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_fallback.wasm","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/canvas","version":"2.33.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_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -4140,6 +4142,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),
@@ -4287,6 +4290,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) {
@@ -5609,7 +5618,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
@@ -5651,6 +5660,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 = [];
@@ -5690,6 +5700,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
@@ -6014,7 +6025,7 @@ var Rive = /** @class */ (function () {
             }
         }
         else {
-            this.startRendering();
+            this.scheduleRendering();
         }
     };
     /**
@@ -6101,17 +6112,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
@@ -6132,7 +6147,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
@@ -6822,6 +6837,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);