mirror of
https://github.com/dbgate/dbgate
synced 2024-11-07 20:26:23 +00:00
optimalizations, refactor
This commit is contained in:
Jan Prochazka
parent
ce1e58dbdc
commit
1560b7c2e0
@ -23,6 +23,7 @@ import {
|
||||
import keycodes from '../utility/keycodes';
|
||||
import InplaceEditor from './InplaceEditor';
|
||||
import DataGridRow from './DataGridRow';
|
||||
import { countColumnSizes, countVisibleRealColumns } from './gridutil';
|
||||
|
||||
const GridContainer = styled.div`
|
||||
position: absolute;
|
||||
@ -162,7 +163,12 @@ export default function DataGridCore(props) {
|
||||
const [containerRef, { height: containerHeight, width: containerWidth }] = useDimensions();
|
||||
const [tableRef, { height: tableHeight, width: tableWidth }, tableElement] = useDimensions();
|
||||
|
||||
const columnSizes = React.useMemo(() => countColumnSizes(), [loadedRows, containerWidth, display]);
|
||||
const columnSizes = React.useMemo(() => countColumnSizes(loadedRows, columns, containerWidth, display), [
|
||||
loadedRows,
|
||||
columns,
|
||||
containerWidth,
|
||||
display,
|
||||
]);
|
||||
const headerColWidth = 40;
|
||||
|
||||
// console.log('containerWidth', containerWidth);
|
||||
@ -205,6 +211,29 @@ export default function DataGridCore(props) {
|
||||
}
|
||||
}, [tabVisible, tableElement]);
|
||||
|
||||
const handleCloseInplaceEditor = React.useCallback(() => {
|
||||
setInplaceEditorCell(null);
|
||||
setInplaceEditorInitText(null);
|
||||
}, []);
|
||||
|
||||
const visibleRealColumns = React.useMemo(
|
||||
() => countVisibleRealColumns(columnSizes, firstVisibleColumnScrollIndex, gridScrollAreaWidth, columns),
|
||||
[columnSizes, firstVisibleColumnScrollIndex, gridScrollAreaWidth, columns]
|
||||
);
|
||||
|
||||
const cellIsSelected = React.useCallback((row, col) => {
|
||||
const [currentRow, currentCol] = currentCell;
|
||||
if (row == currentRow && col == currentCol) return true;
|
||||
for (const [selectedRow, selectedCol] of selectedCells) {
|
||||
if (row == selectedRow && col == selectedCol) return true;
|
||||
if (selectedRow == 'header' && col == selectedCol) return true;
|
||||
if (row == selectedRow && selectedCol == 'header') return true;
|
||||
if (selectedRow == 'header' && selectedCol == 'header') return true;
|
||||
}
|
||||
return false;
|
||||
}, [currentCell, selectedCells]);
|
||||
|
||||
|
||||
if (!loadedRows || !columns) return null;
|
||||
const rowCountNewIncluded = loadedRows.length;
|
||||
|
||||
@ -216,72 +245,6 @@ export default function DataGridCore(props) {
|
||||
setFirstVisibleColumnScrollIndex(value);
|
||||
};
|
||||
|
||||
function countColumnSizes() {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
//return this.context.measureText(txt).width;
|
||||
const columnSizes = new SeriesSizes();
|
||||
if (!loadedRows || !columns) return columnSizes;
|
||||
|
||||
// console.log('countColumnSizes', loadedRows.length, containerWidth);
|
||||
|
||||
columnSizes.maxSize = (containerWidth * 2) / 3;
|
||||
columnSizes.count = columns.length;
|
||||
|
||||
// columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes());
|
||||
// console.log('display.hiddenColumnIndexes', display.hiddenColumnIndexes)
|
||||
|
||||
columnSizes.setExtraordinaryIndexes(display.hiddenColumnIndexes, []);
|
||||
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
//this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
|
||||
const column = columns[colIndex];
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
|
||||
// else context.font = "14px Helvetica";
|
||||
context.font = 'bold 14px Helvetica';
|
||||
|
||||
let text = column.headerText;
|
||||
let headerWidth = context.measureText(text).width + 32;
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
|
||||
// if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
|
||||
// if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
|
||||
|
||||
columnSizes.putSizeOverride(colIndex, headerWidth);
|
||||
}
|
||||
|
||||
// let headerWidth = this.rowHeaderWidthDefault;
|
||||
// if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8;
|
||||
// this.rowHeaderWidth = this.rowHeaderWidthDefault;
|
||||
// if (headerWidth > this.rowHeaderWidth) this.rowHeaderWidth = headerWidth;
|
||||
|
||||
context.font = '14px Helvetica';
|
||||
for (let row of loadedRows.slice(0, 20)) {
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
let uqName = columns[colIndex].uniqueName;
|
||||
let text = row[uqName];
|
||||
let width = context.measureText(text).width + 8;
|
||||
// console.log('colName', colName, text, width);
|
||||
columnSizes.putSizeOverride(colIndex, width);
|
||||
// let colName = this.columns[colIndex].uniquePath;
|
||||
// let text: string = row[colName].gridText;
|
||||
// let width = context.measureText(text).width + 8;
|
||||
// if (row[colName].dataPrefix) width += context.measureText(row[colName].dataPrefix).width + 3;
|
||||
// this.columnSizes.putSizeOverride(colIndex, width);
|
||||
}
|
||||
}
|
||||
|
||||
// for (let modelIndex = 0; modelIndex < this.columns.length; modelIndex++) {
|
||||
// let width = getHashValue(this.widthHashPrefix + this.columns[modelIndex].uniquePath);
|
||||
// if (width) this.columnSizes.putSizeOverride(modelIndex, _.toNumber(width), true);
|
||||
// }
|
||||
|
||||
columnSizes.buildIndex();
|
||||
return columnSizes;
|
||||
}
|
||||
|
||||
function handleGridMouseDown(event) {
|
||||
event.target.closest('table').focus();
|
||||
const cell = cellFromEvent(event);
|
||||
@ -483,64 +446,10 @@ export default function DataGridCore(props) {
|
||||
}
|
||||
}
|
||||
|
||||
function cellIsSelected(row, col) {
|
||||
const [currentRow, currentCol] = currentCell;
|
||||
if (row == currentRow && col == currentCol) return true;
|
||||
for (const [selectedRow, selectedCol] of selectedCells) {
|
||||
if (row == selectedRow && col == selectedCol) return true;
|
||||
if (selectedRow == 'header' && col == selectedCol) return true;
|
||||
if (row == selectedRow && selectedCol == 'header') return true;
|
||||
if (selectedRow == 'header' && selectedCol == 'header') return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleCloseInplaceEditor() {
|
||||
setInplaceEditorCell(null);
|
||||
setInplaceEditorInitText(null);
|
||||
}
|
||||
|
||||
// console.log('visibleRowCountUpperBound', visibleRowCountUpperBound);
|
||||
// console.log('gridScrollAreaHeight', gridScrollAreaHeight);
|
||||
// console.log('containerHeight', containerHeight);
|
||||
|
||||
const visibleColumnCount = columnSizes.getVisibleScrollCount(firstVisibleColumnScrollIndex, gridScrollAreaWidth);
|
||||
console.log('visibleColumnCount', visibleColumnCount);
|
||||
console.log('gridScrollAreaWidth', gridScrollAreaWidth);
|
||||
|
||||
const visibleRealColumnIndexes = [];
|
||||
const modelIndexes = {};
|
||||
/** @type {(import('@dbgate/datalib').DisplayColumn & {widthPx: string; colIndex: number})[]} */
|
||||
const visibleRealColumns = [];
|
||||
|
||||
// frozen columns
|
||||
for (let colIndex = 0; colIndex < columnSizes.frozenCount; colIndex++) {
|
||||
visibleRealColumnIndexes.push(colIndex);
|
||||
}
|
||||
// scroll columns
|
||||
for (
|
||||
let colIndex = firstVisibleColumnScrollIndex;
|
||||
colIndex < firstVisibleColumnScrollIndex + visibleColumnCount;
|
||||
colIndex++
|
||||
) {
|
||||
visibleRealColumnIndexes.push(colIndex + columnSizes.frozenCount);
|
||||
}
|
||||
|
||||
// real columns
|
||||
for (let colIndex of visibleRealColumnIndexes) {
|
||||
let modelColumnIndex = columnSizes.realToModel(colIndex);
|
||||
modelIndexes[colIndex] = modelColumnIndex;
|
||||
|
||||
let col = columns[modelColumnIndex];
|
||||
if (!col) continue;
|
||||
const widthNumber = columnSizes.getSizeByRealIndex(colIndex);
|
||||
visibleRealColumns.push({
|
||||
...col,
|
||||
colIndex,
|
||||
widthPx: `${widthNumber}px`,
|
||||
});
|
||||
}
|
||||
|
||||
const hederColwidthPx = `${headerColWidth}px`;
|
||||
const filterCount = display.filterCount;
|
||||
|
||||
|
||||
@ -88,6 +88,7 @@ export default function DataGridRow({
|
||||
changeSet,
|
||||
setChangeSet,
|
||||
}) {
|
||||
// console.log('RENDER ROW', rowIndex);
|
||||
const rowDefinition = display.getChangeSetRow(row);
|
||||
const [_fld, matchedChangeSetItem] = findExistingChangeSetItem(changeSet, rowDefinition);
|
||||
const rowUpdated = matchedChangeSetItem ? { ...row, ...matchedChangeSetItem.fields } : row;
|
||||
|
||||
107
packages/web/src/datagrid/gridutil.js
Normal file
107
packages/web/src/datagrid/gridutil.js
Normal file
@ -0,0 +1,107 @@
|
||||
import { SeriesSizes } from './SeriesSizes';
|
||||
|
||||
export function countColumnSizes(loadedRows, columns, containerWidth, display) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
//return this.context.measureText(txt).width;
|
||||
const columnSizes = new SeriesSizes();
|
||||
if (!loadedRows || !columns) return columnSizes;
|
||||
|
||||
// console.log('countColumnSizes', loadedRows.length, containerWidth);
|
||||
|
||||
columnSizes.maxSize = (containerWidth * 2) / 3;
|
||||
columnSizes.count = columns.length;
|
||||
|
||||
// columnSizes.setExtraordinaryIndexes(this.getHiddenColumnIndexes(), this.getFrozenColumnIndexes());
|
||||
// console.log('display.hiddenColumnIndexes', display.hiddenColumnIndexes)
|
||||
|
||||
columnSizes.setExtraordinaryIndexes(display.hiddenColumnIndexes, []);
|
||||
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
//this.columnSizes.PutSizeOverride(col, this.columns[col].Name.length * 8);
|
||||
const column = columns[colIndex];
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.notNull) context.font = "bold 14px Helvetica";
|
||||
// else context.font = "14px Helvetica";
|
||||
context.font = 'bold 14px Helvetica';
|
||||
|
||||
let text = column.headerText;
|
||||
let headerWidth = context.measureText(text).width + 32;
|
||||
|
||||
// if (column.columnClientObject != null && column.columnClientObject.icon != null) headerWidth += 16;
|
||||
// if (this.getFilterOnColumn(column.uniquePath)) headerWidth += 16;
|
||||
// if (this.getSortOrder(column.uniquePath)) headerWidth += 16;
|
||||
|
||||
columnSizes.putSizeOverride(colIndex, headerWidth);
|
||||
}
|
||||
|
||||
// let headerWidth = this.rowHeaderWidthDefault;
|
||||
// if (this.rowCount) headerWidth = context.measureText(this.rowCount.toString()).width + 8;
|
||||
// this.rowHeaderWidth = this.rowHeaderWidthDefault;
|
||||
// if (headerWidth > this.rowHeaderWidth) this.rowHeaderWidth = headerWidth;
|
||||
|
||||
context.font = '14px Helvetica';
|
||||
for (let row of loadedRows.slice(0, 20)) {
|
||||
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
|
||||
let uqName = columns[colIndex].uniqueName;
|
||||
let text = row[uqName];
|
||||
let width = context.measureText(text).width + 8;
|
||||
// console.log('colName', colName, text, width);
|
||||
columnSizes.putSizeOverride(colIndex, width);
|
||||
// let colName = this.columns[colIndex].uniquePath;
|
||||
// let text: string = row[colName].gridText;
|
||||
// let width = context.measureText(text).width + 8;
|
||||
// if (row[colName].dataPrefix) width += context.measureText(row[colName].dataPrefix).width + 3;
|
||||
// this.columnSizes.putSizeOverride(colIndex, width);
|
||||
}
|
||||
}
|
||||
|
||||
// for (let modelIndex = 0; modelIndex < this.columns.length; modelIndex++) {
|
||||
// let width = getHashValue(this.widthHashPrefix + this.columns[modelIndex].uniquePath);
|
||||
// if (width) this.columnSizes.putSizeOverride(modelIndex, _.toNumber(width), true);
|
||||
// }
|
||||
|
||||
columnSizes.buildIndex();
|
||||
return columnSizes;
|
||||
}
|
||||
|
||||
export function countVisibleRealColumns(columnSizes, firstVisibleColumnScrollIndex, gridScrollAreaWidth, columns) {
|
||||
const visibleColumnCount = columnSizes.getVisibleScrollCount(firstVisibleColumnScrollIndex, gridScrollAreaWidth);
|
||||
console.log('visibleColumnCount', visibleColumnCount);
|
||||
console.log('gridScrollAreaWidth', gridScrollAreaWidth);
|
||||
|
||||
const visibleRealColumnIndexes = [];
|
||||
const modelIndexes = {};
|
||||
/** @type {(import('@dbgate/datalib').DisplayColumn & {widthPx: string; colIndex: number})[]} */
|
||||
const realColumns = [];
|
||||
|
||||
// frozen columns
|
||||
for (let colIndex = 0; colIndex < columnSizes.frozenCount; colIndex++) {
|
||||
visibleRealColumnIndexes.push(colIndex);
|
||||
}
|
||||
// scroll columns
|
||||
for (
|
||||
let colIndex = firstVisibleColumnScrollIndex;
|
||||
colIndex < firstVisibleColumnScrollIndex + visibleColumnCount;
|
||||
colIndex++
|
||||
) {
|
||||
visibleRealColumnIndexes.push(colIndex + columnSizes.frozenCount);
|
||||
}
|
||||
|
||||
// real columns
|
||||
for (let colIndex of visibleRealColumnIndexes) {
|
||||
let modelColumnIndex = columnSizes.realToModel(colIndex);
|
||||
modelIndexes[colIndex] = modelColumnIndex;
|
||||
|
||||
let col = columns[modelColumnIndex];
|
||||
if (!col) continue;
|
||||
const widthNumber = columnSizes.getSizeByRealIndex(colIndex);
|
||||
realColumns.push({
|
||||
...col,
|
||||
colIndex,
|
||||
widthPx: `${widthNumber}px`,
|
||||
});
|
||||
}
|
||||
return realColumns;
|
||||
}
|
||||
@ -18,10 +18,18 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
|
||||
console.log('changeSet', changeSet);
|
||||
|
||||
const connection = useConnectionInfo(conid);
|
||||
if (!tableInfo || !connection) return null;
|
||||
const display = new TableGridDisplay(tableInfo, engines(connection), config, setConfig, cache, setCache, name =>
|
||||
getTableInfo({ conid, database, ...name })
|
||||
const display = React.useMemo(
|
||||
() =>
|
||||
tableInfo && connection
|
||||
? new TableGridDisplay(tableInfo, engines(connection), config, setConfig, cache, setCache, name =>
|
||||
getTableInfo({ conid, database, ...name })
|
||||
)
|
||||
: null,
|
||||
[tableInfo, connection, config, cache]
|
||||
);
|
||||
|
||||
if (!display) return null;
|
||||
|
||||
return (
|
||||
<DataGrid
|
||||
// key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user