diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap index 2bf7afd75d..aa859d5c67 100644 --- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap +++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap @@ -10,7 +10,7 @@ Array [ "extra": undefined, "field": "province", "height": 30, - "id": "", + "id": "province", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -39,7 +39,7 @@ Array [ "extra": undefined, "field": "city", "height": 30, - "id": "", + "id": "city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -102,7 +102,7 @@ Array [ "extra": undefined, "field": "province", "height": 30, - "id": "", + "id": "province", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -131,7 +131,7 @@ Array [ "extra": undefined, "field": "city", "height": 30, - "id": "", + "id": "city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -165,7 +165,7 @@ Array [ "extra": undefined, "field": undefined, "height": 30, - "id": "", + "id": "province/city/数值", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -228,7 +228,7 @@ Array [ "extra": undefined, "field": undefined, "height": 30, - "id": "", + "id": "province/city/数值", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -262,7 +262,7 @@ Array [ "extra": undefined, "field": "province", "height": 30, - "id": "", + "id": "province", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -291,7 +291,7 @@ Array [ "extra": undefined, "field": "city", "height": 30, - "id": "", + "id": "city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -354,7 +354,7 @@ Array [ "extra": undefined, "field": "province", "height": 30, - "id": "", + "id": "province", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -383,7 +383,7 @@ Array [ "extra": undefined, "field": "city", "height": 30, - "id": "", + "id": "city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -417,7 +417,7 @@ Array [ "extra": undefined, "field": undefined, "height": 30, - "id": "", + "id": "province/city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -480,7 +480,7 @@ Array [ "extra": undefined, "field": undefined, "height": 30, - "id": "", + "id": "province/city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -514,7 +514,7 @@ Array [ "extra": undefined, "field": "province", "height": 30, - "id": "", + "id": "province", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -543,7 +543,7 @@ Array [ "extra": undefined, "field": "city", "height": 30, - "id": "", + "id": "city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -606,7 +606,7 @@ Array [ "extra": undefined, "field": "province", "height": 30, - "id": "", + "id": "province", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -635,7 +635,7 @@ Array [ "extra": undefined, "field": "city", "height": 30, - "id": "", + "id": "city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -669,7 +669,7 @@ Array [ "extra": undefined, "field": undefined, "height": 30, - "id": "", + "id": "province/city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, @@ -732,7 +732,7 @@ Array [ "extra": undefined, "field": undefined, "height": 30, - "id": "", + "id": "province/city", "inCollapseNode": undefined, "isCollapsed": undefined, "isGrandTotals": undefined, diff --git a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts index 54ac8fe53d..b8a4df0860 100644 --- a/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts +++ b/packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts @@ -182,10 +182,15 @@ describe('TableSheet normal spec', () => { await sleep(30); + let columnNodes = s2.getColumnNodes(); + let lastColumnCell = columnNodes[columnNodes.length - 1] + .belongsCell as ColCell; + const startCellWidth = lastColumnCell.getMeta().width; + const { x, width, top } = s2.getCanvasElement().getBoundingClientRect(); s2.getCanvasElement().dispatchEvent( new MouseEvent('mousedown', { - clientX: x + width - 1, + clientX: x + width, clientY: top + 25, }), ); @@ -207,11 +212,11 @@ describe('TableSheet normal spec', () => { await sleep(300); - const columnNodes = s2.getColumnNodes(); - const lastColumnCell = columnNodes[columnNodes.length - 1] - .belongsCell as ColCell; + columnNodes = s2.getColumnNodes(); + lastColumnCell = columnNodes[columnNodes.length - 1].belongsCell as ColCell; + const endCellWidth = lastColumnCell.getMeta().width; - expect(lastColumnCell.getMeta().width).toBe(199); + expect(endCellWidth - startCellWidth).toBe(100); }); test('should render link shape', () => { diff --git a/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts b/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts index 9fcd62919f..42d399e672 100644 --- a/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts +++ b/packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts @@ -199,6 +199,8 @@ describe('Interaction Row Column Resize Tests', () => { { offsetX: 10, offsetY: 20, + clientX: 10, + clientY: 20, }, resizeInfo, ); @@ -206,6 +208,7 @@ describe('Interaction Row Column Resize Tests', () => { expect(s2.store.get('resized')).toBeFalsy(); expect(rowColumnResizeInstance.resizeStartPosition).toStrictEqual({ offsetX: 10, + clientX: 10, }); expect(getStartGuideLine().attr('path')).toStrictEqual([ ['M', 2, 2], @@ -312,12 +315,15 @@ describe('Interaction Row Column Resize Tests', () => { { offsetX: 10, offsetY: 20, + clientX: 10, + clientY: 20, }, resizeInfo, ); expect(rowColumnResizeInstance.resizeStartPosition).toStrictEqual({ offsetY: 20, + clientY: 20, }); expect(getStartGuideLine().attr('path')).toStrictEqual([ ['M', 2, 2], @@ -605,6 +611,8 @@ describe('Interaction Row Column Resize Tests', () => { { offsetX: 10, offsetY: 20, + clientX: 10, + clientY: 20, }, resizeInfo, ); @@ -614,6 +622,8 @@ describe('Interaction Row Column Resize Tests', () => { { offsetX: 20, offsetY: 20, + clientX: 20, + clientY: 20, }, resizeInfo, ); diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts index cc6cf0e3b1..7230228299 100644 --- a/packages/s2-core/src/cell/corner-cell.ts +++ b/packages/s2-core/src/cell/corner-cell.ts @@ -35,7 +35,6 @@ import { } from '../utils/interaction/resize'; import { isIPhoneX } from '../utils/is-mobile'; import { getEllipsisText, getEmptyPlaceholder } from '../utils/text'; -import { i18n } from './../common/i18n'; import { shouldAddResizeArea } from './../utils/interaction/resize'; import { HeaderCell } from './header-cell'; @@ -54,8 +53,6 @@ export class CornerCell extends HeaderCell { return CellTypes.CORNER_CELL; } - public update() {} - protected initCell() { super.initCell(); this.resetTextAndConditionIconShapes(); @@ -66,6 +63,7 @@ export class CornerCell extends HeaderCell { this.drawActionIcons(); this.drawBorderShape(); this.drawResizeArea(); + this.update(); } /** diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts index 9fa1d8129a..a8fb6eff73 100644 --- a/packages/s2-core/src/cell/header-cell.ts +++ b/packages/s2-core/src/cell/header-cell.ts @@ -395,9 +395,11 @@ export abstract class HeaderCell extends BaseCell { const { interaction } = this.spreadsheet; const stateInfo = interaction?.getState(); const cells = interaction?.getCells([ + CellTypes.CORNER_CELL, CellTypes.COL_CELL, CellTypes.ROW_CELL, ]); + if (!first(cells)) { return; } diff --git a/packages/s2-core/src/common/interface/resize.ts b/packages/s2-core/src/common/interface/resize.ts index 50a9731d5c..82f85155ac 100644 --- a/packages/s2-core/src/common/interface/resize.ts +++ b/packages/s2-core/src/common/interface/resize.ts @@ -34,6 +34,8 @@ export interface ResizeGuideLinePosition { export interface ResizePosition { offsetX?: number; offsetY?: number; + clientX?: number; + clientY?: number; } export interface ResizeDetail { diff --git a/packages/s2-core/src/facet/header/corner.ts b/packages/s2-core/src/facet/header/corner.ts index 35aa8faa59..9a3002eeed 100644 --- a/packages/s2-core/src/facet/header/corner.ts +++ b/packages/s2-core/src/facet/header/corner.ts @@ -135,7 +135,7 @@ export class CornerHeader extends BaseHeader { const cNode: Node = new Node({ key: '', - id: '', + id: cornerText, value: cornerText, }); cNode.x = position.x + seriesNumberWidth; @@ -154,7 +154,7 @@ export class CornerHeader extends BaseHeader { const field = rows[rowNode.level]; const cNode: Node = new Node({ key: field, - id: '', + id: field, value: dataSet.getFieldName(field), }); @@ -176,7 +176,7 @@ export class CornerHeader extends BaseHeader { const field = columns[colNode.level]; const cNode: Node = new Node({ key: field, - id: '', + id: field, value: dataSet.getFieldName(field), }); cNode.x = position.x; diff --git a/packages/s2-core/src/interaction/base-interaction/hover.ts b/packages/s2-core/src/interaction/base-interaction/hover.ts index e326544168..bfcd8c4759 100644 --- a/packages/s2-core/src/interaction/base-interaction/hover.ts +++ b/packages/s2-core/src/interaction/base-interaction/hover.ts @@ -231,8 +231,7 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement { public bindCornerCellHover() { this.spreadsheet.on(S2Event.CORNER_CELL_HOVER, (event: CanvasEvent) => { - const cell = this.spreadsheet.getCell(event.target); - this.showEllipsisTooltip(event, cell); + this.handleHeaderHover(event); }); } } diff --git a/packages/s2-core/src/interaction/range-selection.ts b/packages/s2-core/src/interaction/range-selection.ts index 1d334e410b..697f5b02d7 100644 --- a/packages/s2-core/src/interaction/range-selection.ts +++ b/packages/s2-core/src/interaction/range-selection.ts @@ -187,6 +187,7 @@ export class RangeSelection extends BaseEvent implements BaseEventImplement { stateName: InteractionStateName.SELECTED, }); } else { + interaction.removeIntercepts([InterceptType.HOVER]); this.spreadsheet.store.set('lastClickedCell', cell); } diff --git a/packages/s2-core/src/interaction/row-column-resize.ts b/packages/s2-core/src/interaction/row-column-resize.ts index 77bcec04e3..c0cedae59a 100644 --- a/packages/s2-core/src/interaction/row-column-resize.ts +++ b/packages/s2-core/src/interaction/row-column-resize.ts @@ -10,12 +10,12 @@ import { InterceptType, MIN_CELL_HEIGHT, MIN_CELL_WIDTH, - ResizeAreaEffect, - ResizeDirectionType, - ResizeType, RESIZE_END_GUIDE_LINE_ID, RESIZE_MASK_ID, RESIZE_START_GUIDE_LINE_ID, + ResizeAreaEffect, + ResizeDirectionType, + ResizeType, S2Event, } from '../common/constant'; import type { @@ -137,6 +137,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { ['L', offsetX + width, guideLineMaxHeight], ]); this.resizeStartPosition.offsetX = event.offsetX; + this.resizeStartPosition.clientX = event.clientX; return; } @@ -149,6 +150,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { ['L', guideLineMaxWidth, offsetY + height], ]); this.resizeStartPosition.offsetY = event.offsetY; + this.resizeStartPosition.clientY = event.clientY; } private bindMouseDown() { @@ -425,7 +427,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { guideLineStart: ResizeGuideLinePath, guideLineEnd: ResizeGuideLinePath, ) { - let offsetX = originalEvent.offsetX - this.resizeStartPosition.offsetX; + let offsetX = originalEvent.clientX - this.resizeStartPosition.clientX; if (resizeInfo.width + offsetX < MIN_CELL_WIDTH) { // 禁止拖到最小宽度 offsetX = -(resizeInfo.width - MIN_CELL_WIDTH); @@ -447,7 +449,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { guideLineStart: ResizeGuideLinePath, guideLineEnd: ResizeGuideLinePath, ) { - let offsetY = originalEvent.offsetY - this.resizeStartPosition.offsetY; + let offsetY = originalEvent.clientY - this.resizeStartPosition.clientY; if (resizeInfo.height + offsetY < MIN_CELL_HEIGHT) { offsetY = -(resizeInfo.height - MIN_CELL_HEIGHT); diff --git a/packages/s2-core/src/utils/export/copy.ts b/packages/s2-core/src/utils/export/copy.ts index 74b628114a..39704259c0 100644 --- a/packages/s2-core/src/utils/export/copy.ts +++ b/packages/s2-core/src/utils/export/copy.ts @@ -4,6 +4,7 @@ import { filter, forEach, isEmpty, + isEqual, isNil, map, max, @@ -12,25 +13,25 @@ import { repeat, zip, } from 'lodash'; +import type { ColCell, RowCell } from '../../cell'; import { - type CellMeta, CellTypes, CopyType, EMPTY_PLACEHOLDER, EXTRA_FIELD, ID_SEPARATOR, InteractionStateName, - VALUE_FIELD, SERIES_NUMBER_FIELD, + VALUE_FIELD, + type CellMeta, type RowData, } from '../../common'; import type { DataType } from '../../data-set/interface'; import type { Node } from '../../facet/layout/node'; import type { SpreadSheet } from '../../sheet-type'; import { copyToClipboard } from '../../utils/export'; -import type { ColCell, RowCell } from '../../cell'; -import { getEmptyPlaceholder } from '../text'; import { flattenDeep } from '../data-set-operate'; +import { getEmptyPlaceholder } from '../text'; export function keyEqualTo(key: string, compareKey: string) { if (!key || !compareKey) { @@ -659,11 +660,20 @@ function getCellMatrix( const meta = cell.getMeta(); const { id, label, isTotals, level } = meta; let cellId = id; + // 为总计小计补齐高度 if (isTotals && level !== maxLevel) { cellId = id + ID_SEPARATOR + repeat(label, maxLevel - level); } - return getHeaderList(cellId, allLevel.size); + + // 将指标维度单元格的标签替换为实际文本 + const actualText = cell.getActualText(); + const headerList = getHeaderList(cellId, allLevel.size); + const formattedHeaderList = map(headerList, (header) => + isEqual(header, label) ? actualText : header, + ); + + return formattedHeaderList; }); } diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts index 0a2117cee5..52719ad7ee 100644 --- a/packages/s2-react/playground/config.ts +++ b/packages/s2-react/playground/config.ts @@ -83,6 +83,23 @@ export const s2Options: SheetComponentOptions = { }, ], }, + headerActionIcons: [ + { + iconNames: ['SortDown'], + belongsCell: 'colCell', + defaultHide: true, + }, + { + iconNames: ['SortDown'], + belongsCell: 'rowCell', + defaultHide: true, + }, + { + iconNames: ['SortDown'], + belongsCell: 'cornerCell', + defaultHide: true, + }, + ], hierarchyType: 'grid', style: { colCfg: { diff --git a/s2-site/docs/api/general/S2Event.en.md b/s2-site/docs/api/general/S2Event.en.md index 2a83160860..785aff9c0a 100644 --- a/s2-site/docs/api/general/S2Event.en.md +++ b/s2-site/docs/api/general/S2Event.en.md @@ -54,6 +54,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { | mouse release | `S2Event.DATA_CELL_MOUSE_UP` | Value cell mouse release | | trend icon click | `S2Event.DATA_CELL_TREND_ICON_CLICK` | Click on the trend icon in the tooltip of the value cell | | Swipe | `S2Event.DATA_CELL_BRUSH_SELECTION` | Value cell selection | +| Select move | `S2Event.DATA_CELL_SELECT_MOVE` | Value cell select move | ### Corner head diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md index 290a343322..83bfcdc756 100644 --- a/s2-site/docs/api/general/S2Event.zh.md +++ b/s2-site/docs/api/general/S2Event.zh.md @@ -58,6 +58,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => { | 鼠标松开 | `S2Event.DATA_CELL_MOUSE_UP` | 数值单元格鼠标松开 | | 趋势 icon 点击 | `S2Event.DATA_CELL_TREND_ICON_CLICK` | 数值单元格 tooltip 里面的趋势 icon 点击 | | 刷选 | `S2Event.DATA_CELL_BRUSH_SELECTION` | 数值单元格刷选 | +| 键盘方向键移动 | `S2Event.DATA_CELL_SELECT_MOVE` | 数值单元格键盘方向键移动 | ### 角头