From d60b4a790aeb92c439a924a728687f02a36fbb3e Mon Sep 17 00:00:00 2001 From: walkekay Date: Tue, 26 May 2020 15:37:12 +0800 Subject: [PATCH] feat: initialize gantt structure and components --- example/src/app/app.component.html | 2 +- example/src/app/app.module.ts | 3 +- example/src/styles.scss | 13 ++ packages/gantt/src/bar/bar.component.html | 1 + packages/gantt/src/bar/bar.component.ts | 11 ++ .../src/calendar/calendar.component.html | 58 +++--- .../src/calendar/calendar.component.scss | 51 +++++ .../gantt/src/calendar/calendar.component.ts | 65 +----- packages/gantt/src/class/date-point.ts | 2 +- packages/gantt/src/class/group.ts | 20 +- packages/gantt/src/class/index.ts | 5 + packages/gantt/src/class/item.ts | 6 +- packages/gantt/src/class/view-type.ts | 6 + packages/gantt/src/class/view-types.enum.ts | 21 -- .../dependencies/dependencies.component.html | 1 + .../dependencies/dependencies.component.ts | 11 ++ packages/gantt/src/example.html | 8 +- .../gantt/src/flat/gantt-flat.component.html | 0 .../gantt/src/flat/gantt-flat.component.ts | 11 ++ .../gantt/src/flat/group/group.component.html | 1 + .../gantt/src/flat/group/group.component.ts | 11 ++ packages/gantt/src/gantt-dom.service.ts | 0 packages/gantt/src/gantt-drag-container.ts | 0 packages/gantt/src/gantt-print.service.ts | 0 packages/gantt/src/gantt-ref.ts | 2 - packages/gantt/src/gantt-upper.ts | 79 ++++++++ packages/gantt/src/gantt.component.html | 2 + packages/gantt/src/gantt.component.scss | 187 ------------------ packages/gantt/src/gantt.component.ts | 72 ++----- packages/gantt/src/gantt.module.ts | 17 +- packages/gantt/src/gantt.scss | 178 ++++++----------- .../gantt/src/header/header.component.html | 36 ---- packages/gantt/src/header/header.component.ts | 34 ---- packages/gantt/src/header/header.scss | 22 --- .../src/layout/gantt-container.component.ts | 11 ++ .../gantt/src/layout/gantt-side.component.ts | 11 ++ packages/gantt/src/module.ts | 18 -- packages/gantt/src/public-api.ts | 1 + .../src/table/column/column.component.ts | 11 ++ .../src/table/gantt-table.component.html | 4 + .../src/table/gantt-table.component.scss | 5 + .../gantt/src/table/gantt-table.component.ts | 44 +++++ .../src/table/group/group.component.html | 0 .../gantt/src/table/group/group.component.ts | 0 .../src/table/items/items.component.html | 0 .../gantt/src/table/items/items.component.ts | 0 packages/gantt/src/{ => utils}/date.ts | 104 +++++----- packages/gantt/src/views/day.ts | 10 +- packages/gantt/src/views/factory.ts | 4 +- packages/gantt/src/views/month.ts | 8 +- packages/gantt/src/views/quarter.ts | 12 +- packages/gantt/src/views/view.ts | 10 +- 52 files changed, 511 insertions(+), 678 deletions(-) create mode 100644 packages/gantt/src/bar/bar.component.html create mode 100644 packages/gantt/src/bar/bar.component.ts create mode 100644 packages/gantt/src/calendar/calendar.component.scss create mode 100644 packages/gantt/src/class/index.ts create mode 100644 packages/gantt/src/class/view-type.ts delete mode 100644 packages/gantt/src/class/view-types.enum.ts create mode 100644 packages/gantt/src/dependencies/dependencies.component.html create mode 100644 packages/gantt/src/dependencies/dependencies.component.ts create mode 100644 packages/gantt/src/flat/gantt-flat.component.html create mode 100644 packages/gantt/src/flat/gantt-flat.component.ts create mode 100644 packages/gantt/src/flat/group/group.component.html create mode 100644 packages/gantt/src/flat/group/group.component.ts create mode 100644 packages/gantt/src/gantt-dom.service.ts create mode 100644 packages/gantt/src/gantt-drag-container.ts create mode 100644 packages/gantt/src/gantt-print.service.ts create mode 100644 packages/gantt/src/gantt-upper.ts delete mode 100644 packages/gantt/src/gantt.component.scss delete mode 100644 packages/gantt/src/header/header.component.html delete mode 100644 packages/gantt/src/header/header.component.ts delete mode 100644 packages/gantt/src/header/header.scss create mode 100644 packages/gantt/src/layout/gantt-container.component.ts create mode 100644 packages/gantt/src/layout/gantt-side.component.ts delete mode 100644 packages/gantt/src/module.ts create mode 100644 packages/gantt/src/table/column/column.component.ts create mode 100644 packages/gantt/src/table/gantt-table.component.html create mode 100644 packages/gantt/src/table/gantt-table.component.scss create mode 100644 packages/gantt/src/table/gantt-table.component.ts create mode 100644 packages/gantt/src/table/group/group.component.html create mode 100644 packages/gantt/src/table/group/group.component.ts create mode 100644 packages/gantt/src/table/items/items.component.html create mode 100644 packages/gantt/src/table/items/items.component.ts rename packages/gantt/src/{ => utils}/date.ts (54%) diff --git a/example/src/app/app.component.html b/example/src/app/app.component.html index 1cf624e0..82de0d4c 100644 --- a/example/src/app/app.component.html +++ b/example/src/app/app.component.html @@ -1 +1 @@ -app is work! + diff --git a/example/src/app/app.module.ts b/example/src/app/app.module.ts index 04a3ef5d..71522a50 100644 --- 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 index 90d4ee00..be2212b0 100644 --- 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 new file mode 100644 index 00000000..849cd57f --- /dev/null +++ b/packages/gantt/src/bar/bar.component.html @@ -0,0 +1 @@ +

bar works!

diff --git a/packages/gantt/src/bar/bar.component.ts b/packages/gantt/src/bar/bar.component.ts new file mode 100644 index 00000000..52750661 --- /dev/null +++ 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 index d8c79cb6..fea7abfd 100644 --- a/packages/gantt/src/calendar/calendar.component.html +++ b/packages/gantt/src/calendar/calendar.component.html @@ -1,31 +1,30 @@ - - - - - + + + {{ point.text }} + + + {{ point.text }} + @@ -62,7 +61,14 @@ - + diff --git a/packages/gantt/src/calendar/calendar.component.scss b/packages/gantt/src/calendar/calendar.component.scss new file mode 100644 index 00000000..8fd801ca --- /dev/null +++ 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 index 2ffba2ff..6d01800a 100644 --- a/packages/gantt/src/calendar/calendar.component.ts +++ b/packages/gantt/src/calendar/calendar.component.ts @@ -2,7 +2,6 @@ import { Component, OnInit, HostBinding, - Input, OnChanges, SimpleChanges, ChangeDetectorRef, @@ -10,13 +9,9 @@ import { 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({ @@ -24,13 +19,7 @@ import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref'; 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; @@ -38,6 +27,10 @@ export class GanttCalendarComponent implements OnInit, OnChanges, OnDestroy { 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((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 index 3d4a9355..9c2f7c00 100644 --- 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 index 5d379eff..c6aecde1 100644 --- 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 new file mode 100644 index 00000000..47547593 --- /dev/null +++ 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 index 0558cf12..518f6416 100644 --- 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 new file mode 100644 index 00000000..e13e25be --- /dev/null +++ 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 deleted file mode 100644 index 567e0956..00000000 --- a/packages/gantt/src/class/view-types.enum.ts +++ /dev/null @@ -1,21 +0,0 @@ -export enum GanttViewType { - day = 'day', - quarter = 'quarter', - month = 'month', - year = 'year' -} - -export const ganttViews = [ - { - type: GanttViewType.day, - name: '日' - }, - { - type: GanttViewType.month, - name: '月' - }, - { - type: GanttViewType.quarter, - name: '季' - } -]; diff --git a/packages/gantt/src/dependencies/dependencies.component.html b/packages/gantt/src/dependencies/dependencies.component.html new file mode 100644 index 00000000..cee7ed82 --- /dev/null +++ b/packages/gantt/src/dependencies/dependencies.component.html @@ -0,0 +1 @@ +

dependencies works!

diff --git a/packages/gantt/src/dependencies/dependencies.component.ts b/packages/gantt/src/dependencies/dependencies.component.ts new file mode 100644 index 00000000..5e876698 --- /dev/null +++ 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() {} +} diff --git a/packages/gantt/src/example.html b/packages/gantt/src/example.html index 20edf596..067151a9 100644 --- a/packages/gantt/src/example.html +++ b/packages/gantt/src/example.html @@ -1,8 +1,5 @@ - + - - - @@ -10,3 +7,6 @@ + + + diff --git a/packages/gantt/src/flat/gantt-flat.component.html b/packages/gantt/src/flat/gantt-flat.component.html new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/flat/gantt-flat.component.ts b/packages/gantt/src/flat/gantt-flat.component.ts new file mode 100644 index 00000000..af31d746 --- /dev/null +++ b/packages/gantt/src/flat/gantt-flat.component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'gantt-flat', + templateUrl: './gantt-flat.component.html', +}) +export class GanttFlatComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/packages/gantt/src/flat/group/group.component.html b/packages/gantt/src/flat/group/group.component.html new file mode 100644 index 00000000..f16d7f7f --- /dev/null +++ b/packages/gantt/src/flat/group/group.component.html @@ -0,0 +1 @@ +

group works!

diff --git a/packages/gantt/src/flat/group/group.component.ts b/packages/gantt/src/flat/group/group.component.ts new file mode 100644 index 00000000..b4ef53eb --- /dev/null +++ b/packages/gantt/src/flat/group/group.component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-group', + templateUrl: './group.component.html', +}) +export class GanttFlatGroupComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/packages/gantt/src/gantt-dom.service.ts b/packages/gantt/src/gantt-dom.service.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/gantt-drag-container.ts b/packages/gantt/src/gantt-drag-container.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/gantt-print.service.ts b/packages/gantt/src/gantt-print.service.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/gantt-ref.ts b/packages/gantt/src/gantt-ref.ts index 20dab429..c858a092 100644 --- a/packages/gantt/src/gantt-ref.ts +++ b/packages/gantt/src/gantt-ref.ts @@ -5,8 +5,6 @@ import { GanttOptions } from './gantt.options'; export interface GanttRef { element: HTMLElement; view: GanttView; - draggable: boolean; - dependable: boolean; options: GanttOptions; } diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts new file mode 100644 index 00000000..96dbfce2 --- /dev/null +++ b/packages/gantt/src/gantt-upper.ts @@ -0,0 +1,79 @@ +import { Input, TemplateRef, Output, EventEmitter, ContentChild, HostBinding, ElementRef } from '@angular/core'; +import { GanttItemInfo, GanttGroupInfo, GanttViewType, GanttLoadOnScrollEvent, GanttDragEvent } from './class'; +import { GanttOptions } from './gantt.options'; +import { GanttView } from './views/view'; +import { createViewFactory } from './views/factory'; +import { GanttDate } from './utils/date'; +import { Subject } from 'rxjs'; + +export abstract class GanttUpper { + @Input() items: GanttItemInfo[] = []; + + @Input() groups: GanttGroupInfo[] = []; + + @Input() viewType: GanttViewType = GanttViewType.month; + + @Input() showSide = true; + + @Input() sideTitle: string | TemplateRef; + + @Input() start: number; + + @Input() end: number; + + @Input() draggable: boolean; + + @Input() options: GanttOptions; + + @Input() disabledLoadOnScroll: boolean; + + @Output() loadOnScroll = new EventEmitter(); + + @Output() dragStarted = new EventEmitter(); + + @Output() dragEnded = new EventEmitter(); + + @ContentChild('barTemplate', { static: true }) barTemplate: TemplateRef; + + @ContentChild('groupTemplate', { static: true }) groupTemplate: TemplateRef; + + public view: GanttView; + + public get element() { + return this.elementRef.nativeElement; + } + + public firstChange = true; + + private unsubscribe$ = new Subject(); + + constructor(protected elementRef: ElementRef) {} + + onInit() { + this.createView(); + this.firstChange = false; + } + + onDestroy() { + this.unsubscribe$.next(); + this.unsubscribe$.complete(); + } + + private createView() { + const viewDate = this.getViewDate(); + this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.options); + } + + private getViewDate() { + let start = this.start; + let end = this.end; + this.items.forEach((item) => { + start = start ? Math.min(start, item.start) : item.start; + end = end ? Math.max(end, item.end) : item.end; + }); + return { + start: new GanttDate(start), + end: new GanttDate(end), + }; + } +} diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html index e69de29b..263884f5 100644 --- a/packages/gantt/src/gantt.component.html +++ b/packages/gantt/src/gantt.component.html @@ -0,0 +1,2 @@ + + diff --git a/packages/gantt/src/gantt.component.scss b/packages/gantt/src/gantt.component.scss deleted file mode 100644 index c6aa8586..00000000 --- a/packages/gantt/src/gantt.component.scss +++ /dev/null @@ -1,187 +0,0 @@ -$gantt-header-height: 50px; -$gantt-side-width: 200px; -$gantt-full-screen-width: 60px; -$gantt-border-color: $gray-200; -$gantt-bg-color: $white; -$gantt-mesh-bg-color:$gray-80; -$gantt-item-bg-color: $white; -$gantt-item-drag-mask-color: $primary; -$gantt-date-primary-color: $gray-600; -$gantt-date-primary-font-size: $font-size-base; -$gantt-date-secondary-color: $gray-800; -$gantt-date-secondary-font-size: $font-size-base; -$gantt-date-secondary-weekend-color: $gray-500; -$gantt-date-secondary-border-color: $gray-300; -$gantt-date-week-backdrop-bg: rgba($color: $gray-100, $alpha: 0.5); -$gantt-date-today-color: #FF9F73; -$gantt-bar-layer-bg: $white; -$gantt-bar-handle-color: $gray-400; -$gantt-bar-handle-height: 12px; - - - -@import './header/header.scss'; -@import './bar/bar.scss'; -@import './dependencies/dependencies.scss'; - -.gantt { - width: 100%; - height: 100%; - background-color: $gantt-bg-color; - flex: auto; - position: relative; - overflow: hidden; - opacity: 0; - - .gantt-container { - flex: 1; - display: flex; - position: absolute; - top: $gantt-header-height; - right: 0; - bottom: 0; - left: 0; - } - - .gantt-side { - border-right: 1px solid $gantt-border-color; - overflow-x: scroll; - overflow-y: hidden; - - .gantt-group { - padding: 20px; - border-bottom: 1px solid $gantt-border-color; - - &:last-child { - border-bottom: 0 - } - } - - } - - .gantt-items { - flex: 1; - position: relative; - - .gantt-items-content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: auto; - } - } - - .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; - } - - } - - .mesh { - - .mesh-header { - fill: $gantt-bg-color; - } - - .mesh-header-line { - stroke: $gantt-border-color; - stroke-width: 1px; - } - - .mesh-item { - fill: $gantt-mesh-bg-color; - } - - .mesh-line { - stroke: $gantt-border-color; - } - - .mesh-fill-line { - stroke: $gantt-mesh-bg-color; - } - } - - } - - .gantt-drag-backdrop { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - display: none; - } - - .gantt-drag-mask { - width: 200px; - position: absolute; - top: $gantt-header-height; - z-index: 1; - height: 100%; - display: none; - background: rgba($color: $gantt-item-drag-mask-color, $alpha: 0.05); - - .date-range { - width: 100%; - min-width: 100px; - top: -22px; - background: $gantt-item-drag-mask-color; - line-height: 22px; - border-radius: 4px; - color: $white; - position: absolute; - display: flex; - justify-content: space-between; - padding: 0 10px; - } - } -} diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts index 7424cb3a..b81726da 100644 --- a/packages/gantt/src/gantt.component.ts +++ b/packages/gantt/src/gantt.component.ts @@ -1,47 +1,34 @@ import { Component, - OnInit, - ViewChild, - ElementRef, Input, HostBinding, - AfterViewInit, - ContentChild, TemplateRef, - OnChanges, - ChangeDetectionStrategy, - SimpleChanges, - OnDestroy, Output, EventEmitter, + ChangeDetectionStrategy, } from '@angular/core'; -import { GanttView } from './views/view'; import { GanttOptions } from './gantt.options'; -import { GanttViewType } from './class/view-types.enum'; -import { GanttItemInfo, GanttItemInternal } from './class/item'; -import { GanttGroupInfo, GanttGroupInternal } from './class/group'; -import { Subject } from 'rxjs'; +import { GanttViewType } from './class/view-type'; +import { GanttItemInfo } from './class/item'; +import { GanttGroupInfo } from './class/group'; import { GanttDragEvent, GanttLoadOnScrollEvent, GanttDependencyEvent, GanttDependencyDragEvent } from './class/event'; -import { GANTT_REF_TOKEN, GanttRef } from './gantt-ref'; + +export type GanttMode = 'table' | 'flat'; @Component({ selector: 'ngx-gantt', templateUrl: './gantt.component.html', changeDetection: ChangeDetectionStrategy.OnPush, - providers: [ - { - provide: GANTT_REF_TOKEN, - useExisting: GanttComponent, - }, - ], }) -export class GanttComponent implements GanttRef, OnInit, OnChanges, AfterViewInit, OnDestroy { +export class GanttComponent { @Input() items: GanttItemInfo[] = []; @Input() groups: GanttGroupInfo[] = []; @Input() viewType: GanttViewType = GanttViewType.month; + @Input() mode: GanttMode = 'table'; + @Input() showSide = true; @Input() sideTitle: string | TemplateRef; @@ -54,6 +41,12 @@ export class GanttComponent implements GanttRef, OnInit, OnChanges, AfterViewIni @Input() dependable: boolean; + // @Input() linkable: boolean; + // item:{ + // links:[] + // } + + @Input() options: GanttOptions; @Input() disabledLoadOnScroll: boolean; @@ -70,38 +63,7 @@ export class GanttComponent implements GanttRef, OnInit, OnChanges, AfterViewIni @Output() dependencyClick = new EventEmitter(); - @ContentChild('itemTemplate', { static: true }) itemTemplate: TemplateRef; - - @ContentChild('groupTemplate', { static: true }) groupTemplate: TemplateRef; - - @ViewChild('container', { static: true }) container: ElementRef; - - @HostBinding('class.ngx-gantt') ganttClass = true; - - public view: GanttView; - - public get element() { - return this.elementRef.nativeElement; - } - - private firstChange = true; - - private unsubscribe$ = new Subject(); - - constructor(private elementRef: ElementRef) {} - - ngOnInit() {} - - ngAfterViewInit() {} - - ngOnChanges(changes: SimpleChanges) {} - - trackBy(item: GanttGroupInternal | GanttItemInternal, index: number) { - return item._id || index; - } + @HostBinding('class.gantt') ganttClass = true; - ngOnDestroy() { - this.unsubscribe$.next(); - this.unsubscribe$.complete(); - } + constructor() {} } diff --git a/packages/gantt/src/gantt.module.ts b/packages/gantt/src/gantt.module.ts index cb5d1fc5..088daf58 100644 --- a/packages/gantt/src/gantt.module.ts +++ b/packages/gantt/src/gantt.module.ts @@ -1,10 +1,23 @@ import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { GanttComponent } from './gantt.component'; +import { GanttCalendarComponent } from './calendar/calendar.component'; +import { GanttTableComponent } from './table/gantt-table.component'; +import { GanttContainerComponent } from './layout/gantt-container.component'; +import { GanttSideComponent } from './layout/gantt-side.component'; +import { GanttFlatComponent } from './flat/gantt-flat.component'; @NgModule({ - imports: [GanttComponent], + imports: [CommonModule], exports: [GanttComponent], - declarations: [], + declarations: [ + GanttComponent, + GanttTableComponent, + GanttFlatComponent, + GanttSideComponent, + GanttContainerComponent, + GanttCalendarComponent, + ], providers: [], }) export class NgxGanttModule {} diff --git a/packages/gantt/src/gantt.scss b/packages/gantt/src/gantt.scss index c6aa8586..88cc0829 100644 --- a/packages/gantt/src/gantt.scss +++ b/packages/gantt/src/gantt.scss @@ -1,28 +1,29 @@ -$gantt-header-height: 50px; -$gantt-side-width: 200px; -$gantt-full-screen-width: 60px; -$gantt-border-color: $gray-200; -$gantt-bg-color: $white; -$gantt-mesh-bg-color:$gray-80; -$gantt-item-bg-color: $white; -$gantt-item-drag-mask-color: $primary; -$gantt-date-primary-color: $gray-600; -$gantt-date-primary-font-size: $font-size-base; -$gantt-date-secondary-color: $gray-800; -$gantt-date-secondary-font-size: $font-size-base; -$gantt-date-secondary-weekend-color: $gray-500; -$gantt-date-secondary-border-color: $gray-300; -$gantt-date-week-backdrop-bg: rgba($color: $gray-100, $alpha: 0.5); -$gantt-date-today-color: #FF9F73; -$gantt-bar-layer-bg: $white; -$gantt-bar-handle-color: $gray-400; -$gantt-bar-handle-height: 12px; - - - -@import './header/header.scss'; -@import './bar/bar.scss'; -@import './dependencies/dependencies.scss'; +$gantt-header-height: 50px !default; +$gantt-side-width: 200px !default; +$gantt-full-screen-width: 60px !default; +$gantt-border-color: #eee !default; +$gantt-bg-color: #fff !default; +$gantt-item-bg-color: #fff !default; +$gantt-item-drag-mask-color: #348fe4 !default; +$gantt-bar-layer-bg: #fff !default; +$gantt-bar-handle-color: #cacaca !default; +$gantt-bar-handle-height: 12px !default; + +// calendar +$gantt-date-primary-color: #888 !default; +$gantt-date-primary-font-size: 14px !default; +$gantt-date-secondary-color: #333 !default; +$gantt-date-secondary-font-size: 14px !default; +$gantt-date-secondary-weekend-color: #aaa !default; +$gantt-date-secondary-border-color: #ddd !default; +$gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5) !default; +$gantt-date-today-color: #FF9F73 !default; + +// @import './bar/bar.scss'; +// @import './dependencies/dependencies.scss'; + +@import './calendar/calendar.component.scss'; +@import './table/gantt-table.component.scss'; .gantt { width: 100%; @@ -31,33 +32,43 @@ $gantt-bar-handle-height: 12px; flex: auto; position: relative; overflow: hidden; - opacity: 0; + + .gantt-side { + width: 400px; + border-right: 1px solid #ddd; + } .gantt-container { flex: 1; - display: flex; - position: absolute; - top: $gantt-header-height; - right: 0; - bottom: 0; - left: 0; + overflow-x: auto; } - .gantt-side { - border-right: 1px solid $gantt-border-color; - overflow-x: scroll; - overflow-y: hidden; - .gantt-group { - padding: 20px; - border-bottom: 1px solid $gantt-border-color; + // .gantt-container { + // flex: 1; + // display: flex; + // position: absolute; + // top: $gantt-header-height; + // right: 0; + // bottom: 0; + // left: 0; + // } - &:last-child { - border-bottom: 0 - } - } + // .gantt-side { + // border-right: 1px solid $gantt-border-color; + // overflow-x: scroll; + // overflow-y: hidden; - } + // .gantt-group { + // padding: 20px; + // border-bottom: 1px solid $gantt-border-color; + + // &:last-child { + // border-bottom: 0 + // } + // } + + // } .gantt-items { flex: 1; @@ -73,83 +84,6 @@ $gantt-bar-handle-height: 12px; } } - .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; - } - - } - - .mesh { - - .mesh-header { - fill: $gantt-bg-color; - } - - .mesh-header-line { - stroke: $gantt-border-color; - stroke-width: 1px; - } - - .mesh-item { - fill: $gantt-mesh-bg-color; - } - - .mesh-line { - stroke: $gantt-border-color; - } - - .mesh-fill-line { - stroke: $gantt-mesh-bg-color; - } - } - - } .gantt-drag-backdrop { position: absolute; @@ -177,7 +111,7 @@ $gantt-bar-handle-height: 12px; background: $gantt-item-drag-mask-color; line-height: 22px; border-radius: 4px; - color: $white; + color: #fff; position: absolute; display: flex; justify-content: space-between; diff --git a/packages/gantt/src/header/header.component.html b/packages/gantt/src/header/header.component.html deleted file mode 100644 index 4751a460..00000000 --- a/packages/gantt/src/header/header.component.html +++ /dev/null @@ -1,36 +0,0 @@ -
- - - - - {{ sideTitle }} - -
-
- - - - {{ point.text }} - - - {{ point.text }} - - - - - - -
diff --git a/packages/gantt/src/header/header.component.ts b/packages/gantt/src/header/header.component.ts deleted file mode 100644 index ab5ffc84..00000000 --- a/packages/gantt/src/header/header.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { Component, OnInit, Input, HostBinding, TemplateRef, Inject } from '@angular/core'; -import { GanttView } from '../views/view'; -import { GanttDatePoint } from '../class/date-point'; -import { getHeaderHeight } from '../gantt.options'; -import { GANTT_REF_TOKEN, GanttRef } from '../gantt-ref'; - -@Component({ - selector: 'gantt-header', - templateUrl: './header.component.html', - // changeDetection: ChangeDetectionStrategy.OnPush -}) -export class GanttHeaderComponent implements OnInit { - @Input() sideTitle: string | TemplateRef; - - get view() { - return this.ganttRef.view; - } - - headerHeight = getHeaderHeight(); - - @HostBinding('class.gantt-header') ganttHeaderClass = true; - - constructor(@Inject(GANTT_REF_TOKEN) public ganttRef: GanttRef) {} - - ngOnInit() {} - - trackBy(point: GanttDatePoint, index: number) { - return point.text || index; - } - - isTemplateRef(template: string | TemplateRef) { - return template instanceof TemplateRef; - } -} diff --git a/packages/gantt/src/header/header.scss b/packages/gantt/src/header/header.scss deleted file mode 100644 index cb29a572..00000000 --- a/packages/gantt/src/header/header.scss +++ /dev/null @@ -1,22 +0,0 @@ -.gantt-header { - display: flex; - position: relative; - height: $gantt-header-height; - - .gantt-side-header { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - border-right: 1px solid $gantt-border-color; - border-bottom: 1px solid$gantt-border-color; - } - - .gantt-items-header { - flex: 1; - overflow-x: hidden; - overflow-y: scroll; - position: relative; - border-bottom: 1px solid$gantt-border-color; - } -} diff --git a/packages/gantt/src/layout/gantt-container.component.ts b/packages/gantt/src/layout/gantt-container.component.ts new file mode 100644 index 00000000..b9877da1 --- /dev/null +++ b/packages/gantt/src/layout/gantt-container.component.ts @@ -0,0 +1,11 @@ +import { Component, HostBinding } from '@angular/core'; + +@Component({ + selector: 'gantt-container', + template: '', +}) +export class GanttContainerComponent { + @HostBinding('class.gantt-container') className = true; + + constructor() {} +} diff --git a/packages/gantt/src/layout/gantt-side.component.ts b/packages/gantt/src/layout/gantt-side.component.ts new file mode 100644 index 00000000..2138da0b --- /dev/null +++ b/packages/gantt/src/layout/gantt-side.component.ts @@ -0,0 +1,11 @@ +import { Component, HostBinding } from '@angular/core'; + +@Component({ + selector: 'gantt-side', + template: '', +}) +export class GanttSideComponent { + @HostBinding('class.gantt-side') className = true; + + constructor() {} +} diff --git a/packages/gantt/src/module.ts b/packages/gantt/src/module.ts deleted file mode 100644 index 7fa0eb9f..00000000 --- a/packages/gantt/src/module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { NgModule } from '@angular/core'; -import { GanttComponent } from './gantt.component'; -import { GanttCalendarComponent } from './calendar/calendar.component'; -import { CommonModule } from '@angular/common'; -import { NgxTethysModule } from 'ngx-tethys'; -import { GanttBarComponent } from './bar/bar.component'; -import { GanttHeaderComponent } from './header/header.component'; -import { GanttDependenciesComponent } from './dependencies/dependencies.component'; -import { NgxStyxSharedModule } from '@worktile/ngx-styx'; -import { DragDropModule } from '@angular/cdk/drag-drop'; - -@NgModule({ - imports: [CommonModule, NgxTethysModule, NgxStyxSharedModule, DragDropModule], - exports: [GanttComponent], - declarations: [GanttComponent, GanttHeaderComponent, GanttCalendarComponent, GanttBarComponent, GanttDependenciesComponent], - providers: [], -}) -export class GanttModule {} diff --git a/packages/gantt/src/public-api.ts b/packages/gantt/src/public-api.ts index 2e647fb6..6f6fe20e 100644 --- a/packages/gantt/src/public-api.ts +++ b/packages/gantt/src/public-api.ts @@ -3,3 +3,4 @@ */ export * from './gantt.module'; +export * from './gantt.component'; diff --git a/packages/gantt/src/table/column/column.component.ts b/packages/gantt/src/table/column/column.component.ts new file mode 100644 index 00000000..b178693e --- /dev/null +++ b/packages/gantt/src/table/column/column.component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'gantt-table-column', + template: '', +}) +export class GanttTableColumnComponent implements OnInit { + constructor() {} + + ngOnInit() {} +} diff --git a/packages/gantt/src/table/gantt-table.component.html b/packages/gantt/src/table/gantt-table.component.html new file mode 100644 index 00000000..af5bbd83 --- /dev/null +++ b/packages/gantt/src/table/gantt-table.component.html @@ -0,0 +1,4 @@ + + + + diff --git a/packages/gantt/src/table/gantt-table.component.scss b/packages/gantt/src/table/gantt-table.component.scss new file mode 100644 index 00000000..eea0cacc --- /dev/null +++ b/packages/gantt/src/table/gantt-table.component.scss @@ -0,0 +1,5 @@ +.gantt-table { + width: 100%; + height: 100%; + display: flex; +} diff --git a/packages/gantt/src/table/gantt-table.component.ts b/packages/gantt/src/table/gantt-table.component.ts new file mode 100644 index 00000000..0b2da355 --- /dev/null +++ b/packages/gantt/src/table/gantt-table.component.ts @@ -0,0 +1,44 @@ +import { + Component, + OnInit, + ElementRef, + ChangeDetectionStrategy, + Input, + EventEmitter, + Output, + HostBinding, +} from '@angular/core'; +import { GanttUpper } from '../gantt-upper'; +import { GanttRef, GANTT_REF_TOKEN } from '../gantt-ref'; +import { GanttDependencyDragEvent, GanttDependencyEvent } from '../class'; + +@Component({ + selector: 'gantt-table', + templateUrl: './gantt-table.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + { + provide: GANTT_REF_TOKEN, + useExisting: GanttTableComponent, + }, + ], +}) +export class GanttTableComponent extends GanttUpper implements GanttRef, OnInit { + @Input() dependable: boolean; + + @Output() dependencyDragStarted = new EventEmitter(); + + @Output() dependencyDragEnded = new EventEmitter(); + + @Output() dependencyClick = new EventEmitter(); + + @HostBinding('class.gantt-table') className = true; + + constructor(elementRef: ElementRef) { + super(elementRef); + } + + ngOnInit() { + super.onInit(); + } +} diff --git a/packages/gantt/src/table/group/group.component.html b/packages/gantt/src/table/group/group.component.html new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/table/group/group.component.ts b/packages/gantt/src/table/group/group.component.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/table/items/items.component.html b/packages/gantt/src/table/items/items.component.html new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/table/items/items.component.ts b/packages/gantt/src/table/items/items.component.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/gantt/src/date.ts b/packages/gantt/src/utils/date.ts similarity index 54% rename from packages/gantt/src/date.ts rename to packages/gantt/src/utils/date.ts index dc4947cf..4b7fc6ab 100644 --- a/packages/gantt/src/date.ts +++ b/packages/gantt/src/utils/date.ts @@ -28,11 +28,9 @@ import { export * from 'date-fns'; -export type GanttDate = TinyDate; +export type GanttDateUtil = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'; -export type TinyDateUtil = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'; - -export class TinyDate { +export class GanttDate { value: Date; constructor(date?: Date | string | number) { @@ -100,107 +98,107 @@ export class TinyDate { return differenceInCalendarDays(this.endOfQuarter().addSeconds(1).value, this.startOfQuarter().value); } - setDate(dayOfMonth: number): TinyDate { - return new TinyDate(setDate(this.value, dayOfMonth)); + setDate(dayOfMonth: number): GanttDate { + return new GanttDate(setDate(this.value, dayOfMonth)); } - clone(): TinyDate { - return new TinyDate(new Date(this.value)); + clone(): GanttDate { + return new GanttDate(new Date(this.value)); } - add(amount: number, unit?: TinyDateUtil) { + add(amount: number, unit?: GanttDateUtil) { switch (unit) { case 'second': - return new TinyDate(this.value).addSeconds(amount); + return new GanttDate(this.value).addSeconds(amount); case 'minute': - return new TinyDate(this.value).addMinutes(amount); + return new GanttDate(this.value).addMinutes(amount); case 'hour': - return new TinyDate(this.value).addHours(amount); + return new GanttDate(this.value).addHours(amount); case 'day': - return new TinyDate(this.value).addDays(amount); + return new GanttDate(this.value).addDays(amount); case 'week': - return new TinyDate(this.value).addWeeks(amount); + return new GanttDate(this.value).addWeeks(amount); case 'month': - return new TinyDate(this.value).addMonths(amount); + return new GanttDate(this.value).addMonths(amount); case 'quarter': - return new TinyDate(this.value).addQuarters(amount); + return new GanttDate(this.value).addQuarters(amount); case 'year': - return new TinyDate(this.value).addYears(amount); + return new GanttDate(this.value).addYears(amount); default: - return new TinyDate(this.value).addSeconds(amount); + return new GanttDate(this.value).addSeconds(amount); } } - addSeconds(amount: number): TinyDate { - return new TinyDate(addSeconds(this.value, amount)); + addSeconds(amount: number): GanttDate { + return new GanttDate(addSeconds(this.value, amount)); } - addMinutes(amount: number): TinyDate { - return new TinyDate(addMinutes(this.value, amount)); + addMinutes(amount: number): GanttDate { + return new GanttDate(addMinutes(this.value, amount)); } - addHours(amount: number): TinyDate { - return new TinyDate(addHours(this.value, amount)); + addHours(amount: number): GanttDate { + return new GanttDate(addHours(this.value, amount)); } - addDays(amount: number): TinyDate { - return new TinyDate(addDays(this.value, amount)); + addDays(amount: number): GanttDate { + return new GanttDate(addDays(this.value, amount)); } addWeeks(amount: number) { - return new TinyDate(addWeeks(this.value, amount)); + return new GanttDate(addWeeks(this.value, amount)); } - addMonths(amount: number): TinyDate { - return new TinyDate(addMonths(this.value, amount)); + addMonths(amount: number): GanttDate { + return new GanttDate(addMonths(this.value, amount)); } - addQuarters(amount: number): TinyDate { - return new TinyDate(addQuarters(this.value, amount)); + addQuarters(amount: number): GanttDate { + return new GanttDate(addQuarters(this.value, amount)); } - addYears(amount: number): TinyDate { - return new TinyDate(addYears(this.value, amount)); + addYears(amount: number): GanttDate { + return new GanttDate(addYears(this.value, amount)); } - startOfDay(): TinyDate { - return new TinyDate(startOfDay(this.value)); + startOfDay(): GanttDate { + return new GanttDate(startOfDay(this.value)); } - startOfWeek(options?: { locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): TinyDate { - return new TinyDate(startOfWeek(this.value, options)); + startOfWeek(options?: { locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): GanttDate { + return new GanttDate(startOfWeek(this.value, options)); } - startOfMonth(): TinyDate { - return new TinyDate(startOfMonth(this.value)); + startOfMonth(): GanttDate { + return new GanttDate(startOfMonth(this.value)); } - startOfQuarter(): TinyDate { - return new TinyDate(startOfQuarter(this.value)); + startOfQuarter(): GanttDate { + return new GanttDate(startOfQuarter(this.value)); } - startOfYear(): TinyDate { - return new TinyDate(startOfYear(this.value)); + startOfYear(): GanttDate { + return new GanttDate(startOfYear(this.value)); } - endOfDay(): TinyDate { - return new TinyDate(endOfDay(this.value)); + endOfDay(): GanttDate { + return new GanttDate(endOfDay(this.value)); } - endOfWeek(options?: { locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): TinyDate { - return new TinyDate(endOfWeek(this.value, options)); + endOfWeek(options?: { locale?: Locale; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): GanttDate { + return new GanttDate(endOfWeek(this.value, options)); } - endOfMonth(): TinyDate { - return new TinyDate(endOfMonth(this.value)); + endOfMonth(): GanttDate { + return new GanttDate(endOfMonth(this.value)); } - endOfQuarter(): TinyDate { - return new TinyDate(endOfQuarter(this.value)); + endOfQuarter(): GanttDate { + return new GanttDate(endOfQuarter(this.value)); } - endOfYear(): TinyDate { - return new TinyDate(endOfYear(this.value)); + endOfYear(): GanttDate { + return new GanttDate(endOfYear(this.value)); } getUnixTime(): number { diff --git a/packages/gantt/src/views/day.ts b/packages/gantt/src/views/day.ts index 3be48f09..6ef35475 100644 --- a/packages/gantt/src/views/day.ts +++ b/packages/gantt/src/views/day.ts @@ -1,12 +1,12 @@ import { GanttView, GanttViewOptions } from './view'; -import { GanttDate, TinyDate, eachWeekOfInterval, eachDayOfInterval } from '../date'; +import { GanttDate, eachWeekOfInterval, eachDayOfInterval } from '../utils/date'; import { GanttDatePoint } from '../class/date-point'; import { primaryDatePointTop, secondaryDatePointTop, GanttOptions } from '../gantt.options'; const viewOptions: GanttViewOptions = { cellWidth: 35, - start: new TinyDate().startOfYear().startOfWeek({ weekStartsOn: 1 }), - end: new TinyDate().endOfYear().endOfWeek({ weekStartsOn: 1 }), + start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }), + end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }), addAmount: 1, addUnit: 'month', }; @@ -40,7 +40,7 @@ export class GanttViewDay extends GanttView { const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value }, { weekStartsOn: 1 }); const points: GanttDatePoint[] = []; for (let i = 0; i < weeks.length; i++) { - const weekStart = new TinyDate(weeks[i]); + const weekStart = new GanttDate(weeks[i]); const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1; const point = new GanttDatePoint( weekStart, @@ -57,7 +57,7 @@ export class GanttViewDay extends GanttView { const days = eachDayOfInterval({ start: this.start.value, end: this.end.value }); const points: GanttDatePoint[] = []; for (let i = 0; i < days.length; i++) { - const start = new TinyDate(days[i]); + const start = new GanttDate(days[i]); const point = new GanttDatePoint( start, start.getDate().toString(), diff --git a/packages/gantt/src/views/factory.ts b/packages/gantt/src/views/factory.ts index d5774f68..04493b69 100644 --- a/packages/gantt/src/views/factory.ts +++ b/packages/gantt/src/views/factory.ts @@ -1,7 +1,7 @@ import { GanttViewOptions } from './view'; import { GanttViewMonth } from './month'; -import { GanttDate } from '../date'; -import { GanttViewType } from '../class/view-types.enum'; +import { GanttDate } from '../utils/date'; +import { GanttViewType } from '../class/view-type'; import { GanttViewQuarter } from './quarter'; import { GanttViewDay } from './day'; import { GanttOptions } from '../gantt.options'; diff --git a/packages/gantt/src/views/month.ts b/packages/gantt/src/views/month.ts index 070c5988..32926f7c 100644 --- a/packages/gantt/src/views/month.ts +++ b/packages/gantt/src/views/month.ts @@ -1,11 +1,11 @@ import { GanttView, GanttViewOptions } from './view'; -import { GanttDate, TinyDate, differenceInCalendarQuarters, eachMonthOfInterval } from '../date'; +import { GanttDate, differenceInCalendarQuarters, eachMonthOfInterval } from '../utils/date'; import { GanttDatePoint } from '../class/date-point'; import { secondaryDatePointTop, primaryDatePointTop, GanttOptions } from '../gantt.options'; const viewOptions: GanttViewOptions = { - start: new TinyDate().startOfQuarter().addQuarters(-1), - end: new TinyDate().endOfQuarter().addQuarters(2), + start: new GanttDate().startOfQuarter().addQuarters(-1), + end: new GanttDate().endOfQuarter().addQuarters(2), cellWidth: 280, addAmount: 1, addUnit: 'quarter', @@ -53,7 +53,7 @@ export class GanttViewMonth extends GanttView { const months = eachMonthOfInterval({ start: this.start.value, end: this.end.value }); const points: GanttDatePoint[] = []; for (let i = 0; i < months.length; i++) { - const start = new TinyDate(months[i]); + const start = new GanttDate(months[i]); const point = new GanttDatePoint( start, `${start.getMonth() + 1}月`, diff --git a/packages/gantt/src/views/quarter.ts b/packages/gantt/src/views/quarter.ts index deaac659..aeff1826 100644 --- a/packages/gantt/src/views/quarter.ts +++ b/packages/gantt/src/views/quarter.ts @@ -1,14 +1,14 @@ import { GanttView, GanttViewOptions } from './view'; -import { GanttDate, TinyDate } from '../date'; +import { GanttDate } from '../utils/date'; import { GanttDatePoint } from '../class/date-point'; import { eachYearOfInterval, differenceInCalendarQuarters } from 'date-fns'; import { primaryDatePointTop, secondaryDatePointTop, GanttOptions } from '../gantt.options'; const viewOptions: GanttViewOptions = { - start: new TinyDate().addYears(-1).startOfYear(), - end: new TinyDate().addYears(1).endOfYear(), - min: new TinyDate().addYears(-2).startOfYear(), - max: new TinyDate().addYears(2).endOfYear(), + start: new GanttDate().addYears(-1).startOfYear(), + end: new GanttDate().addYears(1).endOfYear(), + min: new GanttDate().addYears(-2).startOfYear(), + max: new GanttDate().addYears(2).endOfYear(), cellWidth: 500, addAmount: 1, addUnit: 'year', @@ -39,7 +39,7 @@ export class GanttViewQuarter extends GanttView { const years = eachYearOfInterval({ start: this.start.value, end: this.end.value }); const points: GanttDatePoint[] = []; for (let i = 0; i <= years.length; i++) { - const start = new TinyDate(years[i]); + const start = new GanttDate(years[i]); const point = new GanttDatePoint( start, `${start.format('yyyy')}年`, diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts index 331aac82..1e003bc5 100644 --- a/packages/gantt/src/views/view.ts +++ b/packages/gantt/src/views/view.ts @@ -1,4 +1,4 @@ -import { GanttDate, TinyDate, differenceInDays, TinyDateUtil } from '../date'; +import { GanttDate, differenceInDays, GanttDateUtil } from '../utils/date'; import { GanttDatePoint } from '../class/date-point'; import { BehaviorSubject } from 'rxjs'; import { GanttOptions } from '../gantt.options'; @@ -10,12 +10,12 @@ export interface GanttViewOptions { max?: GanttDate; cellWidth?: number; addAmount?: number; - addUnit?: TinyDateUtil; + addUnit?: GanttDateUtil; } const viewOptions: GanttViewOptions = { - min: new TinyDate().addYears(-1).startOfYear(), - max: new TinyDate().addYears(1).endOfYear(), + min: new GanttDate().addYears(-1).startOfYear(), + max: new GanttDate().addYears(1).endOfYear(), }; export abstract class GanttView { @@ -140,7 +140,7 @@ export abstract class GanttView { // 获取当前时间的X坐标 getTodayXPoint(): number { - const toady = new TinyDate().startOfDay(); + const toady = new GanttDate().startOfDay(); if (toady.value > this.start.value && toady.value < this.end.value) { const x = this.getXPointByDate(toady) + this.getDayOccupancyWidth(toady) / 2; return x;