fix: 修复拖拽列宽后, 默认的自定义列宽失效 close #2910

antvis · Sep 30, 2024 · 2dd8876 · 2dd8876
1 parent c35bc03
commit 2dd8876
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 17 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -68,8 +68,8 @@ interface ScrollSpeedRatio {
 | cornerCellHorizontal | 是否开启角头水平方向 resize 热区                                                   | `boolean`         | true   |       |
 | colCellHorizontal    | 是否开启列头水平方向 resize 热区                                                   | `boolean`         | true   |       |
 | colCellVertical      | 是否开启列头垂直方向 resize 热区 （列头隐藏时该配置无效）                                                   | `boolean`         | true   |       |
-| rowResizeType        | 用于控制行高 resize 时的生效范围 <br/> 1. `all`: 对所有单元格生效，2. `current`: 对当前单元格生效，3. `selected`: 对当前单元格生效，如果单元格是多选状态，调整任意选中单元格，对所有选中的生效。| `all`\| `current` \| `selected` | `current`  |       |
-| colResizeType        | 用于控制列宽 resize 时的生效范围 <br/> 1. `all`: 对所有单元格生效，2. `current`: 对当前单元格生效，3. `selected`: 对当前单元格生效，如果单元格是多选状态，调整任意选中单元格，对所有选中的生效。| `all`\| `current` \| `selected` | `current`  |       |
+| rowResizeType        | 用于控制行高 resize 时的生效范围 <br/> 1. `all`: 对所有单元格生效（会覆盖默认的行高配置），2. `current`: 对当前单元格生效，3. `selected`: 对当前单元格生效，如果单元格是多选状态，调整任意选中单元格，对所有选中的生效。| `all`\| `current` \| `selected` | `current`  |       |
+| colResizeType        | 用于控制列宽 resize 时的生效范围 <br/> 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       |      |