Skip to content

Commit

Permalink
feat(interaction): 宽高调整事件透出 resizedWidth/resizedHeight, 修复错误类型定义 (#1638)
Browse files Browse the repository at this point in the history 
* feat(interaction): 宽高调整事件透出 resizedWidth/resizedHeight, 修复错误类型定义

* docs: 优化文档

* chore: 更新 reviewer
  • Loading branch information
@lijinke666
lijinke666 authored Aug 5, 2022
1 parent f9290f1 commit 2301d4e
Show file tree
Hide file tree
Showing 9 changed files with 141 additions and 32 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/pr-auto-assign-reviewer.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,5 @@ jobs:
with:
token: ${{ secrets.GITHUB_TOKEN }}
pr-emoji: '+1, rocket'
reviewers: 'xingwanying,qubaomingg,lcx-seima,YardWill,lijinke666,wjgogogo,zxc0328,stone-lyl,'
reviewers: 'xingwanying,qubaomingg,lcx-seima,YardWill,lijinke666,wjgogogo,stone-lyl,GaoFuhong'
review-creator: false
26 changes: 26 additions & 0 deletions packages/s2-core/__tests__/spreadsheet/spread-sheet-resize-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,32 @@ describe('SpreadSheet Resize Active Tests', () => {
expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeNull();
});

// https://github.com/antvis/S2/issues/1603
test('should disable col cell resize area if col is hidden', () => {
const s2 = renderSheet({
interaction: {
resize: {
colCellHorizontal: false,
colCellVertical: true,
},
},
} as S2Options);

s2.setOptions({
style: {
colCfg: {
height: 0,
},
},
});

s2.render(false);

const group = s2.facet.foregroundGroup;

expect(group.findById(KEY_GROUP_COL_RESIZE_AREA)).toBeNull();
});

test('should disable col cell vertical direction resize area', () => {
const s2 = renderSheet({
interaction: {
Expand Down
53 changes: 53 additions & 0 deletions packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
type S2Options,
SpreadSheet,
type ThemeCfg,
customMerge,
} from '@/index';
import type { BaseFacet } from '@/facet/base-facet';

Expand Down Expand Up @@ -233,6 +234,8 @@ describe('Interaction Row Column Resize Tests', () => {
isResizeArea: true,
effect: ResizeAreaEffect.Cell,
id: '',
resizedWidth: 5,
resizedHeight: 0,
} as ResizeInfo;

emitResizeEvent(
Expand Down Expand Up @@ -343,6 +346,8 @@ describe('Interaction Row Column Resize Tests', () => {
isResizeArea: true,
effect: ResizeAreaEffect.Cell,
id: '',
resizedWidth: 0,
resizedHeight: 2,
} as ResizeInfo;

emitResizeEvent(
Expand Down Expand Up @@ -409,31 +414,79 @@ describe('Interaction Row Column Resize Tests', () => {
});

test('should get horizontal tree resize style', () => {
const resize = jest.fn();
const treeWidthResize = jest.fn();

s2.on(S2Event.LAYOUT_RESIZE_TREE_WIDTH, treeWidthResize);
s2.on(S2Event.LAYOUT_RESIZE, resize);

const resizeInfo = emitResize(
ResizeDirectionType.Horizontal,
ResizeAreaEffect.Tree,
);

const newResizeInfo = {
info: { ...resizeInfo, resizedWidth: 5, resizedHeight: 0 },
style: {
rowCfg: {
treeRowsWidth: 5,
},
},
};
expect(resize).toHaveBeenCalledWith(newResizeInfo);
expect(treeWidthResize).toHaveBeenCalledWith(newResizeInfo);
expect(s2.options.style.rowCfg.treeRowsWidth).toEqual(resizeInfo.width);
});

test('should get horizontal filed resize style', () => {
const resize = jest.fn();
const rowWidthResize = jest.fn();

s2.on(S2Event.LAYOUT_RESIZE_ROW_WIDTH, rowWidthResize);
s2.on(S2Event.LAYOUT_RESIZE, resize);

const resizeInfo = emitResize(
ResizeDirectionType.Horizontal,
ResizeAreaEffect.Field,
);

const newResizeInfo = {
info: { ...resizeInfo, resizedWidth: 5, resizedHeight: 0 },
style: {
rowCfg: {
widthByField: {
[resizeInfo.id]: 5,
},
},
},
};

expect(resize).toHaveBeenCalledWith(newResizeInfo);
expect(rowWidthResize).toHaveBeenCalledWith(newResizeInfo);
expect(s2.options.style.rowCfg.widthByField).toEqual({
[resizeInfo.id]: resizeInfo.width,
});
});

test('should get horizontal series resize style', () => {
const resize = jest.fn();
const seriesWidthResize = jest.fn();

s2.on(S2Event.LAYOUT_RESIZE_SERIES_WIDTH, seriesWidthResize);
s2.on(S2Event.LAYOUT_RESIZE, resize);

const resizeInfo = emitResize(
ResizeDirectionType.Horizontal,
ResizeAreaEffect.Series,
);

const newResizeInfo = {
info: { ...resizeInfo, resizedWidth: 5, resizedHeight: 0 },
style: undefined,
};

expect(resize).toHaveBeenCalledWith(newResizeInfo);
expect(seriesWidthResize).toHaveBeenCalledWith(newResizeInfo);
expect(s2.theme.rowCell.seriesNumberWidth).toEqual(resizeInfo.width);
});

Expand Down
8 changes: 7 additions & 1 deletion packages/s2-core/src/cell/col-cell.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,13 @@ export class ColCell extends HeaderCell {
}

protected drawHorizontalResizeArea() {
if (!this.shouldDrawResizeAreaByType('colCellVertical', this)) {
// 隐藏列头时不绘制水平热区 https://github.com/antvis/S2/issues/1603
const isHiddenCol = this.spreadsheet.options.style?.colCfg?.height === 0;

if (
isHiddenCol ||
!this.shouldDrawResizeAreaByType('colCellVertical', this)
) {
return;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/s2-core/src/common/interface/resize.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export interface ResizeDetail {
}

export interface ResizeParams {
resizeInfo?: ResizeInfo;
style?: Style;
info: ResizeInfo;
style: Style;
}

export interface ResizeInfo {
Expand Down
35 changes: 23 additions & 12 deletions packages/s2-core/src/interaction/row-column-resize.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type {
ShapeAttrs,
} from '@antv/g-canvas';
import { clone, isEmpty, throttle } from 'lodash';
import type { ResizeInteractionOptions, Style } from '../common';
import type { ResizeInteractionOptions, ResizeParams, Style } from '../common';
import {
InterceptType,
MIN_CELL_HEIGHT,
Expand Down Expand Up @@ -204,18 +204,17 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
private getDisAllowResizeInfo() {
const resizeInfo = this.getResizeInfo();
const { resize } = this.spreadsheet.options.interaction;
const { start, end } = this.getResizeGuideLinePosition();
const resizedWidth = Math.floor(end.x - start.x);
const resizedHeight = Math.floor(end.y - start.y);

const originalWidth = resizeInfo.width;
const originalHeight = resizeInfo.height;

const isDisabled = (resize as ResizeInteractionOptions)?.disable?.({
...resizeInfo,
const {
width: originalWidth,
height: originalHeight,
resizedWidth,
resizedHeight,
});
} = resizeInfo;

const isDisabled = (resize as ResizeInteractionOptions)?.disable?.(
resizeInfo,
);

const displayWidth = isDisabled ? originalWidth : resizedWidth;
const displayHeight = isDisabled ? originalHeight : resizedHeight;
Expand Down Expand Up @@ -468,10 +467,11 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
eventType: resizeEventType,
} = this.getResizeDetail() || {};

const resizeDetail = {
const resizeDetail: ResizeParams = {
info: resizeInfo,
style,
};

this.spreadsheet.emit(S2Event.LAYOUT_RESIZE, resizeDetail);
this.spreadsheet.emit(resizeEventType, resizeDetail);

Expand All @@ -492,7 +492,18 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
}

private getResizeInfo(): ResizeInfo {
return this.getCellAppendInfo<ResizeInfo>(this.resizeTarget);
const defaultResizeInfo = this.getCellAppendInfo<ResizeInfo>(
this.resizeTarget,
);
const { start, end } = this.getResizeGuideLinePosition();
const resizedWidth = Math.floor(end.x - start.x);
const resizedHeight = Math.floor(end.y - start.y);

return {
...defaultResizeInfo,
resizedWidth,
resizedHeight,
};
}

private render() {
Expand Down
20 changes: 17 additions & 3 deletions packages/s2-react/playground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
type TooltipAutoAdjustBoundary,
getLang,
type InteractionOptions,
DEFAULT_STYLE,
} from '@antv/s2';
import type { Adaptive, SheetType } from '@antv/s2-shared';
import corePkg from '@antv/s2/package.json';
Expand Down Expand Up @@ -770,7 +771,7 @@ function MainLayout() {
<Switch
checkedChildren="打开链接跳转"
unCheckedChildren="无链接跳转"
checked={mergedOptions.interaction.linkFields.length}
checked={!!mergedOptions.interaction.linkFields.length}
onChange={(checked) => {
updateOptions({
interaction: {
Expand All @@ -779,6 +780,20 @@ function MainLayout() {
});
}}
/>
<Switch
checkedChildren="隐藏列头"
unCheckedChildren="显示列头"
checked={mergedOptions.style?.colCfg?.height === 0}
onChange={(checked) => {
updateOptions({
style: {
colCfg: {
height: checked ? 0 : DEFAULT_STYLE.colCfg.height,
},
},
});
}}
/>
</Space>
</Collapse.Panel>
<Collapse.Panel header="交互配置" key="interaction">
Expand Down Expand Up @@ -940,8 +955,7 @@ function MainLayout() {
});
}}
onDataCellClick={logHandler('onDataCellClick')}
onLayoutResizeMouseDown={logHandler('onLayoutResizeMouseDown')}
onLayoutResizeMouseUp={logHandler('onLayoutResizeMouseUp')}
onLayoutResize={logHandler('onLayoutResize')}
onCopied={logHandler('onCopied')}
onLayoutColsHidden={logHandler('onLayoutColsHidden')}
onLayoutColsExpanded={logHandler('onLayoutColsExpanded')}
Expand Down
23 changes: 11 additions & 12 deletions s2-site/docs/api/components/sheet-component.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,28 +231,27 @@ order: 0

## ResizeParams

功能描述：表格 resize（ 表体尺寸大小变化、单元格行高列宽拖动变化） 信息
功能描述：表格 resize（单元格行高列宽拖动变化）和单元格样式信息

| 参数 | 说明 | 类型 | 默认值 | 必选 |
| :-- | :-- | :-- | :-- | :-: |
| resizeInfo | resize 配置信息 | [ResizeInfo](#resizeinfo) | | |
| info | resize 配置信息 | [ResizeInfo](#resizeinfo) | | |
| style | options 中样式相关配置 | [style](/zh/docs/api/general/S2Options#style) | | |

## ResizeInfo

功能描述：表格 resize（ 表体尺寸大小变化、单元格行高列宽拖动变化） 配置信息
功能描述：表格 resize（ 单元格行高列宽拖动变化）配置信息

| 参数 | 说明 | 类型 | 默认值 | 必选 |
| :-- | :-- | :-- | :-- | :-: |
| theme | resize 热区配置 | [ResizeArea](#resizearea) | | ✓ |
| type | resize 方向 | `Horizontal` \| `Vertical` | | ✓ |
| offsetX | 横向偏移量 | `number` | | ✓ |
| offsetY | 纵向偏移量 | `number` | | ✓ |
| offsetX | 横向偏移量 | `number` | | ✓ |
| width | 拖拽的宽度 | `number` | | ✓ |
| height | 拖拽 | `number` | | ✓ |
| size | 热区尺寸 | `number` | | ✓ |
| effect | 拖拽更改影响的区域 | `Field` \| `Cell` \| `Tree` \| `Series` | | ✓ |
| theme | resize 热区配置 | [ResizeArea](#resizearea) | | |
| type | resize 方向 | `Horizontal` \| `Vertical` | | |
| offsetX | 横向偏移量 | `number` | | |
| offsetY | 纵向偏移量 | `number` | | |
| width | 拖拽的宽度 | `number` | | |
| height | 拖拽 | `number` | | |
| size | 热区尺寸 | `number` | | |
| effect | 拖拽更改影响的区域 | `Field` \| `Cell` \| `Tree` \| `Series` | | |
| isResizeArea | 是否属于 resize 热区 | [style](/zh/docs/api/general/S2Options#style) | | |
| id | 字段 id | `string` | | |
| meta | resize 热区对应单元格节点信息 | [Node](/zh/docs/api/basic-class/node) | | |
Expand Down
2 changes: 1 addition & 1 deletion s2-site/docs/common/interaction.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ interface ScrollSpeedRatio {
| rowCellVertical | 是否开启行头垂直方向 resize 热区 | `boolean` | true | |
| cornerCellHorizontal | 是否开启角头水平方向 resize 热区 | `boolean` | true | |
| colCellHorizontal | 是否开启列头水平方向 resize 热区 | `boolean` | true | |
| colCellVertical | 是否开启列头垂直方向 resize 热区 | `boolean` | true | |
| colCellVertical | 是否开启列头垂直方向 resize 热区 （列头隐藏时该配置无效） | `boolean` | true | |
| rowResizeType | 用于控制行高 resize 时是同时对所有 Cell 生效，还是只对当前行生效。默认对所有行生效 | `all`\| `current` | `all` | |
| disable | 用于控制行高 resize 是否生效 查看例子 | (resizeInfo: [S2CellType](/zh/docs/api/components/sheet-component#resizeinfo)) => boolean | | |
| visible | 自定义当前单元格是否显示 resize 热区 | (cell: [S2CellType](/zh/docs/api/basic-class/base-cell)) => boolean | | |

0 comments on commit 2301d4e

Please sign in to comment.