@drincs/pixi-vn/dist/canvas.d.cts

Pixi'VN is a npm package that provides various features for creating visual novels.

import * as _drincs_pixi_vn_pixi_js from '@drincs/pixi-vn/pixi.js';
import _drincs_pixi_vn_pixi_js__default, { Container as Container$1, ContainerChild as ContainerChild$1, Ticker as Ticker$1, UPDATE_PRIORITY as UPDATE_PRIORITY$1, Application, Rectangle as Rectangle$1, ApplicationOptions, PointData, ContainerOptions as ContainerOptions$1, SpriteOptions as SpriteOptions$1, CanvasTextOptions, Texture as Texture$1, TextureSourceLike, ContainerEvents, EventEmitter, ObservablePoint, TextureSource, TextOptions as TextOptions$1 } from '@drincs/pixi-vn/pixi.js';
export { TextureSourceLike, Ticker as TickerValue } from '@drincs/pixi-vn/pixi.js';
import { ObjectTarget, AnimationOptions as AnimationOptions$1, At, SequenceOptions as SequenceOptions$1 } from 'motion';
export { AnimationOptions as MotionAnimationOptions } from 'motion';
import { Devtools } from '@pixi/devtools';
import { OnErrorHandler } from '@drincs/pixi-vn/core';

interface MotionComponentExtension {
    pivot?: number;
    pivotX?: number;
    pivotY?: number;
    scale?: number;
    scaleX?: number;
    scaleY?: number;
}

type AnimationOptionsCommon = Omit<AnimationOptions$1, "onComplete" | "onPlay" | "onStop" | "onUpdate" | "onRepeat">;

type AnimationOptions = AnimationOptionsCommon & Omit<CommonTickerProps, "startOnlyIfHaveTexture">;

type KeyframesType<T> = ObjectTarget<T> & MotionComponentExtension;
type SequenceOptions = SequenceOptions$1 & Omit<CommonTickerProps, "startOnlyIfHaveTexture">;
type ObjectSegment<O extends CanvasBaseInterface<any>> = [ObjectTarget<O> & MotionComponentExtension];
type ObjectSegmentWithTransition<O extends CanvasBaseInterface<any>> = [
    ObjectTarget<O> & MotionComponentExtension,
    AnimationOptions & At
];

type Layer = Container$1<ContainerChild$1>;

interface TickerArgs {
}

type TickerValue = Ticker$1;

/**
 * A class is used to create a ticker element to add into a Pixi Application.
 * You can use {@link canvas.addTicker()} to add this element into the application.
 * This class should be extended and the fn method should be overridden.
 * You must use the {@link tickerDecorator} to register the ticker in the game.
 * In Ren'Py is a transform.
 * @template TArgs The type of the arguments that you want to pass to the ticker.
 * @example
 * ```typescript
 * \@tickerDecorator() // this is equivalent to tickerDecorator("RotateTicker")
 * export class RotateTicker extends TickerBase<{ speed?: number }> {
 *     override fn(
 *         t: TickerValue, // the ticker that is calling this method
 *         args: { // the arguments that you passed when you added the ticker
 *             speed?: number,
 *         },
 *         aliases: string[], // the aliases of the canvas elements that are connected to this ticker
 *         tickerId: string, // the id of the ticker. You can use this to get the ticker from the canvas.currentTickers
 *     ): void {
 *         let speed = args.speed === undefined ? 0.1 : args.speed
 *         aliases.forEach((alias) => {
 *                 let element = canvas.find(alias)
 *                 if (element && element instanceof Container) {
 *                     if (clockwise)
 *                         element.rotation += speed * t.deltaTime
 *                     else
 *                         element.rotation -= speed * t.deltaTime
 *                 }
 *             })
 *     }
 * }
 * ```
 */
declare abstract class TickerBase<TArgs extends TickerArgs> implements Ticker<TArgs> {
    /**
     * @param args The arguments that you want to pass to the ticker.
     * @param options The options of the ticker.
     */
    constructor(args: TArgs, options?: {
        /**
         * The duration of the ticker in seconds. If is undefined, the step will end only when the animation is finished (if the animation doesn't have a goal to reach then it won't finish). @default undefined
         */
        duration?: number;
        /**
         * The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
         */
        priority?: UPDATE_PRIORITY$1;
        /**
         * The id of the ticker. This param is used by the system when will ber restoring the tickers from a save. If not provided, a random id will be generated. @default undefined
         */
        id?: string;
        /**
         * The aliases of the canvas elements that are connected to this ticker. This is used by the system to know which canvas elements are connected to this ticker, and to pass them to the fn method. @default []
         */
        canvasElementAliases?: string[];
    });
    readonly alias: string;
    readonly id: string;
    args: TArgs;
    duration?: number;
    priority?: UPDATE_PRIORITY$1;
    protected ticker: _drincs_pixi_vn_pixi_js.Ticker;
    canvasElementAliases: string[];
    private generateTickerId;
    /**
     * The method that will be called every frame.
     * This method should be overridden and you can use {@link canvas.add()} to get the canvas element of the canvas, and edit them.
     * @param _ticker The ticker that is calling this method
     * @param _args The arguments that you passed when you added the ticker
     * @param _alias The alias of the canvas elements that are connected to this ticker
     * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link canvas.currentTickers}
     */
    abstract fn(_ticker: TickerValue, _args: TArgs, _alias: string | string[], _tickerId: string): void;
    protected fnValue?: () => void;
    complete(_options?: {
        ignoreTickerSteps?: boolean;
    }): void;
    stop(): void;
    start(): void;
    pause(): void;
    play(): void;
    get paused(): boolean;
}

interface Ticker<TArgs extends TickerArgs> {
    /**
     * Arguments to pass to the ticker
     */
    args: TArgs;
    /**
     * Duration in seconds to run the ticker
     */
    duration?: number;
    /**
     * Priority of the ticker
     */
    priority?: UPDATE_PRIORITY$1;
    /**
     * Get the alias of the ticker class. This variable is used in the system to get the ticker class by id, {@link RegisteredTickers.getInstance}
     */
    readonly alias: string;
    /**
     * The id of the ticker. Must be unique for each ticker instance.
     */
    readonly id: string;
    /**
     * The aliases of the canvas elements that are connected to this ticker
     */
    canvasElementAliases: string[];
    /**
     * Completes the animation and applies the final state.
     */
    complete: (options?: {
        ignoreTickerSteps?: boolean;
    }) => Promise<void> | void;
    /**
     * Stops the animation at its current state, and prevents it from resuming when the animation is played again.
     */
    stop: () => void;
    /**
     * Starts the ticker. This will start the ticker and begin the animation.
     */
    start: () => void;
    /**
     * Pauses the animation.
     */
    pause: () => void;
    /**
     * Plays the animation.
     */
    play: () => void;
    /**
     * Checks if the ticker is paused.
     * @returns true if the ticker is paused, false otherwise.
     */
    readonly paused: boolean;
}

/**
 * Is a decorator that register a ticker in the game.
 * Is a required decorator for use the ticker in the game.
 * Thanks to this decoration the game has the possibility of updating the tickers to the latest modification and saving the game.
 * @param name is th identifier of the label, by default is the name of the class
 * @returns
 */
declare function tickerDecorator(name?: string): (target: {
    new (args: any, options?: {
        duration?: number;
        priority?: UPDATE_PRIORITY$1;
        id?: string;
        canvasElementAliases?: string[];
    }): Ticker<any>;
}) => void;
declare namespace RegisteredTickers {
    /**
     * Register a ticker in the game.
     * @param target The class of the ticker.
     * @param name Name of the ticker, by default it will use the class name. If the name is already registered, it will show a warning
     */
    function add(target: {
        new (args: any, options?: {
            duration?: number;
            priority?: UPDATE_PRIORITY$1;
            id?: string;
            canvasElementAliases?: string[];
        }): Ticker<any>;
    }, name?: string): void;
    /**
     * Get a ticker by the id.
     * @param canvasId The id of the ticker.
     * @returns The ticker type.
     */
    function get<T = Ticker<any>>(tickerId: string): T | undefined;
    /**
     * Get a ticker instance by the id.
     * @param tickerId The id of the ticker.
     * @param args The arguments that you want to pass to the ticker.
     * @param duration The duration of the ticker. If is undefined, the ticker will be called every frame.
     * @param priority The priority of the ticker. If is undefined, the priority will be UPDATE_PRIORITY.NORMAL.
     * @returns The instance of the ticker
     */
    function getInstance<TArgs extends TickerArgs>(tickerId: string, args: TArgs, options?: {
        duration?: number;
        priority?: UPDATE_PRIORITY$1;
        id?: string;
        canvasElementAliases?: string[];
    }): Ticker<TArgs> | undefined;
    /**
     * Get a list of all tickers registered.
     * @returns An array of tickers.
     */
    function values(): {
        new (args: any, options?: {
            duration?: number;
            priority?: UPDATE_PRIORITY$1;
            id?: string;
            canvasElementAliases?: string[];
        }): Ticker<any>;
    }[];
    /**
     * Check if a ticker is registered.
     * @param id The id of the ticker.
     * @returns True if the ticker is registered, false otherwise.
     */
    function has(id: string): boolean;
    /**
     * Get a list of all ticker ids registered.
     * @returns An array of label ids.
     */
    function keys(): string[];
}

/**
 * TickerHistory is a class that contains the name of a class and the arguments that were used to create it.
 */
interface TickerInfo<TArgs extends TickerArgs> {
    /**
     * If this ticker was created by steps
     */
    createdByTicketSteps?: {
        canvasElementAlias: string;
        id: string;
    };
    ticker: Ticker<TArgs>;
}
interface TickerHistory<TArgs extends TickerArgs> {
    id: string;
    args: TArgs;
    /**
     * The aliases of the canvas elements that are connected to this ticker
     */
    canvasElementAliases: string[];
    priority?: UPDATE_PRIORITY$1;
    duration?: number;
    paused?: boolean;
}

type TickerProgrationType = TickerProgrationLinear | TickerProgrationExponential;

interface TickerProgrationLinear {
    /**
     * The amount of the speed to increase every frame.
     */
    amt: number;
    /**
     * The limit of the effect
     */
    limit?: number;
    type: "linear";
}
interface TickerProgrationExponential {
    /**
     * The percentage of the speed to increase every frame. if the percentage is 0.1, the speed will increase by 10% every frame.
     */
    percentage: number;
    /**
     * The limit of the effect
     */
    limit?: number;
    type: "exponential";
}

type PauseType = {
    /**
     * The type of the value
     */
    type: "pause";
    /**
     * Duration in seconds
     */
    duration: number;
};

type RepeatType = "repeat";

interface TickersStep<TArgs extends TickerArgs> {
    /**
     * Ticker class name
     */
    ticker: string;
    /**
     * Duration in seconds. If is undefined, the step will end only when the animation is finished.
     */
    duration?: number;
    /**
     * Arguments to pass to the ticker
     */
    args: TArgs;
    /**
     * Priority of the ticker
     */
    priority?: UPDATE_PRIORITY$1;
}
/**
 * The steps of the tickers
 */
interface TickersSequence {
    /**
     * The step number
     */
    currentStepNumber: number;
    /**
     * The steps of the tickers
     */
    steps: (TickersStep<any> | RepeatType | PauseType)[];
}

interface TickerTimeoutHistory {
    aliases: string[];
    ticker: string;
    canBeDeletedBeforeEnd: boolean;
}

type CommonTickerProps = {
    /**
     * The alias to remove after the effect is done
     * @default []
     */
    aliasToRemoveAfter?: string[] | string;
    /**
     * If true, the effect only starts if the canvas element have a texture
     * @default false
     */
    startOnlyIfHaveTexture?: boolean;
    /**
     * The alias to resume after the effect is done
     * @default []
     */
    tickerAliasToResume?: string[] | string;
    /**
     * The id of the ticker to resume after the effect is done
     * @default []
     */
    tickerIdToResume?: string[] | string;
    /**
     * @deprecated Use {@link completeOnContinue} instead.
     */
    forceCompleteBeforeNext?: boolean;
    /**
     * When true, calling {@link narration.continue()} forces the current content to complete before advancing to the next narrative step.
     * @default false
     */
    completeOnContinue?: boolean;
};

/**
 * This class is used to create a canvas element to add into a Pixi Application.
 * You can use {@link canvas.add()} to add this element into the application.
 * This class should be implemented and the memory method should be overridden.
 * You must use the {@link canvasComponentDecorator} to register the canvas in the game.
 * In Ren'Py is a displayable.
 * @example
 * ```typescript
 * const CANVAS_EXAMPLE_ID = "CanvasExample";
 *
 * \@canvasComponentDecorator({
 *     name: CANVAS_EXAMPLE_ID,
 * })
 * export class CanvasExample extends Container implements CanvasBaseItem<Memory> {
 *     get memory(): Memory {
 *         return {
 *             pixivnId: CANVAS_EXAMPLE_ID,
 *             // ... other properties
 *         }
 *     }
 *     async setMemory(value: Memory) {
 *         // ... set other properties
 *     }
 * }
 * ```
 */
declare class CanvasBaseItem<T2 extends CanvasBaseItemMemory> {
    constructor(..._options: any);
    /**
     * This method return the memory of the canvas element.
     * @throws {PixiError} when the method is not overridden in the subclass.
     */
    get memory(): T2;
    /**
     * This method set the memory of the canvas element.
     * @throws {PixiError} when the method is not overridden in the subclass.
     */
    setMemory(_value: T2): Promise<void> | void;
    /**
     * Get the id of the canvas element. This variable is used in the system to get the canvas element by id
     */
    pixivnId: string;
}

/**
 * Interface for the canvas base memory
 */
interface CanvasBaseItemMemory {
    pixivnId: string;
    /**
     * The index of the container in its parent, if it has one
     */
    index?: number;
    /**
     * The label of the parent container, if it has one
     */
    parentLabel?: string;
    label?: string;
    zIndex?: number;
}

interface CanvasBaseInterface<T2 extends CanvasBaseItemMemory> extends CanvasBaseItem<T2>, Container$1 {
}

/**
 * Interface exported canvas
 */
interface CanvasGameState {
    tickers: {
        [id: string]: TickerHistory<any>;
    };
    tickersSteps: {
        [alias: string]: {
            [tickerId: string]: TickersSequence;
        };
    };
    elements: {
        [alias: string]: CanvasBaseItemMemory;
    };
    stage: Partial<ContainerMemory>;
    /**
     * @deprecated
     */
    elementAliasesOrder: string[];
    tickersToCompleteOnStepEnd: {
        tikersIds: {
            id: string;
        }[];
        stepAlias: {
            id: string;
            alias: string;
        }[];
    };
}

interface CanvasManagerInterface {
    /**
     * The PIXI Application instance.
     * It not recommended to use this property directly.
     */
    readonly app: Application;
    /**
     * The PIXI Container that contains all the canvas elements.
     *
     */
    readonly gameLayer: Container$1;
    /**
     * If the manager is initialized.
     */
    readonly isInitialized: boolean;
    /**
     * The width of the canvas.
     */
    width: number;
    /**
     * The height of the canvas.
     */
    height: number;
    /**
     * The screen of the canvas ({@link Application.screen}).
     */
    readonly screen: Rectangle$1;
    /**
     * Initialize the PixiJS Application and the interface div.
     * This method should be called before any other method.
     * @param element The html element where I will put the canvas. Example: document.body
     * @param width The width of the canvas
     * @param height The height of the canvas
     * @param options The options of PixiJS Application
     * @param devtoolsOptions The options of the devtools. You can read more about it in the [PixiJS Devtools documentation](https://pixijs.io/devtools/docs/plugin/)
     * @example
     * ```typescript
     * const body = document.body
     * if (!body) {
     *     throw new Error('body element not found')
     * }
     * await canvas.init(body, {
     *     width: 1920,
     *     height: 1080,
     *     backgroundColor: "#303030"
     * })
     * ```
     */
    init(element: HTMLElement, options: Partial<ApplicationOptions> & {
        /**
         * The id of the canvas element.
         * @default "pixi-vn-canvas"
         */
        id?: string;
        /**
         * The resize mode of the canvas.
         * @default "contain"
         */
        resizeMode?: "contain" | "none";
    }, devtoolsOptions?: Devtools): Promise<void>;
    /**
     * The children of the canvas.
     */
    readonly children: ContainerChild$1[];
    /**
     * Copy the properties of an old canvas element to a new canvas element.
     * @param oldAlias Old alias
     * @param newAlias New alias
     * @param options The options of the copy.
     * @returns
     */
    copyCanvasElementProperty<T extends CanvasBaseItemMemory>(oldAlias: T | CanvasBaseInterface<T> | string, newAlias: CanvasBaseInterface<T> | string, options?: {
        /**
         * If provided, the properties returned by this function will not be copied from the old canvas element to the new canvas element.
         * @param defaultProperties The default properties that will be ignored.
         * @returns The properties that will be ignored.
         */
        ignoreProperties?: (defaultProperties: string[]) => string[];
    }): Promise<void>;
    /**
     * Transfer the tickers from an old alias to a new alias.
     * @param oldAlias Old alias
     * @param newAlias New alias
     * @param mode If "move", the old alias will be removed from the ticker. If "duplicate", the old alias will be kept in the ticker.
     */
    transferTickers(oldAlias: string, newAlias: string, mode?: "move" | "duplicate"): void;
    /**
     * Add a canvas element to the canvas.
     * If there is a canvas element with the same alias, all "style", zIndex, and {@link TickerBase} will be transferred to the new canvas element,
     * and the old canvas element will be removed.
     * @param alias The alias of the canvas element.
     * @param canvasComponent The canvas elements to be added.
     * @param options The options of the canvas element.
     * @example
     * ```typescript
     * const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
     * const sprite = Sprite.from(texture);
     * canvas.add("bunny", sprite);
     * ```
     */
    add(alias: string, canvasComponent: CanvasBaseInterface<any>, options?: {
        /**
         * If there is a canvas element with the same alias, the "style" of the old canvas element will be imported to the new canvas element.
         * @default false
         */
        ignoreOldStyle?: boolean;
        /**
         * The zIndex of the canvas element.
         * @default undefined
         */
        zIndex?: number;
    }): void;
    /**
     * Remove a canvas element from the canvas.
     * And remove all tickers that are not connected to any canvas element.
     * @param alias The alias of the canvas element to be removed.
     * @param options The options of the canvas element.
     * @returns
     * @example
     * ```typescript
     * canvas.remove("bunny");
     * ```
     */
    remove(alias: string | string[], options?: {
        /**
         * If true, the tickers that are connected to the canvas element will not be removed.
         * @default false
         */
        ignoreTickers?: boolean;
    }): void;
    /**
     * Get a canvas element by the alias.
     * @param alias The alias of the canvas element.
     * @returns The canvas element.
     * @example
     * ```typescript
     * const sprite = canvas.find<Sprite>("bunny");
     * ```
     */
    find<T extends CanvasBaseInterface<any>>(alias: string): T | undefined;
    /**
     * Check if a DisplayObject is on the canvas.
     * @param pixiElement The DisplayObject to be checked.
     * @returns If the DisplayObject is on the canvas.
     */
    canvasElementIsOnCanvas<T extends Container$1>(pixiElement: T): boolean;
    /**
     * Remove all canvas elements from the canvas.
     */
    removeAll(): void;
    /**
     * Edit the alias of a canvas element. The tickers that are connected to the canvas element will be transferred.
     * @param oldAlias The old alias of the canvas element.
     * @param newAlias The new alias of the canvas element.
     * @param options The options of the canvas element.
     */
    editAlias(oldAlias: string, newAlias: string, options?: {
        /**
         * If true, the tickers that are connected to the canvas element will not be transferred.
         * @default false
         */
        ignoreTickers?: boolean;
    }): void;
    /** Edit Tickers Methods */
    /**
     * Currently tickers that are running.
     */
    readonly currentTickers: {
        [id: string]: TickerInfo<any>;
    };
    /**
     * The steps of the tickers
     */
    readonly currentTickersSteps: {
        [alias: string]: {
            [tickerId: string]: TickersSequence;
        };
    };
    /**
     * Find a ticker by its id.
     * @param tickerId The id of the ticker.
     * @param args The args of the ticker.
     * @returns The ticker if found, undefined otherwise.
     */
    findTicker<TArgs extends TickerArgs>(tickerId: string, args?: TArgs): Ticker<TArgs> | undefined;
    /**
     * Run a ticker. You can run multiple addTicker with the same alias and different tickerClasses.
     * If you run a ticker with the same alias and tickerClass, the old ticker will be removed.
     * If already exists a sequence of tickers with the same alias, it will be removed.
     * @param canvasElementAlias The alias of the canvas element that will use the ticker.
     * @param ticker The ticker class to be run.
     * @returns The id of the ticker.
     * @example
     * ```typescript
     * canvas.addTicker("alien", new RotateTicker({ speed: 0.2 }))
     * ```
     */
    addTicker<TArgs extends TickerArgs>(canvasElementAlias: string | string[], ticker: Ticker<TArgs>): string | undefined;
    /**
     * Run a sequence of tickers.
     * @param alias The alias of canvas element that will use the tickers.
     * @param steps The steps of the tickers.
     * @param currentStepNumber The current step number. It is used to continue the sequence of tickers.
     * @returns The id of tickers.
     * @example
     * ```typescript
     * canvas.addTickersSequence("alien", [
     *     new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds
     *     Pause(1), // 1 second
     *     new RotateTicker({ speed: 0.2, clockwise: false }, 2),
     *     Repeat,
     * ])
     * ```
     */
    addTickersSequence(alias: string, steps: (Ticker<any> | RepeatType | PauseType)[], currentStepNumber?: number): string | undefined;
    /**
     * Remove a connection between a canvas element and a ticker.
     * And remove the ticker if there is no canvas element connected to it.
     * @param alias The alias of the canvas element that will use the ticker.
     * @param ticker The ticker class to be removed.
     * @example
     * ```typescript
     * canvas.unlinkComponentFromTicker("alien", RotateTicker)
     * ```
     * @deprecated
     */
    unlinkComponentFromTicker(alias: string | string[], ticker?: {
        new (): Ticker<any>;
    } | string): void;
    /**
     * Remove all tickers from the canvas.
     */
    removeAllTickers(): void;
    /**
     * Remove a ticker by the id.
     * @param tickerId The id of the ticker.
     */
    removeTicker(tickerId: string | string[]): void;
    /**
     * Pause a ticker. If a paused ticker have a time to be removed, it will be removed after the time.
     * @param filters The filters to pause the ticker.
     * @returns The ids of the paused tickers.
     */
    pauseTicker(filters: {
        /**
         * The alias of the canvas element that will use the ticker.
         * Will pause all tickers that are connected to this canvas element.
         */
        canvasAlias: string;
        /**
         * Ticker ids excluded from the pause. If not provided, all tickers will be paused.
         */
        tickerIdsExcluded?: string[];
    } | {
        /**
         * The id of the ticker to be paused. If provided, only this ticker will be paused.
         */
        id: string | string[];
    }): string[];
    /**
     * Resume a ticker.
     * @param filters The filters to resume the ticker.
     */
    resumeTicker(filters: {
        /**
         * The alias of the canvas element that will use the ticker.
         * Will resume all tickers that are connected to this canvas element.
         */
        canvasAlias: string;
    } | {
        /**
         * The id of the ticker to be resumed. If provided, only this ticker will be resumed.
         */
        id: string | string[];
    }): void;
    /**
     * @deprecated Use {@link findTicker}(id).paused
     * Check if a ticker is paused.
     * @param alias The alias of the canvas element that will use the ticker.
     * @param tickerId The ticker that will be checked.
     * @returns If the ticker is paused.
     */
    isTickerPaused(alias: string, tickerId?: string): boolean;
    /**
     * Add a ticker that must be completed before the next step.
     * This method is used for example into a transition between scenes.
     * @param step The step that the ticker must be completed before the next step.
     */
    completeTickerOnStepEnd(step: {
        /**
         * The id of the step.
         */
        id: string;
        /**
         * If is a sequence of tickers, the alias of the sequence of tickers.
         */
        alias?: string;
    }): void;
    /**
     * This method force the completion of the tickers that are running.
     * This funcions is called in the next step.
     * @param id The id of the ticker. If the alias provided, the id is the id of the sequence of tickers.
     * @param alias The alias of the sequence of tickers.
     */
    forceCompletionOfTicker(id: string, alias?: string): Promise<void>;
    /**
     * Animate a Pixi’VN component or components using [motion's animate](https://motion.dev/docs/animate) function.
     * This function integrates with the PixiJS ticker to ensure smooth animations.
     *
     * Pixi’VN will keep track of the animation state of this function.
     * So Pixi’VN will save the animation state in saves.
     * @param components - The PixiJS component(s) to animate.
     * @param keyframes - The keyframes to animate the component(s) with.
     * @param options - Additional options for the animation, including duration, easing, and ticker.
     * @param priority - The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
     * @returns The id of tickers.
     * @template T - The type of Pixi’VN component(s) being animated.
     */
    animate<T extends CanvasBaseInterface<any>>(components: T | string | (string | T)[], keyframes: KeyframesType<T>, options?: AnimationOptions, priority?: UPDATE_PRIORITY$1): string | undefined;
    /**
     * Animate a Pixi’VN component or components using [motion's animate](https://motion.dev/docs/animate) function.
     * This function integrates with the PixiJS ticker to ensure smooth animations.
     *
     * Pixi’VN will keep track of the animation state of this function.
     * So Pixi’VN will save the animation state in saves.
     * @param components - The PixiJS component(s) to animate.
     * @param sequence - The sequence of keyframes to animate the component(s) with.
     * @param options - Additional options for the animation, including duration, easing, and ticker.
     * @param priority - The priority of the ticker. @default UPDATE_PRIORITY.NORMAL
     * @returns The id of tickers.
     * @template T - The type of Pixi’VN component(s) being animated.
     */
    animate<T extends CanvasBaseInterface<any>>(components: T | string, sequence: (ObjectSegment<T> | ObjectSegmentWithTransition<T>)[], options?: SequenceOptions, priority?: UPDATE_PRIORITY$1): string | undefined;
    /**
     * Add a layer to the canvas.
     * @param label The label of the layer.
     * @param layer The layer to be added.
     * @returns The layer.
     * @example
     * ```typescript
     * const uiLayer = new Container();
     * canvas.addLayer("ui", uiLayer);
     * ```
     */
    addLayer(label: string, layer: Container$1): Layer | undefined;
    /**
     * Get a layer from the canvas.
     * @param label The label of the layer.
     * @returns The layer.
     * @example
     * ```typescript
     * const uiLayer = canvas.getLayer("ui");
     * ```
     */
    getLayer(label: string): Layer | null;
    /**
     * Remove a layer from the canvas.
     * @param label The label of the layer to be removed.
     * @example
     * ```typescript
     * canvas.removeLayer("ui");
     * ```
     */
    removeLayer(label: string): void;
    /**
     * Add a HTML layer to the canvas.
     * @param id The id of the layer.
     * @param element The html element to be added.
     * @param style The style of the layer. @default { position: "absolute", pointerEvents: "none" }.
     * @example
     * ```tsx
     * const root = document.getElementById('root')
     * if (!root) {
     *     throw new Error('root element not found')
     * }
     * const htmlLayer = canvas.addHtmlLayer("ui", root, {
     *    position: "absolute",
     *    pointerEvents: "none"
     * })
     * const reactRoot = createRoot(htmlLayer)
     * reactRoot.render(
     *     <App />
     * )
     * ```
     */
    addHtmlLayer(id: string, element: HTMLElement, style?: Pick<CSSStyleDeclaration, "position" | "pointerEvents">): HTMLDivElement;
    /**
     * Get a HTML layer from the canvas.
     * @param id The id of the layer to be removed.
     */
    removeHtmlLayer(id: string): void;
    /**
     * Get a HTML layer from the canvas.
     * @param id The id of the layer.
     */
    getHtmlLayer(id: string): HTMLElement | undefined;
    /**
     * Extract the canvas as an image.
     * @returns The image as a base64 string.
     */
    extractImage(): Promise<string>;
    /**
     * Clear the canvas and the tickers.
     */
    clear(): void;
    /**
     * Export the canvas and the tickers to an object.
     * @returns The object.
     */
    export(): CanvasGameState;
    /**
     * Restore the canvas and the tickers from an object.
     * @param data The object.
     */
    restore(data: object): Promise<void>;
    onTickerComplete(tickerId: string, options: {
        aliasToRemoveAfter: string[];
        tickerAliasToResume: string[];
        tickerIdToResume: string[];
        ignoreTickerSteps?: boolean;
        stopTicker?: boolean;
    }): void;
}

interface AdditionalPositionsExtensionProps {
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    align?: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    xAlign?: number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    yAlign?: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentagePosition?: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageX?: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageY?: number;
}
interface AdditionalPositionsExtension {
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    align: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    xAlign: number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    yAlign: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentagePosition: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageX: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageY: number;
    readonly positionType: "pixel" | "percentage" | "align";
    readonly positionInfo: {
        x: number;
        y: number;
        type: "pixel" | "percentage" | "align";
    };
}
declare function analizePositionsExtensionProps<T extends AdditionalPositionsExtensionProps>(props?: T): T | undefined;

interface AnchorExtensionProps {
    anchor?: PointData | number;
}
interface AnchorExtension {
    /**
     * The anchor sets the origin point of the imageContainer. The default value is taken from the {@link Texture}
     * and passed to the constructor.
     *
     * The default is `(0,0)`, this means the imageContainer's origin is the top left.
     *
     * Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered.
     *
     * Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner.
     *
     * If you pass only single parameter, it will set both x and y to the same value as shown in the example below.
     * @example
     * import { ImageContainer } from '@drincs/pixi-vn';
     *
     * const imageContainer = new ImageContainer();
     * imageContainer.anchor = 0.5;
     */
    anchor: PointData;
}

type ContainerChild = Container$1 & CanvasBaseItem<any>;

interface ContainerOptions<C extends ContainerChild = ContainerChild> extends Omit<ContainerOptions$1<C>, "on">, AnchorExtensionProps, AdditionalPositionsExtensionProps {
}
interface SpriteOptions extends Omit<SpriteOptions$1, "on">, AdditionalPositionsExtensionProps {
}
interface TextOptions extends Omit<CanvasTextOptions, "on">, AdditionalPositionsExtensionProps {
}
interface ImageContainerOptions<C extends ContainerChild = ContainerChild> extends ContainerOptions<C> {
}
interface ImageSpriteOptions extends SpriteOptions {
}
interface VideoSpriteOptions extends ImageSpriteOptions {
    loop?: boolean;
    paused?: boolean;
    currentTime?: number;
}

interface ListenerExtensionMemory {
    onEvents?: OnEventsHandlers;
}
interface OnEventsHandlers {
    [name: string]: string;
}
interface ListenerExtension {
    /**
     * Add a listener for a given event.
     * @example
     * ```ts
     * export class Events {
     *     \@eventDecorator()
     *     static eventExample(event: FederatedEvent, component: Sprite) {
     *         // event code here
     *     }
     * }
     *
     * sprite.on("pointerdown", Events.eventExample);
     * ```
     */
    on: Container$1["on"];
    readonly onEventsHandlers: OnEventsHandlers;
}
declare function addListenerHandler<T extends ListenerExtension>(event: symbol | string, element: T, fn: Function): boolean;

/**
 * Interface for Asset memory
 */
interface AssetMemory {
    /**
     * @deprecated
     */
    image?: string;
    alias?: string;
    url: string;
}

interface SpriteBaseMemory extends SpriteOptions$1, CanvasBaseItemMemory, ListenerExtensionMemory, AdditionalPositionsExtensionProps {
    textureData?: AssetMemory;
}
/**
 * Interface for the canvas sprite memory
 */
interface SpriteMemory extends SpriteBaseMemory {
}

/**
 * The memory of the image. It uses for save the state of the image.
 */
interface ImageSpriteMemory extends SpriteBaseMemory {
    loadIsStarted: boolean;
}

/**
 * The memory of the video. It uses for save the state of the video.
 */
interface VideoSpriteMemory extends ImageSpriteMemory {
    loop: boolean;
    paused: boolean;
    currentTime: number;
}

/**
 * This class is a extension of the [PIXI.Sprite class](https://pixijs.com/8.x/examples/sprite/basic), it has the same properties and methods,
 * but it has the ability to be saved and loaded by the Pixi’VN library.
 * @example
 * ```typescript
 * const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
 * const sprite = Sprite.from(texture);
 *
 * sprite.anchor.set(0.5);
 * sprite.x = canvas.screen.width / 2;
 * sprite.y = canvas.screen.height / 2;
 *
 * sprite.eventMode = 'static';
 * sprite.cursor = 'pointer';
 * sprite.onEvent('pointerdown', EventTest);
 *
 * canvas.add("bunny", sprite);
 * ```
 */
declare class Sprite<Memory extends SpriteOptions$1 & CanvasBaseItemMemory = SpriteMemory> extends _drincs_pixi_vn_pixi_js__default.Sprite implements CanvasBaseItem<Memory | SpriteMemory>, ListenerExtension, AdditionalPositionsExtension {
    constructor(options?: SpriteOptions | Omit<Texture$1, "on">);
    readonly pixivnId: string;
    get memory(): Memory | SpriteMemory;
    setMemory(value: Memory | SpriteMemory): Promise<void>;
    static from(source: Texture$1 | TextureSourceLike, skipCache?: boolean): Sprite<any>;
    /** ListenerExtension */
    readonly onEventsHandlers: OnEventsHandlers;
    on<T extends keyof ContainerEvents<ContainerChild$1> | keyof {
        [K: symbol]: any;
        [K: {} & string]: any;
    }>(event: T, fn: (...args: [
        ...EventEmitter.ArgumentMap<ContainerEvents<ContainerChild$1> & {
            [K: symbol]: any;
            [K: {} & string]: any;
        }>[Extract<T, keyof ContainerEvents<ContainerChild$1> | keyof {
            [K: symbol]: any;
            [K: {} & string]: any;
        }>],
        typeof this
    ]) => void, context?: any): this;
    /** AdditionalPositionsExtension */
    private _align;
    set align(value: Partial<PointData> | number);
    get align(): Partial<PointData> | number;
    set xAlign(value: number);
    get xAlign(): number;
    set yAlign(value: number);
    get yAlign(): number;
    private _percentagePosition;
    set percentagePosition(value: Partial<PointData> | number);
    get percentagePosition(): Partial<PointData> | number;
    get percentageX(): number;
    set percentageX(_value: number);
    get percentageY(): number;
    set percentageY(_value: number);
    get positionType(): "pixel" | "percentage" | "align";
    get positionInfo(): {
        x: number;
        y: number;
        type: "pixel" | "percentage" | "align";
    };
    set positionInfo(value: {
        x: number;
        y: number;
        type?: "pixel" | "percentage" | "align";
    });
    protected reloadPosition(): void;
    get position(): ObservablePoint;
    set position(value: ObservablePoint);
    get x(): number;
    set x(value: number);
    get y(): number;
    set y(value: number);
}

/**
 * This class is a extension of the {@link Sprite} class, it has the same properties and methods,
 * but it has some features that make texture management easier.
 * You need to use {@link load} to show the image in the canvas.
 * This class is used for functions like {@link addImage} and {@link showWithDissolve}.
 * @example
 * ```typescript
 * let alien = new ImageSprite({
 *     anchor: { x: 0.5, y: 0.5 },
 *     x: 100,
 *     y: 100,
 * }, 'https://pixijs.com/assets/eggHead.png')
 * await alien.load()
 * canvas.add("alien", alien)
 * ```
 * @example
 * ```typescript
 * let alien = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
 * alien.anchor.set(0.5);
 * alien.x = 100
 * alien.y = 100
 * await alien.load()
 * ```
 */
declare class ImageSprite<Memory extends ImageSpriteMemory = ImageSpriteMemory> extends Sprite<Memory> {
    private _textureAlias?;
    protected get textureAlias(): string;
    readonly pixivnId: string;
    constructor(options?: ImageSpriteOptions | Omit<Texture$1, "on"> | undefined, textureAlias?: string);
    get memory(): ImageSpriteMemory;
    setMemory(memory: Memory | SpriteMemory): Promise<void>;
    static from(source: Texture$1 | TextureSourceLike, skipCache?: boolean): ImageSprite<ImageSpriteMemory>;
    private _loadIsStarted;
    get loadIsStarted(): boolean;
    /**
     * Load the image from the link and set the texture of the sprite.
     * @returns A promise that resolves when the image is loaded.
     */
    load(): Promise<void>;
    set texture(value: Texture$1<TextureSource<any>>);
    get texture(): Texture$1<TextureSource<any>>;
    /**
     * Check if the texture is empty.
     * @returns A boolean that is true if the texture is empty.
     */
    get haveEmptyTexture(): boolean;
}

/**
 * This class is a extension of the {@link ImageSprite} class, it has the same properties and methods,
 * but it has some features that make video management easier.
 * You need to use {@link load} to show the video in the canvas.
 * This class is used for functions like {@link addVideo} and {@link showWithDissolve}.
 * @example
 * ```typescript
 * let film = new VideoSprite({
 *     x: 100,
 *     y: 100,
 * }, 'https://pixijs.com/assets/video.mp4')
 * await film.load()
 * canvas.add("film", film)
 * ```
 * @example
 * ```typescript
 * let film = addVideo("film", 'https://pixijs.com/assets/video.mp4')
 * film.currentTime = 2
 * await film.load()
 * ```
 */
declare class VideoSprite extends ImageSprite<VideoSpriteMemory> {
    constructor(options?: VideoSpriteOptions | Texture$1 | undefined, textureAlias?: string);
    readonly pixivnId: string;
    get memory(): VideoSpriteMemory;
    setMemory(value: VideoSpriteMemory): Promise<void>;
    static from(source: Texture$1 | TextureSourceLike, skipCache?: boolean): VideoSprite;
    load(): Promise<void>;
    private _looop;
    /**
     * Set to true if you want the video to loop.
     */
    get loop(): boolean;
    set loop(value: boolean);
    private _paused;
    /**
     * Set to true if you want the video to be paused.
     */
    get paused(): boolean;
    set paused(value: boolean);
    /**
     * Pause the video.
     */
    pause(): void;
    /**
     * Play the video.
     */
    play(): void;
    private _currentTime;
    /**
     * The current time of the video.
     */
    get currentTime(): number;
    set currentTime(value: number);
    /**
     * Restart the video.
     */
    restart(): void;
    /**
     * The duration of the video.
     */
    get duration(): number | undefined;
}

/**
 * Interface for the canvas container memory
 */
interface ContainerMemory<C extends ContainerChild = ContainerChild> extends ContainerOptions$1<C>, CanvasBaseItemMemory, ListenerExtensionMemory, AdditionalPositionsExtensionProps {
    /**
     * The elements contained in this container
     */
    elements: CanvasBaseItemMemory[];
}

/**
 * Interface for the canvas container memory
 */
interface ImageContainerMemory extends ContainerMemory<ImageSprite> {
    elements: ImageSpriteMemory[];
    anchor?: PointData;
    loadIsStarted: boolean;
}

/**
 * This class is a