From f311409ae0406549d0b5da200decc87954f37914 Mon Sep 17 00:00:00 2001 From: Luna Li Date: Thu, 21 Sep 2023 15:15:28 +0200 Subject: [PATCH 1/3] always add border for table --- src/viewer/structures/StructureTable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/viewer/structures/StructureTable.tsx b/src/viewer/structures/StructureTable.tsx index 007c743..db06f13 100644 --- a/src/viewer/structures/StructureTable.tsx +++ b/src/viewer/structures/StructureTable.tsx @@ -92,7 +92,7 @@ export default class StructureTable extends React.Component { renderHeaderColumn(value: string, columnIndex: number, width: number) { const height = LOG_HEADER_HEIGHT; - const widthNew = columnIndex !== 0 ? width + BORDER_SIZE : width; + const widthNew = width + BORDER_SIZE; const headerColumnStyle = getHeaderColumnStyle(widthNew, columnIndex, height); const headerColumnInnerStyle = getHeaderColumnInnerStyle(height, true); return ( @@ -124,7 +124,7 @@ export default class StructureTable extends React.Component { renderColumn(rowIndex: number, cellIndex: number, width: number) { const { structureEntries } = this.props; - const widthNew = cellIndex !== 0 ? width + BORDER_SIZE : width; + const widthNew = width + BORDER_SIZE; const columnStyle = getStructureTableColumnStyle(widthNew, cellIndex); const columnInnerStyle = getStructureTableCellSelectionStyle( structureEntries, @@ -253,7 +253,7 @@ export default class StructureTable extends React.Component { const containerHeight = numberOfRows * LOG_ROW_HEIGHT + (numberOfRows - 1) * STRUCTURE_LINK_HEIGHT; const containerWidth = - (headerColumns.length - 1) * BORDER_SIZE + + headerColumns.length * BORDER_SIZE + headerColumns.reduce((partialSum: number, h) => partialSum + this.columnWidth(h.name), 0); return ( From f432b0b458de23a7163ca303bcf49193a8f3e6d8 Mon Sep 17 00:00:00 2001 From: LightFLP Date: Thu, 21 Sep 2023 16:40:23 +0200 Subject: [PATCH 2/3] Fix StructureTable columnWidth resize bug --- src/viewer/structures/StructureTable.tsx | 35 ++++++++++++------------ 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/viewer/structures/StructureTable.tsx b/src/viewer/structures/StructureTable.tsx index db06f13..40ed4e8 100644 --- a/src/viewer/structures/StructureTable.tsx +++ b/src/viewer/structures/StructureTable.tsx @@ -79,6 +79,7 @@ export default class StructureTable extends React.Component { } setColumnWidth(name: string, width: number) { + //update the state for triggering the render this.setState((prevState) => { const columnWidth = { ...prevState.columnWidth }; columnWidth[name] = width; @@ -86,8 +87,22 @@ export default class StructureTable extends React.Component { }); } - columnWidth(name: string) { - return LOG_COLUMN_WIDTH_LOOKUP[name] ?? LOG_DEFAULT_COLUMN_WIDTH; + getInitialColumnWidth(name: string) { + return LOG_COLUMN_WIDTH_LOOKUP[name.toLowerCase()] ?? LOG_DEFAULT_COLUMN_WIDTH; + } + + renderHeader(containerWidth: number) { + const style = getStructureTableHeaderStyle(containerWidth); + + return ( +
+
+ {this.props.headerColumns.map((h, i) => + this.renderHeaderColumn(h.name, i, this.getInitialColumnWidth(h.name)), + )} +
+
+ ); } renderHeaderColumn(value: string, columnIndex: number, width: number) { @@ -108,20 +123,6 @@ export default class StructureTable extends React.Component { ); } - renderHeader(containerWidth: number) { - const style = getStructureTableHeaderStyle(containerWidth); - - return ( -
-
- {this.props.headerColumns.map((h, i) => - this.renderHeaderColumn(h.name, i, this.columnWidth(h.name)), - )} -
-
- ); - } - renderColumn(rowIndex: number, cellIndex: number, width: number) { const { structureEntries } = this.props; const widthNew = width + BORDER_SIZE; @@ -254,7 +255,7 @@ export default class StructureTable extends React.Component { numberOfRows * LOG_ROW_HEIGHT + (numberOfRows - 1) * STRUCTURE_LINK_HEIGHT; const containerWidth = headerColumns.length * BORDER_SIZE + - headerColumns.reduce((partialSum: number, h) => partialSum + this.columnWidth(h.name), 0); + headerColumns.reduce((partialSum: number, h) => partialSum + this.state.columnWidth[h.name], 0); return (
Date: Mon, 25 Sep 2023 13:45:32 +0200 Subject: [PATCH 3/3] fix column lines alignment --- src/viewer/hooks/useStyleManager.ts | 2 +- src/viewer/log/LogView.tsx | 8 +++----- src/viewer/structures/StructureTable.tsx | 6 ++---- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/viewer/hooks/useStyleManager.ts b/src/viewer/hooks/useStyleManager.ts index 23a8a44..ee7d3e9 100644 --- a/src/viewer/hooks/useStyleManager.ts +++ b/src/viewer/hooks/useStyleManager.ts @@ -76,7 +76,6 @@ export const getHeaderColumnStyle = ( display: "inline-block", height, width: columnWidth, - borderLeft: BORDER, }; return headerColumnStyle; @@ -104,6 +103,7 @@ export const getHeaderColumnInnerStyle = ( alignItems: "center", justifyContent: isHeader ? "center" : "left", paddingLeft: "2px", + borderLeft: BORDER, }; return headerColumnInnerStyle; diff --git a/src/viewer/log/LogView.tsx b/src/viewer/log/LogView.tsx index 00f7fa0..312902a 100644 --- a/src/viewer/log/LogView.tsx +++ b/src/viewer/log/LogView.tsx @@ -95,7 +95,7 @@ export default class LogView extends React.Component { colorMap: string, ) { const height = isHeader ? LOG_HEADER_HEIGHT : LOG_ROW_HEIGHT; - const widthNew = width + BORDER_SIZE; //increase width with 1px, because the border is 1px + let color = "transparent"; let fontColor = ""; @@ -107,8 +107,7 @@ export default class LogView extends React.Component { fontColor = "#ffffff"; } } - - const columnHeaderStyle = getHeaderColumnStyle(widthNew, columnIndex, height); + const columnHeaderStyle = getHeaderColumnStyle(width, columnIndex, height); const columnHeaderInnerStyle = getHeaderColumnInnerStyle(height, isHeader); const colorStyle: React.CSSProperties = { backgroundColor: color, color: fontColor }; const innerStyle = { ...columnHeaderInnerStyle, ...colorStyle }; @@ -415,8 +414,7 @@ export default class LogView extends React.Component { renderHeaderColumn(value: string, columnIndex: number, isHeader: boolean, width: number) { const height = isHeader ? LOG_HEADER_HEIGHT : LOG_ROW_HEIGHT; - const widthNew = width + BORDER_SIZE; //increase width with 1px, because the border is 1px - const columnHeaderStyle = getHeaderColumnStyle(widthNew, columnIndex, height); + const columnHeaderStyle = getHeaderColumnStyle(width, columnIndex, height); const columnHeaderInnerStyle = getHeaderColumnInnerStyle(height, isHeader); return ( diff --git a/src/viewer/structures/StructureTable.tsx b/src/viewer/structures/StructureTable.tsx index 40ed4e8..631ed36 100644 --- a/src/viewer/structures/StructureTable.tsx +++ b/src/viewer/structures/StructureTable.tsx @@ -107,8 +107,7 @@ export default class StructureTable extends React.Component { renderHeaderColumn(value: string, columnIndex: number, width: number) { const height = LOG_HEADER_HEIGHT; - const widthNew = width + BORDER_SIZE; - const headerColumnStyle = getHeaderColumnStyle(widthNew, columnIndex, height); + const headerColumnStyle = getHeaderColumnStyle(width, columnIndex, height); const headerColumnInnerStyle = getHeaderColumnInnerStyle(height, true); return ( { renderColumn(rowIndex: number, cellIndex: number, width: number) { const { structureEntries } = this.props; - const widthNew = width + BORDER_SIZE; - const columnStyle = getStructureTableColumnStyle(widthNew, cellIndex); + const columnStyle = getStructureTableColumnStyle(width, cellIndex); const columnInnerStyle = getStructureTableCellSelectionStyle( structureEntries, rowIndex,