From 114e7fc9b7d37f2512dc17a812d280858b571f61 Mon Sep 17 00:00:00 2001 From: Xinhui Date: Fri, 3 Dec 2021 13:56:03 +0800 Subject: [PATCH] fix(cell): border width issue (#859) * fix: data cell border * fix: data cell border issue * feat: update test spec * refactor: border draw call into one method * refactor: series number node border * fix: tree hierachy border * refactor: combine border draw call * feat: replace cell border * feat: replace cell border * feat: replace cell border --- .../__tests__/spreadsheet/table-sheet-spec.ts | 6 ++ .../__tests__/unit/utils/cell/cell.spec.ts | 70 +++++++++++++++++ packages/s2-core/src/cell/base-cell.ts | 4 +- packages/s2-core/src/cell/col-cell.ts | 52 +++++++------ packages/s2-core/src/cell/corner-cell.ts | 60 +++++--------- packages/s2-core/src/cell/data-cell.ts | 60 +++++--------- packages/s2-core/src/cell/row-cell.ts | 65 ++++++---------- packages/s2-core/src/cell/table-col-cell.ts | 10 ++- .../s2-core/src/cell/table-corner-cell.ts | 19 +++++ packages/s2-core/src/cell/table-data-cell.ts | 7 ++ .../s2-core/src/cell/table-series-cell.ts | 7 ++ .../s2-core/src/common/interface/basic.ts | 7 ++ .../s2-core/src/facet/header/series-number.ts | 50 +++++++----- packages/s2-core/src/theme/palette/default.ts | 4 +- packages/s2-core/src/utils/cell/cell.ts | 78 +++++++++++++++++++ .../spreadsheet/table-sheet-spec.tsx | 1 + 16 files changed, 326 insertions(+), 174 deletions(-) diff --git a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts index 2ef617a82a..e925321378 100644 --- a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts +++ b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts @@ -73,12 +73,18 @@ const options: S2Options = { enableCopy: true, hoverHighlight: false, linkFields: ['order_id', 'customer_name'], + hiddenColumnFields: ['order_date'], }, frozenRowCount: 2, frozenColCount: 1, frozenTrailingColCount: 1, frozenTrailingRowCount: 1, showDefaultHeaderActionIcon: true, + tooltip: { + operation: { + hiddenColumns: true, + }, + }, }; describe('TableSheet normal spec', () => { diff --git a/packages/s2-core/__tests__/unit/utils/cell/cell.spec.ts b/packages/s2-core/__tests__/unit/utils/cell/cell.spec.ts index 3fa7823d93..1e98af49d7 100644 --- a/packages/s2-core/__tests__/unit/utils/cell/cell.spec.ts +++ b/packages/s2-core/__tests__/unit/utils/cell/cell.spec.ts @@ -1,3 +1,4 @@ +import { CellBorderPosition, CellTheme } from 'src/common/interface'; import { SimpleBBox } from '@antv/g-canvas'; import { AreaRange } from '@/common/interface/scroll'; import { @@ -5,6 +6,7 @@ import { getMaxTextWidth, getTextAndFollowingIconPosition, getTextAndIconPositionWhenHorizontalScrolling, + getBorderPositionAndStyle, } from '@/utils/cell/cell'; describe('Cell Content Test', () => { @@ -488,4 +490,72 @@ describe('Horizontal Scrolling Text Position Test', () => { ), ).toEqual(50); }); + + test('should get border position', () => { + const contentBox = { + x: 0, + y: 0, + width: 200, + height: 50, + }; + const style = { + verticalBorderColorOpacity: 1, + verticalBorderColor: '#000', + verticalBorderWidth: 2, + horizontalBorderColor: '#000', + horizontalBorderColorOpacity: 1, + horizontalBorderWidth: 2, + }; + expect( + getBorderPositionAndStyle( + CellBorderPosition.LEFT, + contentBox, + style as CellTheme, + ).position, + ).toEqual({ + x1: 1, + y1: 0, + x2: 1, + y2: 50, + }); + + expect( + getBorderPositionAndStyle( + CellBorderPosition.RIGHT, + contentBox, + style as CellTheme, + ).position, + ).toEqual({ + x1: 199, + y1: 0, + x2: 199, + y2: 50, + }); + + expect( + getBorderPositionAndStyle( + CellBorderPosition.TOP, + contentBox, + style as CellTheme, + ).position, + ).toEqual({ + x1: 0, + y1: 1, + x2: 200, + y2: 1, + }); + + expect( + getBorderPositionAndStyle( + CellBorderPosition.BOTTOM, + contentBox, + style as CellTheme, + ).position, + ).toEqual({ + x1: 0, + y1: 49, + x2: 200, + y2: 49, + }); + }); }); diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts index 09446224cf..3d97ea83ca 100644 --- a/packages/s2-core/src/cell/base-cell.ts +++ b/packages/s2-core/src/cell/base-cell.ts @@ -248,8 +248,8 @@ export abstract class BaseCell extends Group { ) { if (isNumber(style)) { const marginStyle = { - x: Math.ceil(x + style / 2), // TODO: 边框整体重构后需revisit - y: Math.ceil(y + style / 2), + x: x + style / 2, // TODO: 边框整体重构后需revisit + y: y + style / 2, width: width - style - 1, height: height - style - 1, }; diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts index f19ce81845..5ebf3cc14f 100644 --- a/packages/s2-core/src/cell/col-cell.ts +++ b/packages/s2-core/src/cell/col-cell.ts @@ -1,4 +1,4 @@ -import { Point } from '@antv/g-canvas'; +import { Point, SimpleBBox } from '@antv/g-canvas'; import { shouldAddResizeArea } from './../utils/interaction/resize'; import { HeaderCell } from './header-cell'; import { @@ -13,6 +13,7 @@ import { ResizeAreaEffect, } from '@/common/constant'; import { + CellBorderPosition, FormatResult, TextAlign, TextBaseline, @@ -24,6 +25,7 @@ import { AreaRange } from '@/common/interface/scroll'; import { getTextAndIconPositionWhenHorizontalScrolling, getTextAndFollowingIconPosition, + getBorderPositionAndStyle, } from '@/utils/cell/cell'; export class ColCell extends HeaderCell { @@ -45,19 +47,18 @@ export class ColCell extends HeaderCell { this.drawTextShape(); // draw action icons this.drawActionIcons(); - // draw right border - this.drawRightBorder(); + // draw borders + this.drawBorders(); // draw resize ares this.drawResizeArea(); this.update(); } protected drawBackgroundShape() { - const { backgroundColor, horizontalBorderColor } = this.getStyle().cell; + const { backgroundColor } = this.getStyle().cell; this.backgroundShape = renderRect(this, { ...this.getCellArea(), fill: backgroundColor, - stroke: horizontalBorderColor, }); } @@ -302,24 +303,27 @@ export class ColCell extends HeaderCell { this.drawVerticalResizeArea(); } - private drawRightBorder() { - if (!this.meta.isLeaf) { - const { height, viewportHeight } = this.headerConfig; - const { x, y, width: cellWidth, height: cellHeight } = this.meta; - - renderLine( - this, - { - x1: x + cellWidth, - y1: y + cellHeight, - x2: x + cellWidth, - y2: y + height + viewportHeight, - }, - { - stroke: this.theme.colCell.cell.horizontalBorderColor, - lineWidth: 1, - }, - ); - } + protected drawHorizontalBorder() { + const { position, style } = getBorderPositionAndStyle( + CellBorderPosition.TOP, + this.meta as SimpleBBox, + this.theme.colCell.cell, + ); + + renderLine(this, position, style); + } + + protected drawVerticalBorder() { + const { position, style } = getBorderPositionAndStyle( + CellBorderPosition.RIGHT, + this.meta as SimpleBBox, + this.theme.colCell.cell, + ); + renderLine(this, position, style); + } + + protected drawBorders() { + this.drawHorizontalBorder(); + this.drawVerticalBorder(); } } diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts index 751c2d73db..a5c5ccad8a 100644 --- a/packages/s2-core/src/cell/corner-cell.ts +++ b/packages/s2-core/src/cell/corner-cell.ts @@ -15,9 +15,17 @@ import { ResizeDirectionType, S2Event, } from '@/common/constant'; -import { FormatResult, TextTheme } from '@/common/interface'; +import { + CellBorderPosition, + FormatResult, + TextTheme, +} from '@/common/interface'; import { CornerHeaderConfig } from '@/facet/header/corner'; -import { getTextPosition, getVerticalPosition } from '@/utils/cell/cell'; +import { + getTextPosition, + getVerticalPosition, + getBorderPositionAndStyle, +} from '@/utils/cell/cell'; import { renderLine, renderRect, @@ -187,46 +195,14 @@ export class CornerCell extends HeaderCell { * @private */ protected drawBorderShape() { - const { x, y, width, height } = this.getCellArea(); - const { - horizontalBorderColor, - horizontalBorderWidth, - horizontalBorderColorOpacity, - verticalBorderColor, - verticalBorderWidth, - verticalBorderColorOpacity, - } = this.getStyle().cell; - - // horizontal border - renderLine( - this, - { - x1: x, - y1: y, - x2: x + width, - y2: y, - }, - { - stroke: horizontalBorderColor, - lineWidth: horizontalBorderWidth, - opacity: horizontalBorderColorOpacity, - }, - ); - // vertical border - renderLine( - this, - { - x1: x + width, - y1: y, - x2: x + width, - y2: y + height, - }, - { - stroke: verticalBorderColor, - lineWidth: verticalBorderWidth, - opacity: verticalBorderColorOpacity, - }, - ); + [CellBorderPosition.TOP, CellBorderPosition.LEFT].forEach((type) => { + const { position, style } = getBorderPositionAndStyle( + type, + this.getCellArea(), + this.getStyle().cell, + ); + renderLine(this, position, style); + }); } private isLastRowCornerCell() { diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts index cc173278b9..e33ff848d3 100644 --- a/packages/s2-core/src/cell/data-cell.ts +++ b/packages/s2-core/src/cell/data-cell.ts @@ -20,8 +20,9 @@ import { TextTheme, ViewMeta, ViewMetaIndexType, + CellBorderPosition, } from '@/common/interface'; -import { getMaxTextWidth } from '@/utils/cell/cell'; +import { getMaxTextWidth, getBorderPositionAndStyle } from '@/utils/cell/cell'; import { includeCell } from '@/utils/cell/data-cell'; import { getIconPositionCfg } from '@/utils/condition/condition'; import { @@ -406,47 +407,15 @@ export class DataCell extends BaseCell { * @private */ protected drawBorderShape() { - const { x, y, height, width } = this.getCellArea(); - const { - horizontalBorderColor, - horizontalBorderWidth, - horizontalBorderColorOpacity, - verticalBorderColor, - verticalBorderWidth, - verticalBorderColorOpacity, - } = this.getStyle().cell; - - // horizontal border - renderLine( - this, - { - x1: x, - y1: y + height, - x2: x + width, - y2: y + height, - }, - { - stroke: horizontalBorderColor, - lineWidth: horizontalBorderWidth, - opacity: horizontalBorderColorOpacity, - }, - ); + [CellBorderPosition.BOTTOM, CellBorderPosition.RIGHT].forEach((type) => { + const { position, style } = getBorderPositionAndStyle( + type, + this.getCellArea(), + this.getStyle().cell, + ); - // vertical border - renderLine( - this, - { - x1: x + width, - y1: y, - x2: x + width, - y2: y + height, - }, - { - stroke: verticalBorderColor, - lineWidth: verticalBorderWidth, - opacity: verticalBorderColorOpacity, - }, - ); + renderLine(this, position, style); + }); } /** @@ -505,4 +474,13 @@ export class DataCell extends BaseCell { 1, ); } + + protected drawLeftBorder() { + const { position, style } = getBorderPositionAndStyle( + CellBorderPosition.LEFT, + this.getCellArea(), + this.getStyle().cell, + ); + renderLine(this, position, style); + } } diff --git a/packages/s2-core/src/cell/row-cell.ts b/packages/s2-core/src/cell/row-cell.ts index c91d8259ab..3d578bcb11 100644 --- a/packages/s2-core/src/cell/row-cell.ts +++ b/packages/s2-core/src/cell/row-cell.ts @@ -9,9 +9,13 @@ import { ResizeDirectionType, S2Event, } from '@/common/constant'; -import { FormatResult, TextTheme } from '@/common/interface'; +import { + CellBorderPosition, + FormatResult, + TextTheme, +} from '@/common/interface'; import { RowHeaderConfig } from '@/facet/header/row'; -import { getTextPosition } from '@/utils/cell/cell'; +import { getTextPosition, getBorderPositionAndStyle } from '@/utils/cell/cell'; import { renderLine, renderRect, renderTreeIcon } from '@/utils/g-renders'; import { getAllChildrenNodeHeight } from '@/utils/get-all-children-node-height'; import { getAdjustPosition } from '@/utils/text-absorption'; @@ -171,48 +175,23 @@ export class RowCell extends HeaderCell { } protected drawRectBorder() { - const { position, width, viewportWidth, scrollX } = this.headerConfig; - const { - horizontalBorderColor, - horizontalBorderWidth, - horizontalBorderColorOpacity, - verticalBorderColor, - verticalBorderWidth, - verticalBorderColorOpacity, - } = this.getStyle().cell; - const { x, y, height, width: cellWidth } = this.getCellArea(); - // horizontal border - const contentIndent = this.getContentIndent(); - renderLine( - this, - { - x1: x + contentIndent, - y1: y + height, - x2: position.x + width + viewportWidth + scrollX, - y2: y + height, - }, - { - stroke: horizontalBorderColor, - lineWidth: horizontalBorderWidth, - opacity: horizontalBorderColorOpacity, - }, - ); + const { x } = this.getCellArea(); - // vertical border - renderLine( - this, - { - x1: x + contentIndent + cellWidth, - y1: y, - x2: x + contentIndent + cellWidth, - y2: y + height, - }, - { - stroke: verticalBorderColor, - lineWidth: verticalBorderWidth, - opacity: verticalBorderColorOpacity, - }, - ); + const contentIndent = this.getContentIndent(); + const finalX = this.spreadsheet.isHierarchyTreeType() + ? x + : x + contentIndent; + [CellBorderPosition.BOTTOM, CellBorderPosition.LEFT].forEach((type) => { + const { position, style } = getBorderPositionAndStyle( + type, + { + ...this.getCellArea(), + x: finalX, + }, + this.getStyle().cell, + ); + renderLine(this, position, style); + }); } protected drawResizeAreaInLeaf() { diff --git a/packages/s2-core/src/cell/table-col-cell.ts b/packages/s2-core/src/cell/table-col-cell.ts index 44f7b6da9d..5fc99b4851 100644 --- a/packages/s2-core/src/cell/table-col-cell.ts +++ b/packages/s2-core/src/cell/table-col-cell.ts @@ -6,7 +6,7 @@ import { getSortTypeIcon } from 'src/utils/sort-action'; import { Group } from '@antv/g-canvas'; import { isLastColumnAfterHidden } from '@/utils/hide-columns'; import { S2Event, HORIZONTAL_RESIZE_AREA_KEY_PRE } from '@/common/constant'; -import { renderIcon, renderLine } from '@/utils/g-renders'; +import { renderIcon, renderLine, renderRect } from '@/utils/g-renders'; import { ColCell } from '@/cell/col-cell'; import { DefaultCellTheme, @@ -198,4 +198,12 @@ export class TableColCell extends ColCell { value: label, }; } + + protected drawBackgroundShape() { + const { backgroundColor } = this.getStyle().cell; + this.backgroundShape = renderRect(this, { + ...this.getCellArea(), + fill: backgroundColor, + }); + } } diff --git a/packages/s2-core/src/cell/table-corner-cell.ts b/packages/s2-core/src/cell/table-corner-cell.ts index b2fbf96b82..ab213a652d 100644 --- a/packages/s2-core/src/cell/table-corner-cell.ts +++ b/packages/s2-core/src/cell/table-corner-cell.ts @@ -1,4 +1,7 @@ import { get } from 'lodash'; +import { getBorderPositionAndStyle } from 'src/utils/cell/cell'; +import { CellBorderPosition } from 'src/common/interface'; +import { renderLine } from 'src/utils/g-renders'; import { TableColCell } from './table-col-cell'; export class TableCornerCell extends TableColCell { @@ -9,4 +12,20 @@ export class TableCornerCell extends TableColCell { protected showSortIcon() { return false; } + + protected drawLeftBorder() { + const { position, style } = getBorderPositionAndStyle( + CellBorderPosition.LEFT, + this.getCellArea(), + this.getStyle().cell, + ); + renderLine(this, position, style); + } + + protected drawBorders() { + super.drawBorders(); + if (this.meta.colIndex === 0) { + this.drawLeftBorder(); + } + } } diff --git a/packages/s2-core/src/cell/table-data-cell.ts b/packages/s2-core/src/cell/table-data-cell.ts index 59bfc5aac1..2bc0696017 100644 --- a/packages/s2-core/src/cell/table-data-cell.ts +++ b/packages/s2-core/src/cell/table-data-cell.ts @@ -15,4 +15,11 @@ export class TableDataCell extends DataCell { linkTextFill, ); } + + protected drawBorderShape() { + super.drawBorderShape(); + if (this.meta.colIndex === 0) { + this.drawLeftBorder(); + } + } } diff --git a/packages/s2-core/src/cell/table-series-cell.ts b/packages/s2-core/src/cell/table-series-cell.ts index 033c15e625..08cc960f87 100644 --- a/packages/s2-core/src/cell/table-series-cell.ts +++ b/packages/s2-core/src/cell/table-series-cell.ts @@ -10,4 +10,11 @@ export class TableRowCell extends DataCell { protected getTextStyle(): TextTheme { return this.theme.rowCell.text; } + + protected drawBorderShape() { + super.drawBorderShape(); + if (this.meta.colIndex === 0) { + this.drawLeftBorder(); + } + } } diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts index fe133df9bf..4351e580a8 100644 --- a/packages/s2-core/src/common/interface/basic.ts +++ b/packages/s2-core/src/common/interface/basic.ts @@ -22,6 +22,13 @@ export interface FormatResult { export type SortMethod = 'ASC' | 'DESC' | 'asc' | 'desc'; +export enum CellBorderPosition { + TOP = 'TOP', + BOTTOM = 'BOTTOM', + LEFT = 'LEFT', + RIGHT = 'RIGHT', +} + /** * 布局类型： * adaptive: 行列等宽，均分整个 canvas 画布宽度 diff --git a/packages/s2-core/src/facet/header/series-number.ts b/packages/s2-core/src/facet/header/series-number.ts index 8a82577ef2..286849f8ff 100644 --- a/packages/s2-core/src/facet/header/series-number.ts +++ b/packages/s2-core/src/facet/header/series-number.ts @@ -1,17 +1,20 @@ -import { BBox, IGroup, IShape } from '@antv/g-canvas'; +import { BBox, Group, IGroup, IShape } from '@antv/g-canvas'; import { each } from 'lodash'; +import { getBorderPositionAndStyle } from 'src/utils/cell/cell'; import { translateGroup } from '../utils'; import { BaseHeader, BaseHeaderConfig } from './base'; import { Node } from '@/facet/layout/node'; import { SpreadSheet } from '@/sheet-type/index'; -import { renderRect } from '@/utils/g-renders'; +import { renderRect, renderLine } from '@/utils/g-renders'; import { measureTextWidth } from '@/utils/text'; import { getAdjustPosition } from '@/utils/text-absorption'; -import { Padding, ViewMeta } from '@/common/interface'; +import { CellBorderPosition, Padding, ViewMeta } from '@/common/interface'; export class SeriesNumberHeader extends BaseHeader { private backgroundShape: IShape; + private leftBorderShape: IShape; + /** * Get seriesNumber header by config * @param viewportBBox @@ -91,7 +94,7 @@ export class SeriesNumberHeader extends BaseHeader { // 添加边框 if (!isLeaf) { - this.addBottomBorder(borderGroup, item); + this.addBorder(borderGroup, item); } } }); @@ -103,6 +106,9 @@ export class SeriesNumberHeader extends BaseHeader { if (this.backgroundShape) { this.backgroundShape.translate(position.x, position.y + scrollY); } + if (this.leftBorderShape) { + this.leftBorderShape.translate(position.x, position.y + scrollY); + } } private addBackGround() { @@ -118,23 +124,29 @@ export class SeriesNumberHeader extends BaseHeader { stroke: 'transparent', opacity: rowCellTheme.backgroundColorOpacity, }); + + const { position: borderPosition, style: borderStyle } = + getBorderPositionAndStyle( + CellBorderPosition.LEFT, + { + x: position.x, + y: -position.y, + width, + height, + }, + rowCellTheme, + ); + + this.leftBorderShape = renderLine(this, borderPosition, borderStyle); } - private addBottomBorder(group: IGroup, cellData) { - const { position, width } = this.headerConfig; - const { x, y } = cellData; - group.addShape('line', { - attrs: { - x1: x, - y1: y, - x2: position.x + width, - y2: y, - stroke: - this.headerConfig.spreadsheet.theme.rowCell.cell - .horizontalBorderColor, - lineWidth: 1, - }, - }); + private addBorder(group: IGroup, cellData) { + const cellTheme = this.headerConfig.spreadsheet.theme.rowCell.cell; + + const { position: horizontalPosition, style: horizontalStyle } = + getBorderPositionAndStyle(CellBorderPosition.BOTTOM, cellData, cellTheme); + + renderLine(group as Group, horizontalPosition, horizontalStyle); } private addText(group: IGroup, cellData: ViewMeta) { diff --git a/packages/s2-core/src/theme/palette/default.ts b/packages/s2-core/src/theme/palette/default.ts index 434a0abe00..971c2900b8 100644 --- a/packages/s2-core/src/theme/palette/default.ts +++ b/packages/s2-core/src/theme/palette/default.ts @@ -10,8 +10,8 @@ export const paletteDefault = { '#0000EE', '#326EF4', '#FFFFFF', - '#EBF2FF', - '#D6E3FE', + 'red', + 'red', '#3471F9', '#3471F9', '#282B33', diff --git a/packages/s2-core/src/utils/cell/cell.ts b/packages/s2-core/src/utils/cell/cell.ts index 9d6050ed9d..35dd820376 100644 --- a/packages/s2-core/src/utils/cell/cell.ts +++ b/packages/s2-core/src/utils/cell/cell.ts @@ -2,6 +2,8 @@ import { SimpleBBox } from '@antv/g-canvas'; import { merge } from 'lodash'; import { AreaRange } from './../../common/interface/scroll'; import { + CellBorderPosition, + CellTheme, IconCfg, Padding, TextAlignCfg, @@ -204,3 +206,79 @@ export const getTextAndIconPositionWhenHorizontalScrolling = ( } return position; }; + +export const getBorderPositionAndStyle = ( + position: CellBorderPosition, + contentBox: SimpleBBox, + style: CellTheme, +) => { + const { x, y, width, height } = contentBox; + const { + horizontalBorderWidth, + horizontalBorderColorOpacity, + horizontalBorderColor, + verticalBorderWidth, + verticalBorderColor, + verticalBorderColorOpacity, + } = style; + let x1; + let y1; + let x2; + let y2; + let borderStyle; + + // horizontal + if ( + position === CellBorderPosition.TOP || + position === CellBorderPosition.BOTTOM + ) { + let yPosition = y; + if (position === CellBorderPosition.TOP) { + // 完全绘制在 Cell 内，否则会导致 Border 粗细不一： https://github.com/antvis/S2/issues/426 + yPosition = y + verticalBorderWidth / 2; + } else { + yPosition = y + height - verticalBorderWidth / 2; + } + y1 = yPosition; + y2 = yPosition; + x1 = x; + x2 = x + width; + borderStyle = { + lineWidth: horizontalBorderWidth, + stroke: horizontalBorderColor, + strokeOpacity: horizontalBorderColorOpacity, + }; + } + + // vertical + if ( + position === CellBorderPosition.LEFT || + position === CellBorderPosition.RIGHT + ) { + let xPosition = x; + if (position === CellBorderPosition.LEFT) { + xPosition = x + horizontalBorderWidth / 2; + } else { + xPosition = x + width - horizontalBorderWidth / 2; + } + x1 = xPosition; + x2 = xPosition; + y1 = y; + y2 = y + height; + borderStyle = { + lineWidth: verticalBorderWidth, + stroke: verticalBorderColor, + strokeOpacity: verticalBorderColorOpacity, + }; + } + + return { + position: { + x1, + x2, + y1, + y2, + }, + style: borderStyle, + }; +}; diff --git a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx index cf2281dc91..117e39832b 100644 --- a/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx +++ b/packages/s2-react/__tests__/spreadsheet/table-sheet-spec.tsx @@ -17,6 +17,7 @@ import { getContainer, getMockData, sleep } from '../util/helpers'; import { Switcher } from '@/components/switcher'; import { SwitcherFields } from '@/components/switcher/interface'; import { SheetComponent } from '@/components'; +import '@antv/s2/esm/style.css'; let s2: TableSheet;