control.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. /// <reference path="../../../dist/preview release/babylon.d.ts"/>
  2. var BABYLON;
  3. (function (BABYLON) {
  4. var GUI;
  5. (function (GUI) {
  6. var Control = (function () {
  7. // Functions
  8. function Control(name) {
  9. this.name = name;
  10. this._zIndex = 0;
  11. this._currentMeasure = GUI.Measure.Empty();
  12. this._fontSize = 18;
  13. this._width = 1;
  14. this._height = 1;
  15. this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
  16. this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
  17. this._isDirty = true;
  18. this._cachedParentMeasure = GUI.Measure.Empty();
  19. this._marginLeft = 0;
  20. this._marginRight = 0;
  21. this._marginTop = 0;
  22. this._marginBottom = 0;
  23. this._unitMode = Control.UNITMODE_PERCENTAGE;
  24. this.fontFamily = "Arial";
  25. }
  26. Object.defineProperty(Control.prototype, "unitMode", {
  27. // Properties
  28. get: function () {
  29. return this._unitMode;
  30. },
  31. set: function (value) {
  32. if (this._unitMode === value) {
  33. return;
  34. }
  35. this._unitMode = value;
  36. this._markAsDirty();
  37. },
  38. enumerable: true,
  39. configurable: true
  40. });
  41. Object.defineProperty(Control.prototype, "horizontalAlignment", {
  42. get: function () {
  43. return this._horizontalAlignment;
  44. },
  45. set: function (value) {
  46. if (this._horizontalAlignment === value) {
  47. return;
  48. }
  49. this._horizontalAlignment = value;
  50. this._markAsDirty();
  51. },
  52. enumerable: true,
  53. configurable: true
  54. });
  55. Object.defineProperty(Control.prototype, "verticalAlignment", {
  56. get: function () {
  57. return this._verticalAlignment;
  58. },
  59. set: function (value) {
  60. if (this._verticalAlignment === value) {
  61. return;
  62. }
  63. this._verticalAlignment = value;
  64. this._markAsDirty();
  65. },
  66. enumerable: true,
  67. configurable: true
  68. });
  69. Object.defineProperty(Control.prototype, "width", {
  70. get: function () {
  71. return this._width;
  72. },
  73. set: function (value) {
  74. if (value < 0) {
  75. value = 0;
  76. }
  77. if (this._width === value) {
  78. return;
  79. }
  80. this._width = value;
  81. this._markAsDirty();
  82. },
  83. enumerable: true,
  84. configurable: true
  85. });
  86. Object.defineProperty(Control.prototype, "height", {
  87. get: function () {
  88. return this._height;
  89. },
  90. set: function (value) {
  91. if (value < 0) {
  92. value = 0;
  93. }
  94. if (this._height === value) {
  95. return;
  96. }
  97. this._height = value;
  98. this._markAsDirty();
  99. },
  100. enumerable: true,
  101. configurable: true
  102. });
  103. Object.defineProperty(Control.prototype, "fontFamily", {
  104. get: function () {
  105. return this._fontFamily;
  106. },
  107. set: function (value) {
  108. if (this._fontFamily === value) {
  109. return;
  110. }
  111. this._fontFamily = value;
  112. this._prepareFont();
  113. },
  114. enumerable: true,
  115. configurable: true
  116. });
  117. Object.defineProperty(Control.prototype, "fontSize", {
  118. get: function () {
  119. return this._fontSize;
  120. },
  121. set: function (value) {
  122. if (this._fontSize === value) {
  123. return;
  124. }
  125. this._fontSize = value;
  126. this._prepareFont();
  127. },
  128. enumerable: true,
  129. configurable: true
  130. });
  131. Object.defineProperty(Control.prototype, "color", {
  132. get: function () {
  133. return this._color;
  134. },
  135. set: function (value) {
  136. if (this._color === value) {
  137. return;
  138. }
  139. this._color = value;
  140. this._markAsDirty();
  141. },
  142. enumerable: true,
  143. configurable: true
  144. });
  145. Object.defineProperty(Control.prototype, "zIndex", {
  146. get: function () {
  147. return this._zIndex;
  148. },
  149. set: function (value) {
  150. if (this.zIndex === value) {
  151. return;
  152. }
  153. this._zIndex = value;
  154. this._root._reOrderControl(this);
  155. },
  156. enumerable: true,
  157. configurable: true
  158. });
  159. Object.defineProperty(Control.prototype, "isDirty", {
  160. get: function () {
  161. return this._isDirty;
  162. },
  163. enumerable: true,
  164. configurable: true
  165. });
  166. Object.defineProperty(Control.prototype, "marginLeft", {
  167. get: function () {
  168. return this._marginLeft;
  169. },
  170. set: function (value) {
  171. if (this._marginLeft === value) {
  172. return;
  173. }
  174. this._marginLeft = value;
  175. this._markAsDirty();
  176. },
  177. enumerable: true,
  178. configurable: true
  179. });
  180. Object.defineProperty(Control.prototype, "marginRight", {
  181. get: function () {
  182. return this._marginRight;
  183. },
  184. set: function (value) {
  185. if (this._marginRight === value) {
  186. return;
  187. }
  188. this._marginRight = value;
  189. this._markAsDirty();
  190. },
  191. enumerable: true,
  192. configurable: true
  193. });
  194. Object.defineProperty(Control.prototype, "marginTop", {
  195. get: function () {
  196. return this._marginTop;
  197. },
  198. set: function (value) {
  199. if (this._marginTop === value) {
  200. return;
  201. }
  202. this._marginTop = value;
  203. this._markAsDirty();
  204. },
  205. enumerable: true,
  206. configurable: true
  207. });
  208. Object.defineProperty(Control.prototype, "marginBottom", {
  209. get: function () {
  210. return this._marginBottom;
  211. },
  212. set: function (value) {
  213. if (this._marginBottom === value) {
  214. return;
  215. }
  216. this._marginBottom = value;
  217. this._markAsDirty();
  218. },
  219. enumerable: true,
  220. configurable: true
  221. });
  222. Control.prototype._markAsDirty = function () {
  223. this._isDirty = true;
  224. if (!this._root) {
  225. return; // Not yet connected
  226. }
  227. this._root._markAsDirty();
  228. };
  229. Control.prototype._link = function (root, host) {
  230. this._root = root;
  231. this._host = host;
  232. };
  233. Control.prototype.applyStates = function (context) {
  234. if (this._font) {
  235. context.font = this._font;
  236. }
  237. if (this._color) {
  238. context.fillStyle = this._color;
  239. }
  240. };
  241. Control.prototype._processMeasures = function (parentMeasure, context) {
  242. if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
  243. this._currentMeasure.copyFrom(parentMeasure);
  244. this._measure(parentMeasure, context);
  245. this._computeAlignment(parentMeasure, context);
  246. this._additionalProcessing(parentMeasure, context);
  247. }
  248. // Clip
  249. context.beginPath();
  250. context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
  251. context.clip();
  252. this._isDirty = false;
  253. this._cachedParentMeasure.copyFrom(parentMeasure);
  254. };
  255. Control.prototype._measure = function (parentMeasure, context) {
  256. // Width / Height
  257. if (this._unitMode === Control.UNITMODE_PIXEL) {
  258. this._currentMeasure.width = this._width;
  259. }
  260. else {
  261. this._currentMeasure.width *= this._width;
  262. }
  263. if (this._unitMode === Control.UNITMODE_PIXEL) {
  264. this._currentMeasure.height = this._height;
  265. }
  266. else {
  267. this._currentMeasure.height *= this._height;
  268. }
  269. };
  270. Control.prototype._computeAlignment = function (parentMeasure, context) {
  271. var width = this._currentMeasure.width;
  272. var height = this._currentMeasure.height;
  273. var parentWidth = parentMeasure.width;
  274. var parentHeight = parentMeasure.height;
  275. // Left / top
  276. var x = 0;
  277. var y = 0;
  278. switch (this.horizontalAlignment) {
  279. case Control.HORIZONTAL_ALIGNMENT_LEFT:
  280. x = 0;
  281. break;
  282. case Control.HORIZONTAL_ALIGNMENT_RIGHT:
  283. x = parentWidth - width;
  284. break;
  285. case Control.HORIZONTAL_ALIGNMENT_CENTER:
  286. x = (parentWidth - width) / 2;
  287. break;
  288. }
  289. switch (this.verticalAlignment) {
  290. case Control.VERTICAL_ALIGNMENT_TOP:
  291. y = 0;
  292. break;
  293. case Control.VERTICAL_ALIGNMENT_BOTTOM:
  294. y = parentHeight - height;
  295. break;
  296. case Control.VERTICAL_ALIGNMENT_CENTER:
  297. y = (parentHeight - height) / 2;
  298. break;
  299. }
  300. if (this._unitMode === Control.UNITMODE_PIXEL) {
  301. this._currentMeasure.left += this._marginLeft;
  302. this._currentMeasure.left -= this._marginRight;
  303. this._currentMeasure.top += this._marginTop;
  304. this._currentMeasure.top -= this._marginBottom;
  305. }
  306. else {
  307. this._currentMeasure.left += parentWidth * this._marginLeft;
  308. this._currentMeasure.left -= parentWidth * this._marginRight;
  309. this._currentMeasure.top += parentHeight * this._marginTop;
  310. this._currentMeasure.top -= parentHeight * this._marginBottom;
  311. }
  312. this._currentMeasure.left += x;
  313. this._currentMeasure.top += y;
  314. };
  315. Control.prototype._additionalProcessing = function (parentMeasure, context) {
  316. // Do nothing
  317. };
  318. Control.prototype._draw = function (parentMeasure, context) {
  319. // Do nothing
  320. };
  321. Control.prototype._prepareFont = function () {
  322. if (!this._fontFamily) {
  323. return;
  324. }
  325. this._font = this._fontSize + "px " + this._fontFamily;
  326. this._fontOffset = Control._GetFontOffset(this._font);
  327. this._markAsDirty();
  328. };
  329. Object.defineProperty(Control, "UNITMODE_PERCENTAGE", {
  330. get: function () {
  331. return Control._UNITMODE_PERCENTAGE;
  332. },
  333. enumerable: true,
  334. configurable: true
  335. });
  336. Object.defineProperty(Control, "UNITMODE_PIXEL", {
  337. get: function () {
  338. return Control._UNITMODE_PIXEL;
  339. },
  340. enumerable: true,
  341. configurable: true
  342. });
  343. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_LEFT", {
  344. get: function () {
  345. return Control._HORIZONTAL_ALIGNMENT_LEFT;
  346. },
  347. enumerable: true,
  348. configurable: true
  349. });
  350. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_RIGHT", {
  351. get: function () {
  352. return Control._HORIZONTAL_ALIGNMENT_RIGHT;
  353. },
  354. enumerable: true,
  355. configurable: true
  356. });
  357. Object.defineProperty(Control, "HORIZONTAL_ALIGNMENT_CENTER", {
  358. get: function () {
  359. return Control._HORIZONTAL_ALIGNMENT_CENTER;
  360. },
  361. enumerable: true,
  362. configurable: true
  363. });
  364. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_TOP", {
  365. get: function () {
  366. return Control._VERTICAL_ALIGNMENT_TOP;
  367. },
  368. enumerable: true,
  369. configurable: true
  370. });
  371. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_BOTTOM", {
  372. get: function () {
  373. return Control._VERTICAL_ALIGNMENT_BOTTOM;
  374. },
  375. enumerable: true,
  376. configurable: true
  377. });
  378. Object.defineProperty(Control, "VERTICAL_ALIGNMENT_CENTER", {
  379. get: function () {
  380. return Control._VERTICAL_ALIGNMENT_CENTER;
  381. },
  382. enumerable: true,
  383. configurable: true
  384. });
  385. Control._GetFontOffset = function (font) {
  386. if (Control._FontHeightSizes[font]) {
  387. return Control._FontHeightSizes[font];
  388. }
  389. var text = document.createElement("span");
  390. text.innerHTML = "Hg";
  391. text.style.font = font;
  392. var block = document.createElement("div");
  393. block.style.display = "inline-block";
  394. block.style.width = "1px";
  395. block.style.height = "0px";
  396. block.style.verticalAlign = "bottom";
  397. var div = document.createElement("div");
  398. div.appendChild(text);
  399. div.appendChild(block);
  400. document.body.appendChild(div);
  401. var fontAscent = 0;
  402. var fontHeight = 0;
  403. try {
  404. fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  405. block.style.verticalAlign = "baseline";
  406. fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
  407. }
  408. finally {
  409. div.remove();
  410. }
  411. var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
  412. Control._FontHeightSizes[font] = result;
  413. return result;
  414. };
  415. ;
  416. return Control;
  417. }());
  418. // Statics
  419. Control._HORIZONTAL_ALIGNMENT_LEFT = 0;
  420. Control._HORIZONTAL_ALIGNMENT_RIGHT = 1;
  421. Control._HORIZONTAL_ALIGNMENT_CENTER = 2;
  422. Control._VERTICAL_ALIGNMENT_TOP = 0;
  423. Control._VERTICAL_ALIGNMENT_BOTTOM = 1;
  424. Control._VERTICAL_ALIGNMENT_CENTER = 2;
  425. Control._UNITMODE_PERCENTAGE = 0;
  426. Control._UNITMODE_PIXEL = 1;
  427. Control._FontHeightSizes = {};
  428. GUI.Control = Control;
  429. })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
  430. })(BABYLON || (BABYLON = {}));
  431. //# sourceMappingURL=control.js.map