import { Nullable } from "babylonjs/types" ; import { Vector2 } from "babylonjs/Maths/math.vector" ; import { Rectangle } from "./rectangle" ; import { Control } from "./control" ; import { TextBlock } from "./textBlock" ; import { Image } from "./image" ; import { RegisterClass } from 'babylonjs/Misc/typeStore' ; import { PointerInfoBase } from 'babylonjs/Events/pointerEvents' ; import { AdvancedDynamicTexture } from "../advancedDynamicTexture" ; /**
 * Class used to create 2D buttons
 */ export class Button extends Rectangle { /**
     * Function called to generate a pointer enter animation
     */ public pointerEnterAnimation : ( ) => void ; /**
     * Function called to generate a pointer out animation
     */ public pointerOutAnimation : ( ) => void ; /**
     * Function called to generate a pointer down animation
     */ public pointerDownAnimation : ( ) => void ; /**
     * Function called to generate a pointer up animation
     */ public 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
     */ public delegatePickingToChildren = false ; private _image : Nullable < Image > ; /**
     * Returns the image part of the button (if any)
     */ public get image ( ) : Nullable < Image > { return this . _image ; } private _textBlock : Nullable < TextBlock > ; /**
     * Returns the image part of the button (if any)
     */ public get textBlock ( ) : Nullable < TextBlock > { return this . _textBlock ; } param name constructor ( public name ? ) { super ( name ) ; this . thickness = 1 ; this . isPointerBlocker = true ; let alphaStore = null ; this . pointerEnterAnimation = ( ) => { alphaStore = this . alpha ; this . alpha -= 0.1 ; } ; this . pointerOutAnimation = ( ) => { if ( alphaStore !== null ) { this . alpha = alphaStore ; } } ; this . pointerDownAnimation = ( ) => { this . scaleX -= 0.05 ; this . scaleY -= 0.05 ; } ; this . pointerUpAnimation = ( ) => { this . scaleX += 0.05 ; this . scaleY += 0.05 ; } ; } protected _getTypeName ( ) { return "Button" ; } hidden public _processPicking ( x , y , pi , type , pointerId , buttonIndex , deltaX ? , deltaY ? ) { if ( ! this . _isEnabled || ! this . isHitTestVisible || ! this . isVisible || this . notRenderable ) { return false ; } if ( ! super . contains ( x , y ) ) { return false ; } if ( this . delegatePickingToChildren ) { let contains = false ; for ( var index = this . _children . length - 1 ; index >= 0 ; index -- ) { var child = this . _children [ index ] ; if ( child . isEnabled && child . isHitTestVisible && child . isVisible && ! child . notRenderable && child . contains ( x , y ) ) { contains = true ; break ; } } if ( ! contains ) { return false ; } } this . _processObservables ( type , x , y , pi , pointerId , buttonIndex , deltaX , deltaY ) ; return true ; } hidden public _onPointerEnter ( target , pi ) { if ( ! super . _onPointerEnter ( target , pi ) ) { return false ; } if ( ! this . isReadOnly && this . pointerEnterAnimation ) { this . pointerEnterAnimation ( ) ; } return true ; } hidden public _onPointerOut ( target , pi , force = false ) { if ( ! this . isReadOnly && this . pointerOutAnimation ) { this . pointerOutAnimation ( ) ; } super . _onPointerOut ( target , pi , force ) ; } hidden public _onPointerDown ( target , coordinates , pointerId , buttonIndex , pi ) { if ( ! super . _onPointerDown ( target , coordinates , pointerId , buttonIndex , pi ) ) { return false ; } if ( ! this . isReadOnly && this . pointerDownAnimation ) { this . pointerDownAnimation ( ) ; } return true ; } hidden public _onPointerUp ( target , coordinates , pointerId , buttonIndex , notifyClick , pi ) { if ( ! this . isReadOnly && this . pointerUpAnimation ) { this . pointerUpAnimation ( ) ; } super . _onPointerUp ( target , coordinates , pointerId , buttonIndex , notifyClick , pi ) ; } param serializationObject public serialize ( serializationObject ) { super . serialize ( serializationObject ) ; if ( this . _textBlock ) { serializationObject . textBlockName = this . _textBlock . name ; } if ( this . _image ) { serializationObject . imageName = this . _image . name ; } } hidden public _parseFromContent ( serializedObject , host ) { super . _parseFromContent ( serializedObject , host ) ; if ( serializedObject . textBlockName ) { this . _textBlock = this . getChildByName ( serializedObject . textBlockName ) as Nullable < TextBlock > ; } if ( serializedObject . imageName ) { this . _image = this . getChildByName ( serializedObject . imageName ) as Nullable < Image > ; } } param name param text param imageUrl returns public static CreateImageButton ( name , text , imageUrl ) { var result = new this ( name ) ; var textBlock = new TextBlock ( name + "_button" , text ) ; textBlock . textWrapping = true ; textBlock . textHorizontalAlignment = Control . HORIZONTAL_ALIGNMENT_CENTER ; textBlock . paddingLeft = "20%" ; result . addControl ( textBlock ) ; var iconImage = new Image ( name + "_icon" , imageUrl ) ; iconImage . width = "20%" ; iconImage . stretch = Image . STRETCH_UNIFORM ; iconImage . horizontalAlignment = Control . HORIZONTAL_ALIGNMENT_LEFT ; result . addControl ( iconImage ) ; result . _image = iconImage ; result . _textBlock = textBlock ; return result ; } param name param imageUrl returns public static CreateImageOnlyButton ( name , imageUrl ) { var result = new this ( name ) ; var iconImage = new Image ( name + "_icon" , imageUrl ) ; iconImage . stretch = Image . STRETCH_FILL ; iconImage . horizontalAlignment = Control . HORIZONTAL_ALIGNMENT_LEFT ; result . addControl ( iconImage ) ; result . _image = iconImage ; return result ; } param name param text returns public static CreateSimpleButton ( name , text ) { var result = new this ( name ) ; var textBlock = new TextBlock ( name + "_button" , text ) ; textBlock . textWrapping = true ; textBlock . textHorizontalAlignment = Control . HORIZONTAL_ALIGNMENT_CENTER ; result . addControl ( textBlock ) ; result . _textBlock = textBlock ; return result ; } param name param text param imageUrl returns public static CreateImageWithCenterTextButton ( name , text , imageUrl ) { var result = new this ( name ) ; var iconImage = new Image ( name + "_icon" , imageUrl ) ; iconImage . stretch = Image . STRETCH_FILL ; result . addControl ( iconImage ) ; var textBlock = new TextBlock ( name + "_button" , text ) ; textBlock . textWrapping = true ; textBlock . textHorizontalAlignment = Control . HORIZONTAL_ALIGNMENT_CENTER ; result . addControl ( textBlock ) ; result . _image = iconImage ; result . _textBlock = textBlock ; return result ; } } RegisterClass ( "BABYLON.GUI.Button" , Button ) ;