@worktile/gantt 15.0.0 → 15.1.0-next.1

package/fesm2020/worktile-gantt.mjs

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Pipe, ViewChild, Injectable, PLATFORM_ID, ElementRef, Optional, SkipSelf, ViewChildren, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Injectable, ViewChild, Pipe, ViewChildren, PLATFORM_ID, ElementRef, Optional, SkipSelf, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { isPlatformServer, CommonModule } from '@angular/common';
-import { take, takeUntil, skip, debounceTime, map, pairwise, auditTime, startWith, switchMap, finalize } from 'rxjs/operators';
-import { BehaviorSubject, Subject, from, merge, fromEvent, Observable, EMPTY } from 'rxjs';
+import { DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
+import { take, takeUntil, skip, switchMap, debounceTime as debounceTime$1, map, pairwise, auditTime, startWith as startWith$1, finalize } from 'rxjs/operators';
+import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, debounceTime, filter, merge, EMPTY, fromEvent, Observable } from 'rxjs';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
 import { SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
-import * as i1$1 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i3 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import * as i2 from '@angular/cdk/drag-drop';
+import { CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
 import { __decorate, __param } from 'tslib';
 
 class GanttDatePoint {
@@ -37,6 +39,10 @@ class GanttBarClickEvent {
 }
 class GanttSelectedEvent {
 }
+class GanttTableDragDroppedEvent {
+}
+class GanttTableDragEnterPredicateContext {
+}
 
 class GanttDate {
     constructor(date) {
@@ -225,7 +231,7 @@ class GanttItemInternal {
     get refs() {
         return this.refs$.getValue();
     }
-    constructor(item, options) {
+    constructor(item, level, options) {
         this.refs$ = new BehaviorSubject(null);
         this.origin = item;
         this.id = this.origin.id;
@@ -244,14 +250,16 @@ class GanttItemInternal {
         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.itemDraggable = this.origin.itemDraggable;
         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.level = level;
         //  默认填充 30 天
         this.fillDays = options?.fillDays || 30;
         this.children = (item.children || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { fillDays: this.fillDays });
+            return new GanttItemInternal(subItem, level + 1, { fillDays: this.fillDays });
         });
         this.type = this.origin.type || GanttItemType.bar;
         this.progress = this.origin.progress;
@@ -278,10 +286,13 @@ class GanttItemInternal {
         this.origin.start = this.start.getUnixTime();
         this.origin.end = this.end.getUnixTime();
     }
+    updateLevel(level) {
+        this.level = level;
+    }
     addChildren(items) {
         this.origin.children = items;
         this.children = (items || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { fillDays: this.fillDays });
+            return new GanttItemInternal(subItem, this.level + 1, { fillDays: this.fillDays });
         });
     }
     setExpand(expanded) {
@@ -803,6 +814,16 @@ function flatten(array) {
         return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
     }, []);
 }
+// export function recursiveItems(items: GanttItemInternal[]) {
+//     const result = [];
+//     (items || []).forEach((item) => {
+//         result.push(item);
+//         if (item.expanded && item.children) {
+//             result.push(...recursiveItems(item.children));
+//         }
+//     });
+//     return result;
+// }
 function recursiveItems(items) {
     const result = [];
     (items || []).forEach((item) => {
@@ -889,6 +910,7 @@ class GanttUpper {
         this.barClick = new EventEmitter();
         this.viewChange = new EventEmitter();
         this.expandChange = new EventEmitter();
+        this.computeAllRefs = true;
         this.linkDragEnded = new EventEmitter();
         this.items = [];
         this.groups = [];
@@ -922,14 +944,14 @@ class GanttUpper {
             this.originItems.forEach((origin) => {
                 const group = this.groupsMap[origin.group_id];
                 if (group) {
-                    const item = new GanttItemInternal(origin, { fillDays: this.view.options?.fillDays });
+                    const item = new GanttItemInternal(origin, 0, { fillDays: this.view.options?.fillDays });
                     group.items.push(item);
                 }
             });
         }
         else {
             this.originItems.forEach((origin) => {
-                const item = new GanttItemInternal(origin, { fillDays: this.view.options?.fillDays });
+                const item = new GanttItemInternal(origin, 0, { fillDays: this.view.options?.fillDays });
                 this.items.push(item);
             });
         }
@@ -989,12 +1011,17 @@ class GanttUpper {
         };
     }
     computeRefs() {
-        this.groups.forEach((group) => {
-            const groupItems = recursiveItems(group.items);
-            this.computeItemsRefs(...groupItems);
-        });
-        const items = recursiveItems(this.items);
-        this.computeItemsRefs(...items);
+        if (this.computeAllRefs) {
+            this.groups.forEach((group) => {
+                const groupItems = recursiveItems(group.items);
+                this.computeItemsRefs(...groupItems);
+            });
+            const items = recursiveItems(this.items);
+            this.computeItemsRefs(...items);
+        }
+    }
+    initSelectionModel() {
+        return new SelectionModel(this.multiple, []);
     }
     expandGroups(expanded) {
         this.groups.forEach((group) => {
@@ -1003,9 +1030,6 @@ class GanttUpper {
         this.expandChange.next(null);
         this.cdr.detectChanges();
     }
-    initSelectionModel() {
-        return new SelectionModel(this.multiple, []);
-    }
     ngOnInit() {
         this.styles = Object.assign({}, defaultStyles, this.styles);
         this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
@@ -1033,8 +1057,8 @@ class GanttUpper {
                 });
                 this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                     this.dragEnded.emit(event);
-                    this.computeRefs();
-                    this.detectChanges();
+                    // this.computeRefs();
+                    // this.detectChanges();
                 });
             });
         });
@@ -1081,12 +1105,12 @@ class GanttUpper {
     detectChanges() {
         this.cdr.detectChanges();
     }
+    // public functions
     expandGroup(group) {
         group.setExpand(!group.expanded);
         this.expandChange.emit(group);
         this.cdr.detectChanges();
     }
-    // public functions
     expandAll() {
         this.expandGroups(true);
     }
@@ -1244,18 +1268,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class NgxGanttTableComponent {
     constructor() {
+        this.draggable = false;
+        this.dragDropped = new EventEmitter();
         this.columnChanges = new EventEmitter();
     }
 }
 NgxGanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableComponent, selector: "ngx-gantt-table", outputs: { columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
+NgxGanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableComponent, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", columnChanges: "columnChanges" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-table',
                     template: ''
                 }]
-        }], propDecorators: { columnChanges: [{
+        }], propDecorators: { draggable: [{
+                type: Input
+            }], dropEnterPredicate: [{
+                type: Input
+            }], dragDropped: [{
+                type: Output
+            }], columnChanges: [{
                 type: Output
             }], rowBeforeTemplate: [{
                 type: ContentChild,
@@ -1267,6 +1299,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 const GANTT_ABSTRACT_TOKEN = new InjectionToken('gantt-abstract-token');
 
+class GanttPrintService {
+    constructor() { }
+    setInlineStyles(targetElem) {
+        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
+        for (const svgElement of svgElements) {
+            this.recursElementChildren(svgElement);
+        }
+    }
+    recursElementChildren(node) {
+        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);
+        }
+    }
+    register(root) {
+        this.root = root.nativeElement;
+        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+    }
+    async print(name = 'download', ignoreElementClass) {
+        const root = this.root;
+        const mainContainer = this.mainContainer;
+        // set print width
+        const printWidth = root.offsetWidth;
+        // set print height
+        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
+        const html2canvas = (await import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')).default;
+        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) => {
+                const ganttClass = root.className;
+                const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
+                const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
+                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-grid-main');
+                const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
+                // 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) => {
+            const link = document.createElement('a');
+            const dataUrl = canvas.toDataURL('image/png');
+            link.download = `${name}.png`;
+            link.href = dataUrl;
+            link.click();
+        });
+    }
+}
+GanttPrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GanttPrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttPrintService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttPrintService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
 const supports = (typeof window !== 'undefined' && !!window.CSS && CSS.supports) || (() => false);
 /**
  * Note: we don't need to add vendor prefixes within `.scss` files since they're added automatically.
@@ -1282,6 +1406,138 @@ function setStyleWithVendorPrefix({ element, style, value }) {
     }
 }
 
+const defaultColumnWidth = 100;
+const minColumnWidth = 80;
+class GanttTableHeaderComponent {
+    constructor(elementRef, gantt, cdr) {
+        this.elementRef = elementRef;
+        this.gantt = gantt;
+        this.cdr = cdr;
+        this.tableWidth = 0;
+        this.unsubscribe$ = new Subject();
+        this.className = `gantt-table-header `;
+    }
+    ngOnInit() {
+        this.columnsChange();
+        this.columns.changes.pipe(takeUntil$1(this.unsubscribe$)).subscribe(() => {
+            this.columnsChange();
+            this.cdr.detectChanges();
+        });
+    }
+    columnsChange() {
+        let tableWidth = 0;
+        this.columns.forEach((column) => {
+            if (!column.columnWidth) {
+                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+            }
+            tableWidth += Number(column.columnWidth.replace('px', ''));
+        });
+        this.tableWidth = tableWidth;
+    }
+    dragFixed(config) {
+        if (config.movedWidth < config.minWidth) {
+            setStyleWithVendorPrefix({
+                element: config.target,
+                style: 'transform',
+                value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`
+            });
+        }
+    }
+    onResizeStarted(event) {
+        const target = event.source.element.nativeElement;
+        this.dragStartLeft = target.getBoundingClientRect().left;
+    }
+    onResizeMoved(event, column) {
+        const target = event.source.element.nativeElement;
+        const left = target.getBoundingClientRect().left;
+        let originWidth;
+        let movedWidth;
+        let minWidth;
+        if (column) {
+            originWidth = parseInt(column.columnWidth, 10);
+            movedWidth = originWidth + (left - this.dragStartLeft);
+            minWidth = minColumnWidth;
+        }
+        else {
+            originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+            movedWidth = originWidth + (left - this.dragStartLeft);
+            minWidth = minColumnWidth * this.columns.length;
+        }
+        this.dragFixed({
+            target,
+            originWidth,
+            movedWidth,
+            minWidth
+        });
+        this.showAuxiliaryLine(event);
+    }
+    onResizeEnded(event, column) {
+        const beforeWidth = parseInt(column.columnWidth, 10);
+        const target = event.source.element.nativeElement;
+        const left = target.getBoundingClientRect().left;
+        const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
+        const columnWidth = Math.max(width || 0, minColumnWidth);
+        column.columnWidth = coerceCssPixelValue(columnWidth);
+        if (this.gantt.table) {
+            this.gantt.table.columnChanges.emit({ columns: this.columns });
+        }
+        this.tableWidth = this.tableWidth - beforeWidth + columnWidth;
+        this.hideAuxiliaryLine();
+        event.source.reset();
+    }
+    onOverallResizeEnded(event) {
+        const target = event.source.element.nativeElement;
+        const left = target.getBoundingClientRect().left;
+        const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+        const dragWidth = left - this.dragStartLeft;
+        let tempWidth = 0;
+        this.columns.forEach((column) => {
+            const lastColumnWidth = parseInt(column.columnWidth, 10);
+            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
+            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
+            column.columnWidth = coerceCssPixelValue(columnWidth);
+            tempWidth += columnWidth;
+        });
+        this.tableWidth = tempWidth;
+        if (this.gantt.table) {
+            this.gantt.table.columnChanges.emit({ columns: this.columns });
+        }
+        this.hideAuxiliaryLine();
+        event.source.reset();
+    }
+    showAuxiliaryLine(event) {
+        const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
+        const targetRect = event.source.element.nativeElement.getBoundingClientRect();
+        const distance = { x: targetRect.left - tableRect.left, y: targetRect.top - tableRect.top };
+        this.resizeLineElementRef.nativeElement.style.left = `${distance.x}px`;
+        this.resizeLineElementRef.nativeElement.style.display = 'block';
+    }
+    hideAuxiliaryLine() {
+        this.resizeLineElementRef.nativeElement.style.display = 'none';
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}
+GanttTableHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableHeaderComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_ABSTRACT_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttTableHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"d-flex\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"column-resize-handle\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"onResizeMoved($event, column)\"\n      (cdkDragStarted)=\"onResizeStarted($event)\"\n      (cdkDragEnded)=\"onResizeEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-table-header', template: "<div class=\"d-flex\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"column-resize-handle\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"onResizeMoved($event, column)\"\n      (cdkDragStarted)=\"onResizeStarted($event)\"\n      (cdkDragEnded)=\"onResizeEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n\n<div\n  class=\"table-resize-handle\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"onResizeMoved($event)\"\n  (cdkDragStarted)=\"onResizeStarted($event)\"\n  (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GANTT_ABSTRACT_TOKEN]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
+                type: Input
+            }], resizeLineElementRef: [{
+                type: ViewChild,
+                args: ['resizeLine', { static: true }]
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 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>`;
@@ -1360,13 +1616,15 @@ xmlns:xlink="http://www.w3.org/1999/xlink"
   </g>
 </g>
 </svg>`;
+const dragIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aijaction/drag--" stroke-width="1" fill-rule="evenodd"><g id="aij拖动" transform="translate(5 1)" fill-rule="nonzero"><path d="M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" id="aij形状结合"></path></g></g></svg>`;
 const icons = {
     'angle-right': angleRight,
     'angle-down': angleDown,
     'plus-square': plusSquare,
     'minus-square': minusSquare,
     loading: loadingIcon,
-    empty: emptyIcon
+    empty: emptyIcon,
+    drag: dragIcon
 };
 
 class GanttIconComponent {
@@ -1442,46 +1700,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 }]
         }] });
 
-const defaultColumnWidth = 100;
-const minColumnWidth = 80;
-class GanttTableComponent {
-    set columns(columns) {
-        this.hasShowExpandIcon = false;
-        columns.forEach((column) => {
-            if (!column.columnWidth) {
-                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
-            }
-            if (column.showExpandIcon) {
-                this.hasShowExpandIcon = true;
-            }
-        });
-        this.columnList = columns;
+class GanttTableBodyComponent {
+    set renderData(data) {
+        const firstData = data[0];
+        if (firstData && firstData.hasOwnProperty('items')) {
+            this.hasGroup = true;
+        }
+        this.ganttTableEmptyClass = data?.length ? false : true;
+        this._renderData = data;
+    }
+    get renderData() {
+        return this._renderData;
     }
-    constructor(gantt, ganttUpper, elementRef) {
+    constructor(gantt, ganttUpper, cdr, document) {
         this.gantt = gantt;
         this.ganttUpper = ganttUpper;
-        this.elementRef = elementRef;
-        this.hasShowExpandIcon = false;
+        this.cdr = cdr;
+        this.document = document;
+        this.draggable = false;
+        this.dragDropped = new EventEmitter();
         this.itemClick = new EventEmitter();
         this.ganttTableClass = true;
         this.ganttTableEmptyClass = false;
+        this.ganttTableDragging = false;
+        this.hasExpandIcon = false;
+        // 缓存 Element 和 DragRef 的关系，方便在 Item 拖动时查找
+        this.itemDragRefMap = new Map();
+        this.itemDragMoved = new Subject();
+        this.destroy$ = new Subject();
     }
-    ngOnChanges(changes) {
-        if (!changes.groups.currentValue?.length && !changes.items.currentValue?.length) {
-            this.ganttTableEmptyClass = true;
-        }
-        else {
-            this.ganttTableEmptyClass = false;
-        }
+    ngOnInit() {
+        this.columns.changes.pipe(startWith(this.columns), takeUntil$1(this.destroy$)).subscribe(() => {
+            this.hasExpandIcon = false;
+            this.columns.forEach((column) => {
+                if (!column.columnWidth) {
+                    column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+                }
+                if (column.showExpandIcon) {
+                    this.hasExpandIcon = true;
+                }
+            });
+            this.cdr.detectChanges();
+        });
     }
-    dragFixed(config) {
-        if (config.movedWidth < config.minWidth) {
-            setStyleWithVendorPrefix({
-                element: config.target,
-                style: 'transform',
-                value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`
+    ngAfterViewInit() {
+        this.cdkDrags.changes
+            .pipe(startWith(this.cdkDrags), takeUntil$1(this.destroy$))
+            .subscribe((drags) => {
+            this.itemDragRefMap.clear();
+            drags.forEach((drag) => {
+                if (drag.data) {
+                    // cdkDrag 变化时，缓存 Element 与 DragRef 的关系，方便 Drag Move 时查找
+                    this.itemDragRefMap.set(drag.element.nativeElement, drag);
+                }
             });
-        }
+        });
+        this.itemDragMoved
+            .pipe(debounceTime(30), 
+        //  debounce 可能会导致拖动结束后仍然执行 moved ，所以通过判断 dragging 状态来过滤无效 moved
+        filter((event) => event.source._dragRef.isDragging()), takeUntil$1(this.destroy$))
+            .subscribe((event) => {
+            this.onItemDragMoved(event);
+        });
     }
     expandGroup(group) {
         this.gantt.expandGroup(group);
@@ -1490,89 +1770,184 @@ class GanttTableComponent {
         event.stopPropagation();
         this.gantt.expandChildren(item);
     }
-    dragStarted(event) {
-        const target = event.source.element.nativeElement;
-        this.dragStartLeft = target.getBoundingClientRect().left;
+    onItemDragStarted(event) {
+        this.ganttTableDragging = true;
+        // 拖动开始时隐藏所有的子项
+        const children = this.getChildrenElementsByElement(event.source.getPlaceholderElement());
+        children.forEach((element) => {
+            element.classList.add('drag-item-hide');
+        });
     }
-    dragMoved(event, column) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        let originWidth;
-        let movedWidth;
-        let minWidth;
-        if (column) {
-            originWidth = parseInt(column.columnWidth, 10);
-            movedWidth = originWidth + (left - this.dragStartLeft);
-            minWidth = minColumnWidth;
+    emitItemDragMoved(event) {
+        this.itemDragMoved.next(event);
+    }
+    onItemDragMoved(event) {
+        // 通过鼠标位置查找对应的目标 Item 元素
+        let currentPointElement = this.document.elementFromPoint(event.pointerPosition.x, event.pointerPosition.y);
+        if (!currentPointElement) {
+            this.cleanupDragArtifacts();
+            return;
         }
-        else {
-            originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-            movedWidth = originWidth + (left - this.dragStartLeft);
-            minWidth = minColumnWidth * this.columnList.length;
+        let targetElement = currentPointElement.classList.contains('gantt-table-item')
+            ? currentPointElement
+            : currentPointElement.closest('.gantt-table-item');
+        if (!targetElement) {
+            this.cleanupDragArtifacts();
+            return;
         }
-        this.dragFixed({
-            target,
-            originWidth,
-            movedWidth,
-            minWidth
+        // 缓存放置目标Id 并计算鼠标相对应的位置
+        this.itemDropTarget = {
+            id: this.itemDragRefMap.get(targetElement)?.data.id,
+            position: this.getTargetPosition(targetElement, event)
+        };
+        // 执行外部传入的 dropEnterPredicate 判断是否允许拖入目标项
+        if (this.dropEnterPredicate) {
+            const targetDragRef = this.itemDragRefMap.get(targetElement);
+            if (this.dropEnterPredicate({
+                source: event.source.data.origin,
+                target: targetDragRef.data.origin,
+                dropPosition: this.itemDropTarget.position
+            })) {
+                this.showDropPositionPlaceholder(targetElement);
+            }
+            else {
+                this.itemDropTarget = null;
+            }
+        }
+        else {
+            this.showDropPositionPlaceholder(targetElement);
+        }
+    }
+    onItemDragEnded(event) {
+        this.ganttTableDragging = false;
+    }
+    onListDropped(event) {
+        if (!this.itemDropTarget) {
+            return;
+        }
+        const targetDragRef = this.cdkDrags.find((item) => item.data?.id === this.itemDropTarget.id);
+        const sourceItem = event.item.data;
+        const targetItem = targetDragRef?.data;
+        this.removeItem(sourceItem);
+        switch (this.itemDropTarget.position) {
+            case 'before':
+            case 'after':
+                this.insertItem(targetItem, sourceItem, this.itemDropTarget.position);
+                sourceItem.updateLevel(targetItem.level);
+                break;
+            case 'inside':
+                this.insertChildrenItem(targetItem, sourceItem);
+                sourceItem.updateLevel(targetItem.level + 1);
+                break;
+        }
+        this.dragDropped.emit({
+            source: sourceItem.origin,
+            sourceParent: this.getParentByItem(sourceItem)?.origin,
+            target: targetItem.origin,
+            targetParent: this.getParentByItem(targetItem)?.origin,
+            dropPosition: this.itemDropTarget.position
         });
-        this.showAuxiliaryLine(event);
+        this.cleanupDragArtifacts(true);
     }
-    columnDragEnded(event, column) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
-        const columnWidth = Math.max(width || 0, minColumnWidth);
-        column.columnWidth = coerceCssPixelValue(columnWidth);
-        if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
+    trackBy(index, item) {
+        return item.id || index;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    removeItem(item) {
+        this.renderData.splice(this.renderData.indexOf(item), 1);
+        this.flatData.splice(this.flatData.indexOf(item), 1);
+    }
+    insertItem(target, inserted, position) {
+        if (position === 'before') {
+            this.renderData.splice(this.renderData.indexOf(target), 0, inserted);
+            this.flatData.splice(this.flatData.indexOf(target), 0, inserted);
+        }
+        else {
+            const dragRef = this.cdkDrags.find((drag) => drag.data === target);
+            // 如果目标项是展开的，插入的 index 位置需要考虑子项的数量
+            let childrenCount = 0;
+            if (target.expanded) {
+                childrenCount = this.getChildrenElementsByElement(dragRef.element.nativeElement)?.length || 0;
+            }
+            this.renderData.splice(this.renderData.indexOf(target) + 1 + childrenCount, 0, inserted);
+            this.flatData.splice(this.flatData.indexOf(target) + 1 + childrenCount, 0, inserted);
         }
-        this.hideAuxiliaryLine();
-        event.source.reset();
     }
-    tableDragEnded(event) {
-        const target = event.source.element.nativeElement;
-        const left = target.getBoundingClientRect().left;
-        const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-        const dragWidth = left - this.dragStartLeft;
-        this.columnList.forEach((column) => {
-            const lastColumnWidth = parseInt(column.columnWidth, 10);
-            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
-            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
-            column.columnWidth = coerceCssPixelValue(columnWidth);
+    insertChildrenItem(target, inserted) {
+        if (target.expanded) {
+            this.renderData.splice(this.renderData.indexOf(target) + target.children.length + 1, 0, inserted);
+            this.flatData.splice(this.flatData.indexOf(target) + target.children.length + 1, 0, inserted);
+        }
+        target.children.push(inserted);
+    }
+    getParentByItem(item) {
+        return (this.flatData || []).find((n) => {
+            return n.children?.includes(item);
         });
-        if (this.gantt.table) {
-            this.gantt.table.columnChanges.emit({ columns: this.columnList });
+    }
+    getChildrenElementsByElement(element) {
+        // 通过循环持续查找 next element，如果 element 的 level 小于当前 item 的 level，则为它的 children
+        const children = [];
+        const dragRef = this.itemDragRefMap.get(element);
+        let nextElement = element.nextElementSibling;
+        let nextDragRef = this.itemDragRefMap.get(nextElement);
+        while (nextDragRef && nextDragRef.data.level > dragRef.data.level) {
+            children.push(nextElement);
+            nextElement = nextElement.nextElementSibling;
+            nextDragRef = this.itemDragRefMap.get(nextElement);
         }
-        this.hideAuxiliaryLine();
-        event.source.reset();
+        return children;
     }
-    showAuxiliaryLine(event) {
-        const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
-        this.draglineElementRef.nativeElement.style.left = `${event.event.clientX - tableRect.left}px`;
-        this.draglineElementRef.nativeElement.style.display = 'block';
+    getTargetPosition(target, event) {
+        const targetRect = target.getBoundingClientRect();
+        const beforeOrAfterGap = targetRect.height * 0.3;
+        // 将 Item 高度分为上中下三段，其中上下的 Gap 为 height 的 30%，通过判断鼠标位置在哪一段 gap 来计算对应的位置
+        if (event.pointerPosition.y - targetRect.top < beforeOrAfterGap) {
+            return 'before';
+        }
+        else if (event.pointerPosition.y >= targetRect.bottom - beforeOrAfterGap) {
+            return 'after';
+        }
+        else {
+            return 'inside';
+        }
     }
-    hideAuxiliaryLine() {
-        this.draglineElementRef.nativeElement.style.display = 'none';
+    showDropPositionPlaceholder(targetElement) {
+        this.cleanupDragArtifacts();
+        if (this.itemDropTarget && targetElement) {
+            targetElement.classList.add(`drop-position-${this.itemDropTarget.position}`);
+        }
     }
-    trackBy(index, item) {
-        return item.id || index;
+    cleanupDragArtifacts(dropped = false) {
+        if (dropped) {
+            this.itemDropTarget = null;
+        }
+        this.document.querySelectorAll('.drop-position-before').forEach((element) => element.classList.remove('drop-position-before'));
+        this.document.querySelectorAll('.drop-position-after').forEach((element) => element.classList.remove('drop-position-after'));
+        this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
+        this.document.querySelectorAll('.drag-item-hide').forEach((element) => element.classList.remove('drop-item-hide'));
     }
 }
-GanttTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableComponent, selector: "gantt-table", inputs: { groups: "groups", items: "items", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.gantt-table": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass" } }, viewQueries: [{ propertyName: "draglineElementRef", first: true, predicate: ["dragLine"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-table-header gantt-table-row\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"gantt-table-drag-trigger\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"dragMoved($event, column)\"\n      (cdkDragStarted)=\"dragStarted($event)\"\n      (cdkDragEnded)=\"columnDragEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n<div class=\"gantt-table-body\">\n  <ng-container *ngIf=\"!groups.length && !items.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"groups && groups.length > 0; else itemsTemplate\">\n    <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"group.class\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"group.expanded\" (click)=\"expandGroup(group)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"group.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ group.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"group.expanded\">\n        <ng-template\n          [ngTemplateOutlet]=\"ganttItems\"\n          [ngTemplateOutletContext]=\"{ group: group, items: group.items, level: 0 }\"\n        ></ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div\n  class=\"gantt-table-drag-trigger\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"dragMoved($event)\"\n  (cdkDragStarted)=\"dragStarted($event)\"\n  (cdkDragEnded)=\"tableDragEnded($event)\"\n></div>\n\n<div #dragLine class=\"gantt-table-drag-auxiliary-line\"></div>\n\n<ng-template #itemsTemplate>\n  <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items, level: 0 }\"></ng-template>\n</ng-template>\n\n<ng-template #ganttItems let-group=\"group\" let-items=\"items\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of items; trackBy: trackBy\">\n    <div\n      (click)=\"itemClick.emit({ event: $event, selectedValue: this.item.origin })\"\n      class=\"gantt-table-item gantt-table-row\"\n      [class.gantt-table-item-first-level-group]=\"level === 0 && (item.type | isGanttRangeItem)\"\n      [class.gantt-table-item-with-group]=\"group\"\n      [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      [style.height.px]=\"gantt.styles.lineHeight\"\n      [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n    >\n      <ng-template\n        [ngTemplateOutlet]=\"rowBeforeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n      ></ng-template>\n      <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n        <div *ngIf=\"column?.showExpandIcon || (!hasShowExpandIcon && first)\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"level * 20\">\n          <ng-container *ngIf=\"level < gantt.maxLevel - 1 && item.expandable\">\n            <gantt-icon\n              *ngIf=\"!item.loading\"\n              class=\"expand-icon\"\n              [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n              (click)=\"expandChildren($event, item)\"\n            ></gantt-icon>\n            <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n          </ng-container>\n        </div>\n        <div class=\"gantt-table-column-content\">\n          <ng-template\n            [ngTemplateOutlet]=\"column.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      </div>\n      <ng-template\n        [ngTemplateOutlet]=\"rowAfterTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n      ></ng-template>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children, level: level + 1, group: group }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableComponent, decorators: [{
+GanttTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+GanttTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: { renderData: "renderData", flatData: "flatData", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"renderData\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!renderData?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"renderData && renderData.length > 0\">\n    <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && item.expandable\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-table', template: "<div class=\"gantt-table-header gantt-table-row\">\n  <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let i = index\" [style.width]=\"column.columnWidth\">\n    <ng-container *ngIf=\"column.headerTemplateRef; else default\" [ngTemplateOutlet]=\"column.headerTemplateRef\"></ng-container>\n    <ng-template #default>\n      {{ column.name }}\n    </ng-template>\n    <div\n      class=\"gantt-table-drag-trigger\"\n      cdkDrag\n      cdkDragLockAxis=\"x\"\n      cdkDragBoundary=\".gantt\"\n      (cdkDragMoved)=\"dragMoved($event, column)\"\n      (cdkDragStarted)=\"dragStarted($event)\"\n      (cdkDragEnded)=\"columnDragEnded($event, column)\"\n    ></div>\n  </div>\n</div>\n<div class=\"gantt-table-body\">\n  <ng-container *ngIf=\"!groups.length && !items.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"groups && groups.length > 0; else itemsTemplate\">\n    <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"group.class\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"group.expanded\" (click)=\"expandGroup(group)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"group.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: group.origin, group: group.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ group.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"group.expanded\">\n        <ng-template\n          [ngTemplateOutlet]=\"ganttItems\"\n          [ngTemplateOutletContext]=\"{ group: group, items: group.items, level: 0 }\"\n        ></ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div\n  class=\"gantt-table-drag-trigger\"\n  cdkDrag\n  cdkDragLockAxis=\"x\"\n  cdkDragBoundary=\".gantt\"\n  (cdkDragMoved)=\"dragMoved($event)\"\n  (cdkDragStarted)=\"dragStarted($event)\"\n  (cdkDragEnded)=\"tableDragEnded($event)\"\n></div>\n\n<div #dragLine class=\"gantt-table-drag-auxiliary-line\"></div>\n\n<ng-template #itemsTemplate>\n  <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items, level: 0 }\"></ng-template>\n</ng-template>\n\n<ng-template #ganttItems let-group=\"group\" let-items=\"items\" let-level=\"level\">\n  <ng-container *ngFor=\"let item of items; trackBy: trackBy\">\n    <div\n      (click)=\"itemClick.emit({ event: $event, selectedValue: this.item.origin })\"\n      class=\"gantt-table-item gantt-table-row\"\n      [class.gantt-table-item-first-level-group]=\"level === 0 && (item.type | isGanttRangeItem)\"\n      [class.gantt-table-item-with-group]=\"group\"\n      [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      [style.height.px]=\"gantt.styles.lineHeight\"\n      [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n    >\n      <ng-template\n        [ngTemplateOutlet]=\"rowBeforeTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n      ></ng-template>\n      <div class=\"gantt-table-column\" *ngFor=\"let column of columnList; let first = first\" [style.width]=\"column.columnWidth\">\n        <div *ngIf=\"column?.showExpandIcon || (!hasShowExpandIcon && first)\" class=\"gantt-expand-icon\" [style.marginLeft.px]=\"level * 20\">\n          <ng-container *ngIf=\"level < gantt.maxLevel - 1 && item.expandable\">\n            <gantt-icon\n              *ngIf=\"!item.loading\"\n              class=\"expand-icon\"\n              [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n              (click)=\"expandChildren($event, item)\"\n            ></gantt-icon>\n            <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n          </ng-container>\n        </div>\n        <div class=\"gantt-table-column-content\">\n          <ng-template\n            [ngTemplateOutlet]=\"column.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n          ></ng-template>\n        </div>\n      </div>\n      <ng-template\n        [ngTemplateOutlet]=\"rowAfterTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n      ></ng-template>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children, level: level + 1, group: group }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'gantt-table-body', template: "<div\n  class=\"gantt-table-body-container\"\n  cdkDropList\n  [cdkDropListAutoScrollStep]=\"6\"\n  [cdkDropListData]=\"renderData\"\n  [cdkDropListSortingDisabled]=\"true\"\n  (cdkDropListDropped)=\"onListDropped($event)\"\n>\n  <ng-container *ngIf=\"!renderData?.length\">\n    <ng-container *ngIf=\"!emptyTemplate\">\n      <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n      <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n    </ng-container>\n    <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"renderData && renderData.length > 0\">\n    <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n      <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n        <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n          <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n          <ng-container *ngIf=\"groupTemplate; else default\">\n            <ng-template\n              [ngTemplateOutlet]=\"groupTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n            ></ng-template>\n          </ng-container>\n          <ng-template #default>\n            <span class=\"group-title\">{{ item.title }}</span>\n          </ng-template>\n        </div>\n      </div>\n\n      <div\n        *ngIf=\"!item.items\"\n        (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n        cdkDrag\n        [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n        (cdkDragStarted)=\"onItemDragStarted($event)\"\n        (cdkDragEnded)=\"onItemDragEnded($event)\"\n        (cdkDragMoved)=\"emitItemDragMoved($event)\"\n        class=\"gantt-table-item\"\n        [class.gantt-table-item-with-group]=\"hasGroup\"\n        [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n        [style.height.px]=\"gantt.styles.lineHeight\"\n        [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n        [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n      >\n        <ng-template\n          [ngTemplateOutlet]=\"rowBeforeTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n\n        <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n          <!-- drag icon -->\n          <gantt-icon\n            *ngIf=\"first && draggable\"\n            class=\"gantt-drag-handle\"\n            iconName=\"drag\"\n            cdkDragHandle\n            [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n          ></gantt-icon>\n          <!-- expand icon -->\n          <div\n            *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n            class=\"gantt-expand-icon\"\n            [style.marginLeft.px]=\"item.level * 20\"\n          >\n            <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && item.expandable\">\n              <gantt-icon\n                *ngIf=\"!item.loading\"\n                class=\"expand-icon\"\n                [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n                (click)=\"expandChildren($event, item)\"\n              >\n              </gantt-icon>\n              <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n            </ng-container>\n          </div>\n          <!-- column content -->\n          <div class=\"gantt-table-column-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"column.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n            ></ng-template>\n          </div>\n        </div>\n        <ng-template\n          [ngTemplateOutlet]=\"rowAfterTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n        ></ng-template>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_ABSTRACT_TOKEN]
                 }] }, { type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { groups: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { renderData: [{
                 type: Input
-            }], items: [{
+            }], flatData: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -1584,17 +1959,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], rowAfterTemplate: [{
                 type: Input
+            }], draggable: [{
+                type: HostBinding,
+                args: ['class.gantt-table-draggable']
+            }, {
+                type: Input
+            }], dropEnterPredicate: [{
+                type: Input
+            }], dragDropped: [{
+                type: Output
             }], itemClick: [{
                 type: Output
-            }], draglineElementRef: [{
-                type: ViewChild,
-                args: ['dragLine', { static: true }]
             }], ganttTableClass: [{
                 type: HostBinding,
-                args: ['class.gantt-table']
+                args: ['class.gantt-table-body']
             }], ganttTableEmptyClass: [{
                 type: HostBinding,
                 args: ['class.gantt-table-empty']
+            }], ganttTableDragging: [{
+                type: HostBinding,
+                args: ['class.gantt-table-dragging']
+            }], cdkDrags: [{
+                type: ViewChildren,
+                args: [(CdkDrag)]
             }] } });
 
 class GanttLinkLine {
@@ -1850,13 +2237,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 }] }]; } });
 
 class GanttLinksComponent {
-    constructor(ganttUpper, cdr, elementRef, ganttDragContainer) {
+    constructor(ganttUpper, cdr, elementRef, ganttDragContainer, ngZone) {
         this.ganttUpper = ganttUpper;
         this.cdr = cdr;
         this.elementRef = elementRef;
         this.ganttDragContainer = ganttDragContainer;
-        this.groups = [];
-        this.items = [];
+        this.ngZone = ngZone;
+        // @Input() groups: GanttGroupInternal[] = [];
+        // @Input() items: GanttItemInternal[] = [];
+        this.flatData = [];
         this.lineClick = new EventEmitter();
         this.links = [];
         this.ganttLinkTypes = GanttLinkType;
@@ -1869,13 +2258,14 @@ class GanttLinksComponent {
     ngOnInit() {
         this.linkLine = createLineGenerator(this.ganttUpper.linkOptions.lineType, this.ganttUpper);
         this.showArrow = this.ganttUpper.linkOptions.showArrow;
-        this.buildLinks();
+        // this.buildLinks();
         this.firstChange = false;
+        this.buildLinks();
         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(skip(1), debounceTime(0), takeUntil(this.unsubscribe$))
+        merge(this.ganttUpper.viewChange, this.ganttUpper.expandChange, this.ganttUpper.view.start$, this.ganttUpper.dragEnded, this.ganttUpper.linkDragEnded, this.ngZone.onStable.pipe(take(1)).pipe(switchMap(() => this.ganttUpper.table?.dragDropped || EMPTY)))
+            .pipe(skip(1), debounceTime$1(0), takeUntil(this.unsubscribe$))
             .subscribe(() => {
             this.elementRef.nativeElement.style.visibility = 'visible';
             this.buildLinks();
@@ -1891,48 +2281,66 @@ class GanttLinksComponent {
         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
-                            }
-                        });
+        // 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
+        //             }
+        //         });
+        //     });
+        // }
+        this.flatData.forEach((item, itemIndex) => {
+            if (!item.hasOwnProperty('items')) {
+                const ganttItem = item;
+                if (ganttItem.refs) {
+                    const y = itemIndex * lineHeight + ganttItem.refs.y + barHeight / 2;
+                    this.linkItems.push({
+                        ...ganttItem,
+                        before: {
+                            x: ganttItem.refs.x,
+                            y
+                        },
+                        after: {
+                            x: ganttItem.refs.x + ganttItem.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
-                    }
-                });
-            });
-        }
+            }
+        });
     }
     buildLinks() {
         this.computeItemPosition();
@@ -1997,17 +2405,15 @@ class GanttLinksComponent {
         this.unsubscribe$.complete();
     }
 }
-GanttLinksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: GanttDragContainer }], target: i0.ɵɵFactoryTarget.Component });
-GanttLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { groups: "groups", items: "items" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GanttLinksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttLinksComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: GanttDragContainer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+GanttLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: { flatData: "flatData" }, outputs: { lineClick: "lineClick" }, host: { properties: { "class.gantt-links-overlay": "this.ganttLinksOverlay" } }, usesOnChanges: true, ngImport: i0, template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttLinksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gantt-links-overlay', template: "<svg [attr.width]=\"ganttUpper.view.width\" class=\"gantt-links-overlay-main\">\n  <ng-container *ngFor=\"let link of links; let i = index; trackBy: trackBy\">\n    <path\n      [attr.d]=\"link.path\"\n      fill=\"transparent\"\n      stroke-width=\"2\"\n      [attr.stroke]=\"link.color\"\n      pointer-events=\"none\"\n      [attr.style]=\"link.type === ganttLinkTypes.sf ? 'marker-start: url(#triangle' + i + ')' : 'marker-end: url(#triangle' + i + ')'\"\n    ></path>\n\n    <g>\n      <path\n        class=\"link-line\"\n        (click)=\"onLineClick($event, link)\"\n        [attr.d]=\"link.path\"\n        (mouseenter)=\"mouseEnterPath(link, i)\"\n        (mouseleave)=\"mouseLeavePath(link)\"\n        stroke=\"transparent\"\n        stroke-width=\"9\"\n        fill=\"none\"\n        cursor=\"pointer\"\n      ></path>\n    </g>\n    <defs *ngIf=\"showArrow\">\n      <marker\n        *ngIf=\"link.type === ganttLinkTypes.sf; else markerEnd\"\n        [id]=\"'triangle' + i\"\n        markerUnits=\"strokeWidth\"\n        markerWidth=\"5\"\n        markerHeight=\"4\"\n        refX=\"5\"\n        refY=\"2\"\n        orient=\"180\"\n      >\n        <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n      </marker>\n\n      <ng-template #markerEnd>\n        <marker [id]=\"'triangle' + i\" markerUnits=\"strokeWidth\" markerWidth=\"5\" markerHeight=\"4\" refX=\"5\" refY=\"2\" orient=\"auto\">\n          <path [attr.fill]=\"link.color\" [attr.stroke]=\"link.color\" d=\"M 0 0 L 5 2 L 0 4 z\" />\n        </marker>\n      </ng-template>\n    </defs>\n  </ng-container>\n  <line class=\"link-dragging-line\"></line>\n</svg>\n" }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: GanttDragContainer }]; }, propDecorators: { groups: [{
-                type: Input
-            }], items: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: GanttDragContainer }, { type: i0.NgZone }]; }, propDecorators: { flatData: [{
                 type: Input
             }], lineClick: [{
                 type: Output
@@ -2065,18 +2471,10 @@ class GanttDomService {
             .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');
-        //         // }
-        //     });
     }
     syncScroll(event) {
         const target = event.currentTarget;
+        this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
         this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
         this.sideContainer.scrollTop = target.scrollTop;
         this.mainContainer.scrollTop = target.scrollTop;
@@ -2102,8 +2500,11 @@ class GanttDomService {
         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.mainItems = this.root.getElementsByClassName('gantt-main-items')[0];
-        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
+        const mainItems = this.mainContainer.getElementsByClassName('gantt-main-items')[0];
+        const mainGroups = this.mainContainer.getElementsByClassName('gantt-main-groups')[0];
+        this.mainItems = mainItems || mainGroups;
+        this.calendarHeader = this.root.getElementsByClassName('gantt-calendar-header')[0];
+        this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-grid')[0];
         this.monitorScrollChange();
         this.disableBrowserWheelEvent();
     }
@@ -2140,6 +2541,7 @@ class GanttDomService {
         if (isNumber(left)) {
             const scrollLeft = left - this.mainContainer.clientWidth / 2;
             this.mainContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
+            this.calendarHeader.scrollLeft = this.mainContainer.scrollLeft;
             this.calendarOverlay.scrollLeft = this.mainContainer.scrollLeft;
         }
     }
@@ -2168,100 +2570,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                     }, template: "<div class=\"gantt-drag-mask\">\n  <div class=\"date-range\">\n    <span class=\"start\"></span>\n    <span class=\"end\"></span>\n  </div>\n</div>\n" }]
         }] });
 
-class GanttPrintService {
-    constructor() { }
-    setInlineStyles(targetElem) {
-        const svgElements = Array.from(targetElem.getElementsByTagName('svg'));
-        for (const svgElement of svgElements) {
-            this.recursElementChildren(svgElement);
-        }
+class GanttCalendarHeaderComponent {
+    get view() {
+        return this.ganttUpper.view;
     }
-    recursElementChildren(node) {
-        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);
-        }
+    constructor(ganttUpper, ngZone, elementRef) {
+        this.ganttUpper = ganttUpper;
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.unsubscribe$ = new Subject();
+        this.headerHeight = headerHeight;
+        this.viewTypes = GanttViewType;
+        this.className = `gantt-calendar gantt-calendar-header`;
     }
-    register(root) {
-        this.root = root.nativeElement;
-        this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                if (this.ganttUpper.viewType === GanttViewType.day)
+                    this.setTodayPoint();
+            });
+        });
     }
-    async print(name = 'download', ignoreElementClass) {
-        const root = this.root;
-        const mainContainer = this.mainContainer;
-        // set print width
-        const printWidth = root.offsetWidth;
-        // set print height
-        const printHeight = root.offsetHeight - mainContainer.offsetHeight + mainContainer.scrollHeight;
-        const html2canvas = (await import(/* webpackChunkName: 'html2canvas' */ 'html2canvas')).default;
-        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) => {
-                const ganttClass = root.className;
-                const cloneGanttDom = cloneDocument.querySelector(`.${ganttClass.replace(/\s+/g, '.')}`);
-                const cloneGanttContainerDom = cloneDocument.querySelector('.gantt-container');
-                const cloneCalendarOverlay = cloneDocument.querySelector('.gantt-calendar-overlay-main');
-                const cloneLinksOverlay = cloneDocument.querySelector('.gantt-links-overlay-main');
-                // 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);
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const today = new GanttDate().getDate();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
+        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
+        if (isNumber(x)) {
+            if (rect) {
+                rect.style.left = `${x - todayWidth / 2}px`;
+                rect.style.top = `${headerHeight - todayHeight}px`;
+                rect.innerHTML = today.toString();
             }
-        }).then((canvas) => {
-            const link = document.createElement('a');
-            const dataUrl = canvas.toDataURL('image/png');
-            link.download = `${name}.png`;
-            link.href = dataUrl;
-            link.click();
-        });
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
+    }
+    trackBy(point, index) {
+        return point.text || index;
     }
 }
-GanttPrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GanttPrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttPrintService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttPrintService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
+GanttCalendarHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarHeaderComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttCalendarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-calendar-header', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n</svg>\n" }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 const mainHeight = 5000;
-class GanttCalendarComponent {
+class GanttCalendarGridComponent {
     get view() {
         return this.ganttUpper.view;
     }
@@ -2269,30 +2635,21 @@ class GanttCalendarComponent {
         this.ganttUpper = ganttUpper;
         this.ngZone = ngZone;
         this.elementRef = elementRef;
+        this.unsubscribe$ = new Subject();
         this.headerHeight = headerHeight;
         this.mainHeight = mainHeight;
-        this.todayHeight = todayHeight;
-        this.todayWidth = todayWidth;
         this.todayBorderRadius = todayBorderRadius;
         this.viewTypes = GanttViewType;
-        this.className = true;
-        this.unsubscribe$ = new Subject();
+        this.className = `gantt-calendar gantt-calendar-grid`;
     }
     setTodayPoint() {
         const x = this.view.getTodayXPoint();
-        const today = new GanttDate().getDate();
         const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0];
         const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
         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.top = `0px`;
                 line.style.bottom = `${-mainHeight}px`;
             }
         }
@@ -2301,22 +2658,15 @@ class GanttCalendarComponent {
         }
     }
     ngOnInit() {
-        // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
-        // the `onStable` will never emit any value.
-        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
-        // Normally this isn't in the zone, but it can cause performance regressions for apps
-        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
-        this.ngZone.runOutsideAngular(() => {
-            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                    .pipe(takeUntil(this.unsubscribe$))
-                    .subscribe(() => {
-                    this.setTodayPoint();
-                });
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                this.setTodayPoint();
             });
         });
     }
-    trackBy(index, point) {
+    trackBy(point, index) {
         return point.text || index;
     }
     ngOnDestroy() {
@@ -2324,17 +2674,17 @@ class GanttCalendarComponent {
         this.unsubscribe$.complete();
     }
 }
-GanttCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarComponent, decorators: [{
+GanttCalendarGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarGridComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GanttCalendarGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttCalendarGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-calendar-overlay', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
+            args: [{ selector: 'gantt-calendar-grid', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
                 }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.gantt-calendar-overlay']
+                args: ['class']
             }] } });
 
 class NgxGanttToolbarComponent {
@@ -2393,7 +2743,7 @@ class NgxGanttRootComponent {
                 this.setupViewScroll();
                 // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
                 this.elementRef.nativeElement.style.opacity = '1';
-                this.ganttUpper.viewChange.pipe(startWith(null), takeUntil(this.unsubscribe$)).subscribe(() => {
+                this.ganttUpper.viewChange.pipe(startWith$1(null), takeUntil(this.unsubscribe$)).subscribe(() => {
                     this.scrollToToday();
                 });
             });
@@ -2462,12 +2812,12 @@ class NgxGanttRootComponent {
     }
 }
 NgxGanttRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttRootComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: GanttDomService }, { token: GanttDragContainer }, { token: GANTT_UPPER_TOKEN }, { token: GanttPrintService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\">\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\">\n  <gantt-calendar-overlay></gantt-calendar-overlay>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttCalendarComponent, selector: "gantt-calendar-overlay" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }] });
+NgxGanttRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: { sideWidth: "sideWidth" }, host: { classAttribute: "gantt" }, providers: [GanttDomService, GanttDragContainer], queries: [{ propertyName: "sideTemplate", first: true, predicate: ["sideTemplate"], descendants: true, static: true }, { propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "backdrop", first: true, predicate: GanttDragBackdropComponent, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"gantt-side\" *ngIf=\"sideTemplate\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\" cdkScrollable>\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\" *ngIf=\"mainTemplate\">\n  <gantt-calendar-header></gantt-calendar-header>\n  <gantt-calendar-grid></gantt-calendar-grid>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<ng-content></ng-content>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: ["template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttRootComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt-root', providers: [GanttDomService, GanttDragContainer], host: {
                         class: 'gantt'
-                    }, template: "<div class=\"gantt-side\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\">\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\">\n  <gantt-calendar-overlay></gantt-calendar-overlay>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n" }]
+                    }, template: "<div class=\"gantt-side\" *ngIf=\"sideTemplate\" [style.width.px]=\"sideWidth\">\n  <div class=\"gantt-side-container\" cdkScrollable>\n    <ng-template [ngTemplateOutlet]=\"sideTemplate\"></ng-template>\n  </div>\n</div>\n<div class=\"gantt-container\" *ngIf=\"mainTemplate\">\n  <gantt-calendar-header></gantt-calendar-header>\n  <gantt-calendar-grid></gantt-calendar-grid>\n  <gantt-drag-backdrop></gantt-drag-backdrop>\n  <div class=\"gantt-main\">\n    <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n  </div>\n</div>\n<ng-content></ng-content>\n<gantt-toolbar *ngIf=\"ganttUpper.showToolbar || ganttUpper.toolbarTemplate\" [template]=\"ganttUpper.toolbarTemplate\"> </gantt-toolbar>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: GanttDomService }, { type: GanttDragContainer }, { type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -2487,6 +2837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
             }] } });
 
 const dragMinWidth = 10;
+const autoScrollStep = 10;
 const activeClass = 'gantt-bar-active';
 const dropActiveClass = 'gantt-bar-drop-active';
 const singleDropActiveClass = 'gantt-bar-single-drop-active';
@@ -2509,6 +2860,16 @@ class GanttBarDrag {
         this.root = root;
         this.dragRefs = [];
         this.destroy$ = new Subject();
+        // scrolling state when drag
+        this.dragScrolling = false;
+    }
+    createDragRef(element) {
+        const dragRef = this.dragDrop.createDrag(element);
+        // dragRef.withPreviewContainer(this.dom.mainContainer as HTMLElement);
+        return dragRef;
+    }
+    createDragScrollEvent(dragRef) {
+        return fromEvent(this.dom.mainContainer, 'scroll', passiveListenerOptions).pipe(takeUntil(dragRef.ended));
     }
     createMouseEvents() {
         const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
@@ -2544,33 +2905,38 @@ class GanttBarDrag {
         });
     }
     createBarDrag() {
-        const dragRef = this.dragDrop.createDrag(this.barElement);
+        const dragRef = this.createDragRef(this.barElement);
         dragRef.lockAxis = 'x';
         dragRef.withBoundaryElement(this.dom.mainItems);
         dragRef.started.subscribe(() => {
             this.setDraggingStyles();
+            this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
+            this.createDragScrollEvent(dragRef).subscribe(() => {
+                if (this.dropListRef.isDragging()) {
+                    this.dragScrolling = true;
+                    const scrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
+                    this.barDragMove(dragRef, scrollDistance + this.barDragMoveDistance);
+                }
+            });
             this.dragContainer.dragStarted.emit({ item: this.item.origin });
         });
         dragRef.moved.subscribe((event) => {
-            const currentX = this.item.refs.x + event.distance.x;
-            const currentDate = this.ganttUpper.view.getDateByXPoint(currentX);
-            const currentStartX = this.ganttUpper.view.getXPointByDate(currentDate);
-            const dayWidth = this.ganttUpper.view.getDayOccupancyWidth(currentDate);
-            const diffDays = differenceInCalendarDays(this.item.end.value, this.item.start.value);
-            let start = currentDate;
-            let end = currentDate.addDays(diffDays);
-            if (currentX > currentStartX + dayWidth / 2) {
-                start = start.addDays(1);
-                end = end.addDays(1);
+            this.barDragMove(dragRef, event.distance.x);
+            if (!this.dragScrolling) {
+                this.barDragMoveDistance = event.distance.x;
             }
-            this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width));
-            this.item.updateDate(start, end);
-            this.dragContainer.dragMoved.emit({ item: this.item.origin });
         });
         dragRef.ended.subscribe((event) => {
+            this.item.updateRefs({
+                width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
+                x: this.ganttUpper.view.getXPointByDate(this.item.start),
+                y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
+            });
             this.clearDraggingStyles();
             this.closeDragBackdrop();
             event.source.reset();
+            this.dragScrolling = false;
+            this.barDragMoveDistance = 0;
             this.dragContainer.dragEnded.emit({ item: this.item.origin });
         });
         this.barDragRef = dragRef;
@@ -2581,36 +2947,26 @@ class GanttBarDrag {
         const handles = this.barElement.querySelectorAll('.drag-handles .handle');
         handles.forEach((handle, index) => {
             const isBefore = index === 0;
-            const dragRef = this.dragDrop.createDrag(handle);
+            const dragRef = this.createDragRef(handle);
             dragRef.lockAxis = 'x';
             dragRef.withBoundaryElement(this.dom.mainItems);
             dragRef.started.subscribe(() => {
                 this.setDraggingStyles();
+                this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
+                this.createDragScrollEvent(dragRef).subscribe(() => {
+                    if (this.dropListRef.isDragging()) {
+                        this.dragScrolling = true;
+                        const scrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
+                        this.barHandleDragMove(scrollDistance + this.barHandleDragMoveDistance, isBefore);
+                    }
+                });
                 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;
-                    const start = this.ganttUpper.view.getDateByXPoint(x);
-                    if (width > dragMinWidth) {
-                        this.barElement.style.width = width + 'px';
-                        this.barElement.style.left = x + 'px';
-                        this.openDragBackdrop(this.barElement, start, this.item.end);
-                        this.item.updateDate(start, this.item.end);
-                    }
-                }
-                else {
-                    const width = this.item.refs.width + event.distance.x;
-                    const end = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width);
-                    if (width > dragMinWidth) {
-                        this.barElement.style.width = width + 'px';
-                        this.openDragBackdrop(this.barElement, this.item.start, end);
-                        this.item.updateDate(this.item.start, end);
-                    }
+                this.barHandleDragMove(event.distance.x, isBefore);
+                if (!this.dragScrolling) {
+                    this.barHandleDragMoveDistance = event.distance.x;
                 }
-                this.dragContainer.dragMoved.emit({ item: this.item.origin });
-                event.source.reset();
             });
             dragRef.ended.subscribe((event) => {
                 if (isBefore) {
@@ -2625,8 +2981,16 @@ class GanttBarDrag {
                         this.item.updateDate(this.item.start, this.item.start.endOfDay());
                     }
                 }
+                this.item.updateRefs({
+                    width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
+                    x: this.ganttUpper.view.getXPointByDate(this.item.start),
+                    y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
+                });
                 this.clearDraggingStyles();
                 this.closeDragBackdrop();
+                event.source.reset();
+                this.dragScrolling = false;
+                this.barHandleDragMoveDistance = 0;
                 this.dragContainer.dragEnded.emit({ item: this.item.origin });
             });
             dragRefs.push(dragRef);
@@ -2687,8 +3051,10 @@ class GanttBarDrag {
         return dragRefs;
     }
     openDragBackdrop(dragElement, start, end) {
-        const dragBackdropElement = this.root.backdrop.nativeElement;
-        const dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask');
+        // const dragBackdropElement = this.root.backdrop.nativeElement;
+        // const dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask') as HTMLElement;
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
         const rootRect = this.dom.root.getBoundingClientRect();
         const dragRect = dragElement.getBoundingClientRect();
         const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
@@ -2703,8 +3069,8 @@ class GanttBarDrag {
         dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
     }
     closeDragBackdrop() {
-        const dragBackdropElement = this.root.backdrop.nativeElement;
-        const dragMaskElement = dragBackdropElement.querySelector('.gantt-drag-mask');
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop');
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
         dragMaskElement.style.display = 'none';
         dragBackdropElement.style.display = 'none';
     }
@@ -2716,6 +3082,45 @@ class GanttBarDrag {
         this.barElement.style.pointerEvents = '';
         this.barElement.classList.remove('gantt-bar-draggable-drag');
     }
+    barDragMove(dragRef, distance) {
+        const currentX = this.item.refs.x + distance;
+        const currentDate = this.ganttUpper.view.getDateByXPoint(currentX);
+        const currentStartX = this.ganttUpper.view.getXPointByDate(currentDate);
+        const dayWidth = this.ganttUpper.view.getDayOccupancyWidth(currentDate);
+        const diffDays = differenceInCalendarDays(this.item.end.value, this.item.start.value);
+        let start = currentDate;
+        let end = currentDate.addDays(diffDays);
+        if (currentX > currentStartX + dayWidth / 2) {
+            start = start.addDays(1);
+            end = end.addDays(1);
+        }
+        this.openDragBackdrop(dragRef['_preview'], this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width));
+        this.item.updateDate(start, end);
+        this.dragContainer.dragMoved.emit({ item: this.item.origin });
+    }
+    barHandleDragMove(distance, isBefore) {
+        if (isBefore) {
+            const x = this.item.refs.x + distance;
+            const width = this.item.refs.width + distance * -1;
+            const start = this.ganttUpper.view.getDateByXPoint(x);
+            if (width > dragMinWidth) {
+                this.barElement.style.width = width + 'px';
+                this.barElement.style.left = x + 'px';
+                this.openDragBackdrop(this.barElement, start, this.item.end);
+                this.item.updateDate(start, this.item.end);
+            }
+        }
+        else {
+            const width = this.item.refs.width + distance;
+            const end = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width);
+            if (width > dragMinWidth) {
+                this.barElement.style.width = width + 'px';
+                this.openDragBackdrop(this.barElement, this.item.start, end);
+                this.item.updateDate(this.item.start, end);
+            }
+        }
+        this.dragContainer.dragMoved.emit({ item: this.item.origin });
+    }
     calcLinkLinePositions(target, isBefore) {
         const rootRect = this.dom.root.getBoundingClientRect();
         const targetRect = target.getBoundingClientRect();
@@ -2747,7 +3152,6 @@ class GanttBarDrag {
         this.item = item;
         this.barElement = elementRef.nativeElement;
         this.ganttUpper = ganttUpper;
-        // if (!item.draggable || (this.dragDisabled && this.linkDragDisabled)) {
         if (this.dragDisabled && this.linkDragDisabled) {
             return;
         }
@@ -2757,6 +3161,13 @@ class GanttBarDrag {
                 const dragRef = this.createBarDrag();
                 const dragHandlesRefs = this.createBarHandleDrags();
                 this.dragRefs.push(dragRef, ...dragHandlesRefs);
+                // 创建拖拽容器并将所有元素添加到容器中，利用容器来实现自动滚动
+                if (!this.dropListRef) {
+                    this.dropListRef = this.dragDrop.createDropList(this.dom.mainContainer);
+                    this.dropListRef.autoScrollStep = autoScrollStep;
+                    this.dropListRef.withOrientation('horizontal');
+                }
+                this.dropListRef.withItems([dragRef, ...dragHandlesRefs]);
             }
             if (!this.linkDragDisabled) {
                 const linkDragRefs = this.createLinkHandleDrags();
@@ -2764,6 +3175,9 @@ class GanttBarDrag {
             }
         }
     }
+    updateItem(item) {
+        this.item = item;
+    }
     ngOnDestroy() {
         this.closeDragBackdrop();
         this.dragRefs.forEach((dragRef) => dragRef.dispose());
@@ -2771,11 +3185,11 @@ class GanttBarDrag {
         this.destroy$.complete();
     }
 }
-GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag, deps: [{ token: i1$1.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: NgxGanttRootComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
+GanttBarDrag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag, deps: [{ token: i2.DragDrop }, { token: GanttDomService }, { token: GanttDragContainer }, { token: NgxGanttRootComponent, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
 GanttBarDrag.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttBarDrag, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: NgxGanttRootComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: NgxGanttRootComponent, decorators: [{
                     type: SkipSelf
                 }] }]; } });
 
@@ -2792,16 +3206,25 @@ class GanttItemUpper {
             this.setPositions();
         });
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         if (!this.firstChange) {
-            this.setPositions();
+            this.itemChange(changes.item.currentValue);
         }
     }
+    itemChange(item) {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+        this.item = item;
+        this.setPositions();
+        this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.setPositions();
+        });
+    }
     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';
+        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';
         }
@@ -2846,6 +3269,12 @@ class NgxGanttBarComponent extends GanttItemUpper {
             this.setContentBackground();
         });
     }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (!this.firstChange) {
+            this.drag.updateItem(this.item);
+        }
+    }
     ngAfterViewInit() {
         // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
         // the `onStable` will never emit any value.
@@ -2859,7 +3288,7 @@ class NgxGanttBarComponent extends GanttItemUpper {
         });
         this.setContentBackground();
         this.handles.changes
-            .pipe(startWith(this.handles), switchMap(() => 
+            .pipe(startWith$1(this.handles), switchMap(() => 
         // Note: we need to explicitly subscribe outside of the Angular zone since `addEventListener`
         // is called when the `fromEvent` is subscribed.
         new Observable((subscriber) => this.ngZone.runOutsideAngular(() => merge(...this.handles.toArray().map((handle) => fromEvent(handle.nativeElement, 'mousedown'))).subscribe(subscriber)))), takeUntil(this.unsubscribe$))
@@ -2903,7 +3332,7 @@ class NgxGanttBarComponent extends GanttItemUpper {
     }
 }
 NgxGanttBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBarComponent, deps: [{ token: GanttDragContainer }, { token: GanttBarDrag }, { token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+NgxGanttBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: { barClick: "barClick" }, host: { properties: { "class.gantt-bar": "this.ganttItemClass" } }, providers: [GanttBarDrag], viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true }, { propertyName: "handles", predicate: ["handle"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt-bar,gantt-bar', providers: [GanttBarDrag], template: "<div class=\"gantt-bar-layer\">\n  <div class=\"drag-handles\">\n    <ng-container *ngIf=\"item.draggable && ganttUpper.draggable\">\n      <span class=\"handle\" #handle></span>\n      <span class=\"handle\" #handle></span>\n    </ng-container>\n  </div>\n  <div *ngIf=\"item.linkable && ganttUpper.linkable\" class=\"link-handles\">\n    <span class=\"handle\"><span class=\"point\"></span></span>\n    <span class=\"handle\"> <span class=\"point\"></span></span>\n  </div>\n</div>\n<div class=\"gantt-bar-border\"></div>\n<div #content class=\"gantt-bar-content\" (click)=\"onBarClick($event)\">\n  <div class=\"gantt-bar-content-progress\" *ngIf=\"item.progress >= 0\" [style.width.%]=\"item.progress * 100\"></div>\n  <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item.origin, refs: item.refs }\"></ng-template>\n</div>\n" }]
@@ -2988,16 +3417,16 @@ class GanttMainComponent {
     }
 }
 GanttMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttMainComponent, selector: "gantt-main", inputs: { groups: "groups", items: "items", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<!-- groups -->\n<div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div>\n\n<!-- items -->\n<ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["groups", "items"], outputs: ["lineClick"] }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] });
+GanttMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttMainComponent, selector: "gantt-main", inputs: { renderData: "renderData", flatData: "flatData", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<!-- <gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay> -->\n<!-- groups -->\n<!-- <div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div> -->\n\n<!-- items -->\n<!-- <ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template> -->\n\n<gantt-links-overlay [flatData]=\"flatData\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of renderData; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatData"], outputs: ["lineClick"] }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-main', template: "<gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<!-- groups -->\n<div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div>\n\n<!-- items -->\n<ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'gantt-main', template: "<!-- <gantt-links-overlay [groups]=\"groups\" [items]=\"items\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay> -->\n<!-- groups -->\n<!-- <div class=\"gantt-main-groups\" *ngIf=\"groups && groups.length > 0; else itemsTemplate\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let group of groups; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"group.class\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: group }\"></ng-template>\n    </div>\n    <div *ngIf=\"group.expanded\" class=\"gantt-items\">\n      <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: group.items }\"></ng-template>\n    </div>\n  </ng-container>\n</div> -->\n\n<!-- items -->\n<!-- <ng-template #itemsTemplate>\n  <div class=\"gantt-main-items\" [style.width.px]=\"ganttUpper.view.width\">\n    <ng-template [ngTemplateOutlet]=\"ganttItems\" [ngTemplateOutletContext]=\"{ items: items }\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #ganttItems let-items=\"items\">\n  <ng-container *ngFor=\"let item of items\">\n    <div\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(item.id)\"\n    >\n      <ng-container *ngIf=\"item.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: item.origin,\n            refs: item.refs,\n            baseline: ganttUpper.baselineItemsMap[item.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[item.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(item.type | isGanttRangeItem) || (item.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"item.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"item\"></gantt-range>\n        <gantt-bar *ngIf=\"item.type | isGanttBarItem\" [item]=\"item\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[item.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[item.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n    <ng-template\n      *ngIf=\"item.children && item.expanded\"\n      [ngTemplateOutlet]=\"ganttItems\"\n      [ngTemplateOutletContext]=\"{ items: item.children }\"\n    ></ng-template>\n  </ng-container>\n</ng-template> -->\n\n<gantt-links-overlay [flatData]=\"flatData\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n  <ng-container *ngFor=\"let data of renderData; trackBy: trackBy\">\n    <div class=\"gantt-group\" [ngClass]=\"data.class\" *ngIf=\"data.items\">\n      <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n    </div>\n    <div\n      *ngIf=\"!data.items\"\n      class=\"gantt-item\"\n      [style.height.px]=\"ganttUpper.styles.lineHeight\"\n      [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n    >\n      <ng-container *ngIf=\"data.type | isGanttCustomItem\">\n        <ng-template\n          [ngTemplateOutlet]=\"itemTemplate\"\n          [ngTemplateOutletContext]=\"{\n            item: data.origin,\n            refs: data.refs,\n            baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n            baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n          }\"\n        >\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngIf=\"(data.type | isGanttRangeItem) || (data.type | isGanttBarItem)\">\n        <gantt-range *ngIf=\"data.type | isGanttRangeItem\" [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n        <gantt-bar *ngIf=\"data.type | isGanttBarItem\" [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n        <gantt-baseline *ngIf=\"ganttUpper.baselineItemsMap[data.id]\" [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\"></gantt-baseline>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
-                }] }]; }, propDecorators: { groups: [{
+                }] }]; }, propDecorators: { renderData: [{
                 type: Input
-            }], items: [{
+            }], flatData: [{
                 type: Input
             }], groupHeaderTemplate: [{
                 type: Input
@@ -3016,19 +3445,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 args: ['class.gantt-main-container']
             }] } });
 
+class GanttLoaderComponent {
+}
+GanttLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttLoaderComponent, selector: "gantt-loader", host: { classAttribute: "gantt-loader gantt-loader-overlay" }, ngImport: i0, template: `
+        <div class="gantt-loader-wrapper">
+            <div class="gantt-loader-loading">
+                <span class="gantt-loader-loading-spot"></span>
+            </div>
+        </div>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gantt-loader',
+                    template: `
+        <div class="gantt-loader-wrapper">
+            <div class="gantt-loader-loading">
+                <span class="gantt-loader-loading-spot"></span>
+            </div>
+        </div>
+    `,
+                    host: {
+                        class: 'gantt-loader gantt-loader-overlay'
+                    }
+                }]
+        }] });
+
 class NgxGanttComponent extends GanttUpper {
-    constructor(elementRef, cdr, ngZone, config) {
+    set loading(loading) {
+        if (loading) {
+            if (this.loadingDelay > 0) {
+                this.loadingTimer = setTimeout(() => {
+                    this._loading = loading;
+                    this.cdr.markForCheck();
+                }, this.loadingDelay);
+            }
+            else {
+                this._loading = loading;
+            }
+        }
+        else {
+            clearTimeout(this.loadingTimer);
+            this._loading = loading;
+        }
+    }
+    get loading() {
+        return this._loading;
+    }
+    constructor(elementRef, cdr, ngZone, printService, config) {
         super(elementRef, cdr, ngZone, config);
+        this.printService = printService;
         this.maxLevel = 2;
+        this.loadingDelay = 0;
         this.linkDragStarted = new EventEmitter();
         this.linkDragEnded = new EventEmitter();
         this.lineClick = new EventEmitter();
         this.selectedChange = new EventEmitter();
-        this.ngUnsubscribe$ = new Subject();
-        this.sideTableWidth = sideWidth;
+        this.flatData = [];
+        this.renderData = [];
+        this._loading = false;
+        this.computeAllRefs = false;
     }
     ngOnInit() {
         super.ngOnInit();
+        this.buildVirtualFlatData();
         // Note: the zone may be nooped through `BootstrapOptions` when bootstrapping the root module. This means
         // the `onStable` will never emit any value.
         const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
@@ -3036,24 +3517,84 @@ class NgxGanttComponent extends GanttUpper {
         // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
         this.ngZone.runOutsideAngular(() => {
             onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                this.dragContainer.linkDragStarted.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
+                // this.dragContainer.dragEnded.subscribe((event) => {
+                //     this.computeTempDataRefs();
+                // });
+                this.dragContainer.linkDragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                     this.linkDragStarted.emit(event);
                 });
-                this.dragContainer.linkDragEnded.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((event) => {
+                this.dragContainer.linkDragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                     this.linkDragEnded.emit(event);
                 });
             });
         });
+        this.view.start$.pipe(skip(1), takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.computeTempDataRefs();
+        });
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (!this.firstChange) {
+            if (changes.viewType && changes.viewType.currentValue) {
+                this.renderData = this.flatData.slice(this.rangeStart, this.rangeEnd);
+                this.computeTempDataRefs();
+            }
+            if (changes.originItems || changes.originGroups) {
+                this.buildVirtualFlatData();
+                this.renderData = this.flatData.slice(this.rangeStart, this.rangeEnd);
+                this.computeTempDataRefs();
+            }
+        }
     }
     ngAfterViewInit() {
-        this.columns.changes.pipe(startWith(true), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
-            this.columns.forEach((column) => {
-                if (!column.columnWidth) {
-                    column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
+        this.virtualScroll.renderedRangeStream.pipe(takeUntil(this.unsubscribe$)).subscribe((range) => {
+            const linksElement = this.elementRef.nativeElement.querySelector('.gantt-links-overlay');
+            linksElement.style.top = `${-(this.styles.lineHeight * range.start)}px`;
+            this.rangeStart = range.start;
+            this.rangeEnd = range.end;
+            this.renderData = this.flatData.slice(range.start, range.end);
+            this.computeTempDataRefs();
+        });
+    }
+    buildVirtualFlatData() {
+        const virtualData = [];
+        if (this.groups.length) {
+            this.groups.forEach((group) => {
+                virtualData.push(group);
+                if (group.expanded) {
+                    const items = recursiveItems(group.items);
+                    virtualData.push(...items);
                 }
             });
-            this.cdr.detectChanges();
+        }
+        if (this.items.length) {
+            virtualData.push(...recursiveItems(this.items));
+        }
+        this.flatData = [...virtualData];
+        this.flatDataMap = keyBy(this.flatData, 'id');
+    }
+    afterExpand() {
+        this.buildVirtualFlatData();
+        this.renderData = this.flatData.slice(this.rangeStart, this.rangeEnd);
+    }
+    computeTempDataRefs() {
+        const tempItemData = [];
+        this.renderData.forEach((data) => {
+            if (!data.hasOwnProperty('items')) {
+                const item = data;
+                if (item.links) {
+                    item.links.forEach((link) => {
+                        if (this.flatDataMap[link.link]) {
+                            tempItemData.push(this.flatDataMap[link.link]);
+                        }
+                    });
+                }
+                tempItemData.push(data);
+            }
         });
+        this.computeItemsRefs(...uniqBy(tempItemData, 'id'));
+        this.flatData = [...this.flatData];
+        this.renderData = [...this.renderData];
     }
     expandChildren(item) {
         if (!item.expanded) {
@@ -3063,6 +3604,7 @@ class NgxGanttComponent extends GanttUpper {
                 this.childrenResolve(item.origin)
                     .pipe(take(1), finalize(() => {
                     item.loading = false;
+                    this.afterExpand();
                     this.expandChange.emit(item);
                     this.cdr.detectChanges();
                 }))
@@ -3073,11 +3615,13 @@ class NgxGanttComponent extends GanttUpper {
             }
             else {
                 this.computeItemsRefs(...item.children);
+                this.afterExpand();
                 this.expandChange.emit(item);
             }
         }
         else {
             item.setExpand(false);
+            this.afterExpand();
             this.expandChange.emit(item);
         }
     }
@@ -3103,9 +3647,23 @@ class NgxGanttComponent extends GanttUpper {
     scrollToDate(date) {
         this.ganttRoot.scrollToDate(date);
     }
+    expandGroups(expanded) {
+        this.groups.forEach((group) => {
+            group.setExpand(expanded);
+        });
+        this.afterExpand();
+        this.expandChange.next(null);
+        this.cdr.detectChanges();
+    }
+    expandGroup(group) {
+        group.setExpand(!group.expanded);
+        this.afterExpand();
+        this.expandChange.emit();
+        this.cdr.detectChanges();
+    }
 }
-NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
+NgxGanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GanttPrintService, optional: true }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttComponent, selector: "ngx-gantt", inputs: { maxLevel: "maxLevel", async: "async", childrenResolve: "childrenResolve", linkable: "linkable", loading: "loading", loadingDelay: "loadingDelay" }, outputs: { linkDragStarted: "linkDragStarted", linkDragEnded: "linkDragEnded", lineClick: "lineClick", selectedChange: "selectedChange" }, providers: [
         {
             provide: GANTT_UPPER_TOKEN,
             useExisting: NgxGanttComponent
@@ -3114,7 +3672,7 @@ NgxGanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             provide: GANTT_ABSTRACT_TOKEN,
             useExisting: forwardRef(() => NgxGanttComponent)
         }
-    ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <ng-template #sideTemplate>\n    <gantt-table\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [columns]=\"columns\"\n      [groupTemplate]=\"groupTemplate\"\n      [emptyTemplate]=\"tableEmptyTemplate\"\n      [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n      [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n      (itemClick)=\"selectItem($event)\"\n    ></gantt-table>\n  </ng-template>\n  <ng-template #mainTemplate>\n    <gantt-main\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [groupHeaderTemplate]=\"groupHeaderTemplate\"\n      [itemTemplate]=\"itemTemplate\"\n      [barTemplate]=\"barTemplate\"\n      [rangeTemplate]=\"rangeTemplate\"\n      (barClick)=\"barClick.emit($event)\"\n      (lineClick)=\"lineClick.emit($event)\"\n    >\n    </gantt-main>\n  </ng-template>\n</ngx-gantt-root>\n", dependencies: [{ kind: "component", type: GanttTableComponent, selector: "gantt-table", inputs: ["groups", "items", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate"], outputs: ["itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["groups", "items", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatData; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatData]=\"flatData\"\n            [renderData]=\"renderData\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          ></gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatData]=\"flatData\"\n          [renderData]=\"renderData\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n</ngx-gantt-root>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["renderData", "flatData", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "itemClick"] }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["renderData", "flatData", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-gantt', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -3126,8 +3684,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                             provide: GANTT_ABSTRACT_TOKEN,
                             useExisting: forwardRef(() => NgxGanttComponent)
                         }
-                    ], template: "<ngx-gantt-root #ganttRoot>\n  <ng-template #sideTemplate>\n    <gantt-table\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [columns]=\"columns\"\n      [groupTemplate]=\"groupTemplate\"\n      [emptyTemplate]=\"tableEmptyTemplate\"\n      [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n      [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n      (itemClick)=\"selectItem($event)\"\n    ></gantt-table>\n  </ng-template>\n  <ng-template #mainTemplate>\n    <gantt-main\n      [groups]=\"groups\"\n      [items]=\"items\"\n      [groupHeaderTemplate]=\"groupHeaderTemplate\"\n      [itemTemplate]=\"itemTemplate\"\n      [barTemplate]=\"barTemplate\"\n      [rangeTemplate]=\"rangeTemplate\"\n      (barClick)=\"barClick.emit($event)\"\n      (lineClick)=\"lineClick.emit($event)\"\n    >\n    </gantt-main>\n  </ng-template>\n</ngx-gantt-root>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    ], template: "<ngx-gantt-root #ganttRoot>\n  <div class=\"gantt-header\">\n    <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n    <div class=\"gantt-container-header\">\n      <gantt-calendar-header></gantt-calendar-header>\n    </div>\n  </div>\n  <gantt-loader *ngIf=\"loading\"></gantt-loader>\n  <cdk-virtual-scroll-viewport\n    class=\"gantt-virtual-scroll-viewport\"\n    [itemSize]=\"styles.lineHeight\"\n    [minBufferPx]=\"styles.lineHeight * 10\"\n    [maxBufferPx]=\"styles.lineHeight * 20\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of flatData; trackBy: trackBy\"></ng-container>\n    <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n      <div class=\"gantt-side-container\">\n        <div class=\"gantt-table\">\n          <gantt-table-body\n            [flatData]=\"flatData\"\n            [renderData]=\"renderData\"\n            [columns]=\"columns\"\n            [groupTemplate]=\"groupTemplate\"\n            [emptyTemplate]=\"tableEmptyTemplate\"\n            [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n            [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n            [draggable]=\"table.draggable\"\n            [dropEnterPredicate]=\"table.dropEnterPredicate\"\n            (dragDropped)=\"table.dragDropped.emit($event)\"\n            (itemClick)=\"selectItem($event)\"\n          ></gantt-table-body>\n        </div>\n      </div>\n    </div>\n    <div class=\"gantt-container\">\n      <gantt-calendar-grid></gantt-calendar-grid>\n      <div class=\"gantt-main\">\n        <gantt-main\n          [flatData]=\"flatData\"\n          [renderData]=\"renderData\"\n          [groupHeaderTemplate]=\"groupHeaderTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [barTemplate]=\"barTemplate\"\n          [rangeTemplate]=\"rangeTemplate\"\n          (barClick)=\"barClick.emit($event)\"\n          (lineClick)=\"lineClick.emit($event)\"\n        >\n        </gantt-main>\n      </div>\n    </div>\n  </cdk-virtual-scroll-viewport>\n  <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n</ngx-gantt-root>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: GanttPrintService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [GANTT_GLOBAL_CONFIG]
                 }] }]; }, propDecorators: { maxLevel: [{
@@ -3138,6 +3698,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], linkable: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], loadingDelay: [{
+                type: Input
             }], linkDragStarted: [{
                 type: Output
             }], linkDragEnded: [{
@@ -3158,6 +3722,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
             }], ganttRoot: [{
                 type: ViewChild,
                 args: ['ganttRoot']
+            }], virtualScroll: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
             }] } });
 
 class NgxGanttModule {
@@ -3166,10 +3733,15 @@ NgxGanttModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttModule, declarations: [NgxGanttComponent,
         NgxGanttTableComponent,
         NgxGanttTableColumnComponent,
-        GanttTableComponent,
+        // GanttTableComponent,
+        GanttTableHeaderComponent,
+        GanttTableBodyComponent,
         GanttMainComponent,
-        GanttCalendarComponent,
+        // GanttCalendarComponent,
+        GanttCalendarHeaderComponent,
+        GanttCalendarGridComponent,
         GanttLinksComponent,
+        GanttLoaderComponent,
         NgxGanttBarComponent,
         GanttIconComponent,
         GanttDragBackdropComponent,
@@ -3179,7 +3751,7 @@ NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         NgxGanttToolbarComponent,
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
-        IsGanttCustomItemPipe], imports: [CommonModule, DragDropModule], exports: [NgxGanttComponent,
+        IsGanttCustomItemPipe], imports: [CommonModule, DragDropModule, ScrollingModule], exports: [NgxGanttComponent,
         NgxGanttTableComponent,
         NgxGanttTableColumnComponent,
         NgxGanttRootComponent,
@@ -3188,15 +3760,16 @@ NgxGanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         NgxGanttBaselineComponent,
         NgxGanttToolbarComponent] });
 NgxGanttModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttModule, providers: [
+        CdkVirtualScrollViewport,
         {
             provide: GANTT_GLOBAL_CONFIG,
             useValue: defaultConfig
         }
-    ], imports: [CommonModule, DragDropModule] });
+    ], imports: [CommonModule, DragDropModule, ScrollingModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, DragDropModule],
+                    imports: [CommonModule, DragDropModule, ScrollingModule],
                     exports: [
                         NgxGanttComponent,
                         NgxGanttTableComponent,
@@ -3211,10 +3784,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         NgxGanttComponent,
                         NgxGanttTableComponent,
                         NgxGanttTableColumnComponent,
-                        GanttTableComponent,
+                        // GanttTableComponent,
+                        GanttTableHeaderComponent,
+                        GanttTableBodyComponent,
                         GanttMainComponent,
-                        GanttCalendarComponent,
+                        // GanttCalendarComponent,
+                        GanttCalendarHeaderComponent,
+                        GanttCalendarGridComponent,
                         GanttLinksComponent,
+                        GanttLoaderComponent,
                         NgxGanttBarComponent,
                         GanttIconComponent,
                         GanttDragBackdropComponent,
@@ -3227,6 +3805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         IsGanttCustomItemPipe
                     ],
                     providers: [
+                        CdkVirtualScrollViewport,
                         {
                             provide: GANTT_GLOBAL_CONFIG,
                             useValue: defaultConfig
@@ -3243,5 +3822,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttPrintService, GanttSelectedEvent, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttDate, GanttDatePoint, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEnterPredicateContext, GanttTableEvent, GanttUpper, GanttView, GanttViewType, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
 //# sourceMappingURL=worktile-gantt.mjs.map