@rive-app/canvas-lite 2.37.2 → 2.37.4

package/package.json

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

package/rive.js

@@ -2529,7 +2529,7 @@ moduleRtn = da;
 /* 5 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.37.2","description":"A lite version of Rive\'s canvas based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts","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.4","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 */
@@ -2573,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
@@ -2658,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
@@ -2677,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,
@@ -2742,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;
@@ -2756,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;
@@ -2770,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": {
@@ -2782,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;
@@ -2791,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);
@@ -2804,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);
@@ -2813,6 +2849,7 @@ var registerTouchInteractions = function (_a) {
         canvas.removeEventListener("touchmove", callback);
         canvas.removeEventListener("touchstart", callback);
         canvas.removeEventListener("touchend", callback);
+        canvas.removeEventListener("touchcancel", touchCancelCallback);
     };
 };