@rive-app/canvas-single 1.0.103 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-single",
-  "version": "1.0.103",
+  "version": "1.1.0",
   "description": "Rive's high-level canvas based web api all in one js file.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.js

@@ -134,7 +134,7 @@ if(m.preInit)for("function"==typeof m.preInit&&(m.preInit=[m.preInit]);0<m.preIn
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/canvas-single","version":"1.0.103","description":"Rive\'s high-level canvas based web api all in one js file.","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/canvas-single","version":"1.1.0","description":"Rive\'s high-level canvas based web api all in one js file.","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 */
@@ -156,94 +156,128 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "registerTouchInteractions": () => (/* binding */ registerTouchInteractions)
 /* 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
+ */
+var getClientCoordinates = function (event) {
+    var _a, _b;
+    if (["touchstart", "touchmove"].indexOf(event.type) > -1 &&
+        ((_a = event.touches) === null || _a === void 0 ? void 0 : _a.length)) {
+        event.preventDefault();
+        return {
+            clientX: event.touches[0].clientX,
+            clientY: event.touches[0].clientY,
+        };
+    }
+    else if (event.type === "touchend" &&
+        ((_b = event.changedTouches) === null || _b === void 0 ? void 0 : _b.length)) {
+        return {
+            clientX: event.changedTouches[0].clientX,
+            clientY: event.changedTouches[0].clientY,
+        };
+    }
+    else {
+        return {
+            clientX: event.clientX,
+            clientY: event.clientY,
+        };
+    }
+};
 /**
  * Registers mouse move/up/down callback handlers on the canvas to send meaningful coordinates to
  * the state machine pointer move/up/down functions based on cursor interaction
  */
-const registerTouchInteractions = ({
-  canvas,
-  artboard,
-  stateMachines = [],
-  renderer,
-  rive,
-  fit,
-  alignment,
-}) => {
-  if (!canvas || !stateMachines.length || !renderer || !rive || !artboard) {
-    return null;
-  }
-
-  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,
-      {
-        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();
-
-    transformedVector.delete();
-    invertedMatrix.delete();
-    canvasCoordinatesVector.delete();
-    forwardMatrix.delete();
-
-    switch (event.type) {
-      // Pointer moving/hovering on the canvas
-      case "mouseover":
-      case "mouseout":
-      case "mousemove": {
-        for (const stateMachine of stateMachines) {
-          stateMachine.pointerMove(transformedX, transformedY);
-        }
-        break;
-      }
-      // Pointer click initiated but not released yet on the canvas
-      case "mousedown": {
-        for (const stateMachine of stateMachines) {
-          stateMachine.pointerDown(transformedX, transformedY);
+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;
+    if (!canvas ||
+        !stateMachines.length ||
+        !renderer ||
+        !rive ||
+        !artboard ||
+        typeof window === "undefined") {
+        return null;
+    }
+    var processEventCallback = function (event) {
+        var boundingRect = event.currentTarget.getBoundingClientRect();
+        var _a = getClientCoordinates(event), clientX = _a.clientX, clientY = _a.clientY;
+        if (!clientX && !clientY) {
+            return;
         }
-        break;
-      }
-      // Pointer click released on the canvas
-      case "mouseup": {
-        for (const stateMachine of stateMachines) {
-          stateMachine.pointerUp(transformedX, transformedY);
+        var canvasX = clientX - boundingRect.left;
+        var canvasY = clientY - boundingRect.top;
+        var forwardMatrix = rive.computeAlignment(fit, alignment, {
+            minX: 0,
+            minY: 0,
+            maxX: boundingRect.width,
+            maxY: boundingRect.height,
+        }, artboard.bounds);
+        var invertedMatrix = new rive.Mat2D();
+        forwardMatrix.invert(invertedMatrix);
+        var canvasCoordinatesVector = new rive.Vec2D(canvasX, canvasY);
+        var transformedVector = rive.mapXY(invertedMatrix, canvasCoordinatesVector);
+        var transformedX = transformedVector.x();
+        var transformedY = transformedVector.y();
+        transformedVector.delete();
+        invertedMatrix.delete();
+        canvasCoordinatesVector.delete();
+        forwardMatrix.delete();
+        switch (event.type) {
+            // Pointer moving/hovering on the canvas
+            case "touchmove":
+            case "mouseover":
+            case "mouseout":
+            case "mousemove": {
+                for (var _i = 0, stateMachines_1 = stateMachines; _i < stateMachines_1.length; _i++) {
+                    var stateMachine = stateMachines_1[_i];
+                    stateMachine.pointerMove(transformedX, transformedY);
+                }
+                break;
+            }
+            // Pointer click initiated but not released yet on the canvas
+            case "touchstart":
+            case "mousedown": {
+                for (var _b = 0, stateMachines_2 = stateMachines; _b < stateMachines_2.length; _b++) {
+                    var stateMachine = stateMachines_2[_b];
+                    stateMachine.pointerDown(transformedX, transformedY);
+                }
+                break;
+            }
+            // Pointer click released on the canvas
+            case "touchend":
+            case "mouseup": {
+                for (var _c = 0, stateMachines_3 = stateMachines; _c < stateMachines_3.length; _c++) {
+                    var stateMachine = stateMachines_3[_c];
+                    stateMachine.pointerUp(transformedX, transformedY);
+                }
+                break;
+            }
+            default:
         }
-        break;
-      }
-      default:
-    }
-  };
-  const callback = mouseCallback.bind(undefined);
-  canvas.addEventListener("mouseover", callback);
-  canvas.addEventListener("mouseout", callback);
-  canvas.addEventListener("mousemove", callback);
-  canvas.addEventListener("mousedown", callback);
-  canvas.addEventListener("mouseup", callback);
-  return () => {
-    canvas.removeEventListener("mouseover", callback);
-    canvas.removeEventListener("mouseout", callback);
-    canvas.removeEventListener("mousemove", callback);
-    canvas.removeEventListener("mousedown", callback);
-    canvas.removeEventListener("mouseup", callback);
-  };
+    };
+    var callback = processEventCallback.bind(_this);
+    canvas.addEventListener("mouseover", callback);
+    canvas.addEventListener("mouseout", callback);
+    canvas.addEventListener("mousemove", callback);
+    canvas.addEventListener("mousedown", callback);
+    canvas.addEventListener("mouseup", callback);
+    canvas.addEventListener("touchmove", callback);
+    canvas.addEventListener("touchstart", callback);
+    canvas.addEventListener("touchend", callback);
+    return function () {
+        canvas.removeEventListener("mouseover", callback);
+        canvas.removeEventListener("mouseout", callback);
+        canvas.removeEventListener("mousemove", callback);
+        canvas.removeEventListener("mousedown", callback);
+        canvas.removeEventListener("mouseup", callback);
+        canvas.removeEventListener("touchmove", callback);
+        canvas.removeEventListener("touchstart", callback);
+        canvas.removeEventListener("touchend", callback);
+    };
 };
 
 
@@ -1513,14 +1547,17 @@ var Rive = /** @class */ (function () {
      * Rive class
      */
     Rive.prototype.cleanup = function () {
+        var _a, _b;
         // Stop the renderer if it hasn't already been stopped.
         this.stopRendering();
         // Clean up any artboard, animation or state machine instances.
         this.cleanupInstances();
         // Delete the renderer
-        this.renderer.delete();
+        (_a = this.renderer) === null || _a === void 0 ? void 0 : _a.delete();
+        this.renderer = null;
         // Delete the rive file
-        this.file.delete();
+        (_b = this.file) === null || _b === void 0 ? void 0 : _b.delete();
+        this.file = null;
     };
     /**
      * Cleans up any Wasm-generated objects that need to be manually destroyed: