@wcardinal/wcardinal-ui 0.404.0 → 0.406.0

package/dist/types/wcardinal/ui/d-base-background-snippet.d.ts

@@ -1,3 +1,4 @@
+import { Renderer } from "pixi.js";
 import { DBase, DThemeBase } from "./d-base";
 import { DBaseBackgroundMesh } from "./d-base-background-mesh";
 import { DBaseSnippet } from "./d-base-snippet";
@@ -8,6 +9,6 @@ export declare class DBaseBackgroundSnippet implements DBaseSnippet {
     protected get(base: DBase, theme: DThemeBase): DBaseBackgroundMesh;
     protected hide(): void;
     onReflow(base: DBase, width: number, height: number, theme: DThemeBase, state: DBaseStateSet, cornerRadius: number, cornerMask: DCornerMask): void;
-    render(renderer: PIXI.Renderer): void;
+    render(renderer: Renderer): void;
     updateTransform(): void;
 }

package/dist/types/wcardinal/ui/d-base-border-snippet.d.ts

@@ -1,3 +1,4 @@
+import { Renderer } from "pixi.js";
 import { DBase, DThemeBase } from "./d-base";
 import { DBaseBorderMesh } from "./d-base-border-mesh";
 import { DBaseSnippet } from "./d-base-snippet";
@@ -8,6 +9,6 @@ export declare class DBaseBorderSnippet implements DBaseSnippet {
     protected get(base: DBase, theme: DThemeBase): DBaseBorderMesh;
     protected hide(): void;
     onReflow(base: DBase, width: number, height: number, theme: DThemeBase, state: DBaseStateSet, cornerRadius: number, cornerMask: DCornerMask): void;
-    render(renderer: PIXI.Renderer): void;
+    render(renderer: Renderer): void;
     updateTransform(): void;
 }

package/dist/types/wcardinal/ui/d-base-outline-snippet.d.ts

@@ -1,3 +1,4 @@
+import { Renderer } from "pixi.js";
 import { DBase, DThemeBase } from "./d-base";
 import { DBaseBorderMesh } from "./d-base-border-mesh";
 import { DBaseSnippet } from "./d-base-snippet";
@@ -8,6 +9,6 @@ export declare class DBaseOutlineSnippet implements DBaseSnippet {
     protected get(base: DBase, theme: DThemeBase): DBaseBorderMesh;
     protected hide(): void;
     onReflow(base: DBase, width: number, height: number, theme: DThemeBase, state: DBaseStateSet, cornerRadius: number, cornerMask: DCornerMask): void;
-    render(renderer: PIXI.Renderer): void;
+    render(renderer: Renderer): void;
     updateTransform(): void;
 }

package/dist/types/wcardinal/ui/d-button-color.d.ts

@@ -45,7 +45,6 @@ export declare class DButtonColor<THEME extends DThemeButtonColor = DThemeButton
     protected toClone(value: DColorAndAlpha): DColorAndAlpha;
     protected onValueChange(newValue: DColorAndAlpha, oldValue: DColorAndAlpha): void;
     protected onColorChange(): void;
-    protected updateTextForcibly(): void;
     get dialog(): DDialogColor;
     protected newDialog(options?: DDialogColorOptions): DDialogColor;
     get value(): DColorAndAlpha;

package/dist/types/wcardinal/ui/d-dialog.d.ts

@@ -67,7 +67,7 @@ export interface DThemeDialog extends DThemeBase {
     newAnimation(mode: DDialogMode): DAnimation<DBase> | null;
 }
 export interface DDialogOpener extends DApplicationTarget {
-    getBounds(skipUpdate?: boolean, rect?: PIXI.Rectangle): Rectangle;
+    getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle;
 }
 /**
  * A dialog class.

package/dist/types/wcardinal/ui/d-dynamic-text-style.d.ts

@@ -1,28 +1,37 @@
+import { utils } from "pixi.js";
 import { DDynamicTextStyleWordWrap } from "./d-dynamic-text-style-word-wrap";
-import { DFontStyle, DFontVariant, DFontWeight } from "./d-font";
-export type DDynamicTextAlign = "left" | "center" | "right";
+import { DFontStyle, DFontVariant, DFontWeight, DThemeFont } from "./d-font";
+import { DAlignVertical } from "./d-align-vertical";
+import { DAlignHorizontal } from "./d-align-horizontal";
+import { DBaseStateSet } from "./d-base-state-set";
 export interface DDynamicTextStyleOptions {
-    align?: DDynamicTextAlign;
     fontFamily?: string;
     fontSize?: number;
     fontStyle?: DFontStyle;
     fontVariant?: DFontVariant;
     fontWeight?: DFontWeight;
-    fill?: number;
     clipping?: boolean;
     fitting?: boolean;
     wordWrap?: DDynamicTextStyleWordWrap | keyof typeof DDynamicTextStyleWordWrap;
     lineHeight?: number;
 }
-export declare class DDynamicTextStyle {
-    protected static DEFAULT_OPTIONS?: Required<DDynamicTextStyleOptions>;
+export interface DThemeDynamicTextStyle extends DThemeFont {
+    getTextAlignVertical(): DAlignVertical;
+    getTextAlignHorizontal(): DAlignHorizontal;
+    getTextStyleClipping(): boolean;
+    getTextStyleFitting(): boolean;
+    getTextStyleWordWrap(): DDynamicTextStyleWordWrap;
+}
+export interface DDynamicTextStyleParent {
+    readonly state: DBaseStateSet;
+}
+export declare class DDynamicTextStyle extends utils.EventEmitter {
     protected _id: number;
     protected _idApproved: number;
     protected _fontIdId: number;
     protected _fontId: string;
     protected _fontIdApproved: string;
     protected _fontIdFontSize: number;
-    protected _align: DDynamicTextAlign;
     protected _fontFamily: string;
     protected _fontSize: number;
     protected _fontSizeFitted: number;
@@ -37,10 +46,7 @@ export declare class DDynamicTextStyle {
     protected _wordWrap: DDynamicTextStyleWordWrap;
     protected _lineHeight: number;
     protected _lineHeightFitted: number;
-    protected _onChange: () => void;
-    constructor(options: DDynamicTextStyleOptions | undefined, onChange: () => void);
-    protected getDefaultOptions(): Required<DDynamicTextStyleOptions>;
-    protected newDefaultOptions(): Required<DDynamicTextStyleOptions>;
+    constructor(parent: DDynamicTextStyleParent, theme: DThemeDynamicTextStyle, options?: DDynamicTextStyleOptions);
     get id(): number;
     get idApproved(): number;
     get fontId(): string;

package/dist/types/wcardinal/ui/d-dynamic-text.d.ts

@@ -1,6 +1,6 @@
 import { Mesh, Renderer } from "pixi.js";
 import { DDynamicTextGeometry } from "./d-dynamic-text-geometry";
-import { DDynamicTextStyle, DDynamicTextStyleOptions } from "./d-dynamic-text-style";
+import { DDynamicTextStyle } from "./d-dynamic-text-style";
 import { DDynamicTextStyleWordWrap } from "./d-dynamic-text-style-word-wrap";
 import { DynamicFontAtlas } from "./util/dynamic-font-atlas";
 export interface DDynamicTextClippingDelta {
@@ -28,7 +28,8 @@ export declare class DDynamicText extends Mesh {
     protected _height: number;
     protected _modifier: DDynamicTextModifier;
     readonly geometry: DDynamicTextGeometry;
-    constructor(options?: DDynamicTextStyleOptions);
+    constructor(style: DDynamicTextStyle);
+    protected onStyleChange(): void;
     protected update_(): void;
     get text(): string;
     set text(text: string);

package/dist/types/wcardinal/ui/d-image-base.d.ts

@@ -4,7 +4,6 @@ import { DBaseStateSet } from "./d-base-state-set";
 import { DThemeImageBaseSecondary } from "./d-image-base-theme-wrapper-secondary";
 import { DThemeImageBaseTertiary } from "./d-image-base-theme-wrapper-tertiary";
 import { DImagePieceOptions, DThemeImagePiece } from "./d-image-piece";
-import { DImagePieceLayouter } from "./d-image-piece-layouter";
 import { DOnOptions } from "./d-on-options";
 import { DStateAwareOrValueMightBe } from "./d-state-aware";
 import { DTextBase, DTextBaseEvents, DTextBaseOptions, DThemeTextBase } from "./d-text-base";
@@ -38,7 +37,6 @@ export interface DThemeImageBase<VALUE = unknown> extends DThemeTextBase<VALUE>,
  * See {@link DImageBaseEvents} for event details.
  */
 export declare class DImageBase<VALUE = unknown, THEME extends DThemeImageBase<VALUE> = DThemeImageBase<VALUE>, OPTIONS extends DImageBaseOptions<VALUE, THEME> = DImageBaseOptions<VALUE, THEME>> extends DTextBase<VALUE, THEME, OPTIONS> {
-    protected static LAYOUTER?: DImagePieceLayouter;
     protected _image?: DImagePieceContainerImpl;
     protected init(options?: OPTIONS): void;
     get image(): DImagePieceContainer;
@@ -46,8 +44,7 @@ export declare class DImageBase<VALUE = unknown, THEME extends DThemeImageBase<V
     protected newImage(): DImagePieceContainerImpl;
     set image(imageSource: DStateAwareOrValueMightBe<Texture | DisplayObject | null>);
     protected onStateChange(newState: DBaseStateSet, oldState: DBaseStateSet): void;
-    protected updateText(): void;
-    protected updateTextAndImage(): void;
+    protected onReflowTextAndImage(): void;
     protected isRefitable(target: any): target is DRefitable;
     protected getType(): string;
     destroy(): void;

package/dist/types/wcardinal/ui/d-image-piece-align.d.ts

@@ -7,8 +7,8 @@ export interface DImagePieceAlignOptions {
     horizontal?: keyof typeof DAlignHorizontal | DAlignHorizontal;
 }
 export interface DImagePieceAlign {
-    with: DAlignWith;
-    vertical: DAlignVertical;
-    horizontal: DAlignHorizontal;
-    set(w?: DAlignWith, vertical?: DAlignVertical, horizontal?: DAlignHorizontal): this;
+    with: keyof typeof DAlignWith | DAlignWith;
+    vertical: keyof typeof DAlignVertical | DAlignVertical;
+    horizontal: keyof typeof DAlignHorizontal | DAlignHorizontal;
+    set(w?: keyof typeof DAlignWith | DAlignWith, vertical?: keyof typeof DAlignVertical | DAlignVertical, horizontal?: keyof typeof DAlignHorizontal | DAlignHorizontal): this;
 }

package/dist/types/wcardinal/ui/d-image-piece-container-impl.d.ts

@@ -1,8 +1,13 @@
+import { DisplayObject, Texture } from "pixi.js";
 import { DBaseStateSet } from "./d-base-state-set";
 import { DImagePiece, DImagePieceOptions, DThemeImagePiece } from "./d-image-piece";
 import { DImagePieceContainer, DThemeImagePieceContainer } from "./d-image-piece-container";
 import { DImagePieceImpl, DImagePieceImplParent } from "./d-image-piece-impl";
 import { DImagePieceLayouter } from "./d-image-piece-layouter";
+import { DImagePieceAlign } from "./d-image-piece-align";
+import { DImagePieceMargin } from "./d-image-piece-margin";
+import { DImagePieceTint } from "./d-image-piece-tint";
+import { DStateAwareOrValueMightBe } from "./d-state-aware";
 export interface DImagePieceContainerImplOptions {
     image?: DImagePieceOptions;
     images?: DImagePieceOptions[];
@@ -15,7 +20,15 @@ export declare class DImagePieceContainerImpl implements DImagePieceContainer {
     protected newImage(theme: DThemeImagePiece, options?: DImagePieceOptions): DImagePieceImpl;
     onStateChange(newState: DBaseStateSet, oldState: DBaseStateSet): void;
     isRefitable(target: any): boolean;
-    updateTextAndImage(layouter: DImagePieceLayouter): void;
+    update(layouter: DImagePieceLayouter): void;
+    get object(): DisplayObject | null;
+    get align(): DImagePieceAlign;
+    get margin(): DImagePieceMargin;
+    get tint(): DImagePieceTint;
+    get source(): DStateAwareOrValueMightBe<Texture | DisplayObject | null>;
+    set source(source: DStateAwareOrValueMightBe<Texture | DisplayObject | null>);
+    get rotation(): DStateAwareOrValueMightBe<number>;
+    set rotation(rotation: DStateAwareOrValueMightBe<number>);
     add(options?: DImagePieceOptions): DImagePiece;
     get(index: number): DImagePiece | null;
     remove(index: number): boolean;

package/dist/types/wcardinal/ui/d-image-piece-container.d.ts

@@ -1,9 +1,20 @@
+import { DisplayObject, Texture } from "pixi.js";
 import { DThemeImageBaseSecondary } from "./d-image-base-theme-wrapper-secondary";
 import { DThemeImageBaseTertiary } from "./d-image-base-theme-wrapper-tertiary";
 import { DImagePiece, DImagePieceOptions, DThemeImagePiece } from "./d-image-piece";
+import { DImagePieceAlign } from "./d-image-piece-align";
+import { DImagePieceMargin } from "./d-image-piece-margin";
+import { DImagePieceTint } from "./d-image-piece-tint";
+import { DStateAwareOrValueMightBe } from "./d-state-aware";
 export interface DThemeImagePieceContainer extends DThemeImagePiece, DThemeImageBaseSecondary, DThemeImageBaseTertiary {
 }
 export interface DImagePieceContainer {
+    readonly object: DisplayObject | null;
+    readonly align: DImagePieceAlign;
+    readonly margin: DImagePieceMargin;
+    readonly tint: DImagePieceTint;
+    source: DStateAwareOrValueMightBe<Texture | DisplayObject | null>;
+    rotation: DStateAwareOrValueMightBe<number>;
     add(options?: DImagePieceOptions): DImagePiece;
     get(index: number): DImagePiece | null;
     remove(index: number): boolean;

package/dist/types/wcardinal/ui/d-image-piece-layouter-part-container.d.ts

@@ -6,7 +6,7 @@ import { DImagePieceLayouterPartLeft } from "./d-image-piece-layouter-part-left"
 import { DImagePieceLayouterPartMiddle } from "./d-image-piece-layouter-part-middle";
 import { DImagePieceLayouterPartRight } from "./d-image-piece-layouter-part-right";
 import { DImagePieceLayouterPartTop } from "./d-image-piece-layouter-part-top";
-import { DTextBaseAlign } from "./d-text-base";
+import { DTextPieceAlign } from "./d-text-piece-align";
 export declare class DImagePieceLayouterPartContainer {
     left: DImagePieceLayouterPartLeft;
     center: DImagePieceLayouterPartCenter;
@@ -21,5 +21,5 @@ export declare class DImagePieceLayouterPartContainer {
     set(text: DDynamicText | null): void;
     get width(): number;
     get height(): number;
-    execute(pleft: number, ptop: number, pright: number, pbottom: number, textAlign: DTextBaseAlign, width: number, height: number): void;
+    execute(pleft: number, ptop: number, pright: number, pbottom: number, textAlign: DTextPieceAlign, width: number, height: number): void;
 }

package/dist/types/wcardinal/ui/d-image-piece-layouter.d.ts

@@ -2,7 +2,7 @@ import { DDynamicText } from "./d-dynamic-text";
 import { DImagePiece } from "./d-image-piece";
 import { DImagePieceLayouterPartContainer } from "./d-image-piece-layouter-part-container";
 import { DPadding } from "./d-padding";
-import { DTextBaseAlign } from "./d-text-base";
+import { DTextPieceAlign } from "./d-text-piece-align";
 export declare class DImagePieceLayouter {
     text: DImagePieceLayouterPartContainer;
     padding: DImagePieceLayouterPartContainer;
@@ -11,7 +11,7 @@ export declare class DImagePieceLayouter {
     clear(): void;
     add(image: DImagePiece): void;
     set(text: DDynamicText | null): void;
-    execute(padding: DPadding, textAlign: DTextBaseAlign, width: number | null, height: number | null): void;
+    execute(padding: DPadding, textAlign: DTextPieceAlign, width: number | null, height: number | null): void;
     get width(): number;
     get height(): number;
 }

package/dist/types/wcardinal/ui/d-input.d.ts

@@ -1,5 +1,6 @@
 import { DHtmlElement, DHtmlElementOptions, DThemeHtmlElement } from "./d-html-element";
 import { UtilInput, UtilInputOperation, UtilInputOptions, UtilThemeInput } from "./util/util-input";
+import { DTextPieceImpl } from "./d-text-piece-impl";
 export interface DInputOptions<VALUE = unknown, ELEMENT extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement | HTMLTextAreaElement, THEME extends DThemeInput<VALUE, ELEMENT> = DThemeInput<VALUE, ELEMENT>> extends DHtmlElementOptions<VALUE, ELEMENT, THEME>, UtilInputOptions<VALUE, ELEMENT> {
 }
 export interface DThemeInput<VALUE = unknown, ELEMENT extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement | HTMLTextAreaElement> extends DThemeHtmlElement<VALUE, ELEMENT>, UtilThemeInput<VALUE, ELEMENT> {
@@ -8,7 +9,7 @@ export declare abstract class DInput<VALUE = unknown, ELEMENT extends HTMLInputE
     protected newOperation(): UtilInputOperation<VALUE, ELEMENT>;
     get value(): VALUE;
     set value(value: VALUE);
-    protected onTextChange(): void;
+    protected newText(): DTextPieceImpl<VALUE>;
     protected onValueChange(newValue: VALUE, oldValue: VALUE): void;
     protected onValueInput(newValue: VALUE): void;
     protected onEnter(): void;

package/dist/types/wcardinal/ui/d-menu-item-text.d.ts

@@ -15,9 +15,10 @@ export declare class DMenuItemText<VALUE = unknown, THEME extends DThemeMenuItem
     protected init(options?: OPTIONS): void;
     protected initOnOver(options?: OPTIONS): void;
     protected initShortcuts(options?: OPTIONS): void;
+    protected newShortcutText(): DDynamicText;
     protected updateShortcutText(): void;
-    protected updateTextColor(text: DDynamicText): void;
-    protected updateText(): void;
+    protected updateShortcutColor(): void;
+    protected onReflow(): void;
     protected getType(): string;
     protected onSelect(e?: InteractionEvent | KeyboardEvent | MouseEvent | TouchEvent): void;
     protected onShortcut(e: KeyboardEvent): void;

package/dist/types/wcardinal/ui/d-scroll-bar.d.ts

@@ -1,3 +1,4 @@
+import { Renderer } from "pixi.js";
 import { DBase, DBaseOptions, DThemeBase } from "./d-base";
 import { DBaseStateSet } from "./d-base-state-set";
 import { DScrollBarThumb, DScrollBarThumbOptions } from "./d-scroll-bar-thumb";
@@ -29,7 +30,7 @@ export declare abstract class DScrollBar<THEME extends DThemeScrollBar = DThemeS
     protected onChange(silently?: boolean): void;
     touch(silently?: boolean): void;
     isRegionVisible(): boolean;
-    render(renderer: PIXI.Renderer): void;
+    render(renderer: Renderer): void;
     onResize(newWidth: number, newHeight: number, oldWidth: number, oldHeight: number): void;
     protected abstract updateThumb(width: number, height: number): void;
     protected onFadeOutTimeout(): void;

package/dist/types/wcardinal/ui/d-text-base.d.ts

@@ -1,32 +1,11 @@
 import { Graphics } from "pixi.js";
-import { DAlignHorizontal } from "./d-align-horizontal";
-import { DAlignVertical } from "./d-align-vertical";
 import { DBase, DBaseEvents, DBaseOptions, DRefitable, DThemeBase } from "./d-base";
-import { DBaseOverflowMaskSimple } from "./d-base-overflow-mask-simple";
-import { DBaseStateSet } from "./d-base-state-set";
-import { DDynamicText } from "./d-dynamic-text";
-import { DDynamicTextStyleOptions } from "./d-dynamic-text-style";
-import { DDynamicTextStyleWordWrap } from "./d-dynamic-text-style-word-wrap";
+import { DImagePieceLayouter } from "./d-image-piece-layouter";
 import { DOnOptions } from "./d-on-options";
 import { DStateAwareOrValueMightBe } from "./d-state-aware";
-/**
- * {@link DTextBase} text align options.
- */
-export interface DTextBaseTextAlignOptions {
-    vertical?: keyof typeof DAlignVertical | DAlignVertical;
-    horizontal?: keyof typeof DAlignHorizontal | DAlignHorizontal;
-}
-/**
- * {@link DTextBase} text options.
- */
-export interface DTextBaseTextOptions<VALUE = unknown> {
-    value?: DStateAwareOrValueMightBe<VALUE>;
-    color?: DStateAwareOrValueMightBe<number>;
-    alpha?: DStateAwareOrValueMightBe<number>;
-    style?: DDynamicTextStyleOptions;
-    align?: DTextBaseTextAlignOptions;
-    formatter?: (value: VALUE, caller: any) => string;
-}
+import { DTextPiece, DTextPieceOptions, DThemeTextPiece } from "./d-text-piece";
+import { DBaseOverflowMaskSimple } from "./d-base-overflow-mask-simple";
+import { DTextPieceImpl } from "./d-text-piece-impl";
 /**
  * {@link DTextBase} events.
  */
@@ -41,71 +20,33 @@ export interface DTextBaseOnOptions<VALUE, EMITTER> extends Partial<DTextBaseEve
  * {@link DTextBase} options.
  */
 export interface DTextBaseOptions<VALUE = unknown, THEME extends DThemeTextBase<VALUE> = DThemeTextBase<VALUE>, EMITTER = any> extends DBaseOptions<THEME, EMITTER> {
-    text?: DTextBaseTextOptions<VALUE>;
+    text?: DTextPieceOptions<VALUE>;
     mask?: boolean;
     on?: DTextBaseOnOptions<VALUE, EMITTER>;
 }
 /**
  * {@link DTextBase} theme.
  */
-export interface DThemeTextBase<VALUE = unknown> extends DThemeBase {
-    getTextFormatter(): (value: VALUE, caller: any) => string;
-    /**
-     * Returns a new text value.
-     * Called to initialize a text value if a text value is not given.
-     */
-    newTextValue(): DStateAwareOrValueMightBe<VALUE>;
-    /**
-     * Returns a text value.
-     * Called to get a text vale if there is no text value.
-     *
-     * @param state a state
-     */
-    getTextValue(state: DBaseStateSet): VALUE | undefined;
-    getTextAlignVertical(): DAlignVertical;
-    getTextAlignHorizontal(): DAlignHorizontal;
-    getTextStyleClipping(): boolean;
-    getTextStyleFitting(): boolean;
-    getTextStyleWordWrap(): DDynamicTextStyleWordWrap;
-    isOverflowMaskEnabled(): boolean;
-}
-export interface DTextBaseAlign {
-    vertical: DAlignVertical;
-    horizontal: DAlignHorizontal;
+export interface DThemeTextBase<VALUE = unknown> extends DThemeBase, DThemeTextPiece<VALUE> {
 }
 /**
  * A base class for UI classes with a text support.
  * See {@link DTextBaseEvents} for event defaults.
  */
 export declare class DTextBase<VALUE = unknown, THEME extends DThemeTextBase<VALUE> = DThemeTextBase<VALUE>, OPTIONS extends DTextBaseOptions<VALUE, THEME> = DTextBaseOptions<VALUE, THEME>> extends DBase<THEME, OPTIONS> {
-    protected _text?: DDynamicText | null;
-    protected _textValue?: DStateAwareOrValueMightBe<VALUE>;
-    protected _textValueComputed?: VALUE;
-    protected _textColor: DStateAwareOrValueMightBe<number>;
-    protected _textAlpha: DStateAwareOrValueMightBe<number>;
-    protected _textStyle: DDynamicTextStyleOptions;
-    protected _textAlign: DTextBaseAlign;
-    protected _textFormatter: (value: VALUE, caller: any) => string;
-    protected _isOverflowMaskEnabled: boolean;
+    protected static LAYOUTER?: DImagePieceLayouter;
+    protected _text?: DTextPieceImpl<VALUE>;
     protected _overflowMask?: DBaseOverflowMaskSimple | null;
-    protected _isTextVisible: boolean;
     protected init(options?: OPTIONS): void;
-    set text(text: DStateAwareOrValueMightBe<VALUE>);
-    get text(): DStateAwareOrValueMightBe<VALUE>;
-    protected onTextChange(): void;
-    protected computeTextValue(): VALUE | undefined;
-    protected createOrUpdateText(): void;
-    protected newText(): DDynamicText;
     getOverflowMask(): Graphics | null;
-    protected updateTextPosition(text: DDynamicText): void;
-    protected getTextColor(theme: THEME, state: DBaseStateSet): number;
-    protected getTextAlpha(theme: THEME, state: DBaseStateSet): number;
-    protected updateTextColor(text: DDynamicText): void;
-    protected updateTextValue(): void;
-    protected updateText(): void;
-    protected showText(): void;
-    protected hideText(): void;
+    protected newOverflowMask(): DBaseOverflowMaskSimple | null;
+    get text(): DTextPiece<VALUE>;
+    protected getText(): DTextPieceImpl<VALUE>;
+    protected newText(): DTextPieceImpl<VALUE>;
+    set text(text: DStateAwareOrValueMightBe<VALUE>);
     protected onReflow(): void;
+    protected getLayouter(): DImagePieceLayouter;
+    protected onReflowTextAndImage(): void;
     protected isRefitable(target: any): target is DRefitable;
     protected applyTitle(): void;
     protected getType(): string;

package/dist/types/wcardinal/ui/d-text-piece-align-impl.d.ts

@@ -0,0 +1,20 @@
+import { DAlignHorizontal } from "./d-align-horizontal";
+import { DAlignVertical } from "./d-align-vertical";
+import { DApplicationTarget } from "./d-application-like";
+import { DTextPieceTextAlignOptions, DThemeTextPiece } from "./d-text-piece";
+import { DTextPieceAlign } from "./d-text-piece-align";
+export interface DTextPieceAlignImplParent extends DApplicationTarget {
+    toDirty(): void;
+}
+export declare class DTextPieceAlignImpl<VALUE> implements DTextPieceAlign {
+    protected _parent: DTextPieceAlignImplParent;
+    protected _vertical: DAlignVertical;
+    protected _horizontal: DAlignHorizontal;
+    constructor(parent: DTextPieceAlignImplParent, theme: DThemeTextPiece<VALUE>, options?: DTextPieceTextAlignOptions);
+    get vertical(): DAlignVertical;
+    set vertical(vertical: keyof typeof DAlignVertical | DAlignVertical);
+    get horizontal(): DAlignHorizontal;
+    set horizontal(horizontal: keyof typeof DAlignHorizontal | DAlignHorizontal);
+    set(vertical?: keyof typeof DAlignVertical | DAlignVertical, horizontal?: keyof typeof DAlignHorizontal | DAlignHorizontal): this;
+    protected onChange(): void;
+}

package/dist/types/wcardinal/ui/d-text-piece-align.d.ts

@@ -0,0 +1,7 @@
+import { DAlignHorizontal } from "./d-align-horizontal";
+import { DAlignVertical } from "./d-align-vertical";
+export interface DTextPieceAlign {
+    vertical: keyof typeof DAlignVertical | DAlignVertical;
+    horizontal: keyof typeof DAlignHorizontal | DAlignHorizontal;
+    set(vertical?: keyof typeof DAlignVertical | DAlignVertical, horizontal?: keyof typeof DAlignHorizontal | DAlignHorizontal): this;
+}

package/dist/types/wcardinal/ui/d-text-piece-impl.d.ts

@@ -0,0 +1,63 @@
+import { DisplayObject, Graphics, utils } from "pixi.js";
+import { DBaseStateSet } from "./d-base-state-set";
+import { DDynamicText } from "./d-dynamic-text";
+import { DDynamicTextStyle } from "./d-dynamic-text-style";
+import { DStateAwareOrValueMightBe } from "./d-state-aware";
+import { DImagePieceLayouter } from "./d-image-piece-layouter";
+import { DTextPiece, DTextPieceFormatter, DTextPieceOptions, DThemeTextPiece } from "./d-text-piece";
+import { DApplicationTarget } from "./d-application-like";
+import { DTextPieceAlign } from "./d-text-piece-align";
+import { DTextPieceStyle } from "./d-text-piece-style";
+import { DTextPieceStyleImpl } from "./d-text-piece-style-impl";
+export interface DTextPieceImplParent extends DApplicationTarget {
+    readonly state: DBaseStateSet;
+    addChild(displayObject: DisplayObject): void;
+    removeChild(displayObject: DisplayObject): void;
+    toDirty(): void;
+    getOverflowMask(): Graphics | null;
+}
+export declare class DTextPieceImpl<VALUE> extends utils.EventEmitter implements DTextPiece<VALUE> {
+    protected _parent: DTextPieceImplParent;
+    protected _theme: DThemeTextPiece<VALUE>;
+    protected _object?: DDynamicText | null;
+    protected _value?: DStateAwareOrValueMightBe<VALUE>;
+    protected _computed?: VALUE;
+    protected _color: DStateAwareOrValueMightBe<number>;
+    protected _alpha: DStateAwareOrValueMightBe<number>;
+    protected _style: DTextPieceStyleImpl;
+    protected _dstyle: DDynamicTextStyle;
+    protected _align: DTextPieceAlign;
+    protected _formatter: DTextPieceFormatter<VALUE>;
+    protected _isVisible: boolean;
+    constructor(parent: DTextPieceImplParent, theme: DThemeTextPiece<VALUE>, options?: DTextPieceOptions<VALUE> | undefined);
+    get value(): DStateAwareOrValueMightBe<VALUE>;
+    set value(value: DStateAwareOrValueMightBe<VALUE>);
+    getValue(): DStateAwareOrValueMightBe<VALUE>;
+    setValue(value: DStateAwareOrValueMightBe<VALUE>, forcibly?: boolean): void;
+    protected onValueChange(forcibly?: boolean): void;
+    compute(forcibly?: boolean): void;
+    get computed(): VALUE | undefined;
+    get formatter(): DTextPieceFormatter<VALUE>;
+    set formatter(formatter: DTextPieceFormatter<VALUE>);
+    get color(): DStateAwareOrValueMightBe<number>;
+    set color(color: DStateAwareOrValueMightBe<number>);
+    get alpha(): DStateAwareOrValueMightBe<number>;
+    set alpha(alpha: DStateAwareOrValueMightBe<number>);
+    protected onColorChange(): void;
+    get align(): DTextPieceAlign;
+    get style(): DTextPieceStyle;
+    get object(): DDynamicText | null | undefined;
+    update(layouter: DImagePieceLayouter): void;
+    protected updateObject(): boolean;
+    protected newComputed(): VALUE | undefined;
+    protected newColor(state: DBaseStateSet): number;
+    protected newAlpha(state: DBaseStateSet): number;
+    protected newObject(): DDynamicText;
+    get visible(): boolean;
+    set visible(visible: boolean);
+    show(): this;
+    hide(): this;
+    isShown(): boolean;
+    protected onComputedChange(): void;
+    destroy(): this;
+}

package/dist/types/wcardinal/ui/d-text-piece-style-impl.d.ts

@@ -0,0 +1,29 @@
+import { DFontStyle, DFontVariant, DFontWeight } from "./d-font";
+import { DTextPieceStyle } from "./d-text-piece-style";
+import { DDynamicTextStyle } from "./d-dynamic-text-style";
+import { DApplicationTarget } from "./d-application-like";
+import { DDynamicTextStyleWordWrap } from "./d-dynamic-text-style-word-wrap";
+export declare class DTextPieceStyleImpl implements DTextPieceStyle {
+    protected _parent: DApplicationTarget;
+    protected _style: DDynamicTextStyle;
+    constructor(parent: DApplicationTarget, style: DDynamicTextStyle);
+    get fontFamily(): string;
+    set fontFamily(fontFamily: string);
+    get fontSize(): number;
+    set fontSize(fontSize: number);
+    get fontStyle(): DFontStyle;
+    set fontStyle(fontStyle: DFontStyle);
+    get fontVariant(): DFontVariant;
+    set fontVariant(fontVariant: DFontVariant);
+    get fontWeight(): DFontWeight;
+    set fontWeight(fontWeight: DFontWeight);
+    get clipping(): boolean;
+    set clipping(clipping: boolean);
+    get fitting(): boolean;
+    set fitting(fitting: boolean);
+    get wordWrap(): DDynamicTextStyleWordWrap;
+    set wordWrap(wordWrap: DDynamicTextStyleWordWrap | keyof typeof DDynamicTextStyleWordWrap);
+    get lineHeight(): number;
+    set lineHeight(lineHeight: number);
+    protected onChange(): void;
+}

package/dist/types/wcardinal/ui/d-text-piece-style.d.ts

@@ -0,0 +1,16 @@
+import { DDynamicTextStyleOptions } from "./d-dynamic-text-style";
+import { DDynamicTextStyleWordWrap } from "./d-dynamic-text-style-word-wrap";
+import { DFontStyle, DFontVariant, DFontWeight } from "./d-font";
+export interface DTextPieceStyleOptions extends DDynamicTextStyleOptions {
+}
+export interface DTextPieceStyle {
+    fontFamily: string;
+    fontSize: number;
+    fontStyle: DFontStyle;
+    fontVariant: DFontVariant;
+    fontWeight: DFontWeight;
+    clipping: boolean;
+    fitting: boolean;
+    wordWrap: DDynamicTextStyleWordWrap | keyof typeof DDynamicTextStyleWordWrap;
+    lineHeight: number;
+}

package/dist/types/wcardinal/ui/d-text-piece.d.ts

@@ -0,0 +1,61 @@
+import { utils } from "pixi.js";
+import { DAlignHorizontal } from "./d-align-horizontal";
+import { DAlignVertical } from "./d-align-vertical";
+import { DBaseStateSet } from "./d-base-state-set";
+import { DDynamicText } from "./d-dynamic-text";
+import { DThemeFont } from "./d-font";
+import { DStateAwareOrValueMightBe } from "./d-state-aware";
+import { DTextPieceAlign } from "./d-text-piece-align";
+import { DTextPieceStyle, DTextPieceStyleOptions } from "./d-text-piece-style";
+import { DDynamicTextStyleWordWrap } from "./d-dynamic-text-style-word-wrap";
+export interface DTextPieceTextAlignOptions {
+    vertical?: keyof typeof DAlignVertical | DAlignVertical;
+    horizontal?: keyof typeof DAlignHorizontal | DAlignHorizontal;
+}
+export type DTextPieceFormatter<VALUE> = (value: VALUE, caller: any) => string;
+export interface DTextPieceOptions<VALUE> {
+    value?: DStateAwareOrValueMightBe<VALUE>;
+    color?: DStateAwareOrValueMightBe<number>;
+    alpha?: DStateAwareOrValueMightBe<number>;
+    style?: DTextPieceStyleOptions;
+    align?: DTextPieceTextAlignOptions;
+    formatter?: DTextPieceFormatter<VALUE>;
+}
+export interface DThemeTextPiece<VALUE> extends DThemeFont {
+    getTextFormatter(): DTextPieceFormatter<VALUE>;
+    /**
+     * Returns a new text value.
+     * Called to initialize a text value if a text value is not given.
+     */
+    newTextValue(): DStateAwareOrValueMightBe<VALUE>;
+    /**
+     * Returns a text value.
+     * Called to get a text vale if there is no text value.
+     *
+     * @param state a state
+     */
+    getTextValue(state: DBaseStateSet): VALUE | undefined;
+    getTextAlignVertical(): DAlignVertical;
+    getTextAlignHorizontal(): DAlignHorizontal;
+    getTextStyleClipping(): boolean;
+    getTextStyleFitting(): boolean;
+    getTextStyleWordWrap(): DDynamicTextStyleWordWrap;
+    isOverflowMaskEnabled(): boolean;
+}
+export interface DTextPiece<VALUE> extends utils.EventEmitter {
+    value: DStateAwareOrValueMightBe<VALUE>;
+    getValue(): DStateAwareOrValueMightBe<VALUE>;
+    setValue(value: DStateAwareOrValueMightBe<VALUE>, forcibly?: boolean): void;
+    compute(forcibly?: boolean): void;
+    formatter: DTextPieceFormatter<VALUE>;
+    readonly computed: VALUE | undefined;
+    color: DStateAwareOrValueMightBe<number>;
+    alpha: DStateAwareOrValueMightBe<number>;
+    readonly align: DTextPieceAlign;
+    readonly style: DTextPieceStyle;
+    readonly object: DDynamicText | null | undefined;
+    show(): this;
+    hide(): this;
+    isShown(): boolean;
+    destroy(): this;
+}