@worktile/gantt 12.0.1 → 12.0.2

package/packages/gantt/src/gantt.component.scss

@@ -1,77 +0,0 @@
-.gantt {
-    width: 100%;
-    height: 100%;
-    background-color: $gantt-bg-color;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    color: $gantt-color;
-    opacity: 0;
-
-    svg {
-        overflow: visible !important;
-    }
-
-    .gantt-side {
-        border-right: 1px solid $gantt-border-color;
-        position: relative;
-        z-index: 3;
-        // overflow-x: scroll;
-        box-shadow: $gantt-side-shadow;
-
-        .gantt-side-header {
-            box-sizing: border-box;
-            height: $gantt-header-height;
-        }
-
-        .gantt-side-container {
-            height: 100%;
-            background-color: $gantt-bg-color;
-            overflow-y: auto;
-
-            &::-webkit-scrollbar {
-                display: none;
-            }
-        }
-    }
-
-    .gantt-container {
-        flex: 1;
-        position: relative;
-        display: flex;
-        overflow: hidden;
-        background-color: $gantt-container-background-color;
-    }
-
-    .gantt-main-container {
-        width: 100%;
-        height: calc(100% - #{$gantt-header-height});
-        flex: 1;
-        position: absolute;
-        top: $gantt-header-height;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        overflow: auto;
-        background-color: $gantt-container-background-color;
-
-        .gantt-main-groups,
-        .gantt-main-items {
-            overflow: hidden;
-            min-height: 100%;
-        }
-
-        .gantt-group {
-            height: $gantt-group-height;
-            background: $gantt-group-background-color;
-            border-bottom: 1px solid $gantt-border-color;
-            box-sizing: border-box;
-        }
-
-        .gantt-item {
-            border-bottom: 1px solid $gantt-border-color;
-            box-sizing: border-box;
-            position: relative;
-        }
-    }
-}

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

@@ -1,134 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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/packages/gantt/src/root.component.html

@@ -1,12 +0,0 @@
-<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

@@ -1,121 +0,0 @@
-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

@@ -1,9 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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();
-    });
-});