control.ts 52 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615
  1. import { Container } from "./container";
  2. import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
  3. import { ValueAndUnit } from "../valueAndUnit";
  4. import { Nullable, Observer, Vector2, AbstractMesh, Observable, Vector3, Scene, Tools, Matrix, PointerEventTypes } from "babylonjs";
  5. import { Measure } from "../measure";
  6. import { Style } from "../style";
  7. import { Matrix2D, Vector2WithInfo } from "../math2D";
  8. /**
  9. * Root class used for all 2D controls
  10. * @see http://doc.babylonjs.com/how_to/gui#controls
  11. */
  12. export class Control {
  13. /**
  14. * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
  15. */
  16. public static AllowAlphaInheritance = false;
  17. private _alpha = 1;
  18. private _alphaSet = false;
  19. private _zIndex = 0;
  20. /** @hidden */
  21. public _root: Nullable<Container>;
  22. /** @hidden */
  23. public _host: AdvancedDynamicTexture;
  24. /** Gets or sets the control parent */
  25. public parent: Nullable<Container>;
  26. /** @hidden */
  27. public _currentMeasure = Measure.Empty();
  28. private _fontFamily = "Arial";
  29. private _fontStyle = "";
  30. private _fontWeight = "";
  31. private _fontSize = new ValueAndUnit(18, ValueAndUnit.UNITMODE_PIXEL, false);
  32. private _font: string;
  33. /** @hidden */
  34. public _width = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
  35. /** @hidden */
  36. public _height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
  37. /** @hidden */
  38. protected _fontOffset: { ascent: number, height: number, descent: number };
  39. private _color = "";
  40. private _style: Nullable<Style> = null;
  41. private _styleObserver: Nullable<Observer<Style>>;
  42. /** @hidden */
  43. protected _horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
  44. /** @hidden */
  45. protected _verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
  46. private _isDirty = true;
  47. /** @hidden */
  48. public _tempParentMeasure = Measure.Empty();
  49. /** @hidden */
  50. protected _cachedParentMeasure = Measure.Empty();
  51. private _paddingLeft = new ValueAndUnit(0);
  52. private _paddingRight = new ValueAndUnit(0);
  53. private _paddingTop = new ValueAndUnit(0);
  54. private _paddingBottom = new ValueAndUnit(0);
  55. /** @hidden */
  56. public _left = new ValueAndUnit(0);
  57. /** @hidden */
  58. public _top = new ValueAndUnit(0);
  59. private _scaleX = 1.0;
  60. private _scaleY = 1.0;
  61. private _rotation = 0;
  62. private _transformCenterX = 0.5;
  63. private _transformCenterY = 0.5;
  64. private _transformMatrix = Matrix2D.Identity();
  65. /** @hidden */
  66. protected _invertTransformMatrix = Matrix2D.Identity();
  67. /** @hidden */
  68. protected _transformedPosition = Vector2.Zero();
  69. private _onlyMeasureMode = false;
  70. private _isMatrixDirty = true;
  71. private _cachedOffsetX: number;
  72. private _cachedOffsetY: number;
  73. private _isVisible = true;
  74. private _isHighlighted = false;
  75. /** @hidden */
  76. public _linkedMesh: Nullable<AbstractMesh>;
  77. private _fontSet = false;
  78. private _dummyVector2 = Vector2.Zero();
  79. private _downCount = 0;
  80. private _enterCount = -1;
  81. private _doNotRender = false;
  82. private _downPointerIds: { [id: number]: boolean } = {};
  83. protected _isEnabled = true;
  84. protected _disabledColor = "#9a9a9a";
  85. /** @hidden */
  86. public _tag: any;
  87. /**
  88. * Gets or sets the unique id of the node. Please note that this number will be updated when the control is added to a container
  89. */
  90. public uniqueId: number;
  91. /**
  92. * Gets or sets an object used to store user defined information for the node
  93. */
  94. public metadata: any = null;
  95. /** Gets or sets a boolean indicating if the control can be hit with pointer events */
  96. public isHitTestVisible = true;
  97. /** Gets or sets a boolean indicating if the control can block pointer events */
  98. public isPointerBlocker = false;
  99. /** Gets or sets a boolean indicating if the control can be focusable */
  100. public isFocusInvisible = false;
  101. /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
  102. public clipChildren = true;
  103. /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
  104. public shadowOffsetX = 0;
  105. /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
  106. public shadowOffsetY = 0;
  107. /** Gets or sets a value indicating the amount of blur to use to render the shadow */
  108. public shadowBlur = 0;
  109. /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
  110. public shadowColor = '#000';
  111. /** Gets or sets the cursor to use when the control is hovered */
  112. public hoverCursor = "";
  113. /** @hidden */
  114. protected _linkOffsetX = new ValueAndUnit(0);
  115. /** @hidden */
  116. protected _linkOffsetY = new ValueAndUnit(0);
  117. // Properties
  118. /** Gets the control type name */
  119. public get typeName(): string {
  120. return this._getTypeName();
  121. }
  122. /**
  123. * Get the current class name of the control.
  124. * @returns current class name
  125. */
  126. public getClassName(): string {
  127. return this._getTypeName();
  128. }
  129. /**
  130. * An event triggered when the pointer move over the control.
  131. */
  132. public onPointerMoveObservable = new Observable<Vector2>();
  133. /**
  134. * An event triggered when the pointer move out of the control.
  135. */
  136. public onPointerOutObservable = new Observable<Control>();
  137. /**
  138. * An event triggered when the pointer taps the control
  139. */
  140. public onPointerDownObservable = new Observable<Vector2WithInfo>();
  141. /**
  142. * An event triggered when pointer up
  143. */
  144. public onPointerUpObservable = new Observable<Vector2WithInfo>();
  145. /**
  146. * An event triggered when a control is clicked on
  147. */
  148. public onPointerClickObservable = new Observable<Vector2WithInfo>();
  149. /**
  150. * An event triggered when pointer enters the control
  151. */
  152. public onPointerEnterObservable = new Observable<Control>();
  153. /**
  154. * An event triggered when the control is marked as dirty
  155. */
  156. public onDirtyObservable = new Observable<Control>();
  157. /**
  158. * An event triggered before drawing the control
  159. */
  160. public onBeforeDrawObservable = new Observable<Control>();
  161. /**
  162. * An event triggered after the control was drawn
  163. */
  164. public onAfterDrawObservable = new Observable<Control>();
  165. /** Gets or set information about font offsets (used to render and align text) */
  166. public get fontOffset(): { ascent: number, height: number, descent: number } {
  167. return this._fontOffset;
  168. }
  169. public set fontOffset(offset: { ascent: number, height: number, descent: number }) {
  170. this._fontOffset = offset;
  171. }
  172. /** Gets or sets alpha value for the control (1 means opaque and 0 means entirely transparent) */
  173. public get alpha(): number {
  174. return this._alpha;
  175. }
  176. public set alpha(value: number) {
  177. if (this._alpha === value) {
  178. return;
  179. }
  180. this._alphaSet = true;
  181. this._alpha = value;
  182. this._markAsDirty();
  183. }
  184. /**
  185. * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
  186. */
  187. public get isHighlighted(): boolean {
  188. return this._isHighlighted;
  189. }
  190. public set isHighlighted(value: boolean) {
  191. if (this._isHighlighted === value) {
  192. return;
  193. }
  194. this._isHighlighted = value;
  195. this._markAsDirty();
  196. }
  197. /** Gets or sets a value indicating the scale factor on X axis (1 by default)
  198. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  199. */
  200. public get scaleX(): number {
  201. return this._scaleX;
  202. }
  203. public set scaleX(value: number) {
  204. if (this._scaleX === value) {
  205. return;
  206. }
  207. this._scaleX = value;
  208. this._markAsDirty();
  209. this._markMatrixAsDirty();
  210. }
  211. /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
  212. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  213. */
  214. public get scaleY(): number {
  215. return this._scaleY;
  216. }
  217. public set scaleY(value: number) {
  218. if (this._scaleY === value) {
  219. return;
  220. }
  221. this._scaleY = value;
  222. this._markAsDirty();
  223. this._markMatrixAsDirty();
  224. }
  225. /** Gets or sets the rotation angle (0 by default)
  226. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  227. */
  228. public get rotation(): number {
  229. return this._rotation;
  230. }
  231. public set rotation(value: number) {
  232. if (this._rotation === value) {
  233. return;
  234. }
  235. this._rotation = value;
  236. this._markAsDirty();
  237. this._markMatrixAsDirty();
  238. }
  239. /** Gets or sets the transformation center on Y axis (0 by default)
  240. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  241. */
  242. public get transformCenterY(): number {
  243. return this._transformCenterY;
  244. }
  245. public set transformCenterY(value: number) {
  246. if (this._transformCenterY === value) {
  247. return;
  248. }
  249. this._transformCenterY = value;
  250. this._markAsDirty();
  251. this._markMatrixAsDirty();
  252. }
  253. /** Gets or sets the transformation center on X axis (0 by default)
  254. * @see http://doc.babylonjs.com/how_to/gui#rotation-and-scaling
  255. */
  256. public get transformCenterX(): number {
  257. return this._transformCenterX;
  258. }
  259. public set transformCenterX(value: number) {
  260. if (this._transformCenterX === value) {
  261. return;
  262. }
  263. this._transformCenterX = value;
  264. this._markAsDirty();
  265. this._markMatrixAsDirty();
  266. }
  267. /**
  268. * Gets or sets the horizontal alignment
  269. * @see http://doc.babylonjs.com/how_to/gui#alignments
  270. */
  271. public get horizontalAlignment(): number {
  272. return this._horizontalAlignment;
  273. }
  274. public set horizontalAlignment(value: number) {
  275. if (this._horizontalAlignment === value) {
  276. return;
  277. }
  278. this._horizontalAlignment = value;
  279. this._markAsDirty();
  280. }
  281. /**
  282. * Gets or sets the vertical alignment
  283. * @see http://doc.babylonjs.com/how_to/gui#alignments
  284. */
  285. public get verticalAlignment(): number {
  286. return this._verticalAlignment;
  287. }
  288. public set verticalAlignment(value: number) {
  289. if (this._verticalAlignment === value) {
  290. return;
  291. }
  292. this._verticalAlignment = value;
  293. this._markAsDirty();
  294. }
  295. /**
  296. * Gets or sets control width
  297. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  298. */
  299. public get width(): string | number {
  300. return this._width.toString(this._host);
  301. }
  302. /**
  303. * Gets control width in pixel
  304. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  305. */
  306. public get widthInPixels(): number {
  307. return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
  308. }
  309. public set width(value: string | number) {
  310. if (this._width.toString(this._host) === value) {
  311. return;
  312. }
  313. if (this._width.fromString(value)) {
  314. this._markAsDirty();
  315. }
  316. }
  317. /**
  318. * Gets or sets control height
  319. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  320. */
  321. public get height(): string | number {
  322. return this._height.toString(this._host);
  323. }
  324. /**
  325. * Gets control height in pixel
  326. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  327. */
  328. public get heightInPixels(): number {
  329. return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
  330. }
  331. public set height(value: string | number) {
  332. if (this._height.toString(this._host) === value) {
  333. return;
  334. }
  335. if (this._height.fromString(value)) {
  336. this._markAsDirty();
  337. }
  338. }
  339. /** Gets or set font family */
  340. public get fontFamily(): string {
  341. return this._fontFamily;
  342. }
  343. public set fontFamily(value: string) {
  344. if (this._fontFamily === value) {
  345. return;
  346. }
  347. this._fontFamily = value;
  348. this._resetFontCache();
  349. }
  350. /** Gets or sets font style */
  351. public get fontStyle(): string {
  352. return this._fontStyle;
  353. }
  354. public set fontStyle(value: string) {
  355. if (this._fontStyle === value) {
  356. return;
  357. }
  358. this._fontStyle = value;
  359. this._resetFontCache();
  360. }
  361. /** Gets or sets font weight */
  362. public get fontWeight(): string {
  363. return this._fontWeight;
  364. }
  365. public set fontWeight(value: string) {
  366. if (this._fontWeight === value) {
  367. return;
  368. }
  369. this._fontWeight = value;
  370. this._resetFontCache();
  371. }
  372. /**
  373. * Gets or sets style
  374. * @see http://doc.babylonjs.com/how_to/gui#styles
  375. */
  376. public get style(): Nullable<Style> {
  377. return this._style;
  378. }
  379. public set style(value: Nullable<Style>) {
  380. if (this._style) {
  381. this._style.onChangedObservable.remove(this._styleObserver);
  382. this._styleObserver = null;
  383. }
  384. this._style = value;
  385. if (this._style) {
  386. this._styleObserver = this._style.onChangedObservable.add(() => {
  387. this._markAsDirty();
  388. this._resetFontCache();
  389. });
  390. }
  391. this._markAsDirty();
  392. this._resetFontCache();
  393. }
  394. /** @hidden */
  395. public get _isFontSizeInPercentage(): boolean {
  396. return this._fontSize.isPercentage;
  397. }
  398. /** Gets font size in pixels */
  399. public get fontSizeInPixels(): number {
  400. let fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
  401. if (fontSizeToUse.isPixel) {
  402. return fontSizeToUse.getValue(this._host);
  403. }
  404. return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
  405. }
  406. /** Gets or sets font size */
  407. public get fontSize(): string | number {
  408. return this._fontSize.toString(this._host);
  409. }
  410. public set fontSize(value: string | number) {
  411. if (this._fontSize.toString(this._host) === value) {
  412. return;
  413. }
  414. if (this._fontSize.fromString(value)) {
  415. this._markAsDirty();
  416. this._resetFontCache();
  417. }
  418. }
  419. /** Gets or sets foreground color */
  420. public get color(): string {
  421. return this._color;
  422. }
  423. public set color(value: string) {
  424. if (this._color === value) {
  425. return;
  426. }
  427. this._color = value;
  428. this._markAsDirty();
  429. }
  430. /** Gets or sets z index which is used to reorder controls on the z axis */
  431. public get zIndex(): number {
  432. return this._zIndex;
  433. }
  434. public set zIndex(value: number) {
  435. if (this.zIndex === value) {
  436. return;
  437. }
  438. this._zIndex = value;
  439. if (this._root) {
  440. this._root._reOrderControl(this);
  441. }
  442. }
  443. /** Gets or sets a boolean indicating if the control can be rendered */
  444. public get notRenderable(): boolean {
  445. return this._doNotRender;
  446. }
  447. public set notRenderable(value: boolean) {
  448. if (this._doNotRender === value) {
  449. return;
  450. }
  451. this._doNotRender = value;
  452. this._markAsDirty();
  453. }
  454. /** Gets or sets a boolean indicating if the control is visible */
  455. public get isVisible(): boolean {
  456. return this._isVisible;
  457. }
  458. public set isVisible(value: boolean) {
  459. if (this._isVisible === value) {
  460. return;
  461. }
  462. this._isVisible = value;
  463. this._markAsDirty(true);
  464. }
  465. /** Gets a boolean indicating that the control needs to update its rendering */
  466. public get isDirty(): boolean {
  467. return this._isDirty;
  468. }
  469. /**
  470. * Gets the current linked mesh (or null if none)
  471. */
  472. public get linkedMesh(): Nullable<AbstractMesh> {
  473. return this._linkedMesh;
  474. }
  475. /**
  476. * Gets or sets a value indicating the padding to use on the left of the control
  477. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  478. */
  479. public get paddingLeft(): string | number {
  480. return this._paddingLeft.toString(this._host);
  481. }
  482. /**
  483. * Gets a value indicating the padding in pixels to use on the left of the control
  484. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  485. */
  486. public get paddingLeftInPixels(): number {
  487. return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
  488. }
  489. public set paddingLeft(value: string | number) {
  490. if (this._paddingLeft.fromString(value)) {
  491. this._markAsDirty();
  492. }
  493. }
  494. /**
  495. * Gets or sets a value indicating the padding to use on the right of the control
  496. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  497. */
  498. public get paddingRight(): string | number {
  499. return this._paddingRight.toString(this._host);
  500. }
  501. /**
  502. * Gets a value indicating the padding in pixels to use on the right of the control
  503. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  504. */
  505. public get paddingRightInPixels(): number {
  506. return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
  507. }
  508. public set paddingRight(value: string | number) {
  509. if (this._paddingRight.fromString(value)) {
  510. this._markAsDirty();
  511. }
  512. }
  513. /**
  514. * Gets or sets a value indicating the padding to use on the top of the control
  515. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  516. */
  517. public get paddingTop(): string | number {
  518. return this._paddingTop.toString(this._host);
  519. }
  520. /**
  521. * Gets a value indicating the padding in pixels to use on the top of the control
  522. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  523. */
  524. public get paddingTopInPixels(): number {
  525. return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
  526. }
  527. public set paddingTop(value: string | number) {
  528. if (this._paddingTop.fromString(value)) {
  529. this._markAsDirty();
  530. }
  531. }
  532. /**
  533. * Gets or sets a value indicating the padding to use on the bottom of the control
  534. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  535. */
  536. public get paddingBottom(): string | number {
  537. return this._paddingBottom.toString(this._host);
  538. }
  539. /**
  540. * Gets a value indicating the padding in pixels to use on the bottom of the control
  541. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  542. */
  543. public get paddingBottomInPixels(): number {
  544. return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
  545. }
  546. public set paddingBottom(value: string | number) {
  547. if (this._paddingBottom.fromString(value)) {
  548. this._markAsDirty();
  549. }
  550. }
  551. /**
  552. * Gets or sets a value indicating the left coordinate of the control
  553. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  554. */
  555. public get left(): string | number {
  556. return this._left.toString(this._host);
  557. }
  558. /**
  559. * Gets a value indicating the left coordinate in pixels of the control
  560. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  561. */
  562. public get leftInPixels(): number {
  563. return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
  564. }
  565. public set left(value: string | number) {
  566. if (this._left.fromString(value)) {
  567. this._markAsDirty();
  568. }
  569. }
  570. /**
  571. * Gets or sets a value indicating the top coordinate of the control
  572. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  573. */
  574. public get top(): string | number {
  575. return this._top.toString(this._host);
  576. }
  577. /**
  578. * Gets a value indicating the top coordinate in pixels of the control
  579. * @see http://doc.babylonjs.com/how_to/gui#position-and-size
  580. */
  581. public get topInPixels(): number {
  582. return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
  583. }
  584. public set top(value: string | number) {
  585. if (this._top.fromString(value)) {
  586. this._markAsDirty();
  587. }
  588. }
  589. /**
  590. * Gets or sets a value indicating the offset on X axis to the linked mesh
  591. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  592. */
  593. public get linkOffsetX(): string | number {
  594. return this._linkOffsetX.toString(this._host);
  595. }
  596. /**
  597. * Gets a value indicating the offset in pixels on X axis to the linked mesh
  598. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  599. */
  600. public get linkOffsetXInPixels(): number {
  601. return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
  602. }
  603. public set linkOffsetX(value: string | number) {
  604. if (this._linkOffsetX.fromString(value)) {
  605. this._markAsDirty();
  606. }
  607. }
  608. /**
  609. * Gets or sets a value indicating the offset on Y axis to the linked mesh
  610. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  611. */
  612. public get linkOffsetY(): string | number {
  613. return this._linkOffsetY.toString(this._host);
  614. }
  615. /**
  616. * Gets a value indicating the offset in pixels on Y axis to the linked mesh
  617. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  618. */
  619. public get linkOffsetYInPixels(): number {
  620. return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
  621. }
  622. public set linkOffsetY(value: string | number) {
  623. if (this._linkOffsetY.fromString(value)) {
  624. this._markAsDirty();
  625. }
  626. }
  627. /** Gets the center coordinate on X axis */
  628. public get centerX(): number {
  629. return this._currentMeasure.left + this._currentMeasure.width / 2;
  630. }
  631. /** Gets the center coordinate on Y axis */
  632. public get centerY(): number {
  633. return this._currentMeasure.top + this._currentMeasure.height / 2;
  634. }
  635. /** Gets or sets if control is Enabled*/
  636. public get isEnabled(): boolean {
  637. return this._isEnabled;
  638. }
  639. public set isEnabled(value: boolean) {
  640. if (this._isEnabled === value) {
  641. return;
  642. }
  643. this._isEnabled = value;
  644. this._markAsDirty();
  645. }
  646. /** Gets or sets background color of control if it's disabled*/
  647. public get disabledColor(): string {
  648. return this._disabledColor;
  649. }
  650. public set disabledColor(value: string) {
  651. if (this._disabledColor === value) {
  652. return;
  653. }
  654. this._disabledColor = value;
  655. this._markAsDirty();
  656. }
  657. // Functions
  658. /**
  659. * Creates a new control
  660. * @param name defines the name of the control
  661. */
  662. constructor(
  663. /** defines the name of the control */
  664. public name?: string) {
  665. }
  666. /** @hidden */
  667. protected _getTypeName(): string {
  668. return "Control";
  669. }
  670. /** @hidden */
  671. public _resetFontCache(): void {
  672. this._fontSet = true;
  673. this._markAsDirty();
  674. }
  675. /**
  676. * Determines if a container is an ascendant of the current control
  677. * @param container defines the container to look for
  678. * @returns true if the container is one of the ascendant of the control
  679. */
  680. public isAscendant(container: Control): boolean {
  681. if (!this.parent) {
  682. return false;
  683. }
  684. if (this.parent === container) {
  685. return true;
  686. }
  687. return this.parent.isAscendant(container);
  688. }
  689. /**
  690. * Gets coordinates in local control space
  691. * @param globalCoordinates defines the coordinates to transform
  692. * @returns the new coordinates in local space
  693. */
  694. public getLocalCoordinates(globalCoordinates: Vector2): Vector2 {
  695. var result = Vector2.Zero();
  696. this.getLocalCoordinatesToRef(globalCoordinates, result);
  697. return result;
  698. }
  699. /**
  700. * Gets coordinates in local control space
  701. * @param globalCoordinates defines the coordinates to transform
  702. * @param result defines the target vector2 where to store the result
  703. * @returns the current control
  704. */
  705. public getLocalCoordinatesToRef(globalCoordinates: Vector2, result: Vector2): Control {
  706. result.x = globalCoordinates.x - this._currentMeasure.left;
  707. result.y = globalCoordinates.y - this._currentMeasure.top;
  708. return this;
  709. }
  710. /**
  711. * Gets coordinates in parent local control space
  712. * @param globalCoordinates defines the coordinates to transform
  713. * @returns the new coordinates in parent local space
  714. */
  715. public getParentLocalCoordinates(globalCoordinates: Vector2): Vector2 {
  716. var result = Vector2.Zero();
  717. result.x = globalCoordinates.x - this._cachedParentMeasure.left;
  718. result.y = globalCoordinates.y - this._cachedParentMeasure.top;
  719. return result;
  720. }
  721. /**
  722. * Move the current control to a vector3 position projected onto the screen.
  723. * @param position defines the target position
  724. * @param scene defines the hosting scene
  725. */
  726. public moveToVector3(position: Vector3, scene: Scene): void {
  727. if (!this._host || this._root !== this._host._rootContainer) {
  728. Tools.Error("Cannot move a control to a vector3 if the control is not at root level");
  729. return;
  730. }
  731. this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  732. this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  733. var globalViewport = this._host._getGlobalViewport(scene);
  734. var projectedPosition = Vector3.Project(position, Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
  735. this._moveToProjectedPosition(projectedPosition);
  736. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  737. this.notRenderable = true;
  738. return;
  739. }
  740. this.notRenderable = false;
  741. }
  742. /** @hidden */
  743. public _getDescendants(results: Control[], directDescendantsOnly: boolean = false, predicate?: (control: Control) => boolean): void {
  744. // Do nothing by default
  745. }
  746. /**
  747. * Will return all controls that have this control as ascendant
  748. * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
  749. * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
  750. * @return all child controls
  751. */
  752. public getDescendants(directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): Control[] {
  753. var results = new Array<Control>();
  754. this._getDescendants(results, directDescendantsOnly, predicate);
  755. return results;
  756. }
  757. /**
  758. * Link current control with a target mesh
  759. * @param mesh defines the mesh to link with
  760. * @see http://doc.babylonjs.com/how_to/gui#tracking-positions
  761. */
  762. public linkWithMesh(mesh: Nullable<AbstractMesh>): void {
  763. if (!this._host || this._root && this._root !== this._host._rootContainer) {
  764. if (mesh) {
  765. Tools.Error("Cannot link a control to a mesh if the control is not at root level");
  766. }
  767. return;
  768. }
  769. var index = this._host._linkedControls.indexOf(this);
  770. if (index !== -1) {
  771. this._linkedMesh = mesh;
  772. if (!mesh) {
  773. this._host._linkedControls.splice(index, 1);
  774. }
  775. return;
  776. } else if (!mesh) {
  777. return;
  778. }
  779. this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  780. this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  781. this._linkedMesh = mesh;
  782. this._onlyMeasureMode = this._currentMeasure.width === 0 || this._currentMeasure.height === 0;
  783. this._host._linkedControls.push(this);
  784. }
  785. /** @hidden */
  786. public _moveToProjectedPosition(projectedPosition: Vector3): void {
  787. let oldLeft = this._left.getValue(this._host);
  788. let oldTop = this._top.getValue(this._host);
  789. var newLeft = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2);
  790. var newTop = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2);
  791. if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
  792. if (Math.abs(newLeft - oldLeft) < 0.5) {
  793. newLeft = oldLeft;
  794. }
  795. if (Math.abs(newTop - oldTop) < 0.5) {
  796. newTop = oldTop;
  797. }
  798. }
  799. this.left = newLeft + "px";
  800. this.top = newTop + "px";
  801. this._left.ignoreAdaptiveScaling = true;
  802. this._top.ignoreAdaptiveScaling = true;
  803. }
  804. /** @hidden */
  805. public _markMatrixAsDirty(): void {
  806. this._isMatrixDirty = true;
  807. this._flagDescendantsAsMatrixDirty();
  808. }
  809. /** @hidden */
  810. public _flagDescendantsAsMatrixDirty(): void {
  811. // No child
  812. }
  813. /** @hidden */
  814. public _markAsDirty(force = false): void {
  815. if (!this._isVisible && !force) {
  816. return;
  817. }
  818. this._isDirty = true;
  819. if (!this._host) {
  820. return; // Not yet connected
  821. }
  822. this._host.markAsDirty();
  823. }
  824. /** @hidden */
  825. public _markAllAsDirty(): void {
  826. this._markAsDirty();
  827. if (this._font) {
  828. this._prepareFont();
  829. }
  830. }
  831. /** @hidden */
  832. public _link(root: Nullable<Container>, host: AdvancedDynamicTexture): void {
  833. this._root = root;
  834. this._host = host;
  835. if (this._host) {
  836. this.uniqueId = this._host.getScene()!.getUniqueId();
  837. }
  838. }
  839. /** @hidden */
  840. protected _transform(context: CanvasRenderingContext2D): void {
  841. if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
  842. return;
  843. }
  844. // postTranslate
  845. var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
  846. var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
  847. context.translate(offsetX, offsetY);
  848. // rotate
  849. context.rotate(this._rotation);
  850. // scale
  851. context.scale(this._scaleX, this._scaleY);
  852. // preTranslate
  853. context.translate(-offsetX, -offsetY);
  854. // Need to update matrices?
  855. if (this._isMatrixDirty || this._cachedOffsetX !== offsetX || this._cachedOffsetY !== offsetY) {
  856. this._cachedOffsetX = offsetX;
  857. this._cachedOffsetY = offsetY;
  858. this._isMatrixDirty = false;
  859. this._flagDescendantsAsMatrixDirty();
  860. Matrix2D.ComposeToRef(-offsetX, -offsetY, this._rotation, this._scaleX, this._scaleY, this._root ? this._root._transformMatrix : null, this._transformMatrix);
  861. this._transformMatrix.invertToRef(this._invertTransformMatrix);
  862. }
  863. }
  864. /** @hidden */
  865. public _renderHighlight(context: CanvasRenderingContext2D): void {
  866. if (!this.isHighlighted) {
  867. return;
  868. }
  869. context.save();
  870. context.strokeStyle = "#4affff";
  871. context.lineWidth = 2;
  872. this._renderHighlightSpecific(context);
  873. context.restore();
  874. }
  875. /** @hidden */
  876. protected _renderHighlightSpecific(context: CanvasRenderingContext2D): void {
  877. context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  878. }
  879. /** @hidden */
  880. protected _applyStates(context: CanvasRenderingContext2D): void {
  881. if (this._isFontSizeInPercentage) {
  882. this._fontSet = true;
  883. }
  884. if (this._fontSet) {
  885. this._prepareFont();
  886. this._fontSet = false;
  887. }
  888. if (this._font) {
  889. context.font = this._font;
  890. }
  891. if (this._color) {
  892. context.fillStyle = this._color;
  893. }
  894. if (Control.AllowAlphaInheritance) {
  895. context.globalAlpha *= this._alpha;
  896. } else if (this._alphaSet) {
  897. context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;
  898. }
  899. }
  900. /** @hidden */
  901. protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean {
  902. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  903. this._isDirty = false;
  904. this._currentMeasure.copyFrom(parentMeasure);
  905. // Let children take some pre-measurement actions
  906. this._preMeasure(parentMeasure, context);
  907. this._measure();
  908. this._computeAlignment(parentMeasure, context);
  909. // Convert to int values
  910. this._currentMeasure.left = this._currentMeasure.left | 0;
  911. this._currentMeasure.top = this._currentMeasure.top | 0;
  912. this._currentMeasure.width = this._currentMeasure.width | 0;
  913. this._currentMeasure.height = this._currentMeasure.height | 0;
  914. // Let children add more features
  915. this._additionalProcessing(parentMeasure, context);
  916. this._cachedParentMeasure.copyFrom(parentMeasure);
  917. if (this.onDirtyObservable.hasObservers()) {
  918. this.onDirtyObservable.notifyObservers(this);
  919. }
  920. }
  921. if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
  922. return false;
  923. }
  924. if (this._currentMeasure.left + this._currentMeasure.width < parentMeasure.left) {
  925. return false;
  926. }
  927. if (this._currentMeasure.top > parentMeasure.top + parentMeasure.height) {
  928. return false;
  929. }
  930. if (this._currentMeasure.top + this._currentMeasure.height < parentMeasure.top) {
  931. return false;
  932. }
  933. // Transform
  934. this._transform(context);
  935. if (this._onlyMeasureMode) {
  936. this._onlyMeasureMode = false;
  937. return false; // We do not want rendering for this frame as they are measure dependant information that need to be gathered
  938. }
  939. // Clip
  940. if (this.clipChildren) {
  941. this._clip(context);
  942. context.clip();
  943. }
  944. if (this.onBeforeDrawObservable.hasObservers()) {
  945. this.onBeforeDrawObservable.notifyObservers(this);
  946. }
  947. return true;
  948. }
  949. /** @hidden */
  950. protected _clip(context: CanvasRenderingContext2D) {
  951. context.beginPath();
  952. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  953. var shadowOffsetX = this.shadowOffsetX;
  954. var shadowOffsetY = this.shadowOffsetY;
  955. var shadowBlur = this.shadowBlur;
  956. var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
  957. var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
  958. var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
  959. var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
  960. context.rect(this._currentMeasure.left + leftShadowOffset,
  961. this._currentMeasure.top + topShadowOffset,
  962. this._currentMeasure.width + rightShadowOffset - leftShadowOffset,
  963. this._currentMeasure.height + bottomShadowOffset - topShadowOffset);
  964. } else {
  965. context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  966. }
  967. }
  968. /** @hidden */
  969. public _measure(): void {
  970. // Width / Height
  971. if (this._width.isPixel) {
  972. this._currentMeasure.width = this._width.getValue(this._host);
  973. } else {
  974. this._currentMeasure.width *= this._width.getValue(this._host);
  975. }
  976. if (this._height.isPixel) {
  977. this._currentMeasure.height = this._height.getValue(this._host);
  978. } else {
  979. this._currentMeasure.height *= this._height.getValue(this._host);
  980. }
  981. }
  982. /** @hidden */
  983. protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  984. var width = this._currentMeasure.width;
  985. var height = this._currentMeasure.height;
  986. var parentWidth = parentMeasure.width;
  987. var parentHeight = parentMeasure.height;
  988. // Left / top
  989. var x = 0;
  990. var y = 0;
  991. switch (this.horizontalAlignment) {
  992. case Control.HORIZONTAL_ALIGNMENT_LEFT:
  993. x = 0;
  994. break;
  995. case Control.HORIZONTAL_ALIGNMENT_RIGHT:
  996. x = parentWidth - width;
  997. break;
  998. case Control.HORIZONTAL_ALIGNMENT_CENTER:
  999. x = (parentWidth - width) / 2;
  1000. break;
  1001. }
  1002. switch (this.verticalAlignment) {
  1003. case Control.VERTICAL_ALIGNMENT_TOP:
  1004. y = 0;
  1005. break;
  1006. case Control.VERTICAL_ALIGNMENT_BOTTOM:
  1007. y = parentHeight - height;
  1008. break;
  1009. case Control.VERTICAL_ALIGNMENT_CENTER:
  1010. y = (parentHeight - height) / 2;
  1011. break;
  1012. }
  1013. if (this._paddingLeft.isPixel) {
  1014. this._currentMeasure.left += this._paddingLeft.getValue(this._host);
  1015. this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
  1016. } else {
  1017. this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
  1018. this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
  1019. }
  1020. if (this._paddingRight.isPixel) {
  1021. this._currentMeasure.width -= this._paddingRight.getValue(this._host);
  1022. } else {
  1023. this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
  1024. }
  1025. if (this._paddingTop.isPixel) {
  1026. this._currentMeasure.top += this._paddingTop.getValue(this._host);
  1027. this._currentMeasure.height -= this._paddingTop.getValue(this._host);
  1028. } else {
  1029. this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
  1030. this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
  1031. }
  1032. if (this._paddingBottom.isPixel) {
  1033. this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
  1034. } else {
  1035. this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
  1036. }
  1037. if (this._left.isPixel) {
  1038. this._currentMeasure.left += this._left.getValue(this._host);
  1039. } else {
  1040. this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
  1041. }
  1042. if (this._top.isPixel) {
  1043. this._currentMeasure.top += this._top.getValue(this._host);
  1044. } else {
  1045. this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
  1046. }
  1047. this._currentMeasure.left += x;
  1048. this._currentMeasure.top += y;
  1049. }
  1050. /** @hidden */
  1051. protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  1052. // Do nothing
  1053. }
  1054. /** @hidden */
  1055. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  1056. // Do nothing
  1057. }
  1058. /** @hidden */
  1059. public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  1060. // Do nothing
  1061. }
  1062. /**
  1063. * Tests if a given coordinates belong to the current control
  1064. * @param x defines x coordinate to test
  1065. * @param y defines y coordinate to test
  1066. * @returns true if the coordinates are inside the control
  1067. */
  1068. public contains(x: number, y: number): boolean {
  1069. // Invert transform
  1070. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  1071. x = this._transformedPosition.x;
  1072. y = this._transformedPosition.y;
  1073. // Check
  1074. if (x < this._currentMeasure.left) {
  1075. return false;
  1076. }
  1077. if (x > this._currentMeasure.left + this._currentMeasure.width) {
  1078. return false;
  1079. }
  1080. if (y < this._currentMeasure.top) {
  1081. return false;
  1082. }
  1083. if (y > this._currentMeasure.top + this._currentMeasure.height) {
  1084. return false;
  1085. }
  1086. if (this.isPointerBlocker) {
  1087. this._host._shouldBlockPointer = true;
  1088. }
  1089. return true;
  1090. }
  1091. /** @hidden */
  1092. public _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean {
  1093. if (!this._isEnabled) {
  1094. return false;
  1095. }
  1096. if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
  1097. return false;
  1098. }
  1099. if (!this.contains(x, y)) {
  1100. return false;
  1101. }
  1102. this._processObservables(type, x, y, pointerId, buttonIndex);
  1103. return true;
  1104. }
  1105. /** @hidden */
  1106. public _onPointerMove(target: Control, coordinates: Vector2): void {
  1107. var canNotify: boolean = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this);
  1108. if (canNotify && this.parent != null) { this.parent._onPointerMove(target, coordinates); }
  1109. }
  1110. /** @hidden */
  1111. public _onPointerEnter(target: Control): boolean {
  1112. if (!this._isEnabled) {
  1113. return false;
  1114. }
  1115. if (this._enterCount > 0) {
  1116. return false;
  1117. }
  1118. if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
  1119. this._enterCount = 0;
  1120. }
  1121. this._enterCount++;
  1122. var canNotify: boolean = this.onPointerEnterObservable.notifyObservers(this, -1, target, this);
  1123. if (canNotify && this.parent != null) { this.parent._onPointerEnter(target); }
  1124. return true;
  1125. }
  1126. /** @hidden */
  1127. public _onPointerOut(target: Control): void {
  1128. if (!this._isEnabled || target === this) {
  1129. return;
  1130. }
  1131. this._enterCount = 0;
  1132. var canNotify: boolean = true;
  1133. if (!target.isAscendant(this)) {
  1134. canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this);
  1135. }
  1136. if (canNotify && this.parent != null) { this.parent._onPointerOut(target); }
  1137. }
  1138. /** @hidden */
  1139. public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean {
  1140. // Prevent pointerout to lose control context.
  1141. // Event redundancy is checked inside the function.
  1142. this._onPointerEnter(this);
  1143. if (this._downCount !== 0) {
  1144. return false;
  1145. }
  1146. this._downCount++;
  1147. this._downPointerIds[pointerId] = true;
  1148. var canNotify: boolean = this.onPointerDownObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this);
  1149. if (canNotify && this.parent != null) { this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex); }
  1150. return true;
  1151. }
  1152. /** @hidden */
  1153. public _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void {
  1154. if (!this._isEnabled) {
  1155. return;
  1156. }
  1157. this._downCount = 0;
  1158. delete this._downPointerIds[pointerId];
  1159. var canNotifyClick: boolean = notifyClick;
  1160. if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
  1161. canNotifyClick = this.onPointerClickObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this);
  1162. }
  1163. var canNotify: boolean = this.onPointerUpObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this);
  1164. if (canNotify && this.parent != null) { this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick); }
  1165. }
  1166. /** @hidden */
  1167. public _forcePointerUp(pointerId: Nullable<number> = null) {
  1168. if (pointerId !== null) {
  1169. this._onPointerUp(this, Vector2.Zero(), pointerId, 0, true);
  1170. } else {
  1171. for (var key in this._downPointerIds) {
  1172. this._onPointerUp(this, Vector2.Zero(), +key as number, 0, true);
  1173. }
  1174. }
  1175. }
  1176. /** @hidden */
  1177. public _processObservables(type: number, x: number, y: number, pointerId: number, buttonIndex: number): boolean {
  1178. if (!this._isEnabled) {
  1179. return false;
  1180. }
  1181. this._dummyVector2.copyFromFloats(x, y);
  1182. if (type === PointerEventTypes.POINTERMOVE) {
  1183. this._onPointerMove(this, this._dummyVector2);
  1184. var previousControlOver = this._host._lastControlOver[pointerId];
  1185. if (previousControlOver && previousControlOver !== this) {
  1186. previousControlOver._onPointerOut(this);
  1187. }
  1188. if (previousControlOver !== this) {
  1189. this._onPointerEnter(this);
  1190. }
  1191. this._host._lastControlOver[pointerId] = this;
  1192. return true;
  1193. }
  1194. if (type === PointerEventTypes.POINTERDOWN) {
  1195. this._onPointerDown(this, this._dummyVector2, pointerId, buttonIndex);
  1196. this._host._registerLastControlDown(this, pointerId);
  1197. this._host._lastPickedControl = this;
  1198. return true;
  1199. }
  1200. if (type === PointerEventTypes.POINTERUP) {
  1201. if (this._host._lastControlDown[pointerId]) {
  1202. this._host._lastControlDown[pointerId]._onPointerUp(this, this._dummyVector2, pointerId, buttonIndex, true);
  1203. }
  1204. delete this._host._lastControlDown[pointerId];
  1205. return true;
  1206. }
  1207. return false;
  1208. }
  1209. private _prepareFont() {
  1210. if (!this._font && !this._fontSet) {
  1211. return;
  1212. }
  1213. if (this._style) {
  1214. this._font = this._style.fontStyle + " " + this._style.fontWeight + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
  1215. } else {
  1216. this._font = this._fontStyle + " " + this._fontWeight + " " + this.fontSizeInPixels + "px " + this._fontFamily;
  1217. }
  1218. this._fontOffset = Control._GetFontOffset(this._font);
  1219. }
  1220. /** Releases associated resources */
  1221. public dispose() {
  1222. this.onDirtyObservable.clear();
  1223. this.onBeforeDrawObservable.clear();
  1224. this.onAfterDrawObservable.clear();
  1225. this.onPointerDownObservable.clear();
  1226. this.onPointerEnterObservable.clear();
  1227. this.onPointerMoveObservable.clear();
  1228. this.onPointerOutObservable.clear();
  1229. this.onPointerUpObservable.clear();
  1230. this.onPointerClickObservable.clear();
  1231. if (this._styleObserver && this._style) {
  1232. this._style.onChangedObservable.remove(this._styleObserver);
  1233. this._styleObserver = null;
  1234. }
  1235. if (this._root) {
  1236. this._root.removeControl(this);
  1237. this._root = null;
  1238. }
  1239. if (this._host) {
  1240. var index = this._host._linkedControls.indexOf(this);
  1241. if (index > -1) {
  1242. this.linkWithMesh(null);
  1243. }
  1244. }
  1245. }
  1246. // Statics
  1247. private static _HORIZONTAL_ALIGNMENT_LEFT = 0;
  1248. private static _HORIZONTAL_ALIGNMENT_RIGHT = 1;
  1249. private static _HORIZONTAL_ALIGNMENT_CENTER = 2;
  1250. private static _VERTICAL_ALIGNMENT_TOP = 0;
  1251. private static _VERTICAL_ALIGNMENT_BOTTOM = 1;
  1252. private static _VERTICAL_ALIGNMENT_CENTER = 2;
  1253. /** HORIZONTAL_ALIGNMENT_LEFT */
  1254. public static get HORIZONTAL_ALIGNMENT_LEFT(): number {
  1255. return Control._HORIZONTAL_ALIGNMENT_LEFT;
  1256. }
  1257. /** HORIZONTAL_ALIGNMENT_RIGHT */
  1258. public static get HORIZONTAL_ALIGNMENT_RIGHT(): number {
  1259. return Control._HORIZONTAL_ALIGNMENT_RIGHT;
  1260. }
  1261. /** HORIZONTAL_ALIGNMENT_CENTER */
  1262. public static get HORIZONTAL_ALIGNMENT_CENTER(): number {
  1263. return Control._HORIZONTAL_ALIGNMENT_CENTER;
  1264. }
  1265. /** VERTICAL_ALIGNMENT_TOP */
  1266. public static get VERTICAL_ALIGNMENT_TOP(): number {
  1267. return Control._VERTICAL_ALIGNMENT_TOP;
  1268. }
  1269. /** VERTICAL_ALIGNMENT_BOTTOM */
  1270. public static get VERTICAL_ALIGNMENT_BOTTOM(): number {
  1271. return Control._VERTICAL_ALIGNMENT_BOTTOM;
  1272. }
  1273. /** VERTICAL_ALIGNMENT_CENTER */
  1274. public static get VERTICAL_ALIGNMENT_CENTER(): number {
  1275. return Control._VERTICAL_ALIGNMENT_CENTER;
  1276. }
  1277. private static _FontHeightSizes: { [key: string]: { ascent: number, height: number, descent: number } } = {};
  1278. /** @hidden */
  1279. public static _GetFontOffset(font: string): { ascent: number, height: number, descent: number } {
  1280. if (Control._FontHeightSizes[font]) {
  1281. return Control._FontHeightSizes[font];
  1282. }
  1283. var text = document.createElement("span");
  1284. text.innerHTML = "Hg";
  1285. text.style.font = font;
  1286. var block = document.createElement("div");
  1287. block.style.display = "inline-block";
  1288. block.style.width = "1px";
  1289. block.style.height = "0px";
  1290. block.style.verticalAlign = "bottom";
  1291. var div = document.createElement("div");
  1292. div.appendChild(text);
  1293. div.appendChild(block);
  1294. document.body.appendChild(div);
  1295. var fontAscent = 0;
  1296. var fontHeight = 0;
  1297. try {
  1298. fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  1299. block.style.verticalAlign = "baseline";
  1300. fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  1301. } finally {
  1302. document.body.removeChild(div);
  1303. }
  1304. var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
  1305. Control._FontHeightSizes[font] = result;
  1306. return result;
  1307. }
  1308. /**
  1309. * Creates a stack panel that can be used to render headers
  1310. * @param control defines the control to associate with the header
  1311. * @param text defines the text of the header
  1312. * @param size defines the size of the header
  1313. * @param options defines options used to configure the header
  1314. * @returns a new StackPanel
  1315. * @ignore
  1316. * @hidden
  1317. */
  1318. public static AddHeader: (control: Control, text: string, size: string | number, options: { isHorizontal: boolean, controlFirst: boolean }) => any = () => { };
  1319. /** @hidden */
  1320. protected static drawEllipse(x: number, y: number, width: number, height: number, context: CanvasRenderingContext2D): void {
  1321. context.translate(x, y);
  1322. context.scale(width, height);
  1323. context.beginPath();
  1324. context.arc(0, 0, 1, 0, 2 * Math.PI);
  1325. context.closePath();
  1326. context.scale(1 / width, 1 / height);
  1327. context.translate(-x, -y);
  1328. }
  1329. }