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

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",

packages/s2-core/__tests__/spreadsheet/row-link-spec.ts → packages/s2-core/__tests__/spreadsheet/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,
  },
  });
  });

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();

packages/s2-core/__tests__/unit/interaction/base-interaction/click/row-text-click-spec.ts → packages/s2-core/__tests__/unit/interaction/base-interaction/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();
  });
 });

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,
  },
  ),