feat: initialize gantt structure and components

worktile · May 26, 2020 · d60b4a7 · d60b4a7
1 parent 6f1e620
commit d60b4a7
Show file tree

Hide file tree

Showing 52 changed files with 511 additions and 678 deletions.
diff --git a/example/src/app/app.component.html b/example/src/app/app.component.html
@@ -1 +1 @@
-app is work!
+<ngx-gantt [start]="1514736000" end="1609430400"></ngx-gantt>
diff --git a/example/src/app/app.module.ts b/example/src/app/app.module.ts
@@ -2,10 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { NgxGanttModule } from 'ngx-gantt';
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [BrowserModule, AppRoutingModule],
+    imports: [BrowserModule, AppRoutingModule, NgxGanttModule],
     providers: [],
     bootstrap: [AppComponent],
 })

diff --git a/example/src/styles.scss b/example/src/styles.scss
@@ -1 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import '../../packages/gantt/src/gantt.scss';
+
+html,body {
+  width: 100%;
+  height: 100%;
+}
+
+example-root{
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
diff --git a/packages/gantt/src/bar/bar.component.html b/packages/gantt/src/bar/bar.component.html
@@ -0,0 +1 @@
+<p>bar works!</p>
diff --git a/packages/gantt/src/bar/bar.component.ts b/packages/gantt/src/bar/bar.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'gantt-bar',
+    templateUrl: './bar.component.html',
+})
+export class GanttBarComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}
diff --git a/packages/gantt/src/calendar/calendar.component.html b/packages/gantt/src/calendar/calendar.component.html
@@ -1,31 +1,30 @@
 <svg [attr.width]="view.width" [attr.height]="height">
-  <g class="mesh">
-    <g>
-      <rect
-        *ngFor="let group of groups; groupTrackBy"
-        [attr.width]="view.width"
-        [attr.height]="group.refs.height"
-        [attr.x]="group.refs.x"
-        [attr.y]="group.refs.y"
-        class="mesh-item"
-      ></rect>
-      <rect
-        *ngIf="groups?.length > 0"
-        [attr.width]="view.width"
-        [attr.height]="'100%'"
-        [attr.x]="0"
-        [attr.y]="groups[groups.length - 1].refs.y + groups[groups.length - 1].refs.height"
-        class="mesh-item"
-      ></rect>
-    </g>
+  <g class="date">
+    <text
+      class="primary-text"
+      *ngFor="let point of view.primaryDatePoints; trackBy: trackBy"
+      [attr.x]="point.x"
+      [attr.y]="point.y"
+    >
+      {{ point.text }}
+    </text>
+    <text
+      *ngFor="let point of view.secondaryDatePoints; trackBy: trackBy"
+      class="secondary-text"
+      [class.secondary-text-weekend]="point.additions?.isWeekend"
+      [attr.x]="point.x"
+      [attr.y]="point.y"
+    >
+      {{ point.text }}
+    </text>
     <g>
       <line
-        *ngFor="let group of groups"
-        [attr.x1]="0"
-        [attr.x2]="view.width"
-        [attr.y1]="group.refs.line.y1"
-        [attr.y2]="group.refs.line.y2"
-        class="mesh-line"
+        *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
+        [attr.x1]="(i + 1) * view.primaryWidth"
+        [attr.x2]="(i + 1) * view.primaryWidth"
+        [attr.y1]="0"
+        [attr.y2]="60"
+        class="primary-line"
       ></line>
     </g>
   </g>
@@ -62,7 +61,14 @@
     </g>
     <g>
       <polygon *ngIf="todayPoint" class="today-line-angle" [attr.points]="todayPoint.angle" />
-      <line *ngIf="todayPoint" [attr.x1]="todayPoint.x" [attr.x2]="todayPoint.x" [attr.y1]="0" [attr.y2]="'100%'" class="today-line"></line>
+      <line
+        *ngIf="todayPoint"
+        [attr.x1]="todayPoint.x"
+        [attr.x2]="todayPoint.x"
+        [attr.y1]="0"
+        [attr.y2]="'100%'"
+        class="today-line"
+      ></line>
     </g>
   </g>
 </svg>
diff --git a/packages/gantt/src/calendar/calendar.component.scss b/packages/gantt/src/calendar/calendar.component.scss
@@ -0,0 +1,51 @@
+.gantt-calendar-overlay {
+  display: block;
+  height: 100%;
+
+  line {
+    shape-rendering: crispEdges;
+  }
+
+  .date {
+    .primary-text {
+      fill: $gantt-date-primary-color;
+      font-size: $gantt-date-primary-font-size;
+    }
+
+    .secondary-text {
+      fill: $gantt-date-secondary-color;
+      font-size: $gantt-date-secondary-font-size;
+
+      &-weekend {
+        fill: $gantt-date-secondary-weekend-color;
+      }
+    }
+
+    .primary-text,
+    .secondary-text {
+      text-anchor: middle;
+    }
+
+    .primary-line {
+      stroke: $gantt-border-color;
+    }
+
+    .secondary-line {
+      stroke-dasharray: 2px 3px;
+      stroke: $gantt-date-secondary-border-color;
+    }
+
+    .secondary-backdrop {
+      fill: $gantt-date-week-backdrop-bg;
+    }
+
+    .today-line-angle {
+      fill: $gantt-date-today-color;
+    }
+
+    .today-line {
+      stroke: $gantt-date-today-color;
+      stroke-width: 2px;
+    }
+  }
+}
diff --git a/packages/gantt/src/calendar/calendar.component.ts b/packages/gantt/src/calendar/calendar.component.ts
@@ -2,42 +2,35 @@ import {
     Component,
     OnInit,
     HostBinding,
-    Input,
     OnChanges,
     SimpleChanges,
     ChangeDetectorRef,
     OnDestroy,
     NgZone,
     Inject,
 } from '@angular/core';
-import { GanttGroupInternal } from '../class/group';
 import { GanttDatePoint } from '../class/date-point';
-import { isNumber } from 'ngx-tethys/util/helpers';
-import { TinyDate } from '../date';
-import { GanttDomService } from '../gantt-dom.service';
 import { Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref';
 
 @Component({
     selector: 'gantt-calendar-overlay',
     templateUrl: './calendar.component.html',
 })
 export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy {
-    @Input() groups: GanttGroupInternal[];
-
-    get view() {
-        return this.ganttRef.view;
-    }
-
-    public height: number;
+    public height = 500;
 
     public todayPoint: {
         x: number;
         angle: string;
         text: string;
     };
 
+    get view() {
+        return this.ganttRef.view;
+    }
+
     private firstChange = true;
 
     private unsubscribe$ = new Subject();
@@ -46,67 +39,23 @@ export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy {
 
     constructor(
         @Inject(GANTT_REF_TOKEN) private ganttRef: GanttRef,
-        private ganttDomService: GanttDomService,
         private cdr: ChangeDetectorRef,
         private ngZone: NgZone
     ) {}
 
     ngOnInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.updateHeight();
             this.cdr.detectChanges();
             this.firstChange = false;
         });
-
-        this.ganttDomService.getResize$().subscribe(() => {
-            this.updateHeight();
-            this.cdr.detectChanges();
-        });
-
-        this.view.start$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.computeTodayPoint();
-            this.cdr.detectChanges();
-        });
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (!this.firstChange) {
-            if (changes.groups && this.groups) {
-                this.updateHeight();
-            }
-        }
-    }
-
-    computeTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        if (isNumber(x)) {
-            this.todayPoint = {
-                x,
-                angle: [`${x - 6},0`, `${x + 5},0`, `${x},5`].join(' '),
-                text: new TinyDate().format('MM月d日'),
-            };
-        }
-    }
-
-    private updateHeight() {
-        this.computeHeight();
-        this.computeTodayPoint();
     }
 
-    private computeHeight() {
-        const clientHeight = this.ganttDomService.itemsContentElement.clientHeight;
-        const height = this.groups.reduce<number>((pre, cur) => pre + cur.refs.height, 0);
-        this.height = Math.max(clientHeight, height);
-    }
+    ngOnChanges(changes: SimpleChanges): void {}
 
     trackBy(point: GanttDatePoint, index: number) {
         return point.text || index;
     }
 
-    groupTrackBy(group: GanttGroupInternal, index: number) {
-        return group._id || index;
-    }
-
     ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();

diff --git a/packages/gantt/src/class/date-point.ts b/packages/gantt/src/class/date-point.ts
@@ -1,4 +1,4 @@
-import { GanttDate } from '../date';
+import { GanttDate } from '../utils/date';
 
 export class GanttDatePoint {
     constructor(

diff --git a/packages/gantt/src/class/group.ts b/packages/gantt/src/class/group.ts
@@ -1,4 +1,4 @@
-import { helpers } from '@worktile/ngx-styx';
+// import { helpers } from '@worktile/ngx-styx';
 import { GanttItemInternal } from './item';
 import { GanttOptions, getGroupHeight } from '../gantt.options';
 
@@ -49,15 +49,15 @@ export class GanttGroupInternal {
     }
 
     buildItems(merge?: boolean) {
-        const flatItems = helpers.flatten(this.items).sort((a, b) => a.start.getUnixTime() - b.start.getUnixTime());
-        this.items = [];
-        if (!merge) {
-            flatItems.forEach((item) => {
-                this.items.push([item]);
-            });
-        } else {
-            this.buildMergeItems(flatItems);
-        }
+        // const flatItems = helpers.flatten(this.items).sort((a, b) => a.start.getUnixTime() - b.start.getUnixTime());
+        // this.items = [];
+        // if (!merge) {
+        //     flatItems.forEach((item) => {
+        //         this.items.push([item]);
+        //     });
+        // } else {
+        //     this.buildMergeItems(flatItems);
+        // }
     }
 
     computeItemsRef() {

diff --git a/packages/gantt/src/class/index.ts b/packages/gantt/src/class/index.ts
@@ -0,0 +1,5 @@
+export * from './date-point';
+export * from './event';
+export * from './item';
+export * from './group';
+export * from './view-type';
diff --git a/packages/gantt/src/class/item.ts b/packages/gantt/src/class/item.ts
@@ -1,6 +1,6 @@
 import { GanttView } from '../views/view';
 import { GanttOptions, getCellHeight } from '../gantt.options';
-import { GanttDate, TinyDate } from '../date';
+import { GanttDate } from '../utils/date';
 import { BehaviorSubject } from 'rxjs';
 
 interface GroupPositions {
@@ -33,8 +33,8 @@ export class GanttItemInternal {
         this.origin = item;
         this._id = this.origin._id;
         this.dependencies = this.origin.dependencies || [];
-        this.start = new TinyDate(item.start);
-        this.end = new TinyDate(item.end);
+        this.start = new GanttDate(item.start);
+        this.end = new GanttDate(item.end);
     }
 
     private computeX(groupX: number) {

diff --git a/packages/gantt/src/class/view-type.ts b/packages/gantt/src/class/view-type.ts
@@ -0,0 +1,6 @@
+export enum GanttViewType {
+    day = 'day',
+    quarter = 'quarter',
+    month = 'month',
+    year = 'year'
+}
diff --git a/packages/gantt/src/class/view-types.enum.ts b/packages/gantt/src/class/view-types.enum.ts
diff --git a/packages/gantt/src/dependencies/dependencies.component.html b/packages/gantt/src/dependencies/dependencies.component.html
@@ -0,0 +1 @@
+<p>dependencies works!</p>
diff --git a/packages/gantt/src/dependencies/dependencies.component.ts b/packages/gantt/src/dependencies/dependencies.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'gantt-dependencies-overlay',
+    templateUrl: './dependencies.component.html',
+})
+export class GanttDependenciesOverlayComponent implements OnInit {
+    constructor() {}
+
+    ngOnInit() {}
+}