fix: 修复自定义列宽对虚拟数值列不生效

antvis · Oct 12, 2024 · 291420d · 291420d
1 parent 75acbfe
commit 291420d
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 11 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap
@@ -63,18 +63,38 @@ Array [
 exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests #ColCell should get custom col cell style by field id 1`] = `
 Array [
   Object {
-    "height": 60,
-    "id": "root[&]浙江",
-    "width": 149.5,
+    "height": 30,
+    "id": "root[&]笔",
+    "width": 199.5,
   },
   Object {
-    "height": 30,
-    "id": "root[&]浙江[&]义乌",
+    "height": 300,
+    "id": "root[&]笔[&]price",
+    "width": 50,
+  },
+  Object {
+    "height": 300,
+    "id": "root[&]笔[&]cost",
     "width": 149.5,
   },
+]
+`;
+
+exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests #ColCell should get custom col cell style by value field 1`] = `
+Array [
   Object {
     "height": 30,
-    "id": "root[&]浙江[&]杭州",
+    "id": "root[&]笔",
+    "width": 199.5,
+  },
+  Object {
+    "height": 300,
+    "id": "root[&]笔[&]price",
+    "width": 50,
+  },
+  Object {
+    "height": 300,
+    "id": "root[&]笔[&]cost",
     "width": 149.5,
   },
 ]
@@ -135,6 +155,46 @@ Array [
 ]
 `;
 
+exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests #RowCell should get custom row cell style by extra field 1`] = `
+Array [
+  Object {
+    "height": 1200,
+    "id": "root[&]浙江",
+    "width": 149.5,
+  },
+  Object {
+    "height": 600,
+    "id": "root[&]浙江[&]义乌",
+    "width": 149.5,
+  },
+  Object {
+    "height": 300,
+    "id": "root[&]浙江[&]义乌[&]price",
+    "width": 50,
+  },
+  Object {
+    "height": 300,
+    "id": "root[&]浙江[&]义乌[&]cost",
+    "width": 50,
+  },
+  Object {
+    "height": 600,
+    "id": "root[&]浙江[&]杭州",
+    "width": 149.5,
+  },
+  Object {
+    "height": 300,
+    "id": "root[&]浙江[&]杭州[&]price",
+    "width": 50,
+  },
+  Object {
+    "height": 300,
+    "id": "root[&]浙江[&]杭州[&]cost",
+    "width": 50,
+  },
+]
+`;
+
 exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests #RowCell should get custom row cell style by field 1`] = `
 Array [
   Object {

diff --git a/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts
@@ -156,6 +156,30 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
         expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
       });
 
+      test('should get custom row cell style by extra field', async () => {
+        s2.setDataCfg({
+          fields: {
+            valueInCols: false,
+          },
+        });
+
+        s2.setOptions({
+          style: {
+            rowCell: {
+              widthByField: {
+                [EXTRA_FIELD]: 50,
+              },
+              heightByField: {
+                [EXTRA_FIELD]: 300,
+              },
+            },
+          },
+        });
+        await s2.render();
+
+        expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
+      });
+
       test('should not get custom row cell style if not leaf node by field', async () => {
         const width = 100;
         const height = 200;
@@ -306,7 +330,27 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
         });
         await s2.render();
 
-        expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
+        expect(mapNodeSize(s2.facet.getColNodes())).toMatchSnapshot();
+      });
+
+      test('should get custom col cell style by value field', async () => {
+        const priceValueField = `price`;
+
+        s2.setOptions({
+          style: {
+            colCell: {
+              widthByField: {
+                [priceValueField]: 50,
+              },
+              heightByField: {
+                [priceValueField]: 300,
+              },
+            },
+          },
+        });
+        await s2.render();
+
+        expect(mapNodeSize(s2.facet.getColNodes())).toMatchSnapshot();
       });
 
       test('should not get custom col cell style if not leaf node by field', async () => {

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -40,6 +40,7 @@ import {
   BACK_GROUND_GROUP_CONTAINER_Z_INDEX,
   CellType,
   DEFAULT_STYLE,
+  EXTRA_FIELD,
   FRONT_GROUND_GROUP_CONTAINER_Z_INDEX,
   InterceptType,
   KEY_GROUP_BACK_GROUND,
@@ -341,17 +342,23 @@ export abstract class BaseFacet {
   protected getColCellDraggedWidth(node: Node): number | undefined {
     const { colCell } = this.spreadsheet.options.style!;
 
+    // 指标的 field 是 $$extra$$, 对用户来说其实是 s2DataConfig.fields.values 里面的 field
+    // 此时应该按 $$extra$$ 对应的 value field 匹配
     return (
-      colCell?.widthByField?.[node?.id] ?? colCell?.widthByField?.[node?.field]
+      colCell?.widthByField?.[node?.id] ??
+      colCell?.widthByField?.[node?.field] ??
+      colCell?.widthByField?.[node?.query?.[EXTRA_FIELD]]
     );
   }
 
   protected getColCellDraggedHeight(node: Node): number | undefined {
     const { colCell } = this.spreadsheet.options.style!;
 
+    // 高度同理
     return (
       colCell?.heightByField?.[node?.id] ??
-      colCell?.heightByField?.[node?.field]
+      colCell?.heightByField?.[node?.field] ??
+      colCell?.heightByField?.[node?.query?.[EXTRA_FIELD]]
     );
   }
 

diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
@@ -390,8 +390,8 @@ export const s2Options: SheetComponentOptions = {
       rowCell: true,
     },
     resize: {
-      rowResizeType: 'all',
-      colResizeType: 'all',
+      rowResizeType: 'current',
+      colResizeType: 'current',
     },
   },
   // totals: {