@worktile/gantt 11.0.2 → 12.0.1

package/packages/gantt/src/gantt.component.ts

@@ -0,0 +1,134 @@
+import {
+    Component,
+    OnInit,
+    ElementRef,
+    ChangeDetectionStrategy,
+    Input,
+    EventEmitter,
+    Output,
+    ChangeDetectorRef,
+    NgZone,
+    OnChanges,
+    OnDestroy,
+    SimpleChanges,
+    ContentChildren,
+    QueryList,
+    AfterViewInit,
+    ContentChild,
+    TemplateRef,
+    forwardRef
+} from '@angular/core';
+import { startWith, takeUntil, take, finalize } from 'rxjs/operators';
+import { Subject, Observable } from 'rxjs';
+import { GanttUpper, GANTT_UPPER_TOKEN } from './gantt-upper';
+import { GanttLinkDragEvent, GanttLineClickEvent, GanttItemInternal, GanttItem } from './class';
+import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
+import { sideWidth } from './gantt.styles';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+import { NgxGanttTableComponent } from './table/gantt-table.component';
+import { GANTT_ABSTRACT_TOKEN } from './gantt-abstract';
+import { defaultColumnWidth } from './components/table/gantt-table.component';
+@Component({
+    selector: 'ngx-gantt',
+    templateUrl: './gantt.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: GANTT_UPPER_TOKEN,
+            useExisting: NgxGanttComponent
+        },
+        {
+            provide: GANTT_ABSTRACT_TOKEN,
+            useExisting: forwardRef(() => NgxGanttComponent)
+        }
+    ]
+})
+export class NgxGanttComponent extends GanttUpper implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+    @Input() maxLevel = 2;
+
+    @Input() async: boolean;
+
+    @Input() childrenResolve: (GanttItem) => Observable<GanttItem[]>;
+
+    @Input() linkable: boolean;
+
+    @Output() linkDragStarted = new EventEmitter<GanttLinkDragEvent>();
+
+    @Output() linkDragEnded = new EventEmitter<GanttLinkDragEvent>();
+
+    @Output() lineClick = new EventEmitter<GanttLineClickEvent>();
+
+    @ContentChild(NgxGanttTableComponent) table: NgxGanttTableComponent;
+
+    @ContentChildren(NgxGanttTableColumnComponent, { descendants: true }) columns: QueryList<NgxGanttTableColumnComponent>;
+
+    @ContentChild('tableEmpty', { static: true }) tableEmptyTemplate: TemplateRef<any>;
+
+    private ngUnsubscribe$ = new Subject();
+
+    public sideTableWidth = sideWidth;
+
+    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, ngZone: NgZone) {
+        super(elementRef, cdr, ngZone);
+    }
+
+    ngOnInit() {
+        super.onInit();
+
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event: GanttLinkDragEvent) => {
+                this.linkDragStarted.emit(event);
+            });
+            this.dragContainer.linkDragEnded.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event: GanttLinkDragEvent) => {
+                this.linkDragEnded.emit(event);
+            });
+        });
+    }
+
+    ngAfterViewInit() {
+        this.columns.changes.pipe(startWith(true), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
+            this.columns.forEach((column) => {
+                if (!column.columnWidth) {
+                    column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+                }
+            });
+            this.cdr.detectChanges();
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        super.onChanges(changes);
+    }
+
+    expandChildren(item: GanttItemInternal) {
+        if (!item.expanded) {
+            item.setExpand(true);
+            if (this.async && this.childrenResolve && item.children.length === 0) {
+                item.loading = true;
+                this.childrenResolve(item.origin)
+                    .pipe(
+                        take(1),
+                        finalize(() => {
+                            item.loading = false;
+                            this.expandChange.emit();
+                            this.cdr.detectChanges();
+                        })
+                    )
+                    .subscribe((items) => {
+                        item.addChildren(items);
+                        this.computeItemsRefs(...item.children);
+                    });
+            } else {
+                this.computeItemsRefs(...item.children);
+                this.expandChange.emit();
+            }
+        } else {
+            item.setExpand(false);
+            this.expandChange.emit();
+        }
+    }
+
+    ngOnDestroy() {
+        super.onDestroy();
+    }
+}

package/packages/gantt/src/gantt.module.ts

@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgxGanttComponent } from './gantt.component';
+import { NgxGanttTableComponent } from './table/gantt-table.component';
+import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
+import { GanttCalendarComponent } from './components/calendar/calendar.component';
+import { GanttTableComponent } from './components/table/gantt-table.component';
+import { NgxGanttBarComponent } from './components/bar/bar.component';
+import { GanttMainComponent } from './components/main/gantt-main.component';
+import { GanttIconComponent } from './components/icon/icon.component';
+import { GanttDragBackdropComponent } from './components/drag-backdrop/drag-backdrop.component';
+import { GanttLinksComponent } from './components/links/links.component';
+import { NgxGanttRootComponent } from './root.component';
+import { NgxGanttRangeComponent } from './components/range/range.component';
+import { IsGanttRangeItemPipe, IsGanttBarItemPipe, IsGanttCustomItemPipe } from './gantt.pipe';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+
+@NgModule({
+    imports: [CommonModule, DragDropModule],
+    exports: [
+        NgxGanttComponent,
+        NgxGanttTableComponent,
+        NgxGanttTableColumnComponent,
+        NgxGanttRootComponent,
+        NgxGanttBarComponent,
+        NgxGanttRangeComponent
+    ],
+    declarations: [
+        NgxGanttComponent,
+        NgxGanttTableComponent,
+        NgxGanttTableColumnComponent,
+        GanttTableComponent,
+        GanttMainComponent,
+        GanttCalendarComponent,
+        GanttLinksComponent,
+        NgxGanttBarComponent,
+        GanttIconComponent,
+        GanttDragBackdropComponent,
+        NgxGanttRangeComponent,
+        NgxGanttRootComponent,
+        IsGanttRangeItemPipe,
+        IsGanttBarItemPipe,
+        IsGanttCustomItemPipe
+    ],
+    providers: []
+})
+export class NgxGanttModule {}

package/packages/gantt/src/gantt.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { GanttItemType } from './class';
+
+@Pipe({
+    name: 'isGanttRangeItem'
+})
+export class IsGanttRangeItemPipe implements PipeTransform {
+    transform(value: GanttItemType) {
+        return value === GanttItemType.range;
+    }
+}
+
+
+@Pipe({
+    name: 'isGanttBarItem'
+})
+export class IsGanttBarItemPipe implements PipeTransform {
+    transform(value: GanttItemType) {
+        return value === GanttItemType.bar;
+    }
+}
+
+
+@Pipe({
+    name: 'isGanttCustomItem'
+})
+export class IsGanttCustomItemPipe implements PipeTransform {
+    transform(value: GanttItemType) {
+        return value === GanttItemType.custom;
+    }
+}

package/packages/gantt/src/gantt.styles.ts

@@ -0,0 +1,28 @@
+export const defaultStyles = {
+    lineHeight: 44,
+    barHeight: 22
+};
+
+export const headerHeight = 44;
+
+export type GanttStyles = typeof defaultStyles;
+
+export const sideWidth = 400;
+
+export const sideMiddleWidth = 500;
+
+export const sideMaxWidth = 600;
+
+export const sideMinWidth = 400;
+
+export const barBackground = '#348fe4';
+
+export const rangeHeight = 17;
+
+export const todayHeight = 24;
+
+export const todayWidth = 35;
+
+export const todayBorderRadius = 4;
+
+

package/{public-api.d.ts → packages/gantt/src/public-api.ts}

@@ -1,9 +1,15 @@
+/*
+ * Public API Surface of gantt
+ */
+
 export * from './gantt.module';
 export * from './gantt-upper';
 export * from './root.component';
 export * from './gantt.component';
 export * from './table/gantt-table.component';
 export * from './table/gantt-column.component';
+export * from './components/bar/bar.component';
+export * from './components/range/range.component';
 export * from './utils/date';
 export * from './class';
 export * from './views/view';

package/packages/gantt/src/root.component.html

@@ -0,0 +1,12 @@
+<div class="gantt-side" [style.width.px]="sideWidth">
+  <div class="gantt-side-container">
+    <ng-template [ngTemplateOutlet]="sideTemplate"></ng-template>
+  </div>
+</div>
+<div class="gantt-container">
+  <gantt-calendar-overlay></gantt-calendar-overlay>
+  <gantt-drag-backdrop></gantt-drag-backdrop>
+  <div class="gantt-main">
+    <ng-template [ngTemplateOutlet]="mainTemplate"></ng-template>
+  </div>
+</div>

package/packages/gantt/src/root.component.ts

@@ -0,0 +1,121 @@
+import {
+    Component,
+    OnInit,
+    HostBinding,
+    NgZone,
+    ElementRef,
+    Inject,
+    ContentChild,
+    TemplateRef,
+    Input,
+    Optional,
+    AfterViewInit
+} from '@angular/core';
+import { GanttDomService, ScrollDirection } from './gantt-dom.service';
+import { GanttDragContainer } from './gantt-drag-container';
+import { take, takeUntil, startWith } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { GanttUpper, GANTT_UPPER_TOKEN } from './gantt-upper';
+import { GanttPrintService } from './gantt-print.service';
+
+@Component({
+    selector: 'ngx-gantt-root',
+    templateUrl: './root.component.html',
+    providers: [GanttDomService, GanttDragContainer]
+})
+export class NgxGanttRootComponent implements OnInit {
+    @Input() sideWidth: number;
+
+    @HostBinding('class.gantt') ganttClass = true;
+
+    @ContentChild('sideTemplate', { static: true }) sideTemplate: TemplateRef<any>;
+
+    @ContentChild('mainTemplate', { static: true }) mainTemplate: TemplateRef<any>;
+
+    private unsubscribe$ = new Subject();
+
+    private get view() {
+        return this.ganttUpper.view;
+    }
+
+    constructor(
+        private elementRef: ElementRef<HTMLElement>,
+        private ngZone: NgZone,
+        private dom: GanttDomService,
+        public dragContainer: GanttDragContainer,
+        @Inject(GANTT_UPPER_TOKEN) private ganttUpper: GanttUpper,
+        @Optional() private printService: GanttPrintService
+    ) {
+        this.ganttUpper.dragContainer = dragContainer;
+    }
+
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.dom.initialize(this.elementRef);
+            if (this.printService) {
+                this.printService.register(this.elementRef);
+            }
+            this.setupScrollClass();
+            this.setupResize();
+            this.setupViewScroll();
+            // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
+            this.elementRef.nativeElement.style.opacity = '1';
+            this.ganttUpper.viewChange.pipe(startWith(null)).subscribe(() => {
+                this.scrollToToday();
+            });
+        });
+    }
+
+    private setupViewScroll() {
+        if (this.ganttUpper.disabledLoadOnScroll) {
+            return;
+        }
+        this.dom
+            .getViewerScroll()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+                if (event.direction === ScrollDirection.LEFT) {
+                    const dates = this.view.addStartDate();
+                    if (dates) {
+                        event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
+                        this.ngZone.run(() => {
+                            this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
+                        });
+                    }
+                }
+                if (event.direction === ScrollDirection.RIGHT) {
+                    const dates = this.view.addEndDate();
+                    if (dates) {
+                        this.ngZone.run(() => {
+                            this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
+                        });
+                    }
+                }
+            });
+    }
+
+    private setupResize() {
+        this.dom
+            .getResize()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+                this.setupScrollClass();
+            });
+    }
+
+    private setupScrollClass() {
+        const mainContainer = this.dom.mainContainer as HTMLElement;
+        const height = mainContainer.offsetHeight;
+        const scrollHeight = mainContainer.scrollHeight;
+        if (scrollHeight > height) {
+            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
+        } else {
+            this.elementRef.nativeElement.className = 'gantt';
+        }
+    }
+
+    private scrollToToday() {
+        const x = this.view.getTodayXPoint();
+        this.dom.scrollMainContainer(x);
+    }
+}

package/packages/gantt/src/styles/index.scss

@@ -0,0 +1,9 @@
+@import './variables.scss';
+@import '../gantt.component.scss';
+@import '../components/table/gantt-table.component.scss';
+@import '../components/calendar/calendar.component.scss';
+@import '../components/drag-backdrop/drag-backdrop.component.scss';
+@import '../components/bar/bar.component.scss';
+@import '../components/range/range.component.scss';
+@import '../components/icon/icon.component.scss';
+@import '../components/links/links.component.scss';

package/packages/gantt/src/styles/variables.scss

@@ -0,0 +1,46 @@
+// basic
+$gantt-color: #333 !default;
+$gantt-header-height: 44px !default;
+$gantt-border-color: #eee !default;
+$gantt-bg-color: #fff !default;
+$gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
+$gantt-container-background-color: #fafafa !default;
+$gantt-item-height: 44px !default;
+$gantt-group-background-color: rgba(
+  $color: #f3f3f3,
+  $alpha: 0.5
+) !default;
+$gantt-group-height: 44px !default;
+$gantt-table-td-padding: 0 15px !default;
+
+// calendar
+$gantt-date-primary-color: #888 !default;
+$gantt-date-primary-font-size: 14px !default;
+$gantt-date-primary-border: #ddd !default;
+$gantt-date-secondary-color: #333 !default;
+$gantt-date-secondary-font-size: 14px !default;
+$gantt-date-secondary-weekend-color: #aaa !default;
+$gantt-date-week-backdrop-bg: rgba(
+  $color: #f3f3f3,
+  $alpha: 0.5
+) !default;
+$gantt-date-today-color: #ff9f73 !default;
+$gantt-date-today-text-color: #fff !default;
+
+// bar
+$gantt-bar-bg: #fff !default;
+$gantt-bar-layer-bg: #fff !default;
+$gantt-bar-handle-color: #cacaca !default;
+$gantt-bar-handle-height: 12px !default;
+$gantt-bar-background-color: #348fe4 !default;
+
+// drag
+$gantt-item-drag-mask-color: #348fe4 !default;
+$gantt-link-dragging-line-color: #348fe4 !default;
+
+// link
+$gantt-link-line-color: #348fe4 !default;
+
+// table
+$gantt-table-header-drag-line-width: 3px !default;
+$gantt-table-header-drag-line-color: #348fe4 !default;

package/packages/gantt/src/table/gantt-column.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, ContentChild, TemplateRef, Input, EventEmitter, Inject, Output } from '@angular/core';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+import { GanttUpper, GANTT_UPPER_TOKEN } from '../gantt-upper';
+@Component({
+    selector: 'ngx-gantt-column',
+    template: ''
+})
+export class NgxGanttTableColumnComponent implements OnInit {
+    public columnWidth: string;
+
+    @Input()
+    set width(width: number | string) {
+        this.columnWidth = coerceCssPixelValue(width);
+    }
+
+    @Input() name: string;
+
+    @ContentChild('cell', { static: true }) templateRef: TemplateRef<any>;
+
+    @ContentChild('header', { static: true }) headerTemplateRef: TemplateRef<any>;
+
+    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
+
+    ngOnInit() {}
+}

package/packages/gantt/src/table/gantt-table.component.ts

@@ -0,0 +1,14 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { GanttTableEvent } from '../class';
+
+@Component({
+    selector: 'ngx-gantt-table',
+    template: ''
+})
+export class NgxGanttTableComponent implements OnInit {
+    @Output() columnChanges = new EventEmitter<GanttTableEvent>();
+
+    constructor() {}
+
+    ngOnInit() {}
+}

package/packages/gantt/src/table/test/table.spec.ts

@@ -0,0 +1,56 @@
+import { TestBed, ComponentFixture, async } from '@angular/core/testing';
+import { Component, ViewChild, DebugElement } from '@angular/core';
+import { NgxGanttModule } from 'ngx-gantt';
+import { GanttTableComponent } from '../../components/table/gantt-table.component';
+import { getMockGroupItems, getMockGroups } from '../../test/mocks/data';
+import { By } from '@angular/platform-browser';
+
+@Component({
+    selector: 'test-gantt-table',
+    template: `
+        <ngx-gantt #gantt [items]="items" [groups]="groups">
+            <ngx-gantt-table>
+                <ngx-gantt-column [width]="200" name="标题">
+                    <ng-template #cell let-item="item">
+                        {{ item.title }}
+                    </ng-template>
+                </ngx-gantt-column>
+            </ngx-gantt-table>
+        </ngx-gantt>
+    `,
+    providers: []
+})
+export class TestGanttTableComponent {
+    @ViewChild(GanttTableComponent, { static: true }) ganttTableComponent: GanttTableComponent;
+
+    items = getMockGroupItems();
+
+    groups = getMockGroups();
+
+    constructor() {}
+}
+
+describe('NgxGanttTableComponent', () => {
+    let component: TestGanttTableComponent;
+    let fixture: ComponentFixture<TestGanttTableComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [NgxGanttModule],
+            declarations: [TestGanttTableComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestGanttTableComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create ngx-gantt-table', () => {
+        expect(component).toBeDefined();
+        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
+        expect(ganttTable).toBeTruthy();
+        expect(ganttTable.nativeElement).toBeTruthy();
+    });
+});