/**
 * ElementComponents are used to construct user interfaces. The {@link type} property can be
 * configured in 3 main ways: as a text element, as an image element or as a group element. If
 * the ElementComponent has a {@link ScreenComponent} ancestor in the hierarchy, it
 * will be transformed with respect to the coordinate system of the screen. If there is no
 * {@link ScreenComponent} ancestor, the ElementComponent will be transformed like any other
 * entity.
 *
 * You should never need to use the ElementComponent constructor directly. To add an
 * ElementComponent to an {@link Entity}, use {@link Entity#addComponent}:
 *
 * ```javascript
 * const entity = new Entity();
 * entity.addComponent('element'); // This defaults to a 'group' element
 * ```
 *
 * To create a simple text-based element:
 *
 * ```javascript
 * entity.addComponent('element', {
 *     anchor: new Vec4(0.5, 0.5, 0.5, 0.5), // centered anchor
 *     fontAsset: fontAsset,
 *     fontSize: 128,
 *     pivot: new Vec2(0.5, 0.5),            // centered pivot
 *     text: 'Hello World!',
 *     type: ELEMENTTYPE_TEXT
 * });
 * ```
 *
 * Once the ElementComponent is added to the entity, you can access it via the
 * {@link Entity#element} property:
 *
 * ```javascript
 * entity.element.color = Color.RED; // Set the element's color to red
 *
 * console.log(entity.element.color);   // Get the element's color and print it
 * ```
 *
 * Relevant Engine API examples:
 *
 * - [Basic text rendering](https://playcanvas.github.io/#/user-interface/text)
 * - [Auto font sizing](https://playcanvas.github.io/#/user-interface/text-auto-font-size)
 * - [Emojis](https://playcanvas.github.io/#/user-interface/text-emojis)
 * - [Text localization](https://playcanvas.github.io/#/user-interface/text-localization)
 * - [Typewriter text](https://playcanvas.github.io/#/user-interface/text-typewriter)
 *
 * @hideconstructor
 * @category User Interface
 */
export class ElementComponent extends Component {
    /**
     * Fired when the mouse is pressed while the cursor is on the component. Only fired when
     * useInput is true. The handler is passed an {@link ElementMouseEvent}.
     *
     * @event
     * @example
     * entity.element.on('mousedown', (event) => {
     *     console.log(`Mouse down event on entity ${entity.name}`);
     * });
     */
    static EVENT_MOUSEDOWN: string;
    /**
     * Fired when the mouse is released while the cursor is on the component. Only fired when
     * useInput is true. The handler is passed an {@link ElementMouseEvent}.
     *
     * @event
     * @example
     * entity.element.on('mouseup', (event) => {
     *     console.log(`Mouse up event on entity ${entity.name}`);
     * });
     */
    static EVENT_MOUSEUP: string;
    /**
     * Fired when the mouse cursor enters the component. Only fired when useInput is true. The
     * handler is passed an {@link ElementMouseEvent}.
     *
     * @event
     * @example
     * entity.element.on('mouseenter', (event) => {
     *     console.log(`Mouse enter event on entity ${entity.name}`);
     * });
     */
    static EVENT_MOUSEENTER: string;
    /**
     * Fired when the mouse cursor leaves the component. Only fired when useInput is true. The
     * handler is passed an {@link ElementMouseEvent}.
     *
     * @event
     * @example
     * entity.element.on('mouseleave', (event) => {
     *     console.log(`Mouse leave event on entity ${entity.name}`);
     * });
     */
    static EVENT_MOUSELEAVE: string;
    /**
     * Fired when the mouse cursor is moved on the component. Only fired when useInput is true. The
     * handler is passed an {@link ElementMouseEvent}.
     *
     * @event
     * @example
     * entity.element.on('mousemove', (event) => {
     *     console.log(`Mouse move event on entity ${entity.name}`);
     * });
     */
    static EVENT_MOUSEMOVE: string;
    /**
     * Fired when the mouse wheel is scrolled on the component. Only fired when useInput is true.
     * The handler is passed an {@link ElementMouseEvent}.
     *
     * @event
     * @example
     * entity.element.on('mousewheel', (event) => {
     *     console.log(`Mouse wheel event on entity ${entity.name}`);
     * });
     */
    static EVENT_MOUSEWHEEL: string;
    /**
     * Fired when the mouse is pressed and released on the component or when a touch starts and
     * ends on the component. Only fired when useInput is true. The handler is passed an
     * {@link ElementMouseEvent} or {@link ElementTouchEvent}.
     *
     * @event
     * @example
     * entity.element.on('click', (event) => {
     *     console.log(`Click event on entity ${entity.name}`);
     * });
     */
    static EVENT_CLICK: string;
    /**
     * Fired when a touch starts on the component. Only fired when useInput is true. The handler is
     * passed an {@link ElementTouchEvent}.
     *
     * @event
     * @example
     * entity.element.on('touchstart', (event) => {
     *     console.log(`Touch start event on entity ${entity.name}`);
     * });
     */
    static EVENT_TOUCHSTART: string;
    /**
     * Fired when a touch ends on the component. Only fired when useInput is true. The handler is
     * passed an {@link ElementTouchEvent}.
     *
     * @event
     * @example
     * entity.element.on('touchend', (event) => {
     *     console.log(`Touch end event on entity ${entity.name}`);
     * });
     */
    static EVENT_TOUCHEND: string;
    /**
     * Fired when a touch moves after it started touching the component. Only fired when useInput
     * is true. The handler is passed an {@link ElementTouchEvent}.
     *
     * @event
     * @example
     * entity.element.on('touchmove', (event) => {
     *     console.log(`Touch move event on entity ${entity.name}`);
     * });
     */
    static EVENT_TOUCHMOVE: string;
    /**
     * Fired when a touch is canceled on the component. Only fired when useInput is true. The
     * handler is passed an {@link ElementTouchEvent}.
     *
     * @event
     * @example
     * entity.element.on('touchcancel', (event) => {
     *     console.log(`Touch cancel event on entity ${entity.name}`);
     * });
     */
    static EVENT_TOUCHCANCEL: string;
    /**
     * Create a new ElementComponent instance.
     *
     * @param {ElementComponentSystem} system - The ComponentSystem that created this Component.
     * @param {Entity} entity - The Entity that this Component is attached to.
     */
    constructor(system: ElementComponentSystem, entity: Entity);
    /**
     * @type {EventHandle|null}
     * @private
     */
    private _evtLayersChanged;
    /**
     * @type {EventHandle|null}
     * @private
     */
    private _evtLayerAdded;
    /**
     * @type {EventHandle|null}
     * @private
     */
    private _evtLayerRemoved;
    _beingInitialized: boolean;
    _anchor: Vec4;
    _localAnchor: Vec4;
    _pivot: Vec2;
    _width: number;
    _calculatedWidth: number;
    _height: number;
    _calculatedHeight: number;
    _margin: Vec4;
    _modelTransform: Mat4;
    _screenToWorld: Mat4;
    _anchorTransform: Mat4;
    _anchorDirty: boolean;
    _parentWorldTransform: Mat4;
    _screenTransform: Mat4;
    _screenCorners: Vec3[];
    _canvasCorners: Vec2[];
    _worldCorners: Vec3[];
    _cornersDirty: boolean;
    _canvasCornersDirty: boolean;
    _worldCornersDirty: boolean;
    /**
     * The Entity with a {@link ScreenComponent} that this component belongs to. This is
     * automatically set when the component is a child of a ScreenComponent.
     *
     * @type {Entity|null}
     */
    screen: Entity | null;
    _type: string;
    _image: ImageElement;
    _text: TextElement;
    _group: any;
    _drawOrder: number;
    _fitMode: string;
    _useInput: boolean;
    _layers: number[];
    _addedModels: any[];
    _batchGroupId: number;
    _offsetReadAt: number;
    _maskOffset: number;
    _maskedBy: any;
    /**
     * @type {number}
     * @private
     */
    private get _absLeft();
    /**
     * @type {number}
     * @private
     */
    private get _absRight();
    /**
     * @type {number}
     * @private
     */
    private get _absTop();
    /**
     * @type {number}
     * @private
     */
    private get _absBottom();
    /**
     * @type {boolean}
     * @private
     */
    private get _hasSplitAnchorsX();
    /**
     * @type {boolean}
     * @private
     */
    private get _hasSplitAnchorsY();
    /**
     * Gets the world space axis-aligned bounding box for this element component.
     *
     * @type {BoundingBox | null}
     */
    get aabb(): BoundingBox | null;
    /**
     * Sets the anchor for this element component. Specifies where the left, bottom, right and top
     * edges of the component are anchored relative to its parent. Each value ranges from 0 to 1.
     * e.g. a value of `[0, 0, 0, 0]` means that the element will be anchored to the bottom left of
     * its parent. A value of `[1, 1, 1, 1]` means it will be anchored to the top right. A split
     * anchor is when the left-right or top-bottom pairs of the anchor are not equal. In that case,
     * the component will be resized to cover that entire area. For example, a value of `[0, 0, 1, 1]`
     * will make the component resize exactly as its parent.
     *
     * @example
     * this.entity.element.anchor = new Vec4(Math.random() * 0.1, 0, 1, 0);
     * @example
     * this.entity.element.anchor = [Math.random() * 0.1, 0, 1, 0];
     *
     * @type {Vec4 | number[]}
     */
    set anchor(value: Readonly<Vec4>);
    /**
     * Gets the anchor for this element component. Use the setter to update the anchor.
     *
     * @type {Readonly<Vec4>}
     */
    get anchor(): Readonly<Vec4>;
    /**
     * Sets the batch group (see {@link BatchGroup}) for this element. Default is -1 (no group).
     *
     * @type {number}
     */
    set batchGroupId(value: number);
    /**
     * Gets the batch group (see {@link BatchGroup}) for this element.
     *
     * @type {number}
     */
    get batchGroupId(): number;
    /**
     * Sets the distance from the bottom edge of the anchor. Can be used in combination with a
     * split anchor to make the component's top edge always be 'top' units away from the top.
     *
     * @type {number}
     */
    set bottom(value: number);
    /**
     * Gets the distance from the bottom edge of the anchor.
     *
     * @type {number}
     */
    get bottom(): number;
    /**
     * Sets the width at which the element will be rendered. In most cases this will be the same as
     * {@link width}. However, in some cases the engine may calculate a different width for the
     * element, such as when the element is under the control of a {@link LayoutGroupComponent}. In
     * these scenarios, `calculatedWidth` may be smaller or larger than the width that was set in
     * the editor.
     *
     * @type {number}
     */
    set calculatedWidth(value: number);
    /**
     * Gets the width at which the element will be rendered.
     *
     * @type {number}
     */
    get calculatedWidth(): number;
    /**
     * Sets the height at which the element will be rendered. In most cases this will be the same
     * as {@link height}. However, in some cases the engine may calculate a different height for
     * the element, such as when the element is under the control of a {@link LayoutGroupComponent}.
     * In these scenarios, `calculatedHeight` may be smaller or larger than the height that was set
     * in the editor.
     *
     * @type {number}
     */
    set calculatedHeight(value: number);
    /**
     * Gets the height at which the element will be rendered.
     *
     * @type {number}
     */
    get calculatedHeight(): number;
    /**
     * Gets the array of 4 {@link Vec2}s that represent the bottom left, bottom right, top right
     * and top left corners of the component in canvas pixels. Only works for screen space element
     * components.
     *
     * @type {Vec2[]}
     */
    get canvasCorners(): Vec2[];
    /**
     * Sets the draw order of the component. A higher value means that the component will be
     * rendered on top of other components.
     *
     * @type {number}
     */
    set drawOrder(value: number);
    /**
     * Gets the draw order of the component.
     *
     * @type {number}
     */
    get drawOrder(): number;
    /**
     * Sets the height of the element as set in the editor. Note that in some cases this may not
     * reflect the true height at which the element is rendered, such as when the element is under
     * the control of a {@link LayoutGroupComponent}. See {@link calculatedHeight} in order to
     * ensure you are reading the true height at which the element will be rendered.
     *
     * @type {number}
     */
    set height(value: number);
    /**
     * Gets the height of the element.
     *
     * @type {number}
     */
    get height(): number;
    /**
     * Sets the array of layer IDs ({@link Layer#id}) to which this element should belong. Don't
     * push, pop, splice or modify this array. If you want to change it, set a new one instead.
     *
     * @type {number[]}
     */
    set layers(value: ReadonlyArray<number>);
    /**
     * Gets the array of layer IDs ({@link Layer#id}) to which this element belongs.
     *
     * @type {ReadonlyArray<number>}
     */
    get layers(): ReadonlyArray<number>;
    /**
     * Sets the distance from the left edge of the anchor. Can be used in combination with a split
     * anchor to make the component's left edge always be 'left' units away from the left.
     *
     * @type {number}
     */
    set left(value: number);
    /**
     * Gets the distance from the left edge of the anchor.
     *
     * @type {number}
     */
    get left(): number;
    /**
     * Sets the distance from the left, bottom, right and top edges of the anchor. For example, if
     * we are using a split anchor like `[0, 0, 1, 1]` and the margin is `[0, 0, 0, 0]` then the
     * component will be the same width and height as its parent.
     *
     * @type {Vec4}
     */
    set margin(value: Readonly<Vec4>);
    /**
     * Gets the distance from the left, bottom, right and top edges of the anchor. Use the setter to
     * update the margin.
     *
     * @type {Readonly<Vec4>}
     */
    get margin(): Readonly<Vec4>;
    /**
     * Gets the entity that is currently masking this element.
     *
     * @type {Entity}
     * @private
     */
    private get maskedBy();
    /**
     * Sets the position of the pivot of the component relative to its anchor. Each value ranges
     * from 0 to 1 where `[0, 0]` is the bottom left and `[1, 1]` is the top right.
     *
     * @example
     * this.entity.element.pivot = [Math.random() * 0.1, Math.random() * 0.1];
     * @example
     * this.entity.element.pivot = new Vec2(Math.random() * 0.1, Math.random() * 0.1);
     *
     * @type {Vec2 | number[]}
     */
    set pivot(value: Readonly<Vec2>);
    /**
     * Gets the position of the pivot of the component relative to its anchor. Use the setter to
     * update the pivot.
     *
     * @type {Readonly<Vec2>}
     */
    get pivot(): Readonly<Vec2>;
    /**
     * Sets the distance from the right edge of the anchor. Can be used in combination with a split
     * anchor to make the component's right edge always be 'right' units away from the right.
     *
     * @type {number}
     */
    set right(value: number);
    /**
     * Gets the distance from the right edge of the anchor.
     *
     * @type {number}
     */
    get right(): number;
    /**
     * Gets the array of 4 {@link Vec3}s that represent the bottom left, bottom right, top right
     * and top left corners of the component relative to its parent {@link ScreenComponent}.
     *
     * @type {Vec3[]}
     */
    get screenCorners(): Vec3[];
    _calcScreenCorners(left: any, bottom: any, right: any, top: any, corners: any): any;
    /**
     * Gets the width of the text rendered by the component. Only works for
     * {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    get textWidth(): number;
    /**
     * Gets the height of the text rendered by the component. Only works for
     * {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    get textHeight(): number;
    /**
     * Sets the distance from the top edge of the anchor. Can be used in combination with a split
     * anchor to make the component's bottom edge always be 'bottom' units away from the bottom.
     *
     * @type {number}
     */
    set top(value: number);
    /**
     * Gets the distance from the top edge of the anchor.
     *
     * @type {number}
     */
    get top(): number;
    /**
     * Sets the type of the ElementComponent. Can be:
     *
     * - {@link ELEMENTTYPE_GROUP}: The component can be used as a layout mechanism to create
     * groups of ElementComponents e.g. panels.
     * - {@link ELEMENTTYPE_IMAGE}: The component will render an image
     * - {@link ELEMENTTYPE_TEXT}: The component will render text
     *
     * @type {string}
     */
    set type(value: string);
    /**
     * Gets the type of the ElementComponent.
     *
     * @type {string}
     */
    get type(): string;
    /**
     * Sets whether the component will receive mouse and touch input events.
     *
     * @type {boolean}
     */
    set useInput(value: boolean);
    /**
     * Gets whether the component will receive mouse and touch input events.
     *
     * @type {boolean}
     */
    get useInput(): boolean;
    /**
     * Sets the fit mode of the element. Controls how the content should be fitted and preserve the
     * aspect ratio of the source texture or sprite. Only works for {@link ELEMENTTYPE_IMAGE}
     * elements. Can be:
     *
     * - {@link FITMODE_STRETCH}: Fit the content exactly to Element's bounding box.
     * - {@link FITMODE_CONTAIN}: Fit the content within the Element's bounding box while
     * preserving its Aspect Ratio.
     * - {@link FITMODE_COVER}: Fit the content to cover the entire Element's bounding box while
     * preserving its Aspect Ratio.
     *
     * @type {string}
     */
    set fitMode(value: string);
    /**
     * Gets the fit mode of the element.
     *
     * @type {string}
     */
    get fitMode(): string;
    /**
     * Sets the width of the element as set in the editor. Note that in some cases this may not
     * reflect the true width at which the element is rendered, such as when the element is under
     * the control of a {@link LayoutGroupComponent}. See {@link calculatedWidth} in order to
     * ensure you are reading the true width at which the element will be rendered.
     *
     * @type {number}
     */
    set width(value: number);
    /**
     * Gets the width of the element.
     *
     * @type {number}
     */
    get width(): number;
    /**
     * Gets the array of 4 {@link Vec3}s that represent the bottom left, bottom right, top right
     * and top left corners of the component in world space. Only works for 3D element components.
     *
     * @type {Vec3[]}
     */
    get worldCorners(): Vec3[];
    /**
     * Sets the size of the font. Measured in the same units as the element's {@link width} and
     * {@link height}, so its on-screen size depends on whether the element is screen-space or in
     * world space. Defaults to 32. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    set fontSize(arg: number);
    /**
     * Gets the size of the font.
     *
     * @type {number}
     */
    get fontSize(): number;
    /**
     * Sets the minimum size that the font can scale to when {@link autoFitWidth} or
     * {@link autoFitHeight} are true. Defaults to 8.
     *
     * @type {number}
     */
    set minFontSize(arg: number);
    /**
     * Gets the minimum size that the font can scale to when {@link autoFitWidth} or
     * {@link autoFitHeight} are true.
     *
     * @type {number}
     */
    get minFontSize(): number;
    /**
     * Sets the maximum size that the font can scale to when {@link autoFitWidth} or
     * {@link autoFitHeight} are true. Defaults to 32.
     *
     * @type {number}
     */
    set maxFontSize(arg: number);
    /**
     * Gets the maximum size that the font can scale to when {@link autoFitWidth} or
     * {@link autoFitHeight} are true.
     *
     * @type {number}
     */
    get maxFontSize(): number;
    /**
     * Sets the maximum number of lines that the Element can wrap to. Any leftover text will be
     * appended to the last line. Set this to null to allow unlimited lines.
     *
     * @type {number|null}
     */
    set maxLines(arg: number | null);
    /**
     * Gets the maximum number of lines that the Element can wrap to. Returns -1 if there is no
     * limit.
     *
     * @type {number|null}
     */
    get maxLines(): number | null;
    /**
     * Sets whether the font size and line height will scale so that the text fits inside the width
     * of the Element. The font size will be scaled between {@link minFontSize} and
     * {@link maxFontSize}. The value of {@link autoFitWidth} will be ignored if {@link autoWidth}
     * is true.
     *
     * @type {boolean}
     */
    set autoFitWidth(arg: boolean);
    /**
     * Gets whether the font size and line height will scale so that the text fits inside the width
     * of the Element.
     *
     * @type {boolean}
     */
    get autoFitWidth(): boolean;
    /**
     * Sets whether the font size and line height will scale so that the text fits inside the
     * height of the Element. The font size will be scaled between {@link minFontSize} and
     * {@link maxFontSize}. The value of {@link autoFitHeight} will be ignored if
     * {@link autoHeight} is true.
     *
     * @type {boolean}
     */
    set autoFitHeight(arg: boolean);
    /**
     * Gets whether the font size and line height will scale so that the text fits inside the
     * height of the Element.
     *
     * @type {boolean}
     */
    get autoFitHeight(): boolean;
    /**
     * Sets the color of the image for {@link ELEMENTTYPE_IMAGE} elements or the color of the text for
     * {@link ELEMENTTYPE_TEXT} elements. Only the RGB channels are used; the alpha channel is ignored,
     * so use {@link opacity} to control transparency.
     *
     * @type {Color}
     */
    set color(arg: Readonly<Color>);
    /**
     * Gets the color of the element. Use the setter to update the color.
     *
     * @type {Readonly<Color>}
     */
    get color(): Readonly<Color>;
    /**
     * Sets the font used for rendering the text. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {Font|CanvasFont}
     */
    set font(arg: Font | CanvasFont);
    /**
     * Gets the font used for rendering the text.
     *
     * @type {Font|CanvasFont}
     */
    get font(): Font | CanvasFont;
    /**
     * Sets the font asset used for rendering the text, as either an {@link Asset} or an asset id.
     * Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {Asset | number | null}
     */
    set fontAsset(arg: Asset | number | null);
    /**
     * Gets the id of the font asset used for rendering the text.
     *
     * @type {Asset | number | null}
     */
    get fontAsset(): Asset | number | null;
    /**
     * Sets the spacing between the letters of the text, as a multiplier on the default character
     * advance, defaulting to 1 (normal spacing). Values below 1 tighten the text and values above 1
     * spread it out. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    set spacing(arg: number);
    /**
     * Gets the spacing between the letters of the text.
     *
     * @type {number}
     */
    get spacing(): number;
    /**
     * Sets the height of each line of text, measured in the same units as {@link fontSize}. This is
     * independent of {@link fontSize}, so it can be used to tighten or loosen vertical line
     * spacing. Defaults to 32. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    set lineHeight(arg: number);
    /**
     * Gets the height of each line of text.
     *
     * @type {number}
     */
    get lineHeight(): number;
    /**
     * Sets whether to automatically wrap lines based on the element width. Only works for
     * {@link ELEMENTTYPE_TEXT} elements, and when {@link autoWidth} is set to false.
     *
     * @type {boolean}
     */
    set wrapLines(arg: boolean);
    /**
     * Gets whether to automatically wrap lines based on the element width.
     *
     * @type {boolean}
     */
    get wrapLines(): boolean;
    /**
     * Gets the lines of rendered text, split by line breaks and word wrapping. Only works for
     * {@link ELEMENTTYPE_TEXT} elements, and is populated when the text is laid out, so it reads as
     * `undefined` until the first update.
     *
     * @type {string[]}
     */
    get lines(): string[];
    /**
     * Sets the horizontal and vertical alignment of the text. Values range from 0 to 1 where
     * `[0, 0]` is the bottom left and `[1, 1]` is the top right. Only works for
     * {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {Vec2}
     */
    set alignment(arg: Vec2);
    /**
     * Gets the horizontal and vertical alignment of the text.
     *
     * @type {Vec2}
     */
    get alignment(): Vec2;
    /**
     * Sets whether to automatically set the width of the component to be the same as the
     * {@link textWidth}. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {boolean}
     */
    set autoWidth(arg: boolean);
    /**
     * Gets whether to automatically set the width of the component to be the same as the
     * {@link textWidth}.
     *
     * @type {boolean}
     */
    get autoWidth(): boolean;
    /**
     * Sets whether to automatically set the height of the component to be the same as the
     * {@link textHeight}. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {boolean}
     */
    set autoHeight(arg: boolean);
    /**
     * Gets whether to automatically set the height of the component to be the same as the
     * {@link textHeight}.
     *
     * @type {boolean}
     */
    get autoHeight(): boolean;
    /**
     * Sets whether to reorder the text for RTL languages. The reordering uses a function
     * registered by `app.systems.element.registerRtlReorder`.
     *
     * @type {boolean}
     */
    set rtlReorder(arg: boolean);
    /**
     * Gets whether to reorder the text for RTL languages.
     *
     * @type {boolean}
     */
    get rtlReorder(): boolean;
    /**
     * Sets whether to convert unicode characters. This uses a function registered by
     * `app.systems.element.registerUnicodeConverter`.
     *
     * @type {boolean}
     */
    set unicodeConverter(arg: boolean);
    /**
     * Gets whether to convert unicode characters.
     *
     * @type {boolean}
     */
    get unicodeConverter(): boolean;
    /**
     * Sets the text to render. Only works for {@link ELEMENTTYPE_TEXT} elements. To override certain
     * text styling properties on a per-character basis, the text can optionally include markup
     * tags contained within square brackets. Supported tags are:
     *
     * 1. `color` - override the element's {@link color} property. Examples:
     *     - `[color="#ff0000"]red text[/color]`
     *     - `[color="#00ff00"]green text[/color]`
     *     - `[color="#0000ff"]blue text[/color]`
     * 2. `outline` - override the element's {@link outlineColor} and {@link outlineThickness}
     * properties. Example:
     *     - `[outline color="#ffffff" thickness="0.5"]text[/outline]`
     * 3. `shadow` - override the element's {@link shadowColor} and {@link shadowOffset}
     * properties. Examples:
     *     - `[shadow color="#ffffff" offset="0.5"]text[/shadow]`
     *     - `[shadow color="#000000" offsetX="0.1" offsetY="0.2"]text[/shadow]`
     *
     * Note that markup tags are only processed if the text element's {@link enableMarkup} property
     * is set to true.
     *
     * @type {string}
     */
    set text(arg: string);
    /**
     * Gets the text to render.
     *
     * @type {string}
     */
    get text(): string;
    /**
     * Sets the localization key to use to get the localized text from {@link Application#i18n}.
     * Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {string}
     */
    set key(arg: string);
    /**
     * Gets the localization key to use to get the localized text from {@link Application#i18n}.
     *
     * @type {string}
     */
    get key(): string;
    /**
     * Sets the texture to render. Only works for {@link ELEMENTTYPE_IMAGE} elements.
     *
     * @type {Texture}
     */
    set texture(arg: Texture);
    /**
     * Gets the texture to render.
     *
     * @type {Texture}
     */
    get texture(): Texture;
    /**
     * Sets the texture asset to render, as either an {@link Asset} or an asset id. Only works for
     * {@link ELEMENTTYPE_IMAGE} elements.
     *
     * @type {Asset | number | null}
     */
    set textureAsset(arg: Asset | number | null);
    /**
     * Gets the id of the texture asset to render.
     *
     * @type {Asset | number | null}
     */
    get textureAsset(): Asset | number | null;
    /**
     * Sets the material to use when rendering an image. Only works for {@link ELEMENTTYPE_IMAGE} elements.
     *
     * @type {Material}
     */
    set material(arg: Material);
    /**
     * Gets the material to use when rendering an image.
     *
     * @type {Material}
     */
    get material(): Material;
    /**
     * Sets the material asset to use when rendering an image, as either an {@link Asset} or an
     * asset id. Only works for {@link ELEMENTTYPE_IMAGE} elements.
     *
     * @type {Asset | number | null}
     */
    set materialAsset(arg: Asset | number | null);
    /**
     * Gets the id of the material asset to use when rendering an image.
     *
     * @type {Asset | number | null}
     */
    get materialAsset(): Asset | number | null;
    /**
     * Sets the sprite to render. Only works for {@link ELEMENTTYPE_IMAGE} elements that can render
     * either a texture or a sprite.
     *
     * @type {Sprite}
     */
    set sprite(arg: Sprite);
    /**
     * Gets the sprite to render.
     *
     * @type {Sprite}
     */
    get sprite(): Sprite;
    /**
     * Sets the sprite asset to render, as either an {@link Asset} or an asset id. Only works for
     * {@link ELEMENTTYPE_IMAGE} elements that can render either a texture or a sprite.
     *
     * @type {Asset | number | null}
     */
    set spriteAsset(arg: Asset | number | null);
    /**
     * Gets the id of the sprite asset to render.
     *
     * @type {Asset | number | null}
     */
    get spriteAsset(): Asset | number | null;
    /**
     * Sets the frame of the sprite to render. Only works for {@link ELEMENTTYPE_IMAGE} elements that have a
     * sprite assigned.
     *
     * @type {number}
     */
    set spriteFrame(arg: number);
    /**
     * Gets the frame of the sprite to render.
     *
     * @type {number}
     */
    get spriteFrame(): number;
    /**
     * Sets the number of pixels that map to one PlayCanvas unit. Only affects
     * {@link ELEMENTTYPE_IMAGE} elements with a sliced or tiled sprite assigned. Set to null to use
     * the sprite's own pixels-per-unit value.
     *
     * @type {number|null}
     */
    set pixelsPerUnit(arg: number | null);
    /**
     * Gets the number of pixels that map to one PlayCanvas unit.
     *
     * @type {number|null}
     */
    get pixelsPerUnit(): number | null;
    /**
     * Sets the opacity of the element. This works for both {@link ELEMENTTYPE_IMAGE} and
     * {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    set opacity(arg: number);
    /**
     * Gets the opacity of the element.
     *
     * @type {number}
     */
    get opacity(): number;
    /**
     * Sets the region of the texture to use in order to render an image. Values range from 0 to 1
     * and indicate u, v, width, height. Only works for {@link ELEMENTTYPE_IMAGE} elements.
     *
     * @type {Vec4}
     */
    set rect(arg: Readonly<Vec4> | null);
    /**
     * Gets the region of the texture to use in order to render an image. Use the setter to update
     * the region.
     *
     * @type {Readonly<Vec4>|null}
     */
    get rect(): Readonly<Vec4> | null;
    /**
     * Sets whether the Image Element should be treated as a mask. Masks do not render into the
     * scene, but instead limit child elements to only be rendered where this element is rendered.
     *
     * @type {boolean}
     */
    set mask(arg: boolean);
    /**
     * Gets whether the Image Element should be treated as a mask.
     *
     * @type {boolean}
     */
    get mask(): boolean;
    /**
     * Sets the text outline effect color and opacity. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {Color}
     */
    set outlineColor(arg: Color);
    /**
     * Gets the text outline effect color and opacity.
     *
     * @type {Color}
     */
    get outlineColor(): Color;
    /**
     * Sets the width of the text outline effect, ranging from 0 (no outline) to 1 (maximum
     * thickness). Defaults to 0. Combine with {@link outlineColor} to style the outline. Only works
     * for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    set outlineThickness(arg: number);
    /**
     * Gets the width of the text outline effect.
     *
     * @type {number}
     */
    get outlineThickness(): number;
    /**
     * Sets the text shadow effect color and opacity. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {Color}
     */
    set shadowColor(arg: Color);
    /**
     * Gets the text shadow effect color and opacity.
     *
     * @type {Color}
     */
    get shadowColor(): Color;
    /**
     * Sets the offset of the text shadow, relative to the text. The shadow is a second copy of the
     * text, tinted with {@link shadowColor} and displaced by this amount. Each component ranges
     * from -1 to 1 and is proportional to the font size, so the shadow stays consistent as the text
     * scales; positive x shifts the shadow right and positive y shifts it up. The shadow is only
     * drawn where it extends past the glyph, so the default of `[0, 0]` produces no visible shadow
     * and a non-zero offset is required to display one. Only works for {@link ELEMENTTYPE_TEXT}
     * elements.
     *
     * @type {Vec2}
     * @example
     * // drop shadow, down and to the right of the text
     * this.entity.element.shadowOffset = new Vec2(0.25, -0.25);
     */
    set shadowOffset(arg: Vec2);
    /**
     * Gets the offset of the text shadow, relative to the text.
     *
     * @type {Vec2}
     */
    get shadowOffset(): Vec2;
    /**
     * Sets whether markup processing is enabled for this element. Only works for
     * {@link ELEMENTTYPE_TEXT} elements. Defaults to false.
     *
     * @type {boolean}
     */
    set enableMarkup(arg: boolean);
    /**
     * Gets whether markup processing is enabled for this element.
     *
     * @type {boolean}
     */
    get enableMarkup(): boolean;
    /**
     * Sets the index of the first character to render. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    set rangeStart(arg: number);
    /**
     * Gets the index of the first character to render.
     *
     * @type {number}
     */
    get rangeStart(): number;
    /**
     * Sets the index of the last character to render. Only works for {@link ELEMENTTYPE_TEXT} elements.
     *
     * @type {number}
     */
    set rangeEnd(arg: number);
    /**
     * Gets the index of the last character to render.
     *
     * @type {number}
     */
    get rangeEnd(): number;
    /** @ignore */
    _setValue(name: any, value: any): void;
    _patch(): void;
    _unpatch(): void;
    /**
     * Patched method for setting the position.
     *
     * @param {number|Vec3} x - The x coordinate or Vec3
     * @param {number} [y] - The y coordinate
     * @param {number} [z] - The z coordinate
     * @private
     */
    private _setPosition;
    /**
     * Patched method for setting the local position.
     *
     * @param {number|Vec3} x - The x coordinate or Vec3
     * @param {number} [y] - The y coordinate
     * @param {number} [z] - The z coordinate
     * @private
     */
    private _setLocalPosition;
    _sync(): void;
    _dirtyLocal: boolean;
    _dirtyWorld: boolean;
    _onInsert(parent: any): void;
    _dirtifyMask(): void;
    _onPrerender(): void;
    _bindScreen(screen: any): void;
    _unbindScreen(screen: any): void;
    _updateScreen(screen: any): void;
    syncMask(depth: any): void;
    _setMaskedBy(mask: any): void;
    _updateMask(currentMask: any, depth: any): void;
    _parseUpToScreen(): {
        screen: any;
        mask: any;
    };
    _onScreenResize(res: any): void;
    _onScreenSpaceChange(): void;
    _onScreenRemove(): void;
    _calculateLocalAnchors(): void;
    getOffsetPosition(x: any, y: any): Vec3;
    onLayersChanged(oldComp: any, newComp: any): void;
    onLayerAdded(layer: any): void;
    onLayerRemoved(layer: any): void;
    onBeforeRemove(): void;
    /**
     * Recalculates these properties:
     *   - `_localAnchor`
     *   - `width`
     *   - `height`
     *   - Local position is updated if anchors are split
     *
     * Assumes these properties are up to date:
     *   - `_margin`
     *
     * @param {boolean} propagateCalculatedWidth - If true, call `_setWidth` instead
     * of `_setCalculatedWidth`
     * @param {boolean} propagateCalculatedHeight - If true, call `_setHeight` instead
     * of `_setCalculatedHeight`
     * @private
     */
    private _calculateSize;
    _sizeDirty: boolean;
    /**
     * Internal set width without updating margin.
     *
     * @param {number} w - The new width.
     * @private
     */
    private _setWidth;
    /**
     * Internal set height without updating margin.
     *
     * @param {number} h - The new height.
     * @private
     */
    private _setHeight;
    /**
     * This method sets the calculated width value and optionally updates the margins.
     *
     * @param {number} value - The new calculated width.
     * @param {boolean} updateMargins - Update margins or not.
     * @private
     */
    private _setCalculatedWidth;
    /**
     * This method sets the calculated height value and optionally updates the margins.
     *
     * @param {number} value - The new calculated height.
     * @param {boolean} updateMargins - Update margins or not.
     * @private
     */
    private _setCalculatedHeight;
    _flagChildrenAsDirty(): void;
    addModelToLayers(model: any): void;
    removeModelFromLayers(model: any): void;
    getMaskOffset(): number;
    isVisibleForCamera(camera: any): boolean;
    _isScreenSpace(): boolean;
    _isScreenCulled(): boolean;
    _dirtyBatch(): void;
}
import { Component } from '../component.js';
import { Vec4 } from '../../../core/math/vec4.js';
import { Vec2 } from '../../../core/math/vec2.js';
import { Mat4 } from '../../../core/math/mat4.js';
import { Vec3 } from '../../../core/math/vec3.js';
import { Entity } from '../../entity.js';
import { ImageElement } from './image-element.js';
import { TextElement } from './text-element.js';
import type { BoundingBox } from '../../../core/shape/bounding-box.js';
import type { Color } from '../../../core/math/color.js';
import type { Font } from '../../../framework/font/font.js';
import type { CanvasFont } from '../../../framework/font/canvas-font.js';
import type { Asset } from '../../asset/asset.js';
import type { Texture } from '../../../platform/graphics/texture.js';
import type { Material } from '../../../scene/materials/material.js';
import type { Sprite } from '../../../scene/sprite.js';
import type { ElementComponentSystem } from './system.js';