Skip to content

Commit 28237eb

Browse files
fangsmilefangsmile
authored
Merge pull request #3776 from xxxace/feat/scrollbar-always-visible-space-correction
Feat/scrollbar always visible space correction
2 parents 3fc98b9 + 8e60b93 commit 28237eb

File tree

5 files changed

+192
-4
lines changed

5 files changed

+192
-4
lines changed

‎packages/vtable/examples/menu.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -806,6 +806,10 @@ export const menus = [
806806
{
807807
path: 'theme',
808808
name: 'custom-list'
809+
},
810+
{
811+
path: 'theme',
812+
name: 'scrollbar-always-visible-space-correction'
809813
}
810814
]
811815
},

‎packages/vtable/examples/theme/scrollbar-always-visible-space-correction.ts

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import * as VTable from '../../src';
2+
import { bindDebugTool } from '../../src/scenegraph/debug-tool';
3+
const CONTAINER_ID = 'vTable';
4+
5+
const generatePersons = count => {
6+
return Array.from(new Array(count)).map((_, i) => ({
7+
id: i + 1,
8+
email1: `${i + 1}@xxx.com`,
9+
name: `小明${i + 1}`,
10+
lastName: '王',
11+
date1: '2022年9月1日',
12+
tel: '000-0000-0000',
13+
sex: i % 2 === 0 ? 'boy' : 'girl',
14+
work: i % 2 === 0 ? 'back-end engineer' + (i + 1) : 'front-end engineer' + (i + 1),
15+
city: 'beijing',
16+
profit: 'test-the-edge-side'
17+
}));
18+
};
19+
export function createTable() {
20+
const columns = [
21+
{
22+
field: 'id',
23+
title: 'Order ID',
24+
width: 'auto'
25+
},
26+
{
27+
field: 'lastName',
28+
title: 'Last Name',
29+
width: 'auto'
30+
},
31+
{
32+
field: 'name',
33+
title: 'Name',
34+
width: 'auto'
35+
},
36+
{
37+
field: 'email1',
38+
title: 'Email Address',
39+
width: 'auto'
40+
},
41+
{
42+
field: 'date1',
43+
title: 'date1',
44+
width: 'auto'
45+
},
46+
{
47+
field: 'tel',
48+
title: 'tel',
49+
width: 'auto'
50+
},
51+
{
52+
field: 'sex',
53+
title: 'sex',
54+
width: 'auto'
55+
},
56+
{
57+
field: 'work',
58+
title: 'work',
59+
width: 'auto'
60+
},
61+
{
62+
field: 'city',
63+
title: 'city',
64+
width: 'auto'
65+
},
66+
{
67+
field: 'Quantity',
68+
title: 'Quantity',
69+
width: 'auto'
70+
},
71+
{
72+
field: 'Sales',
73+
title: 'Sales',
74+
width: 'auto'
75+
},
76+
{
77+
field: 'profit',
78+
title: 'Profit',
79+
width: 'auto'
80+
}
81+
];
82+
83+
const records = generatePersons(10);
84+
const container = document.getElementById(CONTAINER_ID);
85+
const button1 = document.createElement('button');
86+
button1.innerText = 'set 10 rows';
87+
88+
const button2 = document.createElement('button');
89+
button2.innerText = 'set 40 rows';
90+
91+
container?.parentElement?.appendChild(button1);
92+
container?.parentElement?.appendChild(button2);
93+
94+
container?.style.setProperty('margin', '10px');
95+
container?.style.setProperty('width', '500px');
96+
container?.style.setProperty('height', '500px');
97+
container?.style.setProperty('box-sizing', 'border-box');
98+
container?.style.setProperty('border', '1px solid #d7d9dc');
99+
const option: VTable.ListTableConstructorOptions = {
100+
container: container,
101+
emptyTip: true,
102+
records: records,
103+
columns: [...columns, ...columns, ...columns],
104+
theme: VTable.themes.ARCO.extends({
105+
defaultStyle: {
106+
padding: 0
107+
},
108+
headerStyle: {
109+
fontSize: 14,
110+
padding: 0,
111+
fontWeight: 600
112+
},
113+
bodyStyle: {
114+
fontSize: 14,
115+
padding: 0,
116+
bgColor: args => {
117+
const { row, table } = args;
118+
return 1 & (row - table.frozenRowCount) ? '#f8f8f8' : '#FFF';
119+
}
120+
},
121+
cellInnerBorder: false,
122+
frameStyle: {
123+
borderLineWidth: [0, 1, 1, 0],
124+
shadowBlur: 0,
125+
cornerRadius: 0,
126+
shadowColor: 'transparent'
127+
},
128+
scrollStyle: {
129+
scrollRailColor: 'RGBA(216,216,216,.5)',
130+
visible: 'always',
131+
width: 16,
132+
hoverOn: false,
133+
barToSide: true,
134+
scrollSliderCornerRadius: 0,
135+
scrollSliderColor: 'RGBA(170,170,170,1)'
136+
}
137+
})
138+
};
139+
const tableInstance = new VTable.ListTable(option);
140+
(window as any).tableInstance = tableInstance;
141+
142+
bindDebugTool(tableInstance.scenegraph.stage, {
143+
customGrapicKeys: ['col', 'row']
144+
});
145+
146+
button1.onclick = () => {
147+
tableInstance.setRecords(generatePersons(10));
148+
};
149+
150+
button2.onclick = () => {
151+
tableInstance.setRecords(generatePersons(40));
152+
};
153+
}

‎packages/vtable/src/core/BaseTable.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1164,8 +1164,25 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
11641164
heightP = this.canvasHeight - 1;
11651165
}
11661166

1167-
const width = Math.floor(widthP - style.getVerticalScrollBarSize(this.getTheme().scrollStyle));
1168-
const height = Math.floor(heightP - style.getHorizontalScrollBarSize(this.getTheme().scrollStyle));
1167+
const scrollStyle = this.getTheme().scrollStyle;
1168+
let vScrollBarWidth = style.getVerticalScrollBarSize(scrollStyle);
1169+
let hScrollBarHeight = style.getHorizontalScrollBarSize(scrollStyle);
1170+
1171+
// always的情况下没触发scrollbar应当取消掉这部分区域的留白
1172+
if (scrollStyle.visible === 'always') {
1173+
const vScrollBarVisible = this.scenegraph ? this.scenegraph.component.vScrollBar.attribute.visible : false;
1174+
if (vScrollBarWidth > 0 && vScrollBarVisible !== true) {
1175+
vScrollBarWidth = 0;
1176+
}
1177+
1178+
const hScrollBarVisible = this.scenegraph ? this.scenegraph.component.hScrollBar.attribute.visible : false;
1179+
if (hScrollBarHeight > 0 && hScrollBarVisible !== true) {
1180+
hScrollBarHeight = 0;
1181+
}
1182+
}
1183+
1184+
const width = Math.floor(widthP - vScrollBarWidth);
1185+
const height = Math.floor(heightP - hScrollBarHeight);
11691186

11701187
if (this.internalProps.theme?.frameStyle) {
11711188
//考虑表格整体边框的问题

‎packages/vtable/src/scenegraph/component/table-component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,11 @@ export class TableComponent {
376376
attrY = y - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y);
377377
}
378378

379+
// always的情况下没触发scrollbar应当取消掉这部分区域的留白
380+
if (hoverOn && horizontalVisible === 'always' && this.table.scenegraph.component.hScrollBar.attribute.visible) {
381+
attrY += width;
382+
}
383+
379384
this.hScrollBar.setAttributes({
380385
x: frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0),
381386
y: attrY,
@@ -416,6 +421,11 @@ export class TableComponent {
416421
attrX = x - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.x);
417422
}
418423

424+
// always的情况下没触发scrollbar应当取消掉这部分区域的留白
425+
if (hoverOn && verticalVisible === 'always' && this.table.scenegraph.component.vScrollBar.attribute.visible) {
426+
attrX += width;
427+
}
428+
419429
this.vScrollBar.setAttributes({
420430
x: attrX,
421431
y: frozenRowsHeight + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.y : 0),
@@ -443,6 +453,10 @@ export class TableComponent {
443453

444454
this.table.stateManager.setScrollLeft(oldHorizontalBarPos);
445455
this.table.stateManager.setScrollTop(oldVerticalBarPos);
456+
457+
if (horizontalVisible === 'always') {
458+
this.table._updateSize();
459+
}
446460
}
447461

448462
/**

‎packages/vtable/src/tools/style.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { ScrollStyle } from '../ts-types';
33

44
export function getHorizontalScrollBarSize(scrollStyle?: ScrollStyle): number {
55
if (
6-
scrollStyle?.hoverOn ||
6+
(scrollStyle.visible !== 'always' && scrollStyle?.hoverOn) ||
77
(scrollStyle?.horizontalVisible && scrollStyle?.horizontalVisible === 'none') ||
88
(!scrollStyle?.horizontalVisible && scrollStyle?.visible === 'none')
99
) {
@@ -14,7 +14,7 @@ export function getHorizontalScrollBarSize(scrollStyle?: ScrollStyle): number {
1414

1515
export function getVerticalScrollBarSize(scrollStyle?: ScrollStyle): number {
1616
if (
17-
scrollStyle?.hoverOn ||
17+
(scrollStyle.visible !== 'always' && scrollStyle?.hoverOn) ||
1818
(scrollStyle?.verticalVisible && scrollStyle?.verticalVisible === 'none') ||
1919
(!scrollStyle?.verticalVisible && scrollStyle?.visible === 'none')
2020
) {

0 commit comments

Comments
 (0)