@rive-app/webgl2 2.22.0 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/webgl2",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "description": "Rive's webgl2 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

@@ -423,7 +423,7 @@ function Oa(a, b) {
     return Na(c, a, b);
   }));
 }
-var Pa, Qa, Ua = {484853:(a, b, c, d, e) => {
+var Pa, Qa, Ua = {485221:(a, b, c, d, e) => {
   if ("undefined" === typeof window || void 0 === (window.AudioContext || window.webkitAudioContext)) {
     return 0;
   }
@@ -486,9 +486,9 @@ var Pa, Qa, Ua = {484853:(a, b, c, d, e) => {
   }
   window.h.Da += 1;
   return 1;
-}, 487031:() => {
+}, 487399:() => {
   "undefined" !== typeof window.h && (--window.h.Da, 0 === window.h.Da && delete window.h);
-}, 487195:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 487299:() => {
+}, 487563:() => void 0 !== navigator.mediaDevices && void 0 !== navigator.mediaDevices.getUserMedia, 487667:() => {
   try {
     var a = new (window.AudioContext || window.webkitAudioContext)(), b = a.sampleRate;
     a.close();
@@ -496,7 +496,7 @@ var Pa, Qa, Ua = {484853:(a, b, c, d, e) => {
   } catch (c) {
     return 0;
   }
-}, 487470:(a, b, c, d, e, f) => {
+}, 487838:(a, b, c, d, e, f) => {
   if ("undefined" === typeof window.h) {
     return -1;
   }
@@ -542,7 +542,7 @@ var Pa, Qa, Ua = {484853:(a, b, c, d, e) => {
   a == window.h.I.Ba && g.Y.connect(g.J.destination);
   g.jb = f;
   return window.h.lc(g);
-}, 490347:a => window.h.va(a).J.sampleRate, 490420:a => {
+}, 490715:a => window.h.va(a).J.sampleRate, 490788:a => {
   a = window.h.va(a);
   void 0 !== a.Y && (a.Y.onaudioprocess = function() {
   }, a.Y.disconnect(), a.Y = void 0);
@@ -550,13 +550,13 @@ var Pa, Qa, Ua = {484853:(a, b, c, d, e) => {
   a.J.close();
   a.J = void 0;
   a.jb = void 0;
-}, 490820:a => {
+}, 491188:a => {
   window.h.wb(a);
-}, 490870:a => {
+}, 491238:a => {
   a = window.h.va(a);
   a.J.resume();
   a.state = window.h.ha.rb;
-}, 491009:a => {
+}, 491377:a => {
   a = window.h.va(a);
   a.J.suspend();
   a.state = window.h.ha.stopped;
@@ -3467,8 +3467,8 @@ n.dynCall_viijii = (a, b, c, d, e, f, g) => (n.dynCall_viijii = z.dynCall_viijii
 n.dynCall_iiiiij = (a, b, c, d, e, f, g) => (n.dynCall_iiiiij = z.dynCall_iiiiij)(a, b, c, d, e, f, g);
 n.dynCall_iiiiijj = (a, b, c, d, e, f, g, m, p) => (n.dynCall_iiiiijj = z.dynCall_iiiiijj)(a, b, c, d, e, f, g, m, p);
 n.dynCall_iiiiiijj = (a, b, c, d, e, f, g, m, p, l) => (n.dynCall_iiiiiijj = z.dynCall_iiiiiijj)(a, b, c, d, e, f, g, m, p, l);
-n.___start_em_js = 482228;
-n.___stop_em_js = 484853;
+n.___start_em_js = 482596;
+n.___stop_em_js = 485221;
 var Xd;
 Ha = function Yd() {
   Xd || Zd();
@@ -3528,7 +3528,7 @@ Zd();
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/webgl2","version":"2.22.0","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","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/webgl2","version":"2.23.0","description":"Rive\'s webgl2 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)","Chris Dalton <chris@rive.app> (https://rive.app)"],"license":"MIT","files":["rive.js","rive.wasm","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 3 */
@@ -3729,7 +3729,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 ||
@@ -3784,7 +3784,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);
@@ -5257,6 +5257,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;
@@ -5419,6 +5424,7 @@ var Rive = /** @class */ (function () {
                 fit: this._layout.runtimeFit(this.runtime),
                 alignment: this._layout.runtimeAlignment(this.runtime),
                 isTouchScrollEnabled: touchScrollEnabledOption,
+                layoutScaleFactor: this._layout.layoutScaleFactor,
             });
         }
     };
@@ -5448,6 +5454,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;
@@ -5472,6 +5487,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
@@ -5931,13 +5948,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();
@@ -6397,7 +6419,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) {
@@ -6414,6 +6436,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;