@babylonjs/gui 5.0.0-alpha.9 → 5.0.0-beta.1

package/2D/controls/control.d.ts

@@ -1,7 +1,7 @@
 import { Nullable } from "@babylonjs/core/types";
 import { Observable } from "@babylonjs/core/Misc/observable";
 import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
-import { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';
+import { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
 import { Scene } from "@babylonjs/core/scene";
 import { Container } from "./container";
@@ -10,6 +10,7 @@ import { ValueAndUnit } from "../valueAndUnit";
 import { Measure } from "../measure";
 import { Style } from "../style";
 import { Matrix2D, Vector2WithInfo } from "../math2D";
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas";
 /**
  * Root class used for all 2D controls
  * @see https://doc.babylonjs.com/how_to/gui#controls
@@ -30,6 +31,8 @@ export declare class Control {
     parent: Nullable<Container>;
     /** @hidden */
     _currentMeasure: Measure;
+    /** @hidden */
+    _tempPaddingMeasure: Measure;
     private _fontFamily;
     private _fontStyle;
     private _fontWeight;
@@ -62,6 +65,7 @@ export declare class Control {
     _prevCurrentMeasureTransformedIntoGlobalSpace: Measure;
     /** @hidden */
     protected _cachedParentMeasure: Measure;
+    private _descendantsOnlyPadding;
     private _paddingLeft;
     private _paddingRight;
     private _paddingTop;
@@ -86,6 +90,8 @@ export declare class Control {
     private _cachedOffsetY;
     private _isVisible;
     private _isHighlighted;
+    private _highlightColor;
+    protected _highlightLineWidth: number;
     /** @hidden */
     _linkedMesh: Nullable<TransformNode>;
     private _fontSet;
@@ -94,9 +100,12 @@ export declare class Control {
     private _enterCount;
     private _doNotRender;
     private _downPointerIds;
+    private _evaluatedMeasure;
+    private _evaluatedParentMeasure;
     protected _isEnabled: boolean;
     protected _disabledColor: string;
     protected _disabledColorItem: string;
+    protected _isReadOnly: boolean;
     /** @hidden */
     protected _rebuildLayout: boolean;
     /** @hidden */
@@ -111,6 +120,16 @@ export declare class Control {
      * Gets or sets the unique id of the node. Please note that this number will be updated when the control is added to a container
      */
     uniqueId: number;
+    /**
+     * Gets or sets a boolean indicating if the control is readonly (default: false).
+     * A readonly control will still raise pointer events but will not react to them
+     */
+    get isReadOnly(): boolean;
+    set isReadOnly(value: boolean);
+    /**
+     * Gets the transformed measure, that is the bounding box of the control after applying all transformations
+     */
+    get transformedMeasure(): Measure;
     /**
      * Gets or sets an object used to store user defined information for the node
      */
@@ -145,6 +164,7 @@ export declare class Control {
     get shadowOffsetY(): number;
     set shadowOffsetY(value: number);
     private _shadowBlur;
+    private _previousShadowBlur;
     /** Gets or sets a value indicating the amount of blur to use to render the shadow */
     get shadowBlur(): number;
     set shadowBlur(value: number);
@@ -166,36 +186,36 @@ export declare class Control {
      */
     getClassName(): string;
     /**
-    * An event triggered when pointer wheel is scrolled
-    */
+     * An event triggered when pointer wheel is scrolled
+     */
     onWheelObservable: Observable<Vector2>;
     /**
-    * An event triggered when the pointer move over the control.
-    */
+     * An event triggered when the pointer moves over the control.
+     */
     onPointerMoveObservable: Observable<Vector2>;
     /**
-    * An event triggered when the pointer move out of the control.
-    */
+     * An event triggered when the pointer moves out of the control.
+     */
     onPointerOutObservable: Observable<Control>;
     /**
-    * An event triggered when the pointer taps the control
-    */
+     * An event triggered when the pointer taps the control
+     */
     onPointerDownObservable: Observable<Vector2WithInfo>;
     /**
-    * An event triggered when pointer up
-    */
+     * An event triggered when pointer up
+     */
     onPointerUpObservable: Observable<Vector2WithInfo>;
     /**
-    * An event triggered when a control is clicked on
-    */
+     * An event triggered when a control is clicked on
+     */
     onPointerClickObservable: Observable<Vector2WithInfo>;
     /**
-    * An event triggered when pointer enters the control
-    */
+     * An event triggered when pointer enters the control
+     */
     onPointerEnterObservable: Observable<Control>;
     /**
-    * An event triggered when the control is marked as dirty
-    */
+     * An event triggered when the control is marked as dirty
+     */
     onDirtyObservable: Observable<Control>;
     /**
      * An event triggered before drawing the control
@@ -206,8 +226,8 @@ export declare class Control {
      */
     onAfterDrawObservable: Observable<Control>;
     /**
-    * An event triggered when the control has been disposed
-    */
+     * An event triggered when the control has been disposed
+     */
     onDisposeObservable: Observable<Control>;
     /**
      * Get the hosting AdvancedDynamicTexture
@@ -227,34 +247,44 @@ export declare class Control {
     /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
     get alpha(): number;
     set alpha(value: number);
+    /**
+     * Gets or sets a number indicating size of stroke we want to highlight the control with (mostly for debugging purpose)
+     */
+    get highlightLineWidth(): number;
+    set highlightLineWidth(value: number);
     /**
      * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
      */
     get isHighlighted(): boolean;
     set isHighlighted(value: boolean);
+    /**
+     * Gets or sets a string defining the color to use for highlighting this control
+     */
+    get highlightColor(): string;
+    set highlightColor(value: string);
     /** Gets or sets a value indicating the scale factor on X axis (1 by default)
      * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-    */
+     */
     get scaleX(): number;
     set scaleX(value: number);
     /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
      * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-    */
+     */
     get scaleY(): number;
     set scaleY(value: number);
     /** Gets or sets the rotation angle (0 by default)
      * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-    */
+     */
     get rotation(): number;
     set rotation(value: number);
     /** Gets or sets the transformation center on Y axis (0 by default)
      * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-    */
+     */
     get transformCenterY(): number;
     set transformCenterY(value: number);
     /** Gets or sets the transformation center on X axis (0 by default)
      * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-    */
+     */
     get transformCenterX(): number;
     set transformCenterX(value: number);
     /**
@@ -342,6 +372,12 @@ export declare class Control {
      * Gets the current linked mesh (or null if none)
      */
     get linkedMesh(): Nullable<TransformNode>;
+    /**
+     * Gets or sets a value indicating the padding should work like in CSS.
+     * Basically, it will add the padding amount on each side of the parent control for its children.
+     */
+    get descendantsOnlyPadding(): boolean;
+    set descendantsOnlyPadding(value: boolean);
     /**
      * Gets or sets a value indicating the padding to use on the left of the control
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
@@ -354,6 +390,8 @@ export declare class Control {
      */
     get paddingLeftInPixels(): number;
     set paddingLeftInPixels(value: number);
+    /** @hidden */
+    get _paddingLeftInPixels(): number;
     /**
      * Gets or sets a value indicating the padding to use on the right of the control
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
@@ -366,6 +404,8 @@ export declare class Control {
      */
     get paddingRightInPixels(): number;
     set paddingRightInPixels(value: number);
+    /** @hidden */
+    get _paddingRightInPixels(): number;
     /**
      * Gets or sets a value indicating the padding to use on the top of the control
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
@@ -378,6 +418,8 @@ export declare class Control {
      */
     get paddingTopInPixels(): number;
     set paddingTopInPixels(value: number);
+    /** @hidden */
+    get _paddingTopInPixels(): number;
     /**
      * Gets or sets a value indicating the padding to use on the bottom of the control
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
@@ -390,6 +432,8 @@ export declare class Control {
      */
     get paddingBottomInPixels(): number;
     set paddingBottomInPixels(value: number);
+    /** @hidden */
+    get _paddingBottomInPixels(): number;
     /**
      * Gets or sets a value indicating the left coordinate of the control
      * @see https://doc.babylonjs.com/how_to/gui#position-and-size
@@ -451,6 +495,17 @@ export declare class Control {
     /** Gets or sets front color of control if it's disabled */
     get disabledColorItem(): string;
     set disabledColorItem(value: string);
+    /**
+     * Gets/sets the overlap group of the control.
+     * Controls with overlapGroup set to a number can be deoverlapped.
+     * Controls with overlapGroup set to undefined are not deoverlapped.
+     * @see https://doc.babylonjs.com/how_to/gui#deoverlapping
+     */
+    overlapGroup?: number;
+    /**
+     * Gets/sets the deoverlap movement multiplier
+     */
+    overlapDeltaMultiplier?: number;
     /**
      * Creates a new control
      * @param name defines the name of the control
@@ -520,13 +575,13 @@ export declare class Control {
      */
     linkWithMesh(mesh: Nullable<TransformNode>): void;
     /**
-    * Shorthand funtion to set the top, right, bottom, and left padding values on the control.
-    * @param { string | number} paddingTop - The value of the top padding.
-    * @param { string | number} paddingRight - The value of the right padding. If omitted, top is used.
-    * @param { string | number} paddingBottom - The value of the bottom padding. If omitted, top is used.
-    * @param { string | number} paddingLeft - The value of the left padding. If omitted, right is used.
-    * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-    */
+     * Shorthand funtion to set the top, right, bottom, and left padding values on the control.
+     * @param { string | number} paddingTop - The value of the top padding.
+     * @param { string | number} paddingRight - The value of the right padding. If omitted, top is used.
+     * @param { string | number} paddingBottom - The value of the bottom padding. If omitted, top is used.
+     * @param { string | number} paddingLeft - The value of the left padding. If omitted, right is used.
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
     setPadding(paddingTop: string | number, paddingRight?: string | number, paddingBottom?: string | number, paddingLeft?: string | number): void;
     /**
      * Shorthand funtion to set the top, right, bottom, and left padding values in pixels on the control.
@@ -550,6 +605,10 @@ export declare class Control {
     /** @hidden */
     _intersectsRect(rect: Measure): boolean;
     /** @hidden */
+    protected _computeAdditionnalOffsetX(): number;
+    /** @hidden */
+    protected _computeAdditionnalOffsetY(): number;
+    /** @hidden */
     protected invalidateRect(): void;
     /** @hidden */
     _markAsDirty(force?: boolean): void;
@@ -558,35 +617,35 @@ export declare class Control {
     /** @hidden */
     _link(host: AdvancedDynamicTexture): void;
     /** @hidden */
-    protected _transform(context?: CanvasRenderingContext2D): void;
+    protected _transform(context?: ICanvasRenderingContext): void;
     /** @hidden */
-    _renderHighlight(context: CanvasRenderingContext2D): void;
+    _renderHighlight(context: ICanvasRenderingContext): void;
     /** @hidden */
-    _renderHighlightSpecific(context: CanvasRenderingContext2D): void;
+    _renderHighlightSpecific(context: ICanvasRenderingContext): void;
     /** @hidden */
-    protected _applyStates(context: CanvasRenderingContext2D): void;
+    protected _applyStates(context: ICanvasRenderingContext): void;
     /** @hidden */
-    _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+    _layout(parentMeasure: Measure, context: ICanvasRenderingContext): boolean;
     /** @hidden */
-    protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _processMeasures(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     protected _evaluateClippingState(parentMeasure: Measure): void;
     /** @hidden */
     _measure(): void;
     /** @hidden */
-    protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _computeAlignment(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     /** @hidden */
-    protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _preMeasure(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     /** @hidden */
-    protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     /** @hidden */
-    protected _clipForChildren(context: CanvasRenderingContext2D): void;
+    protected _clipForChildren(context: ICanvasRenderingContext): void;
     private static _ClipMeasure;
     private _tmpMeasureA;
     private _clip;
     /** @hidden */
-    _render(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean;
+    _render(context: ICanvasRenderingContext, invalidatedRectangle?: Nullable<Measure>): boolean;
     /** @hidden */
-    _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): void;
+    _draw(context: ICanvasRenderingContext, invalidatedRectangle?: Nullable<Measure>): void;
     /**
      * Tests if a given coordinates belong to the current control
      * @param x defines x coordinate to test
@@ -671,5 +730,5 @@ export declare class Control {
         controlFirst: boolean;
     }) => any;
     /** @hidden */
-    protected static drawEllipse(x: number, y: number, width: number, height: number, context: CanvasRenderingContext2D): void;
+    protected static drawEllipse(x: number, y: number, width: number, height: number, context: ICanvasRenderingContext): void;
 }