@worktile/gantt 11.0.2 → 12.0.1

package/packages/gantt/src/components/table/gantt-table.component.html

@@ -0,0 +1,105 @@
+<div class="gantt-table-header gantt-table-row">
+  <div class="gantt-table-column" *ngFor="let column of columnList; let i = index" [style.width]="column.columnWidth">
+    <ng-container *ngIf="column.headerTemplateRef; else default" [ngTemplateOutlet]="column.headerTemplateRef"></ng-container>
+    <ng-template #default>
+      {{ column.name }}
+    </ng-template>
+    <div
+      class="gantt-table-drag-trigger"
+      cdkDrag
+      cdkDragLockAxis="x"
+      cdkDragBoundary=".gantt"
+      (cdkDragMoved)="dragMoved($event, column)"
+      (cdkDragStarted)="dragStarted($event)"
+      (cdkDragEnded)="columnDragEnded($event, column)"
+    ></div>
+  </div>
+</div>
+<div class="gantt-table-body">
+  <ng-container *ngIf="!groups.length && !items.length">
+    <ng-container *ngIf="!emptyTemplate">
+      <gantt-icon class="empty-icon" iconName="empty"></gantt-icon>
+      <div class="empty-text">没有数据</div>
+    </ng-container>
+    <ng-template [ngTemplateOutlet]="emptyTemplate"></ng-template>
+  </ng-container>
+
+  <ng-container *ngIf="groups && groups.length > 0; else itemsTemplate">
+    <ng-container *ngFor="let group of groups">
+      <div class="gantt-table-group" [ngClass]="group.class">
+        <div class="gantt-table-group-title" [class.expanded]="group.expanded" (click)="expandGroup(group)">
+          <gantt-icon class="expand-icon" [iconName]="group.expanded ? 'angle-down' : 'angle-right'"></gantt-icon>
+          <ng-container *ngIf="groupTemplate; else default">
+            <ng-template
+              [ngTemplateOutlet]="groupTemplate"
+              [ngTemplateOutletContext]="{ $implicit: group.origin, group: group.origin }"
+            ></ng-template>
+          </ng-container>
+          <ng-template #default>
+            <span class="group-title">{{ group.title }}</span>
+          </ng-template>
+        </div>
+      </div>
+
+      <ng-container *ngIf="group.expanded">
+        <ng-template
+          [ngTemplateOutlet]="ganttItems"
+          [ngTemplateOutletContext]="{ group: group, items: group.items, level: 0 }"
+        ></ng-template>
+      </ng-container>
+    </ng-container>
+  </ng-container>
+</div>
+
+<div
+  class="gantt-table-drag-trigger"
+  cdkDrag
+  cdkDragLockAxis="x"
+  cdkDragBoundary=".gantt"
+  (cdkDragMoved)="dragMoved($event)"
+  (cdkDragStarted)="dragStarted($event)"
+  (cdkDragEnded)="tableDragEnded($event)"
+></div>
+
+<div #dragLine class="gantt-table-drag-auxiliary-line"></div>
+
+<ng-template #itemsTemplate>
+  <ng-template [ngTemplateOutlet]="ganttItems" [ngTemplateOutletContext]="{ items: items, level: 0 }"></ng-template>
+</ng-template>
+
+<ng-template #ganttItems let-group="group" let-items="items" let-level="level">
+  <ng-container *ngFor="let item of items">
+    <div
+      class="gantt-table-item gantt-table-row"
+      [class.gantt-table-item-first-level-group]="level === 0 && (item.type | isGanttRangeItem)"
+      [class.gantt-table-item-with-group]="group"
+      [style.height.px]="gantt.styles.lineHeight"
+      [style.lineHeight.px]="gantt.styles.lineHeight"
+    >
+      <div class="gantt-table-column" *ngFor="let column of columnList; let first = first" [style.width]="column.columnWidth">
+        <div *ngIf="first" class="gantt-expand-icon" [style.marginLeft.px]="level * 20">
+          <ng-container *ngIf="level < gantt.maxLevel - 1 && item.expandable">
+            <gantt-icon
+              *ngIf="!item.loading"
+              class="expand-icon"
+              [iconName]="item.expanded ? 'angle-down' : 'angle-right'"
+              (click)="expandChildren(item)"
+            ></gantt-icon>
+            <gantt-icon *ngIf="item.loading" [iconName]="'loading'"></gantt-icon>
+          </ng-container>
+        </div>
+        <div class="gantt-table-column-content">
+          <ng-template
+            [ngTemplateOutlet]="column.templateRef"
+            [ngTemplateOutletContext]="{ $implicit: item.origin, item: item.origin }"
+          ></ng-template>
+        </div>
+      </div>
+    </div>
+    <ng-template
+      *ngIf="item.children && item.expanded"
+      [ngTemplateOutlet]="ganttItems"
+      [ngTemplateOutletContext]="{ items: item.children, level: level + 1, group: group }"
+    ></ng-template>
+  </ng-container>
+</ng-template>

package/packages/gantt/src/components/table/gantt-table.component.scss

@@ -0,0 +1,144 @@
+.gantt-table {
+  display: block;
+  &-empty {
+    height: 100%;
+    position: relative;
+    .gantt-table-body {
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin-top: 22px;
+      .empty-icon {
+        svg {
+          height: 78px;
+          width: 78px;
+        }
+      }
+      .empty-text {
+        color: #cacaca;
+      }
+    }
+  }
+
+  &-drag-trigger {
+    width: $gantt-table-header-drag-line-width;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    cursor: ew-resize;
+    z-index: 1;
+
+    &:hover {
+      background: $gantt-table-header-drag-line-color;
+      z-index: 2;
+    }
+  }
+
+  &-drag-auxiliary-line {
+    width: $gantt-table-header-drag-line-width;
+    background: $gantt-table-header-drag-line-color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    display: none;
+  }
+
+  .gantt-table-row {
+    display: flex;
+    box-sizing: border-box;
+    border-bottom: 1px solid $gantt-border-color;
+
+    .gantt-table-column {
+      overflow: hidden;
+      border-right: 1px solid $gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  .gantt-table-header {
+    text-align: center;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 2;
+    height: $gantt-header-height;
+    line-height: $gantt-header-height;
+
+    .gantt-table-column {
+      font-weight: 400;
+    }
+  }
+
+  .gantt-table-body {
+    .gantt-table-group {
+      display: flex;
+      height: $gantt-group-height;
+      background: $gantt-group-background-color;
+      padding: 0 10px;
+      align-items: center;
+      border-bottom: 1px solid $gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
+
+      .gantt-table-group-title {
+        cursor: pointer;
+
+        .expand-icon {
+          color: #aaa;
+          margin-right: 6px;
+        }
+      }
+    }
+
+    .gantt-table-item {
+      cursor: pointer;
+      &-first-level-group {
+        background: $gantt-group-background-color;
+      }
+
+      &-with-group {
+        .gantt-table-column {
+          &:first-child {
+            padding: 0 15px 0 32px;
+          }
+        }
+      }
+
+      .gantt-table-column {
+        display: flex;
+        padding: $gantt-table-td-padding;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      .gantt-table-column-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        background-color: $gantt-container-background-color;
+      }
+    }
+
+    .gantt-expand-icon {
+      display: inline-block;
+      width: 20px;
+      color: #aaa;
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+import {
+    Component,
+    HostBinding,
+    TemplateRef,
+    QueryList,
+    Input,
+    OnInit,
+    ViewChild,
+    ElementRef,
+    OnChanges,
+    SimpleChanges,
+    Inject
+} from '@angular/core';
+import { GanttItemInternal, GanttGroupInternal } from '../../class';
+import { NgxGanttTableColumnComponent } from '../../table/gantt-column.component';
+// import { defaultColumnWidth, minColumnWidth } from '../../gantt.component';
+import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../gantt-abstract';
+
+export const defaultColumnWidth = 100;
+export const minColumnWidth = 80;
+
+interface DragFixedConfig {
+    target: HTMLElement;
+    originWidth: number;
+    movedWidth: number;
+    minWidth: number;
+}
+@Component({
+    selector: 'gantt-table',
+    templateUrl: './gantt-table.component.html'
+})
+export class GanttTableComponent implements OnInit, OnChanges {
+    public columnList: QueryList<NgxGanttTableColumnComponent>;
+
+    public dragStartLeft: number;
+
+    @Input() groups: GanttGroupInternal[];
+
+    @Input() items: GanttItemInternal[];
+
+    @Input()
+    set columns(columns: QueryList<NgxGanttTableColumnComponent>) {
+        columns.forEach((column) => {
+            if (!column.columnWidth) {
+                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+            }
+        });
+        this.columnList = columns;
+    }
+
+    @Input() groupTemplate: TemplateRef<any>;
+
+    @Input() emptyTemplate: TemplateRef<any>;
+
+    @ViewChild('dragLine', { static: true }) draglineElementRef: ElementRef<HTMLElement>;
+
+    @HostBinding('class.gantt-table') ganttTableClass = true;
+
+    @HostBinding('class.gantt-table-empty') ganttTableEmptyClass = false;
+
+    constructor(@Inject(GANTT_ABSTRACT_TOKEN) public gantt: GanttAbstractComponent, private elementRef: ElementRef) {}
+
+    ngOnInit() {}
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (!changes.groups.currentValue?.length && !changes.items.currentValue?.length) {
+            this.ganttTableEmptyClass = true;
+        } else {
+            this.ganttTableEmptyClass = false;
+        }
+    }
+
+    private dragFixed(config: DragFixedConfig) {
+        if (config.movedWidth < config.minWidth) {
+            config.target.style.transform = `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`;
+        }
+    }
+
+    expandGroup(group: GanttGroupInternal) {
+        this.gantt.expandGroup(group);
+    }
+
+    expandChildren(item: GanttItemInternal) {
+        this.gantt.expandChildren(item);
+    }
+
+    dragStarted(event: CdkDragStart) {
+        const target = event.source.element.nativeElement;
+        this.dragStartLeft = target.getBoundingClientRect().left;
+    }
+
+    dragMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent) {
+        const target = event.source.element.nativeElement;
+        const left = target.getBoundingClientRect().left;
+
+        let originWidth: number;
+        let movedWidth: number;
+        let minWidth: number;
+        if (column) {
+            originWidth = parseInt(column.columnWidth, 10);
+            movedWidth = originWidth + (left - this.dragStartLeft);
+            minWidth = minColumnWidth;
+        } else {
+            originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+            movedWidth = originWidth + (left - this.dragStartLeft);
+            minWidth = minColumnWidth * this.columnList.length;
+        }
+
+        this.dragFixed({
+            target,
+            originWidth,
+            movedWidth,
+            minWidth
+        });
+
+        this.showAuxiliaryLine(event);
+    }
+
+    columnDragEnded(event: CdkDragEnd, column: NgxGanttTableColumnComponent) {
+        const target = event.source.element.nativeElement;
+        const left = target.getBoundingClientRect().left;
+        const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
+        const columnWidth = Math.max(width || 0, minColumnWidth);
+        column.columnWidth = coerceCssPixelValue(columnWidth);
+        if (this.gantt.table) {
+            this.gantt.table.columnChanges.emit({ columns: this.columnList });
+        }
+
+        this.hideAuxiliaryLine();
+        event.source.reset();
+    }
+
+    tableDragEnded(event: CdkDragEnd) {
+        const target = event.source.element.nativeElement;
+        const left = target.getBoundingClientRect().left;
+        const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+        const dragWidth = left - this.dragStartLeft;
+        this.columnList.forEach((column) => {
+            const lastColumnWidth = parseInt(column.columnWidth, 10);
+            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
+            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
+            column.columnWidth = coerceCssPixelValue(columnWidth);
+        });
+
+        if (this.gantt.table) {
+            this.gantt.table.columnChanges.emit({ columns: this.columnList });
+        }
+
+        this.hideAuxiliaryLine();
+        event.source.reset();
+    }
+
+    private showAuxiliaryLine(event: CdkDragMove) {
+        const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
+        const targetRect = event.source.element.nativeElement.getBoundingClientRect();
+        const distance = { x: targetRect.left - tableRect.left, y: targetRect.top - tableRect.top };
+        this.draglineElementRef.nativeElement.style.left = `${distance.x}px`;
+        this.draglineElementRef.nativeElement.style.display = 'block';
+    }
+
+    private hideAuxiliaryLine() {
+        this.draglineElementRef.nativeElement.style.display = 'none';
+    }
+}

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

@@ -0,0 +1,129 @@
+import { fakeAsync, TestBed, ComponentFixture, async, inject, flush } from '@angular/core/testing';
+import { Component, ViewChild, DebugElement } from '@angular/core';
+import { NgxGanttModule } from 'ngx-gantt';
+import { By } from '@angular/platform-browser';
+import { GanttTableComponent } from '../gantt-table.component';
+import { getMockGroupItems, getMockGroups} from '../../../test/mocks/data';
+import { dispatchMouseEvent } from '../../../utils/testing';
+@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('GanttTable', () => {
+    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 gantt-table', () => {
+        expect(component).toBeDefined();
+        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
+        expect(ganttTable).toBeTruthy();
+        expect(ganttTable.nativeElement).toBeTruthy();
+    });
+
+    it('should expand groups', () => {
+        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
+        expect(ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.classList.contains('expanded')).toBeTruthy();
+        ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.click();
+        fixture.detectChanges();
+        expect(ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.classList.contains('expanded')).toBeFalsy();
+    });
+
+    it('should expand children', () => {
+        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
+        const tableChildrenLength = ganttTable.query(By.css('.gantt-table-body')).children.length;
+        ganttTable.nativeElement.querySelector('.gantt-table-item-with-group .gantt-expand-icon .expand-icon').click();
+        fixture.detectChanges();
+        expect(ganttTable.query(By.css('.gantt-table-body')).children.length).toEqual(tableChildrenLength + 1);
+    });
+
+    it('should column drag', fakeAsync(() => {
+        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
+        const dragTrigger = ganttTable.nativeElement.querySelector('.gantt-table-header .gantt-table-column .gantt-table-drag-trigger');
+        fixture.detectChanges();
+        flush();
+
+        const dragTriggerRight = dragTrigger.getBoundingClientRect().right;
+
+        dispatchMouseEvent(dragTrigger, 'mousedown');
+        fixture.detectChanges();
+        flush();
+
+        dispatchMouseEvent(document, 'mousemove', 200);
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        dispatchMouseEvent(document, 'mousemove', 250);
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        dispatchMouseEvent(document, 'mouseup');
+        fixture.detectChanges();
+        flush();
+
+        expect(dragTrigger.getBoundingClientRect().right).not.toBe(dragTriggerRight);
+    }));
+
+    it('should table drag', fakeAsync(() => {
+        const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
+        const dragTrigger = ganttTable.nativeElement.children[2];
+        fixture.detectChanges();
+
+        const dragTriggerRight = dragTrigger.getBoundingClientRect().right;
+
+        dispatchMouseEvent(dragTrigger, 'mousedown');
+        fixture.detectChanges();
+        flush();
+
+        dispatchMouseEvent(document, 'mousemove', 250, 150);
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        dispatchMouseEvent(document, 'mousemove', 50, 50);
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        dispatchMouseEvent(document, 'mouseup');
+        fixture.detectChanges();
+        flush();
+
+        expect(dragTrigger.getBoundingClientRect().left).not.toBe(dragTriggerRight);
+    }));
+});

package/packages/gantt/src/gantt-abstract.ts

@@ -0,0 +1,14 @@
+import { InjectionToken } from '@angular/core';
+import { GanttGroupInternal, GanttItemInternal } from './class';
+import { GanttStyles } from './gantt.styles';
+import { NgxGanttTableComponent } from './table/gantt-table.component';
+
+export interface GanttAbstractComponent {
+    table: NgxGanttTableComponent;
+    styles: GanttStyles;
+    maxLevel: number;
+    expandGroup(group: GanttGroupInternal): void;
+    expandChildren(item: GanttItemInternal): void;
+}
+
+export const GANTT_ABSTRACT_TOKEN = new InjectionToken<GanttAbstractComponent>('gantt-abstract-token');

package/packages/gantt/src/gantt-dom.service.ts

@@ -0,0 +1,134 @@
+import { Injectable, ElementRef, OnDestroy } from '@angular/core';
+import { fromEvent, Subject, merge } from 'rxjs';
+import { pairwise, map, auditTime, takeUntil, take, startWith } from 'rxjs/operators';
+import { isNumber } from './utils/helpers';
+
+const scrollThreshold = 50;
+
+export enum ScrollDirection {
+    NONE,
+    LEFT,
+    RIGHT
+}
+
+export interface ScrollEvent {
+    target: Element;
+    direction: ScrollDirection;
+}
+
+@Injectable()
+export class GanttDomService implements OnDestroy {
+    public root: Element;
+
+    public side: Element;
+
+    public container: Element;
+
+    public sideContainer: Element;
+
+    public mainContainer: Element;
+
+    public calendarOverlay: Element;
+
+    public linksOverlay: Element;
+
+    private unsubscribe$ = new Subject<void>();
+
+    constructor() {}
+
+    private monitorScrollChange() {
+        merge(fromEvent(this.mainContainer, 'scroll'), fromEvent(this.sideContainer, 'scroll'))
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+                this.syncScroll(event);
+            });
+
+        fromEvent(this.mainContainer, 'scroll')
+            .pipe(startWith(), takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+                // if (this.mainContainer.scrollLeft > 0) {
+                //     this.side.classList.add('gantt-side-has-shadow');
+                // } else {
+                //     this.side.classList.remove('gantt-side-has-shadow');
+                // }
+            });
+    }
+
+    private syncScroll(event: Event) {
+        const target = event.currentTarget as HTMLElement;
+        this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+
+        this.sideContainer.scrollTop = target.scrollTop;
+        this.mainContainer.scrollTop = target.scrollTop;
+    }
+
+    private disableBrowserWheelEvent() {
+        const container = this.mainContainer as HTMLElement;
+        fromEvent(container, 'wheel')
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event: WheelEvent) => {
+                const delta = event.deltaX;
+                if (!delta) {
+                    return;
+                }
+                if (
+                    (container.scrollLeft + container.offsetWidth === container.scrollWidth && delta > 0) ||
+                    (container.scrollLeft === 0 && delta < 0)
+                ) {
+                    event.preventDefault();
+                }
+            });
+    }
+
+    initialize(root: ElementRef<HTMLElement>) {
+        this.root = root.nativeElement;
+        this.side = this.root.getElementsByClassName('gantt-side')[0];
+        this.container = this.root.getElementsByClassName('gantt-container')[0];
+        this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
+        this.monitorScrollChange();
+        this.disableBrowserWheelEvent();
+    }
+
+    getViewerScroll() {
+        return fromEvent<Event>(this.mainContainer, 'scroll').pipe(
+            map(() => this.mainContainer.scrollLeft),
+            pairwise(),
+            map(([previous, current]) => {
+                const event: ScrollEvent = {
+                    target: this.mainContainer,
+                    direction: ScrollDirection.NONE
+                };
+                if (current - previous < 0) {
+                    if (this.mainContainer.scrollLeft < scrollThreshold && this.mainContainer.scrollLeft > 0) {
+                        event.direction = ScrollDirection.LEFT;
+                    }
+                }
+                if (current - previous > 0) {
+                    if (this.mainContainer.scrollWidth - this.mainContainer.clientWidth - this.mainContainer.scrollLeft < scrollThreshold) {
+                        event.direction = ScrollDirection.RIGHT;
+                    }
+                }
+                return event;
+            })
+        );
+    }
+
+    getResize() {
+        return fromEvent(window, 'resize').pipe(auditTime(150));
+    }
+
+    scrollMainContainer(left: number) {
+        if (isNumber(left)) {
+            const scrollLeft = left - this.mainContainer.clientWidth / 2;
+            this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
+            this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
+        }
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}