@rive-app/canvas 2.26.4 → 2.26.6

package/rive.js

@@ -26,10 +26,10 @@ var Rive = (() => {
   return (
 function(moduleArg = {}) {
 
-var m = moduleArg, aa, ea;
+var m = moduleArg, aa, ba;
 m.ready = new Promise((a, b) => {
   aa = a;
-  ea = b;
+  ba = b;
 });
 function fa() {
   function a(g) {
@@ -266,7 +266,7 @@ const ja = "createConicGradient createImageData createLinearGradient createPatte
         b.clearColor(0, 0, 0, 0);
         b.clear(b.COLOR_BUFFER_BIT);
         b.enable(b.SCISSOR_TEST);
-        r.sort((H, ba) => ba.wb - H.wb);
+        r.sort((H, ca) => ca.wb - H.wb);
         w = v.push(B);
         g != w && (b.bufferData(b.ARRAY_BUFFER, 8 * w, b.DYNAMIC_DRAW), g = w);
         w = 0;
@@ -274,8 +274,8 @@ const ja = "createConicGradient createImageData createLinearGradient createPatte
           b.bufferSubData(b.ARRAY_BUFFER, w, T.Ta), w += 4 * T.Ta.length;
         }
         console.assert(w == 4 * B);
-        for (var ca of r) {
-          b.bufferSubData(b.ARRAY_BUFFER, w, ca.Db), w += 4 * ca.Db.length;
+        for (var da of r) {
+          b.bufferSubData(b.ARRAY_BUFFER, w, da.Db), w += 4 * da.Db.length;
         }
         console.assert(w == 8 * B);
         w = x.push(D);
@@ -286,15 +286,15 @@ const ja = "createConicGradient createImageData createLinearGradient createPatte
         }
         console.assert(T == 2 * D);
         ra = 0;
-        ca = !0;
+        da = !0;
         w = T = 0;
         for (const H of r) {
           H.image.Ka != ra && (b.bindTexture(b.TEXTURE_2D, H.image.Ja || null), ra = H.image.Ka);
-          H.mc ? (b.scissor(H.Ya, M - H.Za - H.jb, H.Ac, H.jb), ca = !0) : ca && (b.scissor(0, M - t, k, t), ca = !1);
+          H.mc ? (b.scissor(H.Ya, M - H.Za - H.jb, H.Ac, H.jb), da = !0) : da && (b.scissor(0, M - t, k, t), da = !1);
           r = 2 / k;
-          const ba = -2 / t;
-          b.uniform4f(e, H.ha[0] * r * H.Ba, H.ha[1] * ba * H.Ca, H.ha[2] * r * H.Ba, H.ha[3] * ba * H.Ca);
-          b.uniform2f(f, H.ha[4] * r * H.Ba + r * (H.Ya - H.ic * H.Ba) - 1, H.ha[5] * ba * H.Ca + ba * (H.Za - H.jc * H.Ca) + 1);
+          const ca = -2 / t;
+          b.uniform4f(e, H.ha[0] * r * H.Ba, H.ha[1] * ca * H.Ca, H.ha[2] * r * H.Ba, H.ha[3] * ca * H.Ca);
+          b.uniform2f(f, H.ha[4] * r * H.Ba + r * (H.Ya - H.ic * H.Ba) - 1, H.ha[5] * ca * H.Ca + ca * (H.Za - H.jc * H.Ca) + 1);
           b.vertexAttribPointer(0, 2, b.FLOAT, !1, 0, w);
           b.vertexAttribPointer(1, 2, b.FLOAT, !1, 0, w + 4 * B);
           b.drawElements(b.TRIANGLES, H.indices.length, b.UNSIGNED_SHORT, T);
@@ -351,7 +351,7 @@ m.onRuntimeInitialized = function() {
     return "rgba(" + ((16711680 & q) >>> 16) + "," + ((65280 & q) >>> 8) + "," + ((255 & q) >>> 0) + "," + ((4278190080 & q) >>> 24) / 255 + ")";
   }
   function c() {
-    0 < M.length && (ka.Qb(w.drawWidth(), w.drawHeight(), M, T, ca), M = [], ca = T = 0, w.reset(512, 512));
+    0 < M.length && (ka.Qb(w.drawWidth(), w.drawHeight(), M, T, da), M = [], da = T = 0, w.reset(512, 512));
     for (const q of D) {
       for (const y of q.H) {
         y();
@@ -461,8 +461,8 @@ m.onRuntimeInitialized = function() {
       var K = I.cb;
       const Q = I.Ra;
       I.ec ? (I = X - A, K -= J, A = q.createRadialGradient(A, J, 0, A, J, Math.sqrt(I * I + K * K))) : A = q.createLinearGradient(A, J, X, K);
-      for (let da = 0, R = Q.length; da < R; da++) {
-        J = Q[da], A.addColorStop(J.stop, b(J.color));
+      for (let ea = 0, R = Q.length; ea < R; ea++) {
+        J = Q[ea], A.addColorStop(J.stop, b(J.color));
       }
       this.Xa = A;
       this.ja = null;
@@ -480,7 +480,7 @@ m.onRuntimeInitialized = function() {
     }
   },});
   const D = new Set();
-  let w = null, M = [], T = 0, ca = 0;
+  let w = null, M = [], T = 0, da = 0;
   var ra = m.CanvasRenderer = g.extend("Renderer", {__construct:function(q) {
     this.__parent.__construct.call(this);
     this.S = [1, 0, 0, 1, 0, 0];
@@ -524,29 +524,29 @@ m.onRuntimeInitialized = function() {
       q[G] = y[F + G];
     }
   }, _drawImageMesh:function(q, y, F, G, A, I, J, K, X, Q) {
-    var da = this.C.canvas.width, R = this.C.canvas.height;
+    var ea = this.C.canvas.width, R = this.C.canvas.height;
     const Yb = X - J, Zb = Q - K;
     J = Math.max(J, 0);
     K = Math.max(K, 0);
-    X = Math.min(X, da);
+    X = Math.min(X, ea);
     Q = Math.min(Q, R);
     const Ga = X - J, Ha = Q - K;
-    console.assert(Ga <= Math.min(Yb, da));
+    console.assert(Ga <= Math.min(Yb, ea));
     console.assert(Ha <= Math.min(Zb, R));
     if (!(0 >= Ga || 0 >= Ha)) {
       X = Ga < Yb || Ha < Zb;
-      da = Q = 1;
-      var sa = Math.ceil(Ga * Q), ta = Math.ceil(Ha * da);
+      ea = Q = 1;
+      var sa = Math.ceil(Ga * Q), ta = Math.ceil(Ha * ea);
       R = ka.hc();
       sa > R && (Q *= R / sa, sa = R);
-      ta > R && (da *= R / ta, ta = R);
+      ta > R && (ea *= R / ta, ta = R);
       w || (w = new m.DynamicRectanizer(R), w.reset(512, 512));
       R = w.addRect(sa, ta);
       0 > R && (c(), D.add(this), R = w.addRect(sa, ta), console.assert(0 <= R));
       var $b = R & 65535, ac = R >> 16;
-      M.push({ha:this.S.slice(this.S.length - 6), image:q, Ya:$b, Za:ac, ic:J, jc:K, Ac:sa, jb:ta, Ba:Q, Ca:da, Ta:new Float32Array(G), Db:new Float32Array(A), indices:new Uint16Array(I), mc:X, wb:q.Ka << 1 | (X ? 1 : 0),});
+      M.push({ha:this.S.slice(this.S.length - 6), image:q, Ya:$b, Za:ac, ic:J, jc:K, Ac:sa, jb:ta, Ba:Q, Ca:ea, Ta:new Float32Array(G), Db:new Float32Array(A), indices:new Uint16Array(I), mc:X, wb:q.Ka << 1 | (X ? 1 : 0),});
       T += G.length;
-      ca += I.length;
+      da += I.length;
       var za = this.C, qd = a(y);
       this.H.push(function() {
         za.save();
@@ -600,7 +600,7 @@ m.onRuntimeInitialized = function() {
   }, makeRenderPath:function() {
     return new r();
   }, makeRenderImage:function() {
-    let q = ba;
+    let q = ca;
     return new t({xa:() => {
       q.total++;
     }, la:() => {
@@ -611,18 +611,18 @@ m.onRuntimeInitialized = function() {
       }
     },});
   },};
-  let H = m.load, ba = null;
+  let H = m.load, ca = null;
   m.load = function(q, y, F = !0) {
     const G = new m.FallbackFileAssetLoader();
     void 0 !== y && G.addLoader(y);
     F && (y = new m.CDNFileAssetLoader(), G.addLoader(y));
     return new Promise(function(A) {
       let I = null;
-      ba = {total:0, loaded:0, ready:function() {
+      ca = {total:0, loaded:0, ready:function() {
         A(I);
       },};
       I = H(q, G);
-      0 == ba.total && A(I);
+      0 == ca.total && A(I);
     });
   };
   let rd = m.RendererWrapper.prototype.align;
@@ -693,7 +693,7 @@ function Aa(a) {
   xa(a);
   Ca = !0;
   a = new WebAssembly.RuntimeError(a + ". Build with -sASSERTIONS for more info.");
-  ea(a);
+  ba(a);
   throw a;
 }
 function Sa(a) {
@@ -746,7 +746,7 @@ function Ya(a, b) {
     return Xa(c, a, b);
   }));
 }
-var Za, $a, db = {448252:(a, b, c, d, e) => {
+var Za, $a, db = {449500:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -809,9 +809,9 @@ var Za, $a, db = {448252:(a, b, c, d, e) => {
   }
   window.h.Aa += 1;
   return 1;
-}, 450430:() => {
+}, 451678:() => {
   "undefined" !== typeof window.h && (--window.h.Aa, 0 === window.h.Aa && delete window.h);
-}, 450594:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 450698:() => {
+}, 451842:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 451946:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -819,7 +819,7 @@ var Za, $a, db = {448252:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 450869:(a, b, c, d, e, f) => {
+}, 452117:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -865,7 +865,7 @@ var Za, $a, db = {448252:(a, b, c, d, e) => {
   a == window.h.I.ya && g.Z.connect(g.J.destination);
   g.pb = f;
   return window.h.yc(g);
-}, 453746:a => window.h.ra(a).J.sampleRate, 453819:a => {
+}, 454994:a => window.h.ra(a).J.sampleRate, 455067:a => {
   a = window.h.ra(a);
   void 0 !== a.Z && (a.Z.onaudioprocess = function() {
   }, a.Z.disconnect(), a.Z = void 0);
@@ -873,13 +873,13 @@ var Za, $a, db = {448252:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.pb = void 0;
-}, 454219:a => {
+}, 455467:a => {
   window.h.Cb(a);
-}, 454269:a => {
+}, 455517:a => {
   a = window.h.ra(a);
   a.J.resume();
   a.state = window.h.ga.xb;
-}, 454408:a => {
+}, 455656:a => {
   a = window.h.ra(a);
   a.J.suspend();
   a.state = window.h.ga.stopped;
@@ -3039,6 +3039,8 @@ var Xd = {__syscall_fcntl64:function(a, b, c) {
   return sc(a[b]);
 }, _emval_incref:function(a) {
   4 < a && (U.get(a).tb += 1);
+}, _emval_new_array:function() {
+  return sc([]);
 }, _emval_new_cstring:function(a) {
   return sc(Gd(a));
 }, _emval_new_object:function() {
@@ -3284,12 +3286,12 @@ var Xd = {__syscall_fcntl64:function(a, b, c) {
     try {
       return m.instantiateWasm(b, a);
     } catch (c) {
-      xa("Module.instantiateWasm callback failed with error: " + c), ea(c);
+      xa("Module.instantiateWasm callback failed with error: " + c), ba(c);
     }
   }
   Ya(b, function(c) {
     a(c.instance);
-  }).catch(ea);
+  }).catch(ba);
   return {};
 })();
 var Ec = a => (Ec = z.free)(a), Wd = a => (Wd = z.malloc)(a), ab = m._ma_device__on_notification_unlocked = a => (ab = m._ma_device__on_notification_unlocked = z.ma_device__on_notification_unlocked)(a);
@@ -3365,7 +3367,7 @@ $d();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas","version":"2.26.4","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.26.6","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 */
@@ -3824,6 +3826,7 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Alignment: () => (/* binding */ Alignment),
+/* harmony export */   DataEnum: () => (/* binding */ DataEnum),
 /* harmony export */   EventType: () => (/* binding */ EventType),
 /* harmony export */   Fit: () => (/* binding */ Fit),
 /* harmony export */   Layout: () => (/* binding */ Layout),
@@ -3835,6 +3838,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   StateMachineInput: () => (/* binding */ StateMachineInput),
 /* harmony export */   StateMachineInputType: () => (/* binding */ StateMachineInputType),
 /* harmony export */   Testing: () => (/* binding */ Testing),
+/* harmony export */   ViewModel: () => (/* binding */ ViewModel),
+/* harmony export */   ViewModelInstance: () => (/* binding */ ViewModelInstance),
+/* harmony export */   ViewModelInstanceBoolean: () => (/* binding */ ViewModelInstanceBoolean),
+/* harmony export */   ViewModelInstanceColor: () => (/* binding */ ViewModelInstanceColor),
+/* harmony export */   ViewModelInstanceEnum: () => (/* binding */ ViewModelInstanceEnum),
+/* harmony export */   ViewModelInstanceNumber: () => (/* binding */ ViewModelInstanceNumber),
+/* harmony export */   ViewModelInstanceString: () => (/* binding */ ViewModelInstanceString),
+/* harmony export */   ViewModelInstanceTrigger: () => (/* binding */ ViewModelInstanceTrigger),
+/* harmony export */   ViewModelInstanceValue: () => (/* binding */ ViewModelInstanceValue),
 /* harmony export */   decodeAudio: () => (/* binding */ decodeAudio),
 /* harmony export */   decodeFont: () => (/* binding */ decodeFont),
 /* harmony export */   decodeImage: () => (/* binding */ decodeImage)
@@ -3858,6 +3870,17 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -4294,6 +4317,11 @@ var StateMachine = /** @class */ (function () {
         this.inputs.length = 0;
         this.instance.delete();
     };
+    StateMachine.prototype.bindViewModelInstance = function (viewModelInstance) {
+        if (viewModelInstance.runtimeInstance != null) {
+            this.instance.bindViewModelInstance(viewModelInstance.runtimeInstance);
+        }
+    };
     return StateMachine;
 }());
 // #endregion
@@ -4440,6 +4468,9 @@ var Animator = /** @class */ (function () {
                 if (sm) {
                     var newStateMachine = new StateMachine(sm, this.runtime, playing, this.artboard);
                     this.stateMachines.push(newStateMachine);
+                    if (!playing) {
+                        newStateMachine.advanceAndApply(0);
+                    }
                 }
                 else {
                     // In order to maintain compatibility with current behavior, if a state machine is not found
@@ -5185,6 +5216,8 @@ var Rive = /** @class */ (function () {
         this._audioEventListener = null;
         // draw method bound to the class
         this._boundDraw = null;
+        this._viewModelInstance = null;
+        this._dataEnums = null;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
@@ -5270,6 +5303,7 @@ var Rive = /** @class */ (function () {
             buffer: this.buffer,
             riveFile: this.riveFile,
             autoplay: params.autoplay,
+            autoBind: params.autoBind,
             animations: params.animations,
             stateMachines: params.stateMachines,
             artboard: params.artboard,
@@ -5288,7 +5322,7 @@ var Rive = /** @class */ (function () {
     // Initializes the Rive object either from constructor or load()
     Rive.prototype.init = function (_a) {
         var _this = this;
-        var src = _a.src, buffer = _a.buffer, riveFile = _a.riveFile, animations = _a.animations, stateMachines = _a.stateMachines, artboard = _a.artboard, _b = _a.autoplay, autoplay = _b === void 0 ? false : _b, _c = _a.useOffscreenRenderer, useOffscreenRenderer = _c === void 0 ? false : _c;
+        var src = _a.src, buffer = _a.buffer, riveFile = _a.riveFile, animations = _a.animations, stateMachines = _a.stateMachines, artboard = _a.artboard, _b = _a.autoplay, autoplay = _b === void 0 ? false : _b, _c = _a.useOffscreenRenderer, useOffscreenRenderer = _c === void 0 ? false : _c, _d = _a.autoBind, autoBind = _d === void 0 ? false : _d;
         if (this.destroyed) {
             return;
         }
@@ -5323,7 +5357,7 @@ var Rive = /** @class */ (function () {
                 _this.resizeDrawingSurfaceToCanvas();
             }
             // Load Rive data from a source uri or a data buffer
-            _this.initData(artboard, startingAnimationNames, startingStateMachineNames, autoplay)
+            _this.initData(artboard, startingAnimationNames, startingStateMachineNames, autoplay, autoBind)
                 .then(function () { return _this.setupRiveListeners(); })
                 .catch(function (e) {
                 console.error(e);
@@ -5404,7 +5438,7 @@ var Rive = /** @class */ (function () {
             this._artboardHeight || this.artboard.height;
     };
     // Initializes runtime with Rive data and preps for playing
-    Rive.prototype.initData = function (artboardName, animationNames, stateMachineNames, autoplay) {
+    Rive.prototype.initData = function (artboardName, animationNames, stateMachineNames, autoplay, autoBind) {
         return __awaiter(this, void 0, void 0, function () {
             var error_1, msg;
             var _a;
@@ -5430,7 +5464,7 @@ var Rive = /** @class */ (function () {
                         }
                         this.file = this.riveFile.getInstance();
                         // Initialize and draw frame
-                        this.initArtboard(artboardName, animationNames, stateMachineNames, autoplay);
+                        this.initArtboard(artboardName, animationNames, stateMachineNames, autoplay, autoBind);
                         // Initialize the artboard size
                         this.initArtboardSize();
                         // Check for audio
@@ -5459,7 +5493,7 @@ var Rive = /** @class */ (function () {
         });
     };
     // Initialize for playback
-    Rive.prototype.initArtboard = function (artboardName, animationNames, stateMachineNames, autoplay) {
+    Rive.prototype.initArtboard = function (artboardName, animationNames, stateMachineNames, autoplay, autoBind) {
         if (!this.file) {
             return;
         }
@@ -5504,13 +5538,24 @@ var Rive = /** @class */ (function () {
                 data: instanceNames,
             },
         });
+        if (autoBind) {
+            var viewModel = this.file.defaultArtboardViewModel(rootArtboard);
+            if (viewModel !== null) {
+                var runtimeInstance = viewModel.defaultInstance();
+                if (runtimeInstance !== null) {
+                    var viewModelInstance = new ViewModelInstance(runtimeInstance, null);
+                    this.bindViewModelInstance(viewModelInstance);
+                }
+            }
+        }
     };
     // Draws the current artboard frame
     Rive.prototype.drawFrame = function () {
-        var _a;
+        var _a, _b;
         if ((_a = document === null || document === void 0 ? void 0 : document.timeline) === null || _a === void 0 ? void 0 : _a.currentTime) {
             if (this.loaded && this.artboard && !this.frameRequestId) {
                 this._boundDraw(document.timeline.currentTime);
+                (_b = this.runtime) === null || _b === void 0 ? void 0 : _b.resolveAnimationFrame();
             }
         }
         else {
@@ -5522,6 +5567,7 @@ var Rive = /** @class */ (function () {
      * @param time the time at which to render a frame
      */
     Rive.prototype.draw = function (time, onSecond) {
+        var _a;
         // Clear the frameRequestId, as we're now rendering a fresh frame
         this.frameRequestId = null;
         var before = performance.now();
@@ -5557,8 +5603,8 @@ var Rive = /** @class */ (function () {
         // - Advance non-paused state machines by the elapsed number of seconds
         // - Advance to the first frame even when autoplay is false
         var activeStateMachines = this.animator.stateMachines.filter(function (a) { return a.playing; });
-        for (var _a = 0, activeStateMachines_1 = activeStateMachines; _a < activeStateMachines_1.length; _a++) {
-            var stateMachine = activeStateMachines_1[_a];
+        for (var _b = 0, activeStateMachines_1 = activeStateMachines; _b < activeStateMachines_1.length; _b++) {
+            var stateMachine = activeStateMachines_1[_b];
             // Check for events before the current frame's state machine advance
             var numEventsReported = stateMachine.reportedEventCount();
             if (numEventsReported) {
@@ -5573,7 +5619,7 @@ var Rive = /** @class */ (function () {
                             // Handle the event side effect if explicitly enabled
                             if (this.automaticallyHandleEvents) {
                                 var newAnchorTag = document.createElement("a");
-                                var _b = event_1, url = _b.url, target = _b.target;
+                                var _c = event_1, url = _c.url, target = _c.target;
                                 var sanitizedUrl = (0,_utils__WEBPACK_IMPORTED_MODULE_3__.sanitizeUrl)(url);
                                 url && newAnchorTag.setAttribute("href", sanitizedUrl);
                                 target && newAnchorTag.setAttribute("target", target);
@@ -5626,6 +5672,7 @@ var Rive = /** @class */ (function () {
             this.frameTimes.shift();
             this.durations.shift();
         }
+        (_a = this._viewModelInstance) === null || _a === void 0 ? void 0 : _a.handleCallbacks();
         // Calling requestAnimationFrame will rerun draw() at the correct rate:
         // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
         if (this.animator.isPlaying) {
@@ -5683,7 +5730,7 @@ var Rive = /** @class */ (function () {
      * Rive class
      */
     Rive.prototype.cleanup = function () {
-        var _a;
+        var _a, _b;
         this.destroyed = true;
         // Stop the renderer if it hasn't already been stopped.
         this.stopRendering();
@@ -5704,6 +5751,9 @@ var Rive = /** @class */ (function () {
             audioManager.remove(this._audioEventListener);
             this._audioEventListener = null;
         }
+        (_b = this._viewModelInstance) === null || _b === void 0 ? void 0 : _b.cleanup();
+        this._viewModelInstance = null;
+        this._dataEnums = null;
     };
     /**
      * Cleans up the Renderer object. Only call this API if you no longer
@@ -5855,16 +5905,17 @@ var Rive = /** @class */ (function () {
      *
      */
     Rive.prototype.reset = function (params) {
-        var _a;
+        var _a, _b;
         // Get the current artboard, animations, state machines, and playback states
         var artBoardName = params === null || params === void 0 ? void 0 : params.artboard;
         var animationNames = mapToStringArray(params === null || params === void 0 ? void 0 : params.animations);
         var stateMachineNames = mapToStringArray(params === null || params === void 0 ? void 0 : params.stateMachines);
         var autoplay = (_a = params === null || params === void 0 ? void 0 : params.autoplay) !== null && _a !== void 0 ? _a : false;
+        var autoBind = (_b = params === null || params === void 0 ? void 0 : params.autoBind) !== null && _b !== void 0 ? _b : false;
         // Stop everything and clean up
         this.cleanupInstances();
         // Reinitialize an artboard instance with the state
-        this.initArtboard(artBoardName, animationNames, stateMachineNames, autoplay);
+        this.initArtboard(artBoardName, animationNames, stateMachineNames, autoplay, autoBind);
         this.taskQueue.process();
     };
     // Loads a new Rive file, keeping listeners in place
@@ -6487,6 +6538,62 @@ var Rive = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    /**
+     * Initialize the data context with the view model instance.
+     */
+    Rive.prototype.bindViewModelInstance = function (viewModelInstance) {
+        var _a;
+        if (this.artboard && !this.destroyed) {
+            if (viewModelInstance && viewModelInstance.runtimeInstance) {
+                viewModelInstance.internalIncrementReferenceCount();
+                (_a = this._viewModelInstance) === null || _a === void 0 ? void 0 : _a.cleanup();
+                this._viewModelInstance = viewModelInstance;
+                this.artboard.bindViewModelInstance(viewModelInstance.runtimeInstance);
+                this.animator.stateMachines.forEach(function (stateMachine) {
+                    return stateMachine.bindViewModelInstance(viewModelInstance);
+                });
+            }
+        }
+    };
+    Object.defineProperty(Rive.prototype, "viewModelInstance", {
+        get: function () {
+            return this._viewModelInstance;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Rive.prototype.viewModelByIndex = function (index) {
+        var viewModel = this.file.viewModelByIndex(index);
+        if (viewModel !== null) {
+            return new ViewModel(viewModel);
+        }
+        return null;
+    };
+    Rive.prototype.viewModelByName = function (name) {
+        var viewModel = this.file.viewModelByName(name);
+        if (viewModel !== null) {
+            return new ViewModel(viewModel);
+        }
+        return null;
+    };
+    Rive.prototype.enums = function () {
+        if (this._dataEnums === null) {
+            var dataEnums = this.file.enums();
+            this._dataEnums = dataEnums.map(function (dataEnum) {
+                return new DataEnum(dataEnum);
+            });
+        }
+        return this._dataEnums;
+    };
+    Rive.prototype.defaultViewModel = function () {
+        if (this.artboard) {
+            var viewModel = this.file.defaultArtboardViewModel(this.artboard);
+            if (viewModel) {
+                return new ViewModel(viewModel);
+            }
+        }
+        return null;
+    };
     // Error message for missing source or buffer
     Rive.missingErrorMessage = "Rive source file or data buffer required";
     // Error message for removed rive file
@@ -6494,6 +6601,481 @@ var Rive = /** @class */ (function () {
     return Rive;
 }());
 
+var ViewModel = /** @class */ (function () {
+    function ViewModel(viewModel) {
+        this._viewModel = viewModel;
+    }
+    Object.defineProperty(ViewModel.prototype, "instanceCount", {
+        get: function () {
+            return this._viewModel.instanceCount;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewModel.prototype, "name", {
+        get: function () {
+            return this._viewModel.name;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModel.prototype.instanceByIndex = function (index) {
+        var instance = this._viewModel.instanceByIndex(index);
+        if (instance !== null) {
+            return new ViewModelInstance(instance, null);
+        }
+        return null;
+    };
+    ViewModel.prototype.instanceByName = function (name) {
+        var instance = this._viewModel.instanceByName(name);
+        if (instance !== null) {
+            return new ViewModelInstance(instance, null);
+        }
+        return null;
+    };
+    ViewModel.prototype.defaultInstance = function () {
+        var runtimeInstance = this._viewModel.defaultInstance();
+        if (runtimeInstance !== null) {
+            return new ViewModelInstance(runtimeInstance, null);
+        }
+        return null;
+    };
+    ViewModel.prototype.instance = function () {
+        var runtimeInstance = this._viewModel.instance();
+        if (runtimeInstance !== null) {
+            return new ViewModelInstance(runtimeInstance, null);
+        }
+        return null;
+    };
+    Object.defineProperty(ViewModel.prototype, "properties", {
+        get: function () {
+            return this._viewModel.getProperties();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewModel.prototype, "instanceNames", {
+        get: function () {
+            return this._viewModel.getInstanceNames();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return ViewModel;
+}());
+
+var DataEnum = /** @class */ (function () {
+    function DataEnum(dataEnum) {
+        this._dataEnum = dataEnum;
+    }
+    Object.defineProperty(DataEnum.prototype, "name", {
+        get: function () {
+            return this._dataEnum.name;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DataEnum.prototype, "values", {
+        get: function () {
+            return this._dataEnum.values;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return DataEnum;
+}());
+
+var ViewModelInstance = /** @class */ (function () {
+    function ViewModelInstance(runtimeInstance, root) {
+        this._propertiesWithCallbacks = [];
+        this._referenceCount = 0;
+        this._runtimeInstance = runtimeInstance;
+        this._root = root || this;
+    }
+    Object.defineProperty(ViewModelInstance.prototype, "runtimeInstance", {
+        get: function () {
+            return this._runtimeInstance;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModelInstance.prototype.handleCallbacks = function () {
+        if (this._propertiesWithCallbacks.length !== 0) {
+            this._propertiesWithCallbacks.forEach(function (property) {
+                property.handleCallbacks();
+            });
+        }
+    };
+    ViewModelInstance.prototype.clearCallbacks = function () {
+        this._propertiesWithCallbacks.forEach(function (property) {
+            property.clearCallbacks();
+        });
+    };
+    /**
+     * method to access a property instance of type number belonging
+     * to the view model instance or to a nested view model instance
+     * @param path - path to the number property
+     */
+    ViewModelInstance.prototype.number = function (path) {
+        var _a;
+        var instance = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.number(path);
+        if (instance) {
+            return new ViewModelInstanceNumber(instance, this._root);
+        }
+        return null;
+    };
+    /**
+     * method to access a property instance of type string belonging
+     * to the view model instance or to a nested view model instance
+     * @param path - path to the number property
+     */
+    ViewModelInstance.prototype.string = function (path) {
+        var _a;
+        var instance = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.string(path);
+        if (instance) {
+            return new ViewModelInstanceString(instance, this._root);
+        }
+        return null;
+    };
+    /**
+     * method to access a property instance of type boolean belonging
+     * to the view model instance or to a nested view model instance
+     * @param path - path to the number property
+     */
+    ViewModelInstance.prototype.boolean = function (path) {
+        var _a;
+        var instance = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.boolean(path);
+        if (instance) {
+            return new ViewModelInstanceBoolean(instance, this._root);
+        }
+        return null;
+    };
+    /**
+     * method to access a property instance of type color belonging
+     * to the view model instance or to a nested view model instance
+     * @param path - path to the number property
+     */
+    ViewModelInstance.prototype.color = function (path) {
+        var _a;
+        var instance = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.color(path);
+        if (instance) {
+            return new ViewModelInstanceColor(instance, this._root);
+        }
+        return null;
+    };
+    /**
+     * method to access a property instance of type trigger belonging
+     * to the view model instance or to a nested view model instance
+     * @param path - path to the number property
+     */
+    ViewModelInstance.prototype.trigger = function (path) {
+        var _a;
+        var instance = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.trigger(path);
+        if (instance) {
+            return new ViewModelInstanceTrigger(instance, this._root);
+        }
+        return null;
+    };
+    /**
+     * method to access a property instance of type enum belonging
+     * to the view model instance or to a nested view model instance
+     * @param path - path to the number property
+     */
+    ViewModelInstance.prototype.enum = function (path) {
+        var _a;
+        var instance = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.enum(path);
+        if (instance) {
+            return new ViewModelInstanceEnum(instance, this._root);
+        }
+        return null;
+    };
+    /**
+     * method to access a view model property instance belonging
+     * to the view model instance or to a nested view model instance
+     * @param path - path to the number property
+     */
+    ViewModelInstance.prototype.viewModel = function (path) {
+        var _a;
+        var viewModelInstance = (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.viewModel(path);
+        if (viewModelInstance) {
+            return new ViewModelInstance(viewModelInstance, this._root);
+        }
+        return null;
+    };
+    /**
+     * method to replace a view model property with another view model value
+     * @param path - path to the view model property
+     * @param value - view model that will replace the original
+     */
+    ViewModelInstance.prototype.replaceViewModel = function (path, value) {
+        var _a;
+        if (value.runtimeInstance !== null) {
+            return (((_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.replaceViewModel(path, value.runtimeInstance)) ||
+                false);
+        }
+        return false;
+    };
+    /*
+     * method for internal use, it shouldn't be called externally
+     */
+    ViewModelInstance.prototype.addToCallbacks = function (property) {
+        if (!this._propertiesWithCallbacks.includes(property)) {
+            this._propertiesWithCallbacks.push(property);
+        }
+    };
+    /*
+     * method for internal use, it shouldn't be called externally
+     */
+    ViewModelInstance.prototype.removeFromCallbacks = function (property) {
+        if (this._propertiesWithCallbacks.includes(property)) {
+            this._propertiesWithCallbacks = this._propertiesWithCallbacks.filter(function (prop) { return prop !== property; });
+        }
+    };
+    /*
+     * method to add one to the reference counter of the instance.
+     * Use if the file owning the reference is destroyed but the instance needs to stay around
+     */
+    ViewModelInstance.prototype.incrementReferenceCount = function () {
+        var _a;
+        this._referenceCount++;
+        (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.incrementReferenceCount();
+    };
+    /*
+     * method to subtract one to the reference counter of the instance.
+     * Use if incrementReferenceCount has been called
+     */
+    ViewModelInstance.prototype.decrementReferenceCount = function () {
+        var _a;
+        this._referenceCount--;
+        (_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.decrementReferenceCount();
+    };
+    Object.defineProperty(ViewModelInstance.prototype, "properties", {
+        get: function () {
+            var _a;
+            return (((_a = this._runtimeInstance) === null || _a === void 0 ? void 0 : _a.getProperties().map(function (prop) { return (__assign({}, prop)); })) || []);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModelInstance.prototype.internalIncrementReferenceCount = function () {
+        this._referenceCount++;
+    };
+    ViewModelInstance.prototype.cleanup = function () {
+        this._referenceCount--;
+        if (this._referenceCount <= 0) {
+            this._runtimeInstance = null;
+            this.clearCallbacks();
+            this._propertiesWithCallbacks = [];
+        }
+    };
+    return ViewModelInstance;
+}());
+
+var ViewModelInstanceValue = /** @class */ (function () {
+    function ViewModelInstanceValue(instance, root) {
+        this.callbacks = [];
+        this._viewModelInstanceValue = instance;
+        this._rootViewModel = root;
+    }
+    ViewModelInstanceValue.prototype.on = function (callback) {
+        // Since we don't clean the changed flag for properties that don't have listeners,
+        // we clean it the first time we add a listener to it
+        if (this.callbacks.length === 0) {
+            this._viewModelInstanceValue.clearChanges();
+        }
+        if (!this.callbacks.includes(callback)) {
+            this.callbacks.push(callback);
+            this._rootViewModel.addToCallbacks(this);
+        }
+    };
+    ViewModelInstanceValue.prototype.off = function (callback) {
+        if (!callback) {
+            this.callbacks.length = 0;
+        }
+        else {
+            this.callbacks = this.callbacks.filter(function (cb) { return cb !== callback; });
+        }
+        if (this.callbacks.length === 0) {
+            this._rootViewModel.removeFromCallbacks(this);
+        }
+    };
+    ViewModelInstanceValue.prototype.internalHandleCallback = function (callback) { };
+    ViewModelInstanceValue.prototype.handleCallbacks = function () {
+        var _this = this;
+        if (this._viewModelInstanceValue.hasChanged) {
+            this._viewModelInstanceValue.clearChanges();
+            this.callbacks.forEach(function (callback) {
+                _this.internalHandleCallback(callback);
+            });
+        }
+    };
+    ViewModelInstanceValue.prototype.clearCallbacks = function () {
+        this.callbacks.length = 0;
+    };
+    Object.defineProperty(ViewModelInstanceValue.prototype, "name", {
+        get: function () {
+            return this._viewModelInstanceValue.name;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return ViewModelInstanceValue;
+}());
+
+var ViewModelInstanceString = /** @class */ (function (_super) {
+    __extends(ViewModelInstanceString, _super);
+    function ViewModelInstanceString(instance, root) {
+        return _super.call(this, instance, root) || this;
+    }
+    Object.defineProperty(ViewModelInstanceString.prototype, "value", {
+        get: function () {
+            return this._viewModelInstanceValue.value;
+        },
+        set: function (val) {
+            this._viewModelInstanceValue.value = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModelInstanceString.prototype.internalHandleCallback = function (callback) {
+        callback(this.value);
+    };
+    return ViewModelInstanceString;
+}(ViewModelInstanceValue));
+
+var ViewModelInstanceNumber = /** @class */ (function (_super) {
+    __extends(ViewModelInstanceNumber, _super);
+    function ViewModelInstanceNumber(instance, root) {
+        return _super.call(this, instance, root) || this;
+    }
+    Object.defineProperty(ViewModelInstanceNumber.prototype, "value", {
+        get: function () {
+            return this._viewModelInstanceValue.value;
+        },
+        set: function (val) {
+            this._viewModelInstanceValue.value = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModelInstanceNumber.prototype.internalHandleCallback = function (callback) {
+        callback(this.value);
+    };
+    return ViewModelInstanceNumber;
+}(ViewModelInstanceValue));
+
+var ViewModelInstanceBoolean = /** @class */ (function (_super) {
+    __extends(ViewModelInstanceBoolean, _super);
+    function ViewModelInstanceBoolean(instance, root) {
+        return _super.call(this, instance, root) || this;
+    }
+    Object.defineProperty(ViewModelInstanceBoolean.prototype, "value", {
+        get: function () {
+            return this._viewModelInstanceValue.value;
+        },
+        set: function (val) {
+            this._viewModelInstanceValue.value = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModelInstanceBoolean.prototype.internalHandleCallback = function (callback) {
+        callback(this.value);
+    };
+    return ViewModelInstanceBoolean;
+}(ViewModelInstanceValue));
+
+var ViewModelInstanceTrigger = /** @class */ (function (_super) {
+    __extends(ViewModelInstanceTrigger, _super);
+    function ViewModelInstanceTrigger(instance, root) {
+        return _super.call(this, instance, root) || this;
+    }
+    ViewModelInstanceTrigger.prototype.trigger = function () {
+        return this._viewModelInstanceValue.trigger();
+    };
+    ViewModelInstanceTrigger.prototype.internalHandleCallback = function (callback) {
+        callback();
+    };
+    return ViewModelInstanceTrigger;
+}(ViewModelInstanceValue));
+
+var ViewModelInstanceEnum = /** @class */ (function (_super) {
+    __extends(ViewModelInstanceEnum, _super);
+    function ViewModelInstanceEnum(instance, root) {
+        return _super.call(this, instance, root) || this;
+    }
+    Object.defineProperty(ViewModelInstanceEnum.prototype, "value", {
+        get: function () {
+            return this._viewModelInstanceValue.value;
+        },
+        set: function (val) {
+            this._viewModelInstanceValue.value = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewModelInstanceEnum.prototype, "valueIndex", {
+        get: function () {
+            return this._viewModelInstanceValue
+                .valueIndex;
+        },
+        set: function (val) {
+            this._viewModelInstanceValue.valueIndex = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewModelInstanceEnum.prototype, "values", {
+        get: function () {
+            return this._viewModelInstanceValue.values;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModelInstanceEnum.prototype.internalHandleCallback = function (callback) {
+        callback(this.value);
+    };
+    return ViewModelInstanceEnum;
+}(ViewModelInstanceValue));
+
+var ViewModelInstanceColor = /** @class */ (function (_super) {
+    __extends(ViewModelInstanceColor, _super);
+    function ViewModelInstanceColor(instance, root) {
+        return _super.call(this, instance, root) || this;
+    }
+    Object.defineProperty(ViewModelInstanceColor.prototype, "value", {
+        get: function () {
+            return this._viewModelInstanceValue.value;
+        },
+        set: function (val) {
+            this._viewModelInstanceValue.value = val;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewModelInstanceColor.prototype.rgb = function (r, g, b) {
+        this._viewModelInstanceValue.rgb(r, g, b);
+    };
+    ViewModelInstanceColor.prototype.rgba = function (r, g, b, a) {
+        this._viewModelInstanceValue.argb(a, r, g, b);
+    };
+    ViewModelInstanceColor.prototype.argb = function (a, r, g, b) {
+        this._viewModelInstanceValue.argb(a, r, g, b);
+    };
+    // Value 0 to 255
+    ViewModelInstanceColor.prototype.alpha = function (a) {
+        this._viewModelInstanceValue.alpha(a);
+    };
+    // Value 0 to 1
+    ViewModelInstanceColor.prototype.opacity = function (o) {
+        this._viewModelInstanceValue.alpha(Math.round(Math.max(0, Math.min(1, o)) * 255));
+    };
+    ViewModelInstanceColor.prototype.internalHandleCallback = function (callback) {
+        callback(this.value);
+    };
+    return ViewModelInstanceColor;
+}(ViewModelInstanceValue));
+
 // Loads Rive data from a URI via fetch.
 var loadRiveFile = function (src) { return __awaiter(void 0, void 0, void 0, function () {
     var req, res, buffer;