@worktile/gantt 12.0.0 → 12.0.1

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

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

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

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

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

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

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

@@ -0,0 +1,77 @@
+.gantt {
+    width: 100%;
+    height: 100%;
+    background-color: $gantt-bg-color;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    color: $gantt-color;
+    opacity: 0;
+
+    svg {
+        overflow: visible !important;
+    }
+
+    .gantt-side {
+        border-right: 1px solid $gantt-border-color;
+        position: relative;
+        z-index: 3;
+        // overflow-x: scroll;
+        box-shadow: $gantt-side-shadow;
+
+        .gantt-side-header {
+            box-sizing: border-box;
+            height: $gantt-header-height;
+        }
+
+        .gantt-side-container {
+            height: 100%;
+            background-color: $gantt-bg-color;
+            overflow-y: auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    .gantt-container {
+        flex: 1;
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        background-color: $gantt-container-background-color;
+    }
+
+    .gantt-main-container {
+        width: 100%;
+        height: calc(100% - #{$gantt-header-height});
+        flex: 1;
+        position: absolute;
+        top: $gantt-header-height;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        overflow: auto;
+        background-color: $gantt-container-background-color;
+
+        .gantt-main-groups,
+        .gantt-main-items {
+            overflow: hidden;
+            min-height: 100%;
+        }
+
+        .gantt-group {
+            height: $gantt-group-height;
+            background: $gantt-group-background-color;
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+        }
+
+        .gantt-item {
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+            position: relative;
+        }
+    }
+}