fix: 修复树状角头，当有存在icon时，内容与box宽度恰好相等，出现换行 close #2389 (#2390)

* fix: 树状角头，当有两个icon时，内容与box宽度恰好相等，出现换行 * fix: 树状角头，当有两个icon时，内容与box宽度恰好相等，出现换行 close:2389 * fix: 树状角头，当有两个icon时，内容与box宽度恰好相等，出现换行 close:2389 * chore: 增加注释 --------- Co-authored-by: JuZe <[email protected]>
antvis · Oct 27, 2023 · 19497b3 · 19497b3 · vercel · Oct 27, 2023
1 parent 2443762
commit 19497b3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 10 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
@@ -188,7 +188,7 @@ Array [
     "rowIndex": undefined,
     "seriesNumberWidth": 0,
     "value": "province/city/数值",
-    "width": 150,
+    "width": 151,
     "x": 0,
     "y": 0,
   },
@@ -253,7 +253,7 @@ Array [
     "rowIndex": undefined,
     "seriesNumberWidth": 80,
     "value": "province/city/数值",
-    "width": 150,
+    "width": 151,
     "x": 80,
     "y": 0,
   },
@@ -448,7 +448,7 @@ Array [
     "rowIndex": undefined,
     "seriesNumberWidth": 0,
     "value": "province/city",
-    "width": 122,
+    "width": 123,
     "x": 0,
     "y": 0,
   },
@@ -513,7 +513,7 @@ Array [
     "rowIndex": undefined,
     "seriesNumberWidth": 80,
     "value": "province/city",
-    "width": 122,
+    "width": 123,
     "x": 80,
     "y": 0,
   },
@@ -708,7 +708,7 @@ Array [
     "rowIndex": undefined,
     "seriesNumberWidth": 0,
     "value": "province/city",
-    "width": 122,
+    "width": 123,
     "x": 0,
     "y": 0,
   },
@@ -773,7 +773,7 @@ Array [
     "rowIndex": undefined,
     "seriesNumberWidth": 80,
     "value": "province/city",
-    "width": 122,
+    "width": 123,
     "x": 80,
     "y": 0,
   },

diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-tree-mode-spec.ts b/packages/s2-core/__tests__/spreadsheet/spread-sheet-tree-mode-spec.ts
@@ -26,7 +26,7 @@ describe('SpreadSheet Tree Mode Tests', () => {
       s2.render();
 
       const rowsHierarchyWidth = s2.facet.layoutResult.rowsHierarchy.width;
-      expect(Math.round(rowsHierarchyWidth)).toEqual(123);
+      expect(Math.round(rowsHierarchyWidth)).toEqual(124);
 
       // 行头维度均更改为较长的 name
       const newDataCfg: S2DataConfig = {
@@ -49,5 +49,39 @@ describe('SpreadSheet Tree Mode Tests', () => {
         rowsHierarchyWidth,
       );
     });
+
+    // https://github.com/antvis/S2/issues/2389
+    test('the corner should only have one line with action icon', () => {
+      // 行头维度更改为较长的 name
+      const newDataCfg: S2DataConfig = {
+        ...mockDataConfig,
+        meta: [
+          {
+            field: 'province',
+            name: '省1234567890份',
+          },
+          {
+            field: 'city',
+            name: '城1234567890市',
+          },
+        ],
+      };
+      // 添加icon
+      const newS2Options: S2Options = {
+        ...s2Options,
+        headerActionIcons: [
+          {
+            iconNames: ['SortDownSelected'],
+            belongsCell: 'cornerCell',
+          },
+        ],
+      };
+      const s2 = new PivotSheet(container, newDataCfg, newS2Options);
+      s2.render();
+
+      // 检查文本是否只有一行
+      const textLen = s2.facet.cornerHeader.cfg.children[0].textShapes.length;
+      expect(textLen).toEqual(1);
+    });
   });
 });
diff --git a/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts b/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts
@@ -53,7 +53,7 @@ describe('Col width Test', () => {
       });
       s2.render();
       const { colLeafNodes } = s2.facet.layoutResult;
-      expect(Math.round(colLeafNodes[0].width)).toBe(339);
+      expect(Math.round(colLeafNodes[0].width)).toBe(338);
     });
 
     test('get correct width in layoutWidthType adaptive tree mode when enable seriesnumber', () => {
@@ -63,7 +63,7 @@ describe('Col width Test', () => {
       });
       s2.render();
       const { colLeafNodes } = s2.facet.layoutResult;
-      expect(Math.round(colLeafNodes[0].width)).toBe(299);
+      expect(Math.round(colLeafNodes[0].width)).toBe(298);
     });
 
     test('get correct width in layoutWidthType compact mode', () => {

diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
@@ -745,8 +745,11 @@ export class PivotFacet extends BaseFacet {
       .join('/');
     const { bolderText: cornerCellTextStyle, icon: cornerIconStyle } =
       this.spreadsheet.theme.cornerCell;
-    // 初始化角头时，保证其在树形模式下不换行，给与两个icon的宽度空余（tree icon 和 action icon），减少复杂的 action icon 判断
+    // 初始化角头时，保证其在树形模式下不换行
+    // 给与两个icon的宽度空余（tree icon 和 action icon），减少复杂的 action icon 判断
+    // 额外增加 1，当内容和容器宽度恰好相等时会出现换行
     const maxLabelWidth =
+      1 +
       this.spreadsheet.measureTextWidth(treeHeaderLabel, cornerCellTextStyle) +
       cornerIconStyle.size * 2 +
       cornerIconStyle.margin?.left +