fix: 修复存在字段标记的 icon 时, 紧凑模式列宽计算错误出现省略号的问题 (#2920)

antvis · Oct 12, 2024 · 75acbfe · 75acbfe
1 parent 3f766d0
commit 75acbfe
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 47 deletions.
diff --git a/...s2-core/__tests__/bugs/issue-2385-spec.ts → ...ests__/spreadsheet/compare-layout-spec.ts b/...s2-core/__tests__/bugs/issue-2385-spec.ts → ...ests__/spreadsheet/compare-layout-spec.ts
@@ -99,7 +99,7 @@ describe('Compare Layout Tests', () => {
     expect(colLeafNodeWidthList).toEqual([182]);
   });
 
-  test.skip.each([
+  test.each([
     { showDefaultHeaderActionIcon: true },
     { showDefaultHeaderActionIcon: false },
   ])(
@@ -137,11 +137,11 @@ describe('Compare Layout Tests', () => {
 
       expect(dataCellWidthList).toEqual(
         options.showDefaultHeaderActionIcon
-          ? [197, 197, 197, 197, 116, 116, 116, 116, 81, 81, 81, 81]
-          : [197, 197, 197, 197, 116, 116, 116, 116, 62, 62, 62, 62],
+          ? [207, 207, 207, 207, 108, 108, 108, 108, 83, 83, 83, 83]
+          : [207, 207, 207, 207, 108, 108, 108, 108, 67, 67, 67, 67],
       );
       expect(colLeafNodeWidthList).toEqual(
-        options.showDefaultHeaderActionIcon ? [197, 116, 81] : [197, 116, 62],
+        options.showDefaultHeaderActionIcon ? [207, 108, 83] : [207, 108, 67],
       );
     },
   );

diff --git a/packages/s2-core/src/cell/data-cell.ts b/packages/s2-core/src/cell/data-cell.ts
@@ -1,7 +1,6 @@
 import type { PointLike } from '@antv/g';
 import {
   find,
-  findLast,
   first,
   get,
   isEmpty,
@@ -48,7 +47,10 @@ import {
   updateBySelectedCellsHighlight,
 } from '../utils/cell/data-cell';
 import { groupIconsByPosition } from '../utils/cell/header-cell';
-import { getIconPosition } from '../utils/condition/condition';
+import {
+  findFieldCondition,
+  getIconPosition,
+} from '../utils/condition/condition';
 import { drawInterval } from '../utils/g-mini-charts';
 import { updateShapeAttr } from '../utils/g-renders';
 import type { RawData } from './../common/interface/s2DataConfig';
@@ -491,14 +493,10 @@ export class DataCell extends BaseCell<ViewMeta> {
    * Find current field related condition
    * @param conditions
    */
-  public findFieldCondition<Con extends Condition>(
-    conditions: Con[] = [],
-  ): Con | undefined {
-    return findLast(conditions, (item) =>
-      item.field instanceof RegExp
-        ? item.field.test(this.meta.valueField)
-        : item.field === this.meta.valueField,
-    );
+  public findFieldCondition<T extends Condition>(
+    conditions: T[] = [],
+  ): T | undefined {
+    return findFieldCondition(conditions, this.meta.valueField);
   }
 
   /**

diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
@@ -5,7 +5,6 @@ import type {
 } from '@antv/g';
 import {
   find,
-  findLast,
   first,
   forEach,
   get,
@@ -42,6 +41,7 @@ import {
   getActionIconConfig,
   groupIconsByPosition,
 } from '../utils/cell/header-cell';
+import { findFieldCondition } from '../utils/condition/condition';
 import { renderIcon } from '../utils/g-renders';
 import { getSortTypeIcon } from '../utils/sort-action';
 
@@ -502,14 +502,10 @@ export abstract class HeaderCell<
     return condition.mapping(value, this.meta, this);
   }
 
-  public findFieldCondition<Con extends Condition>(
-    conditions: Con[] = [],
-  ): Con | undefined {
-    return findLast(conditions, (item) =>
-      item.field instanceof RegExp
-        ? item.field.test(this.meta.field)
-        : item.field === this.meta.field,
-    );
+  public findFieldCondition<T extends Condition>(
+    conditions: T[] = [],
+  ): T | undefined {
+    return findFieldCondition(conditions, this.meta.field);
   }
 
   public getTreeIcon() {

diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
@@ -31,10 +31,12 @@ import type {
   LayoutResult,
   SimpleData,
 } from '../common/interface';
+import type { Query } from '../data-set/interface';
 import type { PivotDataSet } from '../data-set/pivot-data-set';
 import { getValidFrozenOptionsForPivot, safeJsonParse } from '../utils';
 import { getDataCellId } from '../utils/cell/data-cell';
 import { getActionIconConfig } from '../utils/cell/header-cell';
+import { findFieldCondition } from '../utils/condition/condition';
 import { getHeaderTotalStatus } from '../utils/dataset/pivot-data-set';
 import { getIndexRangeWithOffsets } from '../utils/facet';
 import { getAllChildCells } from '../utils/get-all-child-cells';
@@ -101,6 +103,30 @@ export class PivotFacet extends FrozenFacet {
     };
   }
 
+  private getDataQueryInfo(rowQuery: Query, colQuery: Query) {
+    const { options, dataSet } = this.spreadsheet;
+    const hideMeasure = options.style?.colCell?.hideValue ?? false;
+
+    /**
+     * 如果在非自定义目录情况下hide measure query中是没有度量信息的，所以需要自动补上
+     * 存在一个场景的冲突，如果是多个度量，定位数据数据是无法知道哪一列代表什么
+     * 因此默认只会去 第一个度量拼接query
+     */
+    const measureInfo = hideMeasure
+      ? {
+          [EXTRA_FIELD]: dataSet.fields.values?.[0],
+        }
+      : {};
+
+    const dataQuery = merge({}, rowQuery, colQuery, measureInfo) as Query;
+    const valueField = dataQuery[EXTRA_FIELD]!;
+
+    return {
+      dataQuery,
+      valueField,
+    };
+  }
+
   /**
    * 根据行列索引获取单元格元数据
    */
@@ -120,27 +146,17 @@ export class PivotFacet extends FrozenFacet {
       row.isTotals || row.isTotalMeasure || col.isTotals || col.isTotalMeasure;
 
     const totalStatus = getHeaderTotalStatus(row, col);
-    const hideMeasure = options.style?.colCell?.hideValue ?? false;
-
-    /*
-     * 如果在非自定义目录情况下hide measure query中是没有度量信息的，所以需要自动补上
-     * 存在一个场景的冲突，如果是多个度量，定位数据数据是无法知道哪一列代表什么
-     * 因此默认只会去 第一个度量拼接query
-     */
-    const measureInfo = hideMeasure
-      ? {
-          [EXTRA_FIELD]: dataSet.fields.values?.[0],
-        }
-      : {};
-    const dataQuery = merge({}, rowQuery, colQuery, measureInfo);
+    const { dataQuery, valueField } = this.getDataQueryInfo(
+      rowQuery!,
+      colQuery!,
+    );
     const data = dataSet.getCellData({
       query: dataQuery,
       rowNode: row,
       isTotals,
       totalStatus,
     });
 
-    const valueField = dataQuery[EXTRA_FIELD]!;
     const fieldValue = get(data, VALUE_FIELD, null);
 
     const cellMeta: ViewMeta = {
@@ -887,7 +903,8 @@ export class PivotFacet extends FrozenFacet {
       cell: colCellStyle,
       icon: colIconStyle,
     } = this.spreadsheet.theme.colCell!;
-    const { text: dataCellTextStyle } = this.spreadsheet.theme.dataCell;
+    const { text: dataCellTextStyle, icon: dataCellIconStyle } =
+      this.spreadsheet.theme.dataCell;
 
     // leaf node width
     const cellFormatter = this.spreadsheet.dataSet.getFieldFormatter(
@@ -907,6 +924,7 @@ export class PivotFacet extends FrozenFacet {
     // 采样 50 个 label，逐个计算找出最长的 label
     let maxDataLabel = '';
     let maxDataLabelWidth = 0;
+    let iconWidthOfMaxDataLabel = 0;
 
     for (let index = 0; index < LAYOUT_SAMPLE_COUNT; index++) {
       const rowNode = rowLeafNodes[index];
@@ -932,6 +950,20 @@ export class PivotFacet extends FrozenFacet {
               valueData,
             ) ?? valueData;
           const cellLabel = formattedValue;
+          // 考虑字段标记 icon 的宽度: https://github.com/antvis/S2/pull/2673
+          const { valueField } = this.getDataQueryInfo(
+            rowNode.query!,
+            colNode.query!,
+          );
+          const hasIcon = findFieldCondition(
+            this.spreadsheet.options.conditions?.icon,
+            valueField!,
+          );
+          const dataCellIconWidth = hasIcon
+            ? dataCellIconStyle?.size +
+              dataCellIconStyle?.margin?.left +
+              dataCellIconStyle?.margin?.right
+            : 0;
           const cellLabelWidth = this.spreadsheet.measureTextWidth(
             cellLabel as string,
             dataCellTextStyle,
@@ -940,24 +972,27 @@ export class PivotFacet extends FrozenFacet {
           if (cellLabelWidth > maxDataLabelWidth) {
             maxDataLabel = cellLabel as string;
             maxDataLabelWidth = cellLabelWidth;
+            iconWidthOfMaxDataLabel = dataCellIconWidth;
           }
         }
       }
     }
 
-    // compare result
     const isLeafNodeWidthLonger = leafNodeWidth > maxDataLabelWidth;
     const maxLabel = isLeafNodeWidthLonger ? leafNodeLabel : maxDataLabel;
-    const appendedWidth = isLeafNodeWidthLonger ? colIconWidth : 0;
+    const appendedWidth = isLeafNodeWidthLonger
+      ? colIconWidth
+      : iconWidthOfMaxDataLabel;
 
     DebuggerUtil.getInstance().logger(
       'Max Label In Col:',
       colNode.field,
       maxLabel,
       maxDataLabelWidth,
+      iconWidthOfMaxDataLabel,
     );
 
-    // 取列头/数值字体最大的文本宽度 https://github.com/antvis/S2/issues/2385
+    // 取列头/数值字体最大的文本宽度: https://github.com/antvis/S2/issues/2385
     const maxTextWidth = this.spreadsheet.measureTextWidth(maxLabel, {
       ...colCellTextStyle,
       fontSize: Math.max(dataCellTextStyle.fontSize, colCellTextStyle.fontSize),

diff --git a/packages/s2-core/src/utils/condition/condition.ts b/packages/s2-core/src/utils/condition/condition.ts
@@ -56,13 +56,13 @@ export const getIntervalScale = (minValue = 0, maxValue = 0) => {
   };
 };
 
-export const findFieldCondition = <T>(
-  conditions: Condition<T>[],
-  valueField: string,
-) => {
+export const findFieldCondition = <T extends Condition>(
+  conditions: T[] = [],
+  field: string,
+): T | undefined => {
   return findLast(conditions, (item) => {
     return item.field instanceof RegExp
-      ? item.field.test(valueField)
-      : item.field === valueField;
+      ? item.field.test(field)
+      : item.field === field;
   });
 };