@rive-app/webgl-single 1.0.71 → 1.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl-single",
-  "version": "1.0.71",
+  "version": "1.0.72",
   "description": "Rive's webgl based web api with bundled wasm.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -46,11 +46,11 @@ export declare class Layout {
     readonly maxX: number;
     readonly maxY: number;
     constructor(params?: LayoutParameters);
-    static new({ fit, alignment, minX, minY, maxX, maxY }: LayoutParameters): Layout;
+    static new({ fit, alignment, minX, minY, maxX, maxY, }: LayoutParameters): Layout;
     /**
      * Makes a copy of the layout, replacing any specified parameters
      */
-    copyWith({ fit, alignment, minX, minY, maxX, maxY }: LayoutParameters): Layout;
+    copyWith({ fit, alignment, minX, minY, maxX, maxY, }: LayoutParameters): Layout;
     runtimeFit(rive: rc.RiveCanvas): rc.Fit;
     runtimeAlignment(rive: rc.RiveCanvas): rc.Alignment;
 }
@@ -256,6 +256,7 @@ export declare class Rive {
     private readyForPlaying;
     private runtime;
     private artboard;
+    private eventCleanup;
     private file;
     private eventManager;
     private taskQueue;

package/rive.js

@@ -176,7 +176,7 @@ k.run=xd;if(k.preInit)for("function"==typeof k.preInit&&(k.preInit=[k.preInit]);
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl-single","version":"1.0.71","description":"Rive\'s webgl based web api with bundled wasm.","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.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = JSON.parse('{"name":"@rive-app/webgl-single","version":"1.0.72","description":"Rive\'s webgl based web api with bundled wasm.","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.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -212,56 +212,69 @@ const registerTouchInteractions = ({
   alignment,
 }) => {
   if (!canvas || !stateMachines.length || !renderer || !rive || !artboard) {
-    return;
+    return null;
   }
 
-    const mouseCallback = (event) => {
-      const boundingRect = event.currentTarget.getBoundingClientRect();
+  const mouseCallback = (event) => {
+    const boundingRect = event.currentTarget.getBoundingClientRect();
 
-      const canvasX = event.clientX - boundingRect.left;
-      const canvasY = event.clientY - boundingRect.top;
-      const forwardMatrix = rive.computeAlignment(fit, alignment, {
+    const canvasX = event.clientX - boundingRect.left;
+    const canvasY = event.clientY - boundingRect.top;
+    const forwardMatrix = rive.computeAlignment(
+      fit,
+      alignment,
+      {
         minX: 0,
         minY: 0,
         maxX: boundingRect.width,
         maxY: boundingRect.height,
-      }, artboard.bounds);
-      let invertedMatrix = new rive.Mat2D();
-      forwardMatrix.invert(invertedMatrix);
-      const canvasCoordinatesVector = new rive.Vec2D(canvasX, canvasY);
-      const transformedVector = rive.mapXY(invertedMatrix, canvasCoordinatesVector);
-      const transformedX = transformedVector.x();
-      const transformedY = transformedVector.y();
+      },
+      artboard.bounds
+    );
+    let invertedMatrix = new rive.Mat2D();
+    forwardMatrix.invert(invertedMatrix);
+    const canvasCoordinatesVector = new rive.Vec2D(canvasX, canvasY);
+    const transformedVector = rive.mapXY(
+      invertedMatrix,
+      canvasCoordinatesVector
+    );
+    const transformedX = transformedVector.x();
+    const transformedY = transformedVector.y();
 
-      switch (event.type) {
-        // Pointer moving/hovering on the canvas
-        case 'mousemove': {
-          for (const stateMachine of stateMachines) {
-            stateMachine.pointerMove(transformedX, transformedY);
-          }
-          break;
+    switch (event.type) {
+      // Pointer moving/hovering on the canvas
+      case 'mousemove': {
+        for (const stateMachine of stateMachines) {
+          stateMachine.pointerMove(transformedX, transformedY);
         }
-        // Pointer click initiated but not released yet on the canvas
-        case 'mousedown': {
-          for (const stateMachine of stateMachines) {
-            stateMachine.pointerDown(transformedX, transformedY);
-          }
-          break;
+        break;
+      }
+      // Pointer click initiated but not released yet on the canvas
+      case 'mousedown': {
+        for (const stateMachine of stateMachines) {
+          stateMachine.pointerDown(transformedX, transformedY);
         }
-        // Pointer click released on the canvas
-        case 'mouseup': {
-          for (const stateMachine of stateMachines) {
-            stateMachine.pointerUp(transformedX, transformedY);
-          }
-          break;
+        break;
+      }
+      // Pointer click released on the canvas
+      case 'mouseup': {
+        for (const stateMachine of stateMachines) {
+          stateMachine.pointerUp(transformedX, transformedY);
         }
-        default:
+        break;
       }
-    };
-
-    canvas.addEventListener("mousemove", mouseCallback.bind(undefined));
-    canvas.addEventListener("mousedown", mouseCallback.bind(undefined));
-    canvas.addEventListener("mouseup", mouseCallback.bind(undefined));
+      default:
+    }
+  };
+  const callback = mouseCallback.bind(undefined);
+  canvas.addEventListener('mousemove', callback);
+  canvas.addEventListener('mousedown', callback);
+  canvas.addEventListener('mouseup', callback);
+  return () => {
+    canvas.removeEventListener('mousemove', callback);
+    canvas.removeEventListener('mousedown', callback);
+    canvas.removeEventListener('mouseup', callback);
+  };
 };
 
 
@@ -441,7 +454,7 @@ var Layout = /** @class */ (function () {
             minX: minX !== null && minX !== void 0 ? minX : this.minX,
             minY: minY !== null && minY !== void 0 ? minY : this.minY,
             maxX: maxX !== null && maxX !== void 0 ? maxX : this.maxX,
-            maxY: maxY !== null && maxY !== void 0 ? maxY : this.maxY
+            maxY: maxY !== null && maxY !== void 0 ? maxY : this.maxY,
         });
     };
     // Returns fit for the Wasm runtime format
@@ -505,7 +518,7 @@ var RuntimeLoader = /** @class */ (function () {
     RuntimeLoader.loadRuntime = function () {
         _rive_advanced_mjs__WEBPACK_IMPORTED_MODULE_0__.default({
             // Loads Wasm bundle
-            locateFile: function (_) { return RuntimeLoader.wasmURL; }
+            locateFile: function (_) { return RuntimeLoader.wasmURL; },
         }).then(function (rive) {
             var _a;
             RuntimeLoader.runtime = rive;
@@ -806,8 +819,8 @@ var Animator = /** @class */ (function () {
         animatables = mapToStringArray(animatables);
         // If animatables is empty, play or pause everything
         if (animatables.length === 0) {
-            this.animations.forEach(function (a) { return a.playing = playing; });
-            this.stateMachines.forEach(function (m) { return m.playing = playing; });
+            this.animations.forEach(function (a) { return (a.playing = playing); });
+            this.stateMachines.forEach(function (m) { return (m.playing = playing); });
         }
         else {
             // Play/pause already instanced items, or create new instances
@@ -873,11 +886,11 @@ var Animator = /** @class */ (function () {
         return this.add(animatables, true);
     };
     /**
-   * Pauses named animations and state machines, or everything if nothing is
-   * specified
-   * @param animatables names of the animations and state machines to pause
-   * @returns a list of names of the animations and state machines paused
-   */
+     * Pauses named animations and state machines, or everything if nothing is
+     * specified
+     * @param animatables names of the animations and state machines to pause
+     * @returns a list of names of the animations and state machines paused
+     */
     Animator.prototype.pause = function (animatables) {
         return this.add(animatables, false);
     };
@@ -888,8 +901,10 @@ var Animator = /** @class */ (function () {
      * @returns a list of names of the animations that were scrubbed
      */
     Animator.prototype.scrub = function (animatables, value) {
-        var forScrubbing = this.animations.filter(function (a) { return animatables.includes(a.name); });
-        forScrubbing.forEach(function (a) { return a.scrubTo = value; });
+        var forScrubbing = this.animations.filter(function (a) {
+            return animatables.includes(a.name);
+        });
+        forScrubbing.forEach(function (a) { return (a.scrubTo = value); });
         return forScrubbing.map(function (a) { return a.name; });
     };
     Object.defineProperty(Animator.prototype, "playing", {
@@ -898,7 +913,10 @@ var Animator = /** @class */ (function () {
          * playing
          */
         get: function () {
-            return this.animations.filter(function (a) { return a.playing; }).map(function (a) { return a.name; }).concat(this.stateMachines.filter(function (m) { return m.playing; }).map(function (m) { return m.name; }));
+            return this.animations
+                .filter(function (a) { return a.playing; })
+                .map(function (a) { return a.name; })
+                .concat(this.stateMachines.filter(function (m) { return m.playing; }).map(function (m) { return m.name; }));
         },
         enumerable: false,
         configurable: true
@@ -909,7 +927,10 @@ var Animator = /** @class */ (function () {
          * paused
          */
         get: function () {
-            return this.animations.filter(function (a) { return !a.playing; }).map(function (a) { return a.name; }).concat(this.stateMachines.filter(function (m) { return !m.playing; }).map(function (m) { return m.name; }));
+            return this.animations
+                .filter(function (a) { return !a.playing; })
+                .map(function (a) { return a.name; })
+                .concat(this.stateMachines.filter(function (m) { return !m.playing; }).map(function (m) { return m.name; }));
         },
         enumerable: false,
         configurable: true
@@ -926,7 +947,9 @@ var Animator = /** @class */ (function () {
         var removedNames = [];
         // Stop everything
         if (animatables.length === 0) {
-            removedNames = this.animations.map(function (a) { return a.name; }).concat(this.stateMachines.map(function (m) { return m.name; }));
+            removedNames = this.animations
+                .map(function (a) { return a.name; })
+                .concat(this.stateMachines.map(function (m) { return m.name; }));
             // Clean up before emptying the arrays
             this.animations.forEach(function (a) { return a.cleanup(); });
             this.stateMachines.forEach(function (m) { return m.cleanup(); });
@@ -936,17 +959,23 @@ var Animator = /** @class */ (function () {
         }
         else {
             // Remove only the named animations/state machines
-            var animationsToRemove = this.animations.filter(function (a) { return animatables.includes(a.name); });
+            var animationsToRemove = this.animations.filter(function (a) {
+                return animatables.includes(a.name);
+            });
             animationsToRemove.forEach(function (a) {
                 a.cleanup();
                 _this.animations.splice(_this.animations.indexOf(a), 1);
             });
-            var machinesToRemove = this.stateMachines.filter(function (m) { return animatables.includes(m.name); });
+            var machinesToRemove = this.stateMachines.filter(function (m) {
+                return animatables.includes(m.name);
+            });
             machinesToRemove.forEach(function (m) {
                 m.cleanup();
                 _this.stateMachines.splice(_this.stateMachines.indexOf(m), 1);
             });
-            removedNames = animationsToRemove.map(function (a) { return a.name; }).concat(machinesToRemove.map(function (m) { return m.name; }));
+            removedNames = animationsToRemove
+                .map(function (a) { return a.name; })
+                .concat(machinesToRemove.map(function (m) { return m.name; }));
         }
         this.eventManager.fire({
             type: EventType.Stop,
@@ -960,8 +989,8 @@ var Animator = /** @class */ (function () {
          * Returns true if at least one animation is active
          */
         get: function () {
-            return this.animations.reduce(function (acc, curr) { return acc || curr.playing; }, false)
-                || this.stateMachines.reduce(function (acc, curr) { return acc || curr.playing; }, false);
+            return (this.animations.reduce(function (acc, curr) { return acc || curr.playing; }, false) ||
+                this.stateMachines.reduce(function (acc, curr) { return acc || curr.playing; }, false));
         },
         enumerable: false,
         configurable: true
@@ -971,8 +1000,8 @@ var Animator = /** @class */ (function () {
          * Returns true if all animations are paused and there's at least one animation
          */
         get: function () {
-            return !this.isPlaying &&
-                (this.animations.length > 0 || this.stateMachines.length > 0);
+            return (!this.isPlaying &&
+                (this.animations.length > 0 || this.stateMachines.length > 0));
         },
         enumerable: false,
         configurable: true
@@ -997,11 +1026,11 @@ var Animator = /** @class */ (function () {
         if (this.animations.length === 0 && this.stateMachines.length === 0) {
             if (this.artboard.animationCount() > 0) {
                 // Add the first animation
-                this.add([instancedName = this.artboard.animationByIndex(0).name], playing, fireEvent);
+                this.add([(instancedName = this.artboard.animationByIndex(0).name)], playing, fireEvent);
             }
             else if (this.artboard.stateMachineCount() > 0) {
                 // Add the first state machine
-                this.add([instancedName = this.artboard.stateMachineByIndex(0).name], playing, fireEvent);
+                this.add([(instancedName = this.artboard.stateMachineByIndex(0).name)], playing, fireEvent);
             }
         }
         return instancedName;
@@ -1021,7 +1050,7 @@ var Animator = /** @class */ (function () {
             else if (animation.loopValue === 1 && animation.loopCount) {
                 this.eventManager.fire({
                     type: EventType.Loop,
-                    data: { animation: animation.name, type: LoopType.Loop }
+                    data: { animation: animation.name, type: LoopType.Loop },
                 });
                 animation.loopCount = 0;
             }
@@ -1031,7 +1060,7 @@ var Animator = /** @class */ (function () {
             else if (animation.loopValue === 2 && animation.loopCount > 1) {
                 this.eventManager.fire({
                     type: EventType.Loop,
-                    data: { animation: animation.name, type: LoopType.PingPong }
+                    data: { animation: animation.name, type: LoopType.PingPong },
                 });
                 animation.loopCount = 0;
             }
@@ -1079,7 +1108,7 @@ var LoopType;
 (function (LoopType) {
     LoopType["OneShot"] = "oneshot";
     LoopType["Loop"] = "loop";
-    LoopType["PingPong"] = "pingpong"; // has value 2 in runtime
+    LoopType["PingPong"] = "pingpong";
 })(LoopType || (LoopType = {}));
 // Manages Rive events and listeners
 var EventManager = /** @class */ (function () {
@@ -1183,6 +1212,8 @@ var Rive = /** @class */ (function () {
         this.readyForPlaying = false;
         // Runtime artboard
         this.artboard = null;
+        // place to clear up event listeners
+        this.eventCleanup = null;
         // Durations to generate a frame for the last second. Used for performance profiling.
         this.durations = [];
         this.frameTimes = [];
@@ -1263,7 +1294,8 @@ var Rive = /** @class */ (function () {
         this.loaded = false;
         this.readyForPlaying = false;
         // Ensure the runtime is loaded
-        RuntimeLoader.awaitInstance().then(function (runtime) {
+        RuntimeLoader.awaitInstance()
+            .then(function (runtime) {
             _this.runtime = runtime;
             // Get the canvas where you want to render the animation and create a renderer
             _this.renderer = _this.runtime.makeRenderer(_this.canvas, useOffscreenRenderer);
@@ -1277,7 +1309,7 @@ var Rive = /** @class */ (function () {
                 var activeStateMachineInstances = (_this.animator.stateMachines || [])
                     .filter(function (sm) { return sm.playing; })
                     .map(function (sm) { return sm.instance; });
-                (0,_utils__WEBPACK_IMPORTED_MODULE_2__.registerTouchInteractions)({
+                _this.eventCleanup = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.registerTouchInteractions)({
                     canvas: _this.canvas,
                     artboard: _this.artboard,
                     stateMachines: activeStateMachineInstances,
@@ -1290,7 +1322,8 @@ var Rive = /** @class */ (function () {
                 .catch(function (e) {
                 console.error(e);
             });
-        }).catch(function (e) {
+        })
+            .catch(function (e) {
             console.error(e);
         });
     };
@@ -1322,7 +1355,7 @@ var Rive = /** @class */ (function () {
                             this.loaded = true;
                             this.eventManager.fire({
                                 type: EventType.Load,
-                                data: (_a = this.src) !== null && _a !== void 0 ? _a : 'buffer'
+                                data: (_a = this.src) !== null && _a !== void 0 ? _a : 'buffer',
                             });
                             // Flag ready for playback commands and clear the task queue; this order
                             // is important or it may infinitely recurse
@@ -1345,9 +1378,9 @@ var Rive = /** @class */ (function () {
     // Initialize for playback
     Rive.prototype.initArtboard = function (artboardName, animationNames, stateMachineNames, autoplay) {
         // Fetch the artboard
-        var rootArtboard = artboardName ?
-            this.file.artboardByName(artboardName) :
-            this.file.defaultArtboard();
+        var rootArtboard = artboardName
+            ? this.file.artboardByName(artboardName)
+            : this.file.defaultArtboard();
         // Check we have a working artboard
         if (!rootArtboard) {
             var msg = 'Invalid artboard name or no default artboard';
@@ -1382,7 +1415,7 @@ var Rive = /** @class */ (function () {
             event: {
                 type: autoplay ? EventType.Play : EventType.Pause,
                 data: instanceNames,
-            }
+            },
         });
     };
     // Draws the current artboard frame
@@ -1402,7 +1435,7 @@ var Rive = /** @class */ (function () {
             this.lastRenderTime = time;
         }
         // Handle the onSecond callback
-        this.renderSecondTimer += (time - this.lastRenderTime);
+        this.renderSecondTimer += time - this.lastRenderTime;
         if (this.renderSecondTimer > 5000) {
             this.renderSecondTimer = 0;
             onSecond === null || onSecond === void 0 ? void 0 : onSecond();
@@ -1413,10 +1446,11 @@ var Rive = /** @class */ (function () {
         // - Advance non-paused animations by the elapsed number of seconds
         // - Advance any animations that require scrubbing
         // - Advance to the first frame even when autoplay is false
-        var activeAnimations = this.animator.animations.filter(function (a) { return a.playing || a.needsScrub; })
+        var activeAnimations = this.animator.animations
+            .filter(function (a) { return a.playing || a.needsScrub; })
             // The scrubbed animations must be applied first to prevent weird artifacts
             // if the playing animations conflict with the scrubbed animating attribuates.
-            .sort(function (first, second) { return first.needsScrub ? -1 : 1; });
+            .sort(function (first, second) { return (first.needsScrub ? -1 : 1); });
         for (var _i = 0, activeAnimations_1 = activeAnimations; _i < activeAnimations_1.length; _i++) {
             var animation = activeAnimations_1[_i];
             animation.advance(elapsedTime);
@@ -1486,7 +1520,7 @@ var Rive = /** @class */ (function () {
             minX: _layout.minX,
             minY: _layout.minY,
             maxX: _layout.maxX,
-            maxY: _layout.maxY
+            maxY: _layout.maxY,
         }, artboard.bounds);
     };
     Object.defineProperty(Rive.prototype, "fps", {
@@ -1514,6 +1548,9 @@ var Rive = /** @class */ (function () {
      * might happen.
      */
     Rive.prototype.cleanup = function () {
+        if (this.eventCleanup !== null) {
+            this.eventCleanup();
+        }
         this.artboard.delete();
         // TODO: delete animation and state machine instances
     };
@@ -1592,6 +1629,7 @@ var Rive = /** @class */ (function () {
         this.cleanup();
         // Reinitialize an artboard instance with the state
         this.initArtboard(artBoardName, animationNames, stateMachineNames, autoplay);
+        this.taskQueue.process();
     };
     // Loads a new Rive file, keeping listeners in place
     Rive.prototype.load = function (params) {
@@ -1632,7 +1670,7 @@ var Rive = /** @class */ (function () {
             minX: 0,
             minY: 0,
             maxX: this.canvas.width,
-            maxY: this.canvas.height
+            maxY: this.canvas.height,
         });
     };
     /**
@@ -1738,9 +1776,7 @@ var Rive = /** @class */ (function () {
             if (!this.loaded) {
                 return [];
             }
-            return this.animator.animations
-                .filter(function (a) { return a.playing; })
-                .map(function (a) { return a.name; });
+            return this.animator.animations.filter(function (a) { return a.playing; }).map(function (a) { return a.name; });
         },
         enumerable: false,
         configurable: true
@@ -1926,7 +1962,10 @@ var Rive = /** @class */ (function () {
                         var input = instance.input(l);
                         inputContents.push({ name: input.name, type: input.type });
                     }
-                    artboardContents.stateMachines.push({ name: name_1, inputs: inputContents });
+                    artboardContents.stateMachines.push({
+                        name: name_1,
+                        inputs: inputContents,
+                    });
                 }
                 riveContents.artboards.push(artboardContents);
             }