@rive-app/canvas 2.22.0 → 2.23.1

package/package.json

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

package/rive.d.ts

@@ -357,6 +357,8 @@ export declare class Rive {
     private automaticallyHandleEvents;
     private enableRiveAssetCDN;
     private _volume;
+    private _artboardWidth;
+    private _artboardHeight;
     private _devicePixelRatioUsed;
     private _hasZeroSize;
     durations: number[];
@@ -384,6 +386,7 @@ export declare class Rive {
      * we hook the instance to the audio manager
      */
     private initializeAudio;
+    private initArtboardSize;
     private initData;
     private initArtboard;
     drawFrame(): void;
@@ -479,7 +482,12 @@ export declare class Rive {
      * Accounts for devicePixelRatio as a multiplier to render the size of the canvas drawing surface.
      * Uses the size of the backing canvas to set new width/height attributes. Need to re-render
      * and resize the layout to match the new drawing surface afterwards.
-     * Useful function for consumers to include in a window resize listener
+     * Useful function for consumers to include in a window resize listener.
+     *
+     * This method will set the {@link devicePixelRatioUsed} property.
+     *
+     * Optionally, you can provide a {@link customDevicePixelRatio} to provide a
+     * custom value.
      */
     resizeDrawingSurfaceToCanvas(customDevicePixelRatio?: number): void;
     get source(): string;
@@ -647,10 +655,46 @@ export declare class Rive {
      */
     get contents(): RiveFileContents;
     /**
-     * getter and setter for the volume of the artboard
+     * Getter / Setter for the volume of the artboard
      */
     get volume(): number;
     set volume(value: number);
+    /**
+     * The width of the artboard.
+     *
+     * This will return undefined if the artboard is not loaded yet and a custom
+     * width has not been set.
+     *
+     * Do not set this value manually when using {@link resizeDrawingSurfaceToCanvas}
+     * with a {@link Layout.fit} of {@link Fit.Layout}, as the artboard width is
+     * automatically set.
+     */
+    get artboardWidth(): number | undefined;
+    set artboardWidth(value: number);
+    /**
+     * The height of the artboard.
+     *
+     * This will return undefined if the artboard is not loaded yet and a custom
+     * height has not been set.
+     *
+     * Do not set this value manually when using {@link resizeDrawingSurfaceToCanvas}
+     * with a {@link Layout.fit} of {@link Fit.Layout}, as the artboard height is
+     * automatically set.
+     */
+    get artboardHeight(): number | undefined;
+    set artboardHeight(value: number);
+    /**
+     * Reset the artboard size to its original values.
+     */
+    resetArtboardSize(): void;
+    /**
+     * The device pixel ratio used in rendering and canvas/artboard resizing.
+     *
+     * This value will be overidden by the device pixel ratio used in
+     * {@link resizeDrawingSurfaceToCanvas}. If you use that method, do not set this value.
+     */
+    get devicePixelRatioUsed(): number;
+    set devicePixelRatioUsed(value: number);
 }
 /**
  * Contents of a state machine input

package/rive.js

@@ -746,7 +746,7 @@ function Ya(a, b) {
     return Xa(c, a, b);
   }));
 }
-var Za, $a, db = {438588:(a, b, c, d, e) => {
+var Za, $a, db = {441740:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -809,9 +809,9 @@ var Za, $a, db = {438588:(a, b, c, d, e) => {
   }
   window.h.Aa += 1;
   return 1;
-}, 440766:() => {
+}, 443918:() => {
   "undefined" !== typeof window.h && (--window.h.Aa, 0 === window.h.Aa && delete window.h);
-}, 440930:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 441034:() => {
+}, 444082:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 444186:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -819,7 +819,7 @@ var Za, $a, db = {438588:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 441205:(a, b, c, d, e, f) => {
+}, 444357:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -865,7 +865,7 @@ var Za, $a, db = {438588:(a, b, c, d, e) => {
   a == window.h.I.ya && g.Z.connect(g.J.destination);
   g.pb = f;
   return window.h.yc(g);
-}, 444082:a => window.h.ra(a).J.sampleRate, 444155:a => {
+}, 447234:a => window.h.ra(a).J.sampleRate, 447307:a => {
   a = window.h.ra(a);
   void 0 !== a.Z && (a.Z.onaudioprocess = function() {
   }, a.Z.disconnect(), a.Z = void 0);
@@ -873,13 +873,13 @@ var Za, $a, db = {438588:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.pb = void 0;
-}, 444555:a => {
+}, 447707:a => {
   window.h.Cb(a);
-}, 444605:a => {
+}, 447757:a => {
   a = window.h.ra(a);
   a.J.resume();
   a.state = window.h.ga.xb;
-}, 444744:a => {
+}, 447896:a => {
   a = window.h.ra(a);
   a.J.suspend();
   a.state = window.h.ga.stopped;
@@ -3365,7 +3365,7 @@ $d();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/canvas","version":"2.22.0","description":"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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = JSON.parse('{"name":"@rive-app/canvas","version":"2.23.1","description":"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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -3566,7 +3566,7 @@ var getClientCoordinates = function (event, isTouchScrollEnabled) {
  * 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, _c = _a.isTouchScrollEnabled, isTouchScrollEnabled = _c === void 0 ? false : _c;
+    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, _d = _a.layoutScaleFactor, layoutScaleFactor = _d === void 0 ? 1.0 : _d;
     if (!canvas ||
         !stateMachines.length ||
         !renderer ||
@@ -3621,7 +3621,7 @@ var registerTouchInteractions = function (_a) {
             minY: 0,
             maxX: boundingRect.width,
             maxY: boundingRect.height,
-        }, artboard.bounds);
+        }, artboard.bounds, layoutScaleFactor);
         var invertedMatrix = new rive.Mat2D();
         forwardMatrix.invert(invertedMatrix);
         var canvasCoordinatesVector = new rive.Vec2D(canvasX, canvasY);
@@ -5094,6 +5094,11 @@ var Rive = /** @class */ (function () {
         this.enableRiveAssetCDN = true;
         // Keep a local value of the set volume to update it asynchronously
         this._volume = 1;
+        // Keep a local value of the set width to update it asynchronously
+        this._artboardWidth = undefined;
+        // Keep a local value of the set height to update it asynchronously
+        this._artboardHeight = undefined;
+        // Keep a local value of the device pixel ratio used in rendering and canvas/artboard resizing
         this._devicePixelRatioUsed = 1;
         // Whether the canvas element's size is 0
         this._hasZeroSize = false;
@@ -5256,6 +5261,7 @@ var Rive = /** @class */ (function () {
                 fit: this._layout.runtimeFit(this.runtime),
                 alignment: this._layout.runtimeAlignment(this.runtime),
                 isTouchScrollEnabled: touchScrollEnabledOption,
+                layoutScaleFactor: this._layout.layoutScaleFactor,
             });
         }
     };
@@ -5285,6 +5291,15 @@ var Rive = /** @class */ (function () {
             }
         }
     };
+    Rive.prototype.initArtboardSize = function () {
+        if (!this.artboard)
+            return;
+        // Use preset values if they are not undefined
+        this._artboardWidth = this.artboard.width =
+            this._artboardWidth || this.artboard.width;
+        this._artboardHeight = this.artboard.height =
+            this._artboardHeight || this.artboard.height;
+    };
     // Initializes runtime with Rive data and preps for playing
     Rive.prototype.initData = function (artboardName, animationNames, stateMachineNames, autoplay) {
         var _a;
@@ -5309,6 +5324,8 @@ var Rive = /** @class */ (function () {
                         this.file = this.riveFile.getInstance();
                         // Initialize and draw frame
                         this.initArtboard(artboardName, animationNames, stateMachineNames, autoplay);
+                        // Initialize the artboard size
+                        this.initArtboardSize();
                         // Check for audio
                         this.initializeAudio();
                         // Everything's set up, emit a load event
@@ -5768,13 +5785,18 @@ var Rive = /** @class */ (function () {
      * Accounts for devicePixelRatio as a multiplier to render the size of the canvas drawing surface.
      * Uses the size of the backing canvas to set new width/height attributes. Need to re-render
      * and resize the layout to match the new drawing surface afterwards.
-     * Useful function for consumers to include in a window resize listener
+     * Useful function for consumers to include in a window resize listener.
+     *
+     * This method will set the {@link devicePixelRatioUsed} property.
+     *
+     * Optionally, you can provide a {@link customDevicePixelRatio} to provide a
+     * custom value.
      */
     Rive.prototype.resizeDrawingSurfaceToCanvas = function (customDevicePixelRatio) {
         if (this.canvas instanceof HTMLCanvasElement && !!window) {
             var _a = this.canvas.getBoundingClientRect(), width = _a.width, height = _a.height;
             var dpr = customDevicePixelRatio || window.devicePixelRatio || 1;
-            this._devicePixelRatioUsed = dpr;
+            this.devicePixelRatioUsed = dpr;
             this.canvas.width = dpr * width;
             this.canvas.height = dpr * height;
             this.startRendering();
@@ -6234,7 +6256,7 @@ var Rive = /** @class */ (function () {
     });
     Object.defineProperty(Rive.prototype, "volume", {
         /**
-         * getter and setter for the volume of the artboard
+         * Getter / Setter for the volume of the artboard
          */
         get: function () {
             if (this.artboard && this.artboard.volume !== this._volume) {
@@ -6251,6 +6273,89 @@ var Rive = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Rive.prototype, "artboardWidth", {
+        /**
+         * The width of the artboard.
+         *
+         * This will return undefined if the artboard is not loaded yet and a custom
+         * width has not been set.
+         *
+         * Do not set this value manually when using {@link resizeDrawingSurfaceToCanvas}
+         * with a {@link Layout.fit} of {@link Fit.Layout}, as the artboard width is
+         * automatically set.
+         */
+        get: function () {
+            if (this.artboard) {
+                return this.artboard.width;
+            }
+            return this._artboardWidth;
+        },
+        set: function (value) {
+            this._artboardWidth = value;
+            if (this.artboard) {
+                this.artboard.width = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Rive.prototype, "artboardHeight", {
+        /**
+         * The height of the artboard.
+         *
+         * This will return undefined if the artboard is not loaded yet and a custom
+         * height has not been set.
+         *
+         * Do not set this value manually when using {@link resizeDrawingSurfaceToCanvas}
+         * with a {@link Layout.fit} of {@link Fit.Layout}, as the artboard height is
+         * automatically set.
+         */
+        get: function () {
+            if (this.artboard) {
+                return this.artboard.height;
+            }
+            return this._artboardHeight;
+        },
+        set: function (value) {
+            this._artboardHeight = value;
+            if (this.artboard) {
+                this.artboard.height = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Reset the artboard size to its original values.
+     */
+    Rive.prototype.resetArtboardSize = function () {
+        if (this.artboard) {
+            this.artboard.resetArtboardSize();
+            this._artboardWidth = this.artboard.width;
+            this._artboardHeight = this.artboard.height;
+        }
+        else {
+            // If the artboard isn't loaded, we need to reset the custom width and height
+            this._artboardWidth = undefined;
+            this._artboardHeight = undefined;
+        }
+    };
+    Object.defineProperty(Rive.prototype, "devicePixelRatioUsed", {
+        /**
+         * The device pixel ratio used in rendering and canvas/artboard resizing.
+         *
+         * This value will be overidden by the device pixel ratio used in
+         * {@link resizeDrawingSurfaceToCanvas}. If you use that method, do not set this value.
+         */
+        get: function () {
+            return this._devicePixelRatioUsed;
+        },
+        set: function (value) {
+            this._devicePixelRatioUsed = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     // Error message for missing source or buffer
     Rive.missingErrorMessage = "Rive source file or data buffer required";
     return Rive;