feat: 统一链接跳转字段绘制逻辑, 支持标记列头 close #2430 (#2796)

* feat: 统一链接跳转字段绘制统一, 支持标记列头 close #2430 * test: 更新快照 * feat: 参数 cellData 统一为 meta * chore: 还原
antvis · Jul 5, 2024 · 637f651 · 637f651
1 parent 1aae9ce
commit 637f651
Show file tree

Hide file tree

Showing 31 changed files with 405 additions and 161 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
@@ -12,6 +12,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
+      "linkTextFill": "#2C60D4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -76,6 +77,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#2C60D4",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -85,6 +87,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#2C60D4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -560,6 +563,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
+      "linkTextFill": "#4b91ff",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -624,6 +628,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#4b91ff",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -633,6 +638,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#4b91ff",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -1108,6 +1114,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -1172,6 +1179,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -1181,6 +1189,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -1656,6 +1665,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -1720,6 +1730,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -1729,6 +1740,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -2204,6 +2216,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -2268,6 +2281,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -2277,6 +2291,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -2752,6 +2767,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -2816,6 +2832,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -2825,6 +2842,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",

diff --git a/...re/__tests__/spreadsheet/row-link-spec.ts → ...preadsheet/header-cell-link-click-spec.ts b/...re/__tests__/spreadsheet/row-link-spec.ts → ...preadsheet/header-cell-link-click-spec.ts
@@ -1,4 +1,10 @@
-import { S2Event, type S2DataConfig, type S2Options } from '@/common';
+import {
+  EXTRA_FIELD,
+  S2Event,
+  type Node,
+  type S2DataConfig,
+  type S2Options,
+} from '@/common';
 import { PivotSheet } from '@/sheet-type';
 import { noop } from 'lodash';
 import { getContainer } from 'tests/util/helpers';
@@ -15,7 +21,7 @@ const s2Options: S2Options = {
     },
   },
   interaction: {
-    linkFields: ['province', 'city'],
+    linkFields: ['province', 'city', 'type'],
   },
 };
 
@@ -63,94 +69,137 @@ const s2DataCfg: S2DataConfig = {
   ],
 };
 
-describe('Row Text Link Tests', () => {
+describe('Header Cell Link Click Tests', () => {
   let container: HTMLDivElement;
 
   let s2: PivotSheet;
   const linkFieldJump = jest.fn();
 
+  const emitCellClickEvent = (event: S2Event, node: Node) => {
+    s2.emit(event, {
+      stopPropagation: noop,
+      target: {
+        appendInfo: {
+          isLinkFieldText: true,
+          meta: node,
+        },
+      },
+    } as any);
+    expect(node.belongsCell.getLinkFieldShape()).toBeDefined();
+  };
+
   beforeEach(async () => {
     container = getContainer();
     s2 = new PivotSheet(container, s2DataCfg, s2Options);
     await s2.render();
+
     s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, linkFieldJump);
   });
 
   test('should get correctly row leaf node when click row 浙江', () => {
     const rowNode = s2.facet.getRowNodes()[0]; // 浙江
 
-    s2.emit(S2Event.ROW_CELL_CLICK, {
-      stopPropagation: noop,
-      target: {
-        appendInfo: {
-          isLinkFieldText: true,
-          cellData: rowNode,
-        },
-      },
-    } as any);
+    emitCellClickEvent(S2Event.ROW_CELL_CLICK, rowNode);
 
     expect(linkFieldJump).toHaveBeenCalledWith({
       field: 'province',
-      cellData: rowNode,
+      meta: rowNode,
       record: {
         province: '浙江',
         type: '笔',
         price: 2,
         cost: 2,
         rowIndex: 0,
+        colIndex: -1,
       },
     });
   });
 
   test('should get correctly row leaf node when click row 义乌1', () => {
     const rowNode = s2.facet.getRowNodes()[2]; // 义乌1
 
-    s2.emit(S2Event.ROW_CELL_CLICK, {
-      stopPropagation: noop,
-      target: {
-        appendInfo: {
-          isLinkFieldText: true,
-          cellData: rowNode,
-        },
-      },
-    } as any);
+    emitCellClickEvent(S2Event.ROW_CELL_CLICK, rowNode);
 
     expect(linkFieldJump).toHaveBeenLastCalledWith({
       field: 'city',
-      cellData: rowNode,
+      meta: rowNode,
       record: {
         province: '浙江',
         city: '义乌1',
         type: '笔',
         price: 1,
         cost: 2,
         rowIndex: 1,
+        colIndex: -1,
       },
     });
   });
 
   test('should get correctly row leaf node when click row 四川', () => {
     const rowNode = s2.facet.getRowNodes()[4]; // 四川
 
-    s2.emit(S2Event.ROW_CELL_CLICK, {
-      stopPropagation: noop,
-      target: {
-        appendInfo: {
-          isLinkFieldText: true,
-          cellData: rowNode,
-        },
-      },
-    } as any);
+    emitCellClickEvent(S2Event.ROW_CELL_CLICK, rowNode);
 
     expect(linkFieldJump).toHaveBeenCalledWith({
       field: 'province',
-      cellData: rowNode,
+      meta: rowNode,
       record: {
         province: '四川',
         type: '笔',
         price: 1,
         cost: 2,
         rowIndex: 3,
+        colIndex: -1,
+      },
+    });
+  });
+
+  test('should get correctly col leaf node when click col 笔', () => {
+    const colNode = s2.facet.getColNodes()[0]; // 笔
+
+    emitCellClickEvent(S2Event.COL_CELL_CLICK, colNode);
+
+    expect(linkFieldJump).toHaveBeenCalledWith({
+      field: 'type',
+      meta: colNode,
+      record: {
+        province: '浙江',
+        type: '笔',
+        price: 2,
+        cost: 2,
+        rowIndex: 0,
+        colIndex: -1,
+      },
+    });
+  });
+
+  test('should get correctly extra field node when click col 价格', async () => {
+    s2.setOptions({
+      interaction: {
+        linkFields: [EXTRA_FIELD],
+      },
+    });
+    s2.setDataCfg({
+      fields: {
+        values: ['price'],
+      },
+    });
+
+    await s2.render();
+    const colNode = s2.facet.getColLeafNodes()[0];
+
+    emitCellClickEvent(S2Event.COL_CELL_CLICK, colNode);
+
+    expect(linkFieldJump).toHaveBeenCalledWith({
+      field: EXTRA_FIELD,
+      meta: colNode,
+      record: {
+        province: '浙江',
+        type: '笔',
+        price: 2,
+        cost: 2,
+        rowIndex: 0,
+        colIndex: 0,
       },
     });
   });

diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/click/data-cell-click-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/click/data-cell-click-spec.ts
@@ -131,15 +131,15 @@ describe('Interaction Data Cell Click Tests', () => {
           },
         },
         {
-          cellData: mockCellData,
+          meta: mockCellData,
           isLinkFieldText: true,
         },
       ),
     } as unknown as GEvent);
 
     expect(linkFieldJump).toHaveBeenCalledWith({
       field: mockCellData.valueField,
-      cellData: mockCellData,
+      meta: mockCellData,
       record: mockCellData.data,
     });
     expect(s2.showTooltipWithInfo).not.toHaveBeenCalled();

diff --git a/...-interaction/click/row-text-click-spec.ts → ...tion/click/header-cell-link-click-spec.ts b/...-interaction/click/row-text-click-spec.ts → ...tion/click/header-cell-link-click-spec.ts
@@ -1,14 +1,14 @@
 import type { RawData, S2DataConfig, S2Options } from '@/common/interface';
-import { RowTextClick } from '@/interaction/base-interaction/click';
+import { HeaderCellLinkClick } from '@/interaction/base-interaction/click';
 import type { SpreadSheet } from '@/sheet-type';
 import { createFakeSpreadSheet } from 'tests/util/helpers';
 
 jest.mock('@/interaction/event-controller');
 jest.mock('@/interaction/base-interaction/click/row-column-click');
 jest.mock('@/interaction/range-selection');
 
-describe('Interaction Row Text Click Tests', () => {
-  let rowTextClick: RowTextClick;
+describe('Interaction Header Link Click Tests', () => {
+  let headerCellLinkClick: HeaderCellLinkClick;
   let s2: SpreadSheet;
 
   const data: RawData[] = [
@@ -26,7 +26,7 @@ describe('Interaction Row Text Click Tests', () => {
 
   beforeEach(() => {
     s2 = createFakeSpreadSheet();
-    rowTextClick = new RowTextClick(s2 as unknown as SpreadSheet);
+    headerCellLinkClick = new HeaderCellLinkClick(s2 as unknown as SpreadSheet);
     s2.options = {
       hierarchyType: 'grid',
     } as S2Options;
@@ -37,6 +37,6 @@ describe('Interaction Row Text Click Tests', () => {
   });
 
   test('should bind events', () => {
-    expect(rowTextClick.bindEvents).toBeDefined();
+    expect(headerCellLinkClick.bindEvents).toBeDefined();
   });
 });
diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/click/row-column-click-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/click/row-column-click-spec.ts
@@ -209,7 +209,7 @@ describe('Interaction Row & Column Cell Click Tests', () => {
       target: new CustomRect(
         { style: { x: 1, y: 1, width: 1, height: 1 } },
         {
-          cellData: mockCellData,
+          meta: mockCellData,
           isLinkFieldText: true,
         },
       ),