babylon.gui.module.d.ts 43 KB

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