control.ts 52 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613
  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.strokeStyle = "#4affff";
  870. context.lineWidth = 2;
  871. this._renderHighlightSpecific(context);
  872. }
  873. /** @hidden */
  874. protected _renderHighlightSpecific(context: CanvasRenderingContext2D): void {
  875. context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  876. }
  877. /** @hidden */
  878. protected _applyStates(context: CanvasRenderingContext2D): void {
  879. if (this._isFontSizeInPercentage) {
  880. this._fontSet = true;
  881. }
  882. if (this._fontSet) {
  883. this._prepareFont();
  884. this._fontSet = false;
  885. }
  886. if (this._font) {
  887. context.font = this._font;
  888. }
  889. if (this._color) {
  890. context.fillStyle = this._color;
  891. }
  892. if (Control.AllowAlphaInheritance) {
  893. context.globalAlpha *= this._alpha;
  894. } else if (this._alphaSet) {
  895. context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;
  896. }
  897. }
  898. /** @hidden */
  899. protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean {
  900. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  901. this._isDirty = false;
  902. this._currentMeasure.copyFrom(parentMeasure);
  903. // Let children take some pre-measurement actions
  904. this._preMeasure(parentMeasure, context);
  905. this._measure();
  906. this._computeAlignment(parentMeasure, context);
  907. // Convert to int values
  908. this._currentMeasure.left = this._currentMeasure.left | 0;
  909. this._currentMeasure.top = this._currentMeasure.top | 0;
  910. this._currentMeasure.width = this._currentMeasure.width | 0;
  911. this._currentMeasure.height = this._currentMeasure.height | 0;
  912. // Let children add more features
  913. this._additionalProcessing(parentMeasure, context);
  914. this._cachedParentMeasure.copyFrom(parentMeasure);
  915. if (this.onDirtyObservable.hasObservers()) {
  916. this.onDirtyObservable.notifyObservers(this);
  917. }
  918. }
  919. if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
  920. return false;
  921. }
  922. if (this._currentMeasure.left + this._currentMeasure.width < parentMeasure.left) {
  923. return false;
  924. }
  925. if (this._currentMeasure.top > parentMeasure.top + parentMeasure.height) {
  926. return false;
  927. }
  928. if (this._currentMeasure.top + this._currentMeasure.height < parentMeasure.top) {
  929. return false;
  930. }
  931. // Transform
  932. this._transform(context);
  933. if (this._onlyMeasureMode) {
  934. this._onlyMeasureMode = false;
  935. return false; // We do not want rendering for this frame as they are measure dependant information that need to be gathered
  936. }
  937. // Clip
  938. if (this.clipChildren) {
  939. this._clip(context);
  940. context.clip();
  941. }
  942. if (this.onBeforeDrawObservable.hasObservers()) {
  943. this.onBeforeDrawObservable.notifyObservers(this);
  944. }
  945. return true;
  946. }
  947. /** @hidden */
  948. protected _clip(context: CanvasRenderingContext2D) {
  949. context.beginPath();
  950. if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
  951. var shadowOffsetX = this.shadowOffsetX;
  952. var shadowOffsetY = this.shadowOffsetY;
  953. var shadowBlur = this.shadowBlur;
  954. var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
  955. var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
  956. var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
  957. var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
  958. context.rect(this._currentMeasure.left + leftShadowOffset,
  959. this._currentMeasure.top + topShadowOffset,
  960. this._currentMeasure.width + rightShadowOffset - leftShadowOffset,
  961. this._currentMeasure.height + bottomShadowOffset - topShadowOffset);
  962. } else {
  963. context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  964. }
  965. }
  966. /** @hidden */
  967. public _measure(): void {
  968. // Width / Height
  969. if (this._width.isPixel) {
  970. this._currentMeasure.width = this._width.getValue(this._host);
  971. } else {
  972. this._currentMeasure.width *= this._width.getValue(this._host);
  973. }
  974. if (this._height.isPixel) {
  975. this._currentMeasure.height = this._height.getValue(this._host);
  976. } else {
  977. this._currentMeasure.height *= this._height.getValue(this._host);
  978. }
  979. }
  980. /** @hidden */
  981. protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  982. var width = this._currentMeasure.width;
  983. var height = this._currentMeasure.height;
  984. var parentWidth = parentMeasure.width;
  985. var parentHeight = parentMeasure.height;
  986. // Left / top
  987. var x = 0;
  988. var y = 0;
  989. switch (this.horizontalAlignment) {
  990. case Control.HORIZONTAL_ALIGNMENT_LEFT:
  991. x = 0;
  992. break;
  993. case Control.HORIZONTAL_ALIGNMENT_RIGHT:
  994. x = parentWidth - width;
  995. break;
  996. case Control.HORIZONTAL_ALIGNMENT_CENTER:
  997. x = (parentWidth - width) / 2;
  998. break;
  999. }
  1000. switch (this.verticalAlignment) {
  1001. case Control.VERTICAL_ALIGNMENT_TOP:
  1002. y = 0;
  1003. break;
  1004. case Control.VERTICAL_ALIGNMENT_BOTTOM:
  1005. y = parentHeight - height;
  1006. break;
  1007. case Control.VERTICAL_ALIGNMENT_CENTER:
  1008. y = (parentHeight - height) / 2;
  1009. break;
  1010. }
  1011. if (this._paddingLeft.isPixel) {
  1012. this._currentMeasure.left += this._paddingLeft.getValue(this._host);
  1013. this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
  1014. } else {
  1015. this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
  1016. this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
  1017. }
  1018. if (this._paddingRight.isPixel) {
  1019. this._currentMeasure.width -= this._paddingRight.getValue(this._host);
  1020. } else {
  1021. this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
  1022. }
  1023. if (this._paddingTop.isPixel) {
  1024. this._currentMeasure.top += this._paddingTop.getValue(this._host);
  1025. this._currentMeasure.height -= this._paddingTop.getValue(this._host);
  1026. } else {
  1027. this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
  1028. this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
  1029. }
  1030. if (this._paddingBottom.isPixel) {
  1031. this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
  1032. } else {
  1033. this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
  1034. }
  1035. if (this._left.isPixel) {
  1036. this._currentMeasure.left += this._left.getValue(this._host);
  1037. } else {
  1038. this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
  1039. }
  1040. if (this._top.isPixel) {
  1041. this._currentMeasure.top += this._top.getValue(this._host);
  1042. } else {
  1043. this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
  1044. }
  1045. this._currentMeasure.left += x;
  1046. this._currentMeasure.top += y;
  1047. }
  1048. /** @hidden */
  1049. protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  1050. // Do nothing
  1051. }
  1052. /** @hidden */
  1053. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  1054. // Do nothing
  1055. }
  1056. /** @hidden */
  1057. public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  1058. // Do nothing
  1059. }
  1060. /**
  1061. * Tests if a given coordinates belong to the current control
  1062. * @param x defines x coordinate to test
  1063. * @param y defines y coordinate to test
  1064. * @returns true if the coordinates are inside the control
  1065. */
  1066. public contains(x: number, y: number): boolean {
  1067. // Invert transform
  1068. this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
  1069. x = this._transformedPosition.x;
  1070. y = this._transformedPosition.y;
  1071. // Check
  1072. if (x < this._currentMeasure.left) {
  1073. return false;
  1074. }
  1075. if (x > this._currentMeasure.left + this._currentMeasure.width) {
  1076. return false;
  1077. }
  1078. if (y < this._currentMeasure.top) {
  1079. return false;
  1080. }
  1081. if (y > this._currentMeasure.top + this._currentMeasure.height) {
  1082. return false;
  1083. }
  1084. if (this.isPointerBlocker) {
  1085. this._host._shouldBlockPointer = true;
  1086. }
  1087. return true;
  1088. }
  1089. /** @hidden */
  1090. public _processPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): boolean {
  1091. if (!this._isEnabled) {
  1092. return false;
  1093. }
  1094. if (!this.isHitTestVisible || !this.isVisible || this._doNotRender) {
  1095. return false;
  1096. }
  1097. if (!this.contains(x, y)) {
  1098. return false;
  1099. }
  1100. this._processObservables(type, x, y, pointerId, buttonIndex);
  1101. return true;
  1102. }
  1103. /** @hidden */
  1104. public _onPointerMove(target: Control, coordinates: Vector2): void {
  1105. var canNotify: boolean = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this);
  1106. if (canNotify && this.parent != null) { this.parent._onPointerMove(target, coordinates); }
  1107. }
  1108. /** @hidden */
  1109. public _onPointerEnter(target: Control): boolean {
  1110. if (!this._isEnabled) {
  1111. return false;
  1112. }
  1113. if (this._enterCount > 0) {
  1114. return false;
  1115. }
  1116. if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
  1117. this._enterCount = 0;
  1118. }
  1119. this._enterCount++;
  1120. var canNotify: boolean = this.onPointerEnterObservable.notifyObservers(this, -1, target, this);
  1121. if (canNotify && this.parent != null) { this.parent._onPointerEnter(target); }
  1122. return true;
  1123. }
  1124. /** @hidden */
  1125. public _onPointerOut(target: Control): void {
  1126. if (!this._isEnabled || target === this) {
  1127. return;
  1128. }
  1129. this._enterCount = 0;
  1130. var canNotify: boolean = true;
  1131. if (!target.isAscendant(this)) {
  1132. canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this);
  1133. }
  1134. if (canNotify && this.parent != null) { this.parent._onPointerOut(target); }
  1135. }
  1136. /** @hidden */
  1137. public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean {
  1138. // Prevent pointerout to lose control context.
  1139. // Event redundancy is checked inside the function.
  1140. this._onPointerEnter(this);
  1141. if (this._downCount !== 0) {
  1142. return false;
  1143. }
  1144. this._downCount++;
  1145. this._downPointerIds[pointerId] = true;
  1146. var canNotify: boolean = this.onPointerDownObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this);
  1147. if (canNotify && this.parent != null) { this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex); }
  1148. return true;
  1149. }
  1150. /** @hidden */
  1151. public _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void {
  1152. if (!this._isEnabled) {
  1153. return;
  1154. }
  1155. this._downCount = 0;
  1156. delete this._downPointerIds[pointerId];
  1157. var canNotifyClick: boolean = notifyClick;
  1158. if (notifyClick && (this._enterCount > 0 || this._enterCount === -1)) {
  1159. canNotifyClick = this.onPointerClickObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this);
  1160. }
  1161. var canNotify: boolean = this.onPointerUpObservable.notifyObservers(new Vector2WithInfo(coordinates, buttonIndex), -1, target, this);
  1162. if (canNotify && this.parent != null) { this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick); }
  1163. }
  1164. /** @hidden */
  1165. public _forcePointerUp(pointerId: Nullable<number> = null) {
  1166. if (pointerId !== null) {
  1167. this._onPointerUp(this, Vector2.Zero(), pointerId, 0, true);
  1168. } else {
  1169. for (var key in this._downPointerIds) {
  1170. this._onPointerUp(this, Vector2.Zero(), +key as number, 0, true);
  1171. }
  1172. }
  1173. }
  1174. /** @hidden */
  1175. public _processObservables(type: number, x: number, y: number, pointerId: number, buttonIndex: number): boolean {
  1176. if (!this._isEnabled) {
  1177. return false;
  1178. }
  1179. this._dummyVector2.copyFromFloats(x, y);
  1180. if (type === PointerEventTypes.POINTERMOVE) {
  1181. this._onPointerMove(this, this._dummyVector2);
  1182. var previousControlOver = this._host._lastControlOver[pointerId];
  1183. if (previousControlOver && previousControlOver !== this) {
  1184. previousControlOver._onPointerOut(this);
  1185. }
  1186. if (previousControlOver !== this) {
  1187. this._onPointerEnter(this);
  1188. }
  1189. this._host._lastControlOver[pointerId] = this;
  1190. return true;
  1191. }
  1192. if (type === PointerEventTypes.POINTERDOWN) {
  1193. this._onPointerDown(this, this._dummyVector2, pointerId, buttonIndex);
  1194. this._host._registerLastControlDown(this, pointerId);
  1195. this._host._lastPickedControl = this;
  1196. return true;
  1197. }
  1198. if (type === PointerEventTypes.POINTERUP) {
  1199. if (this._host._lastControlDown[pointerId]) {
  1200. this._host._lastControlDown[pointerId]._onPointerUp(this, this._dummyVector2, pointerId, buttonIndex, true);
  1201. }
  1202. delete this._host._lastControlDown[pointerId];
  1203. return true;
  1204. }
  1205. return false;
  1206. }
  1207. private _prepareFont() {
  1208. if (!this._font && !this._fontSet) {
  1209. return;
  1210. }
  1211. if (this._style) {
  1212. this._font = this._style.fontStyle + " " + this._style.fontWeight + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
  1213. } else {
  1214. this._font = this._fontStyle + " " + this._fontWeight + " " + this.fontSizeInPixels + "px " + this._fontFamily;
  1215. }
  1216. this._fontOffset = Control._GetFontOffset(this._font);
  1217. }
  1218. /** Releases associated resources */
  1219. public dispose() {
  1220. this.onDirtyObservable.clear();
  1221. this.onBeforeDrawObservable.clear();
  1222. this.onAfterDrawObservable.clear();
  1223. this.onPointerDownObservable.clear();
  1224. this.onPointerEnterObservable.clear();
  1225. this.onPointerMoveObservable.clear();
  1226. this.onPointerOutObservable.clear();
  1227. this.onPointerUpObservable.clear();
  1228. this.onPointerClickObservable.clear();
  1229. if (this._styleObserver && this._style) {
  1230. this._style.onChangedObservable.remove(this._styleObserver);
  1231. this._styleObserver = null;
  1232. }
  1233. if (this._root) {
  1234. this._root.removeControl(this);
  1235. this._root = null;
  1236. }
  1237. if (this._host) {
  1238. var index = this._host._linkedControls.indexOf(this);
  1239. if (index > -1) {
  1240. this.linkWithMesh(null);
  1241. }
  1242. }
  1243. }
  1244. // Statics
  1245. private static _HORIZONTAL_ALIGNMENT_LEFT = 0;
  1246. private static _HORIZONTAL_ALIGNMENT_RIGHT = 1;
  1247. private static _HORIZONTAL_ALIGNMENT_CENTER = 2;
  1248. private static _VERTICAL_ALIGNMENT_TOP = 0;
  1249. private static _VERTICAL_ALIGNMENT_BOTTOM = 1;
  1250. private static _VERTICAL_ALIGNMENT_CENTER = 2;
  1251. /** HORIZONTAL_ALIGNMENT_LEFT */
  1252. public static get HORIZONTAL_ALIGNMENT_LEFT(): number {
  1253. return Control._HORIZONTAL_ALIGNMENT_LEFT;
  1254. }
  1255. /** HORIZONTAL_ALIGNMENT_RIGHT */
  1256. public static get HORIZONTAL_ALIGNMENT_RIGHT(): number {
  1257. return Control._HORIZONTAL_ALIGNMENT_RIGHT;
  1258. }
  1259. /** HORIZONTAL_ALIGNMENT_CENTER */
  1260. public static get HORIZONTAL_ALIGNMENT_CENTER(): number {
  1261. return Control._HORIZONTAL_ALIGNMENT_CENTER;
  1262. }
  1263. /** VERTICAL_ALIGNMENT_TOP */
  1264. public static get VERTICAL_ALIGNMENT_TOP(): number {
  1265. return Control._VERTICAL_ALIGNMENT_TOP;
  1266. }
  1267. /** VERTICAL_ALIGNMENT_BOTTOM */
  1268. public static get VERTICAL_ALIGNMENT_BOTTOM(): number {
  1269. return Control._VERTICAL_ALIGNMENT_BOTTOM;
  1270. }
  1271. /** VERTICAL_ALIGNMENT_CENTER */
  1272. public static get VERTICAL_ALIGNMENT_CENTER(): number {
  1273. return Control._VERTICAL_ALIGNMENT_CENTER;
  1274. }
  1275. private static _FontHeightSizes: { [key: string]: { ascent: number, height: number, descent: number } } = {};
  1276. /** @hidden */
  1277. public static _GetFontOffset(font: string): { ascent: number, height: number, descent: number } {
  1278. if (Control._FontHeightSizes[font]) {
  1279. return Control._FontHeightSizes[font];
  1280. }
  1281. var text = document.createElement("span");
  1282. text.innerHTML = "Hg";
  1283. text.style.font = font;
  1284. var block = document.createElement("div");
  1285. block.style.display = "inline-block";
  1286. block.style.width = "1px";
  1287. block.style.height = "0px";
  1288. block.style.verticalAlign = "bottom";
  1289. var div = document.createElement("div");
  1290. div.appendChild(text);
  1291. div.appendChild(block);
  1292. document.body.appendChild(div);
  1293. var fontAscent = 0;
  1294. var fontHeight = 0;
  1295. try {
  1296. fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  1297. block.style.verticalAlign = "baseline";
  1298. fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  1299. } finally {
  1300. document.body.removeChild(div);
  1301. }
  1302. var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
  1303. Control._FontHeightSizes[font] = result;
  1304. return result;
  1305. }
  1306. /**
  1307. * Creates a stack panel that can be used to render headers
  1308. * @param control defines the control to associate with the header
  1309. * @param text defines the text of the header
  1310. * @param size defines the size of the header
  1311. * @param options defines options used to configure the header
  1312. * @returns a new StackPanel
  1313. * @ignore
  1314. * @hidden
  1315. */
  1316. public static AddHeader: (control: Control, text: string, size: string | number, options: { isHorizontal: boolean, controlFirst: boolean }) => any = () => { };
  1317. /** @hidden */
  1318. protected static drawEllipse(x: number, y: number, width: number, height: number, context: CanvasRenderingContext2D): void {
  1319. context.translate(x, y);
  1320. context.scale(width, height);
  1321. context.beginPath();
  1322. context.arc(0, 0, 1, 0, 2 * Math.PI);
  1323. context.closePath();
  1324. context.scale(1 / width, 1 / height);
  1325. context.translate(-x, -y);
  1326. }
  1327. }