x4js 1.5.17 → 1.5.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (242) hide show
  1. package/lib/{README.md → README.txt} +0 -0
  2. package/lib/cjs/index.js +39 -103
  3. package/lib/cjs/index.js.map +7 -0
  4. package/lib/esm/index.mjs +39 -87
  5. package/lib/esm/index.mjs.map +7 -0
  6. package/lib/{license.md → licence.md} +0 -0
  7. package/lib/src/MIT-license.md +14 -0
  8. package/lib/{types/action.d.ts → src/action.ts} +64 -33
  9. package/lib/src/alpha.jpg +0 -0
  10. package/lib/src/app_sockets.ts +81 -0
  11. package/lib/src/application.ts +251 -0
  12. package/lib/src/autocomplete.ts +197 -0
  13. package/lib/src/base64.ts +166 -0
  14. package/lib/src/base_component.ts +152 -0
  15. package/lib/src/button.ts +355 -0
  16. package/lib/src/calendar.ts +328 -0
  17. package/lib/src/canvas.ts +505 -0
  18. package/lib/src/cardview.ts +227 -0
  19. package/lib/src/checkbox.ts +188 -0
  20. package/lib/src/color.ts +752 -0
  21. package/lib/src/colorpicker.ts +1639 -0
  22. package/lib/src/combobox.ts +465 -0
  23. package/lib/src/component.ts +2329 -0
  24. package/lib/{esm/dom_events.js → src/copyright.txt} +27 -29
  25. package/lib/src/datastore.ts +1322 -0
  26. package/lib/src/dialog.ts +656 -0
  27. package/lib/src/dom_events.ts +315 -0
  28. package/lib/src/drag_manager.ts +199 -0
  29. package/lib/src/drawtext.ts +355 -0
  30. package/lib/src/fileupload.ts +213 -0
  31. package/lib/src/form.ts +375 -0
  32. package/lib/src/formatters.ts +105 -0
  33. package/lib/src/gridview.ts +1185 -0
  34. package/lib/src/i18n.ts +346 -0
  35. package/lib/src/icon.ts +335 -0
  36. package/lib/src/image.ts +204 -0
  37. package/lib/src/index.ts +89 -0
  38. package/lib/src/input.ts +249 -0
  39. package/lib/src/label.ts +128 -0
  40. package/lib/src/layout.ts +430 -0
  41. package/lib/src/link.ts +86 -0
  42. package/lib/src/listview.ts +765 -0
  43. package/lib/{esm/md5.js → src/md5.ts} +438 -403
  44. package/lib/src/menu.ts +425 -0
  45. package/lib/src/messagebox.ts +224 -0
  46. package/lib/src/panel.ts +86 -0
  47. package/lib/src/popup.ts +494 -0
  48. package/lib/src/property_editor.ts +337 -0
  49. package/lib/src/radiobtn.ts +197 -0
  50. package/lib/src/rating.ts +135 -0
  51. package/lib/src/request.ts +300 -0
  52. package/lib/src/router.ts +185 -0
  53. package/lib/src/settings.ts +77 -0
  54. package/lib/src/sidebarview.ts +103 -0
  55. package/lib/src/spreadsheet.ts +1449 -0
  56. package/lib/src/styles.ts +343 -0
  57. package/lib/src/svgcomponent.ts +577 -0
  58. package/lib/src/tabbar.ts +151 -0
  59. package/lib/src/tabview.ts +110 -0
  60. package/lib/src/textarea.ts +235 -0
  61. package/lib/src/textedit.ts +544 -0
  62. package/lib/src/toaster.ts +80 -0
  63. package/lib/src/tools.ts +1473 -0
  64. package/lib/src/tooltips.ts +191 -0
  65. package/lib/src/treeview.ts +716 -0
  66. package/lib/{esm/version.js → src/version.ts} +30 -29
  67. package/lib/{styles → src}/x4.less +0 -0
  68. package/lib/src/x4dom.ts +57 -0
  69. package/lib/src/x4events.ts +585 -0
  70. package/lib/src/x4react.ts +90 -0
  71. package/package.json +52 -49
  72. package/lib/cjs/action.js +0 -58
  73. package/lib/cjs/app_sockets.js +0 -74
  74. package/lib/cjs/application.js +0 -182
  75. package/lib/cjs/autocomplete.js +0 -155
  76. package/lib/cjs/base_component.js +0 -124
  77. package/lib/cjs/button.js +0 -263
  78. package/lib/cjs/calendar.js +0 -254
  79. package/lib/cjs/canvas.js +0 -361
  80. package/lib/cjs/cardview.js +0 -161
  81. package/lib/cjs/checkbox.js +0 -139
  82. package/lib/cjs/color.js +0 -591
  83. package/lib/cjs/colorpicker.js +0 -1468
  84. package/lib/cjs/combobox.js +0 -349
  85. package/lib/cjs/component.js +0 -1719
  86. package/lib/cjs/datastore.js +0 -985
  87. package/lib/cjs/dialog.js +0 -478
  88. package/lib/cjs/dom_events.js +0 -30
  89. package/lib/cjs/drag_manager.js +0 -145
  90. package/lib/cjs/drawtext.js +0 -276
  91. package/lib/cjs/fileupload.js +0 -167
  92. package/lib/cjs/form.js +0 -304
  93. package/lib/cjs/formatters.js +0 -90
  94. package/lib/cjs/gridview.js +0 -881
  95. package/lib/cjs/i18n.js +0 -266
  96. package/lib/cjs/icon.js +0 -272
  97. package/lib/cjs/image.js +0 -157
  98. package/lib/cjs/input.js +0 -174
  99. package/lib/cjs/label.js +0 -95
  100. package/lib/cjs/layout.js +0 -322
  101. package/lib/cjs/link.js +0 -64
  102. package/lib/cjs/listview.js +0 -546
  103. package/lib/cjs/md5.js +0 -403
  104. package/lib/cjs/menu.js +0 -301
  105. package/lib/cjs/messagebox.js +0 -177
  106. package/lib/cjs/panel.js +0 -68
  107. package/lib/cjs/popup.js +0 -383
  108. package/lib/cjs/property_editor.js +0 -252
  109. package/lib/cjs/radiobtn.js +0 -140
  110. package/lib/cjs/rating.js +0 -102
  111. package/lib/cjs/request.js +0 -246
  112. package/lib/cjs/router.js +0 -139
  113. package/lib/cjs/settings.js +0 -69
  114. package/lib/cjs/sidebarview.js +0 -82
  115. package/lib/cjs/spreadsheet.js +0 -1084
  116. package/lib/cjs/styles.js +0 -275
  117. package/lib/cjs/svgcomponent.js +0 -447
  118. package/lib/cjs/tabbar.js +0 -111
  119. package/lib/cjs/tabview.js +0 -85
  120. package/lib/cjs/textarea.js +0 -165
  121. package/lib/cjs/textedit.js +0 -415
  122. package/lib/cjs/toaster.js +0 -64
  123. package/lib/cjs/tools.js +0 -1197
  124. package/lib/cjs/tooltips.js +0 -157
  125. package/lib/cjs/treeview.js +0 -535
  126. package/lib/cjs/version.js +0 -32
  127. package/lib/cjs/x4dom.js +0 -32
  128. package/lib/cjs/x4events.js +0 -384
  129. package/lib/cjs/x4react.js +0 -72
  130. package/lib/esm/action.js +0 -53
  131. package/lib/esm/app_sockets.js +0 -70
  132. package/lib/esm/application.js +0 -184
  133. package/lib/esm/autocomplete.js +0 -155
  134. package/lib/esm/base_component.js +0 -107
  135. package/lib/esm/button.js +0 -257
  136. package/lib/esm/calendar.js +0 -249
  137. package/lib/esm/canvas.js +0 -358
  138. package/lib/esm/cardview.js +0 -159
  139. package/lib/esm/checkbox.js +0 -134
  140. package/lib/esm/color.js +0 -588
  141. package/lib/esm/colorpicker.js +0 -1475
  142. package/lib/esm/combobox.js +0 -351
  143. package/lib/esm/component.js +0 -1711
  144. package/lib/esm/datastore.js +0 -990
  145. package/lib/esm/dialog.js +0 -490
  146. package/lib/esm/drag_manager.js +0 -147
  147. package/lib/esm/drawtext.js +0 -271
  148. package/lib/esm/fileupload.js +0 -163
  149. package/lib/esm/form.js +0 -304
  150. package/lib/esm/formatters.js +0 -81
  151. package/lib/esm/gridview.js +0 -889
  152. package/lib/esm/i18n.js +0 -257
  153. package/lib/esm/icon.js +0 -261
  154. package/lib/esm/image.js +0 -154
  155. package/lib/esm/input.js +0 -182
  156. package/lib/esm/label.js +0 -90
  157. package/lib/esm/layout.js +0 -310
  158. package/lib/esm/link.js +0 -59
  159. package/lib/esm/listview.js +0 -534
  160. package/lib/esm/menu.js +0 -300
  161. package/lib/esm/messagebox.js +0 -161
  162. package/lib/esm/panel.js +0 -65
  163. package/lib/esm/popup.js +0 -379
  164. package/lib/esm/property_editor.js +0 -251
  165. package/lib/esm/radiobtn.js +0 -136
  166. package/lib/esm/rating.js +0 -97
  167. package/lib/esm/request.js +0 -224
  168. package/lib/esm/router.js +0 -136
  169. package/lib/esm/settings.js +0 -66
  170. package/lib/esm/sidebarview.js +0 -79
  171. package/lib/esm/spreadsheet.js +0 -1097
  172. package/lib/esm/styles.js +0 -270
  173. package/lib/esm/svgcomponent.js +0 -450
  174. package/lib/esm/tabbar.js +0 -107
  175. package/lib/esm/tabview.js +0 -83
  176. package/lib/esm/textarea.js +0 -160
  177. package/lib/esm/textedit.js +0 -412
  178. package/lib/esm/toaster.js +0 -62
  179. package/lib/esm/tools.js +0 -1158
  180. package/lib/esm/tooltips.js +0 -153
  181. package/lib/esm/treeview.js +0 -527
  182. package/lib/esm/x4dom.js +0 -29
  183. package/lib/esm/x4events.js +0 -376
  184. package/lib/esm/x4react.js +0 -71
  185. package/lib/types/app_sockets.d.ts +0 -29
  186. package/lib/types/application.d.ts +0 -104
  187. package/lib/types/autocomplete.d.ts +0 -58
  188. package/lib/types/base_component.d.ts +0 -88
  189. package/lib/types/button.d.ts +0 -151
  190. package/lib/types/calendar.d.ts +0 -82
  191. package/lib/types/canvas.d.ts +0 -92
  192. package/lib/types/cardview.d.ts +0 -87
  193. package/lib/types/checkbox.d.ts +0 -77
  194. package/lib/types/color.d.ts +0 -148
  195. package/lib/types/colorpicker.d.ts +0 -107
  196. package/lib/types/combobox.d.ts +0 -107
  197. package/lib/types/component.d.ts +0 -601
  198. package/lib/types/datastore.d.ts +0 -396
  199. package/lib/types/dialog.d.ts +0 -175
  200. package/lib/types/dom_events.d.ts +0 -302
  201. package/lib/types/drag_manager.d.ts +0 -54
  202. package/lib/types/drawtext.d.ts +0 -48
  203. package/lib/types/fileupload.d.ts +0 -64
  204. package/lib/types/form.d.ts +0 -133
  205. package/lib/types/formatters.d.ts +0 -35
  206. package/lib/types/gridview.d.ts +0 -175
  207. package/lib/types/i18n.d.ts +0 -73
  208. package/lib/types/icon.d.ts +0 -64
  209. package/lib/types/image.d.ts +0 -55
  210. package/lib/types/index.d.ts +0 -84
  211. package/lib/types/input.d.ts +0 -91
  212. package/lib/types/label.d.ts +0 -58
  213. package/lib/types/layout.d.ts +0 -87
  214. package/lib/types/link.d.ts +0 -50
  215. package/lib/types/listview.d.ts +0 -178
  216. package/lib/types/md5.d.ts +0 -61
  217. package/lib/types/menu.d.ts +0 -130
  218. package/lib/types/messagebox.d.ts +0 -69
  219. package/lib/types/panel.d.ts +0 -47
  220. package/lib/types/popup.d.ts +0 -75
  221. package/lib/types/property_editor.d.ts +0 -71
  222. package/lib/types/radiobtn.d.ts +0 -73
  223. package/lib/types/rating.d.ts +0 -53
  224. package/lib/types/request.d.ts +0 -52
  225. package/lib/types/router.d.ts +0 -42
  226. package/lib/types/settings.d.ts +0 -37
  227. package/lib/types/sidebarview.d.ts +0 -49
  228. package/lib/types/spreadsheet.d.ts +0 -222
  229. package/lib/types/styles.d.ts +0 -85
  230. package/lib/types/svgcomponent.d.ts +0 -215
  231. package/lib/types/tabbar.d.ts +0 -58
  232. package/lib/types/tabview.d.ts +0 -49
  233. package/lib/types/textarea.d.ts +0 -77
  234. package/lib/types/textedit.d.ts +0 -123
  235. package/lib/types/toaster.d.ts +0 -42
  236. package/lib/types/tools.d.ts +0 -394
  237. package/lib/types/tooltips.d.ts +0 -46
  238. package/lib/types/treeview.d.ts +0 -144
  239. package/lib/types/version.d.ts +0 -29
  240. package/lib/types/x4dom.d.ts +0 -49
  241. package/lib/types/x4events.d.ts +0 -269
  242. package/lib/types/x4react.d.ts +0 -41
@@ -1,1084 +0,0 @@
1
- "use strict";
2
- /**
3
- * ___ ___ __
4
- * \ \_/ / / _
5
- * \ / /_| |_
6
- * / _ \____ _|
7
- * /__/ \__\ |_|
8
- *
9
- * @file spreadsheet.ts
10
- * @author Etienne Cochard
11
- *
12
- * Copyright (c) 2019-2022 R-libre ingenierie
13
- *
14
- * Permission is hereby granted, free of charge, to any person obtaining a copy
15
- * of this software and associated documentation files (the "Software"), to deal
16
- * in the Software without restriction, including without limitation the rights
17
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
18
- * of the Software, and to permit persons to whom the Software is furnished to do so,
19
- * subject to the following conditions:
20
- * The above copyright notice and this permission notice shall be included in all copies
21
- * or substantial portions of the Software.
22
- *
23
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
24
- * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
25
- * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
26
- * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
27
- * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
28
- * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
29
- **/
30
- Object.defineProperty(exports, "__esModule", { value: true });
31
- exports.Spreadsheet = void 0;
32
- const x4dom_1 = require("./x4dom");
33
- const component_1 = require("./component");
34
- const layout_1 = require("./layout");
35
- const textedit_1 = require("./textedit");
36
- const tools_1 = require("./tools");
37
- const tools_2 = require("./tools");
38
- const x4events_1 = require("./x4events");
39
- const combobox_1 = require("./combobox");
40
- class CellData {
41
- }
42
- CellData.empty_cell = {
43
- text: ''
44
- };
45
- /**
46
- *
47
- */
48
- class Spreadsheet extends layout_1.VLayout {
49
- constructor(props) {
50
- super(props);
51
- this.m_columns = props.columns;
52
- this.m_autoedit = props.autoedit;
53
- this.m_lockupdate = 0;
54
- this.m_cells_data = new Map();
55
- this.m_rows_data = new Map();
56
- this.m_itemHeight = 0;
57
- this.m_selection = { row: 0, col: 0 };
58
- this.m_row_count = 0;
59
- this.m_auto_row_count = false;
60
- this.m_recycler = [];
61
- this.m_used_cells = [];
62
- if (props.maxrows === undefined) {
63
- this.m_row_limit = 0;
64
- this.m_auto_row_count = true;
65
- }
66
- else if (props.maxrows < 0) {
67
- this.m_row_limit = 0;
68
- this.m_auto_row_count = true;
69
- }
70
- else {
71
- this.m_row_limit = props.maxrows;
72
- }
73
- this.setAttribute('tabindex', 0);
74
- this.setDomEvent('click', (e) => this._itemClick(e));
75
- this.setDomEvent('dblclick', (e) => this._itemDblClick(e));
76
- this.setDomEvent('keydown', (e) => this._handleKey(e));
77
- this.setDomEvent('keypress', (e) => this._keyPress(e));
78
- this.setDomEvent('focus', () => this._focus(true));
79
- this.setDomEvent('focusout', () => this._focus(false));
80
- this.setDomEvent('contextmenu', (e) => this._ctxMenu(e));
81
- this.mapPropEvents(props, 'dblClick', 'selectionChange', 'contextMenu', 'change');
82
- }
83
- componentCreated() {
84
- super.componentCreated();
85
- this._updateScroll(true);
86
- }
87
- setColWidth(col, width) {
88
- this._on_col_resize(col, width);
89
- this.update(10);
90
- }
91
- getColWidth(col) {
92
- if (!this.m_columns[col]) {
93
- return;
94
- }
95
- return this.m_columns[col].width;
96
- }
97
- setColTitle(col, title) {
98
- console.assert(this.m_columns[col] !== undefined); // what ?
99
- this.m_columns[col].title = title;
100
- this.update(10);
101
- }
102
- /**
103
- * reset the spreadsheet
104
- * @param columns
105
- */
106
- reset(columns) {
107
- if (columns) {
108
- this.m_columns = columns;
109
- }
110
- this.m_cells_data = new Map();
111
- this.m_rows_data = new Map();
112
- this.update(10);
113
- }
114
- /**
115
- * insert a row
116
- * @param before row number before wich insert the new row
117
- */
118
- insertRow(before) {
119
- let new_cells_data = new Map();
120
- this.m_cells_data.forEach((celldata, key) => {
121
- let { row, col } = _getid(key);
122
- if (row >= before) {
123
- new_cells_data.set(_mkid(row + 1, col), celldata);
124
- }
125
- else {
126
- new_cells_data.set(key, celldata);
127
- }
128
- });
129
- let new_rows_data = new Map();
130
- this.m_rows_data.forEach((rowdata, row) => {
131
- if (row >= before) {
132
- new_rows_data.set(row + 1, rowdata);
133
- }
134
- else {
135
- new_rows_data.set(row, rowdata);
136
- }
137
- });
138
- this.m_cells_data = new_cells_data;
139
- this.m_rows_data = new_rows_data;
140
- this._buildItems();
141
- }
142
- /**
143
- * remove a row
144
- * @param rowtodel row number to remove
145
- */
146
- deleteRow(rowtodel) {
147
- let new_cells_data = new Map();
148
- let new_rows_data = new Map();
149
- this.m_cells_data.forEach((celldata, key) => {
150
- let { row, col } = _getid(key);
151
- if (row > rowtodel) {
152
- new_cells_data.set(_mkid(row - 1, col), celldata);
153
- }
154
- else if (row < rowtodel) {
155
- new_cells_data.set(key, celldata);
156
- }
157
- });
158
- this.m_rows_data.forEach((rowdata, row) => {
159
- if (row > rowtodel) {
160
- new_rows_data.set(row - 1, rowdata);
161
- }
162
- else if (row < rowtodel) {
163
- new_rows_data.set(row, rowdata);
164
- }
165
- });
166
- this.m_cells_data = new_cells_data;
167
- this.m_rows_data = new_rows_data;
168
- this._buildItems();
169
- }
170
- /**
171
- * insert a new column
172
- * @param before column index before to insert the new column or <0 to append
173
- */
174
- insertCol(before, column) {
175
- let inspos = before;
176
- if (inspos < 0) {
177
- inspos = this.m_columns.length + 1;
178
- }
179
- // insert the col at the right place
180
- this.m_columns.splice(inspos, 0, column);
181
- if (before >= 0) {
182
- let new_cells_data = new Map();
183
- this.m_cells_data.forEach((celldata, key) => {
184
- let { row, col } = _getid(key);
185
- if (col >= before) {
186
- new_cells_data.set(_mkid(row, col + 1), celldata);
187
- }
188
- else {
189
- new_cells_data.set(key, celldata);
190
- }
191
- });
192
- this.m_cells_data = new_cells_data;
193
- }
194
- this.update();
195
- }
196
- /**
197
- * remove a column
198
- * @param coltodel
199
- */
200
- deleteCol(coltodel) {
201
- // insert the col at the right place
202
- this.m_columns.splice(coltodel, 1);
203
- let new_cells_data = new Map();
204
- this.m_cells_data.forEach((celldata, key) => {
205
- let { row, col } = _getid(key);
206
- if (col > coltodel) {
207
- new_cells_data.set(_mkid(row, col - 1), celldata);
208
- }
209
- else if (col < coltodel) {
210
- new_cells_data.set(key, celldata);
211
- }
212
- });
213
- this.m_cells_data = new_cells_data;
214
- this.update();
215
- }
216
- /**
217
- *
218
- * @param row
219
- * @param col
220
- */
221
- _getCellData(row, col, raw = false) {
222
- let value = this.m_cells_data.get(_mkid(row, col));
223
- if (value === undefined) {
224
- return raw ? null : CellData.empty_cell;
225
- }
226
- return value;
227
- }
228
- _focus(focus) {
229
- this.setClass('@focus', focus);
230
- }
231
- _ctxMenu(e) {
232
- let dom = e.target, self = this.dom;
233
- while (dom && dom != self) {
234
- let itm = component_1.Component.getElement(dom), row = itm.getData('row-id'), col = itm.getData('col-id');
235
- if (row !== undefined) {
236
- this._selectItem(row, col);
237
- this.emit('contextMenu', (0, x4events_1.EvContextMenu)(e, { row, col, item: itm }));
238
- e.preventDefault();
239
- return;
240
- }
241
- dom = dom.parentElement;
242
- }
243
- }
244
- /** @ignore */
245
- render() {
246
- this.m_recycler = [];
247
- this.m_container = new component_1.Component({
248
- cls: 'content',
249
- });
250
- this.m_view = new component_1.Component({
251
- cls: '@scroll-view',
252
- flex: 1,
253
- dom_events: {
254
- sizechange: () => this._updateScroll(true),
255
- scroll: () => this._updateScroll(false)
256
- },
257
- content: this.m_container
258
- });
259
- let cols = this.m_columns.map((col, index) => {
260
- let comp = new component_1.Component({
261
- cls: '@cell c' + index,
262
- content: col.title ? col.title : '&nbsp',
263
- flex: col.width < 0 ? -col.width : undefined,
264
- attrs: {
265
- title: col.title
266
- },
267
- style: {
268
- width: col.width >= 0 ? col.width : undefined,
269
- minWidth: col.min_width
270
- },
271
- });
272
- new component_1.SizerOverlay({
273
- target: comp,
274
- sens: 'right',
275
- resize: (ev) => {
276
- this._on_col_resize(index, ev.size.width);
277
- }
278
- });
279
- col.$col = comp;
280
- return comp;
281
- });
282
- this.m_header = new layout_1.HLayout({
283
- cls: '@header',
284
- content: cols,
285
- });
286
- this.setContent([
287
- this.m_header,
288
- this.m_view
289
- ]);
290
- }
291
- /**
292
- *
293
- */
294
- _on_col_resize(col, width) {
295
- if (!this.m_columns[col]) {
296
- return;
297
- }
298
- // -> flex
299
- if (width <= 0) {
300
- this.m_columns[col].width = -1; // flex default
301
- }
302
- else {
303
- this.m_columns[col].width = width;
304
- }
305
- this._updateScroll(true);
306
- }
307
- /**
308
- * compute misc dimensions
309
- * - item height
310
- * - scroll width
311
- */
312
- _computeItemHeight() {
313
- let g1 = x4dom_1.x4document.createElement('div');
314
- g1.classList.add('x-spreadsheet');
315
- let g2 = x4dom_1.x4document.createElement('div');
316
- g2.classList.add('content');
317
- let g3 = x4dom_1.x4document.createElement('div');
318
- g3.classList.add('x-cell');
319
- g3.append('&nbsp;');
320
- g2.appendChild(g3);
321
- g1.appendChild(g2);
322
- this.dom.appendChild(g1);
323
- let rc = g3.getBoundingClientRect();
324
- this.dom.removeChild(g1);
325
- this.m_itemHeight = rc.height;
326
- }
327
- /**
328
- * compute columns widths
329
- * use col.width for fixed size columns
330
- * if col.width < 0 that mean that this is a proportion of the remaining space
331
- */
332
- _calcColWidths(width) {
333
- let fullw = 0;
334
- let nwide = 0;
335
- let calcw = new Int32Array(this.m_columns.length);
336
- let calcz = new Int32Array(this.m_columns.length);
337
- let calcm = new Int32Array(this.m_columns.length);
338
- this.m_columns.forEach((col, colIdx) => {
339
- var _a;
340
- let minw = Math.max(10, (_a = col.min_width) !== null && _a !== void 0 ? _a : 0);
341
- if (col.width > 0) {
342
- let cw = Math.max(col.width, minw);
343
- fullw += cw;
344
- calcw[colIdx] = cw;
345
- }
346
- else {
347
- let z = -col.width;
348
- calcz[colIdx] = z;
349
- nwide += z;
350
- }
351
- calcm[colIdx] = minw;
352
- });
353
- if (nwide) {
354
- let restw = width - fullw;
355
- for (let i = 0; i < this.m_columns.length && nwide; i++) {
356
- if (!calcw[i]) {
357
- let rest = Math.round(restw / nwide) * calcz[i];
358
- if (rest < calcm[i]) {
359
- rest = calcm[i];
360
- }
361
- calcw[i] = rest;
362
- restw -= rest;
363
- nwide -= calcz[i];
364
- }
365
- }
366
- }
367
- return calcw;
368
- }
369
- /**
370
- * create a cell (component)
371
- * and append it to the parent view
372
- * if a cell was reviously recyled, use it
373
- */
374
- _createCell() {
375
- let cell;
376
- if (this.m_recycler.length) {
377
- cell = this.m_recycler.pop();
378
- cell.clearClasses();
379
- cell.addClass('@comp'); // todo: find better to reset to default
380
- }
381
- else {
382
- cell = new component_1.Component({
383
- cls: '@cell'
384
- });
385
- }
386
- if (!cell.dom) {
387
- this.m_container.appendChild(cell);
388
- }
389
- return cell;
390
- }
391
- /**
392
- * build cells of the spreadsheet
393
- * cells are recycled when scrolling,
394
- * only visibles cells exists
395
- */
396
- _buildItems() {
397
- let rc = this.getBoundingRect();
398
- let rh = this.m_header.getBoundingRect();
399
- let height = rc.height - rh.height;
400
- if (this.m_itemHeight == 0) {
401
- this._computeItemHeight();
402
- }
403
- let top = this.m_topIndex * this.m_itemHeight;
404
- let y = 0;
405
- let cidx = 0;
406
- let rowIdx = this.m_topIndex;
407
- let count = this.m_row_limit;
408
- if (this.m_auto_row_count) {
409
- //@review should be evaluated only when row count change
410
- this.m_row_limit = count = this.getMaxRowCount();
411
- }
412
- let right_pos = 0;
413
- if ((count * this.m_itemHeight) > height) {
414
- let w = component_1.Component.getScrollbarSize();
415
- rc.width -= w;
416
- right_pos = w;
417
- }
418
- let even = this.m_topIndex & 1 ? true : false;
419
- this.m_visible_cells = new Map();
420
- // passe 0 - all created cells are moved to the recycler
421
- this.m_used_cells.forEach((c) => {
422
- this.m_recycler.push(c);
423
- });
424
- this.m_used_cells = [];
425
- // pass 1 - compute column widths
426
- let calcw = this._calcColWidths(rc.width);
427
- //
428
- let full_width = 0;
429
- for (let i = 0; i < calcw.length; i++) {
430
- full_width += calcw[i];
431
- }
432
- if (full_width <= rc.width) {
433
- this.m_view.setStyleValue('overflow-x', 'hidden');
434
- this.m_header.setStyleValue('width', rc.width);
435
- this.m_container.setStyleValue('width', rc.width);
436
- this.m_container.setStyle({
437
- height: count * this.m_itemHeight,
438
- });
439
- }
440
- else {
441
- this.m_header.setStyleValue('width', full_width);
442
- this.m_container.setStyleValue('width', full_width);
443
- this.m_view.setStyleValue('overflow-x', 'visible');
444
- this.m_container.setStyle({
445
- height: count * this.m_itemHeight,
446
- width: full_width
447
- });
448
- }
449
- this.m_view.addClass('@hidden');
450
- // pass 2 - build cells
451
- let limit = 100;
452
- while (y < height && rowIdx < count && --limit > 0) {
453
- let rowdata = this.m_rows_data.get(rowIdx);
454
- let x = 0;
455
- let cols = this.m_columns.map((col, colIdx) => {
456
- let cls = '@cell c' + colIdx;
457
- if (col.align) {
458
- cls += ' ' + col.align;
459
- }
460
- if (col.cls) {
461
- cls += ' ' + col.cls;
462
- }
463
- let cell;
464
- let celldata = this._getCellData(rowIdx, colIdx);
465
- let text = celldata.text;
466
- if (col.renderer && text.length) {
467
- text = col.renderer(text, { row: rowIdx, col: colIdx });
468
- }
469
- //if( text.length==0 ) {
470
- // text = '&nbsp;'
471
- //}
472
- cls += (even ? ' even' : ' odd');
473
- if (rowdata) {
474
- cls += ' ' + rowdata;
475
- }
476
- cell = this._createCell();
477
- this.m_used_cells.push(cell);
478
- cell.setContent(text); // always because cell reuse
479
- cell.addClass(cls);
480
- cell.setStyle({
481
- left: x,
482
- top: top + y,
483
- width: calcw[colIdx],
484
- height: this.m_itemHeight
485
- });
486
- if (this.m_selection.row == rowIdx && this.m_selection.col == colIdx) {
487
- cell.addClass('@selected');
488
- }
489
- cell.setData('row-id', rowIdx);
490
- cell.setData('col-id', colIdx);
491
- if (celldata.cls) {
492
- cell.addClass(celldata.cls);
493
- }
494
- this.m_visible_cells.set(_mkid(rowIdx, colIdx), cell);
495
- x += calcw[colIdx];
496
- return cell;
497
- });
498
- even = !even;
499
- y += this.m_itemHeight;
500
- rowIdx++;
501
- cidx++;
502
- //rows.splice( rows.length, 0, ...cols );
503
- }
504
- // if some cells are still in cache, hide them
505
- this.m_recycler.forEach((c) => {
506
- c.addClass('@hidden');
507
- });
508
- this.m_row_count = cidx;
509
- //this.m_container.setContent( <ComponentContent>rows);
510
- this.m_view.removeClass('@hidden');
511
- this.setClass('empty', count == 0);
512
- }
513
- /** @ignore */
514
- _itemClick(e) {
515
- let dom = e.target;
516
- if (this.m_editor && this.m_editor.dom.contains(dom)) {
517
- return;
518
- }
519
- let itm = component_1.Component.getElement(dom, component_1.Component);
520
- if (!itm) {
521
- return;
522
- }
523
- let rowIdx = itm.getData('row-id'), colIdx = itm.getData('col-id');
524
- if (rowIdx === undefined || colIdx === undefined) {
525
- return;
526
- }
527
- this._selectItem(rowIdx, colIdx);
528
- }
529
- _itemDblClick(e) {
530
- let dom = e.target;
531
- if (this.m_editor && this.m_editor.dom.contains(dom)) {
532
- return;
533
- }
534
- let itm = component_1.Component.getElement(dom), rowIdx = itm.getData('row-id'), colIdx = itm.getData('col-id');
535
- if (rowIdx === undefined || colIdx === undefined) {
536
- return;
537
- }
538
- this.emit('dblClick', (0, component_1.EvDblClick)({ row: rowIdx, col: colIdx }));
539
- this.editCell(rowIdx, colIdx);
540
- }
541
- /**
542
- *
543
- * @param rowIdx
544
- * @param colIdx
545
- * @param scrollIntoView
546
- */
547
- _selectItem(rowIdx, colIdx, scrollIntoView) {
548
- if (rowIdx < 0) {
549
- rowIdx = 0;
550
- }
551
- if (rowIdx > this.m_row_limit - 1) {
552
- rowIdx = this.m_row_limit - 1;
553
- }
554
- if (colIdx < 0) {
555
- colIdx = 0;
556
- }
557
- let lastcol = this.m_columns.length - 1;
558
- if (colIdx > lastcol) {
559
- colIdx = lastcol;
560
- }
561
- if (this.m_selection.row == rowIdx && this.m_selection.col == colIdx) {
562
- return;
563
- }
564
- this.select(rowIdx, colIdx, scrollIntoView);
565
- }
566
- _scrollIntoView(row, col) {
567
- let doscroll = (itm, mode = 'nearest') => {
568
- itm.scrollIntoView({
569
- block: mode //<ScrollLogicalPosition>sens ?? 'nearest'
570
- });
571
- };
572
- let last = this.m_topIndex + this.m_row_count - 1;
573
- if (row < this.m_topIndex) {
574
- this.m_topIndex = row;
575
- this.m_view.dom.scrollTop = this.m_topIndex * this.m_itemHeight;
576
- this._buildItems();
577
- doscroll(this._findItem(row, col), 'start');
578
- }
579
- else if (row > last) {
580
- this.m_topIndex = row - this.m_row_count + 1;
581
- this.m_view.dom.scrollTop = this.m_topIndex * this.m_itemHeight;
582
- this._buildItems();
583
- doscroll(this._findItem(row, col), 'end');
584
- }
585
- else {
586
- doscroll(this._findItem(row, col));
587
- }
588
- }
589
- /**
590
- *
591
- * @param row
592
- * @param col
593
- */
594
- _findItem(row, col) {
595
- if (!this.m_visible_cells) {
596
- return null;
597
- }
598
- return this.m_visible_cells.get(_mkid(row, col));
599
- }
600
- /**
601
- *
602
- */
603
- _updateScroll(forceUpdate) {
604
- var _a;
605
- if (!((_a = this === null || this === void 0 ? void 0 : this.m_view) === null || _a === void 0 ? void 0 : _a.dom)) {
606
- return;
607
- }
608
- let newTop = Math.floor(this.m_view.dom.scrollTop / (this.m_itemHeight || 1));
609
- if (newTop != this.m_topIndex || forceUpdate) {
610
- this.m_topIndex = newTop;
611
- this._buildItems();
612
- }
613
- let newLeft = this.m_view.dom.scrollLeft;
614
- this.m_header.setStyleValue('left', -newLeft);
615
- }
616
- /**
617
- *
618
- * @param event
619
- * @param t
620
- */
621
- _moveSel(sensy, sensx) {
622
- var _a, _b;
623
- let sel = this.m_selection;
624
- let newRow = (_a = sel.row) !== null && _a !== void 0 ? _a : 0;
625
- let newCol = (_b = sel.col) !== null && _b !== void 0 ? _b : 0;
626
- if (sensy == 1) {
627
- newRow++;
628
- }
629
- else if (sensy == -1) {
630
- newRow--;
631
- }
632
- else if (sensy == 2) {
633
- newRow += this.m_row_count - 1;
634
- }
635
- else if (sensy == -2) {
636
- newRow -= this.m_row_count - 1;
637
- }
638
- else if (sensy == 3) {
639
- newRow = this.m_row_limit - 1;
640
- }
641
- else if (sensy == -3) {
642
- newRow = 0;
643
- }
644
- if (sensx == 1) {
645
- newCol++;
646
- }
647
- else if (sensx == -1) {
648
- newCol--;
649
- }
650
- else if (sensx == 2) {
651
- newCol = this.m_columns.length - 1;
652
- }
653
- else if (sensx == -2) {
654
- newCol = 0;
655
- }
656
- else if (sensx == 3) { // new editable cell skip line if needed
657
- newCol++;
658
- let lastcol = this.m_columns.length - 1;
659
- l1: for (let trys = 0; trys < 2; trys++) {
660
- while (newCol < lastcol) {
661
- if (this.m_columns[newCol].createEditor !== null) {
662
- break l1;
663
- }
664
- newCol++;
665
- }
666
- if (newCol > lastcol) {
667
- newRow++;
668
- newCol = 0;
669
- }
670
- }
671
- }
672
- else if (sensx == -3) {
673
- newCol--;
674
- let lastcol = this.m_columns.length - 1;
675
- l2: for (let trys = 0; trys < 2; trys++) {
676
- while (newCol >= 0) {
677
- if (this.m_columns[newCol].createEditor !== null) {
678
- break l2;
679
- }
680
- newCol--;
681
- }
682
- if (newCol < 0) {
683
- newRow--;
684
- newCol = lastcol;
685
- }
686
- }
687
- }
688
- this._selectItem(newRow, newCol, true);
689
- }
690
- _handleKey(event) {
691
- let dom = event.target;
692
- if (this.m_editor && this.m_editor.dom.contains(dom)) {
693
- return;
694
- }
695
- switch (event.key) {
696
- case 'ArrowDown':
697
- case 'Down': {
698
- this._moveSel(1, 0);
699
- break;
700
- }
701
- case 'ArrowUp':
702
- case 'Up': {
703
- this._moveSel(-1, 0);
704
- break;
705
- }
706
- case 'PageUp': {
707
- this._moveSel(-2, 0);
708
- break;
709
- }
710
- case 'PageDown': {
711
- this._moveSel(2, 0);
712
- break;
713
- }
714
- case 'ArrowLeft':
715
- case 'Left': {
716
- this._moveSel(0, -1);
717
- break;
718
- }
719
- case 'ArrowRight':
720
- case 'Right': {
721
- this._moveSel(0, 1);
722
- break;
723
- }
724
- case 'Home': {
725
- if (event.ctrlKey) {
726
- this._moveSel(-3, 0);
727
- }
728
- else {
729
- this._moveSel(0, -2);
730
- }
731
- break;
732
- }
733
- case 'End': {
734
- if (event.ctrlKey) {
735
- this._moveSel(3, 0);
736
- }
737
- else {
738
- this._moveSel(0, 2);
739
- }
740
- break;
741
- }
742
- case 'Enter': {
743
- this.editCurCell();
744
- event.stopPropagation();
745
- event.preventDefault();
746
- break;
747
- }
748
- case 'Delete': {
749
- this.clearCell(this.m_selection.row, this.m_selection.col);
750
- break;
751
- }
752
- default: {
753
- //console.log( "unknown key: ", event.key);
754
- break;
755
- }
756
- }
757
- }
758
- _keyPress(event) {
759
- let dom = event.target;
760
- if (this.m_editor && this.m_editor.dom.contains(dom)) {
761
- return;
762
- }
763
- if (event.ctrlKey || event.altKey) {
764
- return;
765
- }
766
- this.editCurCell(event.key);
767
- }
768
- /**
769
- * return the selection
770
- * { row, col }
771
- */
772
- getSelection() {
773
- return this.m_selection;
774
- }
775
- select(row, col, scrollIntoView = true) {
776
- if (this.m_selection.row == row && this.m_selection.col == col) {
777
- return;
778
- }
779
- let oldSel = this._findItem(this.m_selection.row, this.m_selection.col);
780
- if (oldSel) {
781
- oldSel.removeClass('@selected');
782
- }
783
- this.m_selection = { row, col };
784
- if (scrollIntoView) {
785
- this._scrollIntoView(row, col);
786
- }
787
- let newSel = this._findItem(row, col);
788
- if (newSel) {
789
- newSel.addClass('@selected');
790
- }
791
- this.emit('selectionChange', (0, x4events_1.EvSelectionChange)({ row, col }));
792
- }
793
- /**
794
- * return the row count
795
- */
796
- rowCount() {
797
- return this.m_row_limit;
798
- }
799
- /**
800
- * return the maximum row index filled with something
801
- */
802
- getMaxRowCount() {
803
- let max_row = 0;
804
- this.m_cells_data.forEach((c, uid) => {
805
- let row = Math.round(uid / 1000) + 1;
806
- if (max_row < row) {
807
- max_row = row;
808
- }
809
- });
810
- return max_row;
811
- }
812
- getColCount() {
813
- return this.m_columns.length;
814
- }
815
- setRowStyle(row, cls) {
816
- this.m_rows_data.set(row, cls);
817
- if (this.m_lockupdate == 0) {
818
- this._buildItems();
819
- }
820
- }
821
- getRowStyle(row) {
822
- return this.m_rows_data.get(row);
823
- }
824
- setCellStyle(row, col, cls) {
825
- let cell = this._getCellData(row, col, true);
826
- if (!cell) {
827
- cell = { text: '' };
828
- this.m_cells_data.set(_mkid(row, col), cell);
829
- }
830
- cell.cls = cls;
831
- if (this.m_lockupdate == 0 && this.m_visible_cells) {
832
- let itm = this._findItem(row, col);
833
- if (itm) {
834
- itm.setClass(cls, true); //todo: pb when changing classes
835
- }
836
- else {
837
- this._buildItems();
838
- }
839
- }
840
- }
841
- getCellText(row, col) {
842
- return this._getCellData(row, col).text;
843
- }
844
- getCellNumber(row, col) {
845
- let text = this._getCellData(row, col).text;
846
- return (0, tools_1.parseIntlFloat)(text);
847
- }
848
- clearRow(row) {
849
- for (let c = 0; c < this.m_columns.length; c++) {
850
- this.clearCell(row, c);
851
- }
852
- this.update(10);
853
- }
854
- clearCell(row, col) {
855
- this.setCellText(row, col, null);
856
- }
857
- editCurCell(forceText) {
858
- this.editCell(this.m_selection.row, this.m_selection.col, forceText);
859
- }
860
- editCell(row, col, forcedText) {
861
- if (!this.m_autoedit) {
862
- return;
863
- }
864
- // disable edition
865
- if (this.m_columns[col].createEditor === null) {
866
- return;
867
- }
868
- this._scrollIntoView(row, col);
869
- let item = this._findItem(row, col);
870
- let place = item.dom;
871
- let parent = place.parentElement;
872
- let rc = place.getBoundingClientRect();
873
- let prc = parent.getBoundingClientRect();
874
- let cell = this._getCellData(row, col, true);
875
- let edtBuilder = (props, col, row) => {
876
- return new textedit_1.TextEdit(props);
877
- };
878
- if (this.m_columns[col].createEditor) {
879
- edtBuilder = this.m_columns[col].createEditor;
880
- }
881
- let cellvalue = forcedText ? forcedText : (cell ? cell.text : '');
882
- this.m_editor = edtBuilder({
883
- cls: '@editor',
884
- style: {
885
- left: rc.left - prc.left,
886
- top: rc.top - prc.top,
887
- width: rc.width - 1,
888
- height: rc.height - 1
889
- },
890
- tabIndex: false,
891
- value: cellvalue,
892
- data: {
893
- row,
894
- col
895
- },
896
- }, row, col);
897
- if (!this.m_editor) {
898
- return;
899
- }
900
- parent.appendChild(this.m_editor._build());
901
- this._setupEditor();
902
- this.m_editor.setData('old-value', cellvalue);
903
- this.m_editor.focus();
904
- if (this.m_editor instanceof textedit_1.TextEdit) {
905
- this.m_editor.selectAll();
906
- }
907
- }
908
- _setupEditor() {
909
- let movesel = (sensy, sensx) => {
910
- (0, tools_2.deferCall)(() => {
911
- this.killEditor(true);
912
- this._moveSel(sensy, sensx);
913
- this.editCurCell();
914
- });
915
- };
916
- // todo: better
917
- if (this.m_editor instanceof textedit_1.TextEdit) {
918
- let editor = this.m_editor;
919
- let input = editor.input;
920
- input.setDomEvent('blur', () => {
921
- this.killEditor(true);
922
- });
923
- input.setDomEvent('keydown', (e) => {
924
- // prevented by edit...
925
- if (e.defaultPrevented) {
926
- return;
927
- }
928
- switch (e.key) {
929
- case 'Escape': {
930
- this.killEditor(false);
931
- e.stopPropagation();
932
- e.preventDefault();
933
- break;
934
- }
935
- case 'Enter':
936
- case 'Tab': {
937
- let sens = 3;
938
- if (e.shiftKey) {
939
- sens = -3;
940
- }
941
- movesel(0, sens);
942
- e.stopPropagation();
943
- e.preventDefault();
944
- break;
945
- }
946
- case 'ArrowUp':
947
- case 'Up': {
948
- movesel(-1, 0);
949
- e.stopPropagation();
950
- e.preventDefault();
951
- break;
952
- }
953
- case 'ArrowDown':
954
- case 'Down': {
955
- movesel(1, 0);
956
- e.stopPropagation();
957
- e.preventDefault();
958
- break;
959
- }
960
- }
961
- });
962
- }
963
- else if (this.m_editor instanceof combobox_1.ComboBox) {
964
- let input = this.m_editor.input;
965
- input.setDomEvent('blur', () => {
966
- this.killEditor(true);
967
- });
968
- input.setDomEvent('keydown', (e) => {
969
- switch (e.key) {
970
- case 'Escape': {
971
- this.killEditor(false);
972
- e.stopPropagation();
973
- e.preventDefault();
974
- break;
975
- }
976
- case 'Enter':
977
- case 'Tab': {
978
- let sens = 3;
979
- if (e.shiftKey) {
980
- sens = -3;
981
- }
982
- movesel(0, sens);
983
- e.stopPropagation();
984
- e.preventDefault();
985
- break;
986
- }
987
- }
988
- });
989
- this.m_editor.showPopup();
990
- this.m_editor.on('change', (ev) => {
991
- this.killEditor(true);
992
- });
993
- this.m_editor.on('cancel', (ev) => {
994
- this.killEditor(false);
995
- });
996
- }
997
- }
998
- killEditor(save) {
999
- if (this.m_editor) {
1000
- if (save) {
1001
- let text, id;
1002
- if (this.m_editor instanceof textedit_1.TextEdit) {
1003
- text = this.m_editor.value;
1004
- }
1005
- else if (this.m_editor instanceof combobox_1.ComboBox) {
1006
- id = this.m_editor.value;
1007
- text = this.m_editor.valueText;
1008
- }
1009
- let row = this.m_editor.getData('row');
1010
- let col = this.m_editor.getData('col');
1011
- let old = this.m_editor.getData('old-value');
1012
- this.setCellText(row, col, text);
1013
- const ev = (0, x4events_1.EvChange)(text, { row, col, oldValue: old, id });
1014
- this.emit('change', ev);
1015
- if (ev.defaultPrevented) {
1016
- this.setCellText(row, col, old);
1017
- }
1018
- }
1019
- // cannot dipose while handling blur event, so we defer...
1020
- let t = this.m_editor;
1021
- (0, tools_1.asap)(() => {
1022
- t.dispose();
1023
- });
1024
- this.m_editor = null;
1025
- this.focus();
1026
- }
1027
- }
1028
- clearData() {
1029
- this.m_cells_data = new Map();
1030
- this.m_rows_data = new Map();
1031
- }
1032
- setCellText(row, col, value) {
1033
- if (value == null || value.length == 0) {
1034
- this.m_cells_data.delete(_mkid(row, col));
1035
- value = ''; //'&nbsp';
1036
- }
1037
- else {
1038
- let cell = this._getCellData(row, col, true);
1039
- if (!cell) {
1040
- cell = {};
1041
- }
1042
- cell.text = value;
1043
- this.m_cells_data.set(_mkid(row, col), cell);
1044
- }
1045
- if (this.m_lockupdate == 0 && this.m_visible_cells) {
1046
- let itm = this._findItem(row, col);
1047
- if (itm) {
1048
- if (this.m_columns[col].renderer) {
1049
- value = this.m_columns[col].renderer(value, { row, col });
1050
- }
1051
- itm.setContent(value);
1052
- }
1053
- else {
1054
- this._buildItems();
1055
- }
1056
- }
1057
- }
1058
- lockUpdate(start) {
1059
- if (start) {
1060
- this.m_lockupdate++;
1061
- }
1062
- else {
1063
- if (--this.m_lockupdate == 0) {
1064
- this._updateScroll(true);
1065
- }
1066
- }
1067
- }
1068
- }
1069
- exports.Spreadsheet = Spreadsheet;
1070
- /**
1071
- * @ignore
1072
- */
1073
- function _mkid(row, col) {
1074
- return row * 1000 + col;
1075
- }
1076
- /**
1077
- * @ignore
1078
- */
1079
- function _getid(key) {
1080
- return {
1081
- row: Math.floor(key / 1000) | 0,
1082
- col: (key % 1000) | 0
1083
- };
1084
- }