fix(interaction): 修复在未选中状态下调整宽高, 错误的修改了相邻单元格的样式 (#2605)

packages/s2-core/__tests__/unit/interaction/__snapshots__/row-column-resize-spec.ts.snap

@@ -43,6 +43,20 @@ Object {
 `;
 
 exports[`Interaction Row Column Resize Tests should get horizontal filed resize style by field for selected resize type 1`] = `
+Object {
+  "height": 30,
+  "heightByField": null,
+  "maxLines": 1,
+  "textOverflow": "ellipsis",
+  "width": null,
+  "widthByField": Object {
+    "testFieldId": 5,
+  },
+  "wordWrap": true,
+}
+`;
+
+exports[`Interaction Row Column Resize Tests should get multiple horizontal filed resize style by field for selected resize type 1`] = `
 Object {
   "height": 30,
   "heightByField": null,
@@ -57,6 +71,21 @@ Object {
 }
 `;
 
+exports[`Interaction Row Column Resize Tests should get multiple vertical filed resize style by field for selected resize type 1`] = `
+Object {
+  "height": null,
+  "heightByField": Object {
+    "test-cell-a": 2,
+    "test-cell-b": 2,
+  },
+  "maxLines": 1,
+  "showTreeLeafNodeAlignDot": false,
+  "textOverflow": "ellipsis",
+  "widthByField": null,
+  "wordWrap": true,
+}
+`;
+
 exports[`Interaction Row Column Resize Tests should get vertical cell resize style 1`] = `
 Object {
   "height": 2,
@@ -110,8 +139,7 @@ exports[`Interaction Row Column Resize Tests should get vertical filed resize st
 Object {
   "height": null,
   "heightByField": Object {
-    "test-cell-a": 2,
-    "test-cell-b": 2,
+    "testFieldId": 2,
   },
   "maxLines": 1,
   "showTreeLeafNodeAlignDot": false,

packages/s2-core/__tests__/unit/interaction/row-column-resize-spec.ts

@@ -843,4 +843,56 @@ describe('Interaction Row Column Resize Tests', () => {
 
     expect(s2.options.style!.rowCell).toMatchSnapshot();
   });
+
+  test('should get multiple vertical filed resize style by field for selected resize type', () => {
+    // 模拟多选
+    jest
+      .spyOn(s2.interaction, 'getActiveRowCells')
+      .mockImplementationOnce(() => [
+        createMockCellInfo('test-row-cell-1').mockCell,
+        createMockCellInfo('test-row-cell-2').mockCell,
+      ]);
+    jest
+      .spyOn(s2.interaction, 'isSelectedState')
+      .mockImplementationOnce(() => true);
+
+    s2.setOptions({
+      interaction: {
+        resize: {
+          rowResizeType: ResizeType.SELECTED,
+          colResizeType: ResizeType.SELECTED,
+        },
+      },
+    });
+
+    emitResize(ResizeDirectionType.Vertical, ResizeAreaEffect.Cell);
+
+    expect(s2.options.style!.rowCell).toMatchSnapshot();
+  });
+
+  test('should get multiple horizontal filed resize style by field for selected resize type', () => {
+    // 模拟多选
+    jest
+      .spyOn(s2.interaction, 'getActiveColCells')
+      .mockImplementationOnce(() => [
+        createMockCellInfo('test-col-cell-1').mockCell,
+        createMockCellInfo('test-col-cell-2').mockCell,
+      ]);
+    jest
+      .spyOn(s2.interaction, 'isSelectedState')
+      .mockImplementationOnce(() => true);
+
+    s2.setOptions({
+      interaction: {
+        resize: {
+          rowResizeType: ResizeType.SELECTED,
+          colResizeType: ResizeType.SELECTED,
+        },
+      },
+    });
+
+    emitResize(ResizeDirectionType.Horizontal, ResizeAreaEffect.Cell);
+
+    expect(s2.options.style!.colCell).toMatchSnapshot();
+  });
 });

packages/s2-core/src/interaction/row-column-resize.ts

@@ -292,22 +292,25 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
     const { interaction } = this.spreadsheet;
     const resizeInfo = this.getResizeInfo();
 
+    const isVertical = resizeInfo.type === ResizeDirectionType.Vertical;
+    const activeCells = isVertical
+      ? interaction.getActiveRowCells()
+      : interaction.getActiveColCells();
+    const isMultiSelected =
+      interaction.isSelectedState() && activeCells.length > 1;
+
     // 非多选: 正常设置即可
     if (
       !this.isEffectRowOf(ResizeType.SELECTED) ||
-      !this.isEffectColOf(ResizeType.SELECTED)
+      !this.isEffectColOf(ResizeType.SELECTED) ||
+      !isMultiSelected
     ) {
       return {
         [this.getResizeCellField(resizeInfo)]: resizeValue,
       };
     }
 
     // 多选: 将当前选中的行列单元格对应的叶子节点统一设置宽高
-    const isVertical = resizeInfo.type === ResizeDirectionType.Vertical;
-    const activeCells = isVertical
-      ? interaction.getActiveRowCells()
-      : interaction.getActiveColCells();
-
     return activeCells.reduce<Record<string, number>>((result, cell) => {
       // 热区是绘制在叶子节点的, 如果选中的父节点, 那么叶子节点也算是多选, 需要给每一个叶子节点批量设置
       Node.getAllLeaveNodes(cell.getMeta() as Node).forEach((node) => {

s2-site/docs/api/basic-class/base-cell.zh.md

@@ -12,19 +12,19 @@ cell.getActualText()
 
 | 参数 | 说明 | 类型 |
 | --- | --- | --- |
-| getMeta | 获取单元格元数据 | () => [ViewMeta](#viewmeta) |
-| setMeta | 设置单元格元数据 | (vieMeta: [Partial<ViewMeta>](#viewmeta)) => void |
-| getIconStyle | 获取单元格图标样式 | () => [IconTheme](/docs/api/general/S2Theme#icontheme) |
-| getStyle | 获取单元格样式 | () => [DefaultCellTheme](/docs/api/general/S2Theme#defaultcelltheme) |
-| getTextAndIconPosition | 获取单元格文本和图标的位置 | (iconCount: `number`) => [TextAndIconPosition](#textandiconposition) |
-| cellType | 单元格类型 | [CellType](#celltype) |
+| getMeta | 获取单元格元数据 | () => [`ViewMeta`](#viewmeta) |
+| setMeta | 设置单元格元数据 | (vieMeta: [`Partial<ViewMeta>`](#viewmeta)) => void |
+| getIconStyle | 获取单元格图标样式 | () => [`IconTheme`](/docs/api/general/S2Theme#icontheme) |
+| getStyle | 获取单元格样式 | (name?: string) => [`DefaultCellTheme`](/docs/api/general/S2Theme#defaultcelltheme) |
+| getTextAndIconPosition | 获取单元格文本和图标的位置 | (iconCount: `number`) => [`TextAndIconPosition`](#textandiconposition) |
+| cellType | 单元格类型 | [`CellType`](#celltype) |
 | initCell | 初始化单元格 | `() => void` |
 | update | 更新单元格 | `() => void` |
 | getTextStyle | 获取文本样式 | `() => void` |
 | getCellTextWordWrapStyle | 获取文本换行配置 | `() => { wordWrap: boolean, maxLines: number, textOverflow: string \| boolean }` |
 | getFormattedFieldValue | 获取格式化后的字段值 | `() => { formattedValue: string, value: string }` |
 | getMaxTextWidth | 获取文本最大宽度 | `() => number` |
-| getTextPosition | 获取文本坐标 | [Point](#point) |
+| getTextPosition | 获取文本坐标 | [`Point`](#point) |
 | getContentArea | 获取内容区域 | `() => { x: number, y: number, width: number, height: number }` |
 | updateByState | 根据状态更新单元格样式 | `(stateName: InteractionStateName, cell: S2CellType) => void` |
 | hideInteractionShape | 隐藏单元格的交互图层 | `() => void` |

s2-site/docs/api/graphic.zh.md

@@ -2,7 +2,7 @@
 title: 绘图属性
 order: 3
 redirect_from:
-  - /en/docs/api
+  - /zh/docs/api
 ---
 
 :::warning{title="注意"}
@@ -12,7 +12,9 @@ S2 使用 `Canvas` , 底层基于 [AntV/G](https://g.antv.antgroup.com/guide/get
 理论上，你可以通过 [自定义单元格](https://s2.antv.antgroup.com/examples/custom/custom-cell/#data-cell), 在表格绘制任意内容，前提是请确保你已经掌握了一定的 [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 和 [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) 知识，并对 [AntV/G](https://g.antv.antgroup.com/guide/getting-started) 有一定了解。
 :::
 
-这里对 S2 常用的绘图属性进行简单介绍：
+<br/>
+
+<Playground path='/custom/custom-shape-and-chart/demo/custom-g-shape.ts' rid='advanced-sort'></playground>
 
 ## 配置图形样式
 

s2-site/docs/common/contact-us.zh.md

@@ -5,7 +5,7 @@ order: 5
 
 :::warning{title="注意"}
 
-群聊仅供交流，不提供任何答疑，有任何问题请 [提交 Issue](https://github.com/antvis/S2/issues/new/choose).
+群聊仅供交流，不提供任何答疑，有任何问题请 [提交 Issue](https://github.com/antvis/S2/issues/new/choose) 或在 [Discussions](https://github.com/antvis/S2/discussions) 提问。
 
 :::
 

s2-site/examples/custom/custom-cell/demo/custom-specified-cell.ts

@@ -15,6 +15,13 @@ import {
  * 明细表需要继承 TableDataCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-data-cell.ts
  */
 class CustomDataCell extends DataCell {
+  getStyle(name) {
+    // 重写单元格样式
+    const defaultCellStyle = super.getStyle(name);
+
+    return defaultCellStyle;
+  }
+
   getBackgroundColor() {
     // 特定数据
     if (this.meta.fieldValue >= 6000) {
@@ -76,6 +83,13 @@ class CustomDataCell extends DataCell {
  * 明细表需要继承 TableColCell  https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/table-col-cell.ts
  */
 class CustomColCell extends ColCell {
+  getStyle(name) {
+    // 重写单元格样式
+    const defaultCellStyle = super.getStyle(name);
+
+    return defaultCellStyle;
+  }
+
   getTextStyle() {
     const defaultTextStyle = super.getTextStyle();
 
@@ -117,6 +131,13 @@ class CustomColCell extends ColCell {
  * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/corner-cell.ts
  */
 class CustomCornerCell extends CornerCell {
+  getStyle(name) {
+    // 重写单元格样式
+    const defaultCellStyle = super.getStyle(name);
+
+    return defaultCellStyle;
+  }
+
   getBackgroundColor() {
     // 特定数据
     if (this.meta.field === 'province') {
@@ -150,6 +171,13 @@ class CustomCornerCell extends CornerCell {
  * 查看更多方法 https://github.com/antvis/S2/blob/next/packages/s2-core/src/cell/row-cell.ts
  */
 class CustomRowCell extends RowCell {
+  getStyle(name) {
+    // 重写单元格样式
+    const defaultCellStyle = super.getStyle(name);
+
+    return defaultCellStyle;
+  }
+
   getBackgroundColor() {
     // 特定数据
     if (this.meta.field === 'province') {