UNPKG

babylonjs-gui

Version:

The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.

1,094 lines (1,074 loc) 296 kB
/*Babylon.js GUI*/ // Dependencies for this module: // ../../../../Tools/Gulp/babylonjs declare module 'babylonjs-gui' { export * from "babylonjs-gui/2D"; export * from "babylonjs-gui/3D"; } declare module 'babylonjs-gui/2D' { export * from "babylonjs-gui/2D/controls"; export * from "babylonjs-gui/2D/advancedDynamicTexture"; export * from "babylonjs-gui/2D/adtInstrumentation"; export * from "babylonjs-gui/2D/math2D"; export * from "babylonjs-gui/2D/measure"; export * from "babylonjs-gui/2D/multiLinePoint"; export * from "babylonjs-gui/2D/style"; export * from "babylonjs-gui/2D/valueAndUnit"; } declare module 'babylonjs-gui/3D' { export * from "babylonjs-gui/3D/controls"; export * from "babylonjs-gui/3D/materials"; export * from "babylonjs-gui/3D/gui3DManager"; export * from "babylonjs-gui/3D/vector3WithInfo"; } declare module 'babylonjs-gui/2D/controls' { export * from "babylonjs-gui/2D/controls/button"; export * from "babylonjs-gui/2D/controls/checkbox"; export * from "babylonjs-gui/2D/controls/colorpicker"; export * from "babylonjs-gui/2D/controls/container"; export * from "babylonjs-gui/2D/controls/control"; export * from "babylonjs-gui/2D/controls/ellipse"; export * from "babylonjs-gui/2D/controls/grid"; export * from "babylonjs-gui/2D/controls/image"; export * from "babylonjs-gui/2D/controls/inputText"; export * from "babylonjs-gui/2D/controls/inputPassword"; export * from "babylonjs-gui/2D/controls/line"; export * from "babylonjs-gui/2D/controls/multiLine"; export * from "babylonjs-gui/2D/controls/radioButton"; export * from "babylonjs-gui/2D/controls/stackPanel"; export * from "babylonjs-gui/2D/controls/selector"; export * from "babylonjs-gui/2D/controls/scrollViewers/scrollViewer"; export * from "babylonjs-gui/2D/controls/textBlock"; export * from "babylonjs-gui/2D/controls/virtualKeyboard"; export * from "babylonjs-gui/2D/controls/rectangle"; export * from "babylonjs-gui/2D/controls/displayGrid"; export * from "babylonjs-gui/2D/controls/sliders/baseSlider"; export * from "babylonjs-gui/2D/controls/sliders/slider"; export * from "babylonjs-gui/2D/controls/sliders/imageBasedSlider"; export * from "babylonjs-gui/2D/controls/statics"; } declare module 'babylonjs-gui/2D/advancedDynamicTexture' { import { DynamicTexture, Nullable, Layer, Viewport, Scene, Vector3, Matrix, Vector2, AbstractMesh, Observable, ClipboardInfo } from 'babylonjs'; import { Container } from "babylonjs-gui/2D/controls/container"; import { Control } from "babylonjs-gui/2D/controls/control"; import { Style } from "babylonjs-gui/2D/style"; /** * Interface used to define a control that can receive focus */ export interface IFocusableControl { /** * Function called when the control receives the focus */ onFocus(): void; /** * Function called when the control loses the focus */ onBlur(): void; /** * Function called to let the control handle keyboard events * @param evt defines the current keyboard event */ processKeyboard(evt: KeyboardEvent): void; /** * Function called to get the list of controls that should not steal the focus from this control * @returns an array of controls */ keepsFocusWith(): Nullable<Control[]>; } /** * Class used to create texture to support 2D GUI elements * @see http://doc.babylonjs.com/how_to/gui */ export class AdvancedDynamicTexture extends DynamicTexture { /** @hidden */ _rootContainer: Container; /** @hidden */ _lastPickedControl: Control; /** @hidden */ _lastControlOver: { [pointerId: number]: Control; }; /** @hidden */ _lastControlDown: { [pointerId: number]: Control; }; /** @hidden */ _capturingControl: { [pointerId: number]: Control; }; /** @hidden */ _shouldBlockPointer: boolean; /** @hidden */ _layerToDispose: Nullable<Layer>; /** @hidden */ _linkedControls: Control[]; /** * Observable event triggered each time an clipboard event is received from the rendering canvas */ onClipboardObservable: Observable<ClipboardInfo>; /** * Observable event triggered each time a pointer down is intercepted by a control */ onControlPickedObservable: Observable<Control>; /** * Observable event triggered before layout is evaluated */ onBeginLayoutObservable: Observable<AdvancedDynamicTexture>; /** * Observable event triggered after the layout was evaluated */ onEndLayoutObservable: Observable<AdvancedDynamicTexture>; /** * Observable event triggered before the texture is rendered */ onBeginRenderObservable: Observable<AdvancedDynamicTexture>; /** * Observable event triggered after the texture was rendered */ onEndRenderObservable: Observable<AdvancedDynamicTexture>; /** * Gets or sets a boolean defining if alpha is stored as premultiplied */ premulAlpha: boolean; /** * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger). * Useful when you want more antialiasing */ renderScale: number; /** Gets or sets the background color */ background: string; /** * Gets or sets the ideal width used to design controls. * The GUI will then rescale everything accordingly * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling */ idealWidth: number; /** * Gets or sets the ideal height used to design controls. * The GUI will then rescale everything accordingly * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling */ idealHeight: number; /** * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling */ useSmallestIdeal: boolean; /** * Gets or sets a boolean indicating if adaptive scaling must be used * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling */ renderAtIdealSize: boolean; /** * Gets the underlying layer used to render the texture when in fullscreen mode */ readonly layer: Nullable<Layer>; /** * Gets the root container control */ readonly rootContainer: Container; /** * Returns an array containing the root container. * This is mostly used to let the Inspector introspects the ADT * @returns an array containing the rootContainer */ getChildren(): Array<Container>; /** * Will return all controls that are inside this texture * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored * @return all child controls */ getDescendants(directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): Control[]; /** * Gets or sets the current focused control */ focusedControl: Nullable<IFocusableControl>; /** * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode */ isForeground: boolean; /** * Gets or set information about clipboardData */ clipboardData: string; /** * Creates a new AdvancedDynamicTexture * @param name defines the name of the texture * @param width defines the width of the texture * @param height defines the height of the texture * @param scene defines the hosting scene * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default) * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default) */ constructor(name: string, width: number | undefined, height: number | undefined, scene: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number); /** * Get the current class name of the texture useful for serialization or dynamic coding. * @returns "AdvancedDynamicTexture" */ getClassName(): string; /** * Function used to execute a function on all controls * @param func defines the function to execute * @param container defines the container where controls belong. If null the root container will be used */ executeOnAllControls(func: (control: Control) => void, container?: Container): void; /** * Invalidates a rectangle area on the gui texture * @param minX left most position of the rectangle to invalidate in pixels * @param minY top most position of the rectangle to invalidate in pixels * @param maxX right most position of the rectangle to invalidate in pixels * @param maxY bottom most position of the rectangle to invalidate in pixels */ invalidateRect(minX: number, minY: number, maxX: number, maxY: number): void; /** * Marks the texture as dirty forcing a complete update */ markAsDirty(): void; /** * Helper function used to create a new style * @returns a new style * @see http://doc.babylonjs.com/how_to/gui#styles */ createStyle(): Style; /** * Adds a new control to the root container * @param control defines the control to add * @returns the current texture */ addControl(control: Control): AdvancedDynamicTexture; /** * Removes a control from the root container * @param control defines the control to remove * @returns the current texture */ removeControl(control: Control): AdvancedDynamicTexture; /** * Release all resources */ dispose(): void; /** @hidden */ _getGlobalViewport(scene: Scene): Viewport; /** * Get screen coordinates for a vector3 * @param position defines the position to project * @param worldMatrix defines the world matrix to use * @returns the projected position */ getProjectedPosition(position: Vector3, worldMatrix: Matrix): Vector2; /** @hidden */ _changeCursor(cursor: string): void; /** @hidden */ _registerLastControlDown(control: Control, pointerId: number): void; /** @hidden */ _cleanControlAfterRemovalFromList(list: { [pointerId: number]: Control; }, control: Control): void; /** @hidden */ _cleanControlAfterRemoval(control: Control): void; /** Attach to all scene events required to support pointer events */ attach(): void; /** * Register the clipboard Events onto the canvas */ registerClipboardEvents(): void; /** * Unregister the clipboard Events from the canvas */ unRegisterClipboardEvents(): void; /** * Connect the texture to a hosting mesh to enable interactions * @param mesh defines the mesh to attach to * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well */ attachToMesh(mesh: AbstractMesh, supportPointerMove?: boolean): void; /** * Move the focus to a specific control * @param control defines the control which will receive the focus */ moveFocusToControl(control: IFocusableControl): void; /** * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh) * @param mesh defines the mesh which will receive the texture * @param width defines the texture width (1024 by default) * @param height defines the texture height (1024 by default) * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default) * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default) * @returns a new AdvancedDynamicTexture */ static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean): AdvancedDynamicTexture; /** * Creates a new AdvancedDynamicTexture in fullscreen mode. * In this mode the texture will rely on a layer for its rendering. * This allows it to be treated like any other layer. * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well. * LayerMask is set through advancedTexture.layer.layerMask * @param name defines name for the texture * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true) * @param scene defines the hsoting scene * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default) * @returns a new AdvancedDynamicTexture */ static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Nullable<Scene>, sampling?: number): AdvancedDynamicTexture; } } declare module 'babylonjs-gui/2D/adtInstrumentation' { import { IDisposable, PerfCounter } from "babylonjs"; import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture"; /** * This class can be used to get instrumentation data from a AdvancedDynamicTexture object */ export class AdvancedDynamicTextureInstrumentation implements IDisposable { /** * Define the instrumented AdvancedDynamicTexture. */ texture: AdvancedDynamicTexture; /** * Gets the perf counter used to capture render time */ readonly renderTimeCounter: PerfCounter; /** * Gets the perf counter used to capture layout time */ readonly layoutTimeCounter: PerfCounter; /** * Enable or disable the render time capture */ captureRenderTime: boolean; /** * Enable or disable the layout time capture */ captureLayoutTime: boolean; /** * Instantiates a new advanced dynamic texture instrumentation. * This class can be used to get instrumentation data from an AdvancedDynamicTexture object * @param texture Defines the AdvancedDynamicTexture to instrument */ constructor( /** * Define the instrumented AdvancedDynamicTexture. */ texture: AdvancedDynamicTexture); /** * Dispose and release associated resources. */ dispose(): void; } } declare module 'babylonjs-gui/2D/math2D' { import { Vector2, Nullable } from "babylonjs"; /** * Class used to transport Vector2 information for pointer events */ export class Vector2WithInfo extends Vector2 { /** defines the current mouse button index */ buttonIndex: number; /** * Creates a new Vector2WithInfo * @param source defines the vector2 data to transport * @param buttonIndex defines the current mouse button index */ constructor(source: Vector2, /** defines the current mouse button index */ buttonIndex?: number); } /** Class used to provide 2D matrix features */ export class Matrix2D { /** Gets the internal array of 6 floats used to store matrix data */ m: Float32Array; /** * Creates a new matrix * @param m00 defines value for (0, 0) * @param m01 defines value for (0, 1) * @param m10 defines value for (1, 0) * @param m11 defines value for (1, 1) * @param m20 defines value for (2, 0) * @param m21 defines value for (2, 1) */ constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number); /** * Fills the matrix from direct values * @param m00 defines value for (0, 0) * @param m01 defines value for (0, 1) * @param m10 defines value for (1, 0) * @param m11 defines value for (1, 1) * @param m20 defines value for (2, 0) * @param m21 defines value for (2, 1) * @returns the current modified matrix */ fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D; /** * Gets matrix determinant * @returns the determinant */ determinant(): number; /** * Inverses the matrix and stores it in a target matrix * @param result defines the target matrix * @returns the current matrix */ invertToRef(result: Matrix2D): Matrix2D; /** * Multiplies the current matrix with another one * @param other defines the second operand * @param result defines the target matrix * @returns the current matrix */ multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D; /** * Applies the current matrix to a set of 2 floats and stores the result in a vector2 * @param x defines the x coordinate to transform * @param y defines the x coordinate to transform * @param result defines the target vector2 * @returns the current matrix */ transformCoordinates(x: number, y: number, result: Vector2): Matrix2D; /** * Creates an identity matrix * @returns a new matrix */ static Identity(): Matrix2D; /** * Creates a translation matrix and stores it in a target matrix * @param x defines the x coordinate of the translation * @param y defines the y coordinate of the translation * @param result defines the target matrix */ static TranslationToRef(x: number, y: number, result: Matrix2D): void; /** * Creates a scaling matrix and stores it in a target matrix * @param x defines the x coordinate of the scaling * @param y defines the y coordinate of the scaling * @param result defines the target matrix */ static ScalingToRef(x: number, y: number, result: Matrix2D): void; /** * Creates a rotation matrix and stores it in a target matrix * @param angle defines the rotation angle * @param result defines the target matrix */ static RotationToRef(angle: number, result: Matrix2D): void; /** * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix * @param tx defines the x coordinate of the translation * @param ty defines the y coordinate of the translation * @param angle defines the rotation angle * @param scaleX defines the x coordinate of the scaling * @param scaleY defines the y coordinate of the scaling * @param parentMatrix defines the parent matrix to multiply by (can be null) * @param result defines the target matrix */ static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: Nullable<Matrix2D>, result: Matrix2D): void; } } declare module 'babylonjs-gui/2D/measure' { /** * Class used to store 2D control sizes */ export class Measure { /** defines left coordinate */ left: number; /** defines top coordinate */ top: number; /** defines width dimension */ width: number; /** defines height dimension */ height: number; /** * Creates a new measure * @param left defines left coordinate * @param top defines top coordinate * @param width defines width dimension * @param height defines height dimension */ constructor( /** defines left coordinate */ left: number, /** defines top coordinate */ top: number, /** defines width dimension */ width: number, /** defines height dimension */ height: number); /** * Copy from another measure * @param other defines the other measure to copy from */ copyFrom(other: Measure): void; /** * Copy from a group of 4 floats * @param left defines left coordinate * @param top defines top coordinate * @param width defines width dimension * @param height defines height dimension */ copyFromFloats(left: number, top: number, width: number, height: number): void; /** * Check equality between this measure and another one * @param other defines the other measures * @returns true if both measures are equals */ isEqualsTo(other: Measure): boolean; /** * Creates an empty measure * @returns a new measure */ static Empty(): Measure; } } declare module 'babylonjs-gui/2D/multiLinePoint' { import { MultiLine } from "babylonjs-gui/2D/controls/multiLine"; import { Control } from "babylonjs-gui/2D/controls/control"; import { AbstractMesh, Nullable, Vector2 } from "babylonjs"; /** * Class used to store a point for a MultiLine object. * The point can be pure 2D coordinates, a mesh or a control */ export class MultiLinePoint { /** @hidden */ _point: Vector2; /** * Creates a new MultiLinePoint * @param multiLine defines the source MultiLine object */ constructor(multiLine: MultiLine); /** Gets or sets x coordinate */ x: string | number; /** Gets or sets y coordinate */ y: string | number; /** Gets or sets the control associated with this point */ control: Nullable<Control>; /** Gets or sets the mesh associated with this point */ mesh: Nullable<AbstractMesh>; /** Resets links */ resetLinks(): void; /** * Gets a translation vector * @returns the translation vector */ translate(): Vector2; /** Release associated resources */ dispose(): void; } } declare module 'babylonjs-gui/2D/style' { import { IDisposable, Observable } from "babylonjs"; import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture"; import { ValueAndUnit } from "babylonjs-gui/2D/valueAndUnit"; /** * Define a style used by control to automatically setup properties based on a template. * Only support font related properties so far */ export class Style implements IDisposable { /** @hidden */ _host: AdvancedDynamicTexture; /** @hidden */ _fontSize: ValueAndUnit; /** * Observable raised when the style values are changed */ onChangedObservable: Observable<Style>; /** * Creates a new style object * @param host defines the AdvancedDynamicTexture which hosts this style */ constructor(host: AdvancedDynamicTexture); /** * Gets or sets the font size */ fontSize: string | number; /** * Gets or sets the font family */ fontFamily: string; /** * Gets or sets the font style */ fontStyle: string; /** Gets or sets font weight */ fontWeight: string; /** Dispose all associated resources */ dispose(): void; } } declare module 'babylonjs-gui/2D/valueAndUnit' { import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture"; /** * Class used to specific a value and its associated unit */ export class ValueAndUnit { /** defines the unit to store */ unit: number; /** defines a boolean indicating if the value can be negative */ negativeValueAllowed: boolean; /** * Gets or sets a value indicating that this value will not scale accordingly with adaptive scaling property * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling */ ignoreAdaptiveScaling: boolean; /** * Creates a new ValueAndUnit * @param value defines the value to store * @param unit defines the unit to store * @param negativeValueAllowed defines a boolean indicating if the value can be negative */ constructor(value: number, /** defines the unit to store */ unit?: number, /** defines a boolean indicating if the value can be negative */ negativeValueAllowed?: boolean); /** Gets a boolean indicating if the value is a percentage */ readonly isPercentage: boolean; /** Gets a boolean indicating if the value is store as pixel */ readonly isPixel: boolean; /** Gets direct internal value */ readonly internalValue: number; /** * Gets value as pixel * @param host defines the root host * @param refValue defines the reference value for percentages * @returns the value as pixel */ getValueInPixel(host: AdvancedDynamicTexture, refValue: number): number; /** * Update the current value and unit. This should be done cautiously as the GUi won't be marked as dirty with this function. * @param value defines the value to store * @param unit defines the unit to store * @returns the current ValueAndUnit */ updateInPlace(value: number, unit?: number): ValueAndUnit; /** * Gets the value accordingly to its unit * @param host defines the root host * @returns the value */ getValue(host: AdvancedDynamicTexture): number; /** * Gets a string representation of the value * @param host defines the root host * @returns a string */ toString(host: AdvancedDynamicTexture): string; /** * Store a value parsed from a string * @param source defines the source string * @returns true if the value was successfully parsed */ fromString(source: string | number): boolean; /** UNITMODE_PERCENTAGE */ static readonly UNITMODE_PERCENTAGE: number; /** UNITMODE_PIXEL */ static readonly UNITMODE_PIXEL: number; } } declare module 'babylonjs-gui/3D/controls' { export * from "babylonjs-gui/3D/controls/abstractButton3D"; export * from "babylonjs-gui/3D/controls/button3D"; export * from "babylonjs-gui/3D/controls/container3D"; export * from "babylonjs-gui/3D/controls/control3D"; export * from "babylonjs-gui/3D/controls/cylinderPanel"; export * from "babylonjs-gui/3D/controls/holographicButton"; export * from "babylonjs-gui/3D/controls/meshButton3D"; export * from "babylonjs-gui/3D/controls/planePanel"; export * from "babylonjs-gui/3D/controls/scatterPanel"; export * from "babylonjs-gui/3D/controls/spherePanel"; export * from "babylonjs-gui/3D/controls/stackPanel3D"; export * from "babylonjs-gui/3D/controls/volumeBasedPanel"; } declare module 'babylonjs-gui/3D/materials' { export * from "babylonjs-gui/3D/materials/fluentMaterial"; } declare module 'babylonjs-gui/3D/gui3DManager' { import { IDisposable, Scene, Nullable, UtilityLayerRenderer, Observable, Vector3, Material } from "babylonjs"; import { Container3D } from "babylonjs-gui/3D/controls/container3D"; import { Control3D } from "babylonjs-gui/3D/controls/control3D"; /** * Class used to manage 3D user interface * @see http://doc.babylonjs.com/how_to/gui3d */ export class GUI3DManager implements IDisposable { /** @hidden */ _lastPickedControl: Control3D; /** @hidden */ _lastControlOver: { [pointerId: number]: Control3D; }; /** @hidden */ _lastControlDown: { [pointerId: number]: Control3D; }; /** * Observable raised when the point picked by the pointer events changed */ onPickedPointChangedObservable: Observable<Nullable<Vector3>>; /** @hidden */ _sharedMaterials: { [key: string]: Material; }; /** Gets the hosting scene */ readonly scene: Scene; /** Gets associated utility layer */ readonly utilityLayer: Nullable<UtilityLayerRenderer>; /** * Creates a new GUI3DManager * @param scene */ constructor(scene?: Scene); /** * Gets the root container */ readonly rootContainer: Container3D; /** * Gets a boolean indicating if the given control is in the root child list * @param control defines the control to check * @returns true if the control is in the root child list */ containsControl(control: Control3D): boolean; /** * Adds a control to the root child list * @param control defines the control to add * @returns the current manager */ addControl(control: Control3D): GUI3DManager; /** * Removes a control from the root child list * @param control defines the control to remove * @returns the current container */ removeControl(control: Control3D): GUI3DManager; /** * Releases all associated resources */ dispose(): void; } } declare module 'babylonjs-gui/3D/vector3WithInfo' { import { Vector3 } from "babylonjs"; /** * Class used to transport Vector3 information for pointer events */ export class Vector3WithInfo extends Vector3 { /** defines the current mouse button index */ buttonIndex: number; /** * Creates a new Vector3WithInfo * @param source defines the vector3 data to transport * @param buttonIndex defines the current mouse button index */ constructor(source: Vector3, /** defines the current mouse button index */ buttonIndex?: number); } } declare module 'babylonjs-gui/2D/controls/button' { import { Rectangle } from "babylonjs-gui/2D/controls/rectangle"; import { Control } from "babylonjs-gui/2D/controls/control"; import { TextBlock } from "babylonjs-gui/2D/controls/textBlock"; import { Image } from "babylonjs-gui/2D/controls/image"; import { Vector2, Nullable } from "babylonjs"; /** * Class used to create 2D buttons */ export class Button extends Rectangle { name?: string | undefined; /** * Function called to generate a pointer enter animation */ pointerEnterAnimation: () => void; /** * Function called to generate a pointer out animation */ pointerOutAnimation: () => void; /** * Function called to generate a pointer down animation */ pointerDownAnimation: () => void; /** * Function called to generate a pointer up animation */ pointerUpAnimation: () => void; /** * Returns the image part of the button (if any) */ readonly image: Nullable<Image>; /** * Returns the image part of the button (if any) */ readonly textBlock: Nullable<TextBlock>; /** * Creates a new Button * @param name defines the name of the button */ constructor(name?: string | undefined); protected _getTypeName(): string; /** @hidden */ _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean; /** @hidden */ _onPointerEnter(target: Control): boolean; /** @hidden */ _onPointerOut(target: Control): void; /** @hidden */ _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean; /** @hidden */ _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void; /** * Creates a new button made with an image and a text * @param name defines the name of the button * @param text defines the text of the button * @param imageUrl defines the url of the image * @returns a new Button */ static CreateImageButton(name: string, text: string, imageUrl: string): Button; /** * Creates a new button made with an image * @param name defines the name of the button * @param imageUrl defines the url of the image * @returns a new Button */ static CreateImageOnlyButton(name: string, imageUrl: string): Button; /** * Creates a new button made with a text * @param name defines the name of the button * @param text defines the text of the button * @returns a new Button */ static CreateSimpleButton(name: string, text: string): Button; /** * Creates a new button made with an image and a centered text * @param name defines the name of the button * @param text defines the text of the button * @param imageUrl defines the url of the image * @returns a new Button */ static CreateImageWithCenterTextButton(name: string, text: string, imageUrl: string): Button; } } declare module 'babylonjs-gui/2D/controls/checkbox' { import { Control } from "babylonjs-gui/2D/controls/control"; import { Observable, Vector2 } from "babylonjs"; import { StackPanel } from "babylonjs-gui/2D/controls/stackPanel"; /** * Class used to represent a 2D checkbox */ export class Checkbox extends Control { name?: string | undefined; /** Gets or sets border thickness */ thickness: number; /** * Observable raised when isChecked property changes */ onIsCheckedChangedObservable: Observable<boolean>; /** Gets or sets a value indicating the ratio between overall size and check size */ checkSizeRatio: number; /** Gets or sets background color */ background: string; /** Gets or sets a boolean indicating if the checkbox is checked or not */ isChecked: boolean; /** * Creates a new CheckBox * @param name defines the control name */ constructor(name?: string | undefined); protected _getTypeName(): string; /** @hidden */ _draw(context: CanvasRenderingContext2D): void; /** @hidden */ _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean; /** * Utility function to easily create a checkbox with a header * @param title defines the label to use for the header * @param onValueChanged defines the callback to call when value changes * @returns a StackPanel containing the checkbox and a textBlock */ static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel; } } declare module 'babylonjs-gui/2D/controls/colorpicker' { import { Control } from "babylonjs-gui/2D/controls/control"; import { Color3, Observable, Vector2 } from "babylonjs"; import { Measure } from "babylonjs-gui/2D/measure"; /** Class used to create color pickers */ export class ColorPicker extends Control { name?: string | undefined; /** * Observable raised when the value changes */ onValueChangedObservable: Observable<Color3>; /** Gets or sets the color of the color picker */ value: Color3; /** * Gets or sets control width * @see http://doc.babylonjs.com/how_to/gui#position-and-size */ width: string | number; /** Gets or sets control height */ height: string | number; /** Gets or sets control size */ size: string | number; /** * Creates a new ColorPicker * @param name defines the control name */ constructor(name?: string | undefined); protected _getTypeName(): string; /** @hidden */ protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void; /** @hidden */ _draw(context: CanvasRenderingContext2D): void; _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean; _onPointerMove(target: Control, coordinates: Vector2): void; _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void; } } declare module 'babylonjs-gui/2D/controls/container' { import { Control } from "babylonjs-gui/2D/controls/control"; import { Measure } from "babylonjs-gui/2D/measure"; import { Nullable } from "babylonjs"; import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture"; /** * Root class for 2D containers * @see http://doc.babylonjs.com/how_to/gui#containers */ export class Container extends Control { name?: string | undefined; /** @hidden */ protected _children: Control[]; /** @hidden */ protected _measureForChildren: Measure; /** @hidden */ protected _background: string; /** @hidden */ protected _adaptWidthToChildren: boolean; /** @hidden */ protected _adaptHeightToChildren: boolean; /** Gets or sets a boolean indicating if the container should try to adapt to its children height */ adaptHeightToChildren: boolean; /** Gets or sets a boolean indicating if the container should try to adapt to its children width */ adaptWidthToChildren: boolean; /** Gets or sets background color */ background: string; /** Gets the list of children */ readonly children: Control[]; /** * Creates a new Container * @param name defines the name of the container */ constructor(name?: string | undefined); protected _getTypeName(): string; _flagDescendantsAsMatrixDirty(): void; /** * Gets a child using its name * @param name defines the child name to look for * @returns the child control if found */ getChildByName(name: string): Nullable<Control>; /** * Gets a child using its type and its name * @param name defines the child name to look for * @param type defines the child type to look for * @returns the child control if found */ getChildByType(name: string, type: string): Nullable<Control>; /** * Search for a specific control in children * @param control defines the control to look for * @returns true if the control is in child list */ containsControl(control: Control): boolean; /** * Adds a new control to the current container * @param control defines the control to add * @returns the current container */ addControl(control: Nullable<Control>): Container; /** * Removes all controls from the current container * @returns the current container */ clearControls(): Container; /** * Removes a control from the current container * @param control defines the control to remove * @returns the current container */ removeControl(control: Control): Container; /** @hidden */ _reOrderControl(control: Control): void; /** @hidden */ _offsetLeft(offset: number): void; /** @hidden */ _offsetTop(offset: number): void; /** @hidden */ _markAllAsDirty(): void; /** @hidden */ protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void; /** @hidden */ _link(host: AdvancedDynamicTexture): void; /** @hidden */ protected _beforeLayout(): void; /** @hidden */ _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean; protected _postMeasure(): void; /** @hidden */ _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void; /** @hidden */ _getDescendants(results: Control[], directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): void; /** @hidden */ _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean; /** @hidden */ protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void; /** Releases associated resources */ dispose(): void; } } declare module 'babylonjs-gui/2D/controls/control' { import { Container } from "babylonjs-gui/2D/controls/container"; import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture"; import { ValueAndUnit } from "babylonjs-gui/2D/valueAndUnit"; import { Nullable, Vector2, AbstractMesh, Observable, Vector3, Scene } from "babylonjs"; import { Measure } from "babylonjs-gui/2D/measure"; import { Style } from "babylonjs-gui/2D/style"; import { Matrix2D, Vector2WithInfo } from "babylonjs-gui/2D/math2D"; /** * Root class used for all 2D controls * @see http://doc.babylonjs.com/how_to/gui#controls */ export class Control { /** defines the name of the control */ name?: string | undefined; /** * Gets or sets a boolean indicating if alpha must be an inherited value (false by default) */ static AllowAlphaInheritance: boolean; /** @hidden */ _host: AdvancedDynamicTexture; /** Gets or sets the control parent */ parent: Nullable<Container>; /** @hidden */ _currentMeasure: Measure; /** @hidden */ _width: ValueAndUnit; /** @hidden */ _height: ValueAndUnit; /** @hidden */ protected _fontOffset: { ascent: number; height: number; descent: number; }; /** @hidden */ protected _horizontalAlignment: number; /** @hidden */ protected _verticalAlignment: number; /** @hidden */ protected _isDirty: boolean; /** @hidden */ protected _wasDirty: boolean; /** @hidden */ _tempParentMeasure: Measure; /** @hidden */ protected _cachedParentMeasure: Measure; /** @hidden */ _left: ValueAndUnit; /** @hidden */ _top: ValueAndUni