From c837efe29f2ff02ea8957bcaf62be57d2467f160 Mon Sep 17 00:00:00 2001 From: linwrui Date: Fri, 8 Nov 2024 15:31:37 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E5=8D=B8=E8=BD=BD=E5=90=8E,=20=E9=AB=98=E6=B8=85=E9=80=82?= =?UTF-8?q?=E9=85=8D=E9=80=BB=E8=BE=91=E8=BF=98=E4=BC=9A=E8=A7=A6=E5=8F=91?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20(#2965)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: hdAdapter 销毁后添加 destroyed 标识，避免因 resize 事件的异步处理器在执行时报错 * fix: renderByDevicePixelRatio 方法中的销毁状态判断提前到 L#116 行 * fix: spreadsheet.destroyed 修改为 public --------- Co-authored-by: linwrui --- packages/s2-core/src/sheet-type/spread-sheet.ts | 2 +- packages/s2-core/src/ui/hd-adapter/index.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts index cecf97dd5e..b1991c8938 100644 --- a/packages/s2-core/src/sheet-type/spread-sheet.ts +++ b/packages/s2-core/src/sheet-type/spread-sheet.ts @@ -98,7 +98,7 @@ export abstract class SpreadSheet extends EE { /** * 表格是否已销毁 */ - private destroyed = false; + public destroyed = false; protected abstract bindEvents(): void; diff --git a/packages/s2-core/src/ui/hd-adapter/index.ts b/packages/s2-core/src/ui/hd-adapter/index.ts index 9d326b9bbb..9bb2dac7b1 100644 --- a/packages/s2-core/src/ui/hd-adapter/index.ts +++ b/packages/s2-core/src/ui/hd-adapter/index.ts @@ -110,6 +110,10 @@ export class HdAdapter { private renderByDevicePixelRatio = async ( ratio = window.devicePixelRatio, ) => { + if (this.spreadsheet.destroyed) { + return; + } + const { container, options: { width, height }, @@ -130,6 +134,10 @@ export class HdAdapter { }; private renderByZoomScale = debounce(async (event: Event) => { + if (this.spreadsheet.destroyed) { + return; + } + const target = event.target as VisualViewport; const ratio = Math.ceil(target?.scale); From 12be6b5518f14e184c88544818e53d3d228256be Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Fri, 8 Nov 2024 17:39:44 +0800 Subject: [PATCH 2/6] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=20spreadsheet=20?= =?UTF-8?q?class=20api=20=E6=96=87=E6=A1=A3=20(#2969)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/api/basic-class/spreadsheet.zh.md | 10 +++++++--- s2-site/docs/api/general/S2Theme.zh.md | 19 +++++++++++++++---- .../demo/custom-header-action-icon.ts | 14 +++++++------- 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md index 367f15789a..66141907d3 100644 --- a/s2-site/docs/api/basic-class/spreadsheet.zh.md +++ b/s2-site/docs/api/basic-class/spreadsheet.zh.md @@ -14,7 +14,7 @@ s2.isPivotMode() | 参数 | 说明 | 类型 | 版本 | | --- |------------------------------------------------------------------------------------------------------------------------| --- |----| -| dom | 挂载的容器节点 | `string` \| `HTMLElement` | | +| themeName | 主题名 | [ThemeName](/api/general/s2-theme#themename) | | | theme | 主题配置 | [S2Theme](/docs/api/general/S2Theme) | | | store | 存储的一些信息 | [Store](/docs/api/basic-class/store) | | | dataCfg | 数据配置 | [S2DataConfig](/docs/api/general/S2DataConfig) | | @@ -24,11 +24,15 @@ s2.isPivotMode() | tooltip | 提示信息 | [BaseTooltip](/docs/api/basic-class/base-tooltip) | | | container | g-canvas 实例 | [Canvas](https://g.antv.antgroup.com/api/renderer/canvas) | | | interaction | 交互 | [Interaction](/zh/docs/api/basic-class/interaction) | | -| hd | 开启高清适配 | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts) | | +| hdAdapter | 高清适配器 | [HdAdapter](https://github.com/antvis/S2/blob/next/packages/s2-core/src/ui/hd-adapter/index.ts) | | +| destroyed | 表格是否已销毁 | `boolean` | | | on | 事件订阅 | (event: [S2Event](/docs/manual/advanced/interaction/basic), listener: () => void) => void | | | emit | 事件发布 | (event: [S2Event](/docs/manual/advanced/interaction/basic), ...args: any[]) => void | | | getDataSet | 获取数据集 | (options: [S2Options](/docs/api/general/S2Options)) => [BaseDataSet](/docs/api/basic-class/base-data-set) | | | isPivotMode | 是否是透视表 | `() => boolean` | | +| isCustomRowFields | 是否是自定义行头维值 | `() => boolean` | | +| isCustomColumnFields | 是否是自定义列头维值 | `() => boolean` | | +| isCustomHeaderFields | 是否是自定义表头维值 | `() => boolean` | | | isHierarchyTreeType | 是否是树状结构 | `() => boolean` | | | isFrozenRowHeader | 是否是冻结行头状态 | `() => boolean` | | | isTableMode | 是否是明细表 | `() => boolean` | | @@ -48,7 +52,7 @@ s2.isPivotMode() | setThemeCfg | 更新主题配置 （含主题 schema, 色板，主题名） | (themeCfg: [ThemeCfg](/docs/api/general/S2Theme/#themecfg)) => void | | | setTheme | 更新主题 （只包含主题 scheme) | (theme: [S2Theme](/docs/api/general/S2Theme/#s2theme)) => void | | | getTheme | 获取主题 （只包含主题 scheme) | ( ) => [S2Theme](/docs/api/general/S2Theme/#s2theme) | | -| getThemeName | 获取主题名 | ( ) => `default \| colorful \| gray \| dark` | | +| getThemeName | 获取主题名 | () => [ThemeName](/api/general/s2-theme#themename) | | | updatePagination | 更新分页 | (pagination: [Pagination](/docs/api/general/S2Options#pagination)) => void | | | changeSheetSize | 修改表格画布大小，不用重新加载数据 | `(width?: number, height?: number) => void` | | | getLayoutWidthType | 获取单元格宽度布局类型（LayoutWidthType: `adaptive（自适应）` \| `colAdaptive（列自适应）` \| `compact（紧凑）`） | () => `LayoutWidthType`| | diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md index cbc521f7b5..2529de79fd 100644 --- a/s2-site/docs/api/general/S2Theme.zh.md +++ b/s2-site/docs/api/general/S2Theme.zh.md @@ -28,17 +28,28 @@ s2.setTheme({ 功能描述：表格主题配置项。查看 [文档](/manual/basic/theme) 和 [示例](/examples/theme/default/#colorful) -| 参数 | 参数 | 类型 | 默认值 | 必选 | +| 参数 | 说明 | 类型 | 默认值 | 必选 | | ------- | ----------- | --------------------------------- | --------- | ---- | | theme | 主题 schema | [S2Theme](#s2theme) | - | | | palette | 色板 | [Palette](#palette) | - | | -| name | 主题名 | `default` \| `colorful` \| `gray` | `default` | | +| name | 主题名 | [ThemeName](#themename) | `default` | | + +### ThemeName + +功能描述：表格主题名称。查看 [文档](/manual/basic/theme) 和 [示例](/examples/theme/default/#colorful) + +| 参数 | 说明 | 类型 | 默认值 | 必选 | +| ---- | -------------- | ---------------------- | ------ | ---- | +| default | 默认 | `string` | - | | +| colorful | 多彩蓝 | `string` | - | | +| gray | 简约灰 | `string` | - | | +| dark | 暗黑 | `string` | - | | ### Palette 功能描述：表主题色板。查看 [文档](/manual/basic/theme) 和 [示例](/examples/theme/custom/#custom-palette) -| 参数 | 参数 | 类型 | 默认值 | 必选 | +| 参数 | 说明 | 类型 | 默认值 | 必选 | | ------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | ------ | ---- | | brandColor | 色板主题色 | `string` | - | ✓ | | basicColors | 基础颜色 | `string[]` | - | ✓ | @@ -50,7 +61,7 @@ s2.setTheme({ 功能描述：表格主题 `Schema`. 查看 [文档](/manual/basic/theme#%E4%B8%BB%E9%A2%98-schema) 和 [示例](/examples/theme/custom/#custom-palette) -| 参数 | 参数 | 类型 | 默认值 | 必选 | +| 参数 | 说明 | 类型 | 默认值 | 必选 | | ----------------- | -------------------------------------- | ----------------------------------------------- | ------ | ---- | | cornerCell | 角头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | | | rowCell | 行头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | | diff --git a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.ts b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.ts index 868f769143..cbfd52ddae 100644 --- a/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.ts +++ b/s2-site/examples/custom/custom-icon/demo/custom-header-action-icon.ts @@ -26,9 +26,9 @@ fetch( displayCondition: (meta) => meta.level > 0, onClick: (options) => { console.log(options); - const { meta, event } = options; - - meta.spreadsheet.handleGroupSort(event, meta); + }, + onHover: (options) => { + console.log(options); }, }, { @@ -38,7 +38,7 @@ fetch( onClick: (options) => { const { meta, event } = options; - meta.spreadsheet.tooltip.show({ + meta.spreadsheet.showTooltip({ position: { x: event.clientX, y: event.clientY }, content: `
ColTooltip
`, }); @@ -51,7 +51,7 @@ fetch( onClick: (options) => { const { meta, event } = options; - meta.spreadsheet.tooltip.show({ + meta.spreadsheet.showTooltip({ position: { x: event.clientX, y: event.clientY }, content: `
CornerTooltip
`, }); @@ -66,7 +66,7 @@ fetch( onClick: (options) => { const { meta, event } = options; - meta.spreadsheet.tooltip.show({ + meta.spreadsheet.showTooltip({ position: { x: event.clientX, y: event.clientY }, content: `
RowTooltip
`, }); @@ -83,7 +83,7 @@ fetch( content.innerHTML = '我是 RowTooltip 自定义内容'; - meta.spreadsheet.tooltip.show({ + meta.spreadsheet.showTooltip({ position: { x: event.clientX, y: event.clientY }, content, }); From 6558a0df55dc324e1810e2f2a5d314de7389e2b1 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Fri, 8 Nov 2024 17:41:36 +0800 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BC=80=E5=90=AF?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8C=87=E6=A0=87=E5=B1=82=E7=BA=A7?= =?UTF-8?q?=E5=90=8E,=20=E8=A7=92=E5=A4=B4=E6=95=B0=E5=80=BC=E6=96=87?= =?UTF-8?q?=E6=9C=AC=E6=9C=AA=E5=AF=B9=E9=BD=90=20close=20#2957=20(#2966)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Wenjun Xu <906626481@qq.com> --- .../s2-core/__tests__/bugs/issue-2957-spec.ts | 53 ++++++++++++++++ .../__snapshots__/theme-spec.ts.snap | 54 ++++++++++++++++ packages/s2-core/src/theme/index.ts | 9 +++ .../__snapshots__/utils-spec.ts.snap | 63 +++++++++++++++++++ packages/s2-react-components/package.json | 2 +- s2-site/docs/api/general/S2Theme.zh.md | 2 +- 6 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 packages/s2-core/__tests__/bugs/issue-2957-spec.ts diff --git a/packages/s2-core/__tests__/bugs/issue-2957-spec.ts b/packages/s2-core/__tests__/bugs/issue-2957-spec.ts new file mode 100644 index 0000000000..e33e8df0fb --- /dev/null +++ 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 index 281de69170..174be89aeb 100644 --- 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 index 124303bda9..f37b09cb87 100644 --- 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/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap b/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap index 092d142832..fa7af33389 100644 --- a/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap +++ b/packages/s2-react-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 index bcdd06ad0c..a8dfbead75 100644 --- 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 index 2529de79fd..4a6f9eaa9a 100644 --- a/s2-site/docs/api/general/S2Theme.zh.md +++ b/s2-site/docs/api/general/S2Theme.zh.md @@ -84,7 +84,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 | | From ca1f7e8a614dc5b36a6bc270df4ea8338e670444 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Fri, 8 Nov 2024 17:41:58 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=98=8E=E7=BB=86?= =?UTF-8?q?=E8=A1=A8=E8=87=AA=E5=AE=9A=E4=B9=89=E5=88=97=E5=A4=B4=E6=97=B6?= =?UTF-8?q?=E5=BC=80=E5=90=AF=E6=96=87=E6=9C=AC=E6=8D=A2=E8=A1=8C,=20?= =?UTF-8?q?=E5=8D=95=E5=85=83=E6=A0=BC=E9=AB=98=E5=BA=A6=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20close=20#2955=20(#2968)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复明细表自定义列头时开启文本换行, 单元格高度错误的问题 close #2955 * fix: 优化计算逻辑 * fix: 优化计算逻辑 --- .../__tests__/data/custom-table-col-fields.ts | 23 ++ .../multi-line-text-spec.ts.snap | 371 ++++++++++++++++++ .../spreadsheet/multi-line-text-spec.ts | 24 ++ packages/s2-core/src/facet/table-facet.ts | 3 +- 4 files changed, 420 insertions(+), 1 deletion(-) diff --git a/packages/s2-core/__tests__/data/custom-table-col-fields.ts b/packages/s2-core/__tests__/data/custom-table-col-fields.ts index a53ca96912..a7cadc1437 100644 --- a/packages/s2-core/__tests__/data/custom-table-col-fields.ts +++ b/packages/s2-core/__tests__/data/custom-table-col-fields.ts @@ -23,6 +23,29 @@ export const customColSimpleColumns: CustomTreeNode[] = [ }, ]; +export const customColSimpleMultipleTextColumns: CustomTreeNode[] = [ + { + field: 'area', + title: '地区'.repeat(50), + children: [ + { field: 'province', title: '省份' }, + { field: 'city', title: '城市' }, + ], + }, + { + field: 'type', + title: '类型', + }, + { + field: 'money', + title: '金额'.repeat(20), + children: [ + { field: 'price', title: '价格', description: '价格描述' }, + { field: 'number', title: '数量'.repeat(30) }, + ], + }, +]; + export const customColMultipleColumns: CustomTreeNode[] = [ { field: 'a-1', diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap index d3bb3a1672..c4046b690a 100644 --- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap +++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap @@ -30434,3 +30434,374 @@ Array [ }, ] `; + +exports[`SpreadSheet Multi Line Text Tests TableSheet should use actual text height for large max line by custom col group 1`] = ` +Array [ + Object { + "actualText": "序号", + "actualTextHeight": 16, + "actualTextWidth": 25, + "height": 104, + "multiLineActualTexts": Array [ + "序号", + ], + "originalText": "序号", + "width": 80, + }, + Object { + "actualText": undefined, + "actualTextHeight": 0, + "actualTextWidth": 0, + "height": 88, + "multiLineActualTexts": Array [], + "originalText": undefined, + "width": 0, + }, +] +`; + +exports[`SpreadSheet Multi Line Text Tests TableSheet should use actual text height for large max line by custom col group 2`] = ` +Array [ + Object { + "actualText": "1", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "1", + ], + "originalText": 1, + "width": 80, + }, + Object { + "actualText": "2", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "2", + ], + "originalText": 2, + "width": 80, + }, + Object { + "actualText": "3", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "3", + ], + "originalText": 3, + "width": 80, + }, +] +`; + +exports[`SpreadSheet Multi Line Text Tests TableSheet should use actual text height for large max line by custom col group 3`] = ` +Array [ + Object { + "actualText": "序号", + "actualTextHeight": 16, + "actualTextWidth": 25, + "height": 192, + "multiLineActualTexts": Array [ + "序号", + ], + "originalText": "序号", + "width": 80, + }, + Object { + "actualText": "地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区", + "actualTextHeight": 80, + "actualTextWidth": 1205, + "height": 88, + "multiLineActualTexts": Array [ + "地区地区地区地区地区地区地区地区地区地区地区", + "地区地区地区地区地区地区地区地区地区地区地区", + "地区地区地区地区地区地区地区地区地区地区地区", + "地区地区地区地区地区地区地区地区地区地区地区", + "地区地区地区地区地区地区", + ], + "originalText": "地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区", + "width": 287.6, + }, + Object { + "actualText": "省份", + "actualTextHeight": 16, + "actualTextWidth": 25, + "height": 104, + "multiLineActualTexts": Array [ + "省份", + ], + "originalText": "省份", + "width": 143.8, + }, + Object { + "actualText": "城市", + "actualTextHeight": 16, + "actualTextWidth": 25, + "height": 104, + "multiLineActualTexts": Array [ + "城市", + ], + "originalText": "城市", + "width": 143.8, + }, + Object { + "actualText": "类型", + "actualTextHeight": 16, + "actualTextWidth": 25, + "height": 192, + "multiLineActualTexts": Array [ + "类型", + ], + "originalText": "类型", + "width": 143.8, + }, + Object { + "actualText": "金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额", + "actualTextHeight": 32, + "actualTextWidth": 482, + "height": 88, + "multiLineActualTexts": Array [ + "金额金额金额金额金额金额金额金额金额金额金额", + "金额金额金额金额金额金额金额金额金额", + ], + "originalText": "金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额金额", + "width": 287.6, + }, + Object { + "actualText": "价格", + "actualTextHeight": 16, + "actualTextWidth": 25, + "height": 104, + "multiLineActualTexts": Array [ + "价格", + ], + "originalText": "价格", + "width": 143.8, + }, + Object { + "actualText": "数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量", + "actualTextHeight": 96, + "actualTextWidth": 726, + "height": 104, + "multiLineActualTexts": Array [ + "数量数量数量数量数量", + "数量数量数量数量数量", + "数量数量数量数量数量", + "数量数量数量数量数量", + "数量数量数量数量数量", + "数量数量数量数量数量", + ], + "originalText": "数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量数量", + "width": 143.8, + }, +] +`; + +exports[`SpreadSheet Multi Line Text Tests TableSheet should use actual text height for large max line by custom col group 4`] = `Array []`; + +exports[`SpreadSheet Multi Line Text Tests TableSheet should use actual text height for large max line by custom col group 5`] = ` +Array [ + Object { + "actualText": "1", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "1", + ], + "originalText": 1, + "width": 80, + }, + Object { + "actualText": "2", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "2", + ], + "originalText": 2, + "width": 80, + }, + Object { + "actualText": "3", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "3", + ], + "originalText": 3, + "width": 80, + }, + Object { + "actualText": "浙江", + "actualTextHeight": 15, + "actualTextWidth": 25, + "height": 30, + "multiLineActualTexts": Array [ + "浙江", + ], + "originalText": "浙江", + "width": 143.8, + }, + Object { + "actualText": "浙江", + "actualTextHeight": 15, + "actualTextWidth": 25, + "height": 30, + "multiLineActualTexts": Array [ + "浙江", + ], + "originalText": "浙江", + "width": 143.8, + }, + Object { + "actualText": "浙江", + "actualTextHeight": 15, + "actualTextWidth": 25, + "height": 30, + "multiLineActualTexts": Array [ + "浙江", + ], + "originalText": "浙江", + "width": 143.8, + }, + Object { + "actualText": "义乌", + "actualTextHeight": 15, + "actualTextWidth": 25, + "height": 30, + "multiLineActualTexts": Array [ + "义乌", + ], + "originalText": "义乌", + "width": 143.8, + }, + Object { + "actualText": "义乌", + "actualTextHeight": 15, + "actualTextWidth": 25, + "height": 30, + "multiLineActualTexts": Array [ + "义乌", + ], + "originalText": "义乌", + "width": 143.8, + }, + Object { + "actualText": "杭州", + "actualTextHeight": 15, + "actualTextWidth": 25, + "height": 30, + "multiLineActualTexts": Array [ + "杭州", + ], + "originalText": "杭州", + "width": 143.8, + }, + Object { + "actualText": "笔", + "actualTextHeight": 15, + "actualTextWidth": 13, + "height": 30, + "multiLineActualTexts": Array [ + "笔", + ], + "originalText": "笔", + "width": 143.8, + }, + Object { + "actualText": "笔", + "actualTextHeight": 15, + "actualTextWidth": 13, + "height": 30, + "multiLineActualTexts": Array [ + "笔", + ], + "originalText": "笔", + "width": 143.8, + }, + Object { + "actualText": "笔", + "actualTextHeight": 15, + "actualTextWidth": 13, + "height": 30, + "multiLineActualTexts": Array [ + "笔", + ], + "originalText": "笔", + "width": 143.8, + }, + Object { + "actualText": "1", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "1", + ], + "originalText": 1, + "width": 143.8, + }, + Object { + "actualText": "1", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "1", + ], + "originalText": 1, + "width": 143.8, + }, + Object { + "actualText": "1", + "actualTextHeight": 15, + "actualTextWidth": 7, + "height": 30, + "multiLineActualTexts": Array [ + "1", + ], + "originalText": 1, + "width": 143.8, + }, + Object { + "actualText": "-", + "actualTextHeight": 15, + "actualTextWidth": 4, + "height": 30, + "multiLineActualTexts": Array [ + "-", + ], + "originalText": "-", + "width": 143.8, + }, + Object { + "actualText": "-", + "actualTextHeight": 15, + "actualTextWidth": 4, + "height": 30, + "multiLineActualTexts": Array [ + "-", + ], + "originalText": "-", + "width": 143.8, + }, + Object { + "actualText": "-", + "actualTextHeight": 15, + "actualTextWidth": 4, + "height": 30, + "multiLineActualTexts": Array [ + "-", + ], + "originalText": "-", + "width": 143.8, + }, +] +`; diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts index d631b8a822..dd2cd4f234 100644 --- a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts +++ b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts @@ -13,6 +13,7 @@ import type { S2CellType, S2Options, } from '../../src/common'; +import { customColSimpleMultipleTextColumns } from '../data/custom-table-col-fields'; import { PivotSheetMultiLineTextDataCfg, TableSheetMultiLineTextDataCfg, @@ -974,6 +975,29 @@ describe('SpreadSheet Multi Line Text Tests', () => { expect(s2.facet.getLayoutResult().colsHierarchy.height).toEqual(56); }); + // https://github.com/antvis/S2/issues/2955 + test('should use actual text height for large max line by custom col group', async () => { + updateStyle(20); + + s2.setDataCfg( + { + ...SimpleDataCfg, + fields: { + rows: [], + columns: customColSimpleMultipleTextColumns, + values: [], + }, + }, + true, + ); + + s2.changeSheetSize(800, 600); + await s2.render(); + + matchCellStyleSnapshot(); + expect(s2.facet.getLayoutResult().colsHierarchy.height).toEqual(192); + }); + test.each(range(1, 11))( 'should always render default cell height when set %s line, but actual text not wrap', async (maxLines) => { diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts index 3008e1bb5d..4fb47a3c61 100644 --- a/packages/s2-core/src/facet/table-facet.ts +++ b/packages/s2-core/src/facet/table-facet.ts @@ -486,10 +486,11 @@ export class TableFacet extends FrozenFacet { colLeafNodes: Node[], colsHierarchy: Hierarchy, ) { + // 先计算宽度, 再计算高度, 确保计算多行文本时能获取到正确的最大文本宽度 this.calculateColLeafNodesWidth(colLeafNodes, colsHierarchy); + this.calculateColNodeWidthAndX(colLeafNodes); this.updateColsHierarchySampleMaxHeightNodes(colsHierarchy); this.calculateColNodesHeight(colsHierarchy); - this.calculateColNodeWidthAndX(colLeafNodes); this.updateCustomFieldsSampleNodes(colsHierarchy); this.adjustCustomColLeafNodesHeight({ leafNodes: colLeafNodes, From 6faa88aaefac734cfe0ed9767878c9a602e49a66 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Fri, 8 Nov 2024 17:51:48 +0800 Subject: [PATCH 5/6] chore(release): bump version From c8dcbc4957fd5a02638bf3065b90bc97065d3850 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 8 Nov 2024 09:54:43 +0000 Subject: [PATCH 6/6] =?UTF-8?q?chore(release):=20=F0=9F=A4=96=20@antv/s2-v?= =?UTF-8?q?2.0.0-next.32=20[skip=20ci]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-core/CHANGELOG.md | 11 +++++++++++ packages/s2-core/package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/s2-core/CHANGELOG.md b/packages/s2-core/CHANGELOG.md index 25260a5958..e4f6fd5801 100644 --- a/packages/s2-core/CHANGELOG.md +++ b/packages/s2-core/CHANGELOG.md @@ -1,3 +1,14 @@ +# [@antv/s2-v2.0.0-next.32](https://github.com/antvis/S2/compare/@antv/s2-v2.0.0-next.31...@antv/s2-v2.0.0-next.32) (2024-11-08) + + +### Bug Fixes + +* 修复分割线在深色背景下颜色渲染异常 & 内容宽高未包含分割线的问题 ([#2961](https://github.com/antvis/S2/issues/2961)) ([e759891](https://github.com/antvis/S2/commit/e759891865eee0940d0f5c92345d5490e10eb57c)) +* 修复开启自定义指标层级后, 角头数值文本未对齐 close [#2957](https://github.com/antvis/S2/issues/2957) ([#2966](https://github.com/antvis/S2/issues/2966)) ([6558a0d](https://github.com/antvis/S2/commit/6558a0df55dc324e1810e2f2a5d314de7389e2b1)) +* 修复文本设为左对齐时, 角头文本没有垂直对齐的问题 ([#2960](https://github.com/antvis/S2/issues/2960)) ([af8c968](https://github.com/antvis/S2/commit/af8c96809fd0e52f1da81e2a1c082a5f5b0b122a)) +* 修复明细表自定义列头时开启文本换行, 单元格高度错误的问题 close [#2955](https://github.com/antvis/S2/issues/2955) ([#2968](https://github.com/antvis/S2/issues/2968)) ([ca1f7e8](https://github.com/antvis/S2/commit/ca1f7e8a614dc5b36a6bc270df4ea8338e670444)) +* 修复表格卸载后, 高清适配逻辑还会触发的问题 ([#2965](https://github.com/antvis/S2/issues/2965)) ([c837efe](https://github.com/antvis/S2/commit/c837efe29f2ff02ea8957bcaf62be57d2467f160)), closes [L#116](https://github.com/L/issues/116) + # [@antv/s2-v2.0.0-next.31](https://github.com/antvis/S2/compare/@antv/s2-v2.0.0-next.30...@antv/s2-v2.0.0-next.31) (2024-11-01) diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json index 9535577624..be827e83cf 100644 --- a/packages/s2-core/package.json +++ b/packages/s2-core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/s2", - "version": "2.0.0-next.31", + "version": "2.0.0-next.32", "private": false, "description": "effective spreadsheet render core lib", "keywords": [