@drincs/pixi-vn/dist/index-D0ncbTLh.d.ts

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

import * as pixi_js from 'pixi.js';
import { Container as Container$1, ContainerChild, Application, Rectangle, ApplicationOptions, UPDATE_PRIORITY, PointData, SpriteOptions as SpriteOptions$1, EventEmitter, ContainerOptions, TextOptions as TextOptions$1, AllFederatedEventMap, Sprite as Sprite$1, Texture, ContainerEvents, TextureSourceLike, TextureSource, ObservablePoint, Text as Text$1 } from 'pixi.js';
import { Devtools } from '@pixi/devtools';
import { ObjectTarget, AnimationOptions as AnimationOptions$1, At, SequenceOptions as SequenceOptions$1 } from 'motion';
import { b as CanvasBaseItemMemory, C as CanvasBaseItem, a as CanvasGameState, d as ContainerChild$1, c as ContainerMemory, P as PauseTickerType } from './ContainerMemory-DrijxCcD.js';
import { CommonTickerProps, TickerTimeoutHistory, FadeAlphaTicker, FadeAlphaTickerProps, MoveTicker, MoveTickerProps, RegisteredTickers, RotateTicker, RotateTickerProps, TickerBase, TickerProgrationExponential, TickerProgrationLinear, TickerProgrationType, TickerValue, ZoomTicker, ZoomTickerProps, animate, tickerDecorator } from './canvas/tickers/index.js';
import { c as TickerInfo, d as TickersSequence, a as TickerArgs, T as Ticker, R as RepeatType, P as PauseType, b as TickerHistory } from './TickersSequence-Cf1Vcu22.js';

type Layer = Container$1<ContainerChild>;

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

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

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

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

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.
     */
    canvasWidth: number;
    /**
     * The height of the canvas.
     */
    canvasHeight: number;
    /**
     * The screen of the canvas ({@link Application.screen}).
     */
    readonly screen: Rectangle;
    /**
     * 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> & {
        width: number;
        height: number;
    }, devtoolsOptions?: Devtools): Promise<void>;
    /**
     * The children of the canvas.
     */
    readonly children: ContainerChild[];
    /**
     * Copy the properties of an old canvas element to a new canvas element.
     * @param oldAlias Old alias
     * @param newAlias New alias
     * @returns
     */
    copyCanvasElementProperty<T extends CanvasBaseItemMemory>(oldAlias: T | CanvasBaseInterface<T> | string, newAlias: CanvasBaseInterface<T> | 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;
    /**
     * 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): 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): 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>;
    /**
     * @deprecated Use {@link onTickerComplete}
     */
    onEndOfTicker(tickerId: string, options: {
        aliasToRemoveAfter: string[];
        tickerAliasToResume: string[];
        tickerIdToResume: string[];
        ignoreTickerSteps?: boolean;
    }): 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;
    /**
     * @deprecated Use {@link align} instead.
     */
    xPercentagePosition?: number;
    /**
     * @deprecated Use {@link align} instead.
     */
    yPercentagePosition?: number;
}
declare class 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.
     */
    set align(_value: Partial<PointData> | number);
    get 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.
     */
    set xAlign(_value: number);
    get 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.
     */
    set yAlign(_value: number);
    get 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.
     */
    set percentagePosition(_value: Partial<PointData> | number);
    get 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.
     */
    set percentageX(_value: number);
    get percentageX(): number;
    /**
     * @deprecated Use {@link align} instead.
     */
    set xPercentagePosition(_value: number);
    get xPercentagePosition(): 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.
     */
    set percentageY(_value: number);
    get percentageY(): number;
    /**
     * @deprecated Use {@link align} instead.
     */
    set yPercentagePosition(_value: number);
    get yPercentagePosition(): number;
    get positionType(): "pixel" | "percentage" | "align";
    get positionInfo(): {
        x: number;
        y: number;
        type: "pixel" | "percentage" | "align";
    };
}

interface AnchorExtensionProps {
    anchor?: PointData | number;
}
declare class AnchorExtension extends Container$1 {
    /**
     * 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;
     */
    get anchor(): PointData;
    set anchor(_value: PointData | number);
}

interface SpriteOptions extends Omit<SpriteOptions$1, "on"> {
    /**
     * Add a listener for a given event.
     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
     */
    on?: <T extends EventEmitter.EventNames<string | symbol>>(event: T, fn: EventEmitter.EventListener<string | symbol, T>, context?: any) => this;
}
interface TextOptions extends Omit<TextOptions$1, "on"> {
    /**
     * Add a listener for a given event.
     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
     */
    on?: <T extends EventEmitter.EventNames<string | symbol>>(event: T, fn: EventEmitter.EventListener<string | symbol, T>, context?: any) => this;
}
interface ImageContainerOptions<C extends ContainerChild$1 = ContainerChild$1> extends ContainerOptions<C>, AnchorExtensionProps, AdditionalPositionsExtensionProps {
}
interface ImageSpriteOptions extends SpriteOptions, AdditionalPositionsExtensionProps {
}
interface VideoSpriteOptions extends ImageSpriteOptions {
    loop?: boolean;
    paused?: boolean;
    currentTime?: number;
}

type EventIdType = string;

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

interface SpriteBaseMemory extends SpriteOptions$1, CanvasBaseItemMemory {
    /**
     * @deprecated
     */
    textureImage?: TextureMemory;
    textureData: TextureMemory;
    onEvents: {
        [name: string]: EventIdType;
    };
}
/**
 * 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, AdditionalPositionsExtensionProps {
    /**
     * @deprecated use SpriteBaseMemory.textureAlias
     */
    imageLink?: string;
    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;
}

/**
 * CanvasEventNamesType is a type that is used to define the event names for the canvas.
 */
type CanvasEventNamesType = keyof AllFederatedEventMap;

/**
 * CanvasEvent is a class that is used to create a pixi event, and connect it to a canvas element, with on().
 * This class should be extended and the fn method should be overridden.
 * You must use the {@link eventDecorator} to register the event in the game.
 * @example
 * ```typescript
 * \@eventDecorator() // this is equivalent to eventDecorator("EventTest")
 * export class EventTest extends CanvasEvent<Sprite> {
 *     override fn(event: CanvasEventNamesType, sprite: Sprite): void {
 *         if (event === 'pointerdown') {
 *             sprite.scale.x *= 1.25;
 *             sprite.scale.y *= 1.25;
 *         }
 *     }
 * }
 * ```
 */
declare class CanvasEvent<C> {
    constructor();
    fn(_event: CanvasEventNamesType, _element: C): void;
    /**
     * Get the id of the event. This variable is used in the system to get the event by id, {@link RegisteredEvents.getInstance}.
     */
    id: EventIdType;
}

/**
 * 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 Sprite$1 implements CanvasBaseItem<Memory | SpriteMemory> {
    constructor(options?: SpriteOptions | Omit<Texture, "on">);
    pixivnId: string;
    private _textureAlias?;
    get textureAlias(): string;
    set textureAlias(value: string);
    get memory(): Memory | SpriteMemory;
    set memory(_value: Memory | SpriteMemory);
    setMemory(value: Memory | SpriteMemory): Promise<void>;
    private _onEvents;
    get onEvents(): {
        [name: string]: string;
    };
    /**
     * is same function as on(), but it keeps in memory the children.
     * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
     * @param eventClass The class that extends CanvasEvent.
     * @returns
     * @example
     * ```typescript
     * \@eventDecorator()
     * export class EventTest extends CanvasEvent<Sprite> {
     *     override fn(event: CanvasEventNamesType, sprite: Sprite): void {
     *         if (event === 'pointerdown') {
     *             sprite.scale.x *= 1.25;
     *             sprite.scale.y *= 1.25;
     *         }
     *     }
     * }
     * ```
     *
     * ```typescript
     * let sprite = addImage("alien", 'https://pixijs.com/assets/eggHead.png')
     * await sprite.load()
     *
     * sprite.eventMode = 'static';
     * sprite.cursor = 'pointer';
     * sprite.onEvent('pointerdown', EventTest);
     *
     * canvas.add("bunny", sprite);
     * ```
     */
    onEvent<T extends typeof CanvasEvent<typeof this>>(event: CanvasEventNamesType, eventClass: T): this;
    /**
     * Add a listener for a given event.
     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
     */
    on<T extends keyof ContainerEvents<ContainerChild> | keyof {
        [K: symbol]: any;
        [K: {} & string]: any;
    }>(event: T, fn: (...args: EventEmitter.ArgumentMap<ContainerEvents<ContainerChild> & {
        [K: symbol]: any;
        [K: {} & string]: any;
    }>[Extract<T, keyof ContainerEvents<ContainerChild> | keyof {
        [K: symbol]: any;
        [K: {} & string]: any;
    }>]) => void, context?: any): this;
    static from(source: Texture | TextureSourceLike, skipCache?: boolean): Sprite<any>;
}

/**
 * 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 ImageSprite.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> implements AdditionalPositionsExtension {
    pixivnId: string;
    constructor(options?: ImageSpriteOptions | Omit<Texture, "on"> | undefined, textureAlias?: string);
    get memory(): ImageSpriteMemory;
    set memory(_value: ImageSpriteMemory);
    setMemory(value: ImageSpriteMemory): Promise<void>;
    static from(source: Texture | 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<TextureSource<any>>);
    get texture(): Texture<TextureSource<any>>;
    /**
     * Check if the texture is empty.
     * @returns A boolean that is true if the texture is empty.
     */
    get haveEmptyTexture(): boolean;
    /** AdditionalPositions */
    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);
    set xPercentagePosition(_value: number);
    get xPercentagePosition(): number;
    set yPercentagePosition(_value: number);
    get yPercentagePosition(): 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";
    });
    private reloadPosition;
    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 ImageSprite} class, it has the same properties and methods,
 * but it has some features that make video management easier.
 * You need to use {@link VideoSprite.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 | undefined, textureAlias?: string);
    pixivnId: string;
    get memory(): VideoSpriteMemory;
    set memory(_value: VideoSpriteMemory);
    setMemory(value: VideoSpriteMemory): Promise<void>;
    static from(source: Texture | 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 ImageContainerMemory extends ContainerMemory<ImageSprite>, AdditionalPositionsExtensionProps {
    elements: ImageSpriteMemory[];
    anchor?: PointData;
    loadIsStarted: boolean;
}

/**
 * This class is a extension of the [PIXI.Container class](https://pixijs.com/8.x/examples/basic/container), 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 container = new Container();
 *  canvas.add(container);
 *  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
 *  for (let i = 0; i < 25; i++)
 *  {
 *      const bunny = new Sprite(texture);
 *      bunny.x = (i % 5) * 40;
 *      bunny.y = Math.floor(i / 5) * 40;
 *      container.addChild(bunny);
 *  }
 * ```
 */
declare class Container<C extends ContainerChild$1 = ContainerChild$1, Memory extends ContainerMemory = ContainerMemory> extends Container$1<C> implements CanvasBaseItem<Memory> {
    constructor(options?: ContainerOptions<C>);
    pixivnId: string;
    get memory(): Memory;
    set memory(_value: Memory);
    setMemory(value: Memory): Promise<void>;
    protected importChildren(value: Memory): Promise<void>;
    private _onEvents;
    get onEvents(): {
        [name: string]: string;
    };
    /**
     * is same function as on(), but it keeps in memory the children.
     * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
     * @param eventClass The class that extends CanvasEvent.
     * @returns
     * @example
     * ```typescript
     * \@eventDecorator()
     * export class EventTest extends CanvasEvent<Container> {
     *     override fn(event: CanvasEventNamesType, container: Container): void {
     *         if (event === 'pointerdown') {
     *             container.scale.x *= 1.25;
     *             container.scale.y *= 1.25;
     *         }
     *     }
     * }
     * ```
     *
     * ```typescript
     * const container = new Container();
     *
     * container.eventMode = 'static';
     * container.cursor = 'pointer';
     * container.onEvent('pointerdown', EventTest);
     *
     * canvas.add("container", container);
     * ```
     */
    onEvent<T extends CanvasEventNamesType, T2 extends typeof CanvasEvent<typeof this>>(event: T, eventClass: T2): this;
    /**
     * Add a listener for a given event.
     * Unlike {@link onEvent}, this method does **not track the event association in the current game state**, so it will not be included in saves.
     */
    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;
    }>]) => void, context?: any): this;
}

/**
 * This class is a extension of the {@link Container}, it has the same properties and methods,
 * but this container is composed only of {@link ImageSprite} and introduces the {@link ImageContainer.load} functionality
 * @example
 * ```typescript
 *  const liamBodyImageUrl = 'https://example.com/assets/liam/body.png';
 *  const liamHeadImageUrl = 'https://example.com/assets/liam/head.png';
 *  const container = new ImageContainer(undefined, [liamBodyImageUrl, liamHeadImageUrl]);
 *  await container.load()
 *  canvas.add(container);
 * ```
 */
declare class ImageContainer extends Container<ImageSprite, ImageContainerMemory> implements AnchorExtension, AdditionalPositionsExtension {
    constructor(options?: ImageContainerOptions<ImageSprite>, textureAliases?: string[]);
    get memory(): ImageContainerMemory;
    set memory(_value: ImageContainerMemory);
    setMemory(value: ImageContainerMemory): Promise<void>;
    pixivnId: string;
    private _loadIsStarted;
    get loadIsStarted(): boolean;
    /**
     * Load the children images.
     * @returns A promise that resolves when the images are loaded.
     */
    load(): Promise<void>;
    /**
     * The texture of the first child.
     * If there is no child, it returns a new {@link Texture}.
     */
    get texture(): Texture<pixi_js.TextureSource<any>>;
    /**
     * Check if there is a child with the empty texture.
     * @returns A boolean that is true if there is a child with the empty texture.
     */
    get haveEmptyTexture(): boolean;
    /** Anchor */
    private _anchor?;
    get anchor(): PointData;
    set anchor(value: PointData | number);
    private reloadAnchor;
    get pivot(): ObservablePoint;
    set pivot(value: ObservablePoint);
    /** AdditionalPositions */
    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;
    set percentageX(_value: number);
    get percentageX(): number;
    set xPercentagePosition(_value: number);
    get xPercentagePosition(): number;
    set yPercentagePosition(_value: number);
    get yPercentagePosition(): number;
    set percentageY(_value: number);
    get percentageY(): 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";
    });
    private reloadPosition;
    get position(): ObservablePoint;
    set position(value: ObservablePoint);
    get x(): number;
    set x(value: number);
    get y(): number;
    set y(value: number);
}

/**
 * This class is responsible for managing the canvas, the tickers, the events, and the window size and the children of the window.
 */
declare class CanvasManagerStatic {
    private constructor();
    private static _app;
    static get app(): Application<pixi_js.Renderer>;
    static get gameLayer(): Container$1<pixi_js.ContainerChild>;
    /**
     * This is the div that have same size of the canvas.
     * This is useful to put interface elements.
     * You can use React or other framework to put elements in this div.
     */
    static htmlLayers: HTMLElement[];
    static canvasWidth: number;
    static canvasHeight: number;
    static _isInitialized: boolean;
    static init(element: HTMLElement, width: number, height: number, options?: Partial<ApplicationOptions>, devtoolsOptions?: Devtools): Promise<void>;
    /**
     * Add the canvas into a html element.
     * @param element it is the html element where I will put the canvas. Example: document.body
     */
    private static addCanvasIntoHTMLElement;
    static addHtmlLayer(id: string, element: HTMLElement, style?: Pick<CSSStyleDeclaration, "position" | "pointerEvents">): HTMLDivElement;
    static removeHtmlLayer(id: string): void;
    static getHtmlLayer(id: string): HTMLElement | undefined;
    /**
     * This method returns the scale of the screen.
     */
    private static get screenScale();
    /**
     * This method returns the width of the screen enlarged by the scale.
     */
    private static get screenWidth();
    /**
     * This method returns the height of the screen enlarged by the scale.
     */
    private static get screenHeight();
    /**
     * This method returns the horizontal margin of the screen.
     */
    private static get horizontalMargin();
    /**
     * This method returns the vertical margin of the screen.
     */
    private static get verticalMargin();
    /**
     * This method is called when the screen is resized.
     */
    private static resize;
    /**
     * The order of the elements in the canvas, is determined by the zIndex.
     */
    static get childrenAliasesOrder(): string[];
    /** Edit Tickers Methods */
    static get currentTickersWithoutCreatedBySteps(): {
        [k: string]: TickerHistory<any>;
    };
    static _currentTickers: {
        [id: string]: TickerInfo<any>;
    };
    static _currentTickersSequence: {
        [alias: string]: {
            [tickerId: string]: TickersSequence;
        };
    };
    static _currentTickersTimeouts: {
        [timeout: string]: TickerTimeoutHistory;
    };
    static _tickersToCompleteOnStepEnd: {
        tikersIds: {
            id: string;
        }[];
        stepAlias: {
            id: string;
            alias: string;
        }[];
    };
    /**
     * @deprecated
     */
    static _tickersOnPause: {
        [aliasOrId: string]: PauseTickerType;
    };
    static generateTickerId(tickerData: TickerInfo<any> | TickersSequence): string;
    static addTickerTimeoutInfo(aliases: string | string[], ticker: string, timeout: string, canBeDeletedBeforeEnd: boolean): void;
    static removeTickerTimeoutInfo(timeout: NodeJS.Timeout | string): void;
    static removeTickerTimeout(timeout: NodeJS.Timeout | string): void;
    static removeTickerTimeoutsByAlias(alias: string, checkCanBeDeletedBeforeEnd: boolean): void;
}

/**
 * Interface for the canvas text memory
 */
interface TextMemory extends TextOptions$1, CanvasBaseItemMemory {
    onEvents: {
        [name: string]: EventIdType;
    };
}

/**
 * This class is a extension of the [PIXI.Text class](https://pixijs.com/8.x/examples/text/pixi-text), 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 text = new Text();
 * text.text = "Hello World"
 * canvas.add("text", text);
 * ```
 */
declare class Text extends Text$1 implements CanvasBaseItem<TextMemory> {
    constructor(options?: TextOptions);
    pixivnId: string;
    get memory(): TextMemory;
    set memory(_value: TextMemory);
    setMemory(value: TextMemory): Promise<void>;
    private _onEvents;
    get onEvents(): {
        [name: string]: string;
    };
    /**
     * is same function as on(), but it keeps in memory the children.
     * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc.
     * @param eventClass The class that extends CanvasEvent.
     * @returns
     * @example
     * ```typescript
     * \@eventDecorator()
     * export class EventTest extends CanvasEvent<Text> {
     *     override fn(event: CanvasEventNamesType, text: Text): void {
     *         if (event === 'pointerdown') {
     *             text.scale.x *= 1.25;
     *             text.scale.y *= 1.25;
     *         }
     *     }
     * }
     * ```
     *
     * ```typescript
     * const text = new Text();
     * text.text = "Hello Wo