@worktile/gantt 12.0.1 → 12.1.1

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

@@ -1,169 +0,0 @@
-$gantt-bar-layer-append-width: 32px;
-$gantt-bar-layer-append-height: 42px;
-$gantt-bar-link-height: 16px;
-$gantt-bar-link-drop-border: 5px;
-
-@mixin link-handles {
-    .link-handles {
-        .handle {
-            position: absolute;
-            display: inline-block;
-            cursor: pointer;
-            width: $gantt-bar-link-height;
-            height: $gantt-bar-link-height;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1001;
-
-            &:first-child {
-                left: 0;
-                top: 0;
-            }
-
-            &:last-child {
-                right: 0;
-                bottom: 0;
-            }
-
-            .point {
-                color: #348fe4;
-                width: 10px;
-                height: 10px;
-                border-radius: 50%;
-                background: #348fe4;
-                transition: 0.3 ease;
-
-                &:hover {
-                    width: 12px;
-                    height: 12px;
-                }
-            }
-        }
-    }
-}
-
-@mixin drag-handles {
-    .drag-handles {
-        background: $gantt-bar-layer-bg;
-        width: 100%;
-        height: calc(100% - #{$gantt-bar-link-height} * 2);
-        position: absolute;
-        border-radius: 4px;
-        top: $gantt-bar-link-height;
-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
-
-        .handle {
-            width: 15px;
-            height: 100%;
-            position: absolute;
-            cursor: col-resize;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            &:before,
-            &:after {
-                content: '';
-                display: inline-block;
-                width: 1px;
-                height: $gantt-bar-handle-height;
-                background: $gantt-bar-handle-color;
-            }
-
-            &::before {
-                margin-right: 2px;
-            }
-
-            &:first-child {
-                left: 0;
-            }
-
-            &:last-child {
-                right: 0;
-            }
-        }
-    }
-}
-
-@mixin active-bar {
-    z-index: 1000;
-
-    .gantt-bar-layer {
-        display: block;
-        z-index: 1;
-    }
-
-    .gantt-bar-content {
-        z-index: 1;
-        box-shadow: none;
-    }
-
-    .cdk-drag {
-        transition: none;
-    }
-}
-
-.gantt-bar {
-    position: absolute;
-    border-radius: 4px;
-    z-index: 2;
-    background: $gantt-bar-bg;
-
-    .gantt-bar-layer {
-        width: calc(100% + #{$gantt-bar-layer-append-width});
-        height: calc(100% + #{$gantt-bar-layer-append-height});
-        position: absolute;
-        border-radius: 4px;
-        left: $gantt-bar-layer-append-width / 2 * -1;
-        top: $gantt-bar-layer-append-height / 2 * -1;
-        display: none;
-        @include drag-handles();
-        @include link-handles();
-    }
-
-    .gantt-bar-border {
-        width: calc(100% + #{$gantt-bar-link-drop-border} * 2);
-        height: calc(100% + #{$gantt-bar-link-drop-border} * 2);
-        position: absolute;
-        border-radius: 4px;
-        left: $gantt-bar-link-drop-border * -1;
-        top: $gantt-bar-link-drop-border * -1;
-        display: none;
-        background: #fff;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-    }
-
-    .gantt-bar-content {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        cursor: pointer;
-        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-        border-radius: 4px;
-        background: $gantt-bar-background-color;
-        overflow: hidden;
-        box-sizing: border-box;
-        .gantt-bar-content-progress {
-            position: absolute;
-            left: 0;
-            top: 0;
-            height: 100%;
-        }
-
-    }
-
-    &-active {
-        @include active-bar();
-    }
-
-    &-link-drop {
-        .gantt-bar-border {
-            display: block;
-        }
-
-        .gantt-bar-content {
-            box-shadow: none;
-        }
-    }
-}

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

@@ -1,109 +0,0 @@
-import {
-    Component,
-    OnInit,
-    Input,
-    TemplateRef,
-    HostBinding,
-    ElementRef,
-    OnChanges,
-    OnDestroy,
-    Inject,
-    ViewChild,
-    Output,
-    EventEmitter,
-    AfterViewInit
-} from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { GanttBarDrag } from './bar-drag';
-import { hexToRgb } from '../../utils/helpers';
-import { GanttDragContainer } from '../../gantt-drag-container';
-import { barBackground } from '../../gantt.styles';
-import { GanttBarClickEvent } from '../../class';
-import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
-import { GanttItemUpper } from '../../gantt-item-upper';
-
-function linearGradient(sideOrCorner: string, color: string, stop: string) {
-    return `linear-gradient(${sideOrCorner},${color} 0%,${stop} 40%)`;
-}
-
-@Component({
-    selector: 'ngx-gantt-bar,gantt-bar',
-    templateUrl: './bar.component.html',
-    providers: [GanttBarDrag]
-})
-export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, AfterViewInit, OnChanges, OnDestroy {
-    @Output() barClick = new EventEmitter<GanttBarClickEvent>();
-
-    @ViewChild('content') contentElementRef: ElementRef<HTMLDivElement>;
-
-    @HostBinding('class.gantt-bar') ganttItemClass = true;
-
-    color = 'red';
-
-    constructor(
-        private dragContainer: GanttDragContainer,
-        private drag: GanttBarDrag,
-        elementRef: ElementRef<HTMLDivElement>,
-        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper
-    ) {
-        super(elementRef, ganttUpper);
-    }
-
-    ngOnInit() {
-        super.onInit();
-        this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.setContentBackground();
-        });
-    }
-
-    ngAfterViewInit() {
-        this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
-        this.setContentBackground();
-    }
-
-    ngOnChanges(): void {
-        super.onChanges();
-    }
-
-    onBarClick(event: Event) {
-        this.barClick.emit({ event, item: this.item.origin });
-    }
-
-    private setContentBackground() {
-        const contentElement = this.contentElementRef.nativeElement;
-        const color = this.item.color || barBackground;
-        const style: Partial<CSSStyleDeclaration> = this.item.barStyle || {};
-        if (this.item.origin.start && this.item.origin.end) {
-            style.background = color;
-            style.borderRadius = '';
-        }
-        if (this.item.origin.start && !this.item.origin.end) {
-            style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '4px 12.5px 12.5px 4px';
-        }
-        if (!this.item.origin.start && this.item.origin.end) {
-            style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
-            style.borderRadius = '12.5px 4px 4px 12.5px';
-        }
-        if (this.item.progress >= 0) {
-            const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress') as HTMLDivElement;
-            style.background = hexToRgb(color, 0.3);
-            style.borderRadius = '';
-            contentProgressElement.style.background = color;
-        }
-
-        for (const key in style) {
-            if (style.hasOwnProperty(key)) {
-                contentElement.style[key] = style[key];
-            }
-        }
-    }
-
-    stopPropagation(event: Event) {
-        event.stopPropagation();
-    }
-
-    ngOnDestroy() {
-        super.onDestroy();
-    }
-}

package/packages/gantt/src/components/bar/test/bar.component.spec.ts

@@ -1,54 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { NgxGanttComponent } from '../../../gantt.component';
-import { NgxGanttModule } from '../../../gantt.module';
-import { GanttDate } from '../../../utils/date';
-
-const mockBarItems = [
-    {
-        id: 'item-0101',
-        title: 'VERSION 0101',
-        start: new GanttDate('2020-05-31 22:34:35').getUnixTime(),
-        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
-        progress: 0.5
-    }
-];
-
-@Component({
-    selector: 'test-gantt-bar',
-    template: ` <ngx-gantt #gantt [items]="items" [viewType]="viewType">
-        <ngx-gantt-table>
-            <ngx-gantt-column name="标题" width="200px">
-                <ng-template #cell let-item="item">
-                    {{ item.title }}
-                </ng-template>
-            </ngx-gantt-column>
-        </ngx-gantt-table>
-    </ngx-gantt>`
-})
-export class TestGanttBarComponent {
-    constructor() {}
-
-    viewType = 'month';
-
-    items = mockBarItems;
-}
-
-describe('ngx-gantt-bar', () => {
-    let fixture: ComponentFixture<TestGanttBarComponent>;
-    beforeEach(async () => {
-        TestBed.configureTestingModule({
-            imports: [CommonModule, NgxGanttModule],
-            declarations: [TestGanttBarComponent]
-        }).compileComponents();
-        fixture = TestBed.createComponent(TestGanttBarComponent);
-        fixture.detectChanges();
-    });
-
-    it('should has bar progress', () => {
-        const barProgress = fixture.debugElement.queryAll(By.css('.gantt-bar-content-progress'));
-        expect(barProgress.length).toEqual(1);
-    });
-});

package/packages/gantt/src/components/bar/test/bar.drag.spec.ts

@@ -1,196 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, DebugElement, Directive } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { GanttDragEvent, GanttLinkDragEvent } from '../../../class';
-import { NgxGanttComponent } from '../../../gantt.component';
-import { NgxGanttModule } from '../../../gantt.module';
-import { NgxGanttRootComponent } from '../../../root.component';
-import { GanttDate } from '../../../utils/date';
-import { dispatchMouseEvent } from '../../../utils/testing';
-import { NgxGanttBarComponent } from '../bar.component';
-
-const activeClass = 'gantt-bar-active';
-
-const mockBarItems = [
-    {
-        id: 'item-0101',
-        title: 'VERSION 0101',
-        start: new GanttDate('2020-03-31 22:34:35').getUnixTime(),
-        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
-        color: '#FF0000'
-    },
-    {
-        id: 'item-0203',
-        title: 'VERSION 0203',
-        start: new GanttDate('2020-04-23 20:07:55').getUnixTime(),
-        end: new GanttDate('2020-06-23 00:00:00').getUnixTime(),
-        links: ['item-0204']
-    },
-    {
-        id: 'item-0204',
-        title: 'VERSION 0204',
-        start: new GanttDate('2020-06-02 02:21:15').getUnixTime(),
-        end: new GanttDate('2020-06-18 02:26:40').getUnixTime(),
-        links: ['item-0101']
-    }
-];
-
-@Component({
-    selector: 'test-gantt-bar',
-    template: ` <ngx-gantt
-        #gantt
-        [items]="items"
-        [viewType]="viewType"
-        [draggable]="draggable"
-        [linkable]="linkable"
-        (dragEnded)="dragEnded($event)"
-        (dragStarted)="dragStarted($event)"
-        (linkDragEnded)="linkDragEnded($event)"
-        (linkDragStarted)="linkDragStarted($event)"
-    >
-        <ngx-gantt-table>
-            <ngx-gantt-column name="标题" width="200px">
-                <ng-template #cell let-item="item">
-                    {{ item.title }}
-                </ng-template>
-            </ngx-gantt-column>
-        </ngx-gantt-table>
-    </ngx-gantt>`
-})
-export class TestGanttBarComponent {
-    constructor() {}
-
-    viewType = 'month';
-
-    items = mockBarItems;
-
-    draggable = true;
-
-    linkable = true;
-
-    dragEnded(event: GanttDragEvent) {
-        console.log(event);
-    }
-
-    dragStarted(event: GanttDragEvent) {
-        console.log(event);
-    }
-
-    linkDragEnded(event: GanttLinkDragEvent) {
-        console.log(event);
-    }
-
-    linkDragStarted(event: GanttLinkDragEvent) {
-        console.log(event);
-    }
-}
-
-function dragEvent(fixture: ComponentFixture<TestGanttBarComponent>, dragElement: HTMLElement, barElement?: HTMLElement) {
-    const dragMaskElement = fixture.debugElement.query(By.css('.gantt-drag-mask')).nativeElement;
-    const dragBackdropElement = fixture.debugElement.query(By.css('.gantt-drag-backdrop')).nativeElement;
-    const dragStartSpy = spyOn(fixture.componentInstance, 'dragStarted');
-    const dragEndSpy = spyOn(fixture.componentInstance, 'dragEnded');
-    barElement = barElement || dragElement;
-
-    dispatchMouseEvent(dragElement, 'mousedown');
-    fixture.detectChanges();
-
-    dispatchMouseEvent(document, 'mousemove', 50);
-    fixture.detectChanges();
-    expect(dragStartSpy).toHaveBeenCalledTimes(1);
-    expect(barElement.style.getPropertyValue('pointer-events')).toEqual('none');
-    expect(barElement.classList).toContain('gantt-bar-draggable-drag');
-
-    dispatchMouseEvent(document, 'mousemove', 200);
-    fixture.detectChanges();
-    expect(dragMaskElement.style.getPropertyValue('display')).toEqual('block');
-    expect(dragBackdropElement.style.getPropertyValue('display')).toEqual('block');
-
-    dispatchMouseEvent(document, 'mouseup', 200);
-    fixture.detectChanges();
-    expect(barElement.style.getPropertyValue('pointer-events')).toEqual('');
-    expect(barElement.classList).not.toContain('gantt-bar-draggable-drag');
-    expect(dragMaskElement.style.getPropertyValue('display')).toEqual('none');
-    expect(dragBackdropElement.style.getPropertyValue('display')).toEqual('none');
-    expect(dragEndSpy).toHaveBeenCalledTimes(1);
-}
-
-function linkDragEvent(fixture: ComponentFixture<TestGanttBarComponent>, dragElement: HTMLElement) {
-    const root = fixture.debugElement.query(By.directive(NgxGanttRootComponent));
-
-    dispatchMouseEvent(dragElement, 'mousedown');
-    fixture.detectChanges();
-
-    dispatchMouseEvent(document, 'mousemove', 10, 10);
-    fixture.detectChanges();
-
-    const ganttLinkDragContainer = root.nativeElement.querySelector('.gantt-link-drag-container');
-    const linkDraggingLine = root.nativeElement.querySelector('.link-dragging-line');
-    expect(ganttLinkDragContainer).toBeTruthy();
-    expect(linkDraggingLine).toBeTruthy();
-
-    dispatchMouseEvent(document, 'mousemove', 200, -30);
-    fixture.detectChanges();
-
-    dispatchMouseEvent(document, 'mouseup', 200, -30);
-    fixture.detectChanges();
-}
-
-describe('bar-drag', () => {
-    let fixture: ComponentFixture<TestGanttBarComponent>;
-    let ganttComponentInstance: TestGanttBarComponent;
-    let ganttDebugElement: DebugElement;
-
-    beforeEach(async () => {
-        TestBed.configureTestingModule({
-            imports: [CommonModule, NgxGanttModule],
-            declarations: [TestGanttBarComponent]
-        }).compileComponents();
-        fixture = TestBed.createComponent(TestGanttBarComponent);
-        ganttDebugElement = fixture.debugElement.query(By.directive(NgxGanttComponent));
-        ganttComponentInstance = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should active when mouse enter bar', () => {
-        const barElement = fixture.debugElement.query(By.directive(NgxGanttBarComponent)).nativeElement;
-        dispatchMouseEvent(barElement, 'mouseenter');
-        expect(barElement.classList).toContain(activeClass);
-        dispatchMouseEvent(barElement, 'mouseleave');
-        expect(barElement.classList).not.toContain(activeClass);
-    });
-
-    it('should bar drag', () => {
-        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[0];
-        dragEvent(fixture, bar.nativeElement);
-        expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-04-21 00:00:00').getUnixTime());
-        expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-06-26 23:59:59').getUnixTime());
-    });
-
-    it('should first bar handle drag', () => {
-        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
-        const firstHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[0].nativeElement;
-        dragEvent(fixture, firstHandleElement, bar.nativeElement);
-        expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-05-14 00:00:00').getUnixTime());
-    });
-
-    it('should last bar handles drag', () => {
-        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
-        const lastHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[1].nativeElement;
-        dragEvent(fixture, lastHandleElement, bar.nativeElement);
-        expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-07-15 23:59:59').getUnixTime());
-    });
-
-    it('should first bar link handle drag', () => {
-        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2];
-        const firstHandleElement = bar.queryAll(By.css('.link-handles .handle'))[0].nativeElement;
-        linkDragEvent(fixture, firstHandleElement);
-    });
-
-    it('should last bar link handles drag', () => {
-        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2];
-        const lastHandleElement = bar.queryAll(By.css('.link-handles .handle'))[1].nativeElement;
-        linkDragEvent(fixture, lastHandleElement);
-    });
-});

package/packages/gantt/src/components/calendar/calendar.component.html

@@ -1,52 +0,0 @@
-<div class="gantt-calendar-today-overlay" [style.width.px]="view.width">
-  <span class="today-rect" [hidden]="ganttUpper.viewType !== viewTypes.day"> </span>
-  <span class="today-line" *ngIf="ganttUpper.showTodayLine"> </span>
-</div>
-
-<svg class="gantt-calendar-overlay-main" [attr.width]="view.width" [attr.height]="headerHeight">
-  <g>
-    <text class="primary-text" *ngFor="let point of view.primaryDatePoints; trackBy: trackBy" [attr.x]="point.x" [attr.y]="point.y">
-      {{ point.text }}
-    </text>
-    <ng-container *ngFor="let point of view.secondaryDatePoints; trackBy: trackBy">
-      <text class="secondary-text" [class.secondary-text-weekend]="point.additions?.isWeekend" [attr.x]="point.x" [attr.y]="point.y">
-        {{ point.text }}
-      </text>
-    </ng-container>
-
-    <g>
-      <line
-        *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
-        [attr.x1]="(i + 1) * view.primaryWidth"
-        [attr.x2]="(i + 1) * view.primaryWidth"
-        [attr.y1]="0"
-        [attr.y2]="mainHeight"
-        class="primary-line"
-      ></line>
-    </g>
-
-    <g>
-      <line [attr.x1]="0" [attr.x2]="view.width" [attr.y1]="headerHeight" [attr.y2]="headerHeight" class="header-line"></line>
-    </g>
-  </g>
-  <g>
-    <g *ngIf="view.showTimeline">
-      <line
-        *ngFor="let point of view.secondaryDatePoints; let i = index; trackBy: trackBy"
-        [attr.x1]="(i + 1) * view.cellWidth"
-        [attr.x2]="(i + 1) * view.cellWidth"
-        [attr.y1]="headerHeight"
-        [attr.y2]="mainHeight"
-        class="secondary-line"
-      ></line>
-      <line
-        *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
-        [attr.x1]="(i + 1) * view.primaryWidth"
-        [attr.x2]="(i + 1) * view.primaryWidth"
-        [attr.y1]="0"
-        [attr.y2]="mainHeight"
-        class="primary-line"
-      ></line>
-    </g>
-  </g>
-</svg>

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

@@ -1,77 +0,0 @@
-.gantt-calendar-overlay {
-  display: block;
-  height: 100%;
-  overflow: hidden;
-
-  .gantt-calendar-today-overlay {
-    position: relative;
-    z-index: 2;
-    .today-rect {
-      width: 35px;
-      height: 24px;
-      position: absolute;
-      background: $gantt-date-today-color;
-      color: $gantt-date-today-text-color;
-      text-align: center;
-      border-radius: 4px;
-    }
-    .today-line {
-      position: absolute;
-      width: 3px;
-      background: $gantt-date-today-color;
-      transform: scaleX(0.5);
-      transform-origin: 100% 0;
-      margin-left: -2px;
-    }
-  }
-
-  .gantt-calendar-overlay-main {
-    position: relative;
-    z-index: 1;
-    background-color: $gantt-bg-color;
-  }
-
-  svg {
-    overflow: visible;
-  }
-
-  line {
-    shape-rendering: crispEdges;
-  }
-
-  .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-date-primary-border;
-  }
-
-  .secondary-line {
-    stroke-dasharray: 2px 5px;
-    stroke: #cacaca;
-  }
-
-  .header-line {
-    stroke: $gantt-border-color;
-  }
-
-  .secondary-backdrop {
-    fill: $gantt-date-week-backdrop-bg;
-  }
-}