@rive-app/canvas-lite 2.32.2 → 2.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.32.2",
+  "version": "2.33.0",
   "description": "A lite version of 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

@@ -2194,7 +2194,7 @@ moduleRtn = ca;
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.32.2","description":"A lite version of 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-lite","version":"2.33.0","description":"A lite version of 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 */
@@ -3009,6 +3009,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),
@@ -3156,6 +3157,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) {
@@ -4478,7 +4485,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
@@ -4520,6 +4527,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 = [];
@@ -4559,6 +4567,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
@@ -4883,7 +4892,7 @@ var Rive = /** @class */ (function () {
             }
         }
         else {
-            this.startRendering();
+            this.scheduleRendering();
         }
     };
     /**
@@ -4970,17 +4979,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
@@ -5001,7 +5014,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
@@ -5691,6 +5704,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);