babylon.gui.d.ts 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227
  1. declare module BABYLON.GUI {
  2. /**
  3. * Define a style used by control to automatically setup properties based on a template.
  4. * Only support font related properties so far
  5. */
  6. class Style implements BABYLON.IDisposable {
  7. private _fontFamily;
  8. private _fontStyle;
  9. /** @hidden */
  10. _host: AdvancedDynamicTexture;
  11. /** @hidden */
  12. _fontSize: ValueAndUnit;
  13. /**
  14. * Observable raised when the style values are changed
  15. */
  16. onChangedObservable: Observable<Style>;
  17. /**
  18. * Creates a new style object
  19. * @param host defines the AdvancedDynamicTexture which hosts this style
  20. */
  21. constructor(host: AdvancedDynamicTexture);
  22. /**
  23. * Gets or sets the font size
  24. */
  25. fontSize: string | number;
  26. /**
  27. * Gets or sets the font family
  28. */
  29. fontFamily: string;
  30. /**
  31. * Gets or sets the font style
  32. */
  33. fontStyle: string;
  34. /** Dispose all associated resources */
  35. dispose(): void;
  36. }
  37. }
  38. declare module BABYLON.GUI {
  39. class ValueAndUnit {
  40. unit: number;
  41. negativeValueAllowed: boolean;
  42. private _value;
  43. ignoreAdaptiveScaling: boolean;
  44. constructor(value: number, unit?: number, negativeValueAllowed?: boolean);
  45. readonly isPercentage: boolean;
  46. readonly isPixel: boolean;
  47. readonly internalValue: number;
  48. getValueInPixel(host: AdvancedDynamicTexture, refValue: number): number;
  49. getValue(host: AdvancedDynamicTexture): number;
  50. toString(host: AdvancedDynamicTexture): string;
  51. fromString(source: string | number): boolean;
  52. private static _Regex;
  53. private static _UNITMODE_PERCENTAGE;
  54. private static _UNITMODE_PIXEL;
  55. static readonly UNITMODE_PERCENTAGE: number;
  56. static readonly UNITMODE_PIXEL: number;
  57. }
  58. }
  59. declare module BABYLON.GUI {
  60. interface IFocusableControl {
  61. onFocus(): void;
  62. onBlur(): void;
  63. processKeyboard(evt: KeyboardEvent): void;
  64. }
  65. class AdvancedDynamicTexture extends DynamicTexture {
  66. private _isDirty;
  67. private _renderObserver;
  68. private _resizeObserver;
  69. private _preKeyboardObserver;
  70. private _pointerMoveObserver;
  71. private _pointerObserver;
  72. private _canvasPointerOutObserver;
  73. private _background;
  74. _rootContainer: Container;
  75. _lastPickedControl: Control;
  76. _lastControlOver: {
  77. [pointerId: number]: Control;
  78. };
  79. _lastControlDown: {
  80. [pointerId: number]: Control;
  81. };
  82. _capturingControl: {
  83. [pointerId: number]: Control;
  84. };
  85. _shouldBlockPointer: boolean;
  86. _layerToDispose: Nullable<Layer>;
  87. _linkedControls: Control[];
  88. private _isFullscreen;
  89. private _fullscreenViewport;
  90. private _idealWidth;
  91. private _idealHeight;
  92. private _useSmallestIdeal;
  93. private _renderAtIdealSize;
  94. private _focusedControl;
  95. private _blockNextFocusCheck;
  96. private _renderScale;
  97. /**
  98. * Gets or sets a boolean defining if alpha is stored as premultiplied
  99. */
  100. premulAlpha: boolean;
  101. renderScale: number;
  102. background: string;
  103. idealWidth: number;
  104. idealHeight: number;
  105. useSmallestIdeal: boolean;
  106. renderAtIdealSize: boolean;
  107. readonly layer: Nullable<Layer>;
  108. readonly rootContainer: Container;
  109. focusedControl: Nullable<IFocusableControl>;
  110. isForeground: boolean;
  111. constructor(name: string, width: number | undefined, height: number | undefined, scene: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number);
  112. executeOnAllControls(func: (control: Control) => void, container?: Container): void;
  113. markAsDirty(): void;
  114. /**
  115. * Helper function used to create a new style
  116. */
  117. createStyle(): Style;
  118. addControl(control: Control): AdvancedDynamicTexture;
  119. removeControl(control: Control): AdvancedDynamicTexture;
  120. dispose(): void;
  121. private _onResize();
  122. _getGlobalViewport(scene: Scene): Viewport;
  123. getProjectedPosition(position: Vector3, worldMatrix: Matrix): Vector2;
  124. private _checkUpdate(camera);
  125. private _render();
  126. private _doPicking(x, y, type, pointerId, buttonIndex);
  127. _cleanControlAfterRemovalFromList(list: {
  128. [pointerId: number]: Control;
  129. }, control: Control): void;
  130. _cleanControlAfterRemoval(control: Control): void;
  131. attach(): void;
  132. attachToMesh(mesh: AbstractMesh, supportPointerMove?: boolean): void;
  133. moveFocusToControl(control: IFocusableControl): void;
  134. private _manageFocus();
  135. private _attachToOnPointerOut(scene);
  136. static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean): AdvancedDynamicTexture;
  137. /**
  138. * FullScreenUI is created in a layer. This allows it to be treated like any other layer.
  139. * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
  140. * When the GUI is not Created as FullscreenUI it does not respect the layerMask.
  141. * layerMask is set through advancedTexture.layer.layerMask
  142. * @param name name for the Texture
  143. * @param foreground render in foreground (default is true)
  144. * @param scene scene to be rendered in
  145. * @param sampling method for scaling to fit screen
  146. * @returns AdvancedDynamicTexture
  147. */
  148. static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Nullable<Scene>, sampling?: number): AdvancedDynamicTexture;
  149. }
  150. }
  151. declare module BABYLON.GUI {
  152. class Measure {
  153. left: number;
  154. top: number;
  155. width: number;
  156. height: number;
  157. constructor(left: number, top: number, width: number, height: number);
  158. copyFrom(other: Measure): void;
  159. isEqualsTo(other: Measure): boolean;
  160. static Empty(): Measure;
  161. }
  162. }
  163. declare module BABYLON.GUI {
  164. class Vector2WithInfo extends Vector2 {
  165. buttonIndex: number;
  166. constructor(source: Vector2, buttonIndex?: number);
  167. }
  168. class Matrix2D {
  169. m: Float32Array;
  170. constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
  171. fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
  172. determinant(): number;
  173. invertToRef(result: Matrix2D): Matrix2D;
  174. multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
  175. transformCoordinates(x: number, y: number, result: Vector2): Matrix2D;
  176. static Identity(): Matrix2D;
  177. static TranslationToRef(x: number, y: number, result: Matrix2D): void;
  178. static ScalingToRef(x: number, y: number, result: Matrix2D): void;
  179. static RotationToRef(angle: number, result: Matrix2D): void;
  180. private static _TempPreTranslationMatrix;
  181. private static _TempPostTranslationMatrix;
  182. private static _TempRotationMatrix;
  183. private static _TempScalingMatrix;
  184. private static _TempCompose0;
  185. private static _TempCompose1;
  186. private static _TempCompose2;
  187. static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: Nullable<Matrix2D>, result: Matrix2D): void;
  188. }
  189. }
  190. declare module BABYLON.GUI {
  191. class MultiLinePoint {
  192. private _multiLine;
  193. private _x;
  194. private _y;
  195. private _control;
  196. private _mesh;
  197. private _controlObserver;
  198. private _meshObserver;
  199. _point: Vector2;
  200. constructor(multiLine: MultiLine);
  201. x: string | number;
  202. y: string | number;
  203. control: Nullable<Control>;
  204. mesh: Nullable<AbstractMesh>;
  205. translate(): Vector2;
  206. private _translatePoint();
  207. dispose(): void;
  208. }
  209. }
  210. declare module BABYLON.GUI {
  211. class Control {
  212. name: string | undefined;
  213. private _alpha;
  214. private _alphaSet;
  215. private _zIndex;
  216. _root: Nullable<Container>;
  217. _host: AdvancedDynamicTexture;
  218. parent: Nullable<Container>;
  219. _currentMeasure: Measure;
  220. private _fontFamily;
  221. private _fontStyle;
  222. private _fontSize;
  223. private _font;
  224. _width: ValueAndUnit;
  225. _height: ValueAndUnit;
  226. protected _fontOffset: {
  227. ascent: number;
  228. height: number;
  229. descent: number;
  230. };
  231. private _color;
  232. private _style;
  233. private _styleObserver;
  234. protected _horizontalAlignment: number;
  235. protected _verticalAlignment: number;
  236. private _isDirty;
  237. _tempParentMeasure: Measure;
  238. protected _cachedParentMeasure: Measure;
  239. private _paddingLeft;
  240. private _paddingRight;
  241. private _paddingTop;
  242. private _paddingBottom;
  243. _left: ValueAndUnit;
  244. _top: ValueAndUnit;
  245. private _scaleX;
  246. private _scaleY;
  247. private _rotation;
  248. private _transformCenterX;
  249. private _transformCenterY;
  250. private _transformMatrix;
  251. protected _invertTransformMatrix: Matrix2D;
  252. protected _transformedPosition: Vector2;
  253. private _onlyMeasureMode;
  254. private _isMatrixDirty;
  255. private _cachedOffsetX;
  256. private _cachedOffsetY;
  257. private _isVisible;
  258. _linkedMesh: Nullable<AbstractMesh>;
  259. private _fontSet;
  260. private _dummyVector2;
  261. private _downCount;
  262. private _enterCount;
  263. private _doNotRender;
  264. private _downPointerIds;
  265. isHitTestVisible: boolean;
  266. isPointerBlocker: boolean;
  267. isFocusInvisible: boolean;
  268. shadowOffsetX: number;
  269. shadowOffsetY: number;
  270. shadowBlur: number;
  271. shadowColor: string;
  272. protected _linkOffsetX: ValueAndUnit;
  273. protected _linkOffsetY: ValueAndUnit;
  274. readonly typeName: string;
  275. /**
  276. * An event triggered when the pointer move over the control.
  277. */
  278. onPointerMoveObservable: Observable<Vector2>;
  279. /**
  280. * An event triggered when the pointer move out of the control.
  281. */
  282. onPointerOutObservable: Observable<Control>;
  283. /**
  284. * An event triggered when the pointer taps the control
  285. */
  286. onPointerDownObservable: Observable<Vector2WithInfo>;
  287. /**
  288. * An event triggered when pointer up
  289. */
  290. onPointerUpObservable: Observable<Vector2WithInfo>;
  291. /**
  292. * An event triggered when a control is clicked on
  293. */
  294. onPointerClickObservable: Observable<Vector2WithInfo>;
  295. /**
  296. * An event triggered when pointer enters the control
  297. */
  298. onPointerEnterObservable: Observable<Control>;
  299. /**
  300. * An event triggered when the control is marked as dirty
  301. */
  302. onDirtyObservable: Observable<Control>;
  303. /**
  304. * An event triggered after the control is drawn
  305. */
  306. onAfterDrawObservable: Observable<Control>;
  307. /** Gets or set information about font offsets (used to render and align text) */
  308. fontOffset: {
  309. ascent: number;
  310. height: number;
  311. descent: number;
  312. };
  313. alpha: number;
  314. scaleX: number;
  315. scaleY: number;
  316. rotation: number;
  317. transformCenterY: number;
  318. transformCenterX: number;
  319. horizontalAlignment: number;
  320. verticalAlignment: number;
  321. width: string | number;
  322. readonly widthInPixels: number;
  323. height: string | number;
  324. readonly heightInPixels: number;
  325. fontFamily: string;
  326. fontStyle: string;
  327. style: BABYLON.Nullable<Style>;
  328. /** @hidden */
  329. readonly _isFontSizeInPercentage: boolean;
  330. readonly fontSizeInPixels: number;
  331. fontSize: string | number;
  332. color: string;
  333. zIndex: number;
  334. notRenderable: boolean;
  335. isVisible: boolean;
  336. readonly isDirty: boolean;
  337. paddingLeft: string | number;
  338. readonly paddingLeftInPixels: number;
  339. paddingRight: string | number;
  340. readonly paddingRightInPixels: number;
  341. paddingTop: string | number;
  342. readonly paddingTopInPixels: number;
  343. paddingBottom: string | number;
  344. readonly paddingBottomInPixels: number;
  345. left: string | number;
  346. readonly leftInPixels: number;
  347. top: string | number;
  348. readonly topInPixels: number;
  349. linkOffsetX: string | number;
  350. readonly linkOffsetXInPixels: number;
  351. linkOffsetY: string | number;
  352. readonly linkOffsetYInPixels: number;
  353. readonly centerX: number;
  354. readonly centerY: number;
  355. constructor(name?: string | undefined);
  356. protected _getTypeName(): string;
  357. /** @hidden */
  358. _resetFontCache(): void;
  359. getLocalCoordinates(globalCoordinates: Vector2): Vector2;
  360. getLocalCoordinatesToRef(globalCoordinates: Vector2, result: Vector2): Control;
  361. getParentLocalCoordinates(globalCoordinates: Vector2): Vector2;
  362. moveToVector3(position: Vector3, scene: Scene): void;
  363. linkWithMesh(mesh: Nullable<AbstractMesh>): void;
  364. _moveToProjectedPosition(projectedPosition: Vector3): void;
  365. _markMatrixAsDirty(): void;
  366. _markAsDirty(): void;
  367. _markAllAsDirty(): void;
  368. _link(root: Nullable<Container>, host: AdvancedDynamicTexture): void;
  369. protected _transform(context: CanvasRenderingContext2D): void;
  370. protected _applyStates(context: CanvasRenderingContext2D): void;
  371. protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
  372. protected _clip(context: CanvasRenderingContext2D): void;
  373. _measure(): void;
  374. protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  375. protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  376. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  377. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  378. contains(x: number, y: number): boolean;
  379. _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean;
  380. _onPointerMove(target: Control, coordinates: Vector2): void;
  381. _onPointerEnter(target: Control): boolean;
  382. _onPointerOut(target: Control): void;
  383. _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
  384. _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
  385. forcePointerUp(pointerId?: Nullable<number>): void;
  386. _processObservables(type: number, x: number, y: number, pointerId: number, buttonIndex: number): boolean;
  387. private _prepareFont();
  388. dispose(): void;
  389. private static _HORIZONTAL_ALIGNMENT_LEFT;
  390. private static _HORIZONTAL_ALIGNMENT_RIGHT;
  391. private static _HORIZONTAL_ALIGNMENT_CENTER;
  392. private static _VERTICAL_ALIGNMENT_TOP;
  393. private static _VERTICAL_ALIGNMENT_BOTTOM;
  394. private static _VERTICAL_ALIGNMENT_CENTER;
  395. static readonly HORIZONTAL_ALIGNMENT_LEFT: number;
  396. static readonly HORIZONTAL_ALIGNMENT_RIGHT: number;
  397. static readonly HORIZONTAL_ALIGNMENT_CENTER: number;
  398. static readonly VERTICAL_ALIGNMENT_TOP: number;
  399. static readonly VERTICAL_ALIGNMENT_BOTTOM: number;
  400. static readonly VERTICAL_ALIGNMENT_CENTER: number;
  401. private static _FontHeightSizes;
  402. static _GetFontOffset(font: string): {
  403. ascent: number;
  404. height: number;
  405. descent: number;
  406. };
  407. static AddHeader(control: Control, text: string, size: string | number, options: {
  408. isHorizontal: boolean;
  409. controlFirst: boolean;
  410. }): StackPanel;
  411. protected static drawEllipse(x: number, y: number, width: number, height: number, context: CanvasRenderingContext2D): void;
  412. }
  413. }
  414. declare module BABYLON.GUI {
  415. class Container extends Control {
  416. name: string | undefined;
  417. protected _children: Control[];
  418. protected _measureForChildren: Measure;
  419. protected _background: string;
  420. protected _adaptWidthToChildren: boolean;
  421. protected _adaptHeightToChildren: boolean;
  422. adaptHeightToChildren: boolean;
  423. adaptWidthToChildren: boolean;
  424. background: string;
  425. readonly children: Control[];
  426. constructor(name?: string | undefined);
  427. protected _getTypeName(): string;
  428. getChildByName(name: string): Nullable<Control>;
  429. getChildByType(name: string, type: string): Nullable<Control>;
  430. containsControl(control: Control): boolean;
  431. addControl(control: Control): Container;
  432. removeControl(control: Control): Container;
  433. _reOrderControl(control: Control): void;
  434. _markMatrixAsDirty(): void;
  435. _markAllAsDirty(): void;
  436. protected _localDraw(context: CanvasRenderingContext2D): void;
  437. _link(root: Nullable<Container>, host: AdvancedDynamicTexture): void;
  438. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  439. _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean;
  440. protected _clipForChildren(context: CanvasRenderingContext2D): void;
  441. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  442. dispose(): void;
  443. }
  444. }
  445. declare module BABYLON.GUI {
  446. class StackPanel extends Container {
  447. name: string | undefined;
  448. private _isVertical;
  449. private _manualWidth;
  450. private _manualHeight;
  451. private _doNotTrackManualChanges;
  452. private _tempMeasureStore;
  453. isVertical: boolean;
  454. width: string | number;
  455. height: string | number;
  456. constructor(name?: string | undefined);
  457. protected _getTypeName(): string;
  458. protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  459. }
  460. }
  461. declare module BABYLON.GUI {
  462. class Rectangle extends Container {
  463. name: string | undefined;
  464. private _thickness;
  465. private _cornerRadius;
  466. thickness: number;
  467. cornerRadius: number;
  468. constructor(name?: string | undefined);
  469. protected _getTypeName(): string;
  470. protected _localDraw(context: CanvasRenderingContext2D): void;
  471. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  472. private _drawRoundedRect(context, offset?);
  473. protected _clipForChildren(context: CanvasRenderingContext2D): void;
  474. }
  475. }
  476. declare module BABYLON.GUI {
  477. class Ellipse extends Container {
  478. name: string | undefined;
  479. private _thickness;
  480. thickness: number;
  481. constructor(name?: string | undefined);
  482. protected _getTypeName(): string;
  483. protected _localDraw(context: CanvasRenderingContext2D): void;
  484. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  485. protected _clipForChildren(context: CanvasRenderingContext2D): void;
  486. }
  487. }
  488. declare module BABYLON.GUI {
  489. class Line extends Control {
  490. name: string | undefined;
  491. private _lineWidth;
  492. private _x1;
  493. private _y1;
  494. private _x2;
  495. private _y2;
  496. private _dash;
  497. private _connectedControl;
  498. private _connectedControlDirtyObserver;
  499. dash: Array<number>;
  500. connectedControl: Control;
  501. x1: string | number;
  502. y1: string | number;
  503. x2: string | number;
  504. y2: string | number;
  505. lineWidth: number;
  506. horizontalAlignment: number;
  507. verticalAlignment: number;
  508. private readonly _effectiveX2;
  509. private readonly _effectiveY2;
  510. constructor(name?: string | undefined);
  511. protected _getTypeName(): string;
  512. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  513. _measure(): void;
  514. protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  515. /**
  516. * Move one end of the line given 3D cartesian coordinates.
  517. * @param position Targeted world position
  518. * @param scene Scene
  519. * @param end (opt) Set to true to assign x2 and y2 coordinates of the line. Default assign to x1 and y1.
  520. */
  521. moveToVector3(position: Vector3, scene: Scene, end?: boolean): void;
  522. /**
  523. * Move one end of the line to a position in screen absolute space.
  524. * @param projectedPosition Position in screen absolute space (X, Y)
  525. * @param end (opt) Set to true to assign x2 and y2 coordinates of the line. Default assign to x1 and y1.
  526. */
  527. _moveToProjectedPosition(projectedPosition: Vector3, end?: boolean): void;
  528. }
  529. }
  530. declare module BABYLON.GUI {
  531. class Slider extends Control {
  532. name: string | undefined;
  533. private _thumbWidth;
  534. private _minimum;
  535. private _maximum;
  536. private _value;
  537. private _background;
  538. private _borderColor;
  539. private _barOffset;
  540. private _isThumbCircle;
  541. private _isThumbClamped;
  542. onValueChangedObservable: Observable<number>;
  543. borderColor: string;
  544. background: string;
  545. barOffset: string | number;
  546. readonly barOffsetInPixels: number;
  547. thumbWidth: string | number;
  548. readonly thumbWidthInPixels: number;
  549. minimum: number;
  550. maximum: number;
  551. value: number;
  552. isThumbCircle: boolean;
  553. isThumbClamped: boolean;
  554. constructor(name?: string | undefined);
  555. protected _getTypeName(): string;
  556. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  557. private _pointerIsDown;
  558. private _updateValueFromPointer(x, y);
  559. _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
  560. _onPointerMove(target: Control, coordinates: Vector2): void;
  561. _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
  562. }
  563. }
  564. declare module BABYLON.GUI {
  565. class Checkbox extends Control {
  566. name: string | undefined;
  567. private _isChecked;
  568. private _background;
  569. private _checkSizeRatio;
  570. private _thickness;
  571. thickness: number;
  572. onIsCheckedChangedObservable: Observable<boolean>;
  573. checkSizeRatio: number;
  574. background: string;
  575. isChecked: boolean;
  576. constructor(name?: string | undefined);
  577. protected _getTypeName(): string;
  578. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  579. _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
  580. }
  581. }
  582. declare module BABYLON.GUI {
  583. class RadioButton extends Control {
  584. name: string | undefined;
  585. private _isChecked;
  586. private _background;
  587. private _checkSizeRatio;
  588. private _thickness;
  589. thickness: number;
  590. group: string;
  591. onIsCheckedChangedObservable: Observable<boolean>;
  592. checkSizeRatio: number;
  593. background: string;
  594. isChecked: boolean;
  595. constructor(name?: string | undefined);
  596. protected _getTypeName(): string;
  597. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  598. _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
  599. }
  600. }
  601. declare module BABYLON.GUI {
  602. class TextBlock extends Control {
  603. /**
  604. * Defines the name of the control
  605. */
  606. name: string | undefined;
  607. private _text;
  608. private _textWrapping;
  609. private _textHorizontalAlignment;
  610. private _textVerticalAlignment;
  611. private _lines;
  612. private _resizeToFit;
  613. private _lineSpacing;
  614. private _outlineWidth;
  615. private _outlineColor;
  616. /**
  617. * An event triggered after the text is changed
  618. */
  619. onTextChangedObservable: Observable<TextBlock>;
  620. /**
  621. * An event triggered after the text was broken up into lines
  622. */
  623. onLinesReadyObservable: Observable<TextBlock>;
  624. /**
  625. * Return the line list (you may need to use the onLinesReadyObservable to make sure the list is ready)
  626. */
  627. readonly lines: any[];
  628. /**
  629. * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
  630. */
  631. /**
  632. * Gets or sets an boolean indicating that the TextBlock will be resized to fit container
  633. */
  634. resizeToFit: boolean;
  635. /**
  636. * Gets or sets a boolean indicating if text must be wrapped
  637. */
  638. /**
  639. * Gets or sets a boolean indicating if text must be wrapped
  640. */
  641. textWrapping: boolean;
  642. /**
  643. * Gets or sets text to display
  644. */
  645. /**
  646. * Gets or sets text to display
  647. */
  648. text: string;
  649. /**
  650. * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
  651. */
  652. /**
  653. * Gets or sets text horizontal alignment (BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER by default)
  654. */
  655. textHorizontalAlignment: number;
  656. /**
  657. * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
  658. */
  659. /**
  660. * Gets or sets text vertical alignment (BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER by default)
  661. */
  662. textVerticalAlignment: number;
  663. /**
  664. * Gets or sets line spacing value
  665. */
  666. /**
  667. * Gets or sets line spacing value
  668. */
  669. lineSpacing: string | number;
  670. /**
  671. * Gets or sets outlineWidth of the text to display
  672. */
  673. /**
  674. * Gets or sets outlineWidth of the text to display
  675. */
  676. outlineWidth: number;
  677. /**
  678. * Gets or sets outlineColor of the text to display
  679. */
  680. /**
  681. * Gets or sets outlineColor of the text to display
  682. */
  683. outlineColor: string;
  684. /**
  685. * Creates a new TextBlock object
  686. * @param name defines the name of the control
  687. * @param text defines the text to display (emptry string by default)
  688. */
  689. constructor(
  690. /**
  691. * Defines the name of the control
  692. */
  693. name?: string | undefined, text?: string);
  694. protected _getTypeName(): string;
  695. private _drawText(text, textWidth, y, context);
  696. /** @hidden */
  697. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  698. protected _applyStates(context: CanvasRenderingContext2D): void;
  699. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  700. protected _parseLine(line: string | undefined, context: CanvasRenderingContext2D): object;
  701. protected _parseLineWithTextWrapping(line: string | undefined, context: CanvasRenderingContext2D): object;
  702. protected _renderLines(context: CanvasRenderingContext2D): void;
  703. dispose(): void;
  704. }
  705. }
  706. declare var DOMImage: new (width?: number | undefined, height?: number | undefined) => HTMLImageElement;
  707. declare module BABYLON.GUI {
  708. class Image extends Control {
  709. name: string | undefined;
  710. private _domImage;
  711. private _imageWidth;
  712. private _imageHeight;
  713. private _loaded;
  714. private _stretch;
  715. private _source;
  716. private _autoScale;
  717. private _sourceLeft;
  718. private _sourceTop;
  719. private _sourceWidth;
  720. private _sourceHeight;
  721. private _cellWidth;
  722. private _cellHeight;
  723. private _cellId;
  724. sourceLeft: number;
  725. sourceTop: number;
  726. sourceWidth: number;
  727. sourceHeight: number;
  728. autoScale: boolean;
  729. stretch: number;
  730. domImage: HTMLImageElement;
  731. private _onImageLoaded();
  732. source: Nullable<string>;
  733. cellWidth: number;
  734. cellHeight: number;
  735. cellId: number;
  736. constructor(name?: string | undefined, url?: Nullable<string>);
  737. protected _getTypeName(): string;
  738. synchronizeSizeWithContent(): void;
  739. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  740. private static _STRETCH_NONE;
  741. private static _STRETCH_FILL;
  742. private static _STRETCH_UNIFORM;
  743. private static _STRETCH_EXTEND;
  744. static readonly STRETCH_NONE: number;
  745. static readonly STRETCH_FILL: number;
  746. static readonly STRETCH_UNIFORM: number;
  747. static readonly STRETCH_EXTEND: number;
  748. }
  749. }
  750. declare module BABYLON.GUI {
  751. class Button extends Rectangle {
  752. name: string | undefined;
  753. pointerEnterAnimation: () => void;
  754. pointerOutAnimation: () => void;
  755. pointerDownAnimation: () => void;
  756. pointerUpAnimation: () => void;
  757. constructor(name?: string | undefined);
  758. protected _getTypeName(): string;
  759. _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean;
  760. _onPointerEnter(target: Control): boolean;
  761. _onPointerOut(target: Control): void;
  762. _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
  763. _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
  764. static CreateImageButton(name: string, text: string, imageUrl: string): Button;
  765. static CreateImageOnlyButton(name: string, imageUrl: string): Button;
  766. static CreateSimpleButton(name: string, text: string): Button;
  767. static CreateImageWithCenterTextButton(name: string, text: string, imageUrl: string): Button;
  768. }
  769. }
  770. declare module BABYLON.GUI {
  771. class ColorPicker extends Control {
  772. name: string | undefined;
  773. private _colorWheelCanvas;
  774. private _value;
  775. private _tmpColor;
  776. private _pointerStartedOnSquare;
  777. private _pointerStartedOnWheel;
  778. private _squareLeft;
  779. private _squareTop;
  780. private _squareSize;
  781. private _h;
  782. private _s;
  783. private _v;
  784. onValueChangedObservable: Observable<Color3>;
  785. value: Color3;
  786. width: string | number;
  787. height: string | number;
  788. size: string | number;
  789. constructor(name?: string | undefined);
  790. protected _getTypeName(): string;
  791. private _updateSquareProps();
  792. private _drawGradientSquare(hueValue, left, top, width, height, context);
  793. private _drawCircle(centerX, centerY, radius, context);
  794. private _createColorWheelCanvas(radius, thickness);
  795. private _RGBtoHSV(color, result);
  796. private _HSVtoRGB(hue, saturation, value, result);
  797. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  798. private _pointerIsDown;
  799. private _updateValueFromPointer(x, y);
  800. private _isPointOnSquare(coordinates);
  801. private _isPointOnWheel(coordinates);
  802. _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
  803. _onPointerMove(target: Control, coordinates: Vector2): void;
  804. _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
  805. }
  806. }
  807. declare module BABYLON.GUI {
  808. class InputText extends Control implements IFocusableControl {
  809. name: string | undefined;
  810. private _text;
  811. private _placeholderText;
  812. private _background;
  813. private _focusedBackground;
  814. private _placeholderColor;
  815. private _thickness;
  816. private _margin;
  817. private _autoStretchWidth;
  818. private _maxWidth;
  819. private _isFocused;
  820. private _blinkTimeout;
  821. private _blinkIsEven;
  822. private _cursorOffset;
  823. private _scrollLeft;
  824. private _textWidth;
  825. private _clickedCoordinate;
  826. promptMessage: string;
  827. onTextChangedObservable: Observable<InputText>;
  828. onFocusObservable: Observable<InputText>;
  829. onBlurObservable: Observable<InputText>;
  830. maxWidth: string | number;
  831. readonly maxWidthInPixels: number;
  832. margin: string;
  833. readonly marginInPixels: number;
  834. autoStretchWidth: boolean;
  835. thickness: number;
  836. focusedBackground: string;
  837. background: string;
  838. placeholderColor: string;
  839. placeholderText: string;
  840. text: string;
  841. width: string | number;
  842. constructor(name?: string | undefined, text?: string);
  843. onBlur(): void;
  844. onFocus(): void;
  845. protected _getTypeName(): string;
  846. processKey(keyCode: number, key?: string): void;
  847. processKeyboard(evt: KeyboardEvent): void;
  848. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  849. _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
  850. _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
  851. dispose(): void;
  852. }
  853. }
  854. declare module BABYLON.GUI {
  855. class KeyPropertySet {
  856. width?: string;
  857. height?: string;
  858. paddingLeft?: string;
  859. paddingRight?: string;
  860. paddingTop?: string;
  861. paddingBottom?: string;
  862. color?: string;
  863. background?: string;
  864. }
  865. class VirtualKeyboard extends StackPanel {
  866. onKeyPressObservable: Observable<string>;
  867. defaultButtonWidth: string;
  868. defaultButtonHeight: string;
  869. defaultButtonPaddingLeft: string;
  870. defaultButtonPaddingRight: string;
  871. defaultButtonPaddingTop: string;
  872. defaultButtonPaddingBottom: string;
  873. defaultButtonColor: string;
  874. defaultButtonBackground: string;
  875. shiftButtonColor: string;
  876. selectedShiftThickness: number;
  877. shiftState: number;
  878. protected _getTypeName(): string;
  879. private _createKey(key, propertySet);
  880. addKeysRow(keys: Array<string>, propertySets?: Array<KeyPropertySet>): void;
  881. applyShiftState(shiftState: number): void;
  882. private _connectedInputText;
  883. private _onFocusObserver;
  884. private _onBlurObserver;
  885. private _onKeyPressObserver;
  886. readonly connectedInputText: Nullable<InputText>;
  887. connect(input: InputText): void;
  888. disconnect(): void;
  889. static CreateDefaultLayout(): VirtualKeyboard;
  890. }
  891. }
  892. declare module BABYLON.GUI {
  893. class MultiLine extends Control {
  894. name: string | undefined;
  895. private _lineWidth;
  896. private _dash;
  897. private _points;
  898. private _minX;
  899. private _minY;
  900. private _maxX;
  901. private _maxY;
  902. constructor(name?: string | undefined);
  903. dash: Array<number>;
  904. getAt(index: number): MultiLinePoint;
  905. onPointUpdate: () => void;
  906. add(...items: (AbstractMesh | Control | {
  907. x: string | number;
  908. y: string | number;
  909. })[]): MultiLinePoint[];
  910. push(item?: (AbstractMesh | Control | {
  911. x: string | number;
  912. y: string | number;
  913. })): MultiLinePoint;
  914. remove(value: number | MultiLinePoint): void;
  915. lineWidth: number;
  916. horizontalAlignment: number;
  917. verticalAlignment: number;
  918. protected _getTypeName(): string;
  919. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  920. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  921. _measure(): void;
  922. protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  923. dispose(): void;
  924. }
  925. }
  926. declare module BABYLON.GUI {
  927. /**
  928. * Class used to manage 3D user interface
  929. */
  930. class GUI3DManager implements BABYLON.IDisposable {
  931. private _scene;
  932. private _sceneDisposeObserver;
  933. private _utilityLayer;
  934. private _rootContainer;
  935. private _pointerObserver;
  936. _lastPickedControl: Control3D;
  937. /** @hidden */
  938. _lastControlOver: {
  939. [pointerId: number]: Control3D;
  940. };
  941. /** @hidden */
  942. _lastControlDown: {
  943. [pointerId: number]: Control3D;
  944. };
  945. /** Gets the hosting scene */
  946. readonly scene: Scene;
  947. readonly utilityLayer: Nullable<UtilityLayerRenderer>;
  948. /**
  949. * Creates a new GUI3DManager
  950. * @param scene
  951. */
  952. constructor(scene?: Scene);
  953. private _doPicking(type, pointerEvent);
  954. /**
  955. * Gets the root container
  956. */
  957. readonly rootContainer: Container3D;
  958. /**
  959. * Gets a boolean indicating if the given control is in the root child list
  960. * @param control defines the control to check
  961. * @returns true if the control is in the root child list
  962. */
  963. containsControl(control: Control3D): boolean;
  964. /**
  965. * Adds a control to the root child list
  966. * @param control defines the control to add
  967. * @returns the current manager
  968. */
  969. addControl(control: Control3D): GUI3DManager;
  970. /**
  971. * Removes the control from the root child list
  972. * @param control defines the control to remove
  973. * @returns the current container
  974. */
  975. removeControl(control: Control3D): GUI3DManager;
  976. /**
  977. * Releases all associated resources
  978. */
  979. dispose(): void;
  980. }
  981. }
  982. declare module BABYLON.GUI {
  983. class Vector3WithInfo extends Vector3 {
  984. buttonIndex: number;
  985. constructor(source: Vector3, buttonIndex?: number);
  986. }
  987. }
  988. declare module BABYLON.GUI {
  989. /**
  990. * Class used as base class for controls
  991. */
  992. class Control3D implements IDisposable, IBehaviorAware<Control3D> {
  993. /** Defines the control name */
  994. name: string | undefined;
  995. /** @hidden */
  996. _host: GUI3DManager;
  997. private _mesh;
  998. private _downCount;
  999. private _enterCount;
  1000. private _downPointerIds;
  1001. private _isVisible;
  1002. /** Callback used to start pointer enter animation */
  1003. pointerEnterAnimation: () => void;
  1004. /** Callback used to start pointer out animation */
  1005. pointerOutAnimation: () => void;
  1006. /** Callback used to start pointer down animation */
  1007. pointerDownAnimation: () => void;
  1008. /** Callback used to start pointer up animation */
  1009. pointerUpAnimation: () => void;
  1010. /**
  1011. * An event triggered when the pointer move over the control.
  1012. */
  1013. onPointerMoveObservable: Observable<Vector3>;
  1014. /**
  1015. * An event triggered when the pointer move out of the control.
  1016. */
  1017. onPointerOutObservable: Observable<Control3D>;
  1018. /**
  1019. * An event triggered when the pointer taps the control
  1020. */
  1021. onPointerDownObservable: Observable<Vector3WithInfo>;
  1022. /**
  1023. * An event triggered when pointer up
  1024. */
  1025. onPointerUpObservable: Observable<Vector3WithInfo>;
  1026. /**
  1027. * An event triggered when a control is clicked on
  1028. */
  1029. onPointerClickObservable: Observable<Vector3WithInfo>;
  1030. /**
  1031. * An event triggered when pointer enters the control
  1032. */
  1033. onPointerEnterObservable: Observable<Control3D>;
  1034. /**
  1035. * Gets or sets the parent container
  1036. */
  1037. parent: Nullable<Container3D>;
  1038. private _behaviors;
  1039. /**
  1040. * Gets the list of attached behaviors
  1041. * @see http://doc.babylonjs.com/features/behaviour
  1042. */
  1043. readonly behaviors: Behavior<Control3D>[];
  1044. /**
  1045. * Attach a behavior to the control
  1046. * @see http://doc.babylonjs.com/features/behaviour
  1047. * @param behavior defines the behavior to attach
  1048. * @returns the current control
  1049. */
  1050. addBehavior(behavior: Behavior<Control3D>): Control3D;
  1051. /**
  1052. * Remove an attached behavior
  1053. * @see http://doc.babylonjs.com/features/behaviour
  1054. * @param behavior defines the behavior to attach
  1055. * @returns the current control
  1056. */
  1057. removeBehavior(behavior: Behavior<Control3D>): Control3D;
  1058. /**
  1059. * Gets an attached behavior by name
  1060. * @param name defines the name of the behavior to look for
  1061. * @see http://doc.babylonjs.com/features/behaviour
  1062. * @returns null if behavior was not found else the requested behavior
  1063. */
  1064. getBehaviorByName(name: string): Nullable<Behavior<Control3D>>;
  1065. /** Gets or sets a boolean indicating if the control is visible */
  1066. isVisible: boolean;
  1067. /** Gets or sets the control position */
  1068. position: Vector3;
  1069. /**
  1070. * Creates a new control
  1071. * @param name defines the control name
  1072. */
  1073. constructor(
  1074. /** Defines the control name */
  1075. name?: string | undefined);
  1076. /**
  1077. * Gets a string representing the class name
  1078. */
  1079. readonly typeName: string;
  1080. protected _getTypeName(): string;
  1081. /**
  1082. * Gets the mesh used to render this control
  1083. */
  1084. readonly mesh: Nullable<Mesh>;
  1085. /**
  1086. * Link the control as child of the given mesh
  1087. * @param mesh defines the mesh to link to. Use null to unlink the control
  1088. * @returns the current control
  1089. */
  1090. linkToMesh(mesh: Nullable<AbstractMesh>): Control3D;
  1091. /**
  1092. * Get the attached mesh used to render the control
  1093. * @param scene defines the scene where the mesh must be attached
  1094. * @returns the attached mesh or null if none
  1095. */
  1096. prepareMesh(scene: Scene): Nullable<Mesh>;
  1097. /**
  1098. * Mesh creation.
  1099. * Can be overriden by children
  1100. * @param scene defines the scene where the mesh must be attached
  1101. * @returns the attached mesh or null if none
  1102. */
  1103. protected _createMesh(scene: Scene): Nullable<Mesh>;
  1104. /** @hidden */
  1105. _onPointerMove(target: Control3D, coordinates: Vector3): void;
  1106. /** @hidden */
  1107. _onPointerEnter(target: Control3D): boolean;
  1108. /** @hidden */
  1109. _onPointerOut(target: Control3D): void;
  1110. /** @hidden */
  1111. _onPointerDown(target: Control3D, coordinates: Vector3, pointerId: number, buttonIndex: number): boolean;
  1112. /** @hidden */
  1113. _onPointerUp(target: Control3D, coordinates: Vector3, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
  1114. /** @hidden */
  1115. forcePointerUp(pointerId?: Nullable<number>): void;
  1116. /** @hidden */
  1117. _processObservables(type: number, pickedPoint: Vector3, pointerId: number, buttonIndex: number): boolean;
  1118. /**
  1119. * Releases all associated resources
  1120. */
  1121. dispose(): void;
  1122. }
  1123. }
  1124. declare module BABYLON.GUI {
  1125. /**
  1126. * Class used to create containers for controls
  1127. */
  1128. class Container3D extends Control3D {
  1129. private _children;
  1130. /**
  1131. * Creates a new container
  1132. * @param name defines the container name
  1133. */
  1134. constructor(name?: string);
  1135. /**
  1136. * Gets a boolean indicating if the given control is in the children of this control
  1137. * @param control defines the control to check
  1138. * @returns true if the control is in the child list
  1139. */
  1140. containsControl(control: Control3D): boolean;
  1141. /**
  1142. * Adds a control to the children of this control
  1143. * @param control defines the control to add
  1144. * @returns the current container
  1145. */
  1146. addControl(control: Control3D): Container3D;
  1147. /**
  1148. * Removes the control from the children of this control
  1149. * @param control defines the control to remove
  1150. * @returns the current container
  1151. */
  1152. removeControl(control: Control3D): Container3D;
  1153. protected _getTypeName(): string;
  1154. /**
  1155. * Releases all associated resources
  1156. */
  1157. dispose(): void;
  1158. }
  1159. }
  1160. declare module BABYLON.GUI {
  1161. /**
  1162. * Class used to create a button in 3D
  1163. */
  1164. class Button3D extends Control3D {
  1165. private _currentMaterial;
  1166. /**
  1167. * Creates a new button
  1168. * @param name defines the control name
  1169. */
  1170. constructor(name?: string);
  1171. protected _getTypeName(): string;
  1172. protected _createMesh(scene: Scene): Mesh;
  1173. }
  1174. }