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

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

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

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

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;
    /**
     * @deprecated Use `canvas.getHtmlLayers` instead.
     */
    get htmlLayout(): HTMLElement | undefined;
    /**
     * @deprecated Use `canvas.addHtmlLayer` instead.
     */
    set htmlLayout(value: HTMLElement);
    /**
     * 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>;
    /**
     * @deprecated Use `canvas.addHtmlLayer` instead.
     */
    initializeHTMLLayout(element: HTMLElement): 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.
     * And remove all tickers that are not connected to any canvas element.
     */
    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]: TickerHistory<any>;
    };
    /**
     * The steps of the tickers
     */
    readonly currentTickersSteps: {
        [alias: string]: {
            [tickerId: string]: TickersSequence;
        };
    };
    /**
     * 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: TickerBase<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 the sequence 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)
     * ```
     */
    unlinkComponentFromTicker(alias: string | string[], ticker?: typeof TickerBase<any> | TickerBase<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 alias The alias of the canvas element that will use the ticker.
     * @param options The options of the pause ticker.
     */
    pauseTicker(alias: string, options?: PauseTickerType): void;
    /**
     * Resume a ticker.
     * @param alias The alias of the canvas element that will use the ticker.
     */
    resumeTicker(alias: 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): void;
    /**
     * 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): Container$1<ContainerChild> | 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): Container$1<ContainerChild> | 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>;
    onEndOfTicker(tickerId: string, options: {
        aliasToRemoveAfter: string[] | string;
        tickerAliasToResume: string[] | string;
        ignoreTickerSteps?: 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.
     */
    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.
     */
    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 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 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 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, 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 & CanvasBaseItemMemory = SpriteMemory> extends Sprite$1 implements CanvasBaseItem<Memory | SpriteMemory> {
    constructor(options?: SpriteOptions | Texture);
    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;
    /**
     * on() does not keep in memory the event class, use onEvent() instead
     * @deprecated
     * @private
     * @param event
     * @param fn
     * @param context
     */
    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 | Texture | 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 xPercentagePosition(): number;
    set xPercentagePosition(_value: number);
    get yPercentagePosition(): number;
    set yPercentagePosition(_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";
    });
    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;
    /**
     * on() does not keep in memory the event class, use onEvent() instead
     * @deprecated
     * @private
     * @param event
     * @param fn
     * @param context
     */
    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 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 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]: TickerHistory<any>;
    };
    static _currentTickersSequence: {
        [alias: string]: {
            [tickerId: string]: TickersSequence;
        };
    };
    static _currentTickersTimeouts: {
        [timeout: string]: TickerTimeoutHistory;
    };
    static _tickersToCompleteOnStepEnd: {
        tikersIds: {
            id: string;
        }[];
        stepAlias: {
            id: string;
            alias: string;
        }[];
    };
    static _tickersOnPause: {
        [aliasOrId: string]: PauseTickerType;
    };
    static generateTickerId(tickerData: TickerHistory<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, 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 World"
     *
     * text.eventMode = 'static';
     * text.cursor = 'pointer';
     * text.onEvent('pointerdown', EventTest);
     *
     * canvas.add("text", text);
     * ```
     */
    onEvent<T extends typeof CanvasEvent<typeof this>>(event: CanvasEventNamesType, eventClass: T): this;
    /**
     * on() does not keep in memory the event class, use onEvent() instead
     * @deprecated
     * @private
     * @param event
     * @param fn
     * @param context
     */
    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;
}

type CanvasElementAliasType = string;

/**
 * Is a decorator that register a canvas component in the game.
 * @param name Name of the canvas component, by default it will use the class name. If the name is already registered, it will show a warning
 * @returns
 */
declare function canvasComponentDecorator(name?: CanvasElementAliasType): (target: typeof CanvasBaseItem<any>) => void;
declare namespace RegisteredCanvasComponents {
    /**
     * Register a canvas component in the game.
     * @param target The class of the canvas component.
     * @param name Name of the canvas component, by default it will use the class name. If the name is already registered, it will show a warning
     */
    function add(target: typeof CanvasBaseItem<any>, name?: CanvasElementAliasType): void;
    /**
     * Get a canvas component by the id.
     * @param canvasId The id of the canvas component.
     * @returns The canvas component type.
     */
    function get<T extends typeof CanvasBaseItem<any>>(canvasId: CanvasElementAliasType): T | undefined;
    /**
     * Get a list of all canvas components registered.
     * @returns An array of canvas components.
     */
    function values(): (typeof CanvasBaseItem<any>)[];
    /**
     * Check if a canvas component is registered.
     * @param id The id of the canvas component.
     * @returns True if the canvas component is registered, false otherwise.
     */
    function has(id: string): boolean;
}

/**
 * Is a decorator that register a event in the game.
 * Is a required decorator for use the event in the game.
 * Thanks to this decoration the game has the possibility of updating the events to the latest modification and saving the game.
 * @param name is th identifier of the event, by default is the name of the class
 * @returns
 */
declare function eventDecorator(name?: EventIdType): (target: typeof CanvasEvent<any>) => void;
declare namespace RegisteredEvents {
    /**
     * Register a event in the game.
     * @param target The class of the event.
     * @param name Name of the event, by default it will use the class name. If the name is already registered, it will show a warning
     */
    function add(target: typeof CanvasEvent<CanvasEventNamesType>, name?: EventIdType): void;
    /**
     * Get a event by the id.
     * @param canvasId The id of the event.
     * @returns The event type.
     */
    function get<T = typeof CanvasEvent<CanvasBaseInterface<any>>>(eventId: EventIdType): T | undefined;
    /**
     * Get a event instance by the id.
     * @param eventId The id of the event.
     * @returns The event instance.
     */
    function getInstance<T = CanvasEvent<CanvasBaseInterface<any>>>(eventId: EventIdType): T | undefined;
    /**
     * Get a list of all events registered.
     * @returns An array of events.
     */
    function values(): (typeof CanvasEvent<CanvasEventNamesType>)[];
    /**
     * Check if a event is registered.
     * @param id The id of the event.
     * @returns True if the event is registered, false otherwise
     */
    function has(id: string): boolean;
}

/**
 * Shake the canvas element.
 * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused.
 * @param alias
 * @param props
 * @param priority
 * @returns
 */
declare function shakeEffect(alias: string, props?: ShakeEffectProps, priority?: UPDATE_PRIORITY): Promise<void>;

interface BaseTransitionProps {
    /**
     * If true, the transition will be completed before the next step.
     * For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.
     * @default true
     */
    mustBeCompletedBeforeNextStep?: boolean;
}
interface ShowWithDissolveTransitionProps extends BaseTransitionProps, Omit<FadeAlphaTickerProps, "type" | "startOnlyIfHaveTexture"> {
}
interface ShowWithFadeTransitionProps extends BaseTransitionProps, Omit<FadeAlphaTickerProps, "type" | "startOnlyIfHaveTexture"> {
}
interface MoveInOutProps extends BaseTransitionProps, Omit<MoveTickerProps, "startOnlyIfHaveTexture" | "destination" | "isPushInOut"> {
    /**
     * The direction of the movement.
     * @default "right"
     */
    direction?: "up" | "down" | "left" | "right";
}
interface ZoomInOutProps extends BaseTransitionProps, Omit<ZoomTickerProps, "startOnlyIfHaveTexture" | "type" | "limit" | "isZoomInOut"> {
    /**
     * The direction of the zoom effect.
     * @default "right"
     */
    direction?: "up" | "down" | "left" | "right";
}
interface PushInOutProps extends BaseTransitionProps, Omit<MoveTickerProps, "startOnlyIfHaveTexture" | "destination" | "isPushInOut"> {
    /**
     * The direc