@rive-app/canvas-lite 2.37.1 → 2.37.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.37.1",
+  "version": "2.37.3",
   "description": "A lite version of Rive's canvas based web api.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.js

@@ -155,6 +155,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _rive_advanced_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony import */ var package_json__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
+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);
+};
 
 
 // Runtime singleton; use getInstance to provide a callback that returns the
@@ -165,12 +176,15 @@ var RuntimeLoader = /** @class */ (function () {
     }
     // Loads the runtime
     RuntimeLoader.loadRuntime = function () {
+        // Capture the URL at call time so the catch closure always refers to the
+        // URL this particular attempt used, even if wasmURL is mutated for a retry.
+        var attemptedUrl = RuntimeLoader.wasmURL;
+        var wasmBinary = RuntimeLoader.wasmBinary;
         if (RuntimeLoader.enablePerfMarks)
             performance.mark('rive:wasm-init:start');
-        _rive_advanced_mjs__WEBPACK_IMPORTED_MODULE_0__["default"]({
+        _rive_advanced_mjs__WEBPACK_IMPORTED_MODULE_0__["default"](__assign({ 
             // Loads Wasm bundle
-            locateFile: function () { return RuntimeLoader.wasmURL; },
-        })
+            locateFile: function () { return attemptedUrl; } }, (wasmBinary ? { wasmBinary: wasmBinary } : {})))
             .then(function (rive) {
             var _a;
             if (RuntimeLoader.enablePerfMarks) {
@@ -195,18 +209,30 @@ var RuntimeLoader = /** @class */ (function () {
             };
             // Log detailed error for debugging
             console.debug("Rive WASM load error details:", errorDetails);
-            // In case unpkg fails, or the wasm was not supported, we try to load the fallback module from jsdelivr.
-            // This `rive_fallback.wasm` is compiled to support older architecture.
-            // TODO: (Gordon): preemptively test browser support and load the correct wasm file. Then use jsdelvr only if unpkg fails.
-            var backupJsdelivrUrl = "https://cdn.jsdelivr.net/npm/".concat(package_json__WEBPACK_IMPORTED_MODULE_1__.name, "@").concat(package_json__WEBPACK_IMPORTED_MODULE_1__.version, "/rive_fallback.wasm");
-            if (RuntimeLoader.wasmURL.toLowerCase() !== backupJsdelivrUrl) {
-                console.warn("Failed to load WASM from ".concat(RuntimeLoader.wasmURL, " (").concat(errorDetails.message, "), trying jsdelivr as a backup"));
-                RuntimeLoader.setWasmUrl(backupJsdelivrUrl);
+            // In case the primary URL fails, or the wasm was not supported, try the
+            // fallback URL (a rive_fallback.wasm compiled for older architectures).
+            // The fallback can be customised or disabled via setWasmFallbackUrl().
+            // TODO: (Gordon): preemptively test browser support and load the correct wasm file. Then use the fallback only if the primary fails.
+            var fallbackUrl = RuntimeLoader.wasmFallbackURL;
+            var alreadyOnFallback = fallbackUrl !== null &&
+                attemptedUrl.toLowerCase() === fallbackUrl.toLowerCase();
+            if (fallbackUrl !== null && !alreadyOnFallback) {
+                console.warn("Failed to load WASM from ".concat(attemptedUrl, " (").concat(errorDetails.message, "), trying fallback URL: ").concat(fallbackUrl));
+                // Clear wasmBinary so the retry actually fetches via locateFile
+                // instead of re-using the same (failing) in-memory binary.
+                RuntimeLoader.wasmBinary = null;
+                RuntimeLoader.setWasmUrl(fallbackUrl);
                 RuntimeLoader.loadRuntime();
             }
             else {
+                // When alreadyOnFallback is true, wasmURL has already been overwritten
+                // with the fallback URL, so we can no longer recover the original
+                // primary URL here. The primary URL was logged in the earlier warning.
+                var triedUrls = alreadyOnFallback
+                    ? "the configured WASM URL or its fallback (".concat(fallbackUrl, ")")
+                    : attemptedUrl;
                 var errorMessage = [
-                    "Could not load Rive WASM file from ".concat(RuntimeLoader.wasmURL, " or ").concat(backupJsdelivrUrl, "."),
+                    "Could not load Rive WASM file from ".concat(triedUrls, "."),
                     "Possible reasons:",
                     "- Network connection is down",
                     "- WebAssembly is not supported in this environment",
@@ -252,6 +278,31 @@ var RuntimeLoader = /** @class */ (function () {
     RuntimeLoader.getWasmUrl = function () {
         return RuntimeLoader.wasmURL;
     };
+    /**
+     * Sets the URL used as a fallback when the primary WASM URL fails to load.
+     * Pass `null` to disable the fallback entirely.
+     *
+     * Defaults to pulling from the jsdelivr CDN.
+     */
+    RuntimeLoader.setWasmFallbackUrl = function (url) {
+        RuntimeLoader.wasmFallbackURL = url;
+    };
+    // Gets the current fallback wasm url (null means fallback is disabled)
+    RuntimeLoader.getWasmFallbackUrl = function () {
+        return RuntimeLoader.wasmFallbackURL;
+    };
+    // Manually sets the wasm binary or clears it with null
+    RuntimeLoader.setWasmBinary = function (value) {
+        if ((value instanceof ArrayBuffer) || value === null) {
+            RuntimeLoader.wasmBinary = value;
+            return;
+        }
+        console.error("setWasmBinary expects an ArrayBuffer or null");
+    };
+    // Gets the current wasm build as ArrayBuffer or null
+    RuntimeLoader.getWasmBinary = function () {
+        return RuntimeLoader.wasmBinary;
+    };
     // Flag to indicate that loading has started/completed
     RuntimeLoader.isLoading = false;
     // List of callbacks for the runtime that come in while loading
@@ -259,6 +310,10 @@ var RuntimeLoader = /** @class */ (function () {
     // Path to the Wasm file; default path works for testing only;
     // if embedded wasm is used then this is never used.
     RuntimeLoader.wasmURL = "https://unpkg.com/".concat(package_json__WEBPACK_IMPORTED_MODULE_1__.name, "@").concat(package_json__WEBPACK_IMPORTED_MODULE_1__.version, "/rive.wasm");
+    // Fallback WASM URL tried when the primary URL fails. Set to null to disable
+    // the fallback entirely. Defaults to pulling from the jsdelivr CDN.
+    RuntimeLoader.wasmFallbackURL = "https://cdn.jsdelivr.net/npm/".concat(package_json__WEBPACK_IMPORTED_MODULE_1__.name, "@").concat(package_json__WEBPACK_IMPORTED_MODULE_1__.version, "/rive_fallback.wasm");
+    RuntimeLoader.wasmBinary = null;
     /**
      * When true, performance.mark / performance.measure entries are emitted for
      * WASM initialization.
@@ -2474,7 +2529,7 @@ moduleRtn = da;
 /* 5 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.37.1","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","runtimeLoader.d.ts","utils"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.37.3","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","runtimeLoader.d.ts","utils"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 6 */
@@ -2518,60 +2573,70 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 var _this = undefined;
 /**
- * Returns the clientX and clientY properties from touch or mouse events. Also
- * calls preventDefault() on the event if it is a touchstart or touchmove to prevent
- * scrolling the page on mobile devices
- * @param event - Either a TouchEvent or a MouseEvent
- * @returns - Coordinates of the clientX and clientY properties from the touch/mouse event
+ * Extracts ClientCoordinates from a TouchList, respecting multi-touch vs.
+ * single-touch mode. In single-touch mode, only the touch matching
+ * primaryTouchId is returned (or the first touch when primaryTouchId is null).
  */
-var getClientCoordinates = function (event, isTouchScrollEnabled, enableMultiTouch) {
-    var _a, _b;
+var getTouchCoordinates = function (changedTouches, enableMultiTouch, primaryTouchId) {
+    var _a;
     var coordinates = [];
-    if (["touchstart", "touchmove"].indexOf(event.type) > -1 &&
-        ((_a = event.changedTouches) === null || _a === void 0 ? void 0 : _a.length)) {
-        // 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();
-        }
-        var cnt = 0;
-        var totalTouches = enableMultiTouch
-            ? event.changedTouches.length
-            : 1;
-        while (cnt < totalTouches) {
-            var touch = event.changedTouches[cnt];
+    if (enableMultiTouch) {
+        for (var i = 0; i < changedTouches.length; i++) {
+            var touch = changedTouches[i];
             coordinates.push({
                 clientX: touch.clientX,
                 clientY: touch.clientY,
                 identifier: touch.identifier,
             });
-            cnt++;
         }
     }
-    else if (event.type === "touchend" &&
-        ((_b = event.changedTouches) === null || _b === void 0 ? void 0 : _b.length)) {
-        var cnt = 0;
-        var totalTouches = enableMultiTouch
-            ? event.changedTouches.length
-            : 1;
-        while (cnt < totalTouches) {
-            var touch = event.changedTouches[cnt];
+    else {
+        // In "single-touch mode", only track the primary finger identified at touchstart.
+        // Search changedTouches for the touch matching the recorded primary touch identifier, or (on initial touchstart)
+        // take the first available touch identifier.
+        var primaryTouch = primaryTouchId !== null
+            ? (_a = Array.from(changedTouches).find(function (t) { return t.identifier === primaryTouchId; })) !== null && _a !== void 0 ? _a : null
+            : changedTouches[0];
+        if (primaryTouch) {
             coordinates.push({
-                clientX: touch.clientX,
-                clientY: touch.clientY,
-                identifier: touch.identifier,
+                clientX: primaryTouch.clientX,
+                clientY: primaryTouch.clientY,
+                identifier: primaryTouch.identifier,
             });
-            cnt++;
         }
     }
-    else {
-        coordinates.push({
+    return coordinates;
+};
+/**
+ * Returns the clientX and clientY properties from touch or mouse events. Also
+ * calls preventDefault() on the event if it is a touchstart or touchmove to prevent
+ * scrolling the page on mobile devices
+ * @param event - Either a TouchEvent or a MouseEvent
+ * @param isTouchScrollEnabled - Whether touch scrolling is enabled
+ * @param enableMultiTouch - Whether to process multiple simultaneous touches
+ * @param primaryTouchId - When working with single touches, only process the touch
+ *   with this identifier. Pass null to accept any touch (used during touchstart to
+ *   capture the first finger down).
+ * @returns - Coordinates of the clientX and clientY properties from the touch/mouse event
+ */
+var getClientCoordinates = function (event, isTouchScrollEnabled, enableMultiTouch, primaryTouchId) {
+    var _a;
+    var touchEvent = event;
+    if ((_a = touchEvent.changedTouches) === null || _a === void 0 ? void 0 : _a.length) {
+        // 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 && ["touchstart", "touchmove"].includes(event.type)) {
+            event.preventDefault();
+        }
+        return getTouchCoordinates(touchEvent.changedTouches, enableMultiTouch, primaryTouchId);
+    }
+    return [
+        {
             clientX: event.clientX,
             clientY: event.clientY,
             identifier: 0,
-        });
-    }
-    return coordinates;
+        },
+    ];
 };
 /**
  * Registers mouse move/up/down callback handlers on the canvas to send meaningful coordinates to
@@ -2603,7 +2668,15 @@ var registerTouchInteractions = function (_a) {
      **/
     var _prevEventType = null;
     var _syntheticEventsActive = false;
+    /**
+     * When enableMultiTouch is false ("single-touch mode"), we track the identifier of the first finger that touched down.
+     * All subsequent touch events are filtered to this identifier so that a second finger
+     * moving cannot displace the tracked pointer position.
+     * Reset to null when the primary finger lifts (or touchcancel is called)
+     */
+    var _primaryTouchId = null;
     var processEventCallback = function (event) {
+        var _a;
         // Exit early out of all synthetic mouse events
         // https://stackoverflow.com/questions/9656990/how-to-prevent-simulated-mouse-events-in-mobile-browsers
         // https://stackoverflow.com/questions/25572070/javascript-touchend-versus-click-dilemma
@@ -2622,7 +2695,15 @@ var registerTouchInteractions = function (_a) {
                 _prevEventType === "touchstart";
         _prevEventType = event.type;
         var boundingRect = event.currentTarget.getBoundingClientRect();
-        var coordinateSets = getClientCoordinates(event, isTouchScrollEnabled, enableMultiTouch);
+        // On touchstart in single-touch mode, record the first new finger as the primary
+        // touch if we aren't already tracking one.
+        if (!enableMultiTouch && event.type === "touchstart" && _primaryTouchId === null) {
+            var firstTouch = (_a = event.changedTouches) === null || _a === void 0 ? void 0 : _a[0];
+            if (firstTouch) {
+                _primaryTouchId = firstTouch.identifier;
+            }
+        }
+        var coordinateSets = getClientCoordinates(event, isTouchScrollEnabled, enableMultiTouch, enableMultiTouch ? null : _primaryTouchId);
         var forwardMatrix = rive.computeAlignment(fit, alignment, {
             minX: 0,
             minY: 0,
@@ -2687,8 +2768,8 @@ var registerTouchInteractions = function (_a) {
                         stateMachine.pointerMove(coordinateSet.transformedX, coordinateSet.transformedY, coordinateSet.identifier);
                     });
                 };
-                for (var _a = 0, stateMachines_2 = stateMachines; _a < stateMachines_2.length; _a++) {
-                    var stateMachine = stateMachines_2[_a];
+                for (var _b = 0, stateMachines_2 = stateMachines; _b < stateMachines_2.length; _b++) {
+                    var stateMachine = stateMachines_2[_b];
                     _loop_2(stateMachine);
                 }
                 break;
@@ -2701,8 +2782,8 @@ var registerTouchInteractions = function (_a) {
                         stateMachine.pointerDown(coordinateSet.transformedX, coordinateSet.transformedY, coordinateSet.identifier);
                     });
                 };
-                for (var _b = 0, stateMachines_3 = stateMachines; _b < stateMachines_3.length; _b++) {
-                    var stateMachine = stateMachines_3[_b];
+                for (var _c = 0, stateMachines_3 = stateMachines; _c < stateMachines_3.length; _c++) {
+                    var stateMachine = stateMachines_3[_c];
                     _loop_3(stateMachine);
                 }
                 break;
@@ -2715,10 +2796,16 @@ var registerTouchInteractions = function (_a) {
                         stateMachine.pointerExit(coordinateSet.transformedX, coordinateSet.transformedY, coordinateSet.identifier);
                     });
                 };
-                for (var _c = 0, stateMachines_4 = stateMachines; _c < stateMachines_4.length; _c++) {
-                    var stateMachine = stateMachines_4[_c];
+                for (var _d = 0, stateMachines_4 = stateMachines; _d < stateMachines_4.length; _d++) {
+                    var stateMachine = stateMachines_4[_d];
                     _loop_4(stateMachine);
                 }
+                // Release the primary touch lock once that finger lifts so the next
+                // touchstart can claim a new primary finger.
+                if (!enableMultiTouch &&
+                    coordinateSets.some(function (c) { return c.identifier === _primaryTouchId; })) {
+                    _primaryTouchId = null;
+                }
                 break;
             }
             case "mouseup": {
@@ -2727,8 +2814,8 @@ var registerTouchInteractions = function (_a) {
                         stateMachine.pointerUp(coordinateSet.transformedX, coordinateSet.transformedY, coordinateSet.identifier);
                     });
                 };
-                for (var _d = 0, stateMachines_5 = stateMachines; _d < stateMachines_5.length; _d++) {
-                    var stateMachine = stateMachines_5[_d];
+                for (var _e = 0, stateMachines_5 = stateMachines; _e < stateMachines_5.length; _e++) {
+                    var stateMachine = stateMachines_5[_e];
                     _loop_5(stateMachine);
                 }
                 break;
@@ -2736,6 +2823,9 @@ var registerTouchInteractions = function (_a) {
             default:
         }
     };
+    var touchCancelCallback = function () {
+        _primaryTouchId = null;
+    };
     var callback = processEventCallback.bind(_this);
     canvas.addEventListener("mouseover", callback);
     canvas.addEventListener("mouseout", callback);
@@ -2749,6 +2839,7 @@ var registerTouchInteractions = function (_a) {
         passive: isTouchScrollEnabled,
     });
     canvas.addEventListener("touchend", callback);
+    canvas.addEventListener("touchcancel", touchCancelCallback);
     return function () {
         canvas.removeEventListener("mouseover", callback);
         canvas.removeEventListener("mouseout", callback);
@@ -2758,6 +2849,7 @@ var registerTouchInteractions = function (_a) {
         canvas.removeEventListener("touchmove", callback);
         canvas.removeEventListener("touchstart", callback);
         canvas.removeEventListener("touchend", callback);
+        canvas.removeEventListener("touchcancel", touchCancelCallback);
     };
 };