diff --git a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap index 67e7c97998..f836cf3c9f 100644 --- a/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap +++ b/packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap @@ -20,7 +20,7 @@ Object { "heightByField": null, "maxLines": 1, "textOverflow": "ellipsis", - "width": null, + "width": undefined, "widthByField": Object { "testFieldId": 5, }, @@ -34,7 +34,7 @@ Object { "heightByField": null, "maxLines": 1, "textOverflow": "ellipsis", - "width": null, + "width": undefined, "widthByField": Object { "testField": 5, }, @@ -48,9 +48,10 @@ Object { "heightByField": null, "maxLines": 1, "textOverflow": "ellipsis", - "width": null, + "width": undefined, "widthByField": Object { - "testFieldId": 5, + "test-cell-a": 5, + "test-cell-b": 5, }, "wordWrap": true, } @@ -62,7 +63,7 @@ Object { "heightByField": null, "maxLines": 1, "textOverflow": "ellipsis", - "width": null, + "width": undefined, "widthByField": Object { "test-cell-a": 5, "test-cell-b": 5, @@ -73,7 +74,7 @@ Object { exports[`Interaction Row Column Resize Tests should get multiple vertical filed resize style by field for selected resize type 1`] = ` Object { - "height": null, + "height": undefined, "heightByField": Object { "test-cell-a": 2, "test-cell-b": 2, @@ -123,7 +124,7 @@ Object { exports[`Interaction Row Column Resize Tests should get vertical filed resize style by field for current resize type 1`] = ` Object { - "height": null, + "height": undefined, "heightByField": Object { "testFieldId": 2, }, @@ -137,9 +138,10 @@ Object { exports[`Interaction Row Column Resize Tests should get vertical filed resize style by field for selected resize type 1`] = ` Object { - "height": null, + "height": undefined, "heightByField": Object { - "testFieldId": 2, + "test-cell-a": 2, + "test-cell-b": 2, }, "maxLines": 1, "showTreeLeafNodeAlignDot": false, @@ -163,6 +165,20 @@ Object { } `; +exports[`Interaction Row Column Resize Tests should not effect default resize style by field for selected resize type 1`] = ` +Object { + "height": 30, + "heightByField": null, + "maxLines": 1, + "textOverflow": "ellipsis", + "width": 50, + "widthByField": Object { + "testFieldId": 5, + }, + "wordWrap": true, +} +`; + exports[`Interaction Row Column Resize Tests should rerender by resize col cell 1`] = ` Object { "height": 30, 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 49d0664cda..a1e069dd0e 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 @@ -160,10 +160,12 @@ describe('Interaction Row Column Resize Tests', () => { s2.hideTooltip = jest.fn(); s2.interaction.reset = jest.fn(); s2.interaction.getActiveRowCells = () => [ - createMockCellInfo('test-row-cell').mockCell, + createMockCellInfo('test-row-cell-a').mockCell, + createMockCellInfo('test-row-cell-b').mockCell, ]; s2.interaction.getActiveColCells = () => [ - createMockCellInfo('test-col-cell').mockCell, + createMockCellInfo('test-col-cell-a').mockCell, + createMockCellInfo('test-col-cell-b').mockCell, ]; // 模拟多选 @@ -823,6 +825,10 @@ describe('Interaction Row Column Resize Tests', () => { }, }); + jest + .spyOn(s2.interaction, 'isSelectedState') + .mockImplementationOnce(() => true); + emitResize(ResizeDirectionType.Horizontal, ResizeAreaEffect.Cell); expect(s2.options.style!.colCell).toMatchSnapshot(); @@ -839,6 +845,10 @@ describe('Interaction Row Column Resize Tests', () => { }, }); + jest + .spyOn(s2.interaction, 'isSelectedState') + .mockImplementationOnce(() => true); + emitResize(ResizeDirectionType.Vertical, ResizeAreaEffect.Cell); expect(s2.options.style!.rowCell).toMatchSnapshot(); @@ -895,4 +905,25 @@ describe('Interaction Row Column Resize Tests', () => { expect(s2.options.style!.colCell).toMatchSnapshot(); }); + + // https://github.com/antvis/S2/issues/2910 + test('should not effect default resize style by field for selected resize type', () => { + s2.setOptions({ + style: { + colCell: { + width: 50, + }, + }, + interaction: { + resize: { + rowResizeType: ResizeType.CURRENT, + colResizeType: ResizeType.CURRENT, + }, + }, + }); + + emitResize(ResizeDirectionType.Horizontal, ResizeAreaEffect.Cell); + + expect(s2.options.style!.colCell).toMatchSnapshot(); + }); }); diff --git a/packages/s2-core/src/interaction/row-column-resize.ts b/packages/s2-core/src/interaction/row-column-resize.ts index 0d63ba518e..c0f0bbf8bc 100644 --- a/packages/s2-core/src/interaction/row-column-resize.ts +++ b/packages/s2-core/src/interaction/row-column-resize.ts @@ -303,8 +303,8 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { // 非多选: 正常设置即可 if ( - !this.isEffectRowOf(ResizeType.SELECTED) || - !this.isEffectColOf(ResizeType.SELECTED) || + (!this.isEffectRowOf(ResizeType.SELECTED) && + !this.isEffectColOf(ResizeType.SELECTED)) || !isMultiSelected ) { return { @@ -360,7 +360,9 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { eventType: S2Event.LAYOUT_RESIZE_COL_WIDTH, style: { colCell: { - width: !this.isEffectColOf(ResizeType.ALL) ? null : displayWidth, + width: !this.isEffectColOf(ResizeType.ALL) + ? undefined + : displayWidth, widthByField: this.getCellStyleByField(displayWidth), }, }, @@ -398,7 +400,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement { style: { rowCell: { height: !this.isEffectRowOf(ResizeType.ALL) - ? null + ? undefined : displayHeight, heightByField: this.getCellStyleByField(displayHeight), }, diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md index 0a614389c7..209fbac516 100644 --- a/s2-site/docs/common/interaction.zh.md +++ b/s2-site/docs/common/interaction.zh.md @@ -68,8 +68,8 @@ interface ScrollSpeedRatio { | cornerCellHorizontal | 是否开启角头水平方向 resize 热区 | `boolean` | true | | | colCellHorizontal | 是否开启列头水平方向 resize 热区 | `boolean` | true | | | colCellVertical | 是否开启列头垂直方向 resize 热区 (列头隐藏时该配置无效) | `boolean` | true | | -| rowResizeType | 用于控制行高 resize 时的生效范围
1. `all`: 对所有单元格生效,2. `current`: 对当前单元格生效,3. `selected`: 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。| `all`\| `current` \| `selected` | `current` | | -| colResizeType | 用于控制列宽 resize 时的生效范围
1. `all`: 对所有单元格生效,2. `current`: 对当前单元格生效,3. `selected`: 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。| `all`\| `current` \| `selected` | `current` | | +| rowResizeType | 用于控制行高 resize 时的生效范围
1. `all`: 对所有单元格生效(会覆盖默认的行高配置),2. `current`: 对当前单元格生效,3. `selected`: 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。| `all`\| `current` \| `selected` | `current` | | +| colResizeType | 用于控制列宽 resize 时的生效范围
1. `all`: 对所有单元格生效(会覆盖默认的列宽配置),2. `current`: 对当前单元格生效,3. `selected`: 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。| `all`\| `current` \| `selected` | `current` | | | disable | 用于控制行高 resize 是否生效。[查看示例](/examples/interaction/advanced/#resize-disable) | (resizeInfo: [S2CellType](/docs/api/components/sheet-component#resizeinfo)) => boolean | | | | visible | 自定义当前单元格是否显示 resize 热区 | (cell: [S2CellType](/docs/api/basic-class/base-cell)) => boolean | | | | minCellWidth | 单元格可拖拽最小宽度 | `number`| 20 | |