import { Nullable } from "babylonjs/types"; import { Observable, Observer } from "babylonjs/Misc/observable"; import { StackPanel } from "./stackPanel"; import { Button } from "./button"; import { Container } from "./container"; import { TextBlock } from "./textBlock"; import { InputText } from "./inputText"; import { _TypeStore } from 'babylonjs/Misc/typeStore'; /** * Class used to store key control properties */ export class KeyPropertySet { /** Width */ width?: string; /** Height */ height?: string; /** Left padding */ paddingLeft?: string; /** Right padding */ paddingRight?: string; /** Top padding */ paddingTop?: string; /** Bottom padding */ paddingBottom?: string; /** Foreground color */ color?: string; /** Background color */ background?: string; } type ConnectedInputText = { input: InputText, onFocusObserver: Nullable>, onBlurObserver: Nullable> }; /** * Class used to create virtual keyboard */ export class VirtualKeyboard extends StackPanel { /** Observable raised when a key is pressed */ public onKeyPressObservable = new Observable(); /** Gets or sets default key button width */ public defaultButtonWidth = "40px"; /** Gets or sets default key button height */ public defaultButtonHeight = "40px"; /** Gets or sets default key button left padding */ public defaultButtonPaddingLeft = "2px"; /** Gets or sets default key button right padding */ public defaultButtonPaddingRight = "2px"; /** Gets or sets default key button top padding */ public defaultButtonPaddingTop = "2px"; /** Gets or sets default key button bottom padding */ public defaultButtonPaddingBottom = "2px"; /** Gets or sets default key button foreground color */ public defaultButtonColor = "#DDD"; /** Gets or sets default key button background color */ public defaultButtonBackground = "#070707"; /** Gets or sets shift button foreground color */ public shiftButtonColor = "#7799FF"; /** Gets or sets shift button thickness*/ public selectedShiftThickness = 1; /** Gets shift key state */ public shiftState = 0; protected _getTypeName(): string { return "VirtualKeyboard"; } private _createKey(key: string, propertySet: Nullable) { var button = Button.CreateSimpleButton(key, key); button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth; button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight; button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor; button.background = propertySet && propertySet.background ? propertySet.background : this.defaultButtonBackground; button.paddingLeft = propertySet && propertySet.paddingLeft ? propertySet.paddingLeft : this.defaultButtonPaddingLeft; button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight; button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop; button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom; button.thickness = 0; button.isFocusInvisible = true; button.shadowColor = this.shadowColor; button.shadowBlur = this.shadowBlur; button.shadowOffsetX = this.shadowOffsetX; button.shadowOffsetY = this.shadowOffsetY; button.onPointerUpObservable.add(() => { this.onKeyPressObservable.notifyObservers(key); }); return button; } /** * Adds a new row of keys * @param keys defines the list of keys to add * @param propertySets defines the associated property sets */ public addKeysRow(keys: Array, propertySets?: Array): void { let panel = new StackPanel(); panel.isVertical = false; panel.isFocusInvisible = true; var maxKey: Nullable