From 554d03ec46e2420f9cd95df8cb82b4cca2933b24 Mon Sep 17 00:00:00 2001 From: wisonic Date: Tue, 5 Nov 2024 12:12:53 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=86=BB=E7=BB=93=E8=A1=8C=E5=88=97=E6=97=B6?= =?UTF-8?q?=E5=87=BA=E7=8E=B0=E9=80=8F=E6=98=8E=E7=BA=BF=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/table/table-info.ts | 5 ++- .../js/panel/charts/table/table-normal.ts | 27 ++++--------- .../js/panel/charts/table/table-pivot.ts | 5 ++- .../js/panel/common/common_table.ts | 40 ++++++++++++++++--- 4 files changed, 48 insertions(+), 29 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts index 302f15eaca..ad9b102a1b 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts @@ -17,12 +17,13 @@ import { useI18n } from '@/hooks/web/useI18n' import { isNumber, merge } from 'lodash-es' import { copyContent, + CustomDataCell, getRowIndex, SortTooltip } from '@/views/chart/components/js/panel/common/common_table' const { t } = useI18n() -class ImageCell extends TableDataCell { +class ImageCell extends CustomDataCell { protected drawTextShape(): void { const img = new Image() const { x, y, width, height, fieldValue } = this.meta @@ -204,7 +205,7 @@ export class TableInfo extends S2ChartView { pageInfo.pageSize * (pageInfo.currentPage - 1) + viewMeta.rowIndex + 1 } } - return new TableDataCell(viewMeta, viewMeta?.spreadsheet) + return new CustomDataCell(viewMeta, viewMeta?.spreadsheet) } // tooltip this.configTooltip(chart, s2Options) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts index 78cbb8e97e..e545f72417 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts @@ -1,6 +1,10 @@ import { useI18n } from '@/hooks/web/useI18n' import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter' -import { copyContent, SortTooltip } from '@/views/chart/components/js/panel/common/common_table' +import { + copyContent, + CustomDataCell, + SortTooltip +} from '@/views/chart/components/js/panel/common/common_table' import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/types/impl/s2' import { parseJson } from '@/views/chart/components/js/util' import { @@ -8,11 +12,8 @@ import { S2DataConfig, S2Event, S2Options, - SHAPE_STYLE_MAP, TableColCell, - TableDataCell, TableSheet, - updateShapeAttr, ViewMeta } from '@antv/s2' import { cloneDeep, isNumber } from 'lodash-es' @@ -210,7 +211,7 @@ export class TableNormal extends S2ChartView { newData.push(summaryObj) s2Options.dataCell = viewMeta => { if (viewMeta.rowIndex !== newData.length - 1) { - return new TableDataCell(viewMeta, viewMeta.spreadsheet) + return new CustomDataCell(viewMeta, viewMeta.spreadsheet) } if (viewMeta.colIndex === 0) { if (tableHeader.showIndex) { @@ -334,7 +335,7 @@ export class TableNormal extends S2ChartView { } } -class SummaryCell extends TableDataCell { +class SummaryCell extends CustomDataCell { getTextStyle() { const textStyle = cloneDeep(this.theme.colCell.bolderText) textStyle.textAlign = this.theme.dataCell.text.textAlign @@ -344,18 +345,4 @@ class SummaryCell extends TableDataCell { const { backgroundColor, backgroundColorOpacity } = this.theme.colCell.cell return { backgroundColor, backgroundColorOpacity } } - /** - * 重写这个方法是为了处理底部的汇总行取消 hover 状态时设置 border 为 1, - * 这样会导致单元格隐藏横边边框失败，出现一条白线 - */ - hideInteractionShape() { - const width = this.theme.dataCell.cell.horizontalBorderWidth - this.stateShapes.forEach(shape => { - updateShapeAttr(shape, SHAPE_STYLE_MAP.backgroundOpacity, 0) - updateShapeAttr(shape, SHAPE_STYLE_MAP.backgroundColor, 'transparent') - updateShapeAttr(shape, SHAPE_STYLE_MAP.borderOpacity, 0) - updateShapeAttr(shape, SHAPE_STYLE_MAP.borderWidth, width) - updateShapeAttr(shape, SHAPE_STYLE_MAP.borderColor, 'transparent') - }) - } } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts index b11bdc3547..2378e45623 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts @@ -20,7 +20,7 @@ import { S2ChartView, S2DrawOptions } from '../../types/impl/s2' import { TABLE_EDITOR_PROPERTY_INNER } from './common' import { useI18n } from '@/hooks/web/useI18n' import { isNumber, keys, maxBy, merge, minBy, some, isEmpty, get } from 'lodash-es' -import { copyContent } from '../../common/common_table' +import { copyContent, CustomDataCell } from '../../common/common_table' import Decimal from 'decimal.js' type DataItem = Record @@ -262,6 +262,9 @@ export class TablePivot extends S2ChartView { dataSet: spreadSheet => new CustomPivotDataset(spreadSheet), interaction: { hoverHighlight: !(basicStyle.showHoverStyle === false) + }, + dataCell: meta => { + return new CustomDataCell(meta, meta.spreadsheet) } } // options diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts index 66e32524da..b5397678da 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts @@ -34,7 +34,9 @@ import { getPolygonPoints, renderPolygon, MergedCellInfo, - ViewMeta + ViewMeta, + updateShapeAttr, + SHAPE_STYLE_MAP } from '@antv/s2' import { keys, intersection, filter, cloneDeep, merge, find, repeat } from 'lodash-es' import { createVNode, render } from 'vue' @@ -64,8 +66,12 @@ export function getCustomTheme(chart: Chart): S2Theme { }, splitLine: { horizontalBorderColor: borderColor, + horizontalBorderColorOpacity: 1, + horizontalBorderWidth: 1, verticalBorderColor: borderColor, - horizontalBorderWidth: 0 + verticalBorderColorOpacity: 1, + verticalBorderWidth: 1, + showShadow: false, }, cornerCell: { cell: { @@ -280,10 +286,11 @@ export function getCustomTheme(chart: Chart): S2Theme { merge(theme, tmpTheme) // 这边设置为 0 的话就会显示表头背景颜色，所以要判断一下表头是否关闭 if (tableHeader.showHorizonBorder === false && tableHeader.showTableHeader !== false) { - const tmpTheme = { + const tmpTheme: S2Theme = { splitLine: { horizontalBorderColor: tableHeaderBgColor, - horizontalBorderWidth: 0 + horizontalBorderWidth: 0, + horizontalBorderColorOpacity: 0 }, colCell: { cell: { @@ -298,7 +305,8 @@ export function getCustomTheme(chart: Chart): S2Theme { const tmpTheme: S2Theme = { splitLine: { verticalBorderColor: tableHeaderBgColor, - verticalBorderWidth: 0 + verticalBorderWidth: 0, + verticalBorderColorOpacity: 0 }, colCell: { cell: { @@ -406,7 +414,11 @@ export function getCustomTheme(chart: Chart): S2Theme { merge(theme, tmpTheme) } if (tableCell.showVerticalBorder === false) { - const tmpTheme = { + const tmpTheme: S2Theme = { + splitLine: { + verticalBorderWidth: 0, + verticalBorderColorOpacity: 0 + }, dataCell: { cell: { verticalBorderColor: tableItemBgColor, @@ -1521,3 +1533,19 @@ class CustomMergedCell extends MergedCell { }) } } + +export class CustomDataCell extends TableDataCell { + /** + * 重写这个方法是为了处理底部的汇总行取消 hover 状态时设置 border 为 1, + * 这样会导致单元格隐藏横边边框失败，出现一条白线 + */ + hideInteractionShape() { + this.stateShapes.forEach(shape => { + updateShapeAttr(shape, SHAPE_STYLE_MAP.backgroundOpacity, 0) + updateShapeAttr(shape, SHAPE_STYLE_MAP.backgroundColor, 'transparent') + updateShapeAttr(shape, SHAPE_STYLE_MAP.borderOpacity, 0) + updateShapeAttr(shape, SHAPE_STYLE_MAP.borderWidth, 0) + updateShapeAttr(shape, SHAPE_STYLE_MAP.borderColor, 'transparent') + }) + } +}