Skip to content

Commit

Permalink
fix(layout): 修复自定义列头采样错误导致行角头不显示 close #2117
Browse files Browse the repository at this point in the history
  • Loading branch information
@lijinke666
lijinke666 committed Apr 24, 2023
1 parent 729ad3b commit 869fb54
Show file tree
Hide file tree
Showing 6 changed files with 226 additions and 33 deletions.
145 changes: 145 additions & 0 deletions packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-grid-spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
},
]
`;
Expand Down
56 changes: 48 additions & 8 deletions packages/s2-core/__tests__/spreadsheet/custom-grid-spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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();
});
Expand Down Expand Up @@ -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();
});
});
});
35 changes: 20 additions & 15 deletions packages/s2-core/src/facet/base-facet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 自定义行头时, 叶子节点层级不定, 需要自动对齐其宽度, 填充空白
* -------------------------------------------------
Expand Down
8 changes: 5 additions & 3 deletions packages/s2-core/src/facet/pivot-facet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions packages/s2-core/src/facet/table-facet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,7 @@ export class TableFacet extends BaseFacet {
}
}

this.updateCustomFieldsSampleNodes(colsHierarchy);
this.adjustColLeafNodesHeight({
leafNodes: colLeafNodes,
hierarchy: colsHierarchy,
Expand Down
Loading

0 comments on commit 869fb54

Please sign in to comment.