Skip to content

Commit d60b4a7

Browse files
committed
feat: initialize gantt structure and components
1 parent 6f1e620 commit d60b4a7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+511
-678
lines changed

example/src/app/app.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
app is work!
1+
<ngx-gantt [start]="1514736000" end="1609430400"></ngx-gantt>

example/src/app/app.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33
import { AppRoutingModule } from './app-routing.module';
44
import { AppComponent } from './app.component';
5+
import { NgxGanttModule } from 'ngx-gantt';
56

67
@NgModule({
78
declarations: [AppComponent],
8-
imports: [BrowserModule, AppRoutingModule],
9+
imports: [BrowserModule, AppRoutingModule, NgxGanttModule],
910
providers: [],
1011
bootstrap: [AppComponent],
1112
})

example/src/styles.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,14 @@
11
/* You can add global styles to this file, and also import other style files */
2+
3+
@import '../../packages/gantt/src/gantt.scss';
4+
5+
html,body {
6+
width: 100%;
7+
height: 100%;
8+
}
9+
10+
example-root{
11+
width: 100%;
12+
height: 100%;
13+
display: flex;
14+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>bar works!</p>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'gantt-bar',
5+
templateUrl: './bar.component.html',
6+
})
7+
export class GanttBarComponent implements OnInit {
8+
constructor() {}
9+
10+
ngOnInit() {}
11+
}

packages/gantt/src/calendar/calendar.component.html

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
11
<svg [attr.width]="view.width" [attr.height]="height">
2-
<g class="mesh">
3-
<g>
4-
<rect
5-
*ngFor="let group of groups; groupTrackBy"
6-
[attr.width]="view.width"
7-
[attr.height]="group.refs.height"
8-
[attr.x]="group.refs.x"
9-
[attr.y]="group.refs.y"
10-
class="mesh-item"
11-
></rect>
12-
<rect
13-
*ngIf="groups?.length > 0"
14-
[attr.width]="view.width"
15-
[attr.height]="'100%'"
16-
[attr.x]="0"
17-
[attr.y]="groups[groups.length - 1].refs.y + groups[groups.length - 1].refs.height"
18-
class="mesh-item"
19-
></rect>
20-
</g>
2+
<g class="date">
3+
<text
4+
class="primary-text"
5+
*ngFor="let point of view.primaryDatePoints; trackBy: trackBy"
6+
[attr.x]="point.x"
7+
[attr.y]="point.y"
8+
>
9+
{{ point.text }}
10+
</text>
11+
<text
12+
*ngFor="let point of view.secondaryDatePoints; trackBy: trackBy"
13+
class="secondary-text"
14+
[class.secondary-text-weekend]="point.additions?.isWeekend"
15+
[attr.x]="point.x"
16+
[attr.y]="point.y"
17+
>
18+
{{ point.text }}
19+
</text>
2120
<g>
2221
<line
23-
*ngFor="let group of groups"
24-
[attr.x1]="0"
25-
[attr.x2]="view.width"
26-
[attr.y1]="group.refs.line.y1"
27-
[attr.y2]="group.refs.line.y2"
28-
class="mesh-line"
22+
*ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
23+
[attr.x1]="(i + 1) * view.primaryWidth"
24+
[attr.x2]="(i + 1) * view.primaryWidth"
25+
[attr.y1]="0"
26+
[attr.y2]="60"
27+
class="primary-line"
2928
></line>
3029
</g>
3130
</g>
@@ -62,7 +61,14 @@
6261
</g>
6362
<g>
6463
<polygon *ngIf="todayPoint" class="today-line-angle" [attr.points]="todayPoint.angle" />
65-
<line *ngIf="todayPoint" [attr.x1]="todayPoint.x" [attr.x2]="todayPoint.x" [attr.y1]="0" [attr.y2]="'100%'" class="today-line"></line>
64+
<line
65+
*ngIf="todayPoint"
66+
[attr.x1]="todayPoint.x"
67+
[attr.x2]="todayPoint.x"
68+
[attr.y1]="0"
69+
[attr.y2]="'100%'"
70+
class="today-line"
71+
></line>
6672
</g>
6773
</g>
6874
</svg>
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.gantt-calendar-overlay {
2+
display: block;
3+
height: 100%;
4+
5+
line {
6+
shape-rendering: crispEdges;
7+
}
8+
9+
.date {
10+
.primary-text {
11+
fill: $gantt-date-primary-color;
12+
font-size: $gantt-date-primary-font-size;
13+
}
14+
15+
.secondary-text {
16+
fill: $gantt-date-secondary-color;
17+
font-size: $gantt-date-secondary-font-size;
18+
19+
&-weekend {
20+
fill: $gantt-date-secondary-weekend-color;
21+
}
22+
}
23+
24+
.primary-text,
25+
.secondary-text {
26+
text-anchor: middle;
27+
}
28+
29+
.primary-line {
30+
stroke: $gantt-border-color;
31+
}
32+
33+
.secondary-line {
34+
stroke-dasharray: 2px 3px;
35+
stroke: $gantt-date-secondary-border-color;
36+
}
37+
38+
.secondary-backdrop {
39+
fill: $gantt-date-week-backdrop-bg;
40+
}
41+
42+
.today-line-angle {
43+
fill: $gantt-date-today-color;
44+
}
45+
46+
.today-line {
47+
stroke: $gantt-date-today-color;
48+
stroke-width: 2px;
49+
}
50+
}
51+
}

packages/gantt/src/calendar/calendar.component.ts

Lines changed: 7 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,35 @@ import {
22
Component,
33
OnInit,
44
HostBinding,
5-
Input,
65
OnChanges,
76
SimpleChanges,
87
ChangeDetectorRef,
98
OnDestroy,
109
NgZone,
1110
Inject,
1211
} from '@angular/core';
13-
import { GanttGroupInternal } from '../class/group';
1412
import { GanttDatePoint } from '../class/date-point';
15-
import { isNumber } from 'ngx-tethys/util/helpers';
16-
import { TinyDate } from '../date';
17-
import { GanttDomService } from '../gantt-dom.service';
1813
import { Subject } from 'rxjs';
19-
import { take, takeUntil } from 'rxjs/operators';
14+
import { take } from 'rxjs/operators';
2015
import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
2116

2217
@Component({
2318
selector: 'gantt-calendar-overlay',
2419
templateUrl: './calendar.component.html',
2520
})
2621
export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy {
27-
@Input() groups: GanttGroupInternal[];
28-
29-
get view() {
30-
return this.ganttRef.view;
31-
}
32-
33-
public height: number;
22+
public height = 500;
3423

3524
public todayPoint: {
3625
x: number;
3726
angle: string;
3827
text: string;
3928
};
4029

30+
get view() {
31+
return this.ganttRef.view;
32+
}
33+
4134
private firstChange = true;
4235

4336
private unsubscribe$ = new Subject();
@@ -46,67 +39,23 @@ export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy {
4639

4740
constructor(
4841
@Inject(GANTT_REF_TOKEN) private ganttRef: GanttRef,
49-
private ganttDomService: GanttDomService,
5042
private cdr: ChangeDetectorRef,
5143
private ngZone: NgZone
5244
) {}
5345

5446
ngOnInit() {
5547
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
56-
this.updateHeight();
5748
this.cdr.detectChanges();
5849
this.firstChange = false;
5950
});
60-
61-
this.ganttDomService.getResize$().subscribe(() => {
62-
this.updateHeight();
63-
this.cdr.detectChanges();
64-
});
65-
66-
this.view.start$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
67-
this.computeTodayPoint();
68-
this.cdr.detectChanges();
69-
});
70-
}
71-
72-
ngOnChanges(changes: SimpleChanges): void {
73-
if (!this.firstChange) {
74-
if (changes.groups && this.groups) {
75-
this.updateHeight();
76-
}
77-
}
78-
}
79-
80-
computeTodayPoint() {
81-
const x = this.view.getTodayXPoint();
82-
if (isNumber(x)) {
83-
this.todayPoint = {
84-
x,
85-
angle: [`${x - 6},0`, `${x + 5},0`, `${x},5`].join(' '),
86-
text: new TinyDate().format('MM月d日'),
87-
};
88-
}
89-
}
90-
91-
private updateHeight() {
92-
this.computeHeight();
93-
this.computeTodayPoint();
9451
}
9552

96-
private computeHeight() {
97-
const clientHeight = this.ganttDomService.itemsContentElement.clientHeight;
98-
const height = this.groups.reduce<number>((pre, cur) => pre + cur.refs.height, 0);
99-
this.height = Math.max(clientHeight, height);
100-
}
53+
ngOnChanges(changes: SimpleChanges): void {}
10154

10255
trackBy(point: GanttDatePoint, index: number) {
10356
return point.text || index;
10457
}
10558

106-
groupTrackBy(group: GanttGroupInternal, index: number) {
107-
return group._id || index;
108-
}
109-
11059
ngOnDestroy() {
11160
this.unsubscribe$.next();
11261
this.unsubscribe$.complete();

packages/gantt/src/class/date-point.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { GanttDate } from '../date';
1+
import { GanttDate } from '../utils/date';
22

33
export class GanttDatePoint {
44
constructor(

packages/gantt/src/class/group.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { helpers } from '@worktile/ngx-styx';
1+
// import { helpers } from '@worktile/ngx-styx';
22
import { GanttItemInternal } from './item';
33
import { GanttOptions, getGroupHeight } from '../gantt.options';
44

@@ -49,15 +49,15 @@ export class GanttGroupInternal {
4949
}
5050

5151
buildItems(merge?: boolean) {
52-
const flatItems = helpers.flatten(this.items).sort((a, b) => a.start.getUnixTime() - b.start.getUnixTime());
53-
this.items = [];
54-
if (!merge) {
55-
flatItems.forEach((item) => {
56-
this.items.push([item]);
57-
});
58-
} else {
59-
this.buildMergeItems(flatItems);
60-
}
52+
// const flatItems = helpers.flatten(this.items).sort((a, b) => a.start.getUnixTime() - b.start.getUnixTime());
53+
// this.items = [];
54+
// if (!merge) {
55+
// flatItems.forEach((item) => {
56+
// this.items.push([item]);
57+
// });
58+
// } else {
59+
// this.buildMergeItems(flatItems);
60+
// }
6161
}
6262

6363
computeItemsRef() {

packages/gantt/src/class/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export * from './date-point';
2+
export * from './event';
3+
export * from './item';
4+
export * from './group';
5+
export * from './view-type';

packages/gantt/src/class/item.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { GanttView } from '../views/view';
22
import { GanttOptions, getCellHeight } from '../gantt.options';
3-
import { GanttDate, TinyDate } from '../date';
3+
import { GanttDate } from '../utils/date';
44
import { BehaviorSubject } from 'rxjs';
55

66
interface GroupPositions {
@@ -33,8 +33,8 @@ export class GanttItemInternal {
3333
this.origin = item;
3434
this._id = this.origin._id;
3535
this.dependencies = this.origin.dependencies || [];
36-
this.start = new TinyDate(item.start);
37-
this.end = new TinyDate(item.end);
36+
this.start = new GanttDate(item.start);
37+
this.end = new GanttDate(item.end);
3838
}
3939

4040
private computeX(groupX: number) {

packages/gantt/src/class/view-type.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum GanttViewType {
2+
day = 'day',
3+
quarter = 'quarter',
4+
month = 'month',
5+
year = 'year'
6+
}

packages/gantt/src/class/view-types.enum.ts

Lines changed: 0 additions & 21 deletions
This file was deleted.
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>dependencies works!</p>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'gantt-dependencies-overlay',
5+
templateUrl: './dependencies.component.html',
6+
})
7+
export class GanttDependenciesOverlayComponent implements OnInit {
8+
constructor() {}
9+
10+
ngOnInit() {}
11+
}

0 commit comments

Comments
 (0)