Merge remote-tracking branch 'origin/next' into fix-3014

antvis · Jan 3, 2025 · a177d1a · a177d1a
2 parents db2feaa + e2ab646
commit a177d1a
Show file tree

Hide file tree

Showing 11 changed files with 10,105 additions and 6,491 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
@@ -702,6 +702,57 @@ describe('SpreadSheet Multi Line Text Tests', () => {
       matchCellStyleSnapshot();
       expectColHierarchyHeight(96, 48, 48, 2);
     });
+
+    test('should calculate correctly max text width for headerActionIcons', async () => {
+      updateStyle(Infinity);
+      s2.changeSheetSize(800, 600);
+      s2.setOptions({
+        headerActionIcons: [
+          {
+            icons: ['Trend', 'SortDown', { position: 'left', name: 'SortUp' }],
+            belongsCell: 'cornerCell',
+          },
+          {
+            icons: ['Trend', 'SortDown', { position: 'left', name: 'SortUp' }],
+            belongsCell: 'rowCell',
+          },
+          {
+            icons: ['Trend', 'SortDown', { position: 'left', name: 'SortUp' }],
+            belongsCell: 'colCell',
+          },
+        ],
+      });
+      await s2.render(false);
+
+      matchCellStyleSnapshot();
+    });
+
+    test('should calculate correctly max text width for default sort header action icons', async () => {
+      updateStyle(Infinity);
+      s2.changeSheetSize(800, 600);
+      s2.setOptions({
+        showDefaultHeaderActionIcon: true,
+      });
+      await s2.render(false);
+
+      matchCellStyleSnapshot();
+    });
+
+    test('should calculate correctly max text width for default sort header action icons and valuesInCols=false', async () => {
+      updateStyle(Infinity);
+      s2.changeSheetSize(800, 600);
+      s2.setDataCfg({
+        fields: {
+          valueInCols: false,
+        },
+      });
+      s2.setOptions({
+        showDefaultHeaderActionIcon: true,
+      });
+      await s2.render();
+
+      matchCellStyleSnapshot();
+    });
   });
 
   describe('TableSheet', () => {
@@ -1290,5 +1341,30 @@ describe('SpreadSheet Multi Line Text Tests', () => {
 
       matchCellStyleSnapshot();
     });
+
+    test('should calculate correctly max text width for headerActionIcons', async () => {
+      updateStyle(Infinity);
+      s2.setOptions({
+        headerActionIcons: [
+          {
+            icons: ['Trend', 'SortDown', { position: 'left', name: 'SortUp' }],
+            belongsCell: 'colCell',
+          },
+        ],
+      });
+      await s2.render(false);
+
+      matchCellStyleSnapshot();
+    });
+
+    test('should calculate correctly max text width for default sort header action icons', async () => {
+      updateStyle(Infinity);
+      s2.setOptions({
+        showDefaultHeaderActionIcon: true,
+      });
+      await s2.render(false);
+
+      matchCellStyleSnapshot();
+    });
   });
 });
diff --git a/packages/s2-core/__tests__/unit/interaction/root-spec.ts b/packages/s2-core/__tests__/unit/interaction/root-spec.ts
@@ -178,17 +178,33 @@ describe('RootInteraction Tests', () => {
   });
 
   test('should selected header cell', () => {
+    const highlightNodesSpy = jest
+      .spyOn(rootInteraction, 'highlightNodes')
+      .mockImplementationOnce(() => {});
+
     rootInteraction.selectCell(mockCell);
 
     expect(rootInteraction.getState()).toMatchSnapshot();
     expect(rootInteraction.hasIntercepts([InterceptType.HOVER])).toBeTruthy();
+    expect(highlightNodesSpy).toHaveBeenCalledWith(
+      [],
+      InteractionStateName.SELECTED,
+    );
   });
 
   test('should highlight header cell', () => {
+    const highlightNodesSpy = jest
+      .spyOn(rootInteraction, 'highlightNodes')
+      .mockImplementationOnce(() => {});
+
     rootInteraction.highlightCell(mockCell);
 
     expect(rootInteraction.getState()).toMatchSnapshot();
     expect(rootInteraction.hasIntercepts([InterceptType.HOVER])).toBeTruthy();
+    expect(highlightNodesSpy).toHaveBeenCalledWith(
+      [],
+      InteractionStateName.HOVER,
+    );
   });
 
   // https://github.com/antvis/S2/issues/1243
@@ -444,7 +460,7 @@ describe('RootInteraction Tests', () => {
       expect(rootInteraction.getActiveCells()).toEqual([]);
     });
 
-    test('should set selected status after highlight nodes', () => {
+    test('should set hover status after highlight nodes', () => {
       const belongsCell = createMockCellInfo('test-A').mockCell;
 
       const mockNodeA = new Node({
@@ -471,6 +487,28 @@ describe('RootInteraction Tests', () => {
       });
     });
 
+    // https://github.com/antvis/S2/discussions/3062
+    test('should set selected status after highlight nodes', () => {
+      const belongsCell = createMockCellInfo('test-A').mockCell;
+
+      const mockNodeA = new Node({
+        id: 'test',
+        field: 'test',
+        value: '1',
+        belongsCell,
+      });
+
+      rootInteraction.highlightNodes(
+        [mockNodeA],
+        InteractionStateName.SELECTED,
+      );
+
+      expect(mockNodeA.belongsCell?.updateByState).toHaveBeenCalledWith(
+        InteractionStateName.SELECTED,
+        belongsCell,
+      );
+    });
+
     test.each`
       stateName                            | handler
       ${InteractionStateName.SELECTED}     | ${'isSelectedState'}

diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
@@ -112,7 +112,7 @@ export abstract class HeaderCell<
     this.generateIconConfig();
   }
 
-  protected generateIconConfig() {
+  public generateIconConfig() {
     this.conditionIconMappingResult = this.getIconConditionResult();
 
     const { sortParam } = this.getHeaderConfig();
@@ -186,6 +186,10 @@ export abstract class HeaderCell<
       const { sortParam } = this.getHeaderConfig();
       const query = this.meta.query;
 
+      if (this.isShallowRender()) {
+        return query;
+      }
+
       // sortParam 的 query，和 type 本身可能会 undefined
       return (
         query &&

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -39,6 +39,7 @@ import {
   SeriesNumberCell,
   TableColCell,
   TableSeriesNumberCell,
+  type HeaderCell,
 } from '../cell';
 import {
   BACK_GROUND_GROUP_CONTAINER_Z_INDEX,
@@ -524,6 +525,8 @@ export abstract class BaseFacet {
       return cacheHeight || defaultHeight;
     }
 
+    // 预生成 icon 配置, 用于计算文本正确的最大可用宽度
+    (cell as HeaderCell).generateIconConfig?.();
     cell.drawTextShape();
 
     const { padding } = cell.getStyle().cell;

diff --git a/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts
@@ -145,7 +145,7 @@ export class CornerCellClick extends BaseEvent implements BaseEventImplement {
       cells,
       stateName: InteractionStateName.SELECTED,
     });
-    interaction.highlightNodes(nodes);
+    interaction.highlightNodes(nodes, InteractionStateName.SELECTED);
     cornerCell?.updateByState(InteractionStateName.SELECTED);
 
     this.showTooltip(event);

diff --git a/packages/s2-core/src/interaction/root.ts b/packages/s2-core/src/interaction/root.ts
@@ -658,7 +658,7 @@ export class RootInteraction {
 
     // 平铺模式或者是树状模式下的列头单元格, 高亮子节点
     if (!isHierarchyTree || isColCell) {
-      this.highlightNodes(childrenNodes);
+      this.highlightNodes(childrenNodes, stateName);
     }
 
     // 如果不在可视范围, 自动滚动
@@ -684,12 +684,12 @@ export class RootInteraction {
    * 高亮节点对应的单元格
    * @example s2.interaction.highlightNodes([node])
    */
-  public highlightNodes = (nodes: Node[] = []) => {
+  public highlightNodes = (
+    nodes: Node[] = [],
+    stateName: `${InteractionStateName}` = InteractionStateName.HOVER,
+  ) => {
     nodes.forEach((node) => {
-      node?.belongsCell?.updateByState(
-        InteractionStateName.HOVER,
-        node.belongsCell,
-      );
+      node?.belongsCell?.updateByState(stateName, node.belongsCell);
     });
   };
 

diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
@@ -320,6 +320,21 @@ export const S2TooltipOptions: SheetComponentOptions['tooltip'] = {
   },
 };
 
+export const headerActionIcons: SheetComponentOptions['headerActionIcons'] = [
+  {
+    icons: ['Trend', { position: 'left', name: 'SortUp' }],
+    belongsCell: 'cornerCell',
+  },
+  {
+    icons: ['Trend', { position: 'left', name: 'SortUp' }],
+    belongsCell: 'rowCell',
+  },
+  {
+    icons: ['Trend', { position: 'left', name: 'SortUp' }],
+    belongsCell: 'colCell',
+  },
+];
+
 export const s2Options: SheetComponentOptions = {
   debug: true,
   width: 800,

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -66,6 +66,7 @@ import {
   PivotSheetFrozenOptions,
   TableSheetFrozenOptions,
   defaultOptions,
+  headerActionIcons,
   pivotSheetDataCfg,
   pivotSheetDataCfgForCompactMode,
   pivotSheetMultiLineTextDataCfg,
@@ -686,6 +687,9 @@ function MainLayout() {
                                   onChange={(checked) => {
                                     updateOptions({
                                       showDefaultHeaderActionIcon: checked,
+                                      headerActionIcons: checked
+                                        ? []
+                                        : headerActionIcons,
                                     });
                                   }}
                                 />

diff --git a/s2-site/docs/api/basic-class/interaction.zh.md b/s2-site/docs/api/basic-class/interaction.zh.md
@@ -51,7 +51,7 @@ s2.interaction.reset()
 | addIntercepts | 新增交互拦截                                           | (interceptTypes: [InterceptType](#intercepttype)[]) => void |
 | hasIntercepts | 是否有指定拦截的交互                                       | (interceptTypes: [InterceptType](#intercepttype)[]) => boolean |
 | removeIntercepts | 移除指定交互拦截                                         | (interceptTypes: [InterceptType](#intercepttype)[]) => void |
-| highlightNodes | 高亮节点对应的单元格                                       | (nodes: [Node](/api/basic-class/node)[]) => void |
+| highlightNodes | 高亮节点对应的单元格                                       | (nodes: [Node](/api/basic-class/node)[], stateName: [InteractionStateName](#interactionstatename)) => void |
 | scrollTo | 滚动至指定位置   | (offsetConfig: [ScrollOffsetConfig](#offsetconfig)) => void |    |
 | scrollToNode | 滚动至指定单元格节点   | (node: [Node](/api/basic-class/node), options?: [CellScrollToOptions](#cellscrolltooptions)) => void |    |
 | scrollToCell | 滚动至指定单元格   | (cell: [S2CellType](#s2celltype), options?: [CellScrollToOptions](#cellscrolltooptions)) => void |    |

diff --git a/s2-site/docs/manual/advanced/interaction/highlight-and-select-cell.zh.md b/s2-site/docs/manual/advanced/interaction/highlight-and-select-cell.zh.md
@@ -33,6 +33,8 @@ s2.interaction.getCurrentStateName() // "hover"
 const targetNodes = s2.facet.getRowNodes()
 
 s2.interaction.highlightNodes(targetNodes)
+s2.interaction.highlightNodes(targetNodes, 'hover')
+s2.interaction.highlightNodes(targetNodes, 'selected')
 ```
 
 ## 选中单元格