fix: 修复开启自定义指标层级后, 角头数值文本未对齐 close #2957

antvis · Nov 8, 2024 · 0f4ce09 · 0f4ce09
1 parent e759891
commit 0f4ce09
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 2 deletions.
diff --git a/packages/s2-core/__tests__/bugs/issue-2957-spec.ts b/packages/s2-core/__tests__/bugs/issue-2957-spec.ts
@@ -0,0 +1,53 @@
+/**
+ * @description spec for issue #2957
+ * https://github.com/antvis/S2/issues/2957
+ */
+import { PivotSheet } from '@/sheet-type';
+import type { S2Options } from '../../src';
+import { getContainer } from '../util/helpers';
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 600,
+};
+
+describe('Corner Measure Text Tests', () => {
+  test('should get correctly theme config with customValueOrder', async () => {
+    const s2 = new PivotSheet(
+      getContainer(),
+      {
+        data: [
+          {
+            '4rweiwt7aneo': '上海市',
+            '4w8pyhsbkkjk': '①正常库存',
+            '4vynudxz28sg': '457',
+            styleKey: 1,
+          },
+        ],
+        fields: {
+          valueInCols: true,
+          rows: ['4rweiwt7aneo'],
+          columns: ['4w8pyhsbkkjk'],
+          values: ['4vynudxz28sg'],
+          customValueOrder: 0,
+        },
+      },
+      s2Options,
+    );
+
+    s2.setTheme({
+      cornerCell: {
+        measureText: {
+          fill: 'blue',
+          textAlign: 'center',
+          fontSize: 12,
+        },
+      },
+    });
+    await s2.render();
+
+    const extraFieldText = s2.facet.getCornerCells()[1].getTextShape();
+
+    expect(extraFieldText.parsedStyle.textBaseline).toEqual('middle');
+  });
+});
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
@@ -156,6 +156,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#FFFFFF",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -735,6 +744,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#ffffff",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#ffffff",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -1314,6 +1332,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -1893,6 +1920,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -2472,6 +2508,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -3051,6 +3096,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",

diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
@@ -185,6 +185,15 @@ export const getTheme = (
         textAlign: isTable ? 'center' : 'right',
         textBaseline: 'middle',
       },
+      measureText: {
+        fontFamily: FONT_FAMILY,
+        fontSize: 12,
+        fontWeight: boldTextDefaultFontWeight,
+        fill: basicColors[0],
+        opacity: 1,
+        textAlign: 'left',
+        textBaseline: 'middle',
+      },
       cell: {
         // ----------- background color -----------
         backgroundColor: basicColors[3],

diff --git a/...-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap b/...-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap
@@ -156,6 +156,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -735,6 +744,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#FFFFFF",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -1314,6 +1332,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#FFFFFF",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -1893,6 +1920,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -2472,6 +2508,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#FFFFFF",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -3051,6 +3096,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#000000",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
@@ -3630,6 +3684,15 @@ Object {
       },
       "size": 10,
     },
+    "measureText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
     "text": Object {
       "fill": "#FFFFFF",
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",

diff --git a/packages/s2-react-components/package.json b/packages/s2-react-components/package.json
@@ -57,7 +57,7 @@
     "test:ci": "pnpm test -- --maxWorkers=3",
     "test:ci-coverage": "pnpm test:coverage --maxWorkers=3",
     "test:coverage": "pnpm test -- --coverage",
-    "test:live": "node ./scripts/test-live.mjs",
+    "test:live": "node ../s2-react/scripts/test-live.mjs",
     "test:watch": "pnpm test -- --watch",
     "tsc": "tsc --noEmit",
     "watch": "rimraf esm && pnpm build:esm -w"

diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
@@ -73,7 +73,7 @@ s2.setTheme({
 | bolderText        | 加粗文本样式（如：总计，小计，行列头非叶子节点文本）[了解更多](/manual/advanced/custom/cell-align#%E8%A1%8C%E5%A4%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F)   | [TextTheme](#texttheme)           | -      |      |
 | text              | 文本样式（如：数值，行列头叶子节点文本）[了解更多](/manual/advanced/custom/cell-align#%E6%95%B0%E6%8D%AE%E5%8D%95%E5%85%83%E6%A0%BC%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F)      | [TextTheme](#texttheme)           | -      |      |
 | seriesText        | 序号文本样式   | [TextTheme](#texttheme)           | -      |      |
-| measureText       | 度量值文本样式（如：数值挂行/列头时，行列头所对应的虚拟数值单元格文本）[了解更多](/manual/advanced/custom/cell-align#%E5%88%97%E5%A4%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F)  | [TextTheme](#texttheme)           | -      |      |
+| measureText       | 度量值文本样式（如：数值挂行/列头时，行头/列头/角头所对应的虚拟数值单元格文本）[了解更多](/manual/advanced/custom/cell-align#%E5%88%97%E5%A4%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F)  | [TextTheme](#texttheme)           | -      |      |
 | cell              | 单元格样式     | [CellTheme](#celltheme)           | -      |      |
 | icon              | 图标样式       | [IconTheme](#icontheme)           | -      |      |
 | seriesNumberWidth | 序号列宽       | `number`                          | 80     |      |