grid.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  1. import { Container } from "./container";
  2. import { ValueAndUnit } from "../valueAndUnit";
  3. import { Control } from "./control";
  4. import { Measure } from "../measure";
  5. import { Nullable } from "babylonjs";
  6. /**
  7. * Class used to create a 2D grid container
  8. */
  9. export class Grid extends Container {
  10. private _rowDefinitions = new Array<ValueAndUnit>();
  11. private _columnDefinitions = new Array<ValueAndUnit>();
  12. private _cells: { [key: string]: Container } = {};
  13. private _childControls = new Array<Control>();
  14. /**
  15. * Gets the number of columns
  16. */
  17. public get columnCount(): number {
  18. return this._columnDefinitions.length;
  19. }
  20. /**
  21. * Gets the number of rows
  22. */
  23. public get rowCount(): number {
  24. return this._rowDefinitions.length;
  25. }
  26. /** Gets the list of children */
  27. public get children(): Control[] {
  28. return this._childControls;
  29. }
  30. /**
  31. * Gets the definition of a specific row
  32. * @param index defines the index of the row
  33. * @returns the row definition
  34. */
  35. public getRowDefinition(index: number): Nullable<ValueAndUnit> {
  36. if (index < 0 || index >= this._rowDefinitions.length) {
  37. return null;
  38. }
  39. return this._rowDefinitions[index];
  40. }
  41. /**
  42. * Gets the definition of a specific column
  43. * @param index defines the index of the column
  44. * @returns the column definition
  45. */
  46. public getColumnDefinition(index: number): Nullable<ValueAndUnit> {
  47. if (index < 0 || index >= this._columnDefinitions.length) {
  48. return null;
  49. }
  50. return this._columnDefinitions[index];
  51. }
  52. /**
  53. * Adds a new row to the grid
  54. * @param height defines the height of the row (either in pixel or a value between 0 and 1)
  55. * @param isPixel defines if the height is expressed in pixel (or in percentage)
  56. * @returns the current grid
  57. */
  58. public addRowDefinition(height: number, isPixel = false): Grid {
  59. this._rowDefinitions.push(new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
  60. this._markAsDirty();
  61. return this;
  62. }
  63. /**
  64. * Adds a new column to the grid
  65. * @param width defines the width of the column (either in pixel or a value between 0 and 1)
  66. * @param isPixel defines if the width is expressed in pixel (or in percentage)
  67. * @returns the current grid
  68. */
  69. public addColumnDefinition(width: number, isPixel = false): Grid {
  70. this._columnDefinitions.push(new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE));
  71. this._markAsDirty();
  72. return this;
  73. }
  74. /**
  75. * Update a row definition
  76. * @param index defines the index of the row to update
  77. * @param height defines the height of the row (either in pixel or a value between 0 and 1)
  78. * @param isPixel defines if the weight is expressed in pixel (or in percentage)
  79. * @returns the current grid
  80. */
  81. public setRowDefinition(index: number, height: number, isPixel = false): Grid {
  82. if (index < 0 || index >= this._rowDefinitions.length) {
  83. return this;
  84. }
  85. let current = this._rowDefinitions[index];
  86. if (current && current.isPixel === isPixel && current.internalValue === height) {
  87. return this;
  88. }
  89. this._rowDefinitions[index] = new ValueAndUnit(height, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
  90. this._markAsDirty();
  91. return this;
  92. }
  93. /**
  94. * Update a column definition
  95. * @param index defines the index of the column to update
  96. * @param width defines the width of the column (either in pixel or a value between 0 and 1)
  97. * @param isPixel defines if the width is expressed in pixel (or in percentage)
  98. * @returns the current grid
  99. */
  100. public setColumnDefinition(index: number, width: number, isPixel = false): Grid {
  101. if (index < 0 || index >= this._columnDefinitions.length) {
  102. return this;
  103. }
  104. let current = this._columnDefinitions[index];
  105. if (current && current.isPixel === isPixel && current.internalValue === width) {
  106. return this;
  107. }
  108. this._columnDefinitions[index] = new ValueAndUnit(width, isPixel ? ValueAndUnit.UNITMODE_PIXEL : ValueAndUnit.UNITMODE_PERCENTAGE);
  109. this._markAsDirty();
  110. return this;
  111. }
  112. /**
  113. * Gets the list of children stored in a specific cell
  114. * @param row defines the row to check
  115. * @param column defines the column to check
  116. * @returns the list of controls
  117. */
  118. public getChildrenAt(row: number, column: number): Nullable<Array<Control>> {
  119. const cell = this._cells[`${row}:${column}`];
  120. if (!cell) {
  121. return null;
  122. }
  123. return cell.children;
  124. }
  125. private _removeCell(cell: Container, key: string) {
  126. if (!cell) {
  127. return;
  128. }
  129. super.removeControl(cell);
  130. for (var control of cell.children) {
  131. let childIndex = this._childControls.indexOf(control);
  132. if (childIndex !== -1) {
  133. this._childControls.splice(childIndex, 1);
  134. }
  135. }
  136. delete this._cells[key];
  137. }
  138. private _offsetCell(previousKey: string, key: string) {
  139. if (!this._cells[key]) {
  140. return;
  141. }
  142. this._cells[previousKey] = this._cells[key];
  143. for (var control of this._cells[previousKey].children) {
  144. control._tag = previousKey;
  145. }
  146. delete this._cells[key];
  147. }
  148. /**
  149. * Remove a column definition at specified index
  150. * @param index defines the index of the column to remove
  151. * @returns the current grid
  152. */
  153. public removeColumnDefinition(index: number): Grid {
  154. if (index < 0 || index >= this._columnDefinitions.length) {
  155. return this;
  156. }
  157. for (var x = 0; x < this._rowDefinitions.length; x++) {
  158. let key = `${x}:${index}`;
  159. let cell = this._cells[key];
  160. this._removeCell(cell, key);
  161. }
  162. for (var x = 0; x < this._rowDefinitions.length; x++) {
  163. for (var y = index + 1; y < this._columnDefinitions.length; y++) {
  164. let previousKey = `${x}:${y - 1}`;
  165. let key = `${x}:${y}`;
  166. this._offsetCell(previousKey, key);
  167. }
  168. }
  169. this._columnDefinitions.splice(index, 1);
  170. this._markAsDirty();
  171. return this;
  172. }
  173. /**
  174. * Remove a row definition at specified index
  175. * @param index defines the index of the row to remove
  176. * @returns the current grid
  177. */
  178. public removeRowDefinition(index: number): Grid {
  179. if (index < 0 || index >= this._rowDefinitions.length) {
  180. return this;
  181. }
  182. for (var y = 0; y < this._columnDefinitions.length; y++) {
  183. let key = `${index}:${y}`;
  184. let cell = this._cells[key];
  185. this._removeCell(cell, key);
  186. }
  187. for (var y = 0; y < this._columnDefinitions.length; y++) {
  188. for (var x = index + 1; x < this._rowDefinitions.length; x++) {
  189. let previousKey = `${x - 1}:${y}`;
  190. let key = `${x}:${y}`;
  191. this._offsetCell(previousKey, key);
  192. }
  193. }
  194. this._rowDefinitions.splice(index, 1);
  195. this._markAsDirty();
  196. return this;
  197. }
  198. /**
  199. * Adds a new control to the current grid
  200. * @param control defines the control to add
  201. * @param row defines the row where to add the control (0 by default)
  202. * @param column defines the column where to add the control (0 by default)
  203. * @returns the current grid
  204. */
  205. public addControl(control: Control, row: number = 0, column: number = 0): Grid {
  206. if (this._rowDefinitions.length === 0) {
  207. // Add default row definition
  208. this.addRowDefinition(1, false);
  209. }
  210. if (this._columnDefinitions.length === 0) {
  211. // Add default column definition
  212. this.addColumnDefinition(1, false);
  213. }
  214. let x = Math.min(row, this._rowDefinitions.length - 1);
  215. let y = Math.min(column, this._columnDefinitions.length - 1);
  216. let key = `${x}:${y}`;
  217. let goodContainer = this._cells[key];
  218. if (!goodContainer) {
  219. goodContainer = new Container(key);
  220. this._cells[key] = goodContainer;
  221. goodContainer.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
  222. goodContainer.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  223. super.addControl(goodContainer);
  224. }
  225. goodContainer.addControl(control);
  226. this._childControls.push(control);
  227. control._tag = key;
  228. this._markAsDirty();
  229. return this;
  230. }
  231. /**
  232. * Removes a control from the current container
  233. * @param control defines the control to remove
  234. * @returns the current container
  235. */
  236. public removeControl(control: Control): Container {
  237. var index = this._childControls.indexOf(control);
  238. if (index !== -1) {
  239. this._childControls.splice(index, 1);
  240. }
  241. let cell = this._cells[control._tag];
  242. if (cell) {
  243. cell.removeControl(control);
  244. }
  245. this._markAsDirty();
  246. return this;
  247. }
  248. /**
  249. * Creates a new Grid
  250. * @param name defines control name
  251. */
  252. constructor(public name?: string) {
  253. super(name);
  254. }
  255. protected _getTypeName(): string {
  256. return "Grid";
  257. }
  258. protected _getGridDefinitions(definitionCallback: (lefts: number[], tops: number[], widths: number[], heights: number[]) => void) {
  259. let widths = [];
  260. let heights = [];
  261. let lefts = [];
  262. let tops = [];
  263. let availableWidth = this._currentMeasure.width;
  264. let globalWidthPercentage = 0;
  265. let availableHeight = this._currentMeasure.height;
  266. let globalHeightPercentage = 0;
  267. // Heights
  268. let index = 0;
  269. for (var value of this._rowDefinitions) {
  270. if (value.isPixel) {
  271. let height = value.getValue(this._host);
  272. availableHeight -= height;
  273. heights[index] = height;
  274. } else {
  275. globalHeightPercentage += value.internalValue;
  276. }
  277. index++;
  278. }
  279. let top = 0;
  280. index = 0;
  281. for (var value of this._rowDefinitions) {
  282. tops.push(top);
  283. if (!value.isPixel) {
  284. let height = (value.internalValue / globalHeightPercentage) * availableHeight;
  285. top += height;
  286. heights[index] = height;
  287. } else {
  288. top += value.getValue(this._host);
  289. }
  290. index++;
  291. }
  292. // Widths
  293. index = 0;
  294. for (var value of this._columnDefinitions) {
  295. if (value.isPixel) {
  296. let width = value.getValue(this._host);
  297. availableWidth -= width;
  298. widths[index] = width;
  299. } else {
  300. globalWidthPercentage += value.internalValue;
  301. }
  302. index++;
  303. }
  304. let left = 0;
  305. index = 0;
  306. for (var value of this._columnDefinitions) {
  307. lefts.push(left);
  308. if (!value.isPixel) {
  309. let width = (value.internalValue / globalWidthPercentage) * availableWidth;
  310. left += width;
  311. widths[index] = width;
  312. } else {
  313. left += value.getValue(this._host);
  314. }
  315. index++;
  316. }
  317. definitionCallback(lefts, tops, widths, heights);
  318. }
  319. protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
  320. this._getGridDefinitions((lefts: number[], tops: number[], widths: number[], heights: number[]) => {
  321. // Setting child sizes
  322. for (var key in this._cells) {
  323. if (!this._cells.hasOwnProperty(key)) {
  324. continue;
  325. }
  326. let split = key.split(":");
  327. let x = parseInt(split[0]);
  328. let y = parseInt(split[1]);
  329. let cell = this._cells[key];
  330. cell.left = lefts[y] + "px";
  331. cell.top = tops[x] + "px";
  332. cell.width = widths[y] + "px";
  333. cell.height = heights[x] + "px";
  334. }
  335. });
  336. super._additionalProcessing(parentMeasure, context);
  337. }
  338. public _flagDescendantsAsMatrixDirty(): void {
  339. for (var key in this._cells) {
  340. if (!this._cells.hasOwnProperty(key)) {
  341. continue;
  342. }
  343. let child = this._cells[key];
  344. child._markMatrixAsDirty();
  345. }
  346. }
  347. public _renderHighlightSpecific(context: CanvasRenderingContext2D): void {
  348. super._renderHighlightSpecific(context);
  349. this._getGridDefinitions((lefts: number[], tops: number[], widths: number[], heights: number[]) => {
  350. // Columns
  351. for (var index = 0; index < lefts.length; index++) {
  352. const left = this._currentMeasure.left + lefts[index] + widths[index];
  353. context.beginPath();
  354. context.moveTo(left, this._currentMeasure.top);
  355. context.lineTo(left, this._currentMeasure.top + this._currentMeasure.height);
  356. context.stroke();
  357. }
  358. // Rows
  359. for (var index = 0; index < tops.length; index++) {
  360. const top = this._currentMeasure.top + tops[index] + heights[index];
  361. context.beginPath();
  362. context.moveTo(this._currentMeasure.left, top);
  363. context.lineTo(this._currentMeasure.left + this._currentMeasure.width, top);
  364. context.stroke();
  365. }
  366. });
  367. context.restore();
  368. }
  369. /** Releases associated resources */
  370. public dispose() {
  371. super.dispose();
  372. for (var control of this._childControls) {
  373. control.dispose();
  374. }
  375. }
  376. }