@worktile/gantt 12.0.1 → 12.1.1

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

@@ -1,129 +0,0 @@
-import { GanttDate } from '../utils/date';
-import { BehaviorSubject } from 'rxjs';
-import { GanttViewType } from './view-type';
-
-interface GanttItemRefs {
-    width: number;
-    x: number;
-    y: number;
-}
-
-export enum GanttItemType {
-    bar = 'bar',
-    range = 'range',
-    custom = 'custom'
-}
-
-export interface GanttItem<T = unknown> {
-    id: string;
-    title: string;
-    start?: number;
-    end?: number;
-    group_id?: string;
-    links?: string[];
-    draggable?: boolean;
-    linkable?: boolean;
-    expandable?: boolean;
-    expanded?: boolean;
-    children?: GanttItem[];
-    color?: string;
-    barStyle?: Partial<CSSStyleDeclaration>;
-    origin?: T;
-    type?: GanttItemType;
-    progress?: number;
-}
-
-export class GanttItemInternal {
-    id: string;
-    title: string;
-    start: GanttDate;
-    end: GanttDate;
-    links: string[];
-    color?: string;
-    barStyle?: Partial<CSSStyleDeclaration>;
-    draggable?: boolean;
-    linkable?: boolean;
-    origin: GanttItem;
-    expandable?: boolean;
-    expanded?: boolean;
-    loading: boolean;
-    children: GanttItemInternal[];
-    type?: GanttItemType;
-    progress?: number;
-    viewType?: GanttViewType;
-
-    get refs() {
-        return this.refs$.getValue();
-    }
-
-    refs$ = new BehaviorSubject<{ width: number; x?: number; y?: number }>(null);
-
-    constructor(item: GanttItem, options?: { viewType: GanttViewType }) {
-        this.origin = item;
-        this.id = this.origin.id;
-        this.links = this.origin.links || [];
-        this.color = this.origin.color;
-        this.barStyle = this.origin.barStyle;
-        this.linkable = this.origin.linkable === undefined ? true : this.origin.linkable;
-        this.draggable = this.origin.draggable === undefined ? true : this.origin.draggable;
-        this.expandable = this.origin.expandable || (this.origin.children || []).length > 0;
-        this.expanded = this.origin.expanded === undefined ? false : this.origin.expanded;
-        this.start = item.start ? new GanttDate(item.start) : null;
-        this.end = item.end ? new GanttDate(item.end) : null;
-        this.viewType = options && options.viewType ? options.viewType : GanttViewType.month;
-        this.children = (item.children || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
-        });
-        this.type = this.origin.type || GanttItemType.bar;
-        this.progress = this.origin.progress;
-        // fill one month when start or end is null
-        this.fillItemStartOrEnd(item);
-    }
-
-    fillItemStartOrEnd(item: GanttItem) {
-        let addInterval: number;
-        switch (this.viewType) {
-            case GanttViewType.day:
-            case GanttViewType.week:
-                addInterval = 0;
-                break;
-            default:
-                addInterval = 30;
-                break;
-        }
-        if (item.start && !item.end) {
-            this.end = new GanttDate(item.start).addDays(addInterval).endOfDay();
-        }
-        if (!item.start && item.end) {
-            this.start = new GanttDate(item.end).addDays(-addInterval).startOfDay();
-        }
-    }
-
-    updateRefs(refs: GanttItemRefs) {
-        this.refs$.next(refs);
-    }
-
-    updateDate(start: GanttDate, end: GanttDate) {
-        this.start = start.startOfDay();
-        this.end = end.endOfDay();
-        this.origin.start = this.start.getUnixTime();
-        this.origin.end = this.end.getUnixTime();
-    }
-
-    addChildren(items: GanttItem[]) {
-        this.origin.children = items;
-        this.children = (items || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
-        });
-    }
-
-    setExpand(expanded: boolean) {
-        this.expanded = expanded;
-        this.origin.expanded = expanded;
-    }
-
-    addLink(linkId: string) {
-        this.links = [...this.links, linkId];
-        this.origin.links = this.links;
-    }
-}

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

@@ -1,21 +0,0 @@
-import { GanttDate } from '../../utils/date';
-import { GanttGroup, GanttGroupInternal } from '../group';
-
-const group: GanttGroup = {
-    id: '00001',
-    title: 'Project 1',
-    class: 'test'
-};
-
-describe('GanttGroupInternal', () => {
-    let ganttGroupInternal: GanttGroupInternal;
-
-    beforeEach(() => {
-        ganttGroupInternal = new GanttGroupInternal(group);
-    });
-
-    it(`should set expand`, () => {
-        ganttGroupInternal.setExpand(true);
-        expect(ganttGroupInternal.expanded).toBe(true);
-    });
-});

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

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

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

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

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

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