fix(图表): 修复表格冻结行列时出现透明线条

2024-11-05 12:12:53 +08:00 · 2024-11-05 12:12:53 +08:00 · 554d03ec46
commit 554d03ec46
parent 2df8441622
4 changed files with 48 additions and 29 deletions
--- 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<TableSheet> {
            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)
--- 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<TableSheet> {
      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<TableSheet> {
  }
 }

-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')
-    })
-  }
 }
--- 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<string, any>
@ -262,6 +262,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
      dataSet: spreadSheet => new CustomPivotDataset(spreadSheet),
      interaction: {
        hoverHighlight: !(basicStyle.showHoverStyle === false)
+      },
+      dataCell: meta => {
+        return new CustomDataCell(meta, meta.spreadsheet)
      }
    }
    // options
--- 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')
+    })
+  }
+}