@worktile/gantt 11.0.2 → 12.0.1

package/packages/gantt/src/class/test/item.spec.ts

@@ -0,0 +1,102 @@
+import { GanttDate } from '../../utils/date';
+import { GanttItem, GanttItemInternal } from '../item';
+import { GanttViewType } from '../view-type';
+
+describe('GanttItemInternal', () => {
+    let ganttItemInternal: GanttItemInternal;
+    let ganttItem: GanttItem;
+
+    beforeEach(() => {
+        ganttItem = {
+            id: 'item-0101',
+            title: 'VERSION 0101',
+            start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
+            group_id: '00001',
+            color: '#FF0000',
+            children: [
+                {
+                    id: 'item-child-0101',
+                    title: 'VERSION Children 0101',
+                    start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
+                    group_id: '00001',
+                    color: '#FF0000',
+                    linkable: false
+                }
+            ]
+        };
+        ganttItemInternal = new GanttItemInternal(ganttItem);
+    });
+
+    it(`should has correct children`, () => {
+        expect(ganttItemInternal.children.length).toBe(1);
+    });
+
+    it(`should has correct end`, () => {
+        expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-06-20 23:59:59').getUnixTime());
+
+        ganttItem.end = null;
+        ganttItem.start = new GanttDate('2020-05-21 12:34:35').getUnixTime();
+        ganttItemInternal = new GanttItemInternal(ganttItem);
+        expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-06-20 23:59:59').getUnixTime());
+
+        ganttItemInternal = new GanttItemInternal(ganttItem, { viewType: GanttViewType.day });
+        expect(ganttItemInternal.end.getUnixTime()).toBe(new GanttDate('2020-05-21 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct start`, () => {
+        ganttItem.start = null;
+        ganttItem.end = new GanttDate('2020-05-21 12:34:35').getUnixTime();
+        ganttItemInternal = new GanttItemInternal(ganttItem);
+        expect(ganttItemInternal.start.getUnixTime()).toBe(new GanttDate('2020-04-21 00:00:00').getUnixTime());
+
+        ganttItemInternal = new GanttItemInternal(ganttItem, { viewType: GanttViewType.day });
+        expect(ganttItemInternal.start.getUnixTime()).toBe(new GanttDate('2020-05-21 00:00:00').getUnixTime());
+    });
+
+    it(`should update refs`, () => {
+        const refs = { width: 200, x: 200, y: 200 };
+        ganttItemInternal.updateRefs(refs);
+        expect(ganttItemInternal.refs.width).toBe(refs.width);
+    });
+
+    it(`should update date`, () => {
+        const start = new GanttDate('2020-04-21 12:34:35');
+        const end = new GanttDate('2020-09-21 12:34:35');
+        ganttItemInternal.updateDate(start, end);
+        expect(ganttItemInternal.start.getUnixTime()).toBe(start.startOfDay().getUnixTime());
+        expect(ganttItemInternal.end.getUnixTime()).toBe(end.endOfDay().getUnixTime());
+    });
+
+    it(`should add children`, () => {
+        const items = [
+            {
+                id: 'item-child-0102',
+                title: 'VERSION Children 0102',
+                start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
+                group_id: '00001',
+                color: '#FF0000',
+                linkable: false
+            },
+            {
+                id: 'item-child-0103',
+                title: 'VERSION Children 0103',
+                start: new GanttDate('2020-06-21 12:34:35').getUnixTime(),
+                group_id: '00001',
+                color: '#FF0000',
+                linkable: false
+            }
+        ];
+        ganttItemInternal.addChildren(items);
+        expect(ganttItemInternal.children.length).toBe(2);
+    });
+
+    it(`should set expand`, () => {
+        ganttItemInternal.setExpand(true);
+        expect(ganttItemInternal.expanded).toBe(true);
+    });
+
+    it(`should add link`, () => {
+        ganttItemInternal.addLink('0102');
+        expect(ganttItemInternal.links).toContain('0102');
+    });
+});

package/packages/gantt/src/class/view-type.ts

@@ -0,0 +1,7 @@
+export enum GanttViewType {
+    day = 'day',
+    quarter = 'quarter',
+    month = 'month',
+    year = 'year',
+    week = 'week'
+}

package/packages/gantt/src/components/bar/bar-drag.ts

@@ -0,0 +1,298 @@
+import { Injectable, ElementRef, OnDestroy, NgZone } from '@angular/core';
+import { DragRef, DragDrop } from '@angular/cdk/drag-drop';
+import { GanttDomService } from '../../gantt-dom.service';
+import { GanttDragContainer } from '../../gantt-drag-container';
+import { GanttItemInternal } from '../../class/item';
+import { GanttDate, differenceInCalendarDays } from '../../utils/date';
+import { fromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { GanttUpper } from '../../gantt-upper';
+
+const dragMinWidth = 10;
+const activeClass = 'gantt-bar-active';
+const linkDropClass = 'gantt-bar-link-drop';
+
+function createSvgElement(qualifiedName: string, className: string) {
+    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
+    element.classList.add(className);
+    return element;
+}
+
+@Injectable()
+export class GanttBarDrag implements OnDestroy {
+    private ganttUpper: GanttUpper;
+
+    private barElement: HTMLElement;
+
+    private item: GanttItemInternal;
+
+    private get dragDisabled() {
+        return !this.item.draggable || !this.ganttUpper.draggable;
+    }
+
+    private get linkDragDisabled() {
+        return !this.item.linkable || !this.ganttUpper.linkable;
+    }
+
+    private linkDraggingLine: SVGElement;
+
+    private barDragRef: DragRef;
+
+    private dragRefs: DragRef[] = [];
+
+    private destroy$ = new Subject();
+
+    constructor(private dragDrop: DragDrop, private dom: GanttDomService, private dragContainer: GanttDragContainer) {}
+
+    private createMouseEvents() {
+        fromEvent(this.barElement, 'mouseenter')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+                if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
+                    if (this.item.linkable) {
+                        this.barElement.classList.add(linkDropClass);
+                        this.dragContainer.emitLinkDragEntered(this.item);
+                    }
+                } else {
+                    this.barElement.classList.add(activeClass);
+                }
+            });
+
+        fromEvent(this.barElement, 'mouseleave')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+                if (!this.dragContainer.linkDraggingId) {
+                    this.barElement.classList.remove(activeClass);
+                } else {
+                    this.dragContainer.emitLinkDragLeaved();
+                }
+                this.barElement.classList.remove(linkDropClass);
+            });
+    }
+
+    private createBarDrag() {
+        const dragRef = this.dragDrop.createDrag(this.barElement);
+        dragRef.lockAxis = 'x';
+        dragRef.started.subscribe(() => {
+            this.setDraggingStyles();
+            this.dragContainer.dragStarted.emit({ item: this.item.origin });
+        });
+        dragRef.moved.subscribe((event) => {
+            const x = this.item.refs.x + event.distance.x;
+            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
+            const start = this.ganttUpper.view.getDateByXPoint(x);
+            const end = start.addDays(days);
+            this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), end);
+        });
+        dragRef.ended.subscribe((event) => {
+            const days = differenceInCalendarDays(this.item.end.value, this.item.start.value);
+            const start = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x);
+            const end = start.addDays(days);
+            this.item.updateDate(start, end);
+            this.clearDraggingStyles();
+            this.closeDragBackdrop();
+            event.source.reset();
+            this.dragContainer.dragEnded.emit({ item: this.item.origin });
+        });
+        this.barDragRef = dragRef;
+        return dragRef;
+    }
+
+    private createBarHandleDrags() {
+        const dragRefs = [];
+        const handles = this.barElement.querySelectorAll<HTMLElement>('.drag-handles .handle');
+        handles.forEach((handle, index) => {
+            const isBefore = index === 0;
+            const dragRef = this.dragDrop.createDrag(handle);
+            dragRef.lockAxis = 'x';
+            dragRef.withBoundaryElement(this.dom.root as HTMLElement);
+
+            dragRef.started.subscribe(() => {
+                this.setDraggingStyles();
+                this.dragContainer.dragStarted.emit({ item: this.item.origin });
+            });
+
+            dragRef.moved.subscribe((event) => {
+                if (isBefore) {
+                    const x = this.item.refs.x + event.distance.x;
+                    const width = this.item.refs.width + event.distance.x * -1;
+                    if (width > dragMinWidth) {
+                        this.barElement.style.width = width + 'px';
+                        this.barElement.style.left = x + 'px';
+                        this.openDragBackdrop(
+                            this.barElement,
+                            this.ganttUpper.view.getDateByXPoint(x),
+                            this.ganttUpper.view.getDateByXPoint(x + width)
+                        );
+                    }
+                } else {
+                    const width = this.item.refs.width + event.distance.x;
+                    if (width > dragMinWidth) {
+                        this.barElement.style.width = width + 'px';
+                        this.openDragBackdrop(
+                            this.barElement,
+                            this.ganttUpper.view.getDateByXPoint(this.item.refs.x),
+                            this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width)
+                        );
+                    }
+                }
+                event.source.reset();
+            });
+
+            dragRef.ended.subscribe((event) => {
+                if (isBefore) {
+                    const width = this.item.refs.width + event.distance.x * -1;
+                    if (width > dragMinWidth) {
+                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x), this.item.end);
+                    } else {
+                        this.item.updateDate(this.item.end.startOfDay(), this.item.end);
+                    }
+                } else {
+                    const width = this.item.refs.width + event.distance.x;
+                    if (width > dragMinWidth) {
+                        this.item.updateDate(
+                            this.item.start,
+                            this.ganttUpper.view.getDateByXPoint(this.item.refs.x + this.item.refs.width + event.distance.x)
+                        );
+                    } else {
+                        this.item.updateDate(this.item.start, this.item.start.endOfDay());
+                    }
+                }
+                this.clearDraggingStyles();
+                this.closeDragBackdrop();
+                this.dragContainer.dragEnded.emit({ item: this.item.origin });
+            });
+            dragRefs.push(dragRef);
+        });
+        return dragRefs;
+    }
+
+    private createLinkHandleDrags() {
+        const dragRefs = [];
+        const handles = this.barElement.querySelectorAll<HTMLElement>('.link-handles .handle');
+        handles.forEach((handle, index) => {
+            const isBefore = index === 0;
+            const dragRef = this.dragDrop.createDrag(handle);
+            dragRef.withBoundaryElement(this.dom.root as HTMLElement);
+            dragRef.beforeStarted.subscribe(() => {
+                handle.style.pointerEvents = 'none';
+                if (this.barDragRef) {
+                    this.barDragRef.disabled = true;
+                }
+                this.createLinkDraggingLine();
+                this.dragContainer.emitLinkDragStarted(isBefore ? 'target' : 'source', this.item);
+            });
+
+            dragRef.moved.subscribe(() => {
+                const positions = this.calcLinkLinePositions(handle, isBefore);
+                this.linkDraggingLine.setAttribute('x1', positions.x1.toString());
+                this.linkDraggingLine.setAttribute('y1', positions.y1.toString());
+                this.linkDraggingLine.setAttribute('x2', positions.x2.toString());
+                this.linkDraggingLine.setAttribute('y2', positions.y2.toString());
+            });
+
+            dragRef.ended.subscribe((event) => {
+                event.source.reset();
+                handle.style.pointerEvents = '';
+                if (this.barDragRef) {
+                    this.barDragRef.disabled = false;
+                }
+                this.barElement.classList.remove(activeClass);
+                this.destroyLinkDraggingLine();
+                this.dragContainer.emitLinkDragEnded();
+            });
+
+            dragRefs.push(dragRef);
+        });
+        return dragRefs;
+    }
+
+    private openDragBackdrop(dragElement: HTMLElement, start: GanttDate, end: GanttDate) {
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
+        const rootRect = this.dom.root.getBoundingClientRect();
+        const dragRect = dragElement.getBoundingClientRect();
+        const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
+        const width = dragRect.right - dragRect.left;
+        dragMaskElement.style.left = left + 'px';
+        dragMaskElement.style.width = width + 'px';
+        dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
+        dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
+        dragMaskElement.style.display = 'block';
+        dragBackdropElement.style.display = 'block';
+    }
+
+    private closeDragBackdrop() {
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
+        dragMaskElement.style.display = 'none';
+        dragBackdropElement.style.display = 'none';
+    }
+
+    private setDraggingStyles() {
+        this.barElement.style.pointerEvents = 'none';
+        this.barElement.classList.add('gantt-bar-draggable-drag');
+    }
+
+    private clearDraggingStyles() {
+        this.barElement.style.pointerEvents = '';
+        this.barElement.classList.remove('gantt-bar-draggable-drag');
+    }
+
+    private calcLinkLinePositions(target: HTMLElement, isBefore: boolean) {
+        const rootRect = this.dom.root.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        const layerRect = target.parentElement.parentElement.getBoundingClientRect();
+        return {
+            x1: layerRect.left + (isBefore ? 0 : layerRect.width) - rootRect.left,
+            y1: layerRect.top + layerRect.height / 2 - rootRect.top,
+            x2: targetRect.left - rootRect.left + targetRect.width / 2,
+            y2: targetRect.top - rootRect.top + targetRect.height / 2
+        };
+    }
+
+    private createLinkDraggingLine() {
+        if (!this.linkDraggingLine) {
+            const svgElement = createSvgElement('svg', 'gantt-link-drag-container');
+            const linElement = createSvgElement('line', 'link-dragging-line');
+            svgElement.appendChild(linElement);
+            this.dom.root.appendChild(svgElement);
+            this.linkDraggingLine = linElement;
+        }
+    }
+
+    private destroyLinkDraggingLine() {
+        if (this.linkDraggingLine) {
+            this.linkDraggingLine.parentElement.remove();
+            this.linkDraggingLine = null;
+        }
+    }
+
+    createDrags(elementRef: ElementRef, item: GanttItemInternal, ganttUpper: GanttUpper) {
+        this.item = item;
+        this.barElement = elementRef.nativeElement;
+        this.ganttUpper = ganttUpper;
+
+        if (!item.draggable || (this.dragDisabled && this.linkDragDisabled)) {
+            return;
+        } else {
+            this.createMouseEvents();
+            if (!this.dragDisabled) {
+                const dragRef = this.createBarDrag();
+                const dragHandlesRefs = this.createBarHandleDrags();
+                this.dragRefs.push(dragRef, ...dragHandlesRefs);
+            }
+            if (!this.linkDragDisabled) {
+                const linkDragRefs = this.createLinkHandleDrags();
+                this.dragRefs.push(...linkDragRefs);
+            }
+        }
+    }
+
+    ngOnDestroy() {
+        this.closeDragBackdrop();
+        this.dragRefs.forEach((dragRef) => dragRef.dispose());
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}

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

@@ -0,0 +1,17 @@
+<div class="gantt-bar-layer">
+  <div *ngIf="item.draggable && ganttUpper.draggable" class="drag-handles">
+    <ng-container>
+      <span class="handle" (mousedown)="stopPropagation($event)"></span>
+      <span class="handle" (mousedown)="stopPropagation($event)"></span>
+    </ng-container>
+  </div>
+  <div *ngIf="item.linkable && ganttUpper.linkable" class="link-handles">
+    <span class="handle"><span class="point"></span></span>
+    <span class="handle"> <span class="point"></span></span>
+  </div>
+</div>
+<div class="gantt-bar-border"></div>
+<div #content class="gantt-bar-content" (click)="onBarClick($event)">
+  <div class="gantt-bar-content-progress" *ngIf="item.progress >= 0" [style.width.%]="item.progress * 100"></div>
+  <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
+</div>

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

@@ -0,0 +1,169 @@
+$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;
+        }
+    }
+}