declare module BABYLON.GUI { /** * This class can be used to get instrumentation data from a AdvancedDynamicTexture object */ export class AdvancedDynamicTextureInstrumentation implements BABYLON.IDisposable { /** * Define the instrumented AdvancedDynamicTexture. */ texture: AdvancedDynamicTexture; private _captureRenderTime; private _renderTime; private _captureLayoutTime; private _layoutTime; private _onBeginRenderObserver; private _onEndRenderObserver; private _onBeginLayoutObserver; private _onEndLayoutObserver; /** * Gets the perf counter used to capture render time */ get renderTimeCounter(): BABYLON.PerfCounter; /** * Gets the perf counter used to capture layout time */ get layoutTimeCounter(): BABYLON.PerfCounter; /** * Enable or disable the render time capture */ get captureRenderTime(): boolean; set captureRenderTime(value: boolean); /** * Enable or disable the layout time capture */ get captureLayoutTime(): boolean; set captureLayoutTime(value: 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; } /** * Class used to create texture to support 2D GUI elements * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui */ export class AdvancedDynamicTexture extends BABYLON.DynamicTexture { /** Define the Uurl to load snippets */ static SnippetUrl: string; /** Indicates if some optimizations can be performed in GUI GPU management (the downside is additional memory/GPU texture memory used) */ static AllowGPUOptimizations: boolean; /** Snippet ID if the content was created from the snippet server */ snippetId: string; /** BABYLON.Observable that fires when the GUI is ready */ onGuiReadyObservable: BABYLON.Observable; private _isDirty; private _renderObserver; private _resizeObserver; private _preKeyboardObserver; private _prePointerObserver; private _sceneRenderObserver; private _pointerObserver; private _canvasPointerOutObserver; private _canvasBlurObserver; private _controlAddedObserver; private _controlRemovedObserver; private _background; /** @internal */ _rootContainer: Container; /** @internal */ _lastPickedControl: Control; /** @internal */ _lastControlOver: { [pointerId: number]: Control; }; /** @internal */ _lastControlDown: { [pointerId: number]: Control; }; /** @internal */ _capturingControl: { [pointerId: number]: Control; }; /** @internal */ _shouldBlockPointer: boolean; /** @internal */ _layerToDispose: BABYLON.Nullable; /** @internal */ _linkedControls: Control[]; private _isFullscreen; private _fullscreenViewport; private _idealWidth; private _idealHeight; private _useSmallestIdeal; private _renderAtIdealSize; private _focusedControl; private _blockNextFocusCheck; private _renderScale; private _rootElement; private _cursorChanged; private _defaultMousePointerId; private _rootChildrenHaveChanged; /** @internal */ _capturedPointerIds: Set; /** @internal */ _numLayoutCalls: number; /** Gets the number of layout calls made the last time the ADT has been rendered */ get numLayoutCalls(): number; /** @internal */ _numRenderCalls: number; /** Gets the number of render calls made the last time the ADT has been rendered */ get numRenderCalls(): number; /** * Define type to string to ensure compatibility across browsers * Safari doesn't support DataTransfer constructor */ private _clipboardData; /** * BABYLON.Observable event triggered each time an clipboard event is received from the rendering canvas */ onClipboardObservable: BABYLON.Observable; /** * BABYLON.Observable event triggered each time a pointer down is intercepted by a control */ onControlPickedObservable: BABYLON.Observable; /** * BABYLON.Observable event triggered before layout is evaluated */ onBeginLayoutObservable: BABYLON.Observable; /** * BABYLON.Observable event triggered after the layout was evaluated */ onEndLayoutObservable: BABYLON.Observable; /** * BABYLON.Observable event triggered before the texture is rendered */ onBeginRenderObservable: BABYLON.Observable; /** * BABYLON.Observable event triggered after the texture was rendered */ onEndRenderObservable: BABYLON.Observable; /** * Gets or sets a boolean defining if alpha is stored as premultiplied */ premulAlpha: boolean; /** * Gets or sets a boolean indicating that the canvas must be reverted on Y when updating the texture */ applyYInversionOnUpdate: 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 */ get renderScale(): number; set renderScale(value: number); /** Gets or sets the background color */ get background(): string; set background(value: string); /** * Gets or sets the ideal width used to design controls. * The GUI will then rescale everything accordingly * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#adaptive-scaling */ get idealWidth(): number; set idealWidth(value: number); /** * Gets or sets the ideal height used to design controls. * The GUI will then rescale everything accordingly * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#adaptive-scaling */ get idealHeight(): number; set idealHeight(value: number); /** * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#adaptive-scaling */ get useSmallestIdeal(): boolean; set useSmallestIdeal(value: boolean); /** * Gets or sets a boolean indicating if adaptive scaling must be used * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#adaptive-scaling */ get renderAtIdealSize(): boolean; set renderAtIdealSize(value: boolean); /** * Gets the ratio used when in "ideal mode" * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#adaptive-scaling * */ get idealRatio(): number; /** * Gets the underlying layer used to render the texture when in fullscreen mode */ get layer(): BABYLON.Nullable; /** * Gets the root container control */ get 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; /** * 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 * @returns all child controls */ getDescendants(directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): Control[]; /** * Will return all controls with the given type name * @param typeName defines the type name to search for * @returns an array of all controls found */ getControlsByType(typeName: string): Control[]; /** * Will return the first control with the given name * @param name defines the name to search for * @returns the first control found or null */ getControlByName(name: string): BABYLON.Nullable; private _getControlByKey; /** * Gets or sets the current focused control */ get focusedControl(): BABYLON.Nullable; set focusedControl(control: BABYLON.Nullable); /** * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode */ get isForeground(): boolean; set isForeground(value: boolean); /** * Gets or set information about clipboardData */ get clipboardData(): string; set clipboardData(value: string); /** * If set to true, every scene render will trigger a pointer event for the GUI * if it is linked to a mesh or has controls linked to a mesh. This will allow * you to catch the pointer moving around the GUI due to camera or mesh movements, * but it has a performance cost. */ checkPointerEveryFrame: boolean; /** * 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) * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default) */ constructor(name: string, width?: number, height?: number, scene?: BABYLON.Nullable, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean); /** * 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; private _useInvalidateRectOptimization; /** * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on */ get useInvalidateRectOptimization(): boolean; set useInvalidateRectOptimization(value: boolean); private _invalidatedRectangle; /** * Invalidates a rectangle area on the gui texture * @param invalidMinX left most position of the rectangle to invalidate in the texture * @param invalidMinY top most position of the rectangle to invalidate in the texture * @param invalidMaxX right most position of the rectangle to invalidate in the texture * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture */ invalidateRect(invalidMinX: number, invalidMinY: number, invalidMaxX: number, invalidMaxY: 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 https://doc.babylonjs.com/features/featuresDeepDive/gui/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; /** * Moves overlapped controls towards a position where it is not overlapping anymore. * Please note that this method alters linkOffsetXInPixels and linkOffsetYInPixels. * @param overlapGroup the overlap group which will be processed or undefined to process all overlap groups * @param deltaStep the step size (speed) to reach the target non overlapping position (default 0.1) * @param repelFactor how much is the control repelled by other controls */ moveToNonOverlappedPosition(overlapGroup?: number | Control[], deltaStep?: number, repelFactor?: number): void; /** * Release all resources */ dispose(): void; private _onResize; /** @internal */ _getGlobalViewport(): BABYLON.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: BABYLON.Vector3, worldMatrix: BABYLON.Matrix): BABYLON.Vector2; /** * 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 with Z */ getProjectedPositionWithZ(position: BABYLON.Vector3, worldMatrix: BABYLON.Matrix): BABYLON.Vector3; private _checkUpdate; private _clearMeasure; private _render; /** * @internal */ _changeCursor(cursor: string): void; /** * @internal */ _registerLastControlDown(control: Control, pointerId: number): void; private _doPicking; /** * @internal */ _cleanControlAfterRemovalFromList(list: { [pointerId: number]: Control; }, control: Control): void; /** * @internal */ _cleanControlAfterRemoval(control: Control): void; /** * This function will run a pointer event on this ADT and will trigger any pointer events on any controls * This will work on a fullscreen ADT only. For mesh based ADT, simulate pointer events using the scene directly. * @param x pointer X on the canvas for the picking * @param y pointer Y on the canvas for the picking * @param pi optional pointer information */ pick(x: number, y: number, pi?: BABYLON.Nullable): void; private _translateToPicking; /** Attach to all scene events required to support pointer events */ attach(): void; /** * @internal */ private _onClipboardCopy; /** * @internal */ private _onClipboardCut; /** * @internal */ private _onClipboardPaste; /** * Register the clipboard Events onto the canvas */ registerClipboardEvents(): void; /** * Unregister the clipboard Events from the canvas */ unRegisterClipboardEvents(): void; /** * Transform uvs from mesh space to texture space, taking the texture into account * @param uv the uvs in mesh space * @returns the uvs in texture space */ private _transformUvs; /** * 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: BABYLON.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; private _manageFocus; private _attachPickingToSceneRender; private _attachToOnPointerOut; private _attachToOnBlur; /** * Serializes the entire GUI system * @returns an object with the JSON serialized data */ serializeContent(): any; /** * Recreate the content of the ADT from a JSON object * @param serializedObject define the JSON serialized object to restore from * @param scaleToSize defines whether to scale to texture to the saved size */ parseSerializedObject(serializedObject: any, scaleToSize?: boolean): void; /** * Clones the ADT * @param newName defines the name of the new ADT * @returns the clone of the ADT */ clone(newName?: string): AdvancedDynamicTexture; /** * Recreate the content of the ADT from a JSON object * @param serializedObject define the JSON serialized object to restore from * @param scaleToSize defines whether to scale to texture to the saved size * @deprecated Please use parseSerializedObject instead */ parseContent: (serializedObject: any, scaleToSize?: boolean) => void; /** * Recreate the content of the ADT from a snippet saved by the GUI editor * @param snippetId defines the snippet to load * @param scaleToSize defines whether to scale to texture to the saved size * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created. * @returns a promise that will resolve on success */ static ParseFromSnippetAsync(snippetId: string, scaleToSize?: boolean, appendToAdt?: AdvancedDynamicTexture): Promise; /** * Recreate the content of the ADT from a snippet saved by the GUI editor * @param snippetId defines the snippet to load * @param scaleToSize defines whether to scale to texture to the saved size * @returns a promise that will resolve on success */ parseFromSnippetAsync(snippetId: string, scaleToSize?: boolean): Promise; /** * Recreate the content of the ADT from a url json * @param url defines the url to load * @param scaleToSize defines whether to scale to texture to the saved size * @param appendToAdt if provided the snippet will be appended to the adt. Otherwise a fullscreen ADT will be created. * @returns a promise that will resolve on success */ static ParseFromFileAsync(url: string, scaleToSize?: boolean, appendToAdt?: AdvancedDynamicTexture): Promise; /** * Recreate the content of the ADT from a url json * @param url defines the url to load * @param scaleToSize defines whether to scale to texture to the saved size * @returns a promise that will resolve on success */ parseFromURLAsync(url: string, scaleToSize?: boolean): Promise; private static _LoadURLContentAsync; /** * Compares two rectangle based controls for pixel overlap * @param control1 The first control to compare * @param control2 The second control to compare * @returns true if overlaps, otherwise false */ private static _Overlaps; /** * 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) * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default) * @param materialSetupCallback defines a custom way of creating and setting up the material on the mesh * @returns a new AdvancedDynamicTexture */ static CreateForMesh(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean, invertY?: boolean, materialSetupCallback?: (mesh: BABYLON.AbstractMesh, uniqueId: string, texture: AdvancedDynamicTexture, onlyAlphaTesting: boolean) => void): AdvancedDynamicTexture; private static _CreateMaterial; /** * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh) BUT do not create a new material for the mesh. You will be responsible for connecting the texture * @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 invertY defines if the texture needs to be inverted on the y axis during loading (true by default) * @returns a new AdvancedDynamicTexture */ static CreateForMeshTexture(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, invertY?: 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 hosting scene * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default) * @param adaptiveScaling defines whether to automatically scale root to match hardwarescaling (false by default) * @returns a new AdvancedDynamicTexture */ static CreateFullscreenUI(name: string, foreground?: boolean, scene?: BABYLON.Nullable, sampling?: number, adaptiveScaling?: boolean): AdvancedDynamicTexture; /** * Scales the texture * @param ratio the scale factor to apply to both width and height */ scale(ratio: number): void; /** * Resizes the texture * @param width the new width * @param height the new height */ scaleTo(width: number, height: number): void; private _checkGuiIsReady; /** * Returns true if all the GUI components are ready to render */ guiIsReady(): boolean; } /** * 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; /** * Gets or sets a boolean indicating that the button will let internal controls handle picking instead of doing it directly using its bounding info */ delegatePickingToChildren: boolean; private _image; /** * Returns the image part of the button (if any) */ get image(): BABYLON.Nullable; private _textBlock; /** * Returns the TextBlock part of the button (if any) */ get textBlock(): BABYLON.Nullable; /** * Creates a new Button * @param name defines the name of the button */ constructor(name?: string | undefined); protected _getTypeName(): string; /** * @internal */ _processPicking(x: number, y: number, pi: BABYLON.PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean; /** * @internal */ _onPointerEnter(target: Control, pi: BABYLON.PointerInfoBase): boolean; /** * @internal */ _onPointerOut(target: Control, pi: BABYLON.PointerInfoBase, force?: boolean): void; /** * @internal */ _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean; protected _getRectangleFill(context: BABYLON.ICanvasRenderingContext): string | CanvasGradient; /** * @internal */ _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: BABYLON.PointerInfoBase): void; /** * Serializes the current button * @param serializationObject defines the JSON serialized object */ serialize(serializationObject: any): void; /** * @internal */ _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): 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; } /** * Class used to represent a 2D checkbox */ export class Checkbox extends Control { name?: string | undefined; private _isChecked; private _background; private _checkSizeRatio; private _thickness; /** Gets or sets border thickness */ get thickness(): number; set thickness(value: number); /** * BABYLON.Observable raised when isChecked property changes */ onIsCheckedChangedObservable: BABYLON.Observable; /** Gets or sets a value indicating the ratio between overall size and check size */ get checkSizeRatio(): number; set checkSizeRatio(value: number); /** Gets or sets background color */ get background(): string; set background(value: string); /** Gets or sets a boolean indicating if the checkbox is checked or not */ get isChecked(): boolean; set isChecked(value: boolean); /** * Creates a new CheckBox * @param name defines the control name */ constructor(name?: string | undefined); protected _getTypeName(): string; /** * @internal */ _draw(context: BABYLON.ICanvasRenderingContext): void; /** * @internal */ _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): 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; } /** Class used to create color pickers */ export class ColorPicker extends Control { name?: string | undefined; private static _Epsilon; private _colorWheelCanvas; private _value; private _tmpColor; private _pointerStartedOnSquare; private _pointerStartedOnWheel; private _squareLeft; private _squareTop; private _squareSize; private _h; private _s; private _v; private _lastPointerDownId; /** * BABYLON.Observable raised when the value changes */ onValueChangedObservable: BABYLON.Observable; /** Gets or sets the color of the color picker */ get value(): BABYLON.Color3; set value(value: BABYLON.Color3); /** * Gets or sets control width * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size */ get width(): string | number; set width(value: string | number); /** * Gets or sets control height * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size */ get height(): string | number; /** Gets or sets control height */ set height(value: string | number); /** Gets or sets control size */ get size(): string | number; set size(value: string | number); /** * Creates a new ColorPicker * @param name defines the control name */ constructor(name?: string | undefined); protected _getTypeName(): string; /** * @internal */ protected _preMeasure(parentMeasure: Measure): void; private _updateSquareProps; private _drawGradientSquare; private _drawCircle; private _createColorWheelCanvas; /** * @internal */ _draw(context: BABYLON.ICanvasRenderingContext): void; private _pointerIsDown; private _updateValueFromPointer; private _isPointOnSquare; private _isPointOnWheel; _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean; _onPointerMove(target: Control, coordinates: BABYLON.Vector2, pointerId: number, pi: BABYLON.PointerInfoBase): void; _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: BABYLON.PointerInfoBase): void; _onCanvasBlur(): void; /** * This function expands the color picker by creating a color picker dialog with manual * color value input and the ability to save colors into an array to be used later in * subsequent launches of the dialogue. * @param advancedTexture defines the AdvancedDynamicTexture the dialog is assigned to * @param options defines size for dialog and options for saved colors. Also accepts last color picked as hex string and saved colors array as hex strings. * @param options.pickerWidth * @param options.pickerHeight * @param options.headerHeight * @param options.lastColor * @param options.swatchLimit * @param options.numSwatchesPerLine * @param options.savedColors * @returns picked color as a hex string and the saved colors array as hex strings. */ static ShowPickerDialogAsync(advancedTexture: AdvancedDynamicTexture, options: { pickerWidth?: string; pickerHeight?: string; headerHeight?: string; lastColor?: string; swatchLimit?: number; numSwatchesPerLine?: number; savedColors?: Array; }): Promise<{ savedColors?: string[]; pickedColor: string; }>; } /** * Root class for 2D containers * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#containers */ export class Container extends Control { name?: string | undefined; /** @internal */ _children: Control[]; /** @internal */ protected _measureForChildren: Measure; /** @internal */ protected _background: string; /** @internal */ protected _backgroundGradient: BABYLON.Nullable; /** @internal */ protected _adaptWidthToChildren: boolean; /** @internal */ protected _adaptHeightToChildren: boolean; /** @internal */ protected _renderToIntermediateTexture: boolean; /** @internal */ protected _intermediateTexture: BABYLON.Nullable; /** Gets or sets boolean indicating if children should be rendered to an intermediate texture rather than directly to host, useful for alpha blending */ get renderToIntermediateTexture(): boolean; set renderToIntermediateTexture(value: boolean); /** * Gets or sets a boolean indicating that layout cycle errors should be displayed on the console */ logLayoutCycleErrors: boolean; /** * Gets or sets the number of layout cycles (a change involved by a control while evaluating the layout) allowed */ maxLayoutCycle: number; /** Gets or sets a boolean indicating if the container should try to adapt to its children height */ get adaptHeightToChildren(): boolean; set adaptHeightToChildren(value: boolean); /** Gets or sets a boolean indicating if the container should try to adapt to its children width */ get adaptWidthToChildren(): boolean; set adaptWidthToChildren(value: boolean); /** Gets or sets background color */ get background(): string; set background(value: string); /** Gets or sets background gradient color. Takes precedence over background */ get backgroundGradient(): BABYLON.Nullable; set backgroundGradient(value: BABYLON.Nullable); /** Gets the list of children */ get children(): Control[]; get isReadOnly(): boolean; set isReadOnly(value: boolean); /** * 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): BABYLON.Nullable; /** * 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): BABYLON.Nullable; /** * 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: BABYLON.Nullable): 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; /** * An event triggered when any control is added to this container. */ onControlAddedObservable: BABYLON.Observable>; /** * An event triggered when any control is removed from this container. */ onControlRemovedObservable: BABYLON.Observable>; /** * @internal */ _reOrderControl(control: Control): void; /** * @internal */ _offsetLeft(offset: number): void; /** * @internal */ _offsetTop(offset: number): void; /** @internal */ _markAllAsDirty(): void; protected _getBackgroundColor(context: BABYLON.ICanvasRenderingContext): string | CanvasGradient; /** * @internal */ protected _localDraw(context: BABYLON.ICanvasRenderingContext): void; /** * @internal */ _link(host: AdvancedDynamicTexture): void; /** @internal */ protected _beforeLayout(): void; /** * @internal */ protected _processMeasures(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): void; /** * @internal */ _layout(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): boolean; protected _postMeasure(): void; private _inverseTransformMatrix; private _inverseMeasure; /** * @internal */ _draw(context: BABYLON.ICanvasRenderingContext, invalidatedRectangle?: Measure): void; getDescendantsToRef(results: Control[], directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): void; /** * @internal */ _processPicking(x: number, y: number, pi: BABYLON.Nullable, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean; /** * @internal */ protected _additionalProcessing(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): void; /** * Serializes the current control * @param serializationObject defined the JSON serialized object */ serialize(serializationObject: any): void; /** Releases associated resources */ dispose(): void; /** * @internal */ _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): void; isReady(): boolean; } /** * Root class used for all 2D controls * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#controls */ export class Control implements BABYLON.IAnimatable { /** 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; private _alpha; private _alphaSet; private _zIndex; /** @internal */ _host: AdvancedDynamicTexture; /** Gets or sets the control parent */ parent: BABYLON.Nullable; /** @internal */ _currentMeasure: Measure; /** @internal */ _tempPaddingMeasure: Measure; private _fontFamily; private _fontStyle; private _fontWeight; private _fontSize; private _font; /** @internal */ _width: ValueAndUnit; /** @internal */ _height: ValueAndUnit; /** @internal */ protected _fontOffset: { ascent: number; height: number; descent: number; }; private _color; private _style; private _styleObserver; /** @internal */ protected _horizontalAlignment: number; /** @internal */ protected _verticalAlignment: number; /** @internal */ protected _isDirty: boolean; /** @internal */ protected _wasDirty: boolean; /** @internal */ _tempParentMeasure: Measure; /** @internal */ _prevCurrentMeasureTransformedIntoGlobalSpace: Measure; /** @internal */ _cachedParentMeasure: Measure; private _descendantsOnlyPadding; private _paddingLeft; private _paddingRight; private _paddingTop; private _paddingBottom; /** @internal */ _left: ValueAndUnit; /** @internal */ _top: ValueAndUnit; private _scaleX; private _scaleY; private _rotation; private _transformCenterX; private _transformCenterY; /** @internal */ _transformMatrix: Matrix2D; /** @internal */ protected _invertTransformMatrix: Matrix2D; /** @internal */ protected _transformedPosition: BABYLON.Vector2; private _isMatrixDirty; private _cachedOffsetX; private _cachedOffsetY; private _isVisible; private _isHighlighted; private _highlightColor; protected _highlightLineWidth: number; /** @internal */ _linkedMesh: BABYLON.Nullable; private _fontSet; private _dummyVector2; private _downCount; private _enterCount; private _doNotRender; private _downPointerIds; private _evaluatedMeasure; private _evaluatedParentMeasure; protected _isEnabled: boolean; protected _disabledColor: string; protected _disabledColorItem: string; protected _isReadOnly: boolean; private _gradient; /** @internal */ protected _rebuildLayout: boolean; /** @internal */ _customData: any; /** @internal */ _isClipped: boolean; /** @internal */ _automaticSize: boolean; /** @internal */ _tag: any; /** * 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 */ metadata: any; /** Gets or sets a boolean indicating if the control can be hit with pointer events */ isHitTestVisible: boolean; /** Gets or sets a boolean indicating if the control can block pointer events. False by default except on the following controls: * * Button controls (Button, RadioButton, ToggleButton) * * Checkbox * * ColorPicker * * InputText * * Slider */ isPointerBlocker: boolean; /** Gets or sets a boolean indicating if the control can be focusable */ isFocusInvisible: boolean; protected _clipChildren: boolean; /** * Sets/Gets a boolean indicating if the children are clipped to the current control bounds. * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children */ set clipChildren(value: boolean); get clipChildren(): boolean; protected _clipContent: boolean; /** * Sets/Gets a boolean indicating that control content must be clipped * Please note that not clipping content may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children */ set clipContent(value: boolean); get clipContent(): boolean; /** * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often) */ useBitmapCache: boolean; private _cacheData; private _shadowOffsetX; /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */ get shadowOffsetX(): number; set shadowOffsetX(value: number); private _shadowOffsetY; /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */ 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); private _shadowColor; /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */ get shadowColor(): string; set shadowColor(value: string); /** Gets or sets the cursor to use when the control is hovered */ hoverCursor: string; /** @internal */ protected _linkOffsetX: ValueAndUnit; /** @internal */ protected _linkOffsetY: ValueAndUnit; /** Gets the control type name */ get typeName(): string; /** * Get the current class name of the control. * @returns current class name */ getClassName(): string; /** * Gets or sets the accessibility tag to describe the control for accessibility purpose. * By default, GUI controls already indicate accessibility info, but one can override the info using this tag. */ set accessibilityTag(value: BABYLON.Nullable); get accessibilityTag(): BABYLON.Nullable; protected _accessibilityTag: BABYLON.Nullable; onAccessibilityTagChangedObservable: BABYLON.Observable>; /** * An event triggered when pointer wheel is scrolled */ onWheelObservable: BABYLON.Observable; /** * An event triggered when the pointer moves over the control. */ onPointerMoveObservable: BABYLON.Observable; /** * An event triggered when the pointer moves out of the control. */ onPointerOutObservable: BABYLON.Observable; /** * An event triggered when the pointer taps the control */ onPointerDownObservable: BABYLON.Observable; /** * An event triggered when pointer up */ onPointerUpObservable: BABYLON.Observable; /** * An event triggered when a control is clicked on */ onPointerClickObservable: BABYLON.Observable; /** * An event triggered when pointer enters the control */ onPointerEnterObservable: BABYLON.Observable; /** * An event triggered when the control is marked as dirty */ onDirtyObservable: BABYLON.Observable; /** * An event triggered before drawing the control */ onBeforeDrawObservable: BABYLON.Observable; /** * An event triggered after the control was drawn */ onAfterDrawObservable: BABYLON.Observable; /** * An event triggered when the control has been disposed */ onDisposeObservable: BABYLON.Observable; /** * An event triggered when the control isVisible is changed */ onIsVisibleChangedObservable: BABYLON.Observable; /** * Get the hosting AdvancedDynamicTexture */ get host(): AdvancedDynamicTexture; /** Gets or set information about font offsets (used to render and align text) */ get fontOffset(): { ascent: number; height: number; descent: number; }; set fontOffset(offset: { ascent: number; height: number; descent: number; }); /** 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/features/featuresDeepDive/gui/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/features/featuresDeepDive/gui/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/features/featuresDeepDive/gui/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/features/featuresDeepDive/gui/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/features/featuresDeepDive/gui/gui#rotation-and-scaling */ get transformCenterX(): number; set transformCenterX(value: number); /** * Gets or sets the horizontal alignment * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#alignments */ get horizontalAlignment(): number; set horizontalAlignment(value: number); /** * Gets or sets the vertical alignment * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#alignments */ get verticalAlignment(): number; set verticalAlignment(value: number); private _fixedRatio; set fixedRatio(value: number); /** * Gets or sets a fixed ratio for this control. * When different from 0, the ratio is used to compute the "second" dimension. * The first dimension used in the computation is the last one set (by setting width / widthInPixels or height / heightInPixels), and the * second dimension is computed as first dimension * fixedRatio */ get fixedRatio(): number; private _fixedRatioMasterIsWidth; set fixedRatioMasterIsWidth(value: boolean); /** * Gets or sets a boolean indicating that the fixed ratio is set on the width instead of the height. True by default. * When the height of a control is set, this property is changed to false. */ get fixedRatioMasterIsWidth(): boolean; /** * Gets or sets control width * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size */ get width(): string | number; set width(value: string | number); /** * Gets or sets the control width in pixel * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size */ get widthInPixels(): number; set widthInPixels(value: number); /** * Gets or sets control height * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size */ get height(): string | number; set height(value: string | number); /** * Gets or sets control height in pixel * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size */ get heightInPixels(): number; set heightInPixels(value: number); /** Gets or set font family */ get fontFamily(): string; set fontFamily(value: string); /** Gets or sets font style */ get fontStyle(): string; set fontStyle(value: string); /** Gets or sets font weight */ get fontWeight(): string; set fontWeight(value: string); /** * Gets or sets style * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#styles */ get style(): BABYLON.Nullable