@worktile/gantt 12.0.1 → 12.0.2

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

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

package/packages/gantt/src/gantt-drag-container.ts

@@ -1,73 +0,0 @@
-import { Injectable, EventEmitter } from '@angular/core';
-import { GanttDragEvent, GanttLinkDragEvent } from './class/event';
-import { GanttItemInternal } from './class/item';
-
-export type LinkDragFrom = 'source' | 'target';
-
-@Injectable()
-export class GanttDragContainer {
-    dragStarted = new EventEmitter<GanttDragEvent>();
-
-    dragEnded = new EventEmitter<GanttDragEvent>();
-
-    linkDragStarted = new EventEmitter<GanttLinkDragEvent>();
-
-    linkDragEntered = new EventEmitter<GanttLinkDragEvent>();
-
-    linkDragEnded = new EventEmitter<GanttLinkDragEvent>();
-
-    linkDraggingId: string;
-
-    private linkDragSource: GanttItemInternal;
-
-    private linkDragTarget: GanttItemInternal;
-
-    private linkDragFrom: LinkDragFrom;
-
-    constructor() {}
-
-    emitLinkDragStarted(from: LinkDragFrom, item: GanttItemInternal) {
-        this.linkDraggingId = item.id;
-        this.linkDragFrom = from;
-        this.linkDragSource = this.linkDragFrom === 'source' ? item : null;
-        this.linkDragTarget = this.linkDragFrom === 'target' ? item : null;
-        this.linkDragStarted.emit({
-            source: this.linkDragSource && this.linkDragSource.origin,
-            target: this.linkDragTarget && this.linkDragTarget.origin
-        });
-    }
-
-    emitLinkDragEntered(item: GanttItemInternal) {
-        if (this.linkDragFrom === 'source') {
-            this.linkDragTarget = item;
-        } else {
-            this.linkDragSource = item;
-        }
-        this.linkDragEntered.emit({
-            source: this.linkDragSource.origin,
-            target: this.linkDragTarget.origin
-        });
-    }
-
-    emitLinkDragLeaved() {
-        if (this.linkDragFrom === 'source') {
-            this.linkDragTarget = null;
-        } else {
-            this.linkDragSource = null;
-        }
-    }
-
-    emitLinkDragEnded() {
-        this.linkDraggingId = null;
-        if (this.linkDragSource && this.linkDragTarget) {
-            this.linkDragSource.addLink(this.linkDragTarget.id);
-
-            this.linkDragEnded.emit({
-                source: this.linkDragSource.origin,
-                target: this.linkDragTarget.origin
-            });
-        }
-        this.linkDragSource = null;
-        this.linkDragTarget = null;
-    }
-}

package/packages/gantt/src/gantt-item-upper.ts

@@ -1,50 +0,0 @@
-import { Input, ElementRef, Inject, TemplateRef, Directive } from '@angular/core';
-import { GanttItemInternal, GanttItemType } from './class';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { rangeHeight } from './gantt.styles';
-import { GANTT_UPPER_TOKEN, GanttUpper } from './gantt-upper';
-
-@Directive()
-export abstract class GanttItemUpper {
-    @Input() template: TemplateRef<any>;
-
-    @Input() item: GanttItemInternal;
-
-    public firstChange = true;
-
-    public unsubscribe$ = new Subject();
-
-    constructor(protected elementRef: ElementRef<HTMLElement>, @Inject(GANTT_UPPER_TOKEN) protected ganttUpper: GanttUpper) {}
-
-    onInit() {
-        this.firstChange = false;
-        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.setPositions();
-        });
-    }
-
-    onChanges(): void {
-        if (!this.firstChange) {
-            this.setPositions();
-        }
-    }
-
-    private setPositions() {
-        const itemElement = this.elementRef.nativeElement;
-        itemElement.style.left = this.item.refs.x + 'px';
-        itemElement.style.top = this.item.refs.y + 'px';
-        itemElement.style.width = this.item.refs.width + 'px';
-        if (this.item.type === GanttItemType.bar) {
-            itemElement.style.height = this.ganttUpper.styles.barHeight + 'px';
-        } else if (this.item.type === GanttItemType.range) {
-            itemElement.style.height = rangeHeight + 'px';
-        } else {
-        }
-    }
-
-    onDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}

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

@@ -1,104 +0,0 @@
-import { Injectable, ElementRef } from '@angular/core';
-import html2canvas from 'html2canvas';
-
-@Injectable()
-export class GanttPrintService {
-    private root: HTMLElement;
-
-    private mainContainer: HTMLElement;
-
-    constructor() {}
-
-    private setInlineStyles(targetElem: Element) {
-        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
-        for (const svgElement of svgElements) {
-            this.recursElementChildren(svgElement);
-        }
-    }
-
-    private recursElementChildren(node: SVGSVGElement | HTMLElement) {
-        const transformProperties = [
-            'fill',
-            'color',
-            'font-size',
-            'stroke',
-            'font',
-            'text-anchor',
-            'stroke-dasharray',
-            'shape-rendering',
-            'stroke-width'
-        ];
-        if (!node.style) {
-            return;
-        }
-        const styles = getComputedStyle(node);
-        for (const transformProperty of transformProperties) {
-            node.style[transformProperty] = styles[transformProperty];
-        }
-        for (const child of Array.from(node.childNodes)) {
-            this.recursElementChildren(child as SVGSVGElement);
-        }
-    }
-
-    register(root: ElementRef<HTMLElement>) {
-        this.root = root.nativeElement;
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0] as HTMLElement;
-    }
-
-    print(name: string = 'download', ignoreElementClass?: string) {
-        const root = this.root as HTMLElement;
-
-        const mainContainer = this.mainContainer as HTMLElement;
-        // set print width
-        const printWidth = root.offsetWidth;
-
-        // set print height
-        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
-
-        html2canvas(root, {
-            logging: false,
-            allowTaint: true,
-            useCORS: true,
-            width: printWidth,
-            height: printHeight,
-            ignoreElements: (element) => {
-                if (ignoreElementClass && element.classList.contains(ignoreElementClass)) {
-                    return true;
-                }
-                if (element.classList.contains('gantt-calendar-today-overlay')) {
-                    return true;
-                }
-            },
-
-            onclone: (cloneDocument: Document) => {
-                const ganttClass = root.className;
-                const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`) as HTMLElement;
-                const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container') as HTMLElement;
-                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main') as HTMLElement;
-                const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main') as HTMLElement;
-
-                // change targetDom width
-                cloneGanttDom.style.width = `${printWidth}px`;
-                cloneGanttDom.style.height = `${printHeight}px`;
-                cloneGanttDom.style.overflow = `unset`;
-                cloneGanttContainerDom.style.backgroundColor = '#fff';
-                cloneCalendarOverlay.setAttribute('height', `${printHeight}`);
-                cloneCalendarOverlay.setAttribute('style', `background: transparent`);
-
-                if (cloneLinksOverlay) {
-                    cloneLinksOverlay.setAttribute('height', `${printHeight}`);
-                    cloneLinksOverlay.setAttribute('style', `height: ${printHeight}px`);
-                }
-
-                // setInlineStyles for svg
-                this.setInlineStyles(cloneGanttDom);
-            }
-        }).then((canvas: HTMLCanvasElement) => {
-            const link = document.createElement('a');
-            const dataUrl = canvas.toDataURL('image/png');
-            link.download = `${name}.png`;
-            link.href = dataUrl;
-            link.click();
-        });
-    }
-}

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

@@ -1,289 +0,0 @@
-import {
-    Input,
-    TemplateRef,
-    Output,
-    EventEmitter,
-    ContentChild,
-    ElementRef,
-    HostBinding,
-    ChangeDetectorRef,
-    NgZone,
-    SimpleChanges,
-    InjectionToken,
-    Directive
-} from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil, take, skip } from 'rxjs/operators';
-import {
-    GanttItem,
-    GanttGroup,
-    GanttViewType,
-    GanttLoadOnScrollEvent,
-    GanttDragEvent,
-    GanttGroupInternal,
-    GanttItemInternal,
-    GanttBarClickEvent,
-    GanttLinkDragEvent
-} from './class';
-import { GanttView, GanttViewOptions } from './views/view';
-import { createViewFactory } from './views/factory';
-import { GanttDate } from './utils/date';
-import { GanttStyles, defaultStyles } from './gantt.styles';
-import { uniqBy, flatten, recursiveItems, getFlatItems } from './utils/helpers';
-import { GanttDragContainer } from './gantt-drag-container';
-
-@Directive()
-export abstract class GanttUpper {
-    @Input('items') originItems: GanttItem[] = [];
-
-    @Input('groups') originGroups: GanttGroup[] = [];
-
-    @Input() viewType: GanttViewType = GanttViewType.month;
-
-    @Input() start: number;
-
-    @Input() end: number;
-
-    @Input() showTodayLine = true;
-
-    @Input() draggable: boolean;
-
-    @Input() styles: GanttStyles;
-
-    @Input() viewOptions: GanttViewOptions;
-
-    @Input() disabledLoadOnScroll: boolean;
-
-    @Output() loadOnScroll = new EventEmitter<GanttLoadOnScrollEvent>();
-
-    @Output() dragStarted = new EventEmitter<GanttDragEvent>();
-
-    @Output() dragEnded = new EventEmitter<GanttDragEvent>();
-
-    @Output() barClick = new EventEmitter<GanttBarClickEvent>();
-
-    @ContentChild('bar', { static: true }) barTemplate: TemplateRef<any>;
-
-    @ContentChild('range', { static: true }) rangeTemplate: TemplateRef<any>;
-
-    @ContentChild('item', { static: true }) itemTemplate: TemplateRef<any>;
-
-    @ContentChild('group', { static: true }) groupTemplate: TemplateRef<any>;
-
-    @ContentChild('groupHeader', { static: true }) groupHeaderTemplate: TemplateRef<any>;
-
-    public linkable: boolean;
-
-    public linkDragEnded = new EventEmitter<GanttLinkDragEvent>();
-
-    public view: GanttView;
-
-    public items: GanttItemInternal[] = [];
-
-    public groups: GanttGroupInternal[] = [];
-
-    public viewChange = new EventEmitter<GanttView>();
-
-    public expandChange = new EventEmitter<void>();
-
-    public get element() {
-        return this.elementRef.nativeElement;
-    }
-
-    public firstChange = true;
-
-    public dragContainer: GanttDragContainer;
-
-    public unsubscribe$ = new Subject();
-
-    private groupsMap: { [key: string]: GanttGroupInternal };
-
-    @HostBinding('class.gantt') ganttClass = true;
-
-    constructor(protected elementRef: ElementRef<HTMLElement>, protected cdr: ChangeDetectorRef, protected ngZone: NgZone) {}
-
-    private createView() {
-        const viewDate = this.getViewDate();
-        this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.viewOptions);
-    }
-
-    private setupGroups() {
-        const collapsedIds = this.groups.filter((group) => group.expanded === false).map((group) => group.id);
-        this.groupsMap = {};
-        this.groups = [];
-        this.originGroups.forEach((origin) => {
-            const group = new GanttGroupInternal(origin);
-            group.expanded = !collapsedIds.includes(group.id);
-            this.groupsMap[group.id] = group;
-            this.groups.push(group);
-        });
-    }
-
-    private setupItems() {
-        this.originItems = uniqBy(this.originItems, 'id');
-        this.items = [];
-        if (this.groups.length > 0) {
-            this.originItems.forEach((origin) => {
-                const group = this.groupsMap[origin.group_id];
-                if (group) {
-                    const item = new GanttItemInternal(origin, { viewType: this.viewType });
-                    group.items.push(item);
-                }
-            });
-        } else {
-            this.originItems.forEach((origin) => {
-                const item = new GanttItemInternal(origin, { viewType: this.viewType });
-                this.items.push(item);
-            });
-        }
-    }
-
-    private setupExpandedState() {
-        this.originItems = uniqBy(this.originItems, 'id');
-        let items: GanttItemInternal[] = [];
-        const flatOriginItems = getFlatItems(this.originItems);
-
-        if (this.items.length > 0) {
-            items = recursiveItems(this.items);
-        } else {
-            items = flatten(this.groups.map((group) => recursiveItems(group.items)));
-        }
-        items.forEach((item) => {
-            if (item.origin.expanded) {
-                const newItem = flatOriginItems.find((originItem) => originItem.id === item.id);
-                if (newItem) {
-                    if (newItem.expanded === undefined) {
-                        newItem.expanded = true;
-                    }
-                }
-            }
-        });
-    }
-
-    private getViewDate() {
-        let start = this.start;
-        let end = this.end;
-        if (!this.start || !this.end) {
-            this.originItems.forEach((item) => {
-                if (item.start && !this.start) {
-                    start = start ? Math.min(start, item.start) : item.start;
-                }
-                if (item.end && !this.end) {
-                    end = end ? Math.max(end, item.end) : item.end;
-                }
-            });
-        }
-        return {
-            start: {
-                date: new GanttDate(start),
-                isCustom: this.start ? true : false
-            },
-            end: {
-                date: new GanttDate(end),
-                isCustom: this.end ? true : false
-            }
-        };
-    }
-
-    computeRefs() {
-        this.groups.forEach((group) => {
-            const groupItems = recursiveItems(group.items);
-            this.computeItemsRefs(...groupItems);
-        });
-        const items = recursiveItems(this.items);
-        this.computeItemsRefs(...items);
-    }
-
-    private expandGroups(expanded: boolean) {
-        this.groups.forEach((group) => {
-            group.setExpand(expanded);
-        });
-        this.expandChange.next();
-        this.cdr.detectChanges();
-    }
-
-    onInit() {
-        this.styles = Object.assign({}, defaultStyles, this.styles);
-        this.createView();
-        this.setupGroups();
-        this.setupItems();
-        this.computeRefs();
-        this.firstChange = false;
-
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.element.style.opacity = '1';
-
-            this.dragContainer.dragStarted.subscribe((event) => {
-                this.dragStarted.emit(event);
-            });
-            this.dragContainer.dragEnded.subscribe((event) => {
-                this.dragEnded.emit(event);
-                this.computeRefs();
-                this.detectChanges();
-            });
-        });
-
-        this.view.start$.pipe(skip(1), takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.computeRefs();
-        });
-    }
-
-    onChanges(changes: SimpleChanges) {
-        if (!this.firstChange) {
-            if (changes.viewType && changes.viewType.currentValue) {
-                this.createView();
-                this.setupGroups();
-                this.setupItems();
-                this.computeRefs();
-                this.viewChange.emit(this.view);
-            }
-            if (changes.originItems || changes.originGroups) {
-                this.setupExpandedState();
-                this.setupGroups();
-                this.setupItems();
-                this.computeRefs();
-            }
-        }
-    }
-
-    onDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-
-    computeItemsRefs(...items: GanttItemInternal[]) {
-        items.forEach((item) => {
-            item.updateRefs({
-                width: item.start && item.end ? this.view.getDateRangeWidth(item.start.startOfDay(), item.end.endOfDay()) : 0,
-                x: item.start ? this.view.getXPointByDate(item.start) : 0,
-                y: (this.styles.lineHeight - this.styles.barHeight) / 2 - 1
-            });
-        });
-    }
-
-    trackBy(item: GanttGroupInternal | GanttItemInternal, index: number) {
-        return item.id || index;
-    }
-
-    detectChanges() {
-        this.cdr.detectChanges();
-    }
-
-    expandGroup(group: GanttGroupInternal) {
-        group.setExpand(!group.expanded);
-        this.expandChange.emit();
-        this.cdr.detectChanges();
-    }
-
-    // public functions
-
-    expandAll() {
-        this.expandGroups(true);
-    }
-
-    collapseAll() {
-        this.expandGroups(false);
-    }
-}
-
-export const GANTT_UPPER_TOKEN = new InjectionToken<GanttUpper>('GANTT_UPPER_TOKEN');

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

@@ -1,18 +0,0 @@
-<ngx-gantt-root>
-  <ng-template #sideTemplate>
-    <gantt-table [groups]="groups" [items]="items" [columns]="columns" [groupTemplate]="groupTemplate" [emptyTemplate]="tableEmptyTemplate"></gantt-table>
-  </ng-template>
-  <ng-template #mainTemplate>
-    <gantt-main
-      [groups]="groups"
-      [items]="items"
-      [groupHeaderTemplate]="groupHeaderTemplate"
-      [itemTemplate]="itemTemplate"
-      [barTemplate]="barTemplate"
-      [rangeTemplate]="rangeTemplate"
-      (barClick)="barClick.emit($event)"
-      (lineClick)="lineClick.emit($event)"
-    >
-    </gantt-main>
-  </ng-template>
-</ngx-gantt-root>