Skip to content

Commit

Permalink
feat: 刷选时支持高亮所有对应的行列头cell (#1680)
Browse files Browse the repository at this point in the history 
* feat: 刷选时支持高亮所有对应的行列头cell

* fix: 补充用例和文档

Co-authored-by: owen.wjh <[email protected]>
  • Loading branch information
@serializedowen
serializedowen and owen.wjh authored Aug 12, 2022
1 parent cfbccb9 commit c7fb53f
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 54 deletions.
54 changes: 28 additions & 26 deletions packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const options: S2Options = {
interaction: {
enableCopy: true,
hoverHighlight: false,
selectedCellHighlight: true,
linkFields: ['order_id', 'customer_name'],
hiddenColumnFields: ['order_date'],
resize: {
Expand All @@ -97,7 +98,6 @@ const options: S2Options = {
};

describe('TableSheet normal spec', () => {

test('scrollWithAnimation with duration and callback', async () => {
const s2 = new TableSheet(getContainer(), dataCfg, options);
s2.render();
Expand Down Expand Up @@ -146,11 +146,10 @@ describe('TableSheet normal spec', () => {
);
await sleep(30);

const firstColCell = s2.getColumnNodes()[1].belongsCell as any;

const firstColCell = s2.getColumnNodes()[1].belongsCell as any

expect(firstColCell.shouldAddVerticalResizeArea()).toBe(true)
expect(firstColCell.getVerticalResizeAreaOffset()).toEqual({ x: 80, y: 0 })
expect(firstColCell.shouldAddVerticalResizeArea()).toBe(true);
expect(firstColCell.getVerticalResizeAreaOffset()).toEqual({ x: 80, y: 0 });

s2.destroy();
});
Expand All @@ -161,32 +160,35 @@ describe('TableSheet normal spec', () => {

await sleep(30);

const { x, width, top } = s2.getCanvasElement().getBoundingClientRect()
s2.getCanvasElement().dispatchEvent(new MouseEvent('mousedown', {
clientX: x + width - 1,
clientY: top + 25,
}))


window.dispatchEvent(new MouseEvent('mousemove', {
clientX: x+ width + 100,
clientY: top + 25,
const { x, width, top } = s2.getCanvasElement().getBoundingClientRect();
s2.getCanvasElement().dispatchEvent(
new MouseEvent('mousedown', {
clientX: x + width - 1,
clientY: top + 25,
}),
);

}))
window.dispatchEvent(
new MouseEvent('mousemove', {
clientX: x + width + 100,
clientY: top + 25,
}),
);
await sleep(300);

window.dispatchEvent(new MouseEvent('mouseup', {
clientX: x + width + 100,
clientY: top + 25
}))
window.dispatchEvent(
new MouseEvent('mouseup', {
clientX: x + width + 100,
clientY: top + 25,
}),
);

await sleep(300);

const columnNodes = s2.getColumnNodes()
const lastColumnCell = columnNodes[columnNodes.length - 1].belongsCell as ColCell

expect(lastColumnCell.getMeta().width).toBe(199)
});

const columnNodes = s2.getColumnNodes();
const lastColumnCell = columnNodes[columnNodes.length - 1]
.belongsCell as ColCell;

expect(lastColumnCell.getMeta().width).toBe(199);
});
});
40 changes: 40 additions & 0 deletions packages/s2-core/__tests__/unit/interaction/brush-selection-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,46 @@ describe('Interaction Brush Selection Tests', () => {
).toBeFalsy();
});

test('should highlight relevant col&row header cell with selectedCellHighlight option toggled on', () => {
mockSpreadSheetInstance.setOptions({
interaction: { selectedCellHighlight: true },
});

brushSelectionInstance.getBrushRange = () => {
return {
start: {
rowIndex: 0,
colIndex: 0,
x: 0,
y: 0,
},
end: {
rowIndex: 5,
colIndex: 5,
x: 200,
y: 200,
},
width: 200,
height: 200,
};
};

(brushSelectionInstance as any).updateSelectedCells();

(mockRootInteraction.getAllColHeaderCells() || [])
.filter((cell, i) => i < 5)
.forEach((cell) => {
expect(cell.updateByState).toHaveBeenCalled();
});

mockRootInteraction.getAllCells();

(mockRootInteraction.getAllRowHeaderCells() || [])
.filter((cell, i) => i < 5)
.forEach((cell) => {
expect(cell.updateByState).toHaveBeenCalled();
});
});
test('should get start brush point when mouse down', () => {
emitEvent(S2Event.DATA_CELL_MOUSE_DOWN, {
layerX: 10,
Expand Down
23 changes: 2 additions & 21 deletions packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import type {
import {
getCellMeta,
getRowCellForSelectedCell,
updateRowColCells,
} from '../../../utils/interaction/select-event';
import {
getTooltipOptions,
Expand Down Expand Up @@ -67,31 +68,11 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
this.spreadsheet.emit(S2Event.GLOBAL_SELECTED, [cell]);
this.showTooltip(event, meta);
if (options.interaction.selectedCellHighlight) {
this.updateRowColCells(meta);
updateRowColCells(meta);
}
});
}

public updateRowColCells(meta: ViewMeta) {
const { rowId, colId } = meta;
const { interaction } = this.spreadsheet;
updateAllColHeaderCellState(
colId,
interaction.getAllColHeaderCells(),
InteractionStateName.SELECTED,
);

if (rowId) {
const allRowHeaderCells = getRowCellForSelectedCell(
meta,
this.spreadsheet,
);
forEach(allRowHeaderCells, (cell: RowCell) => {
cell.updateByState(InteractionStateName.SELECTED);
});
}
}

private getTooltipOperator(
event: CanvasEvent,
meta: ViewMeta,
Expand Down
24 changes: 19 additions & 5 deletions packages/s2-core/src/interaction/brush-selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ import {
getScrollOffsetForCol,
getScrollOffsetForRow,
} from '../utils/interaction/';
import { getCellMeta } from '../utils/interaction/select-event';
import {
getCellMeta,
updateRowColCells,
} from '../utils/interaction/select-event';
import { getValidFrozenOptions } from '../utils/layout/frozen';
import { getActiveCellsTooltipData } from '../utils/tooltip';
import type { BaseEventImplement } from './base-event';
Expand Down Expand Up @@ -679,16 +682,19 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {
colIndex < range.end.colIndex + 1;
colIndex++
) {
const colId = colLeafNodes[colIndex].id;
const colId = String(colLeafNodes[colIndex].id);
let rowId = String(rowIndex);
if (rowLeafNodes.length) {
rowId = rowLeafNodes[rowIndex].id;
rowId = String(rowLeafNodes[rowIndex].id);
}
metas.push({
colIndex,
rowIndex,
id: `${rowId}-${colId}`,
type: 'dataCell',
rowId,
colId,
spreadsheet: this.spreadsheet,
});
}
}
Expand All @@ -697,14 +703,22 @@ export class BrushSelection extends BaseEvent implements BaseEventImplement {

// 最终刷选的cell
private updateSelectedCells() {
const { interaction } = this.spreadsheet;
const { interaction, options } = this.spreadsheet;

const range = this.getBrushRange();

const selectedCellMetas = this.getSelectedCellMetas(range);
interaction.changeState({
cells: this.getSelectedCellMetas(range),
cells: selectedCellMetas,
stateName: InteractionStateName.SELECTED,
});

if (options.interaction.selectedCellHighlight) {
selectedCellMetas.forEach((meta) => {
updateRowColCells(meta);
});
}

this.spreadsheet.emit(
S2Event.DATA_CELL_BRUSH_SELECTION,
this.brushRangeDataCells,
Expand Down
23 changes: 22 additions & 1 deletion packages/s2-core/src/utils/interaction/select-event.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { forEach } from 'lodash';
import { ColCell, RowCell, TableSeriesCell } from '../../cell';
import { getDataCellId } from '../cell/data-cell';
import {
Expand All @@ -7,7 +8,10 @@ import {
} from '../../common/constant';
import type { CellMeta, S2CellType, ViewMeta } from '../../common/interface';
import type { SpreadSheet } from '../../sheet-type';
import { getActiveHoverRowColCells } from './hover-event';
import {
getActiveHoverRowColCells,
updateAllColHeaderCellState,
} from './hover-event';

export const isMultiSelectionKey = (e: KeyboardEvent) => {
return [InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL].includes(
Expand Down Expand Up @@ -81,3 +85,20 @@ export function getRowCellForSelectedCell(
spreadsheet.isHierarchyTreeType(),
);
}

export function updateRowColCells(meta: ViewMeta) {
const { rowId, colId, spreadsheet } = meta;
const { interaction } = spreadsheet;
updateAllColHeaderCellState(
colId,
interaction.getAllColHeaderCells(),
InteractionStateName.SELECTED,
);

if (rowId) {
const allRowHeaderCells = getRowCellForSelectedCell(meta, spreadsheet);
forEach(allRowHeaderCells, (cell: RowCell) => {
cell.updateByState(InteractionStateName.SELECTED);
});
}
}
14 changes: 14 additions & 0 deletions packages/s2-react/playground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -812,6 +812,20 @@ function MainLayout() {
}}
/>
</Tooltip>
<Tooltip title="高亮选中单元格">
<Switch
checkedChildren="选中高亮开"
unCheckedChildren="选中高亮关"
checked={mergedOptions.interaction?.selectedCellHighlight}
onChange={(checked) => {
updateOptions({
interaction: {
selectedCellHighlight: checked,
},
});
}}
/>
</Tooltip>
<Tooltip title="高亮当前行列单元格">
<Switch
checkedChildren="hover十字器开"
Expand Down
2 changes: 1 addition & 1 deletion s2-site/docs/manual/advanced/interaction/basic.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ const s2Options = {

### 单选后行列头高亮

在鼠标选中单元格后时，高亮当前单元格对应的行列头单元格，利于快速定位单元格所在行列。默认关闭，可配置 `selectedCellHighlight` 开启：
在鼠标选中单元格或刷选选中单元格时，高亮当前单元格对应的行列头单元格，利于快速定位单元格所在行列。默认关闭，可配置 `selectedCellHighlight` 开启：

<img src="https://gw.alipayobjects.com/mdn/rms_28a65c/afts/img/A*bqsoRpdz8mgAAAAAAAAAAAAAARQnAQ" alt="preview" width="600" />

Expand Down

1 comment on commit c7fb53f

@vercel
Copy link

@vercel vercel bot commented on c7fb53f Aug 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

antvis-s2 – ./

antvis-s2.vercel.app
antvis-s2-git-master-antv-s2.vercel.app
antvis-s2-antv-s2.vercel.app

Please sign in to comment.