import * as _drincs_pixi_vn_pixi_js from '@drincs/pixi-vn/pixi.js'; import _drincs_pixi_vn_pixi_js__default, { Container as Container$1, ContainerChild, Application, Rectangle as Rectangle$1, ApplicationOptions, UPDATE_PRIORITY as UPDATE_PRIORITY$1, PointData, ContainerOptions as ContainerOptions$1, SpriteOptions as SpriteOptions$1, CanvasTextOptions, Texture as Texture$1, TextureSourceLike, ContainerEvents, EventEmitter, ObservablePoint, TextureSource, TextOptions as TextOptions$1 } from '@drincs/pixi-vn/pixi.js'; export { TextureSourceLike, Ticker as TickerValue } from '@drincs/pixi-vn/pixi.js'; import { KeyframesType, AnimationOptions, ObjectSegment, ObjectSegmentWithTransition, SequenceOptions } from '@drincs/pixi-vn/motion'; import { TickerInfo, TickersSequence, TickerArgs, Ticker, TickersInterface } from '@drincs/pixi-vn/tickers'; export * from '@drincs/pixi-vn/tickers'; export { TickersInterface as CanvasTickersInterface } from '@drincs/pixi-vn/tickers'; import { Devtools } from '@pixi/devtools'; import { C as CanvasBaseItemMemory, a as CanvasBaseItem, b as CanvasGameState, c as ContainerChild$1, A as AdditionalPositionsExtensionProps, L as ListenerExtensionMemory, d as ListenerExtension, e as AdditionalPositionsExtension, O as OnEventsHandlers, f as ContainerMemory } from './ContainerMemory-De04YSUc.cjs'; export { g as addListenerHandler, h as analizePositionsExtensionProps } from './ContainerMemory-De04YSUc.cjs'; export { AnimationOptions as MotionAnimationOptions } from 'motion'; import { OnErrorHandler } from '@drincs/pixi-vn/core'; import '@drincs/pixi-vn/filters'; type Layer = Container$1; interface CanvasBaseInterface extends CanvasBaseItem, Container$1 { } interface CanvasHtmlLayersInterface { /** * 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", userSelect: "none" }. * @example * ```tsx * const root = document.getElementById('root') * if (!root) { * throw new Error('root element not found') * } * const htmlLayer = canvas.htmlLayers.add("ui", root, { * position: "absolute", * pointerEvents: "none" * }) * const reactRoot = createRoot(htmlLayer) * reactRoot.render( * * ) * ``` */ add(id: string, element: HTMLElement, style?: Partial>): HTMLDivElement; /** * Get a HTML layer from the canvas. * @param id The id of the layer. */ get(id: string): HTMLElement | undefined; /** * Remove a HTML layer from the canvas. * @param id The id of the layer to be removed. */ remove(id: string): void; } interface CanvasLayersInterface { /** * The PIXI Container that contains all the canvas elements. */ readonly gameLayer: Container$1; /** * Add a layer to the canvas. * @param label The label of the layer. * @param layer The layer to be added. * @returns The layer. * @example * ```ts * const uiLayer = new Container(); * canvas.layers.add("ui", uiLayer); * ``` */ add(label: string, layer: Container$1): Layer | undefined; /** * Get a layer from the canvas. * @param label The label of the layer. * @returns The layer. * @example * ```ts * const uiLayer = canvas.layers.get("ui"); * ``` */ get(label: string): Layer | null; /** * Remove a layer from the canvas. * @param label The label of the layer to be removed. * @example * ```ts * canvas.layers.remove("ui"); * ``` */ remove(label: string): void; } 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. * @deprecated Use {@link layers}.gameLayer instead. */ readonly gameLayer: Container$1; /** * If the manager is initialized. */ readonly isInitialized: boolean; /** * The width of the canvas. */ readonly width: number; /** * The height of the canvas. */ readonly height: number; /** * The screen of the canvas ({@link Application.screen}). */ readonly screen: Rectangle$1; /** * Initialize the PixiJS Application and the interface div. * This method should be called before any other method. * @param element The html element where I will put the canvas. Example: document.body * @param width The width of the canvas * @param height The height of the canvas * @param options The options of PixiJS Application * @param devtoolsOptions The options of the devtools. You can read more about it in the [PixiJS Devtools documentation](https://pixijs.io/devtools/docs/plugin/) * @example * ```ts * 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 & { /** * The id of the canvas element. * @default "pixi-vn-canvas" */ id?: string; /** * The resize mode of the canvas. * @default "contain" */ resizeMode?: "contain" | "none"; }, devtoolsOptions?: Devtools): Promise; /** * 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 * @param options The options of the copy. * @returns */ copyCanvasElementProperty(oldAlias: T | CanvasBaseInterface | string, newAlias: CanvasBaseInterface | string, options?: { /** * If provided, the properties returned by this function will not be copied from the old canvas element to the new canvas element. * @param defaultProperties The default properties that will be ignored. * @returns The properties that will be ignored. */ ignoreProperties?: (defaultProperties: string[]) => string[]; }): Promise; /** * 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. * @deprecated Use `tickers.transfer` from `@drincs/pixi-vn` instead. */ 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 to identify the component. * @param canvasComponent The component to add. * @param options The options of the canvas element. * @example * ```ts * 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, 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 * ```ts * 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 to identify the component. * @returns The canvas element. If the component does not exist, it will return `undefined`. * @example * ```ts * const sprite = canvas.find("bunny"); * ``` */ find>(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(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 component to edit. * @param newAlias The new alias of the component. * @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. * @deprecated Use `tickers.currentTickers` from `@drincs/pixi-vn` instead. */ readonly currentTickers: Map>; /** * The steps of the tickers * @deprecated Use `tickers.currentTickersSteps` from `@drincs/pixi-vn` instead. */ readonly currentTickersSteps: Map>; /** * Find a ticker by its id. * @param tickerId The id of the ticker to be found. * @param args The args of the ticker. * @returns The ticker if found, undefined otherwise. * @deprecated Use `tickers.find` from `@drincs/pixi-vn` instead. */ findTicker(tickerId: string, args?: TArgs): Ticker | 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 that was added. * @example * ```ts * canvas.addTicker("alien", new RotateTicker({ speed: 0.2 })) * ``` * @deprecated Use `tickers.add` from `@drincs/pixi-vn` instead. */ addTicker(canvasElementAlias: string | string[], ticker: Ticker): 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 * ```ts * canvas.addTickersSequence("alien", [ * new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds * new RotateTicker({ speed: 0.2, clockwise: false }, 2), * ]) * ``` * @deprecated Use `tickers.addSequence` from `@drincs/pixi-vn` instead. */ addTickersSequence(alias: string, steps: Ticker[], 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 * ```ts * canvas.unlinkComponentFromTicker("alien", RotateTicker) * ``` * @deprecated Use `tickers.unlinkComponent` from `@drincs/pixi-vn` instead. */ unlinkComponentFromTicker(alias: string | string[], ticker?: { new (): Ticker; } | string): void; /** * Remove all tickers from the canvas. * @deprecated Use `tickers.removeAll` from `@drincs/pixi-vn` instead. */ removeAllTickers(): void; /** * Remove a ticker by the id. * @param tickerId The id or an array of ids of the ticker to be removed. * @deprecated Use `tickers.remove` from `@drincs/pixi-vn` instead. */ 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. * @deprecated Use `tickers.pause` from `@drincs/pixi-vn` instead. */ 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. * @deprecated Use `tickers.resume` from `@drincs/pixi-vn` instead. */ resumeTicker(filters: { /** * The alias of the canvas element that will use the ticker. * Will resume all tickers that are connected to this canvas element. */ canvasAlias: string; } | { /** * The id of the ticker to be resumed. If provided, only this ticker will be resumed. */ id: string | string[]; }): void; /** * @deprecated Use `tickers.isPaused` from `@drincs/pixi-vn` instead. * 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; /** * Namespace for operations on canvas tickers. * @deprecated Use the top-level `tickers` module (`@drincs/pixi-vn`) instead. */ readonly tickers: TickersInterface; /** * Pause the rendering of gameLayer and pause currently running tickers. * Use {@link resume} to restore rendering and resume only * the tickers paused by this method. */ pause(): void; /** * Resume the rendering of gameLayer and resume tickers that were paused by * {@link pause}. */ resume(): void; /** * 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. * @deprecated Use `tickers.completeOnStepEnd` from `@drincs/pixi-vn` instead. */ 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. * @deprecated Use `tickers.forceCompletion` from `@drincs/pixi-vn` instead. */ forceCompletionOfTicker(id: string, alias?: string): Promise; /** * 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. This can be a single component, an array of components, or a string representing the component's alias. * @param keyframes This is an object containing the properties to animate and the values to reach. * @param options [`motion` options](https://motion.dev/docs/animate#options) for the animation, including duration, `easing`, and ticker. * @param priority The priority of the PixiJS ticker. This parameter sets the ticker's priority. @default UPDATE_PRIORITY.NORMAL * @returns The function returns the ID of the ticker created to animate the component(s). * @template T The type of Pixi’VN component(s) being animated. */ animate>(components: T | string | (string | T)[], keyframes: KeyframesType, options?: AnimationOptions, priority?: UPDATE_PRIORITY$1): string | undefined; /** * Animate a Pixi’VN component or components using [motion's animate](https://motion.dev/docs/animate) function. * This function integrates with the PixiJS ticker to ensure smooth animations. * * Pixi’VN will keep track of the animation state of this function. * So Pixi’VN will save the animation state in saves. * @param components The PixiJS component(s) to animate. This can be a single component, an array of components, or a string representing the component's alias. * @param sequence The sequence of keyframes to animate the component(s) with. * @param options [`motion` options](https://motion.dev/docs/animate#options) for the animation, including duration, `easing`, and ticker. * @param priority The priority of the PixiJS ticker. This parameter sets the ticker's priority. @default UPDATE_PRIORITY.NORMAL * @returns The function returns the ID of the ticker created to animate the component(s). * @template T The type of Pixi’VN component(s) being animated. */ animate>(components: T | string, sequence: (ObjectSegment | ObjectSegmentWithTransition)[], options?: SequenceOptions, priority?: UPDATE_PRIORITY$1): string | undefined; /** * Add a layer to the canvas. * @param label The label of the layer. * @param layer The layer to be added. * @returns The layer. * @example * ```ts * const uiLayer = new Container(); * canvas.addLayer("ui", uiLayer); * ``` * @deprecated Use {@link layers}.add instead. */ 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 * ```ts * const uiLayer = canvas.getLayer("ui"); * ``` * @deprecated Use {@link layers}.get instead. */ getLayer(label: string): Layer | null; /** * Remove a layer from the canvas. * @param label The label of the layer to be removed. * @example * ```ts * canvas.removeLayer("ui"); * ``` * @deprecated Use {@link layers}.remove instead. */ 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", userSelect: "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( * * ) * ``` * @deprecated Use {@link htmlLayers}.add instead. */ addHtmlLayer(id: string, element: HTMLElement, style?: Partial>): HTMLDivElement; /** * Get a HTML layer from the canvas. * @param id The id of the layer to be removed. * @deprecated Use {@link htmlLayers}.remove instead. */ removeHtmlLayer(id: string): void; /** * Get a HTML layer from the canvas. * @param id The id of the layer. * @deprecated Use {@link htmlLayers}.get instead. */ getHtmlLayer(id: string): HTMLElement | undefined; /** * Namespace for operations on canvas layers. */ readonly layers: CanvasLayersInterface; /** * Namespace for operations on canvas HTML layers. */ readonly htmlLayers: CanvasHtmlLayersInterface; /** * Extract the canvas as an image. * @returns The image as a base64 string. */ extractImage(): Promise; /** * 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; /** * @deprecated Use `tickers.onComplete` from `@drincs/pixi-vn` instead. */ onTickerComplete(tickerId: string, options: { aliasToRemoveAfter: string[]; tickerAliasToResume: string[]; tickerIdToResume: string[]; ignoreTickerSteps?: boolean; stopTicker?: boolean; }): void; } interface AnchorExtensionProps { anchor?: PointData | number; } interface AnchorExtension { /** * The anchor sets the origin point of the imageContainer. The default value is taken from the {@link Texture} * and passed to the constructor. * * The default is `(0,0)`, this means the imageContainer's origin is the top left. * * Setting the anchor to `(0.5,0.5)` means the imageContainer's origin is centered. * * Setting the anchor to `(1,1)` would mean the imageContainer's origin point will be the bottom right corner. * * If you pass only single parameter, it will set both x and y to the same value as shown in the example below. * @example * import { ImageContainer } from '@drincs/pixi-vn'; * * const imageContainer = new ImageContainer(); * imageContainer.anchor = 0.5; */ anchor: PointData; } interface ContainerOptions extends Omit, "on">, AnchorExtensionProps, AdditionalPositionsExtensionProps { } interface SpriteOptions extends Omit, AdditionalPositionsExtensionProps { } interface TextOptions extends Omit, AdditionalPositionsExtensionProps { } interface ImageContainerOptions extends ContainerOptions { } interface ImageSpriteOptions extends SpriteOptions { } interface VideoSpriteOptions extends ImageSpriteOptions { loop?: boolean; paused?: boolean; currentTime?: number; } /** * Interface for Asset memory */ interface AssetMemory { alias?: string; url: string; } interface SpriteBaseMemory extends SpriteOptions$1, CanvasBaseItemMemory, ListenerExtensionMemory, AdditionalPositionsExtensionProps { textureData?: AssetMemory; } /** * Interface for the canvas sprite memory */ interface SpriteMemory extends SpriteBaseMemory { } /** * 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 * ```ts * 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 extends _drincs_pixi_vn_pixi_js__default.Sprite implements CanvasBaseItem, ListenerExtension, AdditionalPositionsExtension { /** * @param options The options for the component. */ constructor(options?: SpriteOptions | Texture$1); readonly pixivnId: string; get memory(): Memory | SpriteMemory; setMemory(value: Memory | SpriteMemory): Promise; static from(source: Texture$1 | TextureSourceLike, skipCache?: boolean): Sprite; /** ListenerExtension */ readonly onEventsHandlers: OnEventsHandlers; on | keyof { [K: symbol]: any; [K: {} & string]: any; }>(event: T, fn: (...args: [ ...EventEmitter.ArgumentMap & { [K: symbol]: any; [K: {} & string]: any; }>[Extract | keyof { [K: symbol]: any; [K: {} & string]: any; }>], typeof this ]) => void, context?: any): this; /** AdditionalPositionsExtension */ private _align; set align(value: Partial | number); get align(): Partial | number; set xAlign(value: number); get xAlign(): number; set yAlign(value: number); get yAlign(): number; private _percentagePosition; set percentagePosition(value: Partial | number); get percentagePosition(): Partial | number; get percentageX(): number; set percentageX(_value: number); get percentageY(): number; set percentageY(_value: number); get positionType(): "pixel" | "percentage" | "align"; get positionInfo(): { x: number; y: number; type: "pixel" | "percentage" | "align"; }; set positionInfo(value: { x: number; y: number; type?: "pixel" | "percentage" | "align"; }); protected reloadPosition(): void; get position(): ObservablePoint; set position(value: ObservablePoint); get x(): number; set x(value: number); get y(): number; set y(value: number); } /** * The memory of the image. It uses for save the state of the image. */ interface ImageSpriteMemory extends SpriteBaseMemory { loadIsStarted: boolean; } /** * This class is a extension of the {@link Sprite} class, it has the same properties and methods, * but it has some features that make texture management easier. * You need to use {@link load} to show the image in the canvas. * This class is used for functions like {@link addImage} and {@link showWithDissolve}. * @example * ```ts * 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 * ```ts * 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 extends Sprite { private _textureAlias?; protected get textureAlias(): string; readonly pixivnId: string; /** * @param options The options for the component. * @param textureAlias The URL or path. If you have initialized the "asset matrix", you can use the alias of the texture. */ constructor(options?: ImageSpriteOptions | Omit | undefined, textureAlias?: string); get memory(): ImageSpriteMemory; setMemory(memory: Memory | SpriteMemory): Promise; static from(source: Texture$1 | TextureSourceLike, skipCache?: boolean): ImageSprite; 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; set texture(value: Texture$1>); get texture(): Texture$1>; /** * Check if the texture is empty. * @returns A boolean that is true if the texture is empty. */ get haveEmptyTexture(): boolean; } /** * The memory of the video. It uses for save the state of the video. */ interface VideoSpriteMemory extends ImageSpriteMemory { loop: boolean; paused: boolean; currentTime: number; } /** * This class is a extension of the {@link ImageSprite} class, it has the same properties and methods, * but it has some features that make video management easier. * You need to use {@link load} to show the video in the canvas. * This class is used for functions like {@link addVideo} and {@link showWithDissolve}. * @example * ```ts * let film = new VideoSprite({ * x: 100, * y: 100, * }, 'https://pixijs.com/assets/video.mp4') * await film.load() * canvas.add("film", film) * ``` * @example * ```ts * let film = addVideo("film", 'https://pixijs.com/assets/video.mp4') * film.currentTime = 2 * await film.load() * ``` */ declare class VideoSprite extends ImageSprite { /** * @param options The options for the component. * @param textureAlias The URL or path. If you have initialized the "asset matrix", you can use the alias of the texture. */ constructor(options?: VideoSpriteOptions | Texture$1 | undefined, textureAlias?: string); readonly pixivnId: string; get memory(): VideoSpriteMemory; setMemory(value: VideoSpriteMemory): Promise; static from(source: Texture$1 | TextureSourceLike, skipCache?: boolean): VideoSprite; load(): Promise; 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; } /** * 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 * ```ts * 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 extends Container$1 implements CanvasBaseItem, ListenerExtension, AnchorExtension, AdditionalPositionsExtension { constructor(options?: ContainerOptions); readonly pixivnId: string; get memory(): Memory; setMemory(value: Memory): Promise; protected importChildren(value: Memory): Promise; /** ListenerExtension */ readonly onEventsHandlers: OnEventsHandlers; on | keyof { [K: symbol]: any; [K: {} & string]: any; }>(event: T, fn: (...args: [ ...EventEmitter.ArgumentMap & { [K: symbol]: any; [K: {} & string]: any; }>[Extract | keyof { [K: symbol]: any; [K: {} & string]: any; }>], typeof this ]) => void, context?: any): this; /** Anchor */ private _anchor?; get anchor(): PointData; set anchor(value: PointData | number); protected reloadAnchor(): void; get pivot(): ObservablePoint; set pivot(value: ObservablePoint); /** AdditionalPositions */ private _align; set align(value: Partial | number); get align(): Partial | number; set xAlign(value: number); get xAlign(): number; set yAlign(value: number); get yAlign(): number; private _percentagePosition; set percentagePosition(value: Partial | number); get percentagePosition(): Partial | number; set percentageX(_value: number); get percentageX(): 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"; }); protected reloadPosition(): void; get position(): ObservablePoint; set position(value: ObservablePoint); get x(): number; set x(value: number); get y(): number; set y(value: number); } /** * Interface for the canvas container memory */ interface ImageContainerMemory extends ContainerMemory { elements: ImageSpriteMemory[]; anchor?: PointData; loadIsStarted: boolean; } /** * 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 load} functionality * @example * ```ts * 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 { /** * @param options The options for the component. * @param textureAliases An array of image URLs or paths. If you have initialized the "asset matrix", you can use the alias of the texture. */ constructor(options?: ImageContainerOptions, textureAliases?: string[]); get memory(): ImageContainerMemory; setMemory(value: ImageContainerMemory): Promise; readonly pixivnId: string; private _loadIsStarted; get loadIsStarted(): boolean; /** * Load the children images. * @returns A promise that resolves when the images are loaded. */ load(): Promise; /** * The texture of the first child. * If there is no child, it returns a new {@link Texture}. */ get texture(): Texture$1<_drincs_pixi_vn_pixi_js.TextureSource>; /** * 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; } /** * 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; /** * The Pixi.js application instance. * @throws {PixiError} when the canvas has not been initialized yet (i.e. before calling `Game.init()`). */ static get app(): Application<_drincs_pixi_vn_pixi_js.Renderer>; static get gameLayer(): _drincs_pixi_vn_pixi_js.Container<_drincs_pixi_vn_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, options?: Partial & { /** * The id of the canvas element. * @default "pixi-vn-canvas" */ id?: string; /** * The resize mode of the canvas. * @default "contain" */ resizeMode?: "contain" | "none"; }, devtoolsOptions?: Devtools): Promise; /** * Add the canvas into a html element. * @param element it is the html element where I will put the canvas. Example: document.body * @param id it is the id of the canvas element. */ private static addCanvasIntoHTMLElement; static addHtmlLayer(id: string, element: HTMLElement, style?: Partial>): HTMLDivElement; static removeHtmlLayer(id: string): void; static getHtmlLayer(id: string): HTMLElement | undefined; /** * 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[]; } /** * Interface for the canvas text memory */ interface TextMemory extends TextOptions$1, CanvasBaseItemMemory, AdditionalPositionsExtensionProps, ListenerExtensionMemory { } /** * 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 * ```ts * const text = new Text(); * text.text = "Hello World" * canvas.add("text", text); * ``` */ declare class Text extends _drincs_pixi_vn_pixi_js__default.Text implements CanvasBaseItem, AdditionalPositionsExtension, ListenerExtension { constructor(options?: TextOptions); readonly pixivnId: string; get memory(): TextMemory; setMemory(value: TextMemory): Promise; readonly onEventsHandlers: OnEventsHandlers; on | keyof { [K: symbol]: any; [K: {} & string]: any; }>(event: T, fn: (...args: [ ...EventEmitter.ArgumentMap & { [K: symbol]: any; [K: {} & string]: any; }>[Extract | keyof { [K: symbol]: any; [K: {} & string]: any; }>], typeof this ]) => void, context?: any): this; /** AdditionalPositions */ private _align; set align(value: Partial | number); get align(): Partial | number; set xAlign(value: number); get xAlign(): number; set yAlign(value: number); get yAlign(): number; private _percentagePosition; set percentagePosition(value: Partial | number); get percentagePosition(): Partial | number; get percentageX(): number; set percentageX(_value: number); get percentageY(): number; set percentageY(_value: number); get positionType(): "pixel" | "percentage" | "align"; get positionInfo(): { x: number; y: number; type: "pixel" | "percentage" | "align"; }; set positionInfo(value: { x: number; y: number; type?: "pixel" | "percentage" | "align"; }); protected reloadPosition(): void; get position(): ObservablePoint; set position(value: ObservablePoint); get x(): number; set x(value: number); get y(): number; set y(value: number); } type CanvasElementAliasType = string; /** * Is a decorator that register a canvas component in the game. * @param options Options for the canvas component. * @returns * @example * ```ts title="canvas/components/AlienTinting.ts" * const ALIEN_TINTING_TEST_ID = "AlienTintingTest"; * @canvasComponentDecorator({ * name: ALIEN_TINTING_TEST_ID, * }) * class AlienTintingTest extends Sprite { * readonly pixivnId: string = CANVAS_SPINE_ID; * override get memory() { * // ... * } * override async setMemory(memory: IAlienTintingMemory) { * // ... * } * // ... * } * ``` */ declare function canvasComponentDecorator>(options?: { /** * The id used by Pixi’VN to refer to this class (must be unique). If you don't pass the id, the class name will be used as the id. * @default target.name */ name?: CanvasElementAliasType; /** * Function to get the instance of the canvas component. If not set, it will use the default constructor of the class. * This function is used into {@link canvas.restore} to restore the canvas. * @param canvasClass The class of the canvas component. * @param memory Memory of the canvas component. * @returns The instance of the canvas component. */ getInstance?: (canvasClass: T, memory: M) => CanvasBaseItem | Promise>; /** * Function to copy the properties of the canvas component. This function is used when to copy the properties of the canvas component into another instance of the same canvas component. * This function is used into {@link canvas.copyCanvasElementProperty} to copy the properties of the canvas component. * @param component The instance of the canvas component to copy the properties. * @param memory The memory of the canvas component to copy the properties. * @returns */ copyProperty?: (component: CanvasBaseItem, memory: M) => void | Promise; }): (target: T) => void; declare function setMemoryContainer(element: T | Container$1, memory: Partial | {}, options?: { ignoreScale?: boolean; end?: () => Promise | void; }): Promise; declare namespace RegisteredCanvasComponents { /** * Register a canvas component in the game. * @param target The class of the canvas component. * @param options Options for the canvas component. */ function add>(target: T, options?: { /** * Name of the canvas component. If the name is already registered, it will show a warning * @default target.name */ name?: CanvasElementAliasType; /** * Function to get the instance of the canvas component. If not set, it will use the default constructor of the class. * This function is used into {@link canvas.restore} to restore the canvas. * @param canvasClass The class of the canvas component. * @param memory Memory of the canvas component. * @returns The instance of the canvas component. */ getInstance?: (canvasClass: T, memory: M) => CanvasBaseItem | Promise>; /** * Function to copy the properties of the canvas component. This function is used when to copy the properties of the canvas component into another instance of the same canvas component. * This function is used into {@link canvas.copyCanvasElementProperty} to copy the properties of the canvas component. * @param component The instance of the canvas component to copy the properties. * @param memory The memory of the canvas component to copy the properties. * @returns */ copyProperty?: (component: CanvasBaseItem, memory: M) => void | Promise; }): void; /** * Get a canvas component by the id. * @param canvasId The id of the canvas component. * @returns The canvas component type. */ function get>(canvasId: CanvasElementAliasType): T | undefined; function getInstance>(canvasId: CanvasElementAliasType, memory: M): Promise; function copyProperty(canvasId: CanvasElementAliasType, component: CanvasBaseItem, source: CanvasBaseItemMemory): Promise; /** * Get a list of all canvas components registered. * @returns An array of canvas components. */ function values(): (typeof CanvasBaseItem)[]; /** * 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; /** * Get a list of all canvas component ids registered. * @returns An array of label ids. */ function keys(): string[]; } type SerializableEventHandler = (...args: never[]) => unknown; /** * 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. * @example * ```ts * export class Events { * \@eventDecorator() * static eventExample(event: FederatedEvent, component: Sprite) { * // event code here * } * } * * sprite.on("pointerdown", Events.eventExample); * ``` * @param name The id used by Pixi’VN to refer to this function (must be unique). If you don't pass the id, the function name will be used as the id. * @returns */ declare function eventDecorator(name?: string): (_target: object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => void; declare namespace RegisteredEvents { /** * Register a event in the game. * @param fn 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(fn: SerializableEventHandler, name: string): void; /** * Get a event by the id. * @param canvasId The id of the event. * @returns The event type. */ function get(name: string): SerializableEventHandler | undefined; /** * Get a list of all events registered. * @returns An array of events. */ function values(): SerializableEventHandler[]; /** * 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; /** * Get a list of all event ids registered. * @returns An array of label ids. */ function keys(): string[]; } interface RgbColorType { r: number; g: number; b: number; } interface RgbaColorType extends RgbColorType { a: number; } interface HslColorType { h: number; s: number; l: number; } interface HslaColorType extends HslColorType { a: number; } interface HsvColorType { h: number; s: number; v: number; } interface HsvaColorType extends HsvColorType { a: number; } /** * A color, accepted wherever Pixi'VN takes one (e.g. {@link FlashInOutProps.color}): a hex number * (`0xff0000`), a CSS-style string (`"#f00"`, `"red"`, `"rgb(255, 0, 0)"`, ...), an `[r, g, b]`/ * `[r, g, b, a]` array, or one of the plain RGB(A)/HSL(A)/HSV(A) object shapes above. * * This is a JSON-serializable subset of `pixi.js`'s own `ColorSource` (which every value here is * still assignable to, so it can be passed straight into `Graphics.fill()`/`tint`/etc. unchanged) - * deliberately excluding `Float32Array`/`Uint8Array`/`Uint8ClampedArray` (which survive a * `JSON.stringify`/`JSON.parse` round-trip but lose their typed-array-ness, coming back as a plain * `{0: r, 1: g, ...}` object) and PixiJS's own `Color` class instance (not serializable at all). Both * would break `createExportableElement()` (ticker args, saved game state, ...) the same way a live * `Filter`/callback reference did elsewhere in the codebase. */ type ColorType = string | number | number[] | RgbColorType | RgbaColorType | HslColorType | HslaColorType | HsvColorType | HsvaColorType; 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 */ completeOnContinue?: boolean; } /** * Shared by every `xIn` transition that can replace an existing component (same alias): whether the * replaced component leaves with its own out animation, started together with the new component's in. */ interface OldComponentOutProps { /** * If true, the component being replaced leaves with the matching out animation (`moveOut`, `wipeOut`, * ...), started at the same time as the in animation. If false, it stays untouched under the new * component and is removed once the in animation is done. * The default depends on the transition: `false` for `moveIn`/`zoomIn`, `true` for the others. */ animateOldComponentOut?: boolean; } interface ShowWithDissolveTransitionProps extends BaseTransitionProps, AnimationOptions { } interface ShowWithFadeTransitionProps extends BaseTransitionProps, AnimationOptions { } interface MoveInOutProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * The direction of the movement. * @default "right" */ direction?: "up" | "down" | "left" | "right"; /** * Adds a motion-blur trail along the movement, ramping up mid-move and back to sharp at the end. * `true` uses a 40px trail; a number sets the trail length (pixels). * @default false */ motionBlur?: boolean | number; } interface ZoomInOutProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * The direction of the zoom effect. * @default "right" */ direction?: "up" | "down" | "left" | "right"; } interface PushInOutProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * The direction of the push effect. * @default "right" */ direction?: "up" | "down" | "left" | "right"; /** * Adds a motion-blur trail along the movement, ramping up mid-move and back to sharp at the end. * `true` uses a 40px trail; a number sets the trail length (pixels). * @default false */ motionBlur?: boolean | number; } /** * Shared options for the mask-based reveal/conceal transitions ({@link WipeInOutProps}, * {@link IrisInOutProps}, {@link SplitInOutProps}). */ interface MaskTransitionProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * If true, the effect is inverted: a "reveal" mask conceals instead, and vice versa. * @default false */ invert?: boolean; } interface WipeInOutProps extends MaskTransitionProps { /** * The angle (in degrees) the wipe boundary sweeps towards. `0` is left-to-right, `90` is * bottom-to-top, `180` is right-to-left, `270` is top-to-bottom, and any other value produces a * diagonal wipe. * @default 0 */ angle?: number; /** * A convenience shorthand for {@link angle}: `"right"` (`0`), `"up"` (`90`), `"left"` (`180`), * `"down"` (`270`). Ignored if `angle` is also set. * @default "right" */ direction?: "up" | "down" | "left" | "right"; } interface IrisInOutProps extends MaskTransitionProps { /** * The origin of the iris, normalized to the component's own bounds (`0` to `1` on each axis). * @default { x: 0.5, y: 0.5 } */ origin?: Partial; /** * The aspect ratio (width / height) of the iris shape. `1` (the default) is a circle. * @default 1 */ aspect?: number; /** * `"expand"`: the image is seen *through* the circle (`irisIn` grows it, `irisOut` shrinks it). * `"contract"`: the image is seen *around* the circle, which is a hole (`irisIn` shrinks it until the * whole image is shown, `irisOut` grows it until the image is gone). * @default "expand" */ direction?: "expand" | "contract"; } interface SplitInOutProps extends MaskTransitionProps { /** * `"inward"`: reveal from the edges towards the split line; conceal from the split line outwards. * `"outward"`: reveal from the split line towards the edges; conceal from the edges inwards. * During replacement, the old component uses the opposite mode so its conceal follows the reveal. * @default "inward" */ direction?: "inward" | "outward"; /** * The axis the two mask panels move apart on/towards. * @default "vertical" */ orientation?: "horizontal" | "vertical"; /** * The origin of the split line, normalized to the component's own bounds (`0` to `1` on the axis * perpendicular to {@link orientation}). * @default 0.5 */ origin?: number; } interface FlashInOutProps extends BaseTransitionProps, AnimationOptions { /** * The overlay color. See {@link ColorType}. * @default 0xffffff */ color?: ColorType; /** * The peak alpha the overlay reaches. * @default 1 */ maxAlpha?: number; /** * How long (in seconds) the overlay stays at {@link maxAlpha} before fading again. * @default 0 */ holdDuration?: number; /** * The number of times the overlay fades in and out. * @default 1 */ pulses?: number; /** * Whether the component itself also briefly fades in (`flashIn`) or out (`flashOut`) alongside the * color flash, softening what would otherwise be an instant pop-in/pop-out - the fade runs at a * quarter of the flash's own duration, mirrored to the start of `flashIn`'s cycle or the end of * `flashOut`'s. Ignored when `flashIn` replaces an existing component (both sides are already * hidden under a solid `color` at the moment of the swap, so there's no pop to soften). * @default true */ fadeComponent?: boolean; } interface BlurInOutProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * The blur strength the effect starts from (`blurIn`) or ends at (`blurOut`). * @default 32 */ strength?: number; /** * The quality (number of blur passes) of the blur filter. Higher is smoother but slower. * @default 4 */ quality?: number; /** * Whether the component itself also briefly fades in (`blurIn`) or out (`blurOut`) alongside the * blur, softening what would otherwise be an instant pop-in/pop-out - the fade runs at a quarter of * the effect's own duration, mirrored to the start of `blurIn` or the end of `blurOut`. * @default true */ fadeComponent?: boolean; } interface PixelateInOutProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * The pixel size the effect starts from (`pixelateIn`) or ends at (`pixelateOut`). * @default 32 */ pixelSize?: number; /** * The direction the pixel blocks drift as their size changes. Applies to both entering and * exiting components, including the old component during a replacement. * `"up-left"` moves from bottom-right towards top-left; the other values mirror either axis. * @default "up-left" */ direction?: "up-left" | "up-right" | "down-left" | "down-right"; /** * Whether the component itself also briefly fades in (`pixelateIn`) or out (`pixelateOut`) alongside * the pixelation, softening what would otherwise be an instant pop-in/pop-out - the fade runs at a * quarter of the effect's own duration, mirrored to the start of `pixelateIn` or the end of * `pixelateOut`. Off by default: pixelation itself already reads as a deliberate, blocky * appear/disappear, so a softening fade is less often wanted here than for blur/flash. * @default false */ fadeComponent?: boolean; } /** * Shared options for the filter-based reveal/conceal transitions ({@link GlitchInOutProps}, * {@link TwistInOutProps}, {@link WarpInOutProps}, {@link RippleInOutProps}, * {@link NoiseDissolveInOutProps}, {@link PinchInOutProps}). */ interface FilterFadeTransitionProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * Whether the component itself also fades in (`xIn`) or out (`xOut`) alongside the filter effect, * at a quarter of the effect's own duration, mirrored to the start of `xIn` or the end of `xOut` * (same behavior as {@link BlurInOutProps.fadeComponent}). The default depends on the transition. */ fadeComponent?: boolean; } interface GlitchInOutProps extends FilterFadeTransitionProps { /** * The peak slice-displacement (pixels) - the first burst of `glitchIn`, the last of `glitchOut`. * @default 40 */ strength?: number; /** * The number of glitch bursts. * @default 3 */ bursts?: number; /** * The number of glitch slices. * @default 8 */ slices?: number; /** * The peak red/blue channel separation (pixels) layered on top of the slices, following the same * envelope. `0` disables it. * @default 6 */ rgbSplit?: number; } interface TwistInOutProps extends FilterFadeTransitionProps { /** * How far (degrees) the swirl is wound up - where `twistIn` starts and `twistOut` ends. * Negate the angle to reverse the rotation. During replacement the old component uses the * opposite angle, so it winds up in the same rotational sense as the new component unwinds. * @default 540 */ angle?: number; /** * The radius (pixels) of the swirl. Defaults to half the component's diagonal, so the whole * component swirls. */ radius?: number; /** * The center of the swirl, normalized to the component's own bounds (`0` to `1` on each axis). * @default { x: 0.5, y: 0.5 } */ origin?: Partial; } interface WarpInOutProps extends FilterFadeTransitionProps { /** * The zoom-blur strength `warpIn` starts from and `warpOut` ends at. * @default 0.6 */ strength?: number; /** * The point the streaks radiate from, normalized to the component's own bounds. * @default { x: 0.5, y: 0.5 } */ origin?: Partial; } interface RippleInOutProps extends FilterFadeTransitionProps { /** * The point the ripple starts from, normalized to the component's own bounds. * @default { x: 0.5, y: 0.5 } */ origin?: Partial; /** * The amplitude of the ripple. * @default 30 */ amplitude?: number; /** * The wavelength of the ripple. * @default 160 */ wavelength?: number; /** * The speed (pixels-per-second, in the ripple's own time) the ring travels outward. The ring always * travels until it has left the component; `speed` only shapes the ring. * @default 500 */ speed?: number; } interface NoiseDissolveInOutProps extends FilterFadeTransitionProps { /** * `"hard"`: the component appears/disappears in crisp noise-shaped blotches. `"soft"`: a cloudy, * gradual dissolve. * @default "hard" */ edge?: "hard" | "soft"; /** * The scale of the noise pattern - higher values give smaller, more numerous blotches. * @default 8 */ noiseScale?: number; /** * Picks the noise pattern. Random by default, so every dissolve looks different. */ seed?: number; } interface TvInOutProps extends BaseTransitionProps, OldComponentOutProps, AnimationOptions { /** * The height of the collapsed bright line, as a fraction of the component's own height. * @default 0.02 */ lineThickness?: number; /** * How bright the collapsed line glows (`1` = no change). * @default 3 */ brightness?: number; /** * Whether CRT scanlines/noise are shown during the transition. * @default true */ scanlines?: boolean; } interface PinchInOutProps extends FilterFadeTransitionProps { /** * How strong the deformation is, from `0` to `1` - where `pinchIn` starts and `pinchOut` ends. * @default 1 */ strength?: number; /** * `"pinch"`: sucked into/out of a point. `"bulge"`: puffed out from/into a point. * @default "pinch" */ mode?: "pinch" | "bulge"; /** * The radius (pixels) of the deformation. Defaults to half the component's diagonal. */ radius?: number; /** * The center of the deformation, normalized to the component's own bounds. * @default { x: 0.5, y: 0.5 } */ origin?: Partial; } interface ShakeEffectProps extends BaseTransitionProps, AnimationOptions { /** * The number of shocks. **Must be at least 3**. * @default 10 */ shocksNumber?: number; /** * The type of the shake effect * @default "horizontal" */ shakeType?: "horizontal" | "vertical"; /** * The maximum size of the shock. * For horizontal type, it is the maximum size of the x axis. * For vertical type, it is the maximum size of the y axis. * @default 10 */ maxShockSize?: number; } /** * Shared options for the generic, repeated articulated-animation effects ({@link BounceEffectProps}, * {@link HopEffectProps}, {@link WiggleEffectProps}, {@link NodEffectProps}, {@link SwayEffectProps}): * a number of cycles, each one shrinking towards rest by {@link decay}. */ interface DecayingEffectProps extends BaseTransitionProps, AnimationOptions { /** * How much each successive cycle shrinks relative to the previous one (`1` = no decay/constant * amplitude, `0` = the second cycle onward has no amplitude at all). * @default 0.5 */ decay?: number; } interface BounceEffectProps extends DecayingEffectProps { /** * The direction the component displaces towards on each bounce, before returning to rest. * @default "up" */ direction?: "up" | "down" | "left" | "right"; /** * The distance (in pixels) of the first, largest bounce. * @default 30 */ distance?: number; /** * The number of bounces. * @default 4 */ bounces?: number; } interface PulseEffectProps extends DecayingEffectProps { /** * The peak scale multiplier of the first, largest pulse (relative to the component's current * scale) - e.g. `1.2` grows the component 20% bigger at the peak of the first pulse. * @default 1.2 */ scale?: number; /** * The number of pulses. * @default 3 */ pulses?: number; } interface HopEffectProps extends DecayingEffectProps { /** * The direction of the (primary and any secondary) hops. * @default "up" */ direction?: "up" | "down" | "left" | "right"; /** * The distance (in pixels) of the primary hop. * @default 40 */ distance?: number; /** * The number of smaller, decaying hops to play after the primary one (`0` = just the one hop). * @default 0 */ secondaryHops?: number; } interface WiggleEffectProps extends DecayingEffectProps { /** * The peak rotation (in degrees) away from the component's current angle, on the first repetition. * @default 15 */ angle?: number; /** * The number of repetitions. * @default 3 */ repetitions?: number; } interface NodEffectProps extends DecayingEffectProps { /** * The axis the component oscillates along. * @default "horizontal" */ axis?: "horizontal" | "vertical"; /** * The distance (in pixels) of the first, largest oscillation. * @default 15 */ distance?: number; /** * The number of repetitions. * @default 3 */ repetitions?: number; } interface SwayEffectProps extends DecayingEffectProps { /** * The distance (in pixels) of the positional drift, on the first repetition. * @default 10 */ distance?: number; /** * The rotational drift (in degrees) away from the component's current angle, on the first * repetition. * @default 5 */ angle?: number; /** * The axis the positional drift moves along. * @default "horizontal" */ axis?: "horizontal" | "vertical"; /** * The number of repetitions. * @default 3 */ repetitions?: number; } interface PunchEffectProps extends BaseTransitionProps, AnimationOptions { /** * Which property the punch animates. * @default "scale" */ mode?: "x" | "y" | "rotation" | "scale"; /** * The strength of the punch's attack - a pixel distance for `x`/`y`, degrees for `rotation`, or a * scale multiplier delta for `scale` (e.g. `0.3` peaks at 1.3x the current scale). * @default 0.3 */ strength?: number; /** * How far the recovery overshoots past rest, in the opposite direction, as a fraction of * {@link strength} (`0` = no overshoot, settles straight back to rest). * @default 0.3 */ overshoot?: number; } interface GlitchEffectProps extends DecayingEffectProps { /** * The peak slice-displacement amount (pixels) of the first, largest burst. * @default 40 */ strength?: number; /** * The number of glitch bursts. * @default 3 */ bursts?: number; /** * The number of glitch slices. * @default 8 */ slices?: number; /** * The angle (in degrees) slices are displaced along. * @default 0 */ direction?: number; /** * The peak red/blue channel separation (pixels) layered on top of the slice displacement, * following the same jittery envelope. `0` disables it. * @default 6 */ rgbSplit?: number; } interface ChromaticAberrationEffectProps extends DecayingEffectProps { /** * The peak red/blue channel pixel offset of the first, largest burst (channels split in opposite * directions, green stays centered). * @default 8 */ strength?: number; /** * The axis the channels split along. * @default "horizontal" */ axis?: "horizontal" | "vertical"; /** * The number of bursts. * @default 1 */ bursts?: number; } interface ShockwaveEffectProps extends BaseTransitionProps, AnimationOptions { /** * The origin of the ripple, normalized (0-1) to the element's own bounds. * @default {x: 0.5, y: 0.5} */ origin?: { x: number; y: number; }; /** * The amplitude of the ripple. * @default 30 */ amplitude?: number; /** * The wavelength of the ripple. * @default 160 */ wavelength?: number; /** * The brightness of the ripple. * @default 1 */ brightness?: number; /** * The maximum radius (in pixels) the ripple travels before fading out. A value `<= 0` means the * ripple travels an infinite distance. * @default -1 */ radius?: number; /** * The speed (in pixels-per-second) the ripple travels outward. * @default 500 */ speed?: number; /** * How far the ripple's own internal "time" advances by the end of the animation (the ring's * radius is `time * speed` pixels). By default it's just enough for the ring to fully leave the * component - origin to farthest corner plus half a {@link wavelength} - or {@link radius} when set, * divided by {@link speed}. */ strength?: number; } interface RadialBlurEffectProps extends DecayingEffectProps { /** * The peak zoom-blur strength of the first, largest burst. * @default 0.5 */ strength?: number; /** * The number of bursts. * @default 1 */ bursts?: number; /** * The origin the blur radiates from, normalized (0-1) to the element's own bounds. * @default {x: 0.5, y: 0.5} */ origin?: { x: number; y: number; }; /** * The inner radius (in pixels) excluded from the blur. * @default 0 */ innerRadius?: number; /** * The outer radius (in pixels) of the blur. A value `< 0` means the blur extends infinitely. * @default -1 */ radius?: number; } interface BlurPulseEffectProps extends DecayingEffectProps { /** * The peak blur strength of the first, largest pulse. * @default 8 */ strength?: number; /** * The number of pulses. * @default 3 */ pulses?: number; /** * The blur filter's own render quality (number of blur passes). Higher looks smoother but costs * more to render. * @default 4 */ quality?: number; } interface VignettePulseEffectProps extends DecayingEffectProps { /** * The peak vignette opacity of the first, largest pulse. * @default 1 */ strength?: number; /** * The number of pulses. * @default 1 */ pulses?: number; /** * How far the darkening reaches in from the corners, from `0` (none) to `1` (the whole element) - * `0.5` darkens roughly the outer half. * @default 0.5 */ radius?: number; /** * How soft the transition from the clear center to the dark edges is (`0` = a hard edge). * @default 0.5 */ blur?: number; } interface DesaturateEffectProps extends BaseTransitionProps, AnimationOptions { /** * The saturation floor reached at the trough (`0` = full grayscale, `1` = no desaturation at all). * @default 0 */ amount?: number; /** * How long the component stays at {@link amount} before recovering back to normal saturation, on * top of the fade in/out (each {@link AnimationOptions.duration}). * @default 0 */ holdDuration?: number; } interface GlowPulseEffectProps extends DecayingEffectProps { /** * The peak outward glow strength of the first, largest pulse. * @default 4 */ strength?: number; /** * The number of pulses. * @default 3 */ pulses?: number; /** * The color of the glow. * @default 0xffffff */ color?: number; /** * The distance (in pixels) the glow extends. * @default 10 */ distance?: number; /** * The strength of the glow inward from the edge of the component. * @default 0 */ innerStrength?: number; } /** * @deprecated Use `effects.shakeEffect` instead. */ declare function shakeEffect(alias: string, options?: ShakeEffectProps, priority?: UPDATE_PRIORITY$1): Promise; declare namespace effects { /** * Shake the canvas element. * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused. * @param alias The alias to identify the component. * @param options Animation options, matching the `options` of animate function. * @param priority The priority of the PixiJS ticker. This parameter sets the ticker's priority. * @returns */ function shakeEffect(alias: string, options?: ShakeEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Bounce the canvas element: a one-directional displacement that repeatedly returns to rest, each * bounce shrinking towards rest by {@link BounceEffectProps.decay}. Like a dropped ball settling. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function bounceEffect(alias: string, options?: BounceEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Pulse the canvas element: a repeated, decaying scale bump away from its current scale and back. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function pulseEffect(alias: string, options?: PulseEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Hop the canvas element: one deliberate displacement-and-return, optionally followed by smaller, * decaying secondary hops. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function hopEffect(alias: string, options?: HopEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Wiggle the canvas element: a decaying rotation oscillation around its current angle. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function wiggleEffect(alias: string, options?: WiggleEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Nod the canvas element: a decaying positional oscillation along one axis. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function nodEffect(alias: string, options?: NodEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Sway the canvas element: a smooth, optionally combined positional and rotational drift around its * current state - a gentler, slower cousin of {@link nodEffect}/{@link wiggleEffect}. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function swayEffect(alias: string, options?: SwayEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Punch the canvas element: a single fast impulse (position, rotation, or scale) with a strong * attack and a short, slightly overshooting recovery back to rest - unlike every other effect here, * this is a one-shot impact, not a repeated oscillation. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function punchEffect(alias: string, options?: PunchEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Glitch the canvas element: decaying, jittery bursts of digital-corruption slice displacement * ({@link https://pixijs.io/filters/docs/GlitchFilter.html GlitchFilter}) - each burst snaps, * kicks back the other way and settles - with a matching red/blue channel split layered on top * ({@link https://pixijs.io/filters/docs/RGBSplitFilter.html RGBSplitFilter}, see * {@link GlitchEffectProps.rgbSplit}). Both filters are removed once done. Returns one ticker id * per filter. * * Known cosmetic quirk: `GlitchFilter`'s own `destroy()` (called once this effect completes, to * clean up its displacement texture) can log a harmless `PixiJS Warning: [BindGroup] a * 'textureSource'/'textureSampler' was destroyed while still bound to a shader` in the console - * this comes from `pixi-filters`' own implementation, not from this effect, doesn't affect the * component's rendering or state, and every property is still correctly restored/detached. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function glitchEffect(alias: string, options?: GlitchEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Chromatic-aberration the canvas element: the red and blue color channels split apart in opposite * directions and snap back, in a decaying burst * ({@link https://pixijs.io/filters/docs/RGBSplitFilter.html RGBSplitFilter}). * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function chromaticAberrationEffect(alias: string, options?: ChromaticAberrationEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Shockwave the canvas element: a single radial ripple distortion travels outward from an origin * point and fades ({@link https://pixijs.io/filters/docs/ShockwaveFilter.html ShockwaveFilter}) - * a one-shot impact, not a repeated oscillation. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function shockwaveEffect(alias: string, options?: ShockwaveEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Radially blur the canvas element: a decaying burst of zoom-blur radiating from an origin point, * settling back to no blur between and after each burst * ({@link https://pixijs.io/filters/docs/ZoomBlurFilter.html ZoomBlurFilter}). * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function radialBlurEffect(alias: string, options?: RadialBlurEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Pulse a blur on the canvas element: a repeated, decaying blur bump that settles back to no blur * between and after each pulse ({@link https://pixijs.io/filters/docs/BlurFilter.html BlurFilter}). * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function blurPulseEffect(alias: string, options?: BlurPulseEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Pulse a vignette on the canvas element: the edges darken and recover, in a repeated, decaying * pulse - built on {@link https://pixijs.io/filters/docs/CRTFilter.html CRTFilter} with its * scanline/noise features turned off, isolating just the vignette. * * The vignette darkens the corners of the element's own bounding rectangle, so it's meant for * backgrounds and other full-frame images; on a sprite with transparent corners (a character, a * shape) there's little to darken and it barely shows. * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function vignettePulseEffect(alias: string, options?: VignettePulseEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Desaturate the canvas element: color drains out to {@link DesaturateEffectProps.amount} and * recovers back to normal - a single dip, not a repeated oscillation * ({@link https://pixijs.io/filters/docs/AdjustmentFilter.html AdjustmentFilter}). * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function desaturateEffect(alias: string, options?: DesaturateEffectProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Pulse a glow on the canvas element: a repeated, decaying outward glow that settles back to no * glow between and after each pulse ({@link https://pixijs.io/filters/docs/GlowFilter.html GlowFilter}). * @param alias The alias to identify the component. * @param options Animation options. * @param priority The priority of the PixiJS ticker. */ function glowPulseEffect(alias: string, options?: GlowPulseEffectProps, priority?: UPDATE_PRIORITY$1): Promise; } declare namespace CanvasPropertyUtility { function calculatePositionByAlign(type: "width" | "height", align: number, value: number, pivot: number, negativeScale: boolean, anchor?: number): number; function calculateAlignByPosition(type: "width" | "height", position: number, value: number, pivot: number, negativeScale: boolean, anchor?: number): number; function calculatePositionByPercentagePosition(type: "width" | "height", percentage: number): number; function calculatePercentagePositionByPosition(type: "width" | "height", position: number): number; function getSuperPoint(point: { x: number; y: number; }, angle: number): { x: number; y: number; }; function getPointBySuperPoint(superPoint: { x: number; y: number; }, angle: number): { x: number; y: number; }; function getSuperWidth(canvasElement: Container$1): number; function getSuperHeight(canvasElement: Container$1): number; } type TComponent = CanvasBaseInterface | string | string[] | { value: string; options: ImageSpriteOptions; } | { value: string[]; options: ImageContainerOptions; }; /** * @deprecated Use `transitions.showWithDissolve` instead. */ declare function showWithDissolve(alias: string, component?: TComponent, props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY$1): Promise; /** * @deprecated Use `transitions.removeWithDissolve` instead. */ declare function removeWithDissolve(alias: string, props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * @deprecated Use `transitions.showWithFade` instead. */ declare function showWithFade(alias: string, component?: TComponent, props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY$1): Promise; /** * @deprecated Use `transitions.removeWithFade` instead. */ declare function removeWithFade(alias: string, props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * @deprecated Use `transitions.moveIn` instead. */ declare function moveIn(alias: string, component?: TComponent, props?: MoveInOutProps & { /** * @deprecated Use `animateOldComponentOut` instead. */ removeOldComponentWithMoveOut?: boolean; }, priority?: UPDATE_PRIORITY$1): Promise; /** * @deprecated Use `transitions.moveOut` instead. */ declare function moveOut(alias: string, props?: MoveInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * @deprecated Use `transitions.zoomIn` instead. */ declare function zoomIn(alias: string, component?: TComponent, props?: ZoomInOutProps & { /** * @deprecated Use `animateOldComponentOut` instead. */ removeOldComponentWithZoomOut?: boolean; }, priority?: UPDATE_PRIORITY$1): Promise; /** * @deprecated Use `transitions.zoomOut` instead. */ declare function zoomOut(alias: string, props?: ZoomInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * @deprecated Use `transitions.pushIn` instead. */ declare function pushIn(alias: string, component?: TComponent, props?: PushInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * @deprecated Use `transitions.pushOut` instead. */ declare function pushOut(alias: string, props?: PushInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; declare namespace transitions { /** * Show a image in the canvas with a disolve effect. * Disolve effect is a effect that the image is shown with a fade in. * If exist a image with the same alias, then the image is replaced and the first image is removed after the effect is done. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function showWithDissolve(alias: string, component?: TComponent, props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a disolve effect. * Disolve effect is a effect that the image is removed with a fade out. * This function is equivalent to {@link removeWithFade}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function removeWithDissolve(alias: string, props?: ShowWithDissolveTransitionProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a fade effect. * Fade effect is a effect that the image is shown with a fade in. * If exist a image with the same alias, the existing image is removed with a fade transition, and after the effect is done, the new image is shown with a fade transition. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function showWithFade(alias: string, component?: TComponent, props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a fade effect. * Fade effect is a effect that the image is removed with a fade out. * This function is equivalent to {@link removeWithDissolve}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function removeWithFade(alias: string, props?: ShowWithFadeTransitionProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a move effect. The image is moved from outside the canvas to the x and y position of the image. * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function moveIn(alias: string, component?: TComponent, props?: MoveInOutProps & { /** * @deprecated Use `animateOldComponentOut` instead. */ removeOldComponentWithMoveOut?: boolean; }, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a move effect. The image is moved from the x and y position of the image to outside the canvas. * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function moveOut(alias: string, props?: MoveInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a zoom effect. The image is zoomed in from the center of the canvas. * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function zoomIn(alias: string, component?: TComponent, props?: ZoomInOutProps & { /** * @deprecated Use `animateOldComponentOut` instead. */ removeOldComponentWithZoomOut?: boolean; }, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a zoom effect. The image is zoomed out to the center of the canvas. * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function zoomOut(alias: string, props?: ZoomInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a push effect. The new image is pushed in from the inside of the canvas and the old image is pushed out to the outside of the canvas. * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function pushIn(alias: string, component?: TComponent, props?: PushInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a push effect. The image is pushed out to the outside of the canvas. * If there is a/more ticker(s) with the same alias, then the ticker(s) is/are paused. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function pushOut(alias: string, props?: PushInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a wipe effect: the image is progressively revealed by a moving * boundary. The direction/angle and inversion are all configurable, so the same primitive can * produce horizontal, vertical, or diagonal reveals - see {@link WipeInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function wipeIn(alias: string, component?: TComponent, props?: WipeInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a wipe effect: the image is progressively concealed by a * moving boundary. See {@link wipeIn} and {@link WipeInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function wipeOut(alias: string, props?: WipeInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with an iris effect: the image is progressively revealed by an * expanding radial mask. Moving {@link IrisInOutProps.origin} off-center makes the same primitive * useful as a focus/reveal effect (e.g. centered on a character). * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function irisIn(alias: string, component?: TComponent, props?: IrisInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with an iris effect: the image is progressively concealed by a * contracting radial mask. See {@link irisIn} and {@link IrisInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function irisOut(alias: string, props?: IrisInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a split effect: two mask panels slide together from the edges to * progressively reveal the image, meeting at the split line once fully shown. With * `direction: "outward"`, the reveal grows from the split line towards the edges instead. * During replacement, the old component's conceal follows the new component's reveal. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function splitIn(alias: string, component?: TComponent, props?: SplitInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a split effect: two mask panels retract apart toward the * edges to progressively conceal the image. With `direction: "outward"`, the visible region * shrinks from the edges towards the split line. See {@link splitIn} and {@link SplitInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function splitOut(alias: string, props?: SplitInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a blur effect: the image appears already blurred and sharpens * into focus. A generic blur, not a "dream"/"flashback" transition specifically - combine it with * {@link showWithFade} for that recipe. See {@link BlurInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function blurIn(alias: string, component?: TComponent, props?: BlurInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a blur effect: the image blurs out of focus before being * removed. See {@link blurIn} and {@link BlurInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function blurOut(alias: string, props?: BlurInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a pixelate effect: the image appears pixelated and resolves into * focus. Useful for retro effects, digital transitions, censorship/stylization, or scene changes - * not only "glitch" scenes. See {@link PixelateInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function pixelateIn(alias: string, component?: TComponent, props?: PixelateInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a pixelate effect: the image pixelates before being removed. * See {@link pixelateIn} and {@link PixelateInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function pixelateOut(alias: string, props?: PixelateInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a flash effect, with a configurable solid-color overlay (not * limited to a white flash). White reads as a camera/explosion-like flash, black as a blink/cut, and * arbitrary colors work for damage/magic/memory/UI transitions. See {@link FlashInOutProps}. * * If `alias` has no existing component, the new image appears immediately and the overlay fades in * and back out over it. If `alias` already has a component, the *current* content fades up to * `color` first, is swapped for the new content at the exact moment the screen is a solid `color` * (so the content change itself is invisible), and the new content then fades back down from `color` * to normal - see {@link flashReplace}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If imageUrl is a video, then the {@link VideoSprite} is added to the canvas. * If imageUrl is an array, then the {@link ImageContainer} is added to the canvas. * If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function flashIn(alias: string, component?: TComponent, props?: FlashInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a flash effect: a configurable solid-color overlay fades up to * `color` and back down to normal, and the image is removed the instant that finishes - the removal * itself is a hard cut, never an additional fade/dissolve. See {@link flashIn} and * {@link FlashInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function flashOut(alias: string, props?: FlashInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a glitch effect: the image materializes out of jittery bursts of * digital-corruption slices with red/blue fringing, which settle as it appears. See * {@link GlitchInOutProps}. * When replacing an existing component, waits for its out animation before starting the entrance. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function glitchIn(alias: string, component?: TComponent, props?: GlitchInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a glitch effect: digital-corruption bursts build up until the * image is removed. See {@link glitchIn} and {@link GlitchInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function glitchOut(alias: string, props?: GlitchInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a twist effect: the image unwinds out of a swirl, like coming * through a vortex or portal. See {@link TwistInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function twistIn(alias: string, component?: TComponent, props?: TwistInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a twist effect: the image winds up into a swirl before being * removed. See {@link twistIn} and {@link TwistInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function twistOut(alias: string, props?: TwistInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a warp effect: the image arrives out of radial zoom-blur streaks, * like dropping out of hyperspace. See {@link WarpInOutProps}. * When replacing an existing component, waits for its out animation before starting the entrance. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function warpIn(alias: string, component?: TComponent, props?: WarpInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a warp effect: the image streaks away in a radial zoom blur * before being removed. See {@link warpIn} and {@link WarpInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function warpOut(alias: string, props?: WarpInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a ripple effect: the image fades in through a ring of water-like * distortion spreading outward from an origin point - for dreams, magic or memories. See * {@link RippleInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function rippleIn(alias: string, component?: TComponent, props?: RippleInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a ripple effect: a ring of water-like distortion spreads over * the image as it fades out and is removed. See {@link rippleIn} and {@link RippleInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function rippleOut(alias: string, props?: RippleInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a noise dissolve: the image appears in organic, noise-shaped * blotches (or a cloudy fade with `edge: "soft"`) - the classic visual-novel image dissolve. See * {@link NoiseDissolveInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function noiseDissolveIn(alias: string, component?: TComponent, props?: NoiseDissolveInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a noise dissolve: the image disappears in noise-shaped * blotches and is then removed. See {@link noiseDissolveIn} and {@link NoiseDissolveInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function noiseDissolveOut(alias: string, props?: NoiseDissolveInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas like an old TV turning on: a bright dot stretches into a glowing * horizontal line, which then opens up into the full image, with CRT scanlines. The scale animates * around the component's own anchor/pivot, so a centered anchor looks best. See * {@link TvInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function tvIn(alias: string, component?: TComponent, props?: TvInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas like an old TV turning off: the image collapses into a glowing * horizontal line, then into a dot, and is removed. The scale animates around the component's own * anchor/pivot, so a centered anchor looks best. See {@link tvIn} and {@link TvInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function tvOut(alias: string, props?: TvInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; /** * Show a image in the canvas with a pinch effect: the image emerges from a single point, deforming * outward as it settles (or puffs out of it with `mode: "bulge"`). See {@link PinchInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param component The imageUrl, array of imageUrl or the canvas component. If you don't provide the component, then the alias is used as the url. * @param props The properties of the effect * @param priority The priority of the effect * @returns A promise that contains the ids of the tickers that are used in the effect. The promise is resolved when the image is loaded. */ function pinchIn(alias: string, component?: TComponent, props?: PinchInOutProps, priority?: UPDATE_PRIORITY$1): Promise; /** * Remove a image from the canvas with a pinch effect: the image is sucked into a single point (or * puffs out with `mode: "bulge"`) and removed. See {@link pinchIn} and {@link PinchInOutProps}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param props The properties of the effect * @param priority The priority of the effect * @returns The ids of the tickers that are used in the effect. */ function pinchOut(alias: string, props?: PinchInOutProps, priority?: UPDATE_PRIORITY$1): string[] | undefined; } /** * Canvas error handler: when a `PixiError` contains `canvasElementInfo`, * draw a simple `ErrorGraphics` placeholder on the canvas so the scene * remains visible and debuggable. */ declare function drawCanvasErrorHandler(): OnErrorHandler; /** * Add a list of images in the container, after that, the images are added to the canvas. * Is the same that {@link showImageContainer}, but the image is not shown. * If you want to show the container, then you need to use the function {@link ImageSprite.load()}. * @param alias is the unique alias of the container. You can use this alias to refer to this container * @param imageUrls is the url of the image. If you don't provide the url, then the alias is used as the url. * @param options The options of the container. * @returns This function returns an {@link ImageContainer} that you can use to manipulate the component. * @example * ```ts * let bunny = addImageContainer("bunny", ["https://pixijs.com/assets/bunny-body.png", "https://pixijs.com/assets/bunny-eyes.png"]) * await bunny.load() * ``` */ declare function addImageCointainer(alias: string, imageUrls: string[], options?: ImageContainerOptions): ImageContainer; /** * Add a list of images in the container, after that, the images are added and shown in the canvas. * @param alias The unique alias of the container. You can use this alias to refer to this container * @param imageUrls The url of the image. * @param options The options of the container. * @returns This function returns an {@link ImageContainer} that you can use to manipulate the component. * @example * ```ts * let bunny = showImageContainer("bunny", ["https://pixijs.com/assets/bunny-body.png", "https://pixijs.com/assets/bunny-eyes.png"]) * ``` */ declare function showImageContainer(alias: string, imageUrls: string[], options?: ImageContainerOptions): Promise; /** * Add a image in the canvas. * Is the same that {@link showImage}, but the image is not shown. * If you want to show the image, then you need to use the function {@link ImageSprite.load}. * @param alias is the unique alias of the image. You can use this alias to refer to this image * @param imageUrl The url of the image. If you have initialized the "asset matrix", you can use the alias of the texture. If you don't provide the URL, then the alias is used as the URL. * @param options The options of the image. * @returns This function returns an {@link ImageSprite} that you can use to manipulate the component. * @throws {PixiError} when `imageUrl` is not provided and `alias` is not registered in the asset cache. * @example * ```ts * let bunny1 = addImage("bunny1", "https://pixijs.com/assets/bunny1.png") * await bunny1.load() * Assets.add({ alias: "bunny2", src: "https://pixijs.com/assets/bunny2.png" }) * let bunny2 = addImage("bunny2") * await bunny2.load() * ``` */ declare function addImage(alias: string, imageUrl?: string, options?: ImageSpriteOptions): ImageSprite; /** * Add and show a image in the canvas. This function is a combination of {@link addImage}. * @param alias The unique alias of the image. You can use this alias to refer to this image * @param imageUrl The url of the image. If you have initialized the "asset matrix", you can use the alias of the texture. If you don't provide the URL, then the alias is used as the URL. * @param options The options of the image. * @returns This function returns an {@link ImageSprite} that you can use to manipulate the component. * @throws {PixiError} when `imageUrl` is not provided and `alias` is not registered in the asset cache. * @example * ```ts * let bunny1 = showImage("bunny1", "https://pixijs.com/assets/bunny1.png") * Assets.add({ alias: "bunny2", src: "https://pixijs.com/assets/bunny2.png" }) * let bunny2 = showImage("bunny2") * ``` */ declare function showImage(alias: string, imageUrl?: string, options?: ImageSpriteOptions): Promise; /** * Add and show a text in the canvas. * @param alias The unique alias of the text. You can use this alias to refer to this text. * @param text * @param options The options of the text. * @returns This function returns an {@link Text} that you can use to manipulate the component. * @example * ```ts * let text = showText("text", "Hello World", { fontSize: 24, fill: "white" }) * ``` */ declare function showText(alias: string, text: string, options?: Omit): Text; /** * Get a texture from a url. * @param textureAlias is the url of the file. * @returns the texture of the image or video, or `undefined` when `textureAlias` is the `"EMPTY"` sentinel value. * @throws {PixiError} when the alias is missing, the asset is not found in the cache/network, or the loaded resource is not a `Texture`. */ declare function getTexture(textureAlias?: string): Promise; /** * Add a video in the canvas. * Is the same that {@link showVideo}, but the video is not shown. * If you want to show the video, then you need to use the function {@link VideoSprite.load()}. * @param alias is the unique alias of the video. You can use this alias to refer to this video * @param videoUrl is the url of the video. If you don't provide the url, then the alias is used as the url. * @param options The options of the video. * @returns This function returns an {@link VideoSprite} that you can use to manipulate the component. * @throws {PixiError} when `videoUrl` is not provided and `alias` is not registered in the asset cache. * @example * ```ts * let video1 = addVideo("video1", "https://pixijs.com/assets/video1.mp4") * await video1.load() * Assets.add({ alias: "video2", src: "https://pixijs.com/assets/video2.png" }) * let video2 = addVideo("video2") * await video2.load() * ``` */ declare function addVideo(alias: string, videoUrl?: string, options?: VideoSpriteOptions): VideoSprite; /** * Add and show a video in the canvas. This function is a combination of {@link addVideo}. * @param alias The unique alias of the video. You can use this alias to refer to this video * @param videoUrl The url of the video. * @param options The options of the video. * @returns This function returns an {@link VideoSprite} that you can use to manipulate the component. * @throws {PixiError} when `videoUrl` is not provided and `alias` is not registered in the asset cache. * @example * ```ts * let video1 = showVideo("video1", "https://pixijs.com/assets/video1.mp4") * Assets.add({ alias: "video2", src: "https://pixijs.com/assets/video2.png" }) * let video2 = showVideo("video2") * ``` */ declare function showVideo(alias: string, videoUrl?: string, options?: VideoSpriteOptions): Promise; /** * A snapshot of a component's own (untransformed) bounds, captured once when a mask/filter transition * starts. Transitions don't expect the component to resize mid-effect, the same simplification the * existing move/zoom/push transitions already make by computing their destination once upfront. */ interface BoundsSnapshot { x: number; y: number; width: number; height: number; } interface WipeFilterConfig { kind: "wipe"; angle: number; invert: boolean; bounds: BoundsSnapshot; } interface IrisFilterConfig { kind: "iris"; /** If true the image is seen around the circle (a hole in the mask) instead of through it. */ outside?: boolean; originX: number; originY: number; aspect: number; invert: boolean; bounds: BoundsSnapshot; } interface SplitFilterConfig { kind: "split"; /** Absent in older saves, which reveal from the edges inwards. */ direction?: "inward" | "outward"; orientation: "horizontal" | "vertical"; origin: number; invert: boolean; bounds: BoundsSnapshot; } type FilterTransitionConfig = WipeFilterConfig | IrisFilterConfig | SplitFilterConfig; /** * Builds the `apply`/`cleanup` pair that drives a mask-based transition (wipe/iris/split) on the * component registered under `alias`, from nothing but plain, serializable data. It's the single place * both the live transition and a ticker reconstructed after a save/restore (or a step back) get their * callbacks from - which is what lets the animation resume instead of being lost. The mask `Graphics` is * lazily recreated on the first `apply()` call, so a restored ticker needs nothing else. */ declare function createFilterTransitionApplier(alias: string, config: FilterTransitionConfig): { apply(value: number): void; cleanup(): void; }; /** * An empty interface that can be augmented via `declare module '@drincs/pixi-vn/canvas'` * to constrain the set of valid asset aliases to a known union of string literals. * * When this interface has no keys (the default), {@link AssetAliasIdType} resolves to `string`, * preserving full backwards compatibility. Once you augment it, {@link AssetAliasIdType} becomes * the union of the declared keys and the compiler will reject any unknown asset alias. * * The augmentation is typically written into an auto-generated declaration file by the * Vite plugin (see the `assetsManifest` option of `vitePluginPixivn`), but it can * also be written by hand. * * @example * ```ts * // pixi-vn.gen.d.ts (auto-generated — do not edit manually) * declare module "@drincs/pixi-vn/canvas" { * interface PixivnAssetAliasIds { * logo: never; * hero: never; * } * } * export {}; * ``` */ interface PixivnAssetAliasIds { } /** * The type used wherever an asset alias is expected (e.g. `Assets.load`, `getTexture`). * * - **Default** — resolves to `string` so that existing code that passes arbitrary strings * continues to compile without any changes. * - **Augmented** — when {@link PixivnAssetAliasIds} has been extended via * `declare module "@drincs/pixi-vn/canvas"`, this type resolves to the union of the * declared keys, giving you compile-time safety against typos and unknown asset aliases. */ type AssetAliasIdType = [keyof PixivnAssetAliasIds] extends [never] ? string : keyof PixivnAssetAliasIds; /** * An empty interface that can be augmented via `declare module '@drincs/pixi-vn/canvas'` * to constrain the set of valid asset bundle names to a known union of string literals. * * When this interface has no keys (the default), {@link BundleIdType} resolves to `string`, * preserving full backwards compatibility. Once you augment it, {@link BundleIdType} becomes * the union of the declared keys and the compiler will reject any unknown bundle name. * * The augmentation is typically written into an auto-generated declaration file by the * Vite plugin (see the `assetsManifest` option of `vitePluginPixivn`), but it can * also be written by hand. * * @example * ```ts * // pixi-vn.gen.d.ts (auto-generated — do not edit manually) * declare module "@drincs/pixi-vn/canvas" { * interface PixivnBundleIds { * main: never; * ui: never; * } * } * export {}; * ``` */ interface PixivnBundleIds { } /** * The type used wherever an asset bundle name is expected (e.g. `Assets.loadBundle`). * * - **Default** — resolves to `string` so that existing code that passes arbitrary strings * continues to compile without any changes. * - **Augmented** — when {@link PixivnBundleIds} has been extended via * `declare module "@drincs/pixi-vn/canvas"`, this type resolves to the union of the * declared keys, giving you compile-time safety against typos and unknown bundle names. */ type BundleIdType = [keyof PixivnBundleIds] extends [never] ? string : keyof PixivnBundleIds; declare const Assets: _drincs_pixi_vn_pixi_js.AssetsClass; declare const Color: typeof _drincs_pixi_vn_pixi_js.Color; declare const Rectangle: typeof _drincs_pixi_vn_pixi_js.Rectangle; declare const TextStyle: typeof _drincs_pixi_vn_pixi_js.TextStyle; declare const Texture: typeof _drincs_pixi_vn_pixi_js.Texture; declare const UPDATE_PRIORITY: typeof _drincs_pixi_vn_pixi_js.UPDATE_PRIORITY; /** * The global canvas manager instance. It handles the PixiJS application, the canvas elements * (images, videos, text, containers), tickers, transitions, and the canvas state used for save/restore. */ declare const canvas: CanvasManagerInterface; export { AdditionalPositionsExtension, AdditionalPositionsExtensionProps, Assets, CanvasBaseItem, CanvasBaseItemMemory, CanvasGameState, CanvasManagerStatic, CanvasPropertyUtility, Color, Container, ContainerChild$1 as ContainerChild, ContainerMemory, ImageContainer, ImageSprite, ListenerExtension, ListenerExtensionMemory, OnEventsHandlers, Rectangle, RegisteredCanvasComponents, RegisteredEvents, Sprite, Text, TextStyle, Texture, UPDATE_PRIORITY, VideoSprite, addImage, addImageCointainer, addVideo, canvas, canvasComponentDecorator, createFilterTransitionApplier, drawCanvasErrorHandler, effects, eventDecorator, getTexture, moveIn, moveOut, pushIn, pushOut, removeWithDissolve, removeWithFade, setMemoryContainer, shakeEffect, showImage, showImageContainer, showText, showVideo, showWithDissolve, showWithFade, transitions, zoomIn, zoomOut }; export type { AnchorExtension, AnchorExtensionProps, AssetAliasIdType, AssetMemory, BlurInOutProps, BlurPulseEffectProps, BounceEffectProps, BundleIdType, CanvasBaseInterface, CanvasHtmlLayersInterface, CanvasLayersInterface, CanvasManagerInterface, ChromaticAberrationEffectProps, ColorType, ContainerOptions, DecayingEffectProps, DesaturateEffectProps, FilterFadeTransitionProps, FilterTransitionConfig, FlashInOutProps, GlitchEffectProps, GlitchInOutProps, GlowPulseEffectProps, HopEffectProps, HslColorType, HslaColorType, HsvColorType, HsvaColorType, ImageContainerMemory, ImageContainerOptions, ImageSpriteMemory, ImageSpriteOptions, IrisInOutProps, Layer, MaskTransitionProps, MoveInOutProps, NodEffectProps, NoiseDissolveInOutProps, OldComponentOutProps, PinchInOutProps, PixelateInOutProps, PixivnAssetAliasIds, PixivnBundleIds, PulseEffectProps, PunchEffectProps, PushInOutProps, RadialBlurEffectProps, RgbColorType, RgbaColorType, RippleInOutProps, ShakeEffectProps, ShockwaveEffectProps, ShowWithDissolveTransitionProps, ShowWithFadeTransitionProps, SplitInOutProps, SpriteBaseMemory, SpriteMemory, SpriteOptions, SwayEffectProps, TextMemory, TextOptions, TvInOutProps, TwistInOutProps, VideoSpriteMemory, VideoSpriteOptions, VignettePulseEffectProps, WarpInOutProps, WiggleEffectProps, WipeInOutProps, ZoomInOutProps };