Skip to content

Commit ad338d3

Browse files
sjbursjbur
authored
Scheduler: refactor Shaders module (DevExpress#32702)
1 parent 0076b82 commit ad338d3

6 files changed

Lines changed: 205 additions & 164 deletions

File tree

packages/devextreme/js/__internal/scheduler/shaders/m_current_time_shader.ts renamed to packages/devextreme/js/__internal/scheduler/shaders/current_time_shader.ts

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1+
import type { dxElementWrapper } from '@js/core/renderer';
12
import $ from '@js/core/renderer';
23

4+
import type SchedulerWorkSpace from '../workspaces/m_work_space';
5+
36
const DATE_TIME_SHADER_CLASS = 'dx-scheduler-date-time-shader';
47

58
class CurrentTimeShader {
69
_$container = this._workSpace._dateTableScrollable.$content();
710

8-
// @ts-expect-error
9-
_shader: any[];
11+
_shader!: dxElementWrapper[];
1012

11-
_$shader: any;
13+
_$shader!: dxElementWrapper;
1214

13-
constructor(public _workSpace: any) {
15+
constructor(public _workSpace: SchedulerWorkSpace) {
1416
}
1517

16-
render() {
18+
render(): void {
1719
this.initShaderElements();
1820

1921
this.renderShader();
@@ -23,20 +25,22 @@ class CurrentTimeShader {
2325
});
2426
}
2527

26-
initShaderElements() {
28+
initShaderElements(): void {
2729
this._$shader = this.createShader();
2830
this._shader = [];
2931
this._shader.push(this._$shader);
3032
}
3133

32-
renderShader() {}
34+
renderShader(): void {}
3335

34-
createShader() {
36+
createShader(): dxElementWrapper {
3537
return $('<div>').addClass(DATE_TIME_SHADER_CLASS);
3638
}
3739

38-
clean() {
39-
this._$container && this._$container.find(`.${DATE_TIME_SHADER_CLASS}`).remove();
40+
clean(): void {
41+
if (this._$container) {
42+
this._$container.find(`.${DATE_TIME_SHADER_CLASS}`).remove();
43+
}
4044
}
4145
}
4246

packages/devextreme/js/__internal/scheduler/shaders/m_current_time_shader_horizontal.ts renamed to packages/devextreme/js/__internal/scheduler/shaders/current_time_shader_horizontal.ts

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
1+
import type { dxElementWrapper } from '@js/core/renderer';
12
import { getBoundingRect } from '@js/core/utils/position';
23
import { setWidth } from '@js/core/utils/size';
34

4-
import CurrentTimeShader from './m_current_time_shader';
5+
import CurrentTimeShader from './current_time_shader';
56

67
class HorizontalCurrentTimeShader extends CurrentTimeShader {
7-
renderShader() {
8-
const groupCount = this._workSpace._isHorizontalGroupedWorkSpace() ? this._workSpace._getGroupCount() : 1;
8+
renderShader(): void {
9+
const groupCount = this._workSpace._isHorizontalGroupedWorkSpace()
10+
? this._workSpace._getGroupCount()
11+
: 1;
912

1013
for (let i = 0; i < groupCount; i += 1) {
1114
const isFirstShader = i === 0;
1215
const $shader = isFirstShader ? this._$shader : this.createShader();
1316

1417
if (this._workSpace.isGroupedByDate()) {
15-
this._customizeGroupedByDateShader($shader, i);
18+
this.customizeGroupedByDateShader($shader, i);
1619
} else {
17-
this._customizeShader($shader, i);
20+
this.customizeShader($shader, i);
1821
}
1922

20-
!isFirstShader && this._shader.push($shader);
23+
if (!isFirstShader) {
24+
this._shader.push($shader);
25+
}
2126
}
2227
}
2328

24-
_customizeShader($shader, groupIndex) {
25-
const shaderWidth = this._workSpace.getIndicationWidth();
29+
private customizeShader($shader: dxElementWrapper, groupIndex: number): void {
30+
// @ts-expect-error
31+
const shaderWidth = this._workSpace.getIndicationWidth() as number;
2632

27-
this._applyShaderWidth($shader, shaderWidth);
33+
this.applyShaderWidth($shader, shaderWidth);
2834

2935
if (groupIndex >= 1) {
3036
const workSpace = this._workSpace;
@@ -35,33 +41,33 @@ class HorizontalCurrentTimeShader extends CurrentTimeShader {
3541
}
3642
}
3743

38-
_applyShaderWidth($shader, width) {
44+
private applyShaderWidth($shader: dxElementWrapper, width: number): void {
3945
const maxWidth = getBoundingRect(this._$container.get(0)).width;
40-
41-
if (width > maxWidth) {
42-
width = maxWidth;
43-
}
44-
4546
if (width > 0) {
46-
setWidth($shader, width);
47+
setWidth($shader, Math.min(width, maxWidth));
4748
}
4849
}
4950

50-
_customizeGroupedByDateShader($shader, groupIndex) {
51-
const cellCount = this._workSpace.getIndicationCellCount();
51+
private customizeGroupedByDateShader($shader: dxElementWrapper, groupIndex: number): void {
52+
// @ts-expect-error
53+
const cellCount = this._workSpace.getIndicationCellCount() as number;
5254
const integerPart = Math.floor(cellCount);
5355
const fractionPart = cellCount - integerPart;
5456
const isFirstShaderPart = groupIndex === 0;
5557
const workSpace = this._workSpace;
56-
const shaderWidth = isFirstShaderPart ? workSpace.getIndicationWidth() : fractionPart * workSpace.getCellWidth();
57-
let shaderLeft;
58+
const shaderWidth = isFirstShaderPart
59+
// @ts-expect-error
60+
? workSpace.getIndicationWidth() as number
61+
: fractionPart * workSpace.getCellWidth();
62+
let shaderLeft = 0;
5863

59-
this._applyShaderWidth($shader, shaderWidth);
64+
this.applyShaderWidth($shader, shaderWidth);
6065

6166
if (isFirstShaderPart) {
6267
shaderLeft = workSpace._getCellCount() * workSpace.getCellWidth() * groupIndex;
6368
} else {
64-
shaderLeft = workSpace.getCellWidth() * integerPart * workSpace._getGroupCount() + groupIndex * workSpace.getCellWidth();
69+
shaderLeft = workSpace.getCellWidth() * integerPart * workSpace._getGroupCount()
70+
+ groupIndex * workSpace.getCellWidth();
6571
}
6672

6773
$shader.css('left', shaderLeft);

‎packages/devextreme/js/__internal/scheduler/shaders/current_time_shader_vertical.ts‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import $, { type dxElementWrapper } from '@js/core/renderer';
2+
import { setHeight, setWidth } from '@js/core/utils/size';
3+
4+
import CurrentTimeShader from './current_time_shader';
5+
6+
const DATE_TIME_SHADER_ALL_DAY_CLASS = 'dx-scheduler-date-time-shader-all-day';
7+
const DATE_TIME_SHADER_TOP_CLASS = 'dx-scheduler-date-time-shader-top';
8+
const DATE_TIME_SHADER_BOTTOM_CLASS = 'dx-scheduler-date-time-shader-bottom';
9+
10+
class VerticalCurrentTimeShader extends CurrentTimeShader {
11+
_$topShader!: dxElementWrapper;
12+
13+
_$bottomShader!: dxElementWrapper;
14+
15+
_$allDayIndicator!: dxElementWrapper;
16+
17+
renderShader(): void {
18+
let shaderHeight = this.getShaderHeight();
19+
const maxHeight = this.getShaderMaxHeight();
20+
const isSolidShader = shaderHeight > maxHeight;
21+
22+
if (shaderHeight > maxHeight) {
23+
shaderHeight = maxHeight;
24+
}
25+
26+
setHeight(this._$shader, shaderHeight);
27+
const groupCount = this._workSpace._getGroupCount() || 1;
28+
29+
if (this._workSpace.isGroupedByDate()) {
30+
this.renderGroupedByDateShaderParts(groupCount, shaderHeight, maxHeight, isSolidShader);
31+
} else {
32+
this.renderShaderParts(groupCount, shaderHeight, maxHeight, isSolidShader);
33+
}
34+
}
35+
36+
private renderShaderParts(
37+
groupCount: number,
38+
shaderHeight: number,
39+
maxHeight: number,
40+
isSolidShader: boolean,
41+
): void {
42+
for (let i = 0; i < groupCount; i += 1) {
43+
const shaderWidth = this.getShaderWidth();
44+
this.renderTopShader(this._$shader, shaderHeight, shaderWidth, i);
45+
46+
if (!isSolidShader) {
47+
this.renderBottomShader(this._$shader, maxHeight, shaderHeight, shaderWidth, i);
48+
}
49+
50+
this.renderAllDayShader(shaderWidth, i);
51+
}
52+
}
53+
54+
private renderGroupedByDateShaderParts(
55+
groupCount: number,
56+
shaderHeight: number,
57+
maxHeight: number,
58+
isSolidShader: boolean,
59+
): void {
60+
const shaderWidth = this.getShaderWidth();
61+
const bottomShaderWidth = shaderHeight < 0
62+
? shaderWidth
63+
: shaderWidth - this._workSpace.getCellWidth();
64+
const normalizedShaderHeight = Math.max(shaderHeight, 0);
65+
66+
this.renderTopShader(this._$shader, normalizedShaderHeight, shaderWidth * groupCount, 0);
67+
68+
if (!isSolidShader) {
69+
this.renderBottomShader(
70+
this._$shader,
71+
maxHeight,
72+
normalizedShaderHeight,
73+
bottomShaderWidth * groupCount + this._workSpace.getCellWidth(),
74+
0,
75+
);
76+
}
77+
78+
this.renderAllDayShader(shaderWidth * groupCount, 0);
79+
}
80+
81+
private renderTopShader(
82+
$shader: dxElementWrapper,
83+
height: number,
84+
width: number,
85+
i: number,
86+
): void {
87+
this._$topShader = $('<div>').addClass(DATE_TIME_SHADER_TOP_CLASS);
88+
if (width) {
89+
setWidth(this._$topShader, width);
90+
}
91+
if (height) {
92+
setHeight(this._$topShader, height);
93+
}
94+
95+
this._$topShader.css('marginTop', this.getShaderTopOffset(i));
96+
this._$topShader.css('left', this.getShaderOffset(i, width));
97+
98+
$shader.append(this._$topShader);
99+
}
100+
101+
private renderBottomShader(
102+
$shader: dxElementWrapper,
103+
maxHeight: number,
104+
height: number,
105+
width: number,
106+
i: number,
107+
): void {
108+
this._$bottomShader = $('<div>').addClass(DATE_TIME_SHADER_BOTTOM_CLASS);
109+
110+
const shaderWidth = height < 0 ? width : width - this._workSpace.getCellWidth();
111+
const shaderHeight = height < 0 ? maxHeight : maxHeight - height;
112+
113+
setWidth(this._$bottomShader, shaderWidth);
114+
setHeight(this._$bottomShader, shaderHeight);
115+
116+
this._$bottomShader.css('left', this.getShaderOffset(i, width - this._workSpace.getCellWidth()));
117+
118+
$shader.append(this._$bottomShader);
119+
}
120+
121+
private renderAllDayShader(shaderWidth: number, i: number): void {
122+
if (this._workSpace.option('showAllDayPanel')) {
123+
this._$allDayIndicator = $('<div>').addClass(DATE_TIME_SHADER_ALL_DAY_CLASS);
124+
setHeight(this._$allDayIndicator, this._workSpace.getAllDayHeight());
125+
setWidth(this._$allDayIndicator, shaderWidth);
126+
this._$allDayIndicator.css('left', this.getShaderOffset(i, shaderWidth));
127+
128+
this._workSpace._$allDayPanel.prepend(this._$allDayIndicator);
129+
}
130+
}
131+
132+
private getShaderOffset(i: number, width: number): number {
133+
return this._workSpace.getGroupedStrategy().getShaderOffset(i, width) as number;
134+
}
135+
136+
private getShaderTopOffset(i: number): number {
137+
return this._workSpace.getGroupedStrategy().getShaderTopOffset(i) as number;
138+
}
139+
140+
private getShaderHeight(): number {
141+
return this._workSpace.getGroupedStrategy().getShaderHeight() as number;
142+
}
143+
144+
private getShaderMaxHeight(): number {
145+
return this._workSpace.getGroupedStrategy().getShaderMaxHeight() as number;
146+
}
147+
148+
private getShaderWidth(): number {
149+
return this._workSpace.getGroupedStrategy().getShaderWidth() as number;
150+
}
151+
152+
clean(): void {
153+
super.clean();
154+
155+
if (this._workSpace?._$allDayPanel) {
156+
this._workSpace._$allDayPanel.find(`.${DATE_TIME_SHADER_ALL_DAY_CLASS}`).remove();
157+
}
158+
}
159+
}
160+
161+
export default VerticalCurrentTimeShader;

0 commit comments

Comments
 (0)