From 869fb5447870498618b920b56dddf04c1aca2580 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Mon, 24 Apr 2023 15:57:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(layout):=20=E4=BF=AE=E5=A4=8D=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=88=97=E5=A4=B4=E9=87=87=E6=A0=B7=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E5=AF=BC=E8=87=B4=E8=A1=8C=E8=A7=92=E5=A4=B4=E4=B8=8D?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=20close=20#2117?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/custom-grid-spec.ts.snap | 145 ++++++++++++++++++ .../__tests__/spreadsheet/custom-grid-spec.ts | 56 ++++++- packages/s2-core/src/facet/base-facet.ts | 35 +++-- packages/s2-core/src/facet/pivot-facet.ts | 8 +- packages/s2-core/src/facet/table-facet.ts | 1 + .../playground/components/CustomGrid.tsx | 14 +- 6 files changed, 226 insertions(+), 33 deletions(-) diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-grid-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-grid-spec.ts.snap index eb09af7980..4e93984e3d 100644 --- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-grid-spec.ts.snap +++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-grid-spec.ts.snap @@ -21,6 +21,133 @@ Array [ ] `; +exports[`SpreadSheet Custom Grid Tests Custom Col Grid Tests should calc correctly leaf nodes height and corner nodes 1`] = ` +Array [ + Object { + "description": undefined, + "field": "a-0", + "height": 30, + "value": "测试-0", + "width": 192, + "x": 0, + "y": 0, + }, + Object { + "description": undefined, + "field": "a-0-1", + "height": 60, + "value": "测试-0-1", + "width": 96, + "x": 0, + "y": 30, + }, + Object { + "description": undefined, + "field": "a-0-2", + "height": 60, + "value": "测试-0-2", + "width": 96, + "x": 96, + "y": 30, + }, + Object { + "description": "a-1 描述", + "field": "a-1", + "height": 30, + "value": "自定义节点 a-1", + "width": 288, + "x": 192, + "y": 0, + }, + Object { + "description": "a-1-1 描述", + "field": "a-1-1", + "height": 30, + "value": "自定义节点 a-1-1", + "width": 192, + "x": 192, + "y": 30, + }, + Object { + "description": "指标1描述", + "field": "measure-1", + "height": 30, + "value": "指标1", + "width": 96, + "x": 192, + "y": 60, + }, + Object { + "description": "指标2描述", + "field": "measure-2", + "height": 30, + "value": "指标2", + "width": 96, + "x": 288, + "y": 60, + }, + Object { + "description": "a-1-2 描述", + "field": "a-1-2", + "height": 60, + "value": "自定义节点 a-1-2", + "width": 96, + "x": 384, + "y": 30, + }, + Object { + "description": "a-2 描述", + "field": "a-2", + "height": 90, + "value": "自定义节点 a-2", + "width": 96, + "x": 480, + "y": 0, + }, +] +`; + +exports[`SpreadSheet Custom Grid Tests Custom Col Grid Tests should calc correctly leaf nodes height and corner nodes 2`] = ` +Array [ + Object { + "description": undefined, + "field": "type", + "height": 30, + "value": "类型", + "width": 96, + "x": 0, + "y": 60, + }, + Object { + "description": undefined, + "field": "sub_type", + "height": 30, + "value": "子类型", + "width": 96, + "x": 96, + "y": 60, + }, + Object { + "description": undefined, + "field": "a-1", + "height": 30, + "value": "层级1", + "width": 192, + "x": 0, + "y": 0, + }, + Object { + "description": undefined, + "field": "a-1-1", + "height": 30, + "value": "层级2", + "width": 192, + "x": 0, + "y": 30, + }, +] +`; + exports[`SpreadSheet Custom Grid Tests Custom Col Grid Tests should calc correctly leaf nodes width after column resized 1`] = ` Array [ Object { @@ -123,39 +250,57 @@ exports[`SpreadSheet Custom Grid Tests Custom Col Grid Tests should render custo Array [ Object { "description": "a-1 描述", + "field": "a-1", "height": 30, "value": "自定义节点 a-1", "width": 300, + "x": 0, + "y": 0, }, Object { "description": "a-1-1 描述", + "field": "a-1-1", "height": 30, "value": "自定义节点 a-1-1", "width": 200, + "x": 0, + "y": 30, }, Object { "description": "指标1描述", + "field": "measure-1", "height": 30, "value": "指标1", "width": 100, + "x": 0, + "y": 60, }, Object { "description": "指标2描述", + "field": "measure-2", "height": 30, "value": "指标2", "width": 100, + "x": 100, + "y": 60, }, Object { "description": "a-1-2 描述", + "field": "a-1-2", "height": 60, "value": "自定义节点 a-1-2", "width": 100, + "x": 200, + "y": 30, }, Object { "description": "a-2 描述", + "field": "a-2", "height": 90, "value": "自定义节点 a-2", "width": 100, + "x": 300, + "y": 0, }, ] `; diff --git a/packages/s2-core/__tests__/spreadsheet/custom-grid-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-grid-spec.ts index 9e73094075..39464814a0 100644 --- a/packages/s2-core/__tests__/spreadsheet/custom-grid-spec.ts +++ b/packages/s2-core/__tests__/spreadsheet/custom-grid-spec.ts @@ -1,6 +1,7 @@ import type { Group } from '@antv/g'; import { CustomGridData } from 'tests/data/data-custom-grid'; import { getContainer } from 'tests/util/helpers'; +import { pick } from 'lodash'; import type { HeaderCell } from '../../src/cell/header-cell'; import { KEY_GROUP_COL_RESIZE_AREA } from '../../src/common/constant'; import { CustomGridPivotDataSet } from '../../src/data-set/custom-grid-pivot-data-set'; @@ -233,6 +234,14 @@ describe('SpreadSheet Custom Grid Tests', () => { }); describe('Custom Col Grid Tests', () => { + const mapColNodes = (nodes = s2.getColumnNodes()) => { + return nodes.map((node) => { + return { + ...pick(node, ['field', 'value', 'x', 'y', 'width', 'height']), + description: node.extra?.['description'], + }; + }); + }; const customColDataCfg: S2DataConfig = { ...baseDataConfig, fields: customColGridSimpleFields, @@ -259,14 +268,7 @@ describe('SpreadSheet Custom Grid Tests', () => { */ test('should render custom layout column nodes', () => { - const colNodes = s2.getColumnNodes().map((node) => { - return { - value: node.value, - width: node.width, - height: node.height, - description: node.extra?.['description'], - }; - }); + const colNodes = mapColNodes(); expect(colNodes).toMatchSnapshot(); }); @@ -449,5 +451,43 @@ describe('SpreadSheet Custom Grid Tests', () => { measureNodes.every((node) => node.actualText === node.value), ).toBeTruthy(); }); + + // https://github.com/antvis/S2/issues/2117 + test('should calc correctly leaf nodes height and corner nodes', () => { + s2.setDataCfg({ + ...customColDataCfg, + fields: { + ...customColGridSimpleFields, + columns: [ + { + field: 'a-0', + title: '测试-0', + children: [ + { + field: 'a-0-1', + title: '测试-0-1', + }, + { + field: 'a-0-2', + title: '测试-0-2', + }, + ], + }, + ...customColGridSimpleFields.columns!, + ], + }, + }); + s2.render(); + + const colNodes = mapColNodes(); + const cornerNodes = mapColNodes(s2.facet.getCornerNodes()); + const node1 = s2.getColumnNodes().find(({ field }) => field === 'a-0-1'); + const node2 = s2.getColumnNodes().find(({ field }) => field === 'a-0-2'); + + expect(node1?.height).toEqual(60); + expect(node1?.height).toEqual(node2?.height); + expect(colNodes).toMatchSnapshot(); + expect(cornerNodes).toMatchSnapshot(); + }); }); }); diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts index fa00d7da3d..710ea38718 100644 --- a/packages/s2-core/src/facet/base-facet.ts +++ b/packages/s2-core/src/facet/base-facet.ts @@ -78,6 +78,7 @@ import { RowHeader, SeriesNumberHeader, } from './header'; +import type { Hierarchy } from './layout/hierarchy'; import type { ViewCellHeights } from './layout/interface'; import type { Node } from './layout/node'; import { WheelEvent as MobileWheel } from './mobile/wheelEvent'; @@ -1014,21 +1015,12 @@ export abstract class BaseFacet { }; /** - *<<<<<<< HEAD - *https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior - *阻止外部容器滚动: 表格是虚拟滚动, 这里按照标准模拟浏览器的 [overscroll-behavior] 实现 - *1. auto => 只有在滚动到表格顶部或底部时才触发外部容器滚动 - *1. contain => 默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到 - *2. none => 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止 - *所以只要不为 `auto`, 或者表格内, 都需要阻止外部容器滚动 - *======= - *https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior - *阻止外部容器滚动: 表格是虚拟滚动, 这里按照标准模拟浏览器的 [overscroll-behavior] 实现 - *1. auto => 只有在滚动到表格顶部或底部时才触发外部容器滚动 - *1. contain => 默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到 - *2. none => 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止 - *所以只要不为 `auto`, 或者表格内, 都需要阻止外部容器滚动 - *>>>>>>> next + * https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior + * 阻止外部容器滚动: 表格是虚拟滚动, 这里按照标准模拟浏览器的 [overscroll-behavior] 实现 + * 1. auto => 只有在滚动到表格顶部或底部时才触发外部容器滚动 + * 1. contain => 默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到 + * 2. none => 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止 + * 所以只要不为 `auto`, 或者表格内, 都需要阻止外部容器滚动 */ private stopScrollChainingIfNeeded = (event: WheelEvent) => { const { interaction } = this.spreadsheet.options; @@ -1486,6 +1478,19 @@ export abstract class BaseFacet { return this.cornerHeader?.getNodes() || []; } + public updateCustomFieldsSampleNodes(colsHierarchy: Hierarchy) { + if (!this.spreadsheet.isCustomColumnFields()) { + return; + } + + // 每一列层级不定, 用层级最深的那一列采样高度 + const nodes = colsHierarchy.getNodes().filter((node) => { + return colsHierarchy.sampleNodeForLastLevel?.id.includes(node.id); + }); + + colsHierarchy.sampleNodesForAllLevels = nodes; + } + /** * @description 自定义行头时, 叶子节点层级不定, 需要自动对齐其宽度, 填充空白 * ------------------------------------------------- diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts index 123ab7ac72..b2d6d9a3ea 100644 --- a/packages/s2-core/src/facet/pivot-facet.ts +++ b/packages/s2-core/src/facet/pivot-facet.ts @@ -158,7 +158,7 @@ export class PivotFacet extends BaseFacet { layoutResult; let preLeafNode = Node.blankNode(); - const allNodes = colsHierarchy.getNodes(); + const colNodes = colsHierarchy.getNodes(); colsHierarchy.sampleNodesForAllLevels.forEach((levelSampleNode) => { levelSampleNode.height = this.getColNodeHeight(levelSampleNode); @@ -167,8 +167,8 @@ export class PivotFacet extends BaseFacet { let currentCollIndex = 0; - for (let i = 0; i < allNodes.length; i++) { - const currentNode = allNodes[i]; + for (let i = 0; i < colNodes.length; i++) { + const currentNode = colNodes[i]; if (currentNode.isLeaf) { currentNode.colIndex = currentCollIndex; @@ -202,11 +202,13 @@ export class PivotFacet extends BaseFacet { layoutCoordinate(this.spreadsheet, null, currentNode); } + this.updateCustomFieldsSampleNodes(colsHierarchy); this.adjustColLeafNodesHeight({ leafNodes: colLeafNodes, hierarchy: colsHierarchy, }); this.autoCalculateColNodeWidthAndX(colLeafNodes); + if (!isEmpty(this.spreadsheet.options.totals?.col)) { this.adjustTotalNodesCoordinate(colsHierarchy); this.adjustSubTotalNodesCoordinate(colsHierarchy); diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts index 82116a2bd9..a3b8f2cae5 100644 --- a/packages/s2-core/src/facet/table-facet.ts +++ b/packages/s2-core/src/facet/table-facet.ts @@ -418,6 +418,7 @@ export class TableFacet extends BaseFacet { } } + this.updateCustomFieldsSampleNodes(colsHierarchy); this.adjustColLeafNodesHeight({ leafNodes: colLeafNodes, hierarchy: colsHierarchy, diff --git a/packages/s2-react/playground/components/CustomGrid.tsx b/packages/s2-react/playground/components/CustomGrid.tsx index 6d8e318615..7be73c1f04 100644 --- a/packages/s2-react/playground/components/CustomGrid.tsx +++ b/packages/s2-react/playground/components/CustomGrid.tsx @@ -91,17 +91,15 @@ export const CustomGrid = React.forwardRef( const [options, setOptions] = React.useState({ ...customRowGridOptions, hierarchyType: 'grid', + interaction: { + overscrollBehavior: 'none', + }, }); const [themeCfg, setThemeCfg] = React.useState({ name: 'default', - theme: { - resizeArea: { - backgroundOpacity: 1, - }, - }, }); const [sheetType, setSheetType] = - React.useState('table'); + React.useState('pivot'); const logHandler = (name: string) => @@ -120,6 +118,7 @@ export const CustomGrid = React.forwardRef( { + setSheetType('pivot'); setCustomType(e.target.value); }} > @@ -133,6 +132,7 @@ export const CustomGrid = React.forwardRef( checkedChildren="树状模式" unCheckedChildren="平铺模式" checked={options.hierarchyType === 'tree'} + disabled={sheetType === 'table'} onChange={(checked) => { setOptions({ hierarchyType: checked ? 'tree' : 'grid', @@ -159,7 +159,7 @@ export const CustomGrid = React.forwardRef( }} /> - +