@rive-app/canvas-lite 2.22.0 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "description": "A lite version of 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

@@ -2269,7 +2269,7 @@ Qc();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.22.0","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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.23.0","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"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -2470,7 +2470,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 ||
@@ -2525,7 +2525,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);
@@ -3998,6 +3998,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;
@@ -4160,6 +4165,7 @@ var Rive = /** @class */ (function () {
                 fit: this._layout.runtimeFit(this.runtime),
                 alignment: this._layout.runtimeAlignment(this.runtime),
                 isTouchScrollEnabled: touchScrollEnabledOption,
+                layoutScaleFactor: this._layout.layoutScaleFactor,
             });
         }
     };
@@ -4189,6 +4195,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;
@@ -4213,6 +4228,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
@@ -4672,13 +4689,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();
@@ -5138,7 +5160,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) {
@@ -5155,6 +5177,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;