babylon.gui.d.ts 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
  1. declare module BABYLON.GUI {
  2. class AdvancedDynamicTexture extends DynamicTexture {
  3. private _isDirty;
  4. private _renderObserver;
  5. private _resizeObserver;
  6. private _pointerMoveObserver;
  7. private _pointerObserver;
  8. private _canvasBlurObserver;
  9. private _background;
  10. _rootContainer: Container;
  11. _lastControlOver: Control;
  12. _lastControlDown: Control;
  13. _capturingControl: Control;
  14. _shouldBlockPointer: boolean;
  15. _layerToDispose: Layer;
  16. _linkedControls: Control[];
  17. private _isFullscreen;
  18. private _fullscreenViewport;
  19. private _idealWidth;
  20. private _idealHeight;
  21. background: string;
  22. idealWidth: number;
  23. idealHeight: number;
  24. readonly layer: Layer;
  25. constructor(name: string, width: number, height: number, scene: Scene, generateMipMaps?: boolean, samplingMode?: number);
  26. executeOnAllControls(func: (control: Control) => void, container?: Container): void;
  27. markAsDirty(): void;
  28. addControl(control: Control): AdvancedDynamicTexture;
  29. removeControl(control: Control): AdvancedDynamicTexture;
  30. dispose(): void;
  31. private _onResize();
  32. private _checkUpdate(camera);
  33. private _render();
  34. private _doPicking(x, y, type);
  35. attach(): void;
  36. attachToMesh(mesh: AbstractMesh): void;
  37. private _attachToOnBlur(scene);
  38. static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number): AdvancedDynamicTexture;
  39. static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Scene): AdvancedDynamicTexture;
  40. }
  41. }
  42. declare module BABYLON.GUI {
  43. class Measure {
  44. left: number;
  45. top: number;
  46. width: number;
  47. height: number;
  48. constructor(left: number, top: number, width: number, height: number);
  49. copyFrom(other: Measure): void;
  50. isEqualsTo(other: Measure): boolean;
  51. static Empty(): Measure;
  52. }
  53. }
  54. declare module BABYLON.GUI {
  55. class Matrix2D {
  56. m: Float32Array;
  57. constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
  58. fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
  59. determinant(): number;
  60. invertToRef(result: Matrix2D): Matrix2D;
  61. multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
  62. transformCoordinates(x: number, y: number, result: Vector2): Matrix2D;
  63. static Identity(): Matrix2D;
  64. static TranslationToRef(x: number, y: number, result: Matrix2D): void;
  65. static ScalingToRef(x: number, y: number, result: Matrix2D): void;
  66. static RotationToRef(angle: number, result: Matrix2D): void;
  67. private static _TempPreTranslationMatrix;
  68. private static _TempPostTranslationMatrix;
  69. private static _TempRotationMatrix;
  70. private static _TempScalingMatrix;
  71. private static _TempCompose0;
  72. private static _TempCompose1;
  73. private static _TempCompose2;
  74. static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: Matrix2D, result: Matrix2D): void;
  75. }
  76. }
  77. declare module BABYLON.GUI {
  78. class ValueAndUnit {
  79. unit: number;
  80. negativeValueAllowed: boolean;
  81. private _value;
  82. ignoreAdaptiveScaling: boolean;
  83. constructor(value: any, unit?: number, negativeValueAllowed?: boolean);
  84. readonly isPercentage: boolean;
  85. readonly isPixel: boolean;
  86. readonly internalValue: number;
  87. getValue(host: AdvancedDynamicTexture): number;
  88. toString(host: AdvancedDynamicTexture): string;
  89. fromString(source: string | number): boolean;
  90. private static _Regex;
  91. private static _UNITMODE_PERCENTAGE;
  92. private static _UNITMODE_PIXEL;
  93. static readonly UNITMODE_PERCENTAGE: number;
  94. static readonly UNITMODE_PIXEL: number;
  95. }
  96. }
  97. declare module BABYLON.GUI {
  98. class Control {
  99. name: string;
  100. private _alpha;
  101. private _alphaSet;
  102. private _zIndex;
  103. _root: Container;
  104. _host: AdvancedDynamicTexture;
  105. _currentMeasure: Measure;
  106. private _fontFamily;
  107. private _fontSize;
  108. private _font;
  109. _width: ValueAndUnit;
  110. _height: ValueAndUnit;
  111. private _lastMeasuredFont;
  112. protected _fontOffset: {
  113. ascent: number;
  114. height: number;
  115. descent: number;
  116. };
  117. private _color;
  118. protected _horizontalAlignment: number;
  119. protected _verticalAlignment: number;
  120. private _isDirty;
  121. private _cachedParentMeasure;
  122. private _paddingLeft;
  123. private _paddingRight;
  124. private _paddingTop;
  125. private _paddingBottom;
  126. _left: ValueAndUnit;
  127. _top: ValueAndUnit;
  128. private _scaleX;
  129. private _scaleY;
  130. private _rotation;
  131. private _transformCenterX;
  132. private _transformCenterY;
  133. private _transformMatrix;
  134. private _invertTransformMatrix;
  135. private _transformedPosition;
  136. private _isMatrixDirty;
  137. private _cachedOffsetX;
  138. private _cachedOffsetY;
  139. private _isVisible;
  140. _linkedMesh: AbstractMesh;
  141. private _fontSet;
  142. private _dummyVector2;
  143. private _downCount;
  144. private _enterCount;
  145. isHitTestVisible: boolean;
  146. isPointerBlocker: boolean;
  147. protected _linkOffsetX: ValueAndUnit;
  148. protected _linkOffsetY: ValueAndUnit;
  149. readonly typeName: string;
  150. /**
  151. * An event triggered when the pointer move over the control.
  152. * @type {BABYLON.Observable}
  153. */
  154. onPointerMoveObservable: Observable<Vector2>;
  155. /**
  156. * An event triggered when the pointer move out of the control.
  157. * @type {BABYLON.Observable}
  158. */
  159. onPointerOutObservable: Observable<Control>;
  160. /**
  161. * An event triggered when the pointer taps the control
  162. * @type {BABYLON.Observable}
  163. */
  164. onPointerDownObservable: Observable<Vector2>;
  165. /**
  166. * An event triggered when pointer up
  167. * @type {BABYLON.Observable}
  168. */
  169. onPointerUpObservable: Observable<Vector2>;
  170. /**
  171. * An event triggered when pointer enters the control
  172. * @type {BABYLON.Observable}
  173. */
  174. onPointerEnterObservable: Observable<Control>;
  175. /**
  176. * An event triggered when the control is marked as dirty
  177. * @type {BABYLON.Observable}
  178. */
  179. onDirtyObservable: Observable<Control>;
  180. alpha: number;
  181. scaleX: number;
  182. scaleY: number;
  183. rotation: number;
  184. transformCenterY: number;
  185. transformCenterX: number;
  186. horizontalAlignment: number;
  187. verticalAlignment: number;
  188. width: string | number;
  189. height: string | number;
  190. fontFamily: string;
  191. fontSize: string | number;
  192. color: string;
  193. zIndex: number;
  194. isVisible: boolean;
  195. readonly isDirty: boolean;
  196. paddingLeft: string | number;
  197. paddingRight: string | number;
  198. paddingTop: string | number;
  199. paddingBottom: string | number;
  200. left: string | number;
  201. top: string | number;
  202. linkOffsetX: string | number;
  203. linkOffsetY: string | number;
  204. readonly centerX: number;
  205. readonly centerY: number;
  206. constructor(name?: string);
  207. protected _getTypeName(): string;
  208. linkWithMesh(mesh: AbstractMesh): void;
  209. _moveToProjectedPosition(projectedPosition: Vector3): void;
  210. _markMatrixAsDirty(): void;
  211. _markAsDirty(): void;
  212. _markAllAsDirty(): void;
  213. _link(root: Container, host: AdvancedDynamicTexture): void;
  214. protected _transform(context: CanvasRenderingContext2D): void;
  215. protected _applyStates(context: CanvasRenderingContext2D): void;
  216. protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
  217. protected _clip(context: CanvasRenderingContext2D): void;
  218. _measure(): void;
  219. protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  220. protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  221. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  222. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  223. contains(x: number, y: number): boolean;
  224. _processPicking(x: number, y: number, type: number): boolean;
  225. protected _onPointerMove(coordinates: Vector2): void;
  226. protected _onPointerEnter(): boolean;
  227. protected _onPointerOut(): void;
  228. protected _onPointerDown(coordinates: Vector2): boolean;
  229. protected _onPointerUp(coordinates: Vector2): void;
  230. forcePointerUp(): void;
  231. _processObservables(type: number, x: number, y: number): boolean;
  232. private _prepareFont();
  233. private static _HORIZONTAL_ALIGNMENT_LEFT;
  234. private static _HORIZONTAL_ALIGNMENT_RIGHT;
  235. private static _HORIZONTAL_ALIGNMENT_CENTER;
  236. private static _VERTICAL_ALIGNMENT_TOP;
  237. private static _VERTICAL_ALIGNMENT_BOTTOM;
  238. private static _VERTICAL_ALIGNMENT_CENTER;
  239. static readonly HORIZONTAL_ALIGNMENT_LEFT: number;
  240. static readonly HORIZONTAL_ALIGNMENT_RIGHT: number;
  241. static readonly HORIZONTAL_ALIGNMENT_CENTER: number;
  242. static readonly VERTICAL_ALIGNMENT_TOP: number;
  243. static readonly VERTICAL_ALIGNMENT_BOTTOM: number;
  244. static readonly VERTICAL_ALIGNMENT_CENTER: number;
  245. private static _FontHeightSizes;
  246. static _GetFontOffset(font: string): {
  247. ascent: number;
  248. height: number;
  249. descent: number;
  250. };
  251. static AddHeader(control: Control, text: string, size: string | number, options: {
  252. isHorizontal: boolean;
  253. controlFirst: boolean;
  254. }): StackPanel;
  255. }
  256. }
  257. declare module BABYLON.GUI {
  258. class Container extends Control {
  259. name: string;
  260. protected _children: Control[];
  261. protected _measureForChildren: Measure;
  262. protected _background: string;
  263. background: string;
  264. readonly children: Control[];
  265. constructor(name?: string);
  266. protected _getTypeName(): string;
  267. getChildByName(name: string): Control;
  268. getChildByType(name: string, type: string): Control;
  269. containsControl(control: Control): boolean;
  270. addControl(control: Control): Container;
  271. removeControl(control: Control): Container;
  272. _reOrderControl(control: Control): void;
  273. _markMatrixAsDirty(): void;
  274. _markAllAsDirty(): void;
  275. protected _localDraw(context: CanvasRenderingContext2D): void;
  276. _link(root: Container, host: AdvancedDynamicTexture): void;
  277. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  278. _processPicking(x: number, y: number, type: number): boolean;
  279. protected _clipForChildren(context: CanvasRenderingContext2D): void;
  280. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  281. }
  282. }
  283. declare module BABYLON.GUI {
  284. class StackPanel extends Container {
  285. name: string;
  286. private _isVertical;
  287. private _tempMeasureStore;
  288. isVertical: boolean;
  289. constructor(name?: string);
  290. protected _getTypeName(): string;
  291. protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  292. }
  293. }
  294. declare module BABYLON.GUI {
  295. class Rectangle extends Container {
  296. name: string;
  297. private _thickness;
  298. private _cornerRadius;
  299. thickness: number;
  300. cornerRadius: number;
  301. constructor(name?: string);
  302. protected _getTypeName(): string;
  303. protected _localDraw(context: CanvasRenderingContext2D): void;
  304. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  305. private _drawRoundedRect(context, offset?);
  306. protected _clipForChildren(context: CanvasRenderingContext2D): void;
  307. }
  308. }
  309. declare module BABYLON.GUI {
  310. class Ellipse extends Container {
  311. name: string;
  312. private _thickness;
  313. thickness: number;
  314. constructor(name?: string);
  315. protected _getTypeName(): string;
  316. protected _localDraw(context: CanvasRenderingContext2D): void;
  317. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  318. protected _clipForChildren(context: CanvasRenderingContext2D): void;
  319. }
  320. }
  321. declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
  322. declare module BABYLON.GUI {
  323. class Line extends Control {
  324. name: string;
  325. private _lineWidth;
  326. private _background;
  327. private _x1;
  328. private _y1;
  329. private _x2;
  330. private _y2;
  331. private _dash;
  332. private _connectedControl;
  333. private _connectedControlDirtyObserver;
  334. dash: Array<number>;
  335. connectedControl: Control;
  336. x1: string | number;
  337. y1: string | number;
  338. x2: string | number;
  339. y2: string | number;
  340. lineWidth: number;
  341. horizontalAlignment: number;
  342. verticalAlignment: number;
  343. private readonly _effectiveX2;
  344. private readonly _effectiveY2;
  345. constructor(name?: string);
  346. protected _getTypeName(): string;
  347. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  348. _measure(): void;
  349. protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  350. _moveToProjectedPosition(projectedPosition: Vector3): void;
  351. }
  352. }
  353. declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
  354. declare module BABYLON.GUI {
  355. class Slider extends Control {
  356. name: string;
  357. private _thumbWidth;
  358. private _minimum;
  359. private _maximum;
  360. private _value;
  361. private _background;
  362. private _borderColor;
  363. private _barOffset;
  364. onValueChangedObservable: Observable<number>;
  365. borderColor: string;
  366. background: string;
  367. barOffset: string | number;
  368. thumbWidth: string | number;
  369. minimum: number;
  370. maximum: number;
  371. value: number;
  372. constructor(name?: string);
  373. protected _getTypeName(): string;
  374. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  375. private _pointerIsDown;
  376. private _updateValueFromPointer(x);
  377. protected _onPointerDown(coordinates: Vector2): boolean;
  378. protected _onPointerMove(coordinates: Vector2): void;
  379. protected _onPointerUp(coordinates: Vector2): void;
  380. }
  381. }
  382. declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
  383. declare module BABYLON.GUI {
  384. class Checkbox extends Control {
  385. name: string;
  386. private _isChecked;
  387. private _background;
  388. private _checkSizeRatio;
  389. private _thickness;
  390. thickness: number;
  391. onIsCheckedChangedObservable: Observable<boolean>;
  392. checkSizeRatio: number;
  393. background: string;
  394. isChecked: boolean;
  395. constructor(name?: string);
  396. protected _getTypeName(): string;
  397. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  398. protected _onPointerDown(coordinates: Vector2): boolean;
  399. }
  400. }
  401. declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
  402. declare module BABYLON.GUI {
  403. class RadioButton extends Control {
  404. name: string;
  405. private _isChecked;
  406. private _background;
  407. private _checkSizeRatio;
  408. private _thickness;
  409. thickness: number;
  410. group: string;
  411. onIsCheckedChangedObservable: Observable<boolean>;
  412. checkSizeRatio: number;
  413. background: string;
  414. isChecked: boolean;
  415. constructor(name?: string);
  416. protected _getTypeName(): string;
  417. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  418. protected _onPointerDown(coordinates: Vector2): boolean;
  419. }
  420. }
  421. declare module BABYLON.GUI {
  422. class TextBlock extends Control {
  423. name: string;
  424. private _text;
  425. private _textY;
  426. private _textWrapping;
  427. private _textHorizontalAlignment;
  428. private _textVerticalAlignment;
  429. private _lines;
  430. private _totalHeight;
  431. textWrapping: boolean;
  432. text: string;
  433. textHorizontalAlignment: number;
  434. textVerticalAlignment: number;
  435. constructor(name?: string, text?: string);
  436. protected _getTypeName(): string;
  437. private _drawText(text, textWidth, y, context);
  438. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  439. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  440. protected _renderLines(context: CanvasRenderingContext2D): void;
  441. }
  442. }
  443. declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
  444. declare module BABYLON.GUI {
  445. class Image extends Control {
  446. name: string;
  447. private _domImage;
  448. private _imageWidth;
  449. private _imageHeight;
  450. private _loaded;
  451. private _stretch;
  452. private _source;
  453. private _autoScale;
  454. autoScale: boolean;
  455. stretch: number;
  456. domImage: HTMLImageElement;
  457. private _onImageLoaded();
  458. source: string;
  459. constructor(name?: string, url?: string);
  460. protected _getTypeName(): string;
  461. synchronizeSizeWithContent(): void;
  462. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  463. private static _STRETCH_NONE;
  464. private static _STRETCH_FILL;
  465. private static _STRETCH_UNIFORM;
  466. private static _STRETCH_EXTEND;
  467. static readonly STRETCH_NONE: number;
  468. static readonly STRETCH_FILL: number;
  469. static readonly STRETCH_UNIFORM: number;
  470. static readonly STRETCH_EXTEND: number;
  471. }
  472. }
  473. declare module BABYLON.GUI {
  474. class Button extends Rectangle {
  475. name: string;
  476. pointerEnterAnimation: () => void;
  477. pointerOutAnimation: () => void;
  478. pointerDownAnimation: () => void;
  479. pointerUpAnimation: () => void;
  480. constructor(name?: string);
  481. protected _getTypeName(): string;
  482. _processPicking(x: number, y: number, type: number): boolean;
  483. protected _onPointerEnter(): boolean;
  484. protected _onPointerOut(): void;
  485. protected _onPointerDown(coordinates: Vector2): boolean;
  486. protected _onPointerUp(coordinates: Vector2): void;
  487. static CreateImageButton(name: string, text: string, imageUrl: string): Button;
  488. static CreateImageOnlyButton(name: string, imageUrl: string): Button;
  489. static CreateSimpleButton(name: string, text: string): Button;
  490. }
  491. }
  492. declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
  493. declare module BABYLON.GUI {
  494. class ColorPicker extends Control {
  495. name: string;
  496. private _colorWheelCanvas;
  497. private _value;
  498. private _tmpColor;
  499. private _pointerStartedOnSquare;
  500. private _pointerStartedOnWheel;
  501. private _squareLeft;
  502. private _squareTop;
  503. private _squareSize;
  504. private _h;
  505. private _s;
  506. private _v;
  507. onValueChangedObservable: Observable<Color3>;
  508. value: Color3;
  509. width: string | number;
  510. height: string | number;
  511. size: string | number;
  512. constructor(name?: string);
  513. protected _getTypeName(): string;
  514. private _updateSquareProps();
  515. private _drawGradientSquare(hueValue, left, top, width, height, context);
  516. private _drawCircle(centerX, centerY, radius, context);
  517. private _createColorWheelCanvas(radius, thickness);
  518. private _RGBtoHSV(color, result);
  519. private _HSVtoRGB(hue, saturation, value, result);
  520. _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
  521. private _pointerIsDown;
  522. private _updateValueFromPointer(x, y);
  523. private _isPointOnSquare(coordinates);
  524. private _isPointOnWheel(coordinates);
  525. protected _onPointerDown(coordinates: Vector2): boolean;
  526. protected _onPointerMove(coordinates: Vector2): void;
  527. protected _onPointerUp(coordinates: Vector2): void;
  528. }
  529. }