From da2a78ec511a85380824fa2b7147854e857df7f3 Mon Sep 17 00:00:00 2001 From: Xinhui Date: Tue, 21 Jun 2022 19:55:51 +0800 Subject: [PATCH] =?UTF-8?q?feat(interaction):=20=E6=B7=BB=E5=8A=A0=20onDat?= =?UTF-8?q?aCellSelectMove=20=E4=BA=8B=E4=BB=B6=20(#1468)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 添加 selectmove 事件 * feat: 添加文档 --- .../__tests__/unit/interaction/selected-cell-move-spec.ts | 3 +++ packages/s2-core/src/common/constant/events/basic.ts | 1 + packages/s2-core/src/common/interface/emitter.ts | 2 ++ packages/s2-core/src/interaction/selected-cell-move.ts | 1 + packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts | 8 ++++++++ packages/s2-react/src/hooks/useEvents.ts | 1 + packages/s2-shared/__tests__/utils/options-spec.ts | 1 + packages/s2-shared/src/interface.ts | 2 ++ packages/s2-vue/src/hooks/useEvents.ts | 6 ++++++ packages/s2-vue/src/utils/initPropAndEmits.ts | 1 + s2-site/docs/api/components/sheet-component.zh.md | 1 + 11 files changed, 27 insertions(+) diff --git a/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts b/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts index 4d3add60e7..330b10a5f5 100644 --- a/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts +++ b/packages/s2-core/__tests__/unit/interaction/selected-cell-move-spec.ts @@ -219,11 +219,13 @@ describe('Interaction Keyboard Move Tests', () => { }); test('should move selected with shift', () => { + const callback = jest.fn(() => {}); s2.interaction.changeState = jest.fn((state) => {}); s2.interaction.getCells = () => [mockCell00.mockCell as any]; // select cell keyboardMove.startCell = mockCell00.mockCell; keyboardMove.endCell = mockCell00.mockCell; + s2.on(S2Event.DATE_CELL_SELECT_MOVE, callback); s2.emit(S2Event.GLOBAL_KEYBOARD_DOWN, { key: InteractionKeyboardKey.ARROW_RIGHT, shiftKey: true, @@ -251,6 +253,7 @@ describe('Interaction Keyboard Move Tests', () => { ], stateName: 'selected', }); + expect(callback).toBeCalled(); }); test('should move selected with shift and meta', () => { diff --git a/packages/s2-core/src/common/constant/events/basic.ts b/packages/s2-core/src/common/constant/events/basic.ts index 37cd9e7b9c..6e4eaec406 100644 --- a/packages/s2-core/src/common/constant/events/basic.ts +++ b/packages/s2-core/src/common/constant/events/basic.ts @@ -28,6 +28,7 @@ export enum S2Event { DATA_CELL_MOUSE_MOVE = 'data-cell:mouse-move', DATA_CELL_TREND_ICON_CLICK = 'data-cell:trend-icon-click', DATE_CELL_BRUSH_SELECTION = 'data-cell:brush-selection', + DATE_CELL_SELECT_MOVE = 'data-cell:select-move', /** ================ Corner Cell ================ */ CORNER_CELL_HOVER = 'corner-cell:hover', diff --git a/packages/s2-core/src/common/interface/emitter.ts b/packages/s2-core/src/common/interface/emitter.ts index 3e70c737aa..087632d8cc 100644 --- a/packages/s2-core/src/common/interface/emitter.ts +++ b/packages/s2-core/src/common/interface/emitter.ts @@ -2,6 +2,7 @@ import type { Event as CanvasEvent } from '@antv/g-canvas'; import type { DataCell } from '../../cell/data-cell'; import type { S2Event } from '../../common/constant'; import type { + CellMeta, CellScrollPosition, HiddenColumnsInfo, LayoutResult, @@ -85,6 +86,7 @@ export interface EmitterType { [S2Event.DATA_CELL_CONTEXT_MENU]: CanvasEventHandler; [S2Event.DATA_CELL_TREND_ICON_CLICK]: (data: ViewMeta) => void; [S2Event.DATE_CELL_BRUSH_SELECTION]: (cells: DataCell[]) => void; + [S2Event.DATE_CELL_SELECT_MOVE]: (metas: CellMeta[]) => void; /** ================ Row Cell ================ */ [S2Event.ROW_CELL_MOUSE_DOWN]: CanvasEventHandler; diff --git a/packages/s2-core/src/interaction/selected-cell-move.ts b/packages/s2-core/src/interaction/selected-cell-move.ts index 868eb6b138..ed39fb3d9a 100644 --- a/packages/s2-core/src/interaction/selected-cell-move.ts +++ b/packages/s2-core/src/interaction/selected-cell-move.ts @@ -117,6 +117,7 @@ export class SelectedCellMove extends BaseEvent implements BaseEventImplement { this.startCell = movedCell; } this.endCell = movedCell; + this.spreadsheet.emit(S2Event.DATE_CELL_SELECT_MOVE, selectedCells); } private generateCellMeta(spreadsheet: SpreadSheet, row: number, col: number) { diff --git a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts index aadb5eef9b..d3d62f607f 100644 --- a/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts +++ b/packages/s2-react/__tests__/unit/hooks/useEvents-spec.ts @@ -247,6 +247,14 @@ const cellEventCases = [ event: S2Event.DATA_CELL_MOUSE_MOVE, name: 'onDataCellMouseMove', }, + { + event: S2Event.DATE_CELL_BRUSH_SELECTION, + name: 'onDataCellBrushSelection', + }, + { + event: S2Event.DATE_CELL_SELECT_MOVE, + name: 'onDataCellSelectMove', + }, { event: S2Event.CORNER_CELL_HOVER, name: 'onCornerCellHover', diff --git a/packages/s2-react/src/hooks/useEvents.ts b/packages/s2-react/src/hooks/useEvents.ts index 08cdeefb4b..b877e9b554 100644 --- a/packages/s2-react/src/hooks/useEvents.ts +++ b/packages/s2-react/src/hooks/useEvents.ts @@ -84,6 +84,7 @@ export function useEvents(props: SheetComponentsProps, s2: SpreadSheet) { props.onDataCellBrushSelection, s2, ); + useS2Event(S2Event.DATE_CELL_SELECT_MOVE, props.onDataCellSelectMove, s2); // ============== Corner Cell ==================== useCellEvent(S2Event.CORNER_CELL_HOVER, props.onCornerCellHover, s2); diff --git a/packages/s2-shared/__tests__/utils/options-spec.ts b/packages/s2-shared/__tests__/utils/options-spec.ts index 8d2516b9eb..3870e60e15 100644 --- a/packages/s2-shared/__tests__/utils/options-spec.ts +++ b/packages/s2-shared/__tests__/utils/options-spec.ts @@ -41,6 +41,7 @@ describe('Options Tests', () => { }, eventListenerOptions: false, overscrollBehavior: 'auto', + selectedCellHighlight: false, }, showSeriesNumber: false, customSVGIcons: [], diff --git a/packages/s2-shared/src/interface.ts b/packages/s2-shared/src/interface.ts index bb780d212e..c200775ea2 100644 --- a/packages/s2-shared/src/interface.ts +++ b/packages/s2-shared/src/interface.ts @@ -21,6 +21,7 @@ import type { TooltipOperatorOptions, S2RenderOptions, S2MountContainer, + CellMeta, } from '@antv/s2'; // 是否开启自适应宽高，并指定容器 @@ -97,6 +98,7 @@ export interface BaseSheetComponentProps< onDataCellMouseMove?: (data: TargetCellInfo) => void; onDataCellTrendIconClick?: (meta: ViewMeta) => void; onDataCellBrushSelection?: (brushRangeDataCells: DataCell[]) => void; + onDataCellSelectMove?: (metas: CellMeta[]) => void; // ============== Corner Cell ==================== onCornerCellHover?: (data: TargetCellInfo) => void; diff --git a/packages/s2-vue/src/hooks/useEvents.ts b/packages/s2-vue/src/hooks/useEvents.ts index 5ced223b6c..a1a9ccd73f 100644 --- a/packages/s2-vue/src/hooks/useEvents.ts +++ b/packages/s2-vue/src/hooks/useEvents.ts @@ -120,6 +120,12 @@ export const useEvents = ( S2Event.DATE_CELL_BRUSH_SELECTION, 'dataCellBrushSelection', ); + useS2Event( + s2Ref, + emit, + S2Event.DATE_CELL_SELECT_MOVE, + 'dataCellSelectMove', + ); // ============== Corner Cell ==================== useCellEvent(s2Ref, emit, S2Event.CORNER_CELL_HOVER, 'cornerCellHover'); diff --git a/packages/s2-vue/src/utils/initPropAndEmits.ts b/packages/s2-vue/src/utils/initPropAndEmits.ts index 90aecc96e0..c7f676fe1e 100644 --- a/packages/s2-vue/src/utils/initPropAndEmits.ts +++ b/packages/s2-vue/src/utils/initPropAndEmits.ts @@ -68,6 +68,7 @@ export const initBaseSheetEmits = () => { 'dataCellMouseMove', 'dataCellTrendIconClick', 'dataCellBrushSelection', + 'dataCellSelectMove', // ============== Corner Cell ==================== 'cornerCellHover', diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md index 8d235b76b2..a914fa94b8 100644 --- a/s2-site/docs/api/components/sheet-component.zh.md +++ b/s2-site/docs/api/components/sheet-component.zh.md @@ -47,6 +47,7 @@ order: 0 | onDataCellMouseMove | 数值单元格鼠标移动事件 | (data: [TargetCellInfo](#targetcellinfo)) => void | | | | onDataCellTrendIconClick | 趋势图 icon 点击事件 | (meta: [ViewMeta](/zh/docs/api/basic-class/node)) => void | | | | onDataCellBrushSelection | 单元格刷选事件 | (brushRangeDataCells: DataCell[]) => void | | | +| onDataCellSelectMove | 单元格键盘方向键移动事件 | (metas: CellMeta[]) => void | | | | onCornerCellHover | 角头鼠标悬停事件 | (data: [TargetCellInfo](#targetcellinfo)) => void | | | | onCornerCellClick | 角头鼠标单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void | | | | onCornerCellDoubleClick | 角头鼠标双击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void | | |