Skip to content

Commit

Permalink
fixed first row size bug, fixed scroll first row bug, fixed key bug i…
Browse files Browse the repository at this point in the history 
…n safari, fixed scroll height bug. added limitation info to readme. updated sample.
  • Loading branch information
Tony Germaneri committed Dec 2, 2016
1 parent 8d3efaa commit 2e526a0
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 26 deletions.
9 changes: 9 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,15 @@ Canvas Data Grid

[Demo](https://tonygermaneri.github.io/canvas-datagrid/sample/index.html)

Browser limitations
-------------------
Some browsers (lookin at you Firefox) cannot have elements larger than a certain height.
This height ends up being ~1.7^7px or around 700k rows if each row is the default of 24px tall.

All browsers appear to break down somewhere around 10^6x7 rows. It is unclear if it is a limitation
of memory due to the dataset that is being created or a hard browser limit.
Avoid loading greater than 10^6x7 rows.

Instantiation
=============

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "canvas-datagrid",
"main": "lib/main.js",
"version": "0.9.6",
"version": "0.9.7",
"ignore": [
"**/.*",
"node_modules",
Expand Down
60 changes: 38 additions & 22 deletions lib/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,8 @@ define([], function context() {
return;
}
var checkScrollHeight, borderWidth, rowHeaderCell, p, cx, cy, cellHeight,
cornerCell, y, x, c, h, w, s, r, rd, l = data.length;
cornerCell, y, x, c, h, w, s, r, rd, l = data.length,
headerCellHeight = sizes.rows[-1] || style.headerCellHeight;
if (attributes.showPerformance) {
p = performance.now();
}
Expand All @@ -387,7 +388,7 @@ define([], function context() {
s = getVisibleSchema();
visibleCells = [];
x = 0;
y = scrollBox.scrollTop * -1 + style.headerCellHeight + scrollPixelTop;
y = scrollBox.scrollTop * -1 + headerCellHeight + scrollPixelTop;
h = canvas.height = height;
w = canvas.width = width;
ctx.textBaseline = 'alphabetic';
Expand Down Expand Up @@ -594,13 +595,13 @@ define([], function context() {
function scroll() {
var cellBorder = style.cellBorderWidth * 2;
scrollIndexTop = 0;
scrollPixelTop = style.cellHeight * -1;
scrollPixelTop = 0;
while (scrollPixelTop < scrollBox.scrollTop) {
scrollPixelTop += (sizes.rows[data[scrollIndexTop][uniqueId]] || style.cellHeight) + cellBorder;
scrollIndexTop += 1;
}
scrollIndexTop = Math.max(scrollIndexTop - 1, 0);
scrollPixelTop = Math.max(scrollPixelTop - style.cellHeight, 0);
scrollPixelTop = Math.max(scrollPixelTop - (sizes.rows[data[scrollIndexTop][uniqueId]] || style.cellHeight), 0);
ellipsisCache = {};
draw();
if (input) {
Expand Down Expand Up @@ -930,15 +931,16 @@ define([], function context() {
};
}
function findRowScrollTop(rowIndex) {
var top = 0, x = 0, l = data.length;
var top = 0, x = 0, l = data.length,
cellBorder = style.cellBorderWidth * 2;
if (!attributes.showNewRow) {
l -= 1;
}
if (rowIndex > l) {
throw new Error('Impossible row index');
}
while (x < rowIndex) {
top += sizes.rows[data[x][uniqueId]] || style.cellHeight;
top += (sizes.rows[data[x][uniqueId]] || style.cellHeight) + cellBorder;
x += 1;
}
//TODO: This is not super accurate, causes pageUp/Dn to not move around right
Expand Down Expand Up @@ -1048,13 +1050,15 @@ define([], function context() {
input.addEventListener('keydown', function (e) {
var nx = cell.columnIndex,
ny = cell.rowIndex;
if (e.key === 'Escape') {
// esc
if (e.keyCode === 27) {
endEdit(true);
draw();
} else if (e.key === 'Enter') {
// enter
} else if (e.keyCode === 13) {
endEdit();
draw();
} else if (e.key === 'Tab') {
} else if (e.keyCode === 9) {
e.preventDefault();
if (!endEdit()) {
return;
Expand Down Expand Up @@ -1239,30 +1243,41 @@ define([], function context() {
last += 1;
}
if (fire('keydown', [e, currentCell], intf)) { return; }
if (e.key === 'Tab') {
if (e.keyCode === 'Tab') {
e.preventDefault();
}
if (e.key === 'ArrowDown') {
//ArrowDown
if (e.keyCode === 40) {
y += 1;
} else if (e.key === 'ArrowUp') {
//ArrowUp
} else if (e.keyCode === 38) {
y -= 1;
} else if (e.key === 'ArrowLeft' || (e.shiftKey && e.key === 'Tab')) {
//ArrowLeft Tab
} else if (e.keyCode === 37 || (e.shiftKey && e.keyCode === 9)) {
x -= 1;
} else if (e.key === 'ArrowRight' || (!e.shiftKey && e.key === 'Tab')) {
//ArrowRight Tab
} else if (e.keyCode === 39 || (!e.shiftKey && e.keyCode === 9)) {
x += 1;
} else if (e.key === 'PageUp') {
//PageUp
} else if (e.keyCode === 33) {
y -= page;
} else if (e.key === 'PageDown') {
//PageDown
} else if (e.keyCode === 34) {
y += page;
} else if (e.key === 'Home' || (ctrl && e.key === 'ArrowUp')) {
//Home ArrowUp
} else if (e.keyCode === 36 || (ctrl && e.keyCode === 38)) {
y = 0;
} else if (e.key === 'Home' || (ctrl && e.key === 'ArrowDown')) {
//End ArrowDown
} else if (e.keyCode === 35 || (ctrl && e.keyCode === 40)) {
y = data.length - 1;
} else if (ctrl && e.key === 'ArrowRight') {
//ArrowRight
} else if (ctrl && e.keyCode === 39) {
x = cols;
} else if (ctrl && e.key === 'ArrowLeft') {
//ArrowLeft
} else if (ctrl && e.keyCode === 37) {
x = 0;
} else if (e.key === 'Enter') {
//Enter
} else if (e.keyCode === 13) {
return beginEditAt(x, y);
}
if (x < 0) {
Expand All @@ -1277,7 +1292,8 @@ define([], function context() {
if (x > cols) {
x = cols;
}
if (e.shiftKey && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].indexOf(e.key) !== -1) {
// Arrows
if (e.shiftKey && [37, 38, 39, 40].indexOf(e.keyCode) !== -1) {
selections[data[y][uniqueId]] = selections[data[y][uniqueId]] || [];
selections[data[y][uniqueId]].push(x);
selectionBounds = getSelectionBounds();
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "canvas-datagrid",
"version": "0.9.6",
"version": "0.9.7",
"description": "Canvas based data grid",
"main": "./lib/main.js",
"scripts": {
Expand Down
9 changes: 7 additions & 2 deletions sample/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
document.addEventListener('DOMContentLoaded', function () {
'use strict';
function createRandomSampleData() {
var rows = Math.pow(10, 6), x, data = [], d, i, c,
var rows = Math.pow(10, 5) * 7, x, data = [], d, i, c,
r = 'Elend, eam, animal omittam an, has in, explicari principes. Elit, causae eleifend mea cu. No sed adipisci accusata, ei mea everti melius periculis. Ei quot audire pericula mea, qui ubique offendit no. Sint mazim mandamus duo ei. Sumo maiestatis id has, at animal reprehendunt definitionem cum, mei ne adhuc theophrastus.';
c = r.split(' ').map(function (i) { return i.trim(); });
r = r.split(',').map(function (i) { return i.trim(); });
Expand Down Expand Up @@ -46,6 +46,11 @@ document.addEventListener('DOMContentLoaded', function () {
});
grid.data = sampleData;
grid.schema = schema;
grid.schema[0].width = 400;
grid.data[0].Elend = 'Welcome to canvas-dataGrid samples!';
grid.data[1].Elend = 'View the source of this page to see';
grid.data[2].Elend = 'how the cells and context menus were altered';
grid.data[2].Elend = 'in this example.';
grid.addEventListener('rendercell', function (ctx, cell) {
if (cell.selected || cell.active) { return; }
if (cell.header.name === 'Elit' && cell.style !== 'headerCell') {
Expand All @@ -62,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
grid.addEventListener('click', function (e, cell, menuItems, menuElement) {
grid.data[0].Alpha = 'Woah! ' + cell.value;
grid.data[4].Elend = 'Woah! ' + cell.value;
grid.draw();
});
grid.addEventListener('selectionchanged', function (data, matrix, bounds) {
Expand Down

0 comments on commit 2e526a0

Please sign in to comment.