@rive-app/webgl2 2.13.0 → 2.13.2

package/package.json

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

package/rive.d.ts

@@ -5,6 +5,9 @@ export type { FileAsset, FontAsset, ImageAsset } from './rive_advanced.mjs';
  */
 export type VoidCallback = () => void;
 export type AssetLoadCallback = (asset: rc.FileAsset, bytes: Uint8Array) => Boolean;
+interface SetupRiveListenersOptions {
+    isTouchScrollEnabled?: boolean;
+}
 /**
  * Type for artboard bounds
  */
@@ -202,6 +205,12 @@ export interface RiveParameters {
      * will be attached to the <canvas> element
      */
     shouldDisableRiveListeners?: boolean;
+    /**
+     * For Rive Listeners, allows scrolling behavior to still occur on canvas elements
+     * when a touch/drag action is performed on touch-enabled devices. Otherwise,
+     * scroll behavior may be prevented on touch/drag actions on the canvas by default.
+     */
+    isTouchScrollEnabled?: boolean;
     /**
      * Enable Rive Events to be handled by the runtime. This means any special Rive Event may have
      * a side effect that takes place implicitly.
@@ -298,10 +307,21 @@ export declare class Rive {
     durations: number[];
     frameTimes: number[];
     frameCount: number;
+    isTouchScrollEnabled: boolean;
     constructor(params: RiveParameters);
     static new(params: RiveParameters): Rive;
     private init;
-    private setupRiveListeners;
+    /**
+     * Setup Rive Listeners on the canvas
+     * @param riveListenerOptions - Enables TouchEvent events on the canvas. Set to true to allow
+     * touch scrolling on the canvas element on touch-enabled devices
+     * i.e. { isTouchScrollEnabled: true }
+     */
+    setupRiveListeners(riveListenerOptions?: SetupRiveListenersOptions): void;
+    /**
+     * Remove Rive Listeners setup on the canvas
+     */
+    removeRiveListeners(): void;
     private initData;
     private initArtboard;
     drawFrame(): void;

package/rive.js

@@ -410,7 +410,7 @@ function Pa(a, b) {
     return Oa(c, a, b);
   }));
 }
-var J, K, Ta = {276936:(a, b, c, d, e) => {
+var J, K, Ta = {473544:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -473,9 +473,9 @@ var J, K, Ta = {276936:(a, b, c, d, e) => {
   }
   window.h.Da += 1;
   return 1;
-}, 279114:() => {
+}, 475722:() => {
   "undefined" !== typeof window.h && (--window.h.Da, 0 === window.h.Da && delete window.h);
-}, 279278:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 279382:() => {
+}, 475886:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 475990:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -483,7 +483,7 @@ var J, K, Ta = {276936:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 279553:(a, b, c, d, e, f) => {
+}, 476161:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -529,7 +529,7 @@ var J, K, Ta = {276936:(a, b, c, d, e) => {
   a == window.h.I.Ca && g.Z.connect(g.J.destination);
   g.kb = f;
   return window.h.tc(g);
-}, 282430:a => window.h.wa(a).J.sampleRate, 282503:a => {
+}, 479038:a => window.h.wa(a).J.sampleRate, 479111:a => {
   a = window.h.wa(a);
   void 0 !== a.Z && (a.Z.onaudioprocess = function() {
   }, a.Z.disconnect(), a.Z = void 0);
@@ -537,13 +537,13 @@ var J, K, Ta = {276936:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.kb = void 0;
-}, 282903:a => {
+}, 479511:a => {
   window.h.xb(a);
-}, 282953:a => {
+}, 479561:a => {
   a = window.h.wa(a);
   a.J.resume();
   a.state = window.h.ha.sb;
-}, 283092:a => {
+}, 479700:a => {
   a = window.h.wa(a);
   a.J.suspend();
   a.state = window.h.ha.stopped;
@@ -3548,8 +3548,8 @@ n.dynCall_viijii = (a, b, c, d, e, f, g) => (n.dynCall_viijii = y.dynCall_viijii
 n.dynCall_iiiiij = (a, b, c, d, e, f, g) => (n.dynCall_iiiiij = y.dynCall_iiiiij)(a, b, c, d, e, f, g);
 n.dynCall_iiiiijj = (a, b, c, d, e, f, g, m, p) => (n.dynCall_iiiiijj = y.dynCall_iiiiijj)(a, b, c, d, e, f, g, m, p);
 n.dynCall_iiiiiijj = (a, b, c, d, e, f, g, m, p, l) => (n.dynCall_iiiiiijj = y.dynCall_iiiiiijj)(a, b, c, d, e, f, g, m, p, l);
-n.___start_em_js = 274312;
-n.___stop_em_js = 276936;
+n.___start_em_js = 470920;
+n.___stop_em_js = 473544;
 var $d;
 Ia = function ae() {
   $d || be();
@@ -3609,7 +3609,7 @@ be();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl2","version":"2.13.0","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","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/webgl2","version":"2.13.2","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -3643,11 +3643,15 @@ var _this = undefined;
  * @param event - Either a TouchEvent or a MouseEvent
  * @returns - Coordinates of the clientX and clientY properties from the touch/mouse event
  */
-var getClientCoordinates = function (event) {
+var getClientCoordinates = function (event, isTouchScrollEnabled) {
     var _a, _b;
     if (["touchstart", "touchmove"].indexOf(event.type) > -1 &&
         ((_a = event.touches) === null || _a === void 0 ? void 0 : _a.length)) {
-        event.preventDefault();
+        // This flag, if false, prevents touch events on the canvas default behavior
+        // which may prevent scrolling if a drag motion on the canvas is performed
+        if (!isTouchScrollEnabled) {
+            event.preventDefault();
+        }
         return {
             clientX: event.touches[0].clientX,
             clientY: event.touches[0].clientY,
@@ -3672,7 +3676,7 @@ var getClientCoordinates = function (event) {
  * the state machine pointer move/up/down functions based on cursor interaction
  */
 var registerTouchInteractions = function (_a) {
-    var canvas = _a.canvas, artboard = _a.artboard, _b = _a.stateMachines, stateMachines = _b === void 0 ? [] : _b, renderer = _a.renderer, rive = _a.rive, fit = _a.fit, alignment = _a.alignment;
+    var canvas = _a.canvas, artboard = _a.artboard, _b = _a.stateMachines, stateMachines = _b === void 0 ? [] : _b, renderer = _a.renderer, rive = _a.rive, fit = _a.fit, alignment = _a.alignment, _c = _a.isTouchScrollEnabled, isTouchScrollEnabled = _c === void 0 ? false : _c;
     if (!canvas ||
         !stateMachines.length ||
         !renderer ||
@@ -3683,7 +3687,7 @@ var registerTouchInteractions = function (_a) {
     }
     var processEventCallback = function (event) {
         var boundingRect = event.currentTarget.getBoundingClientRect();
-        var _a = getClientCoordinates(event), clientX = _a.clientX, clientY = _a.clientY;
+        var _a = getClientCoordinates(event, isTouchScrollEnabled), clientX = _a.clientX, clientY = _a.clientY;
         if (!clientX && !clientY) {
             return;
         }
@@ -4869,6 +4873,7 @@ var Rive = /** @class */ (function () {
         this.durations = [];
         this.frameTimes = [];
         this.frameCount = 0;
+        this.isTouchScrollEnabled = false;
         /**
          * Used be draw to track when a second of active rendering time has passed.
          * Used for debugging purposes
@@ -4879,6 +4884,7 @@ var Rive = /** @class */ (function () {
         this.buffer = params.buffer;
         this.layout = (_a = params.layout) !== null && _a !== void 0 ? _a : new Layout();
         this.shouldDisableRiveListeners = !!params.shouldDisableRiveListeners;
+        this.isTouchScrollEnabled = !!params.isTouchScrollEnabled;
         this.automaticallyHandleEvents = !!params.automaticallyHandleEvents;
         this.enableRiveAssetCDN =
             params.enableRiveAssetCDN === undefined
@@ -4980,12 +4986,22 @@ var Rive = /** @class */ (function () {
             console.error(e);
         });
     };
-    Rive.prototype.setupRiveListeners = function () {
+    /**
+     * Setup Rive Listeners on the canvas
+     * @param riveListenerOptions - Enables TouchEvent events on the canvas. Set to true to allow
+     * touch scrolling on the canvas element on touch-enabled devices
+     * i.e. { isTouchScrollEnabled: true }
+     */
+    Rive.prototype.setupRiveListeners = function (riveListenerOptions) {
         var _this = this;
         if (!this.shouldDisableRiveListeners) {
             var activeStateMachines = (this.animator.stateMachines || [])
                 .filter(function (sm) { return sm.playing && _this.runtime.hasListeners(sm.instance); })
                 .map(function (sm) { return sm.instance; });
+            var touchScrollEnabledOption = this.isTouchScrollEnabled;
+            if (riveListenerOptions && 'isTouchScrollEnabled' in riveListenerOptions) {
+                touchScrollEnabledOption = riveListenerOptions.isTouchScrollEnabled;
+            }
             this.eventCleanup = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.registerTouchInteractions)({
                 canvas: this.canvas,
                 artboard: this.artboard,
@@ -4994,9 +5010,18 @@ var Rive = /** @class */ (function () {
                 rive: this.runtime,
                 fit: this._layout.runtimeFit(this.runtime),
                 alignment: this._layout.runtimeAlignment(this.runtime),
+                isTouchScrollEnabled: touchScrollEnabledOption,
             });
         }
     };
+    /**
+     * Remove Rive Listeners setup on the canvas
+     */
+    Rive.prototype.removeRiveListeners = function () {
+        if (this.eventCleanup) {
+            this.eventCleanup();
+        }
+    };
     // Initializes runtime with Rive data and preps for playing
     Rive.prototype.initData = function (artboardName, animationNames, stateMachineNames, autoplay) {
         var _a;