From dcf81e63351867d24be123fcafeebe9c563ce78b Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Wed, 25 Oct 2023 11:06:00 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20lint=20=E5=92=8C=20?= =?UTF-8?q?test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__tests__/unit/cell/data-cell-spec.ts | 13 ++-- .../__tests__/unit/cell/row-cell-spec.ts | 2 +- .../base-interaction/hover-spec.ts | 2 + packages/s2-core/__tests__/util/helpers.ts | 25 +------ .../s2-core/src/common/constant/options.ts | 4 +- packages/s2-core/src/facet/header/col.ts | 4 +- packages/s2-core/src/facet/header/corner.ts | 2 +- packages/s2-core/src/facet/header/row.ts | 2 +- .../s2-core/src/facet/header/series-number.ts | 2 +- .../s2-core/src/facet/header/table-col.ts | 2 +- packages/s2-core/src/utils/g-renders.ts | 3 + packages/s2-core/src/utils/text.ts | 1 + .../sheets/strategy-sheet/index-spec.tsx | 6 +- packages/s2-react/__tests__/util/helpers.ts | 67 +------------------ .../sheets/chart-sheet/custom-cell.ts | 2 +- .../strategy-sheet/custom-cell/col-cell.ts | 2 +- .../comparison/demo/measure-comparison.tsx | 47 ++++++------- 17 files changed, 47 insertions(+), 139 deletions(-) diff --git a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts index 4ce4e491e9..9fd54a6490 100644 --- a/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts +++ b/packages/s2-core/__tests__/unit/cell/data-cell-spec.ts @@ -5,13 +5,13 @@ import { createPivotSheet, createTableSheet } from 'tests/util/helpers'; import { DataCell } from '@/cell'; import type { TextAlign } from '@/common'; import { + CellType, GuiIcon, - type Formatter, - type ViewMeta, S2Event, + type Formatter, type OriginalEvent, type S2CellType, - CellType, + type ViewMeta, } from '@/common'; import { EXTRA_FIELD, VALUE_FIELD } from '@/common/constant/basic'; import { @@ -21,7 +21,6 @@ import { import { PivotDataSet } from '@/data-set'; import type { PivotFacet } from '@/facet'; import { PivotSheet, SpreadSheet } from '@/sheet-type'; -import { renderText } from '@/utils/g-renders'; const MockPivotSheet = PivotSheet as unknown as jest.Mock; const MockPivotDataSet = PivotDataSet as unknown as jest.Mock; @@ -89,7 +88,7 @@ describe('Data Cell Tests', () => { const linkLength = maxX - minX; expect( - Math.abs(linkLength - get(dataCell, 'actualTextWidth')), + Math.abs(linkLength - dataCell.getActualTextWidth()), ).toBeLessThanOrEqual(2); // link shape 的中点坐标与 text 中点对齐 @@ -189,9 +188,8 @@ describe('Data Cell Tests', () => { test('should add text shape', () => { const dataCell = new DataCell(meta, s2); - const textShape = renderText(dataCell, [], { x: 0, y: 0, text: 'test' }); - dataCell.addTextShape(textShape); + dataCell.renderTextShape({ x: 0, y: 0, text: 'test' }); expect(dataCell.getTextShapes()).toHaveLength(2); }); @@ -209,6 +207,7 @@ describe('Data Cell Tests', () => { expect(dataCell.getConditionIconShapes()).toBeEmpty(); }); }); + describe('Condition by formattedValue Tests', () => { const s2 = createPivotSheet( { diff --git a/packages/s2-core/__tests__/unit/cell/row-cell-spec.ts b/packages/s2-core/__tests__/unit/cell/row-cell-spec.ts index 909d46f460..c53885a731 100644 --- a/packages/s2-core/__tests__/unit/cell/row-cell-spec.ts +++ b/packages/s2-core/__tests__/unit/cell/row-cell-spec.ts @@ -43,7 +43,7 @@ describe('Row Cell Tests', () => { const linkLength = maxX - minX; expect( - Math.abs(linkLength - get(provinceCell, 'actualTextWidth')), + Math.abs(linkLength - provinceCell.getActualTextWidth()), ).toBeLessThanOrEqual(2); // link shape 的中点坐标与 text 中点对齐 diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/hover-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/hover-spec.ts index c717c610cf..c52261f658 100644 --- a/packages/s2-core/__tests__/unit/interaction/base-interaction/hover-spec.ts +++ b/packages/s2-core/__tests__/unit/interaction/base-interaction/hover-spec.ts @@ -47,6 +47,7 @@ describe('Interaction Hover Tests', () => { return mockCell; }, + isTextOverflowing: jest.fn(), getActualText: () => ELLIPSIS_SYMBOL, getFieldValue: () => '', cellType: 'dataCell', @@ -306,6 +307,7 @@ describe('Interaction Hover Tests', () => { }, getActualText: () => 'test', getFieldValue: () => 'test', + isTextOverflowing: jest.fn(), cellType: 'dataCell', } as any); diff --git a/packages/s2-core/__tests__/util/helpers.ts b/packages/s2-core/__tests__/util/helpers.ts index 5ee5a62a96..c89a7bf362 100644 --- a/packages/s2-core/__tests__/util/helpers.ts +++ b/packages/s2-core/__tests__/util/helpers.ts @@ -154,30 +154,6 @@ export const createFakeSpreadSheet = () => { return s2; }; -// 可借助 tiny gradient 完成功能更全面的颜色过渡 -export function getGradient( - rate: number, - startColor: string, - endColor: string, -) { - function toGgb(color: string) { - color = color.slice(1); - const r = parseInt(color.substring(0, 2), 16); - const g = parseInt(color.substring(2, 4), 16); - const b = parseInt(color.substring(4, 6), 16); - - return [r, g, b]; - } - - const start = toGgb(startColor); - const end = toGgb(endColor); - const r = start[0] + (end[0] - start[0]) * rate; - const g = start[1] + (end[1] - start[1]) * rate; - const b = start[2] + (end[2] - start[2]) * rate; - - return `rgb(${r},${g},${b})`; -} - export const createMockCellInfo = ( cellId: string, { colIndex = 0, rowIndex = 0, colId = '0', level = 0 } = {}, @@ -227,6 +203,7 @@ export const createMockCellInfo = ( getFieldValue: jest.fn(), hideInteractionShape: jest.fn(), updateByState: jest.fn(), + isTextOverflowing: jest.fn(), } as unknown as S2CellType; const getNode = () => mockCellViewMeta as unknown as Node; diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts index 72e29568cc..12729124ca 100644 --- a/packages/s2-core/src/common/constant/options.ts +++ b/packages/s2-core/src/common/constant/options.ts @@ -23,20 +23,18 @@ export const DEFAULT_TREE_ROW_CELL_WIDTH = 120; export const DEFAULT_STYLE: S2Style = { layoutWidthType: LayoutWidthTypes.Adaptive, rowCell: { - width: 120, + // width: 120, showTreeLeafNodeAlignDot: false, widthByField: null, heightByField: null, }, colCell: { - // height: 30, height: 40, widthByField: null, heightByField: null, }, dataCell: { width: 96, - // height: 30, height: 40, }, } as const; diff --git a/packages/s2-core/src/facet/header/col.ts b/packages/s2-core/src/facet/header/col.ts index 10cf6906b9..a5cd58ff2c 100644 --- a/packages/s2-core/src/facet/header/col.ts +++ b/packages/s2-core/src/facet/header/col.ts @@ -26,8 +26,8 @@ export class ColHeader extends BaseHeader { } protected getCellInstance(node: Node): S2CellType { - const { spreadsheet } = node; - const { colCell } = node.spreadsheet.options; + const { spreadsheet } = this.headerConfig; + const { colCell } = spreadsheet.options; return ( colCell?.(node, spreadsheet, this.headerConfig) || diff --git a/packages/s2-core/src/facet/header/corner.ts b/packages/s2-core/src/facet/header/corner.ts index 1b46ccccbc..673c6b8477 100644 --- a/packages/s2-core/src/facet/header/corner.ts +++ b/packages/s2-core/src/facet/header/corner.ts @@ -23,7 +23,7 @@ export class CornerHeader extends BaseHeader { } protected getCellInstance(node: Node): S2CellType { - const { spreadsheet } = node; + const { spreadsheet } = this.headerConfig; const { cornerCell } = spreadsheet.options; return ( diff --git a/packages/s2-core/src/facet/header/row.ts b/packages/s2-core/src/facet/header/row.ts index 9faf034034..c7fa1c3035 100644 --- a/packages/s2-core/src/facet/header/row.ts +++ b/packages/s2-core/src/facet/header/row.ts @@ -16,7 +16,7 @@ export class RowHeader extends BaseHeader { } protected getCellInstance(node: Node): S2CellType { - const { spreadsheet } = node; + const { spreadsheet } = this.headerConfig; const { rowCell } = spreadsheet.options; return ( diff --git a/packages/s2-core/src/facet/header/series-number.ts b/packages/s2-core/src/facet/header/series-number.ts index 634075cf81..b6675e8bcb 100644 --- a/packages/s2-core/src/facet/header/series-number.ts +++ b/packages/s2-core/src/facet/header/series-number.ts @@ -17,7 +17,7 @@ export class SeriesNumberHeader extends BaseHeader { } protected getCellInstance(node: Node): S2CellType { - const { spreadsheet } = node; + const { spreadsheet } = this.headerConfig; const { seriesNumberCell } = spreadsheet.options; return ( diff --git a/packages/s2-core/src/facet/header/table-col.ts b/packages/s2-core/src/facet/header/table-col.ts index 337a7a0dff..96b2ce7511 100644 --- a/packages/s2-core/src/facet/header/table-col.ts +++ b/packages/s2-core/src/facet/header/table-col.ts @@ -35,7 +35,7 @@ export class TableColHeader extends ColHeader { } protected getCellInstance(node: Node) { - const { spreadsheet } = node; + const { spreadsheet } = this.headerConfig; const { seriesNumberCell, colCell } = spreadsheet.options; const args: [Node, SpreadSheet, ColHeaderConfig] = [ diff --git a/packages/s2-core/src/utils/g-renders.ts b/packages/s2-core/src/utils/g-renders.ts index 3aa4259825..a97f9b3189 100644 --- a/packages/s2-core/src/utils/g-renders.ts +++ b/packages/s2-core/src/utils/g-renders.ts @@ -52,6 +52,9 @@ export function renderCircle(group: Group, style: CircleStyleProps): Circle { ); } +/** + * @description 如果在单元格内绘制, 是使用 cell.renderTextShape(options) + */ export function renderText(options: { group: Group; textShape?: DisplayObject; diff --git a/packages/s2-core/src/utils/text.ts b/packages/s2-core/src/utils/text.ts index 96c174699f..48e7c4f1c6 100644 --- a/packages/s2-core/src/utils/text.ts +++ b/packages/s2-core/src/utils/text.ts @@ -553,6 +553,7 @@ export const drawObjectText = ( contentBoxes[i][j], curStyle!.textBaseline!, ); + const iconY = getVerticalIconPosition( iconStyle.size!, textY, diff --git a/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx index 3db8430948..320699477f 100644 --- a/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx +++ b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx @@ -383,7 +383,7 @@ describe(' Tests', () => { const fn = jest.fn(); class CustomRowCell extends RowCell { - protected drawTextShape() { + public drawTextShape() { fn(); return super.drawTextShape(); @@ -405,7 +405,7 @@ describe(' Tests', () => { const fn = jest.fn(); class CustomColCell extends StrategySheetColCell { - protected drawTextShape() { + public drawTextShape() { fn(); return super.drawTextShape(); @@ -427,7 +427,7 @@ describe(' Tests', () => { const fn = jest.fn(); class CustomDataCell extends StrategySheetDataCell { - protected drawTextShape() { + public drawTextShape() { fn(); return super.drawTextShape(); diff --git a/packages/s2-react/__tests__/util/helpers.ts b/packages/s2-react/__tests__/util/helpers.ts index 7123e5a1a0..218256f080 100644 --- a/packages/s2-react/__tests__/util/helpers.ts +++ b/packages/s2-react/__tests__/util/helpers.ts @@ -1,20 +1,8 @@ /* eslint-disable import/no-extraneous-dependencies */ import fs from 'fs'; import path from 'path'; +import { PivotSheet, SpreadSheet, type ViewMeta } from '@antv/s2'; import { dsvFormat } from 'd3-dsv'; -import EE from '@antv/event-emitter'; -import type { Canvas } from '@antv/g'; -import { - Store, - type S2Options, - SpreadSheet, - PivotSheet, - BaseTooltip, - customMerge, - DEFAULT_OPTIONS, - RootInteraction, - type ViewMeta, -} from '@antv/s2'; import { omit } from 'lodash'; export const parseCSV = (csv: string, header?: string[]) => { @@ -47,59 +35,6 @@ export const sleep = async (timeout = 0) => { }); }; -export const createFakeSpreadSheet = () => { - class FakeSpreadSheet extends EE { - public options: S2Options; - - public setOptions(options: S2Options) { - this.options = customMerge(this.options, options); - } - } - - const s2 = new FakeSpreadSheet() as unknown as SpreadSheet; - - s2.options = DEFAULT_OPTIONS; - const interaction = new RootInteraction(s2 as unknown as SpreadSheet); - - s2.store = new Store(); - s2.interaction = interaction; - s2.tooltip = { - container: {} as HTMLElement, - } as BaseTooltip; - s2.container = { - draw: jest.fn(), - } as unknown as Canvas; - s2.getCellType = jest.fn(); - s2.render = jest.fn(); - s2.hideTooltip = jest.fn(); - s2.showTooltipWithInfo = jest.fn(); - s2.isTableMode = jest.fn(); - - return s2; -}; -// 可借助 tinygradient 完成功能更全面的颜色过渡 -export function getGradient( - rate: number, - startColor: string, - endColor: string, -) { - function toGgb(color: string) { - color = color.slice(1); - const r = parseInt(color.substring(0, 2), 16); - const g = parseInt(color.substring(2, 4), 16); - const b = parseInt(color.substring(4, 6), 16); - - return [r, g, b]; - } - const start = toGgb(startColor); - const end = toGgb(endColor); - const r = start[0] + (end[0] - start[0]) * rate; - const g = start[1] + (end[1] - start[1]) * rate; - const b = start[2] + (end[2] - start[2]) * rate; - - return `rgb(${r},${g},${b})`; -} - export function getMockSheetInstance(Sheet: typeof SpreadSheet = PivotSheet) { const instance = Object.create(Sheet.prototype); diff --git a/packages/s2-react/src/components/sheets/chart-sheet/custom-cell.ts b/packages/s2-react/src/components/sheets/chart-sheet/custom-cell.ts index 40344ba9c6..04ff83ccfa 100644 --- a/packages/s2-react/src/components/sheets/chart-sheet/custom-cell.ts +++ b/packages/s2-react/src/components/sheets/chart-sheet/custom-cell.ts @@ -1,7 +1,7 @@ import { DataCell } from '@antv/s2'; export class CustomCell extends DataCell { - protected drawTextShape() { + public drawTextShape() { // TODO 暂时留下个扩展位，不知道后面会有什么需求 return null; } diff --git a/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts b/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts index 38791b375f..09c3a5ae81 100644 --- a/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts +++ b/packages/s2-react/src/components/sheets/strategy-sheet/custom-cell/col-cell.ts @@ -25,7 +25,7 @@ export class StrategySheetColCell extends ColCell { super(meta, spreadsheet, headerConfig); } - protected drawTextShape() { + public drawTextShape() { const meta = this.getMeta(); const value = safeJsonParse(meta?.value) as MultiData; diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx index 4f0177dfac..eae238e3ed 100644 --- a/s2-site/examples/case/comparison/demo/measure-comparison.tsx +++ b/s2-site/examples/case/comparison/demo/measure-comparison.tsx @@ -203,34 +203,27 @@ class CustomDataCell extends DataCell { this.meta.colId?.includes(`root${ID_SEPARATOR}${item}${ID_SEPARATOR}`), ); - if (tagName) { - const { getCustomFormattedValue, getCustomTextStyle } = - this.textConfig[tagName] || {}; - const { formattedValue: defaultFormattedValue } = - this.getFormattedFieldValue(); - let formattedValue = defaultFormattedValue; - - if (getCustomFormattedValue) { - formattedValue = getCustomFormattedValue(fieldValue); - } - - const textStyle = this.getTextStyle(); - - this.actualTextWidth = measureTextWidth(formattedValue, textStyle); - const position = this.getTextPosition(); - - this.textShape = this.addShape('text', { - attrs: { - x: position.x, - y: position.y, - text: formattedValue, - ...textStyle, - ...(getCustomTextStyle(fieldValue, textStyle) || {}), - }, - }); - } else { - super.drawTextShape(); + if (!tagName) { + return super.drawTextShape(); } + + const { getCustomFormattedValue, getCustomTextStyle } = + this.textConfig[tagName] || {}; + const { formattedValue: defaultFormattedValue } = + this.getFormattedFieldValue(); + + const formattedValue = + getCustomFormattedValue?.(fieldValue) ?? defaultFormattedValue; + const textStyle = this.getTextStyle(); + const position = this.getTextPosition(); + + this.renderTextShape({ + x: position.x, + y: position.y, + text: formattedValue, + ...textStyle, + ...(getCustomTextStyle(fieldValue, textStyle) || {}), + }); } drawLeftBorder() {