@worktile/gantt 12.0.1 → 12.0.2

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

@@ -1,100 +0,0 @@
-import {
-    Component,
-    OnInit,
-    HostBinding,
-    OnChanges,
-    SimpleChanges,
-    OnDestroy,
-    NgZone,
-    Inject,
-    ElementRef,
-    AfterViewInit
-} from '@angular/core';
-import { GanttDatePoint } from '../../class/date-point';
-import { Subject, merge } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
-import { headerHeight, todayHeight, todayWidth, todayBorderRadius } from '../../gantt.styles';
-import { isNumber } from '../../utils/helpers';
-import { GanttDate } from '../../utils/date';
-import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
-import { GanttViewType } from './../../class/view-type';
-
-const mainHeight = 5000;
-
-@Component({
-    selector: 'gantt-calendar-overlay',
-    templateUrl: './calendar.component.html'
-})
-export class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
-    get view() {
-        return this.ganttUpper.view;
-    }
-
-    private unsubscribe$ = new Subject();
-
-    headerHeight = headerHeight;
-
-    mainHeight = mainHeight;
-
-    todayHeight = todayHeight;
-
-    todayWidth = todayWidth;
-
-    todayBorderRadius = todayBorderRadius;
-
-    viewTypes = GanttViewType;
-
-    @HostBinding('class.gantt-calendar-overlay') className = true;
-
-    constructor(
-        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
-        private ngZone: NgZone,
-        private elementRef: ElementRef<HTMLElement>
-    ) {}
-
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const today = new GanttDate().getDate();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0] as HTMLElement;
-        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0] as HTMLElement;
-        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0] as HTMLElement;
-
-        if (isNumber(x)) {
-            if (rect) {
-                rect.style.left = `${x - todayWidth / 2}px`;
-                rect.style.top = `${headerHeight - todayHeight}px`;
-                rect.innerHTML = today.toString();
-            }
-            if (line) {
-                line.style.left = `${x}px`;
-                line.style.top = `${headerHeight}px`;
-                line.style.bottom = `${-mainHeight}px`;
-            }
-        } else {
-            todayEle.style.display = 'none';
-        }
-    }
-
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                    this.setTodayPoint();
-                });
-        });
-    }
-
-    ngAfterViewInit() {}
-
-    ngOnChanges(changes: SimpleChanges): void {}
-
-    trackBy(point: GanttDatePoint, index: number) {
-        return point.text || index;
-    }
-
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}

package/packages/gantt/src/components/drag-backdrop/drag-backdrop.component.html

@@ -1,6 +0,0 @@
-<div class="gantt-drag-mask">
-  <div class="date-range">
-    <span class="start"></span>
-    <span class="end"></span>
-  </div>
-</div>

package/packages/gantt/src/components/drag-backdrop/drag-backdrop.component.scss

@@ -1,48 +0,0 @@
-.gantt-drag-backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    display: none;
-}
-
-.gantt-drag-mask {
-    position: absolute;
-    top: $gantt-header-height;
-    z-index: 1;
-    height: 100%;
-    display: none;
-    background: rgba($color: $gantt-item-drag-mask-color, $alpha: 0.05);
-
-    .date-range {
-        width: 100%;
-        min-width: 120px;
-        top: -23px;
-        background: $gantt-item-drag-mask-color;
-        line-height: 23px;
-        border-radius: 4px;
-        color: #fff;
-        position: absolute;
-        display: flex;
-        justify-content: space-between;
-        padding: 0 10px;
-        box-sizing: border-box
-    }
-}
-
-.gantt-link-drag-container {
-    width: 100%;
-    height: 1px;
-    overflow: visible !important;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2000;
-
-    .link-dragging-line {
-        stroke: $gantt-link-dragging-line-color;
-        stroke-width: 2px;
-    }
-}

package/packages/gantt/src/components/drag-backdrop/drag-backdrop.component.ts

@@ -1,13 +0,0 @@
-import { Component, OnInit, HostBinding } from '@angular/core';
-
-@Component({
-    selector: 'gantt-drag-backdrop',
-    templateUrl: `./drag-backdrop.component.html`
-})
-export class GanttDragBackdropComponent implements OnInit {
-    @HostBinding('class.gantt-drag-backdrop') backdropClass = true;
-
-    constructor() {}
-
-    ngOnInit() {}
-}

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

@@ -1,13 +0,0 @@
-.gantt-icon {
-    font-size: 1rem;
-    line-height: 0;
-
-    svg {
-        width: 1em;
-        height: 1em;
-        fill: currentColor;
-        vertical-align: -0.125em;
-        background-repeat: no-repeat;
-    }
-
-}

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

@@ -1,28 +0,0 @@
-import { Component, OnInit, Input, AfterViewInit, ElementRef, HostBinding } from '@angular/core';
-import { icons } from './icons';
-@Component({
-    selector: 'gantt-icon',
-    template: ''
-})
-export class GanttIconComponent implements OnInit, AfterViewInit {
-    @HostBinding('class.gantt-icon') isIcon = true;
-
-    @Input() set iconName(name: string) {
-        this.setSvg(name);
-    }
-
-    constructor(private elementRef: ElementRef<HTMLElement>) {}
-
-    ngOnInit(): void {}
-
-    ngAfterViewInit() {}
-
-    setSvg(name: string) {
-        const iconSvg = icons[name];
-        if (iconSvg) {
-            this.elementRef.nativeElement.innerHTML = iconSvg;
-        } else {
-            this.elementRef.nativeElement.innerHTML = '';
-        }
-    }
-}

package/packages/gantt/src/components/icon/icons.ts

@@ -1,86 +0,0 @@
-const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
-const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
-const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
-const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
-const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
-<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
-</path>
-</svg>`;
-const emptyIcon = `<svg
-width="148px"
-height="134px"
-viewBox="0 0 148 134"
-version="1.1"
-xmlns="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink"
->
-<defs>
-  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
-    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
-  </filter>
-</defs>
-<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-  <g id="编组-6" transform="translate(1.000000, 1.000000)">
-    <ellipse
-      id="椭圆形"
-      fill="#EDEEF2"
-      opacity="0.3"
-      filter="url(#filter-1)"
-      cx="73.0800017"
-      cy="115.920003"
-      rx="73.0800017"
-      ry="16.8000004"
-    ></ellipse>
-    <g id="编组-5" transform="translate(15.120000, 0.000000)">
-      <polygon
-        id="矩形"
-        fill="#E2E4E9"
-        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
-      ></polygon>
-      <path
-        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
-        id="矩形"
-        fill="#F9FAFB"
-      ></path>
-      <path
-        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
-        id="矩形"
-        fill="#E8EAEE"
-      ></path>
-      <text
-        id="&lt;/null&gt;"
-        font-family="PingFangSC-Medium, PingFang SC"
-        font-size="15.1200003"
-        font-weight="400"
-        fill="#BCBECD"
-      >
-        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
-      </text>
-      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
-      <rect
-        id="矩形备份"
-        fill="#E8EAEE"
-        x="27.5600006"
-        y="63.8400014"
-        width="61.4800014"
-        height="5.04000011"
-        rx="2.52000006"
-      ></rect>
-      <path
-        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
-        id="矩形"
-        fill="#EDEFF2"
-      ></path>
-    </g>
-  </g>
-</g>
-</svg>`;
-export const icons = {
-    'angle-right': angleRight,
-    'angle-down': angleDown,
-    'plus-square': plusSquare,
-    'minus-square': minusSquare,
-    loading: loadingIcon,
-    empty: emptyIcon
-};

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

@@ -1,19 +0,0 @@
-<svg [attr.width]="ganttUpper.view.width" class="gantt-links-overlay-main">
-  <ng-container *ngFor="let link of links; let i = index; trackBy: trackBy">
-    <path [attr.d]="link.path" fill="transparent" stroke-width="2" [attr.stroke]="link.color" pointer-events="none"></path>
-    <g>
-      <path
-        class="link-line"
-        (click)="onLineClick($event, link)"
-        (mouseenter)="mouseEnterPath(link)"
-        (mouseleave)="mouseLeavePath(link)"
-        [attr.d]="link.path"
-        stroke="transparent"
-        stroke-width="9"
-        fill="none"
-        cursor="pointer"
-      ></path>
-    </g>
-  </ng-container>
-  <line class="link-dragging-line"></line>
-</svg>

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

@@ -1,27 +0,0 @@
-.gantt-links-overlay {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  svg {
-    overflow: visible;
-    z-index: 2;
-    position: absolute;
-  }
-}
-
-.link-dragging-container {
-  width: 100%;
-  height: 1px;
-  overflow: visible !important;
-  position: absolute;
-  top: $gantt-header-height;
-  left: 0;
-  z-index: 2000;
-
-  .link-dragging-line {
-    stroke: $gantt-link-line-color;
-    stroke-width: 2px;
-  }
-}

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

@@ -1,263 +0,0 @@
-import {
-    Component,
-    OnInit,
-    Input,
-    Output,
-    EventEmitter,
-    HostBinding,
-    Inject,
-    ChangeDetectorRef,
-    ElementRef,
-    OnDestroy,
-    OnChanges
-} from '@angular/core';
-import { merge, Subject } from 'rxjs';
-import { takeUntil, skip } from 'rxjs/operators';
-import { GanttGroupInternal } from '../../class/group';
-import { GanttItemInternal, GanttItem } from './../../class/item';
-import { GanttLineClickEvent } from '../../class/event';
-import { GanttDragContainer } from '../../gantt-drag-container';
-import { recursiveItems } from '../../utils/helpers';
-import { GanttDate } from '../../utils/date';
-import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
-
-enum LinkColors {
-    default = '#cacaca',
-    blocked = '#FF7575',
-    active = '#348FE4'
-}
-
-interface GanttLinkItem {
-    id: string;
-    before: { x: number; y: number };
-    after: { x: number; y: number };
-    start: GanttDate;
-    end: GanttDate;
-    origin: GanttItem;
-    links: string[];
-}
-
-interface LinkInternal {
-    path: string;
-    source: GanttItem;
-    target: GanttItem;
-    color: LinkColors;
-}
-
-@Component({
-    selector: 'gantt-links-overlay',
-    templateUrl: './links.component.html'
-})
-export class GanttLinksComponent implements OnInit, OnChanges, OnDestroy {
-    @Input() groups: GanttGroupInternal[] = [];
-
-    @Input() items: GanttItemInternal[] = [];
-
-    @Output() lineClick = new EventEmitter<GanttLineClickEvent>();
-
-    public links: LinkInternal[] = [];
-
-    private linkItems: GanttLinkItem[] = [];
-
-    private bezierWeight = -0.5;
-
-    private firstChange = true;
-
-    private unsubscribe$ = new Subject();
-
-    @HostBinding('class.gantt-links-overlay') ganttLinksOverlay = true;
-
-    constructor(
-        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
-        private cdr: ChangeDetectorRef,
-        private elementRef: ElementRef,
-        private ganttDragContainer: GanttDragContainer
-    ) {}
-
-    ngOnInit() {
-        this.buildLinks();
-        this.firstChange = false;
-
-        this.ganttDragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-            this.elementRef.nativeElement.style.visibility = 'hidden';
-        });
-
-        merge(
-            this.ganttUpper.viewChange,
-            this.ganttUpper.expandChange,
-            this.ganttUpper.view.start$,
-            this.ganttUpper.dragEnded,
-            this.ganttUpper.linkDragEnded
-        )
-            .pipe(takeUntil(this.unsubscribe$), skip(1))
-            .subscribe(() => {
-                this.elementRef.nativeElement.style.visibility = 'visible';
-                this.buildLinks();
-                this.cdr.detectChanges();
-            });
-    }
-
-    ngOnChanges() {
-        if (!this.firstChange) {
-            this.buildLinks();
-        }
-    }
-
-    private computeItemPosition() {
-        const lineHeight = this.ganttUpper.styles.lineHeight;
-        const barHeight = this.ganttUpper.styles.barHeight;
-        this.linkItems = [];
-        if (this.groups.length > 0) {
-            let itemNum = 0;
-            let groupNum = 0;
-            this.groups.forEach((group) => {
-                groupNum++;
-                if (group.expanded) {
-                    const items = recursiveItems(group.items);
-                    items.forEach((item, itemIndex) => {
-                        const y = (groupNum + itemNum + itemIndex) * lineHeight + item.refs.y + barHeight / 2;
-                        this.linkItems.push({
-                            ...item,
-                            before: {
-                                x: item.refs.x,
-                                y
-                            },
-                            after: {
-                                x: item.refs.x + item.refs.width,
-                                y
-                            }
-                        });
-                    });
-                    itemNum += items.length;
-                }
-            });
-        } else {
-            const items = recursiveItems(this.items);
-            items.forEach((item, itemIndex) => {
-                const y = itemIndex * lineHeight + item.refs.y + barHeight / 2;
-                this.linkItems.push({
-                    ...item,
-                    before: {
-                        x: item.refs.x,
-                        y
-                    },
-                    after: {
-                        x: item.refs.x + item.refs.width,
-                        y
-                    }
-                });
-            });
-        }
-    }
-
-    private generatePath(source: GanttLinkItem, target: GanttLinkItem) {
-        if (source.before && source.after && target.before && target.after) {
-            const x1 = source.after.x;
-            const y1 = source.after.y;
-
-            const x4 = target.before.x;
-            const y4 = target.before.y;
-
-            const dx = Math.abs(x4 - x1) * this.bezierWeight;
-            const x2 = x1 - dx;
-            const x3 = x4 + dx;
-
-            const centerX = (x1 + x4) / 2;
-            const centerY = (y1 + y4) / 2;
-
-            let controlX = this.ganttUpper.styles.lineHeight / 2;
-            const controlY = this.ganttUpper.styles.lineHeight / 2;
-
-            if (x1 >= x4) {
-                if (y4 > y1) {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${x1} ${y1 + controlY}
-                        L ${x1} ${y1 + controlY} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${x4} ${y4 - controlY}
-                        L ${x4} ${y4 - controlY} ${centerX} ${centerY}`;
-                    } else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${centerX} ${centerY}
-
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${centerX} ${centerY}`;
-                    }
-                } else {
-                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${x1} ${y1 - controlY}
-                        L ${x1} ${y1 - controlY} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${x4} ${y4 + controlY}
-                        L ${x4} ${y4 + controlY} ${centerX} ${centerY}
-                        `;
-                    } else {
-                        controlX = this.ganttUpper.styles.lineHeight;
-                        return `M ${x1} ${y1}
-                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${centerX} ${centerY}
-
-                        M ${x4} ${y4}
-                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${centerX} ${centerY}`;
-                    }
-                }
-            }
-
-            return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
-        }
-    }
-
-    buildLinks() {
-        this.computeItemPosition();
-        this.links = [];
-        this.linkItems.forEach((source) => {
-            if (source.origin.start || source.origin.end) {
-                source.links.forEach((linkId) => {
-                    const target = this.linkItems.find((item) => item.id === linkId);
-                    if (target && (target.origin.start || target.origin.end)) {
-                        this.links.push({
-                            path: this.generatePath(source, target),
-                            source: source.origin,
-                            target: target.origin,
-                            color: source.end.getTime() > target.start.getTime() ? LinkColors.blocked : LinkColors.default
-                        });
-                    }
-                });
-            }
-        });
-    }
-
-    trackBy(index: number) {
-        return index;
-    }
-
-    onLineClick(event: MouseEvent, link: LinkInternal) {
-        this.lineClick.emit({
-            event,
-            source: link.source,
-            target: link.target
-        });
-    }
-
-    mouseEnterPath(link: LinkInternal) {
-        if (link.color === LinkColors.default) {
-            link.color = LinkColors.active;
-        }
-    }
-
-    mouseLeavePath(link: LinkInternal) {
-        if (link.color === LinkColors.active) {
-            link.color = LinkColors.default;
-        }
-    }
-
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}

package/packages/gantt/src/components/main/gantt-main.component.html

@@ -1,35 +0,0 @@
-<gantt-links-overlay [groups]="groups" [items]="items" (lineClick)="lineClick.emit($event)"></gantt-links-overlay>
-<!-- groups -->
-<div class="gantt-main-groups" *ngIf="groups && groups.length > 0; else itemsTemplate" [style.width.px]="ganttUpper.view.width">
-  <ng-container *ngFor="let group of groups; trackBy: trackBy">
-    <div class="gantt-group" [ngClass]="group.class">
-      <ng-template [ngTemplateOutlet]="groupHeaderTemplate" [ngTemplateOutletContext]="{ group: group }"></ng-template>
-    </div>
-    <div *ngIf="group.expanded" class="gantt-items">
-      <ng-template [ngTemplateOutlet]="ganttItems" [ngTemplateOutletContext]="{ items: group.items }"></ng-template>
-    </div>
-  </ng-container>
-</div>
-<!-- items -->
-<ng-template #itemsTemplate>
-  <div class="gantt-main-items" [style.width.px]="ganttUpper.view.width">
-    <ng-template [ngTemplateOutlet]="ganttItems" [ngTemplateOutletContext]="{ items: items }"></ng-template>
-  </div>
-</ng-template>
-
-<ng-template #ganttItems let-items="items">
-  <ng-container *ngFor="let item of items; trackBy: trackBy">
-    <div class="gantt-item" [style.height.px]="ganttUpper.styles.lineHeight">
-      <ng-container *ngIf="item.type | isGanttCustomItem">
-        <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
-      </ng-container>
-      <gantt-range *ngIf="item.type | isGanttRangeItem" [template]="rangeTemplate" [item]="item"></gantt-range>
-      <gantt-bar *ngIf="item.type | isGanttBarItem" [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></gantt-bar>
-    </div>
-    <ng-template
-      *ngIf="item.children && item.expanded"
-      [ngTemplateOutlet]="ganttItems"
-      [ngTemplateOutletContext]="{ items: item.children }"
-    ></ng-template>
-  </ng-container>
-</ng-template>

package/packages/gantt/src/components/main/gantt-main.component.ts

@@ -1,35 +0,0 @@
-import { Component, OnInit, HostBinding, Inject, Input, TemplateRef, Output, EventEmitter } from '@angular/core';
-import { GanttGroupInternal, GanttItemInternal, GanttBarClickEvent, GanttLineClickEvent } from '../../class';
-import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
-
-@Component({
-    selector: 'gantt-main',
-    templateUrl: './gantt-main.component.html'
-})
-export class GanttMainComponent implements OnInit {
-    @Input() groups: GanttGroupInternal[];
-
-    @Input() items: GanttItemInternal[];
-
-    @Input() groupHeaderTemplate: TemplateRef<any>;
-
-    @Input() itemTemplate: TemplateRef<any>;
-
-    @Input() barTemplate: TemplateRef<any>;
-
-    @Input() rangeTemplate: TemplateRef<any>;
-
-    @Output() barClick = new EventEmitter<GanttBarClickEvent>();
-
-    @Output() lineClick = new EventEmitter<GanttLineClickEvent>();
-
-    @HostBinding('class.gantt-main-container') ganttMainClass = true;
-
-    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
-
-    ngOnInit() {}
-
-    trackBy(item: GanttGroupInternal | GanttItemInternal, index: number) {
-        return item.id || index;
-    }
-}