@drincs/pixi-vn 1.8.24 → 1.9.0

package/dist/canvas.d.cts

@@ -3,8 +3,8 @@ import _drincs_pixi_vn_pixi_js__default, { Container as Container$1, ContainerCh
 export { TextureSourceLike, Ticker as TickerValue } from '@drincs/pixi-vn/pixi.js';
 import { KeyframesType, AnimationOptions, ObjectSegment, ObjectSegmentWithTransition, SequenceOptions } from '@drincs/pixi-vn/motion';
 import { Devtools } from '@pixi/devtools';
-import { T as TickerArgs, a as Ticker$1, C as CanvasBaseItemMemory, b as CanvasBaseItem, c as TickerInfo, d as TickersSequence, R as RepeatType, P as PauseType, e as CanvasGameState, f as ContainerChild$1, A as AdditionalPositionsExtensionProps, L as ListenerExtensionMemory, g as ListenerExtension, h as AdditionalPositionsExtension, O as OnEventsHandlers, i as ContainerMemory, j as TickerHistory } from './ContainerMemory-D2HtgX7w.cjs';
-export { k as addListenerHandler, l as analizePositionsExtensionProps } from './ContainerMemory-D2HtgX7w.cjs';
+import { T as TickerArgs, a as Ticker$1, C as CanvasBaseItemMemory, b as CanvasBaseItem, c as TickerInfo, d as TickersSequence, e as CanvasGameState, f as ContainerChild$1, A as AdditionalPositionsExtensionProps, L as ListenerExtensionMemory, g as ListenerExtension, h as AdditionalPositionsExtension, O as OnEventsHandlers, i as ContainerMemory, j as TickerHistory } from './ContainerMemory-BpDgacyr.cjs';
+export { k as addListenerHandler, l as analizePositionsExtensionProps } from './ContainerMemory-BpDgacyr.cjs';
 export { AnimationOptions as MotionAnimationOptions } from 'motion';
 import { OnErrorHandler } from '@drincs/pixi-vn/core';
 
@@ -14,7 +14,7 @@ type TickerValue = Ticker;
 
 /**
  * A class is used to create a ticker element to add into a Pixi Application.
- * You can use {@link canvas.addTicker()} to add this element into the application.
+ * You can use {@link canvas.tickers.add()} to add this element into the application.
  * This class should be extended and the fn method should be overridden.
  * You must use the {@link tickerDecorator} to register the ticker in the game.
  * In Ren'Py is a transform.
@@ -29,7 +29,7 @@ type TickerValue = Ticker;
  *             speed?: number,
  *         },
  *         aliases: string[], // the aliases of the canvas elements that are connected to this ticker
- *         tickerId: string, // the id of the ticker. You can use this to get the ticker from the canvas.currentTickers
+ *         tickerId: string, // the id of the ticker. You can use this to get the ticker from the canvas.tickers.currentTickers
  *     ): void {
  *         let speed = args.speed === undefined ? 0.1 : args.speed
  *         aliases.forEach((alias) => {
@@ -82,7 +82,7 @@ declare abstract class TickerBase<TArgs extends TickerArgs> implements Ticker$1<
      * @param _ticker The ticker that is calling this method
      * @param _args The arguments that you passed when you added the ticker
      * @param _alias The alias of the canvas elements that are connected to this ticker
-     * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link canvas.currentTickers}
+     * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link canvas.tickers.currentTickers}
      */
     abstract fn(_ticker: TickerValue, _args: TArgs, _alias: string | string[], _tickerId: string): void;
     protected fnValue?: () => void;
@@ -222,10 +222,6 @@ type CommonTickerProps = {
      * @default []
      */
     tickerIdToResume?: string[] | string;
-    /**
-     * @deprecated Use {@link completeOnContinue} instead.
-     */
-    forceCompleteBeforeNext?: boolean;
     /**
      * A boolean indicating whether the animation must complete before the next `step` of the game. If `true`, the game will force the animation to finish before proceeding.
      * When true, calling {@link narration.continue()} forces the current content to complete before advancing to the next narrative step.
@@ -237,6 +233,228 @@ type CommonTickerProps = {
 interface CanvasBaseInterface<T2 extends CanvasBaseItemMemory> extends CanvasBaseItem<T2>, 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(
+     *     <App />
+     * )
+     * ```
+     */
+    add(id: string, element: HTMLElement, style?: Partial<Pick<CSSStyleDeclaration, "position" | "pointerEvents" | "userSelect">>): 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 CanvasTickersInterface {
+    /**
+     * 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.
+     */
+    transfer(oldAlias: string, newAlias: string, mode?: "move" | "duplicate"): void;
+    /**
+     * Currently tickers that are running.
+     */
+    readonly currentTickers: Map<string, TickerInfo<any>>;
+    /**
+     * The steps of the tickers
+     */
+    readonly currentTickersSteps: Map<string, Map<string, TickersSequence>>;
+    /**
+     * 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.
+     */
+    find<TArgs extends TickerArgs>(tickerId: string, args?: TArgs): Ticker$1<TArgs> | undefined;
+    /**
+     * Run a ticker. You can run multiple add 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.tickers.add("alien", new RotateTicker({ speed: 0.2 }))
+     * ```
+     */
+    add<TArgs extends TickerArgs>(canvasElementAlias: string | string[], ticker: Ticker$1<TArgs>): string | undefined;
+    /**
+     * Run a sequence of tickers.
+     * @param alias The alias of canvas element that will use the tickers.
+     * @param steps The steps of the tickers.
+     * @param currentStepNumber The current step number. It is used to continue the sequence of tickers.
+     * @returns The id of tickers.
+     * @example
+     * ```ts
+     * canvas.tickers.addSequence("alien", [
+     *     new RotateTicker({ speed: 0.1, clockwise: true }, 2), // runs for 2 seconds
+     *     new RotateTicker({ speed: 0.2, clockwise: false }, 2),
+     * ])
+     * ```
+     * @deprecated
+     */
+    addSequence(alias: string, steps: Ticker$1<any>[], 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.tickers.unlinkComponent("alien", RotateTicker)
+     * ```
+     */
+    unlinkComponent(alias: string | string[], ticker?: {
+        new (): Ticker$1<any>;
+    } | string): void;
+    /**
+     * Remove all tickers from the canvas.
+     */
+    removeAll(): void;
+    /**
+     * Remove a ticker by the id.
+     * @param tickerId The id or an array of ids of the ticker to be removed.
+     */
+    remove(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.
+     */
+    pause(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.
+     */
+    resume(filters: {
+        /**
+         * The alias of the canvas element that will use the ticker.
+         * Will resume all tickers that are connected to this canvas element.
+         */
+        canvasAlias: string;
+    } | {
+        /**
+         * The id of the ticker to be resumed. If provided, only this ticker will be resumed.
+         */
+        id: string | string[];
+    }): void;
+    /**
+     * Check if a ticker is paused.
+     * @param alias The alias of the canvas element that will use the ticker.
+     * @param tickerId The ticker that will be checked.
+     * @returns If the ticker is paused.
+     */
+    isPaused(alias: string, tickerId?: string): boolean;
+    /**
+     * Add a ticker that must be completed before the next step.
+     * This method is used for example into a transition between scenes.
+     * @param step The step that the ticker must be completed before the next step.
+     */
+    completeOnStepEnd(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.
+     */
+    forceCompletion(id: string, alias?: string): Promise<void>;
+    onComplete(tickerId: string, options: {
+        aliasToRemoveAfter: string[];
+        tickerAliasToResume: string[];
+        tickerIdToResume: string[];
+        ignoreTickerSteps?: boolean;
+        stopTicker?: boolean;
+    }): void;
+}
+
 interface CanvasManagerInterface {
     /**
      * The PIXI Application instance.
@@ -245,7 +463,7 @@ interface CanvasManagerInterface {
     readonly app: Application;
     /**
      * The PIXI Container that contains all the canvas elements.
-     *
+     * @deprecated Use {@link layers}.gameLayer instead.
      */
     readonly gameLayer: Container$1;
     /**
@@ -321,6 +539,7 @@ interface CanvasManagerInterface {
      * @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 {@link tickers}.transfer instead.
      */
     transferTickers(oldAlias: string, newAlias: string, mode?: "move" | "duplicate"): void;
     /**
@@ -403,10 +622,12 @@ interface CanvasManagerInterface {
     /** Edit Tickers Methods */
     /**
      * Currently tickers that are running.
+     * @deprecated Use {@link tickers}.currentTickers instead.
      */
     readonly currentTickers: Map<string, TickerInfo<any>>;
     /**
      * The steps of the tickers
+     * @deprecated Use {@link tickers}.currentTickersSteps instead.
      */
     readonly currentTickersSteps: Map<string, Map<string, TickersSequence>>;
     /**
@@ -414,6 +635,7 @@ interface CanvasManagerInterface {
      * @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 {@link tickers}.find instead.
      */
     findTicker<TArgs extends TickerArgs>(tickerId: string, args?: TArgs): Ticker$1<TArgs> | undefined;
     /**
@@ -427,6 +649,7 @@ interface CanvasManagerInterface {
      * ```ts
      * canvas.addTicker("alien", new RotateTicker({ speed: 0.2 }))
      * ```
+     * @deprecated Use {@link tickers}.add instead.
      */
     addTicker<TArgs extends TickerArgs>(canvasElementAlias: string | string[], ticker: Ticker$1<TArgs>): string | undefined;
     /**
@@ -439,13 +662,12 @@ interface CanvasManagerInterface {
      * ```ts
      * canvas.addTickersSequence("alien", [
      *     new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds
-     *     Pause(1), // 1 second
      *     new RotateTicker({ speed: 0.2, clockwise: false }, 2),
-     *     Repeat,
      * ])
      * ```
+     * @deprecated Use {@link tickers}.addSequence instead.
      */
-    addTickersSequence(alias: string, steps: (Ticker$1<any> | RepeatType | PauseType)[], currentStepNumber?: number): string | undefined;
+    addTickersSequence(alias: string, steps: Ticker$1<any>[], 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.
@@ -455,24 +677,27 @@ interface CanvasManagerInterface {
      * ```ts
      * canvas.unlinkComponentFromTicker("alien", RotateTicker)
      * ```
-     * @deprecated
+     * @deprecated Use {@link tickers}.unlinkComponent instead.
      */
     unlinkComponentFromTicker(alias: string | string[], ticker?: {
         new (): Ticker$1<any>;
     } | string): void;
     /**
      * Remove all tickers from the canvas.
+     * @deprecated Use {@link tickers}.removeAll 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 {@link tickers}.remove 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 {@link tickers}.pause instead.
      */
     pauseTicker(filters: {
         /**
@@ -493,6 +718,7 @@ interface CanvasManagerInterface {
     /**
      * Resume a ticker.
      * @param filters The filters to resume the ticker.
+     * @deprecated Use {@link tickers}.resume instead.
      */
     resumeTicker(filters: {
         /**
@@ -507,13 +733,17 @@ interface CanvasManagerInterface {
         id: string | string[];
     }): void;
     /**
-     * @deprecated Use {@link findTicker}(id).paused
+     * @deprecated Use {@link tickers}.isPaused 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.
+     */
+    readonly tickers: CanvasTickersInterface;
     /**
      * Pause the rendering of gameLayer and pause currently running tickers.
      * Use {@link resume} to restore rendering and resume only
@@ -529,6 +759,7 @@ interface CanvasManagerInterface {
      * 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 {@link tickers}.completeOnStepEnd instead.
      */
     completeTickerOnStepEnd(step: {
         /**
@@ -545,6 +776,7 @@ interface CanvasManagerInterface {
      * 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 {@link tickers}.forceCompletion instead.
      */
     forceCompletionOfTicker(id: string, alias?: string): Promise<void>;
     /**
@@ -585,6 +817,7 @@ interface CanvasManagerInterface {
      * const uiLayer = new Container();
      * canvas.addLayer("ui", uiLayer);
      * ```
+     * @deprecated Use {@link layers}.add instead.
      */
     addLayer(label: string, layer: Container$1): Layer | undefined;
     /**
@@ -595,6 +828,7 @@ interface CanvasManagerInterface {
      * ```ts
      * const uiLayer = canvas.getLayer("ui");
      * ```
+     * @deprecated Use {@link layers}.get instead.
      */
     getLayer(label: string): Layer | null;
     /**
@@ -604,6 +838,7 @@ interface CanvasManagerInterface {
      * ```ts
      * canvas.removeLayer("ui");
      * ```
+     * @deprecated Use {@link layers}.remove instead.
      */
     removeLayer(label: string): void;
     /**
@@ -626,18 +861,29 @@ interface CanvasManagerInterface {
      *     <App />
      * )
      * ```
+     * @deprecated Use {@link htmlLayers}.add instead.
      */
     addHtmlLayer(id: string, element: HTMLElement, style?: Partial<Pick<CSSStyleDeclaration, "position" | "pointerEvents" | "userSelect">>): 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.
@@ -657,6 +903,9 @@ interface CanvasManagerInterface {
      * @param data The object.
      */
     restore(data: object): Promise<void>;
+    /**
+     * @deprecated Use {@link tickers}.onComplete instead.
+     */
     onTickerComplete(tickerId: string, options: {
         aliasToRemoveAfter: string[];
         tickerAliasToResume: string[];
@@ -710,10 +959,6 @@ interface VideoSpriteOptions extends ImageSpriteOptions {
  * Interface for Asset memory
  */
 interface AssetMemory {
-    /**
-     * @deprecated
-     */
-    image?: string;
     alias?: string;
     url: string;
 }
@@ -1409,10 +1654,6 @@ declare namespace CanvasPropertyUtility {
 }
 
 interface BaseTransitionProps {
-    /**
-     * @deprecated Use {@link completeOnContinue} instead.
-     */
-    forceCompleteBeforeNext?: boolean;
     /**
      * 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.
@@ -1804,4 +2045,4 @@ declare const UPDATE_PRIORITY: typeof _drincs_pixi_vn_pixi_js.UPDATE_PRIORITY;
 
 declare const canvas: CanvasManagerInterface;
 
-export { AdditionalPositionsExtension, AdditionalPositionsExtensionProps, type AnchorExtension, type AnchorExtensionProps, type AssetAliasIdType, type AssetMemory, Assets, type BundleIdType, type CanvasBaseInterface, CanvasBaseItem, CanvasBaseItemMemory, CanvasGameState, type CanvasManagerInterface, CanvasManagerStatic, CanvasPropertyUtility, Color, type CommonTickerProps, Container, ContainerChild$1 as ContainerChild, ContainerMemory, type ContainerOptions, ImageContainer, type ImageContainerMemory, type ImageContainerOptions, ImageSprite, type ImageSpriteMemory, type ImageSpriteOptions, type Layer, ListenerExtension, ListenerExtensionMemory, type MoveInOutProps, OnEventsHandlers, PauseType, type PixivnAssetAliasIds, type PixivnBundleIds, type PushInOutProps, Rectangle, RegisteredCanvasComponents, RegisteredEvents, RegisteredTickers, RepeatType, type ShakeEffectProps, type ShowWithDissolveTransitionProps, type ShowWithFadeTransitionProps, Sprite, type SpriteBaseMemory, type SpriteMemory, type SpriteOptions, Text, type TextMemory, type TextOptions, TextStyle, Texture, Ticker$1 as Ticker, TickerArgs, TickerBase, TickerHistory, TickerInfo, type TickerProgrationExponential, type TickerProgrationLinear, type TickerProgrationType, type TickerTimeoutHistory, TickersSequence, UPDATE_PRIORITY, VideoSprite, type VideoSpriteMemory, type VideoSpriteOptions, type ZoomInOutProps, addImage, addImageCointainer, addVideo, canvas, canvasComponentDecorator, drawCanvasErrorHandler, eventDecorator, getTexture, moveIn, moveOut, pushIn, pushOut, removeWithDissolve, removeWithFade, setMemoryContainer, shakeEffect, showImage, showImageContainer, showText, showVideo, showWithDissolve, showWithFade, tickerDecorator, zoomIn, zoomOut };
+export { AdditionalPositionsExtension, AdditionalPositionsExtensionProps, type AnchorExtension, type AnchorExtensionProps, type AssetAliasIdType, type AssetMemory, Assets, type BundleIdType, type CanvasBaseInterface, CanvasBaseItem, CanvasBaseItemMemory, CanvasGameState, type CanvasHtmlLayersInterface, type CanvasLayersInterface, type CanvasManagerInterface, CanvasManagerStatic, CanvasPropertyUtility, type CanvasTickersInterface, Color, type CommonTickerProps, Container, ContainerChild$1 as ContainerChild, ContainerMemory, type ContainerOptions, ImageContainer, type ImageContainerMemory, type ImageContainerOptions, ImageSprite, type ImageSpriteMemory, type ImageSpriteOptions, type Layer, ListenerExtension, ListenerExtensionMemory, type MoveInOutProps, OnEventsHandlers, type PixivnAssetAliasIds, type PixivnBundleIds, type PushInOutProps, Rectangle, RegisteredCanvasComponents, RegisteredEvents, RegisteredTickers, type ShakeEffectProps, type ShowWithDissolveTransitionProps, type ShowWithFadeTransitionProps, Sprite, type SpriteBaseMemory, type SpriteMemory, type SpriteOptions, Text, type TextMemory, type TextOptions, TextStyle, Texture, Ticker$1 as Ticker, TickerArgs, TickerBase, TickerHistory, TickerInfo, type TickerProgrationExponential, type TickerProgrationLinear, type TickerProgrationType, type TickerTimeoutHistory, TickersSequence, UPDATE_PRIORITY, VideoSprite, type VideoSpriteMemory, type VideoSpriteOptions, type ZoomInOutProps, addImage, addImageCointainer, addVideo, canvas, canvasComponentDecorator, drawCanvasErrorHandler, eventDecorator, getTexture, moveIn, moveOut, pushIn, pushOut, removeWithDissolve, removeWithFade, setMemoryContainer, shakeEffect, showImage, showImageContainer, showText, showVideo, showWithDissolve, showWithFade, tickerDecorator, zoomIn, zoomOut };