@babylonjs/lottie-player 8.24.1

package/animationConfiguration.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Configuration options for the Lottie animation player.
+ */
+export type AnimationConfiguration = {
+    /**
+     * Whether the animation should play on a loop or not
+     */
+    loopAnimation: boolean;
+    /**
+     * Width of the sprite atlas texture.
+     * Default is 4096.
+     */
+    spriteAtlasWidth: number;
+    /**
+     * Height of the sprite atlas texture.
+     * Default is 4096.
+     */
+    spriteAtlasHeight: number;
+    /**
+     * Gap size around sprites in the atlas.
+     * Default is 5.
+     */
+    gapSize: number;
+    /**
+     * Maximum number of sprites the renderer can handle at once.
+     * Default is 64.
+     */
+    spritesCapacity: number;
+    /**
+     * Background color for the animation canvas.
+     * Default is white with full opacity.
+     */
+    backgroundColor: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    /**
+     * Minimum scale factor to prevent too small sprites.
+     * Default is 5.
+     */
+    scaleMultiplier: number;
+    /**
+     * Scale factor for the rendering.
+     * Default is 1.
+     */
+    devicePixelRatio: number;
+    /**
+     * Number of steps to sample cubic bezier easing functions for animations.
+     * Default is 4.
+     */
+    easingSteps: number;
+    /**
+     * Whether to support device lost events for WebGL contexts.
+     * Default is false.
+     */
+    supportDeviceLost: boolean;
+};
+/**
+ * Default configuration for lottie animations playback.
+ */
+export declare const DefaultConfiguration: {
+    readonly loopAnimation: false;
+    readonly spriteAtlasWidth: 4096;
+    readonly spriteAtlasHeight: 4096;
+    readonly gapSize: 5;
+    readonly spritesCapacity: 64;
+    readonly backgroundColor: {
+        readonly r: 1;
+        readonly g: 1;
+        readonly b: 1;
+        readonly a: 1;
+    };
+    readonly scaleMultiplier: 5;
+    readonly devicePixelRatio: 1;
+    readonly easingSteps: 4;
+    readonly supportDeviceLost: false;
+};
+//# sourceMappingURL=animationConfiguration.d.ts.map

package/animationConfiguration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationConfiguration.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/animationConfiguration.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,iBAAiB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAWU,CAAC"}

package/animationConfiguration.js

@@ -0,0 +1,16 @@
+/**
+ * Default configuration for lottie animations playback.
+ */
+export const DefaultConfiguration = {
+    loopAnimation: false, // By default do not loop animations
+    spriteAtlasWidth: 4096, // Size of the texture atlas
+    spriteAtlasHeight: 4096, // Size of the texture atlas
+    gapSize: 5, // Gap around the sprites in the atlas
+    spritesCapacity: 64, // Maximum number of sprites the renderer can handle at once
+    backgroundColor: { r: 1, g: 1, b: 1, a: 1 }, // Background color for the animation canvas
+    scaleMultiplier: 5, // Minimum scale factor to prevent too small sprites,
+    devicePixelRatio: 1, // Scale factor,
+    easingSteps: 4, // Number of steps to sample easing functions for animations - Less than 4 causes issues with some interpolations
+    supportDeviceLost: false, // Whether to support device lost events for WebGL contexts,
+};
+//# sourceMappingURL=animationConfiguration.js.map

package/animationConfiguration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationConfiguration.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/animationConfiguration.ts"],"names":[],"mappings":"AAuDA;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAChC,aAAa,EAAE,KAAK,EAAE,oCAAoC;IAC1D,gBAAgB,EAAE,IAAI,EAAE,4BAA4B;IACpD,iBAAiB,EAAE,IAAI,EAAE,4BAA4B;IACrD,OAAO,EAAE,CAAC,EAAE,sCAAsC;IAClD,eAAe,EAAE,EAAE,EAAE,4DAA4D;IACjF,eAAe,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,4CAA4C;IACzF,eAAe,EAAE,CAAC,EAAE,qDAAqD;IACzE,gBAAgB,EAAE,CAAC,EAAE,gBAAgB;IACrC,WAAW,EAAE,CAAC,EAAE,iHAAiH;IACjI,iBAAiB,EAAE,KAAK,EAAE,4DAA4D;CAC/C,CAAC"}

package/index.d.ts

@@ -0,0 +1,4 @@
+export { AnimationConfiguration } from "./animationConfiguration.js";
+export { Player } from "./player.js";
+export { LocalPlayer } from "./localPlayer.js";
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/index.js

@@ -0,0 +1,3 @@
+export { Player } from "./player.js";
+export { LocalPlayer } from "./localPlayer.js";
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Babylon.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/localPlayer.d.ts

@@ -0,0 +1,38 @@
+import type { AnimationConfiguration } from "./animationConfiguration.js";
+/**
+ * Allows you to play Lottie animations using Babylon.js.
+ * It plays the animations in the main JS thread. Prefer to use Player instead if Offscreen canvas and worker threads are supported.
+ * Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
+ */
+export declare class LocalPlayer {
+    private readonly _container;
+    private readonly _animationFile;
+    private readonly _variables;
+    private readonly _configuration;
+    private _rawAnimation;
+    private _scaleFactor;
+    private _playing;
+    private _disposed;
+    private _canvas;
+    private _resizeObserver;
+    private _animationController;
+    /**
+     * Creates a new instance of the LottiePlayer.
+     * @param container The HTMLDivElement to create the canvas in and render the animation on.
+     * @param animationFile The URL of the Lottie animation file to be played.
+     * @param variables Optional map of variables to replace in the animation file.
+     * @param configuration Optional configuration object to customize the animation playback.
+     */
+    constructor(container: HTMLDivElement, animationFile: string, variables?: Map<string, string>, configuration?: Partial<AnimationConfiguration>);
+    /**
+     * Loads and plays a lottie animation.
+     * @returns True if the animation is successfully set up to play, false if the animation couldn't play.
+     */
+    playAnimationAsync(): Promise<boolean>;
+    /**
+     * Disposes the LottiePlayer instance, cleaning up resources and event listeners.
+     */
+    dispose(): void;
+    private _onWindowResize;
+}
+//# sourceMappingURL=localPlayer.d.ts.map

package/localPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localPlayer.d.ts","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAMvE;;;;GAIG;AACH,qBAAa,WAAW;IACpB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiB;IAC5C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IACxC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAkC;IAEjE,OAAO,CAAC,aAAa,CAA6C;IAClE,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,eAAe,CAA+B;IACtD,OAAO,CAAC,oBAAoB,CAAoC;IAEhE;;;;;;OAMG;gBACgB,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,aAAa,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC;IAOrJ;;;OAGG;IACU,kBAAkB,IAAI,OAAO,CAAC,OAAO,CAAC;IAuDnD;;OAEG;IACI,OAAO,IAAI,IAAI;IAgBtB,OAAO,CAAC,eAAe,CAUrB;CACL"}

package/localPlayer.js

@@ -0,0 +1,100 @@
+import { DefaultConfiguration } from "./animationConfiguration.js";
+import { GetRawAnimationDataAsync } from "./parsing/parser.js";
+import { AnimationController, CalculateScaleFactor } from "./rendering/animationController.js";
+/**
+ * Allows you to play Lottie animations using Babylon.js.
+ * It plays the animations in the main JS thread. Prefer to use Player instead if Offscreen canvas and worker threads are supported.
+ * Once instance of this class can only be used to play a single animation. If you want to play multiple animations, create a new instance for each animation.
+ */
+export class LocalPlayer {
+    /**
+     * Creates a new instance of the LottiePlayer.
+     * @param container The HTMLDivElement to create the canvas in and render the animation on.
+     * @param animationFile The URL of the Lottie animation file to be played.
+     * @param variables Optional map of variables to replace in the animation file.
+     * @param configuration Optional configuration object to customize the animation playback.
+     */
+    constructor(container, animationFile, variables, configuration) {
+        this._rawAnimation = undefined;
+        this._scaleFactor = 1;
+        this._playing = false;
+        this._disposed = false;
+        this._canvas = null;
+        this._resizeObserver = null;
+        this._animationController = null;
+        this._onWindowResize = () => {
+            if (this._disposed || !this._canvas || !this._rawAnimation || this._animationController === null) {
+                return;
+            }
+            this._scaleFactor = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._container);
+            this._canvas.style.width = `${this._rawAnimation.w * this._scaleFactor}px`;
+            this._canvas.style.height = `${this._rawAnimation.h * this._scaleFactor}px`;
+            this._animationController.setScale(this._scaleFactor);
+        };
+        this._container = container;
+        this._animationFile = animationFile;
+        this._variables = variables ?? new Map();
+        this._configuration = configuration ?? {};
+    }
+    /**
+     * Loads and plays a lottie animation.
+     * @returns True if the animation is successfully set up to play, false if the animation couldn't play.
+     */
+    async playAnimationAsync() {
+        if (this._playing || this._disposed) {
+            return false;
+        }
+        this._rawAnimation = await GetRawAnimationDataAsync(this._animationFile);
+        // Create the canvas element
+        this._canvas = document.createElement("canvas");
+        // Center the canvas in the container
+        this._canvas.style.position = "absolute";
+        this._canvas.style.left = "50%";
+        this._canvas.style.top = "50%";
+        this._canvas.style.transform = "translate(-50%, -50%)";
+        this._canvas.style.display = "block";
+        // The size of the canvas is the relation between the size of the container div and the size of the animation
+        this._scaleFactor = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._container);
+        this._canvas.style.width = `${this._rawAnimation.w * this._scaleFactor}px`;
+        this._canvas.style.height = `${this._rawAnimation.h * this._scaleFactor}px`;
+        // Append the canvas to the container
+        this._container.appendChild(this._canvas);
+        const finalConfig = {
+            ...DefaultConfiguration,
+            ...this._configuration,
+        };
+        this._animationController = new AnimationController(this._canvas, this._rawAnimation, this._scaleFactor, this._variables, finalConfig);
+        this._animationController.playAnimation();
+        this._playing = true;
+        window.addEventListener("resize", this._onWindowResize);
+        if ("ResizeObserver" in window) {
+            this._resizeObserver = new ResizeObserver(() => {
+                if (this._disposed || !this._canvas || !this._rawAnimation || this._animationController === null) {
+                    return;
+                }
+                this._scaleFactor = CalculateScaleFactor(this._rawAnimation.w, this._rawAnimation.h, this._container);
+                this._canvas.style.width = `${this._rawAnimation.w * this._scaleFactor}px`;
+                this._canvas.style.height = `${this._rawAnimation.h * this._scaleFactor}px`;
+                this._animationController.setScale(this._scaleFactor);
+            });
+            this._resizeObserver.observe(this._container);
+        }
+        return true;
+    }
+    /**
+     * Disposes the LottiePlayer instance, cleaning up resources and event listeners.
+     */
+    dispose() {
+        window.removeEventListener("resize", this._onWindowResize);
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
+        if (this._canvas) {
+            this._container.removeChild(this._canvas);
+            this._canvas = null;
+        }
+        this._disposed = true;
+    }
+}
+//# sourceMappingURL=localPlayer.js.map

package/localPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"localPlayer.js","sourceRoot":"","sources":["../../../dev/lottiePlayer/src/localPlayer.ts"],"names":[],"mappings":"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"}

package/maths/bezier.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Represents a Babylon.js thin version of a cubic bezier curve
+ * We are only exposing what we truly need in the scope of
+ * the Lottie Renderer project preventing the dependency on the full
+ * Babylon.js animation system.
+ */
+export declare class BezierCurve {
+    /**
+     * X of the first control point
+     */
+    readonly x1: number;
+    /**
+     * Y of the first control point
+     */
+    readonly y1: number;
+    /**
+     * X of the second control point
+     */
+    readonly x2: number;
+    /**
+     * Y of the second control point
+     */
+    readonly y2: number;
+    private readonly _easingSteps;
+    private readonly _f0;
+    private readonly _f1;
+    private readonly _f2;
+    /**
+     * Instantiates a bezier function
+     * @see http://cubic-bezier.com/#.17,.67,.83,.67
+     * @param x1 Defines the x component of the start tangent in the bezier curve
+     * @param y1 Defines the y component of the start tangent in the bezier curve
+     * @param x2 Defines the x component of the end tangent in the bezier curve
+     * @param y2 Defines the y component of the end tangent in the bezier curve
+     * @param easingSteps Number of steps to sample the bezier curve for easing
+     */
+    constructor(x1: number | undefined, y1: number | undefined, x2: number | undefined, y2: number | undefined, easingSteps: number);
+    /**
+     * Interpolates the bezier curve at a given time
+     * @param t Defines the time to evaluate the bezier curve at, between 0 and 1
+     * @returns The interpolated value at time t
+     */
+    interpolate(t: number): number;
+}
+//# sourceMappingURL=bezier.d.ts.map

package/maths/bezier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bezier.d.ts","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/maths/bezier.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qBAAa,WAAW;IACpB;;OAEG;IACH,SAAgB,EAAE,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAgB,EAAE,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAgB,EAAE,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAgB,EAAE,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAS;IAE7B;;;;;;;;OAQG;gBACS,EAAE,EAAE,MAAM,YAAI,EAAE,EAAE,EAAE,MAAM,YAAI,EAAE,EAAE,EAAE,MAAM,YAAI,EAAE,EAAE,EAAE,MAAM,YAAI,EAAE,WAAW,EAAE,MAAM;IAa/F;;;;OAIG;IACI,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;CAuBxC"}

package/maths/bezier.js

@@ -0,0 +1,53 @@
+/**
+ * Represents a Babylon.js thin version of a cubic bezier curve
+ * We are only exposing what we truly need in the scope of
+ * the Lottie Renderer project preventing the dependency on the full
+ * Babylon.js animation system.
+ */
+export class BezierCurve {
+    /**
+     * Instantiates a bezier function
+     * @see http://cubic-bezier.com/#.17,.67,.83,.67
+     * @param x1 Defines the x component of the start tangent in the bezier curve
+     * @param y1 Defines the y component of the start tangent in the bezier curve
+     * @param x2 Defines the x component of the end tangent in the bezier curve
+     * @param y2 Defines the y component of the end tangent in the bezier curve
+     * @param easingSteps Number of steps to sample the bezier curve for easing
+     */
+    constructor(x1 = 0, y1 = 0, x2 = 1, y2 = 1, easingSteps) {
+        this.x1 = x1;
+        this.y1 = y1;
+        this.x2 = x2;
+        this.y2 = y2;
+        this._easingSteps = easingSteps;
+        // Pre-calculate coefficients
+        this._f0 = 1 - 3 * this.x2 + 3 * this.x1;
+        this._f1 = 3 * this.x2 - 6 * this.x1;
+        this._f2 = 3 * this.x1;
+    }
+    /**
+     * Interpolates the bezier curve at a given time
+     * @param t Defines the time to evaluate the bezier curve at, between 0 and 1
+     * @returns The interpolated value at time t
+     */
+    interpolate(t) {
+        if (t === 0) {
+            return 0;
+        }
+        if (t === 1) {
+            return 1;
+        }
+        let refinedT = t;
+        for (let i = 0; i < this._easingSteps; i++) {
+            const refinedT2 = refinedT * refinedT;
+            const refinedT3 = refinedT2 * refinedT;
+            const x = this._f0 * refinedT3 + this._f1 * refinedT2 + this._f2 * refinedT;
+            const slope = 1.0 / (3.0 * this._f0 * refinedT2 + 2.0 * this._f1 * refinedT + this._f2);
+            refinedT -= (x - t) * slope;
+            refinedT = Math.min(1, Math.max(0, refinedT));
+        }
+        // Resolve cubic bezier for the given x
+        return 3 * (1 - refinedT) * (1 - refinedT) * refinedT * this.y1 + 3 * (1 - refinedT) * refinedT * refinedT * this.y2 + refinedT * refinedT * refinedT;
+    }
+}
+//# sourceMappingURL=bezier.js.map

package/maths/bezier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bezier.js","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/maths/bezier.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IAwBpB;;;;;;;;OAQG;IACH,YAAY,KAAa,CAAC,EAAE,KAAa,CAAC,EAAE,KAAa,CAAC,EAAE,KAAa,CAAC,EAAE,WAAmB;QAC3F,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAEhC,6BAA6B;QAC7B,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;QACzC,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;QACrC,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IACI,WAAW,CAAC,CAAS;QACxB,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACV,OAAO,CAAC,CAAC;QACb,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACV,OAAO,CAAC,CAAC;QACb,CAAC;QAED,IAAI,QAAQ,GAAG,CAAC,CAAC;QAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;YACtC,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;YACvC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC;YAC5E,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;YACxF,QAAQ,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC;YAC5B,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;QAClD,CAAC;QAED,uCAAuC;QACvC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1J,CAAC;CACJ"}

package/maths/boundingBox.d.ts

@@ -0,0 +1,39 @@
+import type { RawElement, RawFont, RawTextData } from "../parsing/rawTypes.js";
+/**
+ * Represents a bounding box for a shape in the animation.
+ */
+export type BoundingBox = {
+    /** Height of the bounding box */
+    height: number;
+    /** Width of the bounding box */
+    width: number;
+    /** X coordinate of the center of the bounding box */
+    centerX: number;
+    /** Y coordinate of the center of the bounding box */
+    centerY: number;
+    /** Inset for the stroke, if applicable. */
+    strokeInset: number;
+    /**
+     * Optional: Canvas2D text metrics for precise vertical alignment
+     */
+    actualBoundingBoxAscent?: number;
+    /**
+     * Optional: Canvas2D text metrics for precise vertical alignment
+     */
+    actualBoundingBoxDescent?: number;
+};
+/**
+ * Calculates the bounding box for a group of graphic elements in a Lottie animation.
+ * @param rawElements The elements to calculate the bounding box for
+ * @returns The bounding box for the elements
+ */
+export declare function GetShapesBoundingBox(rawElements: RawElement[]): BoundingBox;
+/**
+ * Calculates the bounding box for a group of graphic elements in a Lottie animation.
+ * @param spritesCanvasContext The OffscreenCanvasRenderingContext2D or CanvasRenderingContext2D to use for text measurement
+ * @param textData The text to calculate the bounding box for
+ * @param rawFonts A map of font names to their raw font data
+ * @returns The bounding box for the text
+ */
+export declare function GetTextBoundingBox(spritesCanvasContext: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, textData: RawTextData, rawFonts: Map<string, RawFont>): BoundingBox | undefined;
+//# sourceMappingURL=boundingBox.d.ts.map

package/maths/boundingBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boundingBox.d.ts","sourceRoot":"","sources":["../../../../dev/lottiePlayer/src/maths/boundingBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,UAAU,EAAE,OAAO,EAAmD,WAAW,EAAmB,MAAM,qBAAqB,CAAC;AAEzJ;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACtB,iCAAiC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACrC,CAAC;AAUF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,UAAU,EAAE,GAAG,WAAW,CA0B3E;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAC9B,oBAAoB,EAAE,iCAAiC,GAAG,wBAAwB,EAClF,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAC/B,WAAW,GAAG,SAAS,CA0CzB"}

package/maths/boundingBox.js

@@ -0,0 +1,204 @@
+/**
+ * Calculates the bounding box for a group of graphic elements in a Lottie animation.
+ * @param rawElements The elements to calculate the bounding box for
+ * @returns The bounding box for the elements
+ */
+export function GetShapesBoundingBox(rawElements) {
+    const boxCorners = {
+        minX: Infinity,
+        minY: Infinity,
+        maxX: -Infinity,
+        maxY: -Infinity,
+    };
+    let extraPadding = 0;
+    for (let i = 0; i < rawElements.length; i++) {
+        if (rawElements[i].ty === "rc") {
+            GetRectangleVertices(boxCorners, rawElements[i]);
+        }
+        else if (rawElements[i].ty === "sh") {
+            GetPathVertices(boxCorners, rawElements[i]);
+        }
+        else if (rawElements[i].ty === "st") {
+            extraPadding = Math.max(extraPadding, GetStrokeInset(rawElements[i]));
+        }
+    }
+    return {
+        width: Math.ceil(boxCorners.maxX - boxCorners.minX) + extraPadding,
+        height: Math.ceil(boxCorners.maxY - boxCorners.minY) + extraPadding,
+        centerX: Math.ceil((boxCorners.maxX + boxCorners.minX) / 2),
+        centerY: Math.ceil((boxCorners.maxY + boxCorners.minY) / 2),
+        strokeInset: 0,
+    };
+}
+/**
+ * Calculates the bounding box for a group of graphic elements in a Lottie animation.
+ * @param spritesCanvasContext The OffscreenCanvasRenderingContext2D or CanvasRenderingContext2D to use for text measurement
+ * @param textData The text to calculate the bounding box for
+ * @param rawFonts A map of font names to their raw font data
+ * @returns The bounding box for the text
+ */
+export function GetTextBoundingBox(spritesCanvasContext, textData, rawFonts) {
+    spritesCanvasContext.save();
+    let textInfo = undefined;
+    if (textData.d && textData.d.k && textData.d.k.length > 0) {
+        textInfo = textData.d.k[0].s;
+    }
+    if (!textInfo) {
+        spritesCanvasContext.restore();
+        return undefined;
+    }
+    const fontSize = textInfo.s;
+    const fontFamily = textInfo.f;
+    const finalFont = rawFonts.get(fontFamily);
+    if (!finalFont) {
+        spritesCanvasContext.restore();
+        return undefined;
+    }
+    const weight = finalFont.fWeight || "400"; // Default to normal weight if not specified
+    spritesCanvasContext.font = `${weight} ${fontSize}px ${finalFont.fFamily}`;
+    if (textInfo.sc !== undefined && textInfo.sc.length >= 3 && textInfo.sw !== undefined && textInfo.sw > 0) {
+        spritesCanvasContext.lineWidth = textInfo.sw;
+    }
+    const text = textInfo.t;
+    const metrics = spritesCanvasContext.measureText(text);
+    const widthPx = Math.ceil(metrics.width);
+    const heightPx = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent);
+    return {
+        width: widthPx,
+        height: heightPx,
+        centerX: Math.ceil(widthPx / 2),
+        centerY: Math.ceil(heightPx / 2),
+        strokeInset: 0, // Text bounding box ignores stroke padding here
+        actualBoundingBoxAscent: metrics.actualBoundingBoxAscent,
+        actualBoundingBoxDescent: metrics.actualBoundingBoxDescent,
+    };
+}
+function GetRectangleVertices(boxCorners, rect) {
+    const size = rect.s.k;
+    const position = rect.p.k;
+    // Calculate the four corners of the rectangle
+    UpdateBoxCorners(boxCorners, position[0] - size[0] / 2, position[1] - size[1] / 2);
+    UpdateBoxCorners(boxCorners, position[0] + size[0] / 2, position[1] - size[1] / 2);
+    UpdateBoxCorners(boxCorners, position[0] + size[0] / 2, position[1] + size[1] / 2);
+    UpdateBoxCorners(boxCorners, position[0] - size[0] / 2, position[1] + size[1] / 2);
+}
+function GetPathVertices(boxCorners, path) {
+    const bezier = path.ks.k;
+    const vertices = bezier.v;
+    const inTangents = bezier.i;
+    const outTangents = bezier.o;
+    // Check the control points of the path
+    for (let i = 0; i < vertices.length; i++) {
+        UpdateBoxCorners(boxCorners, vertices[i][0], vertices[i][1]);
+    }
+    for (let i = 0; i < vertices.length; i++) {
+        // Skip last point if the path is not closed
+        if (!bezier.c && i === vertices.length - 1) {
+            continue;
+        }
+        const start = vertices[i];
+        const end = i === vertices.length - 1 ? vertices[0] : vertices[i + 1];
+        const outTangent = outTangents[i];
+        const inTangent = i === vertices.length - 1 ? inTangents[0] : inTangents[i + 1];
+        // Calculate the points where the tangent is zero
+        CalculatePointsWithTangentZero(boxCorners, start[0], start[1], end[0], end[1], start[0] + outTangent[0], start[1] + outTangent[1], end[0] + inTangent[0], end[1] + inTangent[1]);
+    }
+}
+function GetStrokeInset(stroke) {
+    return Math.ceil(stroke.w?.k) ?? 1;
+}
+function CalculatePointsWithTangentZero(boxCorners, startX, startY, endX, endY, controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y) {
+    // Calculate the derivative of the bezier formula for X and Y components
+    // For X component:
+    const ax = 3 * (endX - 3 * controlPoint2X + 3 * controlPoint1X - startX);
+    const bx = 6 * (controlPoint2X - 2 * controlPoint1X + startX);
+    const cx = 3 * (controlPoint1X - startX);
+    // For Y component:
+    const ay = 3 * (endY - 3 * controlPoint2Y + 3 * controlPoint1Y - startY);
+    const by = 6 * (controlPoint2Y - 2 * controlPoint1Y + startY);
+    const cy = 3 * (controlPoint1Y - startY);
+    // Solve the quadratic equation where dt/dt = 0 (tangent is zero)
+    const rootsX = SolveQuadratic(ax, bx, cx);
+    const rootsY = SolveQuadratic(ay, by, cy);
+    // Merge + dedupe (roots arrays are tiny: <=2 each)
+    const candidateTs = rootsX.slice(); // copy
+    for (let i = 0; i < rootsY.length; i++) {
+        const ty = rootsY[i];
+        let exists = false;
+        for (let j = 0; j < candidateTs.length; j++) {
+            if (candidateTs[j] === ty) {
+                exists = true;
+                break;
+            }
+        }
+        if (!exists) {
+            candidateTs.push(ty);
+        }
+    }
+    // Evaluate the bezier at the calculated t values to find the points of the curve where the tangent is zero
+    for (let i = 0; i < candidateTs.length; i++) {
+        const t = candidateTs[i];
+        if (t >= 0 && t <= 1) {
+            const x = BezierPoint(t, startX, controlPoint1X, controlPoint2X, endX);
+            const y = BezierPoint(t, startY, controlPoint1Y, controlPoint2Y, endY);
+            UpdateBoxCorners(boxCorners, x, y);
+        }
+    }
+}
+// Alternative implementation for bounding box calculation using sampling of the bezier curve instead of finding points where the tangent is zero.
+// function bezierBoundingBoxSampled(boxCorners: Corners, start:IVector2Like, outTangent:IVector2Like, inTangent:IVector2Like, end:IVector2Like) {
+//     for (let i = 0; i <= SamplingSteps; i++) {
+//         const t = i / SamplingSteps;
+//         const x = bezierPoint(t, start.x, outTangent.x, inTangent.x, end.x);
+//         const y = bezierPoint(t, start.y, outTangent.y, inTangent.y, end.y);
+//         updateBoxCorners(boxCorners, x, y);
+//     }
+// }
+function SolveQuadratic(a, b, c) {
+    const roots = [];
+    // Handle the case where a is zero (linear equation)
+    // Linear equation: bx + c = 0 => x = -c / b
+    if (Math.abs(a) < 1e-10) {
+        if (Math.abs(b) > 1e-10) {
+            const root = -c / b;
+            roots.push(root);
+        }
+        return roots;
+    }
+    // Solve the quadratic equation ax^2 + bx + c = 0
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant < 0) {
+        return roots; // No real roots
+    }
+    if (Math.abs(discriminant) < 1e-10) {
+        const root = -b / (2 * a);
+        roots.push(root);
+    }
+    else {
+        const sqrtD = Math.sqrt(discriminant);
+        const root1 = (-b + sqrtD) / (2 * a);
+        const root2 = (-b - sqrtD) / (2 * a);
+        roots.push(root1);
+        roots.push(root2);
+    }
+    return roots;
+}
+function BezierPoint(t, p0, p1, p2, p3) {
+    const mt = 1 - t;
+    return mt * mt * mt * p0 + 3 * mt * mt * t * p1 + 3 * mt * t * t * p2 + t * t * t * p3;
+}
+function UpdateBoxCorners(boxCorners, x, y) {
+    if (x < boxCorners.minX) {
+        boxCorners.minX = x;
+    }
+    if (x > boxCorners.maxX) {
+        boxCorners.maxX = x;
+    }
+    if (y < boxCorners.minY) {
+        boxCorners.minY = y;
+    }
+    if (y > boxCorners.maxY) {
+        boxCorners.maxY = y;
+    }
+}
+//# sourceMappingURL=boundingBox.js.map