diff --git a/README.md b/README.md index 1033dd08..82f23d38 100644 --- a/README.md +++ b/README.md @@ -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 ============= diff --git a/bower.json b/bower.json index e7a9e8bc..33277ba2 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "canvas-datagrid", "main": "lib/main.js", - "version": "0.9.6", + "version": "0.9.7", "ignore": [ "**/.*", "node_modules", diff --git a/lib/main.js b/lib/main.js index b888e2e1..6e4abd28 100644 --- a/lib/main.js +++ b/lib/main.js @@ -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(); } @@ -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'; @@ -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) { @@ -930,7 +931,8 @@ 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; } @@ -938,7 +940,7 @@ define([], function context() { 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 @@ -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; @@ -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) { @@ -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(); diff --git a/package.json b/package.json index 4a6f7190..e0fad64a 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/sample/main.js b/sample/main.js index 34272d38..8c0342cf 100644 --- a/sample/main.js +++ b/sample/main.js @@ -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(); }); @@ -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') { @@ -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) {