dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-24 02:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

perspectives: scroll optimalization

Browse Source
This commit is contained in:
Jan Prochazka
2022-08-03 20:23:36 +02:00
parent b737eaac13
commit b793e4131d
1 changed files with 49 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/web/src/perspectives/PerspectiveTable.svelte
View File

@@ -28,6 +28,7 @@
import DataGridCell from '../datagrid/DataGridCell.svelte'; import DataGridCell from '../datagrid/DataGridCell.svelte';
import PerspectiveLoadingIndicator from './PerspectiveLoadingIndicator.svelte'; import PerspectiveLoadingIndicator from './PerspectiveLoadingIndicator.svelte';
import PerspectiveHeaderControl from './PerspectiveHeaderControl.svelte'; import PerspectiveHeaderControl from './PerspectiveHeaderControl.svelte';
import createRef from '../utility/createRef';
const dbg = debug('dbgate:PerspectivaTable'); const dbg = debug('dbgate:PerspectivaTable');
export const activator = createActivator('PerspectiveTable', true); export const activator = createActivator('PerspectiveTable', true);
@@ -42,6 +43,7 @@
let domTable; let domTable;
let errorMessage; let errorMessage;
let isLoading = false; let isLoading = false;
const lastVisibleRowIndexRef = createRef(0);
async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[], counts) { async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[], counts) {
dbg('load level data', counts); dbg('load level data', counts);
@@ -165,21 +167,52 @@
var rows = domTable.querySelectorAll('tbody>tr'); var rows = domTable.querySelectorAll('tbody>tr');
const wrapBox = domWrapper.getBoundingClientRect(); const wrapBox = domWrapper.getBoundingClientRect();
let rowIndex = 0; function indexIsLastVisible(index) {
// let lastTr = null; if (index < 0 || index >= rows.length) {
for (const row of rows) { return false;
const box = row.getBoundingClientRect();
// console.log('BOX', box);
if (box.y > wrapBox.bottom) {
break;
} }
// if (box.y > domWrapper.scrollTop + wrapBox.height) {
// break; const box = rows[index].getBoundingClientRect();
// }
// lastTr = row; if (index == rows.length - 1) {
rowIndex += 1; return wrapBox.bottom >= box.top;
}
return box.top <= wrapBox.bottom && box.bottom >= wrapBox.bottom;
} }
return rowIndex;
const lastValue = lastVisibleRowIndexRef.get();
let d = 0;
while (lastValue - d >= 0 || lastValue + d < rows.length) {
if (indexIsLastVisible(lastValue - d)) {
lastVisibleRowIndexRef.set(lastValue - d);
return lastValue - d;
}
if (indexIsLastVisible(lastValue + d)) {
lastVisibleRowIndexRef.set(lastValue + d);
return lastValue + d;
}
d += 1;
}
return 0;
// let rowIndex = 0;
// // let lastTr = null;
// for (const row of rows) {
// const box = row.getBoundingClientRect();
// // console.log('BOX', box);
// if (box.y > wrapBox.bottom) {
// break;
// }
// // if (box.y > domWrapper.scrollTop + wrapBox.height) {
// // break;
// // }
// // lastTr = row;
// rowIndex += 1;
// }
// return rowIndex;
} }
async function checkLoadAdditionalData() { async function checkLoadAdditionalData() {
@@ -189,8 +222,10 @@
const rowIndex = getLastVisibleRowIndex(); const rowIndex = getLastVisibleRowIndex();
console.log('LAST VISIBLE', rowIndex);
const growIndicators = _.keys(display.loadIndicatorsCounts).filter( const growIndicators = _.keys(display.loadIndicatorsCounts).filter(
indicator => rowIndex >= display.loadIndicatorsCounts[indicator] indicator => rowIndex + 1 >= display.loadIndicatorsCounts[indicator]
); );
// console.log('growIndicators', growIndicators); // console.log('growIndicators', growIndicators);