canvas-datagrid 0.4.5 → 0.4.7
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.
- package/CHANGELOG.md +24 -0
- package/dist/canvas-datagrid.debug.js +3052 -1520
- package/dist/canvas-datagrid.debug.map +1 -1
- package/dist/canvas-datagrid.js +1 -1
- package/dist/canvas-datagrid.module.js +1 -1
- package/dist/canvas-datagrid.module.js.map +1 -1
- package/dist/types.d.ts +301 -75
- package/lib/component.js +1 -2
- package/lib/contextMenu.js +10 -102
- package/lib/defaults.js +3 -0
- package/lib/docs.js +13 -5
- package/lib/dom.js +2 -1
- package/lib/draw.js +75 -58
- package/lib/events/index.js +155 -231
- package/lib/intf.js +24 -219
- package/lib/main.js +2 -0
- package/lib/publicMethods.js +9 -378
- package/lib/selections/index.js +986 -0
- package/lib/selections/type.d.ts +38 -0
- package/lib/selections/util.js +1319 -0
- package/package.json +5 -5
package/lib/intf.js
CHANGED
|
@@ -89,9 +89,6 @@ export default function (self, ctor) {
|
|
|
89
89
|
columns: {},
|
|
90
90
|
trees: {},
|
|
91
91
|
};
|
|
92
|
-
self.selections = [];
|
|
93
|
-
self.selectedRows = [];
|
|
94
|
-
self.selectedColumns = [];
|
|
95
92
|
self.fillOverlay = {};
|
|
96
93
|
self.filterable = {
|
|
97
94
|
rows: [],
|
|
@@ -216,185 +213,7 @@ export default function (self, ctor) {
|
|
|
216
213
|
'wheel',
|
|
217
214
|
];
|
|
218
215
|
self.mouse = { x: 0, y: 0 };
|
|
219
|
-
self.getSelectedData = function (expandToRow) {
|
|
220
|
-
const selectedData = [];
|
|
221
|
-
const schema = self.getSchema();
|
|
222
|
-
const viewDataLength = self.viewData.length;
|
|
223
216
|
|
|
224
|
-
if (viewDataLength === 0) {
|
|
225
|
-
return [];
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
// self.selections is a sparse array, so `viewRowIndex` here
|
|
229
|
-
// will equal the row index as where it's rendered,
|
|
230
|
-
// not as where it is in the original data array.
|
|
231
|
-
self.selections.forEach(function (row, viewRowIndex) {
|
|
232
|
-
if (!row) {
|
|
233
|
-
return;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
if (viewRowIndex === viewDataLength) {
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
if (row.length === 0) {
|
|
241
|
-
selectedData[viewRowIndex] = null;
|
|
242
|
-
return;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
selectedData[viewRowIndex] = {};
|
|
246
|
-
|
|
247
|
-
row.forEach(function (col) {
|
|
248
|
-
if (col === -1 || !schema[col]) {
|
|
249
|
-
return;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
const orderedIndex = self.orders.columns[col];
|
|
253
|
-
|
|
254
|
-
if (!expandToRow && schema[orderedIndex].hidden) {
|
|
255
|
-
return;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
if (self.viewData[viewRowIndex]) {
|
|
259
|
-
selectedData[viewRowIndex][schema[orderedIndex].name] =
|
|
260
|
-
self.viewData[viewRowIndex][schema[orderedIndex].name];
|
|
261
|
-
}
|
|
262
|
-
});
|
|
263
|
-
});
|
|
264
|
-
|
|
265
|
-
return selectedData;
|
|
266
|
-
};
|
|
267
|
-
self.getSelectedCells = function (expandToRow) {
|
|
268
|
-
const selectedCells = [];
|
|
269
|
-
const schema = self.getSchema();
|
|
270
|
-
const viewDataLength = self.viewData.length;
|
|
271
|
-
|
|
272
|
-
if (viewDataLength === 0) {
|
|
273
|
-
return [];
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
for (const [viewRowIndex, row] of self.selections.entries()) {
|
|
277
|
-
if (!row || row.length === 0) continue;
|
|
278
|
-
|
|
279
|
-
for (const [, viewColumnIndex] of row.entries()) {
|
|
280
|
-
if (viewColumnIndex === -1 || !schema[viewColumnIndex]) {
|
|
281
|
-
continue;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
|
|
285
|
-
viewColumnIndex,
|
|
286
|
-
);
|
|
287
|
-
|
|
288
|
-
if (!expandToRow && schema[boundColumnIndex].hidden) {
|
|
289
|
-
continue;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
if (self.viewData[viewRowIndex]) {
|
|
293
|
-
const header = schema[boundColumnIndex];
|
|
294
|
-
const value = self.viewData[viewRowIndex][header.name];
|
|
295
|
-
const boundRowIndex = self.getBoundRowIndexFromViewRowIndex(
|
|
296
|
-
viewRowIndex,
|
|
297
|
-
);
|
|
298
|
-
|
|
299
|
-
const cell = {
|
|
300
|
-
value,
|
|
301
|
-
header,
|
|
302
|
-
boundRowIndex,
|
|
303
|
-
boundColumnIndex,
|
|
304
|
-
viewRowIndex,
|
|
305
|
-
viewColumnIndex,
|
|
306
|
-
};
|
|
307
|
-
|
|
308
|
-
selectedCells.push(cell);
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
return selectedCells;
|
|
314
|
-
};
|
|
315
|
-
self.copySelectedCellsToClipboard = function (clipboardData) {
|
|
316
|
-
const selectedData = [];
|
|
317
|
-
const schema = self.getSchema();
|
|
318
|
-
let firstRowAsString;
|
|
319
|
-
let isNeat = true; // Selected like [[0, 1], [0, 1]] of [[0, 3]] is neat; Selected like [[0, 1], [1, 2]] is untidy
|
|
320
|
-
|
|
321
|
-
for (const [rowIndex, row] of self.selections.entries()) {
|
|
322
|
-
// If no cells are selected for a particular rowIndex the selections array will contain an empty element for that rowIndex.
|
|
323
|
-
if (!row) continue;
|
|
324
|
-
|
|
325
|
-
// Convert to string for easy comparison to the first row.
|
|
326
|
-
const rowAsString = row.join(',').toString();
|
|
327
|
-
const rowDict = {};
|
|
328
|
-
|
|
329
|
-
if (!firstRowAsString) firstRowAsString = row.join(',').toString();
|
|
330
|
-
if (isNeat && rowAsString !== firstRowAsString) isNeat = false;
|
|
331
|
-
|
|
332
|
-
const boundRowIndex = self.getBoundRowIndexFromViewRowIndex(rowIndex);
|
|
333
|
-
|
|
334
|
-
for (let columnIndex of row) {
|
|
335
|
-
// If the whole row is selected the columnIndex for the rowHeader is -1.
|
|
336
|
-
if (columnIndex < 0) continue;
|
|
337
|
-
|
|
338
|
-
const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
|
|
339
|
-
columnIndex,
|
|
340
|
-
);
|
|
341
|
-
const columnName = schema[boundColumnIndex].name;
|
|
342
|
-
|
|
343
|
-
const value = self.originalData[boundRowIndex][columnName];
|
|
344
|
-
|
|
345
|
-
rowDict[columnName] = value;
|
|
346
|
-
}
|
|
347
|
-
selectedData.push(rowDict);
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
if (selectedData.length > 0) {
|
|
351
|
-
const textString = createTextString(selectedData, isNeat);
|
|
352
|
-
const htmlString = createHTMLString(selectedData, isNeat);
|
|
353
|
-
|
|
354
|
-
const copiedData = {
|
|
355
|
-
'text/plain': textString,
|
|
356
|
-
'text/html': htmlString,
|
|
357
|
-
'text/csv': textString,
|
|
358
|
-
'application/json': JSON.stringify(selectedData),
|
|
359
|
-
};
|
|
360
|
-
|
|
361
|
-
for (const [mimeType, data] of Object.entries(copiedData)) {
|
|
362
|
-
clipboardData.setData(mimeType, data);
|
|
363
|
-
}
|
|
364
|
-
}
|
|
365
|
-
};
|
|
366
|
-
self.clearSelectedCells = function () {
|
|
367
|
-
const schema = self.getSchema();
|
|
368
|
-
const affectedCells = [];
|
|
369
|
-
|
|
370
|
-
for (const [rowIndex, row] of self.selections.entries()) {
|
|
371
|
-
// If no cells are selected for a particular rowIndex the selections array will contain an empty element for that rowIndex.
|
|
372
|
-
if (!row) continue;
|
|
373
|
-
|
|
374
|
-
const boundRowIndex = self.getBoundRowIndexFromViewRowIndex(rowIndex);
|
|
375
|
-
|
|
376
|
-
for (let columnIndex of row) {
|
|
377
|
-
// If the whole row is selected the columnIndex for the rowHeader is -1.
|
|
378
|
-
if (columnIndex < 0) continue;
|
|
379
|
-
|
|
380
|
-
const boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(
|
|
381
|
-
columnIndex,
|
|
382
|
-
);
|
|
383
|
-
const columnName = schema[boundColumnIndex].name;
|
|
384
|
-
|
|
385
|
-
self.viewData[boundRowIndex][columnName] = '';
|
|
386
|
-
|
|
387
|
-
affectedCells.push([
|
|
388
|
-
rowIndex,
|
|
389
|
-
columnIndex,
|
|
390
|
-
boundRowIndex,
|
|
391
|
-
boundColumnIndex,
|
|
392
|
-
]);
|
|
393
|
-
}
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
return affectedCells;
|
|
397
|
-
};
|
|
398
217
|
self.getBoundRowIndexFromViewRowIndex = function (viewRowIndex) {
|
|
399
218
|
if (self.boundRowIndexMap && self.boundRowIndexMap.has(viewRowIndex)) {
|
|
400
219
|
return self.boundRowIndexMap.get(viewRowIndex);
|
|
@@ -582,27 +401,6 @@ export default function (self, ctor) {
|
|
|
582
401
|
self.createRowOrders = function () {
|
|
583
402
|
self.orders.rows = fillArray(0, self.originalData.length - 1);
|
|
584
403
|
};
|
|
585
|
-
self.fitSelectedColumns = function (width) {
|
|
586
|
-
const selectedColumns = self.selections[0];
|
|
587
|
-
const schema = self.getSchema();
|
|
588
|
-
|
|
589
|
-
for (const selectedColumn of selectedColumns) {
|
|
590
|
-
// Make sure the column is not the row header and that the whole column has in fact been selected.
|
|
591
|
-
if (selectedColumn >= 0 && self.isColumnSelected(selectedColumn)) {
|
|
592
|
-
if (isNaN(width)) {
|
|
593
|
-
const column = schema[self.orders.columns[selectedColumn]];
|
|
594
|
-
self.fitColumnToValues(column.name);
|
|
595
|
-
} else {
|
|
596
|
-
self.sizes.columns[selectedColumn] = width;
|
|
597
|
-
self.dispatchEvent('resizecolumn', {
|
|
598
|
-
x: width,
|
|
599
|
-
y: self.resizingStartingHeight,
|
|
600
|
-
draggingItem: self.currentCell,
|
|
601
|
-
});
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
|
-
};
|
|
606
404
|
self.getVisibleSchema = function () {
|
|
607
405
|
return self.getSchema().filter(function (col) {
|
|
608
406
|
return !col.hidden;
|
|
@@ -913,7 +711,11 @@ export default function (self, ctor) {
|
|
|
913
711
|
self.eventParent.removeEventListener('click', self.click, false);
|
|
914
712
|
self.eventParent.removeEventListener('mousemove', self.mousemove);
|
|
915
713
|
self.eventParent.removeEventListener('wheel', self.scrollWheel, false);
|
|
916
|
-
self.canvas.removeEventListener(
|
|
714
|
+
self.canvas.removeEventListener(
|
|
715
|
+
'contextmenu',
|
|
716
|
+
self.contextmenuEvent,
|
|
717
|
+
false,
|
|
718
|
+
);
|
|
917
719
|
self.canvas.removeEventListener('copy', self.copy);
|
|
918
720
|
self.controlInput.removeEventListener('copy', self.copy);
|
|
919
721
|
self.controlInput.removeEventListener('cut', self.cut);
|
|
@@ -1088,13 +890,7 @@ export default function (self, ctor) {
|
|
|
1088
890
|
colTrees.push(self.cellTree.origin.columns[k][l]);
|
|
1089
891
|
} else collapsedColCount++;
|
|
1090
892
|
}
|
|
1091
|
-
tempRow.push(
|
|
1092
|
-
...Array(collapsedColCount)
|
|
1093
|
-
.fill()
|
|
1094
|
-
.map(function () {
|
|
1095
|
-
return '';
|
|
1096
|
-
}),
|
|
1097
|
-
);
|
|
893
|
+
tempRow.push(...Array(collapsedColCount).fill(''));
|
|
1098
894
|
if (colTrees.length) {
|
|
1099
895
|
colTrees.push(
|
|
1100
896
|
...Array(collapsedColCount)
|
|
@@ -1114,13 +910,7 @@ export default function (self, ctor) {
|
|
|
1114
910
|
tempRow.push(self.viewData[k][l]);
|
|
1115
911
|
}
|
|
1116
912
|
otherData[k] = tempRow;
|
|
1117
|
-
collapsed.push(
|
|
1118
|
-
Array(self.viewData[0].length)
|
|
1119
|
-
.fill()
|
|
1120
|
-
.map(function () {
|
|
1121
|
-
return '';
|
|
1122
|
-
}),
|
|
1123
|
-
);
|
|
913
|
+
collapsed.push(Array(self.viewData[0].length).fill(''));
|
|
1124
914
|
collapsedCount++;
|
|
1125
915
|
}
|
|
1126
916
|
}
|
|
@@ -1292,7 +1082,7 @@ export default function (self, ctor) {
|
|
|
1292
1082
|
return fontStyle.replace(/\d+\.?\d*px/, '');
|
|
1293
1083
|
};
|
|
1294
1084
|
self.getFontHeight = function (fontStyle) {
|
|
1295
|
-
return parseFloat(fontStyle
|
|
1085
|
+
return parseFloat(fontStyle);
|
|
1296
1086
|
};
|
|
1297
1087
|
self.parseStyleValue = function (key) {
|
|
1298
1088
|
if (/Font/.test(key)) {
|
|
@@ -1484,7 +1274,6 @@ export default function (self, ctor) {
|
|
|
1484
1274
|
self.intf.clipElement = self.clipElement;
|
|
1485
1275
|
self.intf.getSchemaFromData = self.getSchemaFromData;
|
|
1486
1276
|
self.intf.setFilter = self.setFilter;
|
|
1487
|
-
self.intf.selectRow = self.selectRow;
|
|
1488
1277
|
self.intf.parentGrid = self.parentGrid;
|
|
1489
1278
|
self.intf.toggleTree = self.toggleTree;
|
|
1490
1279
|
self.intf.expandTree = self.expandTree;
|
|
@@ -1894,7 +1683,23 @@ export default function (self, ctor) {
|
|
|
1894
1683
|
return self.visibleRows;
|
|
1895
1684
|
},
|
|
1896
1685
|
});
|
|
1686
|
+
let warnedForObsoleteSelections;
|
|
1897
1687
|
Object.defineProperty(self.intf, 'selections', {
|
|
1688
|
+
get: function () {
|
|
1689
|
+
if (!warnedForObsoleteSelections) {
|
|
1690
|
+
console.warn(
|
|
1691
|
+
`DeprecationWarning: The property 'selections' is deprecated due to performance issue. ` +
|
|
1692
|
+
`And it will be removed in the future.` +
|
|
1693
|
+
`Please use new property 'selectionList' instead. ` +
|
|
1694
|
+
`Visit this link to get more information: ` +
|
|
1695
|
+
`https://github.com/TonyGermaneri/canvas-datagrid/pull/498`,
|
|
1696
|
+
);
|
|
1697
|
+
warnedForObsoleteSelections = true;
|
|
1698
|
+
}
|
|
1699
|
+
return self.getObsoleteSelectionMatrix();
|
|
1700
|
+
},
|
|
1701
|
+
});
|
|
1702
|
+
Object.defineProperty(self.intf, 'selectionList', {
|
|
1898
1703
|
get: function () {
|
|
1899
1704
|
return self.selections;
|
|
1900
1705
|
},
|
package/lib/main.js
CHANGED
|
@@ -8,6 +8,7 @@ import draw from './draw';
|
|
|
8
8
|
import events from './events';
|
|
9
9
|
import touch from './touch';
|
|
10
10
|
import intf from './intf';
|
|
11
|
+
import selections from './selections/index';
|
|
11
12
|
import contextMenu from './contextMenu';
|
|
12
13
|
import button from './button';
|
|
13
14
|
import dom from './dom';
|
|
@@ -21,6 +22,7 @@ var modules = [
|
|
|
21
22
|
events,
|
|
22
23
|
touch,
|
|
23
24
|
intf,
|
|
25
|
+
selections,
|
|
24
26
|
contextMenu,
|
|
25
27
|
button,
|
|
26
28
|
dom,
|