babylon.gui.js 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027
  1. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  2. var __extends = (this && this.__extends) || (function () {
  3. var extendStatics = Object.setPrototypeOf ||
  4. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  5. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  6. return function (d, b) {
  7. extendStatics(d, b);
  8. function __() { this.constructor = d; }
  9. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  10. };
  11. })();
  12. var BABYLON;
  13. (function (BABYLON) {
  14. var GUI;
  15. (function (GUI) {
  16. var AdvancedDynamicTexture = (function (_super) {
  17. __extends(AdvancedDynamicTexture, _super);
  18. function AdvancedDynamicTexture(name, size, scene) {
  19. if (size === void 0) { size = 0; }
  20. var _this = _super.call(this, name, size, scene, false, BABYLON.Texture.NEAREST_SAMPLINGMODE, BABYLON.Engine.TEXTUREFORMAT_RGBA) || this;
  21. _this._isDirty = false;
  22. _this._rootContainer = new GUI.Container("root");
  23. _this._renderObserver = _this.getScene().onBeforeRenderObservable.add(function () { return _this._checkUpdate(); });
  24. _this._rootContainer._link(null, _this);
  25. if (!size) {
  26. _this._resizeObserver = _this.getScene().getEngine().onResizeObservable.add(function () { return _this._onResize(); });
  27. _this._onResize();
  28. }
  29. return _this;
  30. }
  31. Object.defineProperty(AdvancedDynamicTexture.prototype, "background", {
  32. get: function () {
  33. return this._background;
  34. },
  35. set: function (value) {
  36. if (this._background === value) {
  37. return;
  38. }
  39. this._background = value;
  40. this.markAsDirty();
  41. },
  42. enumerable: true,
  43. configurable: true
  44. });
  45. AdvancedDynamicTexture.prototype.markAsDirty = function () {
  46. this._isDirty = true;
  47. };
  48. AdvancedDynamicTexture.prototype.addControl = function (control) {
  49. this._rootContainer.addControl(control);
  50. return this;
  51. };
  52. AdvancedDynamicTexture.prototype.removeControl = function (control) {
  53. this._rootContainer.removeControl(control);
  54. return this;
  55. };
  56. AdvancedDynamicTexture.prototype.dispose = function () {
  57. this.getScene().onBeforeRenderObservable.remove(this._renderObserver);
  58. if (this._resizeObserver) {
  59. this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
  60. }
  61. _super.prototype.dispose.call(this);
  62. };
  63. AdvancedDynamicTexture.prototype._onResize = function () {
  64. // Check size
  65. var engine = this.getScene().getEngine();
  66. var textureSize = this.getSize();
  67. var renderWidth = engine.getRenderWidth();
  68. var renderHeight = engine.getRenderHeight();
  69. if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
  70. this.scaleTo(renderWidth, renderHeight);
  71. this.markAsDirty();
  72. }
  73. };
  74. AdvancedDynamicTexture.prototype._checkUpdate = function () {
  75. if (!this._isDirty && !this._rootContainer.isDirty) {
  76. return;
  77. }
  78. this._isDirty = false;
  79. this._render();
  80. this.update();
  81. };
  82. AdvancedDynamicTexture.prototype._render = function () {
  83. var textureSize = this.getSize();
  84. var renderWidth = textureSize.width;
  85. var renderHeight = textureSize.height;
  86. // Clear
  87. var context = this.getContext();
  88. context.clearRect(0, 0, renderWidth, renderHeight);
  89. if (this._background) {
  90. context.save();
  91. context.fillStyle = this._background;
  92. context.fillRect(0, 0, renderWidth, renderHeight);
  93. context.restore();
  94. }
  95. // Render
  96. var measure = new GUI.Measure(0, 0, renderWidth, renderHeight);
  97. this._rootContainer._draw(measure, context);
  98. };
  99. return AdvancedDynamicTexture;
  100. }(BABYLON.DynamicTexture));
  101. GUI.AdvancedDynamicTexture = AdvancedDynamicTexture;
  102. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  103. })(BABYLON || (BABYLON = {}));
  104. //# sourceMappingURL=advancedDynamicTexture.js.map
  105. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  106. var BABYLON;
  107. (function (BABYLON) {
  108. var GUI;
  109. (function (GUI) {
  110. var Measure = (function () {
  111. function Measure(left, top, width, height) {
  112. this.left = left;
  113. this.top = top;
  114. this.width = width;
  115. this.height = height;
  116. }
  117. Measure.prototype.copyFrom = function (other) {
  118. this.left = other.left;
  119. this.top = other.top;
  120. this.width = other.width;
  121. this.height = other.height;
  122. };
  123. Measure.prototype.isEqualsTo = function (other) {
  124. if (this.left !== other.left) {
  125. return false;
  126. }
  127. if (this.top !== other.top) {
  128. return false;
  129. }
  130. if (this.width !== other.width) {
  131. return false;
  132. }
  133. if (this.height !== other.height) {
  134. return false;
  135. }
  136. return true;
  137. };
  138. Measure.Empty = function () {
  139. return new Measure(0, 0, 0, 0);
  140. };
  141. return Measure;
  142. }());
  143. GUI.Measure = Measure;
  144. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  145. })(BABYLON || (BABYLON = {}));
  146. //# sourceMappingURL=measure.js.map
  147. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  148. var BABYLON;
  149. (function (BABYLON) {
  150. var GUI;
  151. (function (GUI) {
  152. var ValueAndUnit = (function () {
  153. function ValueAndUnit(value, unit, negativeValueAllowed) {
  154. if (value === void 0) { value = 1; }
  155. if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PERCENTAGE; }
  156. if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
  157. this.value = value;
  158. this.unit = unit;
  159. this.negativeValueAllowed = negativeValueAllowed;
  160. }
  161. Object.defineProperty(ValueAndUnit.prototype, "isPercentage", {
  162. get: function () {
  163. return this.unit === ValueAndUnit.UNITMODE_PERCENTAGE;
  164. },
  165. enumerable: true,
  166. configurable: true
  167. });
  168. Object.defineProperty(ValueAndUnit.prototype, "isPixel", {
  169. get: function () {
  170. return this.unit === ValueAndUnit.UNITMODE_PIXEL;
  171. },
  172. enumerable: true,
  173. configurable: true
  174. });
  175. ValueAndUnit.prototype.toString = function () {
  176. switch (this.unit) {
  177. case ValueAndUnit.UNITMODE_PERCENTAGE:
  178. return this.unit + "%";
  179. case ValueAndUnit.UNITMODE_PIXEL:
  180. return this.unit + "px";
  181. }
  182. return this.unit.toString();
  183. };
  184. ValueAndUnit.prototype.fromString = function (source) {
  185. var match = ValueAndUnit._Regex.exec(source);
  186. if (!match || match.length === 0) {
  187. return false;
  188. }
  189. var sourceValue = parseFloat(match[1]);
  190. var sourceUnit = this.unit;
  191. if (!this.negativeValueAllowed) {
  192. if (sourceValue < 0) {
  193. sourceValue = 0;
  194. }
  195. }
  196. if (match.length === 4) {
  197. switch (match[3]) {
  198. case "px":
  199. sourceUnit = ValueAndUnit.UNITMODE_PIXEL;
  200. break;
  201. case "%":
  202. sourceUnit = ValueAndUnit.UNITMODE_PERCENTAGE;
  203. sourceValue /= 100.0;
  204. break;
  205. }
  206. }
  207. if (sourceValue === this.value && sourceUnit === this.unit) {
  208. return false;
  209. }
  210. this.value = sourceValue;
  211. this.unit = sourceUnit;
  212. return true;
  213. };
  214. Object.defineProperty(ValueAndUnit, "UNITMODE_PERCENTAGE", {
  215. get: function () {
  216. return ValueAndUnit._UNITMODE_PERCENTAGE;
  217. },
  218. enumerable: true,
  219. configurable: true
  220. });
  221. Object.defineProperty(ValueAndUnit, "UNITMODE_PIXEL", {
  222. get: function () {
  223. return ValueAndUnit._UNITMODE_PIXEL;
  224. },
  225. enumerable: true,
  226. configurable: true
  227. });
  228. return ValueAndUnit;
  229. }());
  230. // Static
  231. ValueAndUnit._Regex = /(^-?\d*(\.\d+)?)(%|px)?/;
  232. ValueAndUnit._UNITMODE_PERCENTAGE = 0;
  233. ValueAndUnit._UNITMODE_PIXEL = 1;
  234. GUI.ValueAndUnit = ValueAndUnit;
  235. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  236. })(BABYLON || (BABYLON = {}));
  237. //# sourceMappingURL=valueAndUnit.js.map
  238. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  239. var BABYLON;
  240. (function (BABYLON) {
  241. var GUI;
  242. (function (GUI) {
  243. var Control = (function () {
  244. // Functions
  245. function Control(name) {
  246. this.name = name;
  247. this._zIndex = 0;
  248. this._currentMeasure = GUI.Measure.Empty();
  249. this._fontSize = 18;
  250. this._width = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
  251. this._height = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
  252. this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
  253. this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
  254. this._isDirty = true;
  255. this._cachedParentMeasure = GUI.Measure.Empty();
  256. this._marginLeft = new GUI.ValueAndUnit(0);
  257. this._marginRight = new GUI.ValueAndUnit(0);
  258. this._marginTop = new GUI.ValueAndUnit(0);
  259. this._marginBottom = new GUI.ValueAndUnit(0);
  260. this.fontFamily = "Arial";
  261. }
  262. Object.defineProperty(Control.prototype, "horizontalAlignment", {
  263. // Properties
  264. get: function () {
  265. return this._horizontalAlignment;
  266. },
  267. set: function (value) {
  268. if (this._horizontalAlignment === value) {
  269. return;
  270. }
  271. this._horizontalAlignment = value;
  272. this._markAsDirty();
  273. },
  274. enumerable: true,
  275. configurable: true
  276. });
  277. Object.defineProperty(Control.prototype, "verticalAlignment", {
  278. get: function () {
  279. return this._verticalAlignment;
  280. },
  281. set: function (value) {
  282. if (this._verticalAlignment === value) {
  283. return;
  284. }
  285. this._verticalAlignment = value;
  286. this._markAsDirty();
  287. },
  288. enumerable: true,
  289. configurable: true
  290. });
  291. Object.defineProperty(Control.prototype, "width", {
  292. get: function () {
  293. return this._width.toString();
  294. },
  295. set: function (value) {
  296. if (this._width.toString() === value) {
  297. return;
  298. }
  299. if (this._width.fromString(value)) {
  300. this._markAsDirty();
  301. }
  302. },
  303. enumerable: true,
  304. configurable: true
  305. });
  306. Object.defineProperty(Control.prototype, "height", {
  307. get: function () {
  308. return this._height.toString();
  309. },
  310. set: function (value) {
  311. if (this._height.toString() === value) {
  312. return;
  313. }
  314. if (this._height.fromString(value)) {
  315. this._markAsDirty();
  316. }
  317. },
  318. enumerable: true,
  319. configurable: true
  320. });
  321. Object.defineProperty(Control.prototype, "fontFamily", {
  322. get: function () {
  323. return this._fontFamily;
  324. },
  325. set: function (value) {
  326. if (this._fontFamily === value) {
  327. return;
  328. }
  329. this._fontFamily = value;
  330. this._prepareFont();
  331. },
  332. enumerable: true,
  333. configurable: true
  334. });
  335. Object.defineProperty(Control.prototype, "fontSize", {
  336. get: function () {
  337. return this._fontSize;
  338. },
  339. set: function (value) {
  340. if (this._fontSize === value) {
  341. return;
  342. }
  343. this._fontSize = value;
  344. this._prepareFont();
  345. },
  346. enumerable: true,
  347. configurable: true
  348. });
  349. Object.defineProperty(Control.prototype, "color", {
  350. get: function () {
  351. return this._color;
  352. },
  353. set: function (value) {
  354. if (this._color === value) {
  355. return;
  356. }
  357. this._color = value;
  358. this._markAsDirty();
  359. },
  360. enumerable: true,
  361. configurable: true
  362. });
  363. Object.defineProperty(Control.prototype, "zIndex", {
  364. get: function () {
  365. return this._zIndex;
  366. },
  367. set: function (value) {
  368. if (this.zIndex === value) {
  369. return;
  370. }
  371. this._zIndex = value;
  372. this._root._reOrderControl(this);
  373. },
  374. enumerable: true,
  375. configurable: true
  376. });
  377. Object.defineProperty(Control.prototype, "isDirty", {
  378. get: function () {
  379. return this._isDirty;
  380. },
  381. enumerable: true,
  382. configurable: true
  383. });
  384. Object.defineProperty(Control.prototype, "marginLeft", {
  385. get: function () {
  386. return this._marginLeft.toString();
  387. },
  388. set: function (value) {
  389. if (this._marginLeft.fromString(value)) {
  390. this._markAsDirty();
  391. }
  392. },
  393. enumerable: true,
  394. configurable: true
  395. });
  396. Object.defineProperty(Control.prototype, "marginRight", {
  397. get: function () {
  398. return this._marginRight.toString();
  399. },
  400. set: function (value) {
  401. if (this._marginRight.fromString(value)) {
  402. this._markAsDirty();
  403. }
  404. },
  405. enumerable: true,
  406. configurable: true
  407. });
  408. Object.defineProperty(Control.prototype, "marginTop", {
  409. get: function () {
  410. return this._marginTop.toString();
  411. },
  412. set: function (value) {
  413. if (this._marginTop.fromString(value)) {
  414. this._markAsDirty();
  415. }
  416. },
  417. enumerable: true,
  418. configurable: true
  419. });
  420. Object.defineProperty(Control.prototype, "marginBottom", {
  421. get: function () {
  422. return this._marginBottom.toString();
  423. },
  424. set: function (value) {
  425. if (this._marginBottom.fromString(value)) {
  426. this._markAsDirty();
  427. }
  428. },
  429. enumerable: true,
  430. configurable: true
  431. });
  432. Control.prototype._markAsDirty = function () {
  433. this._isDirty = true;
  434. if (!this._host) {
  435. return; // Not yet connected
  436. }
  437. this._host.markAsDirty();
  438. };
  439. Control.prototype._link = function (root, host) {
  440. this._root = root;
  441. this._host = host;
  442. };
  443. Control.prototype.applyStates = function (context) {
  444. if (this._font) {
  445. context.font = this._font;
  446. }
  447. if (this._color) {
  448. context.fillStyle = this._color;
  449. }
  450. };
  451. Control.prototype._processMeasures = function (parentMeasure, context) {
  452. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  453. this._currentMeasure.copyFrom(parentMeasure);
  454. this._measure(parentMeasure, context);
  455. this._computeAlignment(parentMeasure, context);
  456. this._additionalProcessing(parentMeasure, context);
  457. this._isDirty = false;
  458. this._cachedParentMeasure.copyFrom(parentMeasure);
  459. }
  460. // Clip
  461. context.beginPath();
  462. context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  463. context.clip();
  464. };
  465. Control.prototype._measure = function (parentMeasure, context) {
  466. // Width / Height
  467. if (this._width.isPixel) {
  468. this._currentMeasure.width = this._width.value;
  469. }
  470. else {
  471. this._currentMeasure.width *= this._width.value;
  472. }
  473. if (this._height.isPixel) {
  474. this._currentMeasure.height = this._height.value;
  475. }
  476. else {
  477. this._currentMeasure.height *= this._height.value;
  478. }
  479. };
  480. Control.prototype._computeAlignment = function (parentMeasure, context) {
  481. var width = this._currentMeasure.width;
  482. var height = this._currentMeasure.height;
  483. var parentWidth = parentMeasure.width;
  484. var parentHeight = parentMeasure.height;
  485. // Left / top
  486. var x = 0;
  487. var y = 0;
  488. switch (this.horizontalAlignment) {
  489. case Control.HORIZONTAL_ALIGNMENT_LEFT:
  490. x = 0;
  491. break;
  492. case Control.HORIZONTAL_ALIGNMENT_RIGHT:
  493. x = parentWidth - width;
  494. break;
  495. case Control.HORIZONTAL_ALIGNMENT_CENTER:
  496. x = (parentWidth - width) / 2;
  497. break;
  498. }
  499. switch (this.verticalAlignment) {
  500. case Control.VERTICAL_ALIGNMENT_TOP:
  501. y = 0;
  502. break;
  503. case Control.VERTICAL_ALIGNMENT_BOTTOM:
  504. y = parentHeight - height;
  505. break;
  506. case Control.VERTICAL_ALIGNMENT_CENTER:
  507. y = (parentHeight - height) / 2;
  508. break;
  509. }
  510. if (this._marginLeft.isPixel) {
  511. this._currentMeasure.left += this._marginLeft.value;
  512. }
  513. else {
  514. this._currentMeasure.left += parentWidth * this._marginLeft.value;
  515. }
  516. if (this._marginRight.isPixel) {
  517. this._currentMeasure.left -= this._marginRight.value;
  518. }
  519. else {
  520. this._currentMeasure.left -= parentWidth * this._marginRight.value;
  521. }
  522. if (this._marginTop.isPixel) {
  523. this._currentMeasure.top += this._marginTop.value;
  524. }
  525. else {
  526. this._currentMeasure.top += parentWidth * this._marginTop.value;
  527. }
  528. if (this._marginBottom.isPixel) {
  529. this._currentMeasure.top -= this._marginBottom.value;
  530. }
  531. else {
  532. this._currentMeasure.top -= parentWidth * this._marginBottom.value;
  533. }
  534. this._currentMeasure.left += x;
  535. this._currentMeasure.top += y;
  536. };
  537. Control.prototype._additionalProcessing = function (parentMeasure, context) {
  538. // Do nothing
  539. };
  540. Control.prototype._draw = function (parentMeasure, context) {
  541. // Do nothing
  542. };
  543. Control.prototype._prepareFont = function () {
  544. if (!this._fontFamily) {
  545. return;
  546. }
  547. this._font = this._fontSize + "px " + this._fontFamily;
  548. this._fontOffset = Control._GetFontOffset(this._font);
  549. this._markAsDirty();
  550. };
  551. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
  552. get: function () {
  553. return Control._HORIZONTAL_ALIGNMENT_LEFT;
  554. },
  555. enumerable: true,
  556. configurable: true
  557. });
  558. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
  559. get: function () {
  560. return Control._HORIZONTAL_ALIGNMENT_RIGHT;
  561. },
  562. enumerable: true,
  563. configurable: true
  564. });
  565. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
  566. get: function () {
  567. return Control._HORIZONTAL_ALIGNMENT_CENTER;
  568. },
  569. enumerable: true,
  570. configurable: true
  571. });
  572. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
  573. get: function () {
  574. return Control._VERTICAL_ALIGNMENT_TOP;
  575. },
  576. enumerable: true,
  577. configurable: true
  578. });
  579. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
  580. get: function () {
  581. return Control._VERTICAL_ALIGNMENT_BOTTOM;
  582. },
  583. enumerable: true,
  584. configurable: true
  585. });
  586. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
  587. get: function () {
  588. return Control._VERTICAL_ALIGNMENT_CENTER;
  589. },
  590. enumerable: true,
  591. configurable: true
  592. });
  593. Control._GetFontOffset = function (font) {
  594. if (Control._FontHeightSizes[font]) {
  595. return Control._FontHeightSizes[font];
  596. }
  597. var text = document.createElement("span");
  598. text.innerHTML = "Hg";
  599. text.style.font = font;
  600. var block = document.createElement("div");
  601. block.style.display = "inline-block";
  602. block.style.width = "1px";
  603. block.style.height = "0px";
  604. block.style.verticalAlign = "bottom";
  605. var div = document.createElement("div");
  606. div.appendChild(text);
  607. div.appendChild(block);
  608. document.body.appendChild(div);
  609. var fontAscent = 0;
  610. var fontHeight = 0;
  611. try {
  612. fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  613. block.style.verticalAlign = "baseline";
  614. fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  615. }
  616. finally {
  617. div.remove();
  618. }
  619. var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
  620. Control._FontHeightSizes[font] = result;
  621. return result;
  622. };
  623. ;
  624. return Control;
  625. }());
  626. // Statics
  627. Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
  628. Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
  629. Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
  630. Control._VERTICAL_ALIGNMENT_TOP = 0;
  631. Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
  632. Control._VERTICAL_ALIGNMENT_CENTER = 2;
  633. Control._FontHeightSizes = {};
  634. GUI.Control = Control;
  635. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  636. })(BABYLON || (BABYLON = {}));
  637. //# sourceMappingURL=control.js.map
  638. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  639. var __extends = (this && this.__extends) || (function () {
  640. var extendStatics = Object.setPrototypeOf ||
  641. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  642. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  643. return function (d, b) {
  644. extendStatics(d, b);
  645. function __() { this.constructor = d; }
  646. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  647. };
  648. })();
  649. var BABYLON;
  650. (function (BABYLON) {
  651. var GUI;
  652. (function (GUI) {
  653. var ContentControl = (function (_super) {
  654. __extends(ContentControl, _super);
  655. function ContentControl(name) {
  656. var _this = _super.call(this, name) || this;
  657. _this.name = name;
  658. _this._measureForChild = GUI.Measure.Empty();
  659. return _this;
  660. }
  661. Object.defineProperty(ContentControl.prototype, "child", {
  662. get: function () {
  663. return this._child;
  664. },
  665. set: function (control) {
  666. if (this._child === control) {
  667. return;
  668. }
  669. this._child = control;
  670. control._link(this._root, this._host);
  671. this._markAsDirty();
  672. },
  673. enumerable: true,
  674. configurable: true
  675. });
  676. ContentControl.prototype._localDraw = function (context) {
  677. // Implemented by child to be injected inside main draw
  678. };
  679. ContentControl.prototype._draw = function (parentMeasure, context) {
  680. context.save();
  681. _super.prototype._processMeasures.call(this, parentMeasure, context);
  682. this.applyStates(context);
  683. this._localDraw(context);
  684. if (this._child) {
  685. this._child._draw(this._measureForChild, context);
  686. }
  687. context.restore();
  688. };
  689. ContentControl.prototype._additionalProcessing = function (parentMeasure, context) {
  690. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  691. this._measureForChild.copyFrom(this._currentMeasure);
  692. };
  693. return ContentControl;
  694. }(GUI.Control));
  695. GUI.ContentControl = ContentControl;
  696. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  697. })(BABYLON || (BABYLON = {}));
  698. //# sourceMappingURL=contentControl.js.map
  699. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  700. var __extends = (this && this.__extends) || (function () {
  701. var extendStatics = Object.setPrototypeOf ||
  702. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  703. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  704. return function (d, b) {
  705. extendStatics(d, b);
  706. function __() { this.constructor = d; }
  707. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  708. };
  709. })();
  710. var BABYLON;
  711. (function (BABYLON) {
  712. var GUI;
  713. (function (GUI) {
  714. var Container = (function (_super) {
  715. __extends(Container, _super);
  716. function Container(name) {
  717. var _this = _super.call(this, name) || this;
  718. _this.name = name;
  719. _this._children = new Array();
  720. return _this;
  721. }
  722. Container.prototype.addControl = function (control) {
  723. var index = this._children.indexOf(control);
  724. if (index !== -1) {
  725. return this;
  726. }
  727. control._link(this, this._host);
  728. this._reOrderControl(control);
  729. this._markAsDirty();
  730. return this;
  731. };
  732. Container.prototype.removeControl = function (control) {
  733. var index = this._children.indexOf(control);
  734. if (index !== -1) {
  735. this._children.splice(index, 1);
  736. }
  737. this._markAsDirty();
  738. return this;
  739. };
  740. Container.prototype._reOrderControl = function (control) {
  741. this.removeControl(control);
  742. for (var index = 0; index < this._children.length; index++) {
  743. if (this._children[index].zIndex > control.zIndex) {
  744. this._children.splice(index, 0, control);
  745. return;
  746. }
  747. }
  748. this._children.push(control);
  749. this._markAsDirty();
  750. };
  751. Container.prototype._draw = function (parentMeasure, context) {
  752. context.save();
  753. _super.prototype._processMeasures.call(this, parentMeasure, context);
  754. this.applyStates(context);
  755. for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
  756. var child = _a[_i];
  757. child._draw(this._currentMeasure, context);
  758. }
  759. context.restore();
  760. };
  761. return Container;
  762. }(GUI.Control));
  763. GUI.Container = Container;
  764. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  765. })(BABYLON || (BABYLON = {}));
  766. //# sourceMappingURL=container.js.map
  767. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  768. var __extends = (this && this.__extends) || (function () {
  769. var extendStatics = Object.setPrototypeOf ||
  770. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  771. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  772. return function (d, b) {
  773. extendStatics(d, b);
  774. function __() { this.constructor = d; }
  775. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  776. };
  777. })();
  778. var BABYLON;
  779. (function (BABYLON) {
  780. var GUI;
  781. (function (GUI) {
  782. var Rectangle = (function (_super) {
  783. __extends(Rectangle, _super);
  784. function Rectangle(name) {
  785. var _this = _super.call(this, name) || this;
  786. _this.name = name;
  787. _this._thickness = 1;
  788. return _this;
  789. }
  790. Object.defineProperty(Rectangle.prototype, "thickness", {
  791. get: function () {
  792. return this._thickness;
  793. },
  794. set: function (value) {
  795. if (this._thickness === value) {
  796. return;
  797. }
  798. this._thickness = value;
  799. this._markAsDirty();
  800. },
  801. enumerable: true,
  802. configurable: true
  803. });
  804. Object.defineProperty(Rectangle.prototype, "background", {
  805. get: function () {
  806. return this._background;
  807. },
  808. set: function (value) {
  809. if (this._background === value) {
  810. return;
  811. }
  812. this._background = value;
  813. this._markAsDirty();
  814. },
  815. enumerable: true,
  816. configurable: true
  817. });
  818. Rectangle.prototype._localDraw = function (context) {
  819. context.save();
  820. if (this._background) {
  821. context.fillStyle = this._background;
  822. context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  823. }
  824. if (this._thickness) {
  825. if (this.color) {
  826. context.strokeStyle = this.color;
  827. }
  828. context.lineWidth = this._thickness;
  829. context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  830. }
  831. context.restore();
  832. };
  833. Rectangle.prototype._additionalProcessing = function (parentMeasure, context) {
  834. _super.prototype._additionalProcessing.call(this, parentMeasure, context);
  835. this._measureForChild.width -= 2 * this._thickness;
  836. this._measureForChild.height -= 2 * this._thickness;
  837. this._measureForChild.left += this._thickness;
  838. this._measureForChild.top += this._thickness;
  839. };
  840. return Rectangle;
  841. }(GUI.ContentControl));
  842. GUI.Rectangle = Rectangle;
  843. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  844. })(BABYLON || (BABYLON = {}));
  845. //# sourceMappingURL=rectangle.js.map
  846. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  847. var __extends = (this && this.__extends) || (function () {
  848. var extendStatics = Object.setPrototypeOf ||
  849. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  850. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  851. return function (d, b) {
  852. extendStatics(d, b);
  853. function __() { this.constructor = d; }
  854. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  855. };
  856. })();
  857. var BABYLON;
  858. (function (BABYLON) {
  859. var GUI;
  860. (function (GUI) {
  861. var TextBlock = (function (_super) {
  862. __extends(TextBlock, _super);
  863. function TextBlock(name, text) {
  864. var _this = _super.call(this, name) || this;
  865. _this.name = name;
  866. _this._textWrapping = false;
  867. _this._textHorizontalAlignment = GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
  868. _this._textVerticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_CENTER;
  869. _this.text = text;
  870. return _this;
  871. }
  872. Object.defineProperty(TextBlock.prototype, "textWrapping", {
  873. get: function () {
  874. return this._textWrapping;
  875. },
  876. set: function (value) {
  877. if (this._textWrapping === value) {
  878. return;
  879. }
  880. this._textWrapping = value;
  881. this._markAsDirty();
  882. },
  883. enumerable: true,
  884. configurable: true
  885. });
  886. Object.defineProperty(TextBlock.prototype, "text", {
  887. get: function () {
  888. return this._text;
  889. },
  890. set: function (value) {
  891. if (this._text === value) {
  892. return;
  893. }
  894. this._text = value;
  895. this._markAsDirty();
  896. },
  897. enumerable: true,
  898. configurable: true
  899. });
  900. Object.defineProperty(TextBlock.prototype, "textHorizontalAlignment", {
  901. get: function () {
  902. return this._textHorizontalAlignment;
  903. },
  904. set: function (value) {
  905. if (this._textHorizontalAlignment === value) {
  906. return;
  907. }
  908. this._textHorizontalAlignment = value;
  909. this._markAsDirty();
  910. },
  911. enumerable: true,
  912. configurable: true
  913. });
  914. Object.defineProperty(TextBlock.prototype, "textVerticalAlignment", {
  915. get: function () {
  916. return this._textVerticalAlignment;
  917. },
  918. set: function (value) {
  919. if (this._textVerticalAlignment === value) {
  920. return;
  921. }
  922. this._textVerticalAlignment = value;
  923. this._markAsDirty();
  924. },
  925. enumerable: true,
  926. configurable: true
  927. });
  928. TextBlock.prototype._measure = function (parentMeasure, context) {
  929. _super.prototype._measure;
  930. };
  931. TextBlock.prototype._drawText = function (text, textWidth, y, context) {
  932. var width = this._currentMeasure.width;
  933. var x = 0;
  934. switch (this._textHorizontalAlignment) {
  935. case GUI.Control.HORIZONTAL_ALIGNMENT_LEFT:
  936. x = 0;
  937. break;
  938. case GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT:
  939. x = width - textWidth;
  940. break;
  941. case GUI.Control.HORIZONTAL_ALIGNMENT_CENTER:
  942. x = (width - textWidth) / 2;
  943. break;
  944. }
  945. context.fillText(text, this._currentMeasure.left + x, y);
  946. };
  947. TextBlock.prototype._draw = function (parentMeasure, context) {
  948. context.save();
  949. this.applyStates(context);
  950. _super.prototype._processMeasures.call(this, parentMeasure, context);
  951. // Render lines
  952. this._renderLines(context);
  953. context.restore();
  954. };
  955. TextBlock.prototype._additionalProcessing = function (parentMeasure, context) {
  956. this._lines = [];
  957. if (this._textWrapping) {
  958. var words = this.text.split(' ');
  959. var line = '';
  960. var width = this._currentMeasure.width;
  961. var lineWidth = 0;
  962. for (var n = 0; n < words.length; n++) {
  963. var testLine = line + words[n] + ' ';
  964. var metrics = context.measureText(testLine);
  965. var testWidth = metrics.width;
  966. if (testWidth > width && n > 0) {
  967. this._lines.push({ text: line, width: lineWidth });
  968. line = words[n] + ' ';
  969. lineWidth = context.measureText(line).width;
  970. }
  971. else {
  972. lineWidth = testWidth;
  973. line = testLine;
  974. }
  975. }
  976. this._lines.push({ text: line, width: lineWidth });
  977. }
  978. else {
  979. this._lines.push({ text: this.text, width: context.measureText(this.text).width });
  980. }
  981. };
  982. TextBlock.prototype._renderLines = function (context) {
  983. var width = this._currentMeasure.width;
  984. var height = this._currentMeasure.height;
  985. if (!this._fontOffset) {
  986. this._fontOffset = GUI.Control._GetFontOffset(context.font);
  987. }
  988. var rootY = 0;
  989. switch (this._textVerticalAlignment) {
  990. case GUI.Control.VERTICAL_ALIGNMENT_TOP:
  991. rootY = this._fontOffset.ascent;
  992. break;
  993. case GUI.Control.VERTICAL_ALIGNMENT_BOTTOM:
  994. rootY = height - this._fontOffset.height * (this._lines.length - 1) - this._fontOffset.descent;
  995. break;
  996. case GUI.Control.VERTICAL_ALIGNMENT_CENTER:
  997. rootY = this._fontOffset.ascent + (height - this._fontOffset.height * this._lines.length) / 2;
  998. break;
  999. }
  1000. rootY += this._currentMeasure.top;
  1001. for (var _i = 0, _a = this._lines; _i < _a.length; _i++) {
  1002. var line = _a[_i];
  1003. this._drawText(line.text, line.width, rootY, context);
  1004. rootY += this._fontOffset.height;
  1005. }
  1006. };
  1007. return TextBlock;
  1008. }(GUI.Control));
  1009. GUI.TextBlock = TextBlock;
  1010. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  1011. })(BABYLON || (BABYLON = {}));
  1012. //# sourceMappingURL=textBlock.js.map