fix: the order of multiple selection of cells is wrong (#857)

* fix: the order of multiple selection of cells is wrong * chore: rename merge cells to merge cell * docs: update merge-cell.zh.md content, no longer rely on React * docs: keep the document style consistent * chore: delete merge-cell-spec.ts * chore: tweak CELL_MULTI_SELECTION to DATA_CELL_MULTI_SELECTION * fix: fix unit test, remove undefined in array
antvis · Dec 3, 2021 · 63d1fcb · 63d1fcb
1 parent ccbc851
commit 63d1fcb
Show file tree

Hide file tree

Showing 16 changed files with 56 additions and 53 deletions.
diff --git a/packages/s2-core/__tests__/unit/interaction/root-spec.ts b/packages/s2-core/__tests__/unit/interaction/root-spec.ts
@@ -13,13 +13,13 @@ import {
   MergedCell,
 } from '@/index';
 import { Store } from '@/common/store';
-import { mergeCells, unmergeCell } from '@/utils/interaction/merge-cells';
+import { mergeCell, unmergeCell } from '@/utils/interaction/merge-cell';
 
 jest.mock('@/sheet-type');
 jest.mock('@/interaction/event-controller');
-jest.mock('@/utils/interaction/merge-cells', () => {
+jest.mock('@/utils/interaction/merge-cell', () => {
   return {
-    mergeCells: jest.fn(),
+    mergeCell: jest.fn(),
     unmergeCell: jest.fn(),
   };
 });
@@ -100,7 +100,7 @@ describe('RootInteraction Tests', () => {
 
   test('should call merge cells', () => {
     rootInteraction.mergeCells();
-    expect(mergeCells).toBeCalled();
+    expect(mergeCell).toBeCalled();
   });
 
   test('should call cancel mergedCell', () => {

diff --git a/.../__tests__/unit/utils/merge-cells.spec.ts → ...e/__tests__/unit/utils/merge-cell.spec.ts b/.../__tests__/unit/utils/merge-cells.spec.ts → ...e/__tests__/unit/utils/merge-cell.spec.ts
diff --git a/packages/s2-core/src/cell/merged-cell.ts b/packages/s2-core/src/cell/merged-cell.ts
@@ -2,7 +2,7 @@ import { isEmpty, isObject } from 'lodash';
 import { CellTypes } from '../common/constant';
 import { ViewMeta } from '../common/interface';
 import { DataCell } from './data-cell';
-import { getPolygonPoints } from '@/utils/interaction/merge-cells';
+import { getPolygonPoints } from '@/utils/interaction/merge-cell';
 import { SpreadSheet } from '@/sheet-type';
 import { S2CellType } from '@/common/interface/interaction';
 import { renderPolygon } from '@/utils/g-renders';

diff --git a/packages/s2-core/src/common/constant/interaction.ts b/packages/s2-core/src/common/constant/interaction.ts
@@ -6,7 +6,7 @@ export enum InteractionName {
   HOVER = 'hover',
   BRUSH_SELECTION = 'brushSelection',
   COL_ROW_RESIZE = 'rowColResize',
-  COL_ROW_MULTI_SELECTION = 'colRowMultiSelection',
+  DATA_CELL_MULTI_SELECTION = 'dataCellMultiSelection',
   COL_ROW_SHIFT_MULTI_SELECTION = 'colRowShiftMultiSelection',
 }
 

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -59,7 +59,7 @@ import type {
   S2CellType,
   FrameConfig,
 } from '@/common/interface';
-import { updateMergedCells } from '@/utils/interaction/merge-cells';
+import { updateMergedCells } from '@/utils/interaction/merge-cell';
 import { PanelIndexes, diffPanelIndexes } from '@/utils/indexes';
 
 export abstract class BaseFacet {

diff --git a/packages/s2-core/src/interaction/base-interaction/click/index.ts b/packages/s2-core/src/interaction/base-interaction/click/index.ts
@@ -1,4 +1,4 @@
 export { DataCellClick } from './data-cell-click';
-export { MergedCellsClick } from './merged-cells-click';
+export { MergedCellClick } from './merged-cell-click';
 export { RowColumnClick } from './row-column-click';
 export { RowTextClick } from './row-text-click';
diff --git a/...e-interaction/click/merged-cells-click.ts → ...se-interaction/click/merged-cell-click.ts b/...e-interaction/click/merged-cells-click.ts → ...se-interaction/click/merged-cell-click.ts
@@ -2,7 +2,7 @@ import { Event } from '@antv/g-canvas';
 import { BaseEvent, BaseEventImplement } from '../../base-event';
 import { InterceptType, S2Event } from '@/common/constant';
 
-export class MergedCellsClick extends BaseEvent implements BaseEventImplement {
+export class MergedCellClick extends BaseEvent implements BaseEventImplement {
   public bindEvents() {
     this.bindDataCellClick();
   }

diff --git a/packages/s2-core/src/interaction/root.ts b/packages/s2-core/src/interaction/root.ts
@@ -1,7 +1,7 @@
-import { concat, filter, forEach, isEmpty } from 'lodash';
+import { concat, filter, find, forEach, isEmpty, map } from 'lodash';
 import {
   DataCellClick,
-  MergedCellsClick,
+  MergedCellClick,
   RowColumnClick,
   RowTextClick,
 } from './base-interaction/click';
@@ -31,7 +31,7 @@ import { SpreadSheet } from '@/sheet-type';
 import { getAllPanelDataCell } from '@/utils/getAllPanelDataCell';
 import { clearState, setState } from '@/utils/interaction/state-controller';
 import { isMobile } from '@/utils/is-mobile';
-import { mergeCells, unmergeCell } from '@/utils/interaction/merge-cells';
+import { mergeCell, unmergeCell } from '@/utils/interaction/merge-cell';
 
 export class RootInteraction {
   public spreadsheet: SpreadSheet;
@@ -131,7 +131,11 @@ export class RootInteraction {
   // 获取 cells 中在可视区域内的实例列表
   public getActiveCells() {
     const ids = this.getCells().map((item) => item.id);
-    return this.getAllCells().filter((cell) => ids.includes(cell.getMeta().id));
+    const allCells = this.getAllCells();
+    // 这里的顺序要以 ids 中的顺序为准，代表点击 cell 的顺序
+    return map(ids, (id) =>
+      find(allCells, (cell) => cell?.getMeta()?.id === id),
+    ).filter((cell) => cell); // 去除 undefined
   }
 
   public clearStyleIndependent() {
@@ -218,7 +222,7 @@ export class RootInteraction {
   };
 
   public mergeCells = (cellsInfo?: MergedCellInfo[], hideData?: boolean) => {
-    mergeCells(this.spreadsheet, cellsInfo, hideData);
+    mergeCell(this.spreadsheet, cellsInfo, hideData);
   };
 
   public unmergeCell = (removedCells: MergedCell) => {
@@ -250,7 +254,7 @@ export class RootInteraction {
     );
     this.interactions.set(
       InteractionName.MERGED_CELLS_CLICK,
-      new MergedCellsClick(this.spreadsheet),
+      new MergedCellClick(this.spreadsheet),
     );
     this.interactions.set(
       InteractionName.HOVER,
@@ -267,7 +271,7 @@ export class RootInteraction {
         new RowColumnResize(this.spreadsheet),
       );
       this.interactions.set(
-        InteractionName.COL_ROW_MULTI_SELECTION,
+        InteractionName.DATA_CELL_MULTI_SELECTION,
         new DataCellMultiSelection(this.spreadsheet),
       );
       this.interactions.set(

diff --git a/packages/s2-core/src/utils/interaction/index.ts b/packages/s2-core/src/utils/interaction/index.ts
@@ -1,5 +1,5 @@
 export * from './formatter';
 export * from './hover-event';
-export * from './merge-cells';
+export * from './merge-cell';
 export * from './select-event';
 export * from './state-controller';
diff --git a/...core/src/utils/interaction/merge-cells.ts → ...-core/src/utils/interaction/merge-cell.ts b/...core/src/utils/interaction/merge-cells.ts → ...-core/src/utils/interaction/merge-cell.ts
@@ -214,7 +214,7 @@ export const getActiveCellsInfo = (sheet: SpreadSheet) => {
  * @param cellsInfo
  * @param hideData
  */
-export const mergeCells = (
+export const mergeCell = (
   sheet: SpreadSheet,
   cellsInfo?: MergedCellInfo[],
   hideData?: boolean,

diff --git a/packages/s2-core/src/utils/interaction/state-controller.ts b/packages/s2-core/src/utils/interaction/state-controller.ts
@@ -33,8 +33,8 @@ export const clearState = (spreadsheet: SpreadSheet) => {
 
 /**
  * @desc set the interaction state information
- * @param stateName the name of interaction state
  * @param spreadsheet sheet instance
+ * @param interactionStateInfo
  */
 export const setState = (
   spreadsheet: SpreadSheet,

diff --git a/s2-site/docs/api/components/header.zh.md b/s2-site/docs/api/components/header.zh.md
@@ -1,5 +1,5 @@
 ---
-title: 表头 header
+title: 表头
 order: 4
 ---
 

diff --git a/s2-site/docs/common/header.zh.md b/s2-site/docs/common/header.zh.md
@@ -1,5 +1,5 @@
 ---
-title: 表头 Header 
+title: 表头
 order: 0
 ---
 

diff --git a/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md b/s2-site/docs/manual/advanced/interaction/merge-cell.zh.md
@@ -5,7 +5,7 @@ order: 5
 
 在表格中将两个或多个连续的单元格合并为一个单元格。用户可根据业务要求，在看数或展示时实现分类分析。
 
-![mergeCellGif](https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*uzxfQ71t8D4AAAAAAAAAAAAAARQnAQ)
+![mergeCellGif](https://gw.alipayobjects.com/zos/antfincdn/Eq9WwyC2g/merge-cell.gif)
 
 ## 快速上手
 
@@ -277,31 +277,6 @@ const s2DataConfig = {
   data: res.data,
   meta: res.meta
 };
-// 将单元格合并操作集成到未合并单元格的 tooltip 操作中
-const TooltipContent = (
-  <Button
-    key={ 'button' }
-    onClick={ () => {
-      s2.interaction.mergeCells();
-    } }
-  >
-    合并单元格
-  </Button>
-);
-
-// 将取消单元格合并操作集成到合并单元格的 tooltip 操作中
-const mergedCellsTooltip = (mergedCell: MergedCell) => (
-  <div>
-    合并后的tooltip
-    <Button
-      onClick={ () => {
-        s2.interaction.unmergeCell(mergedCell);
-      } }
-    >
-      取消合并单元格
-    </Button>
-  </div>
-);
 
 const s2options = {
     width: 600,
@@ -323,16 +298,40 @@ const s2options = {
 ;
 const s2 = new PivotSheet(container, s2DataConfig, s2options);
 
-s2.render();
+// 将单元格合并操作集成到未合并单元格的 tooltip 操作中
+const dataCellTooltip = () => {
+  button.innerText = '点击合并单元格';
+  button.className = 'merge-cells-button';
+  button.onclick = () => s2.interaction.mergeCells(); // 不传入 cellsInfo 时，默认使用当前选中所有的单元格信息
+  return button;
+}; // (按住 Cmd/ Ctrl 多选)
+
+// 将取消单元格合并操作集成到合并单元格的 tooltip 操作中
+const mergedCellsTooltip = (mergedCell) => {
+  button.innerText = '取消合并单元格';
+  button.className = 'merge-cells-button';
+  button.onclick = () => s2.interaction.unmergeCell(mergedCell);
+  return button;
+};
+
+// 监听 dataCell 的点击事件，自定义点击后的交互操作
+s2.on(S2Event.DATA_CELL_CLICK, (event) => {
+  s2.tooltip.show({
+    position: { x: event.clientX, y: event.clientY },
+    content: dataCellTooltip(),
+  });
+});
+
 // 监听 mergedCell 的点击事件，自定义点击后的交互操作
 s2.on(S2Event.MERGED_CELLS_CLICK, (event) => {
-  const cell: MergedCell = s2.getCell(event.target);
+  const cell = s2.getCell(event.target);
   s2.tooltip.show({
     position: { x: event.clientX, y: event.clientY },
     content: mergedCellsTooltip(cell),
   });
 });
 
+s2.render();
 ```
 
 ## demo 演示
@@ -364,7 +363,7 @@ s2.on(S2Event.MERGED_CELLS_CLICK, (event) => {
 
 | 参数            | 说明                 | 类型                   | 默认值 | 必选 |
 | --------------- | ------------------ | ---------------------- | ------ | ---- |
-| cellsInfo       | 指定一个合并单元格的信息，未传则默认使用当前选中所有的单元格信息 | `MergedCellInfo[]`    | -      |      |
+| cellsInfo       | 指定一个合并单元格的信息，未传则默认使用当前选中所有的单元格信息 | `MergedCellInfo[]`   | -      |      |
 | hideData        | hideData 为 true 时，合并单元格不显示内容。 | `boolean` | false     |      |
 
 ### unmergeCells

diff --git a/...interaction/advanced/demo/merge-cells.tsx → ...s/interaction/advanced/demo/merge-cell.ts b/...interaction/advanced/demo/merge-cells.tsx → ...s/interaction/advanced/demo/merge-cell.ts
diff --git a/s2-site/examples/interaction/advanced/demo/meta.json b/s2-site/examples/interaction/advanced/demo/meta.json
@@ -37,12 +37,12 @@
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/e0z41b3e4/2021-11-16%25252020.11.53.gif"
     },
     {
-      "filename": "merge-cells.tsx",
+      "filename": "merge-cell.ts",
       "title": {
         "zh": "合并单元格",
-        "en": "Merge cells"
+        "en": "Merge cell"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/uSfo7Zbfiz/merge-cell.gif"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/Eq9WwyC2g/merge-cell.gif"
     }
   ]
 }