diff --git a/packages/s2-core/__tests__/data/data-issue-2385.json b/packages/s2-core/__tests__/data/data-issue-2385.json index 25429692be..4a8cb753b3 100644 --- a/packages/s2-core/__tests__/data/data-issue-2385.json +++ b/packages/s2-core/__tests__/data/data-issue-2385.json @@ -11,7 +11,7 @@ "province": "浙江", "city": "杭州", "type": "纸张", - "price": "哈哈哈\n哈哈哈", + "price": "哈哈哈", "cost": "1.5" }, { diff --git a/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts b/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts index 5e02981bb9..7980c50b89 100644 --- a/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts +++ b/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts @@ -55,13 +55,15 @@ describe('Compare Layout Tests', () => { const colLeafNodes = s2.facet.getColLeafNodes(); - expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(122); - expect(Math.floor(colLeafNodes[1].width)).toEqual(95); + expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(133); + expect(Math.floor(colLeafNodes[1].width)).toEqual( + options.showDefaultHeaderActionIcon ? 71 : 66, + ); expectTextOverflowing(s2); }, ); - // 覆盖 (数值/中文/英文) 三种场景 + // 覆盖 (数值/中文) 等场景 test.each([ { showDefaultHeaderActionIcon: true, fontSize: 20 }, { showDefaultHeaderActionIcon: true, fontSize: 12 }, @@ -82,14 +84,15 @@ describe('Compare Layout Tests', () => { }); await s2.render(); + const expectWidth = options.showDefaultHeaderActionIcon ? 71 : 66; const isLargeFontSize = options.fontSize === 20; const colLeafNodes = s2.facet.getColLeafNodes(); expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo( - isLargeFontSize ? 191 : 122, + isLargeFontSize ? 209 : 133, ); expect(Math.floor(colLeafNodes[1].width)).toEqual( - isLargeFontSize ? 145 : 95, + isLargeFontSize ? 97 : expectWidth, ); expectTextOverflowing(s2); }); @@ -120,7 +123,7 @@ describe('Compare Layout Tests', () => { const colLeafNodes = s2.facet.getColLeafNodes(); const { dataCellWidthList, colLeafNodeWidthList } = mapWidthList(s2); - const expectWidth = 183; + const expectWidth = 207; expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(expectWidth); expect( @@ -168,11 +171,11 @@ describe('Compare Layout Tests', () => { expect(dataCellWidthList).toEqual( options.showDefaultHeaderActionIcon - ? [209, 209, 209, 209, 163, 163, 163, 163, 85, 85, 85, 85] - : [209, 209, 209, 209, 163, 163, 163, 163, 69, 69, 69, 69], + ? [227, 227, 227, 227, 115, 115, 115, 115, 93, 93, 93, 93] + : [227, 227, 227, 227, 115, 115, 115, 115, 71, 71, 71, 71], ); expect(colLeafNodeWidthList).toEqual( - options.showDefaultHeaderActionIcon ? [209, 163, 85] : [209, 163, 69], + options.showDefaultHeaderActionIcon ? [227, 115, 93] : [227, 115, 71], ); expectTextOverflowing(s2); }, diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts index 3730fbd036..044d7c0946 100644 --- a/packages/s2-core/src/facet/base-facet.ts +++ b/packages/s2-core/src/facet/base-facet.ts @@ -2294,12 +2294,25 @@ export abstract class BaseFacet { /** * @tip 和 this.spreadsheet.measureTextWidth() 的区别在于: * 1. 额外添加一像素余量，防止 maxLabel 有多个同样长度情况下，一些 label 不能展示完全, 出现省略号 - * 2. 测量时, 文本宽度向上取整, 避免子像素的不一致性 + * 2. 测量时, 文本宽度取整, 避免子像素的不一致性 + * 3. TODO: 由于 G 测量文本是一个一个字符进行计算, 在数字/英文等场景会有较大误差, 这里为了防止紧凑模式出现省略号, 暂时保持一样的策略 */ - protected measureTextWidth(text: SimpleData, font: unknown): number { + protected measureTextWidth( + text: SimpleData, + font: unknown, + roughly = true, + ): number { const EXTRA_PIXEL = 1; - const defaultWidth = this.spreadsheet.measureTextWidth(text, font); - return Math.ceil(defaultWidth) + EXTRA_PIXEL; + if (roughly) { + return ( + Math.ceil(this.spreadsheet.measureTextWidthRoughly(text, font)) + + EXTRA_PIXEL + ); + } + + return ( + Math.ceil(this.spreadsheet.measureTextWidth(text, font)) + EXTRA_PIXEL + ); } } diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts index f9d169dc68..1960a57af9 100644 --- a/packages/s2-core/src/facet/pivot-facet.ts +++ b/packages/s2-core/src/facet/pivot-facet.ts @@ -806,7 +806,7 @@ export class PivotFacet extends FrozenFacet { * 额外增加 1，当内容和容器宽度恰好相等时会出现换行 */ const maxLabelWidth = - this.measureTextWidth(treeHeaderLabel, cornerCellTextStyle) + + this.measureTextWidth(treeHeaderLabel, cornerCellTextStyle, false) + cornerIconStyle.size * 2 + cornerIconStyle.margin?.left + cornerIconStyle.margin?.right + diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts index 4fb47a3c61..d62c326d5a 100644 --- a/packages/s2-core/src/facet/table-facet.ts +++ b/packages/s2-core/src/facet/table-facet.ts @@ -117,7 +117,7 @@ export class TableFacet extends FrozenFacet { const iconX = viewportWidth / 2 - icon.width / 2; const iconY = height / 2 + maxY - icon.height / 2 + icon.margin.top; const text = empty?.description ?? i18n('暂无数据'); - const descWidth = this.measureTextWidth(text, description); + const descWidth = this.measureTextWidth(text, description, false); const descX = viewportWidth / 2 - descWidth / 2; const descY = iconY + icon.height + icon.margin.bottom; diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts index b1991c8938..bd25959d66 100644 --- a/packages/s2-core/src/sheet-type/spread-sheet.ts +++ b/packages/s2-core/src/sheet-type/spread-sheet.ts @@ -817,7 +817,10 @@ export abstract class SpreadSheet extends EE { * @param font 文本 css 样式 * @returns 文本宽度 */ - public measureTextWidthRoughly = (text: any, font: any = {}): number => { + public measureTextWidthRoughly = ( + text: SimpleData, + font: unknown, + ): number => { const alphaWidth = this.measureTextWidth('a', font); const chineseWidth = this.measureTextWidth('蚂', font); @@ -828,7 +831,7 @@ export abstract class SpreadSheet extends EE { } // eslint-disable-next-line no-restricted-syntax - for (const char of text) { + for (const char of String(text)) { const code = char.charCodeAt(0); // /[\u0000-\u00ff]/