@worktile/gantt 15.1.0-next.6 → 15.1.0-next.8

package/fesm2020/worktile-gantt.mjs

@@ -1,9 +1,9 @@
 import * as i0 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 { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Component, Injectable, ViewChild, Pipe, ViewChildren, PLATFORM_ID, ElementRef, Optional, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
 import { take, takeUntil, skip, switchMap, debounceTime, map, pairwise, auditTime as auditTime$1, startWith as startWith$1, finalize } from 'rxjs/operators';
-import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, auditTime, filter, merge, EMPTY, fromEvent, Observable } from 'rxjs';
+import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, auditTime, filter, merge, EMPTY, fromEvent, Observable, interval, animationFrameScheduler } 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';
@@ -1049,16 +1049,17 @@ class GanttUpper {
         this.ngZone.runOutsideAngular(() => {
             onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
                 this.element.style.opacity = '1';
+                const disabledLoadOnScroll = this.disabledLoadOnScroll;
                 this.dragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
+                    this.disabledLoadOnScroll = true;
                     this.dragStarted.emit(event);
                 });
                 this.dragContainer.dragMoved.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
                     this.dragMoved.emit(event);
                 });
                 this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
+                    this.disabledLoadOnScroll = disabledLoadOnScroll;
                     this.dragEnded.emit(event);
-                    // this.computeRefs();
-                    // this.detectChanges();
                 });
             });
         });
@@ -1819,6 +1820,7 @@ class GanttTableBodyComponent {
             }
             else {
                 this.itemDropTarget = null;
+                this.cleanupDragArtifacts(false);
             }
         }
         else {
@@ -2472,6 +2474,41 @@ function normalizePassiveListenerOptions(options) {
 /** Options used to bind passive event listeners. */
 const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
 
+/**
+ * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
+ * viewport. The value comes from trying it out manually until it feels right.
+ */
+const SCROLL_PROXIMITY_THRESHOLD = 0.05;
+/**
+ * Gets whether the horizontal auto-scroll direction of a node.
+ * @param clientRect Dimensions of the node.
+ * @param pointerX Position of the user's pointer along the x axis.
+ */
+function getHorizontalScrollDirection(clientRect, pointerX) {
+    const { left, right, width } = clientRect;
+    const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;
+    if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) {
+        return 1 /* AutoScrollHorizontalDirection.LEFT */;
+    }
+    else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) {
+        return 2 /* AutoScrollHorizontalDirection.RIGHT */;
+    }
+    return 0 /* AutoScrollHorizontalDirection.NONE */;
+}
+/**
+ * Checks whether the pointer coordinates are close to a ClientRect.
+ * @param rect ClientRect to check against.
+ * @param threshold Threshold around the ClientRect.
+ * @param pointerX Coordinates along the X axis.
+ * @param pointerY Coordinates along the Y axis.
+ */
+function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
+    const { top, right, bottom, left, width, height } = rect;
+    const xThreshold = width * threshold;
+    const yThreshold = height * threshold;
+    return pointerY > top - yThreshold && pointerY < bottom + yThreshold && pointerX > left - xThreshold && pointerX < right + xThreshold;
+}
+
 const scrollThreshold = 50;
 var ScrollDirection;
 (function (ScrollDirection) {
@@ -2579,452 +2616,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                     args: [PLATFORM_ID]
                 }] }]; } });
 
-class GanttDragBackdropComponent {
+/**
+ * Proximity, as a ratio to width/height, at which a
+ * dragged item will affect the drop container.
+ */
+const DROP_PROXIMITY_THRESHOLD = 0.05;
+const dragMinWidth = 10;
+const autoScrollStep = 5;
+const activeClass = 'gantt-bar-active';
+const dropActiveClass = 'gantt-bar-drop-active';
+const singleDropActiveClass = 'gantt-bar-single-drop-active';
+function createSvgElement(qualifiedName, className) {
+    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
+    element.classList.add(className);
+    return element;
 }
-GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, 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" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gantt-drag-backdrop', host: {
-                        class: 'gantt-drag-backdrop'
-                    }, 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 GanttCalendarHeaderComponent {
-    get view() {
-        return this.ganttUpper.view;
+class GanttBarDrag {
+    get dragDisabled() {
+        return !this.item.draggable || !this.ganttUpper.draggable;
     }
-    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`;
+    get linkDragDisabled() {
+        return !this.item.linkable || !this.ganttUpper.linkable;
     }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
+    constructor(dragDrop, dom, dragContainer, _ngZone) {
+        this.dragDrop = dragDrop;
+        this.dom = dom;
+        this.dragContainer = dragContainer;
+        this._ngZone = _ngZone;
+        this.dragRefs = [];
+        this.destroy$ = new Subject();
+        /** Used to signal to the current auto-scroll sequence when to stop. */
+        this.stopScrollTimers$ = new Subject();
+        /** move distance when drag bar */
+        this.barDragMoveDistance = 0;
+        /** move distance when drag bar handle */
+        this.barHandleDragMoveDistance = 0;
+        /** scrolling state when drag */
+        this.dragScrolling = false;
+        /** dragScrollDistance */
+        this.dragScrollDistance = 0;
+        /** Horizontal direction in which the list is currently scrolling. */
+        this._horizontalScrollDirection = 0 /* AutoScrollHorizontalDirection.NONE */;
+        this.startScrollInterval = () => {
+            this.stopScrolling();
+            interval(0, animationFrameScheduler)
+                .pipe(takeUntil(this.stopScrollTimers$))
                 .subscribe(() => {
-                if (this.ganttUpper.viewType === GanttViewType.day)
-                    this.setTodayPoint();
+                const node = this.dom.mainContainer;
+                const scrollStep = autoScrollStep;
+                if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
+                    node.scrollBy(-scrollStep, 0);
+                }
+                else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
+                    node.scrollBy(scrollStep, 0);
+                }
             });
-        });
-    }
-    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();
-            }
-        }
-        else {
-            todayEle.style.display = 'none';
-        }
-    }
-    trackBy(point, index) {
-        return point.text || index;
+        };
     }
-}
-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 GanttCalendarGridComponent {
-    get view() {
-        return this.ganttUpper.view;
+    createDragRef(element) {
+        const dragRef = this.dragDrop.createDrag(element);
+        return dragRef;
     }
-    constructor(ganttUpper, ngZone, elementRef) {
-        this.ganttUpper = ganttUpper;
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.unsubscribe$ = new Subject();
-        this.headerHeight = headerHeight;
-        this.mainHeight = mainHeight;
-        this.todayBorderRadius = todayBorderRadius;
-        this.viewTypes = GanttViewType;
-        this.className = `gantt-calendar gantt-calendar-grid`;
+    createDragScrollEvent(dragRef) {
+        return fromEvent(this.dom.mainContainer, 'scroll', passiveListenerOptions).pipe(takeUntil(dragRef.ended));
     }
-    setTodayPoint() {
-        const x = this.view.getTodayXPoint();
-        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
-        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
-        if (isNumber(x)) {
-            if (line) {
-                line.style.left = `${x}px`;
-                line.style.top = `0px`;
-                line.style.bottom = `${-mainHeight}px`;
+    createMouseEvents() {
+        const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
+            this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
+            ? singleDropActiveClass
+            : dropActiveClass;
+        fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
+                if (this.item.linkable) {
+                    this.barElement.classList.add(dropClass);
+                    this.dragContainer.emitLinkDragEntered({
+                        item: this.item,
+                        element: this.barElement
+                    });
+                }
             }
-        }
-        else {
-            todayEle.style.display = 'none';
-        }
+            else {
+                this.barElement.classList.add(activeClass);
+            }
+        });
+        fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (!this.dragContainer.linkDraggingId) {
+                this.barElement.classList.remove(activeClass);
+            }
+            else {
+                this.dragContainer.emitLinkDragLeaved();
+            }
+            this.barElement.classList.remove(dropClass);
+        });
     }
-    ngOnInit() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
-                .pipe(takeUntil(this.unsubscribe$))
-                .subscribe(() => {
-                this.setTodayPoint();
+    createBarDrag() {
+        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 (dragRef.isDragging()) {
+                    const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
+                    this.dragScrollDistance = dragScrollDistance;
+                    dragRef['_boundaryRect'] = this.dom.mainItems.getBoundingClientRect();
+                    this.barDragMove();
+                }
             });
+            this.dragContainer.dragStarted.emit({ item: this.item.origin });
         });
+        dragRef.moved.subscribe((event) => {
+            this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
+            this.barDragMoveDistance = event.distance.x;
+            if (!this.dragScrolling) {
+                this.barDragMove();
+            }
+        });
+        dragRef.ended.subscribe((event) => {
+            this.clearDraggingStyles();
+            this.closeDragBackdrop();
+            event.source.reset();
+            this.stopScrolling();
+            this.dragScrolling = false;
+            this.dragScrollDistance = 0;
+            this.barDragMoveDistance = 0;
+            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.dragContainer.dragEnded.emit({ item: this.item.origin });
+        });
+        this.barDragRef = dragRef;
+        return dragRef;
     }
-    trackBy(point, index) {
-        return point.text || index;
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-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-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']
-            }] } });
-
-class NgxGanttToolbarComponent {
-    constructor(ganttUpper) {
-        this.ganttUpper = ganttUpper;
-        this.ganttItemClass = true;
-        this.ganttViewsMap = keyBy(ganttViews, 'value');
-    }
-    selectView(view) {
-        this.ganttUpper.changeView(view);
-    }
-}
-NgxGanttToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
-                    type: Inject,
-                    args: [GANTT_UPPER_TOKEN]
-                }] }]; }, propDecorators: { template: [{
-                type: Input
-            }], ganttItemClass: [{
-                type: HostBinding,
-                args: ['class.gantt-toolbar']
-            }] } });
-
-class NgxGanttRootComponent {
-    get view() {
-        return this.ganttUpper.view;
-    }
-    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this.ganttUpper = ganttUpper;
-        this.printService = printService;
-        this.unsubscribe$ = new Subject();
-        this.ganttUpper.dragContainer = dragContainer;
-    }
-    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(() => {
-                this.dom.initialize(this.elementRef);
-                if (this.printService) {
-                    this.printService.register(this.elementRef);
-                }
-                this.setupScrollClass();
-                this.setupResize();
-                this.setupViewScroll();
-                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
-                this.elementRef.nativeElement.style.opacity = '1';
-                this.ganttUpper.viewChange.pipe(startWith$1(null), takeUntil(this.unsubscribe$)).subscribe(() => {
-                    this.scrollToToday();
-                });
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-    }
-    setupViewScroll() {
-        if (this.ganttUpper.disabledLoadOnScroll) {
-            return;
-        }
-        this.dom
-            .getViewerScroll(passiveListenerOptions)
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe((event) => {
-            if (event.direction === ScrollDirection.LEFT) {
-                const dates = this.view.addStartDate();
-                if (dates) {
-                    event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
-                    if (this.ganttUpper.loadOnScroll.observers) {
-                        this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
-                    }
-                }
-            }
-            if (event.direction === ScrollDirection.RIGHT) {
-                const dates = this.view.addEndDate();
-                if (dates && this.ganttUpper.loadOnScroll.observers) {
-                    this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
-                }
-            }
-        });
-    }
-    setupResize() {
-        this.dom
-            .getResize()
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-            this.setupScrollClass();
-        });
-    }
-    setupScrollClass() {
-        const mainContainer = this.dom.mainContainer;
-        const height = mainContainer.offsetHeight;
-        const scrollHeight = mainContainer.scrollHeight;
-        if (scrollHeight > height) {
-            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
-        }
-        else {
-            this.elementRef.nativeElement.className = 'gantt';
-        }
-    }
-    scrollToToday() {
-        const x = this.view.getTodayXPoint();
-        this.dom.scrollMainContainer(x);
-    }
-    scrollToDate(date) {
-        let x;
-        if (typeof date === 'number') {
-            x = this.view.getXPointByDate(new GanttDate(date));
-        }
-        else {
-            x = this.view.getXPointByDate(date);
-        }
-        this.dom.scrollMainContainer(x);
-    }
-}
-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\" *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\" *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]
-                }] }, { type: GanttPrintService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { sideWidth: [{
-                type: Input
-            }], sideTemplate: [{
-                type: ContentChild,
-                args: ['sideTemplate', { static: true }]
-            }], mainTemplate: [{
-                type: ContentChild,
-                args: ['mainTemplate', { static: true }]
-            }], backdrop: [{
-                type: ViewChild,
-                args: [GanttDragBackdropComponent, { static: true, read: ElementRef }]
-            }] } });
-
-/**
- * Proximity, as a ratio to width/height, at which a
- * dragged item will affect the drop container.
- */
-const DROP_PROXIMITY_THRESHOLD = 0.05;
-const dragMinWidth = 10;
-const autoScrollStep = 5;
-const activeClass = 'gantt-bar-active';
-const dropActiveClass = 'gantt-bar-drop-active';
-const singleDropActiveClass = 'gantt-bar-single-drop-active';
-function createSvgElement(qualifiedName, className) {
-    const element = document.createElementNS('http://www.w3.org/2000/svg', qualifiedName);
-    element.classList.add(className);
-    return element;
-}
-class GanttBarDrag {
-    get dragDisabled() {
-        return !this.item.draggable || !this.ganttUpper.draggable;
-    }
-    get linkDragDisabled() {
-        return !this.item.linkable || !this.ganttUpper.linkable;
-    }
-    constructor(dragDrop, dom, dragContainer, _ngZone, root) {
-        this.dragDrop = dragDrop;
-        this.dom = dom;
-        this.dragContainer = dragContainer;
-        this._ngZone = _ngZone;
-        this.root = root;
-        this.dragRefs = [];
-        this.destroy$ = new Subject();
-        /** Used to signal to the current auto-scroll sequence when to stop. */
-        this.stopScrollTimers$ = new Subject();
-        /** move distance when drag bar */
-        this.barDragMoveDistance = 0;
-        /** move distance when drag bar handle */
-        this.barHandleDragMoveDistance = 0;
-        /** scrolling state when drag */
-        this.dragScrolling = false;
-        /** dragScrollDistance */
-        this.dragScrollDistance = 0;
-        /** Horizontal direction in which the list is currently scrolling. */
-        this._horizontalScrollDirection = 0 /* AutoScrollHorizontalDirection.NONE */;
-    }
-    createDragRef(element) {
-        const dragRef = this.dragDrop.createDrag(element);
-        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 &&
-            this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
-            ? singleDropActiveClass
-            : dropActiveClass;
-        fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (this.dragContainer.linkDraggingId && this.dragContainer.linkDraggingId !== this.item.id) {
-                if (this.item.linkable) {
-                    this.barElement.classList.add(dropClass);
-                    this.dragContainer.emitLinkDragEntered({
-                        item: this.item,
-                        element: this.barElement
-                    });
-                }
-            }
-            else {
-                this.barElement.classList.add(activeClass);
-            }
-        });
-        fromEvent(this.barElement, 'mouseleave', passiveListenerOptions)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            if (!this.dragContainer.linkDraggingId) {
-                this.barElement.classList.remove(activeClass);
-            }
-            else {
-                this.dragContainer.emitLinkDragLeaved();
-            }
-            this.barElement.classList.remove(dropClass);
-        });
-    }
-    createBarDrag() {
-        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 (dragRef.isDragging()) {
-            //         const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
-            //         this.dragScrollDistance = dragScrollDistance;
-            //         this.barDragMove();
-            //     }
-            // });
-            this.dragContainer.dragStarted.emit({ item: this.item.origin });
-        });
-        dragRef.moved.subscribe((event) => {
-            // this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
-            this.barDragMoveDistance = event.distance.x;
-            if (!this.dragScrolling) {
-                this.barDragMove();
-            }
-        });
-        dragRef.ended.subscribe((event) => {
-            this.clearDraggingStyles();
-            this.closeDragBackdrop();
-            event.source.reset();
-            // this.stopScrolling();
-            // this.dragScrolling = false;
-            // this.dragScrollDistance = 0;
-            this.barDragMoveDistance = 0;
-            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.dragContainer.dragEnded.emit({ item: this.item.origin });
-        });
-        this.barDragRef = dragRef;
-        return dragRef;
-    }
-    createBarHandleDrags() {
-        const dragRefs = [];
-        const handles = this.barElement.querySelectorAll('.drag-handles .handle');
-        handles.forEach((handle, index) => {
-            const isBefore = index === 0;
-            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 (dragRef.isDragging()) {
-                //         const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
-                //         this.dragScrollDistance = dragScrollDistance;
-                //         this.barHandleDragMove(isBefore);
-                //     }
-                // });
-                this.dragContainer.dragStarted.emit({ item: this.item.origin });
-            });
-            dragRef.moved.subscribe((event) => {
-                // this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
-                this.barHandleDragMoveDistance = event.distance.x;
-                if (!this.dragScrolling) {
-                    this.barHandleDragMove(isBefore);
-                }
-            });
-            dragRef.ended.subscribe((event) => {
-                this.clearDraggingStyles();
-                this.closeDragBackdrop();
-                event.source.reset();
-                // this.stopScrolling();
-                // this.dragScrolling = false;
-                // this.dragScrollDistance = 0;
-                this.barHandleDragMoveDistance = 0;
-                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.dragContainer.dragEnded.emit({ item: this.item.origin });
-            });
-            dragRefs.push(dragRef);
-        });
-        return dragRefs;
+    createBarHandleDrags() {
+        const dragRefs = [];
+        const handles = this.barElement.querySelectorAll('.drag-handles .handle');
+        handles.forEach((handle, index) => {
+            const isBefore = index === 0;
+            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 (dragRef.isDragging()) {
+                        const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
+                        this.dragScrollDistance = dragScrollDistance;
+                        dragRef['_boundaryRect'] = this.dom.mainItems.getBoundingClientRect();
+                        this.barHandleDragMove(isBefore);
+                    }
+                });
+                this.dragContainer.dragStarted.emit({ item: this.item.origin });
+            });
+            dragRef.moved.subscribe((event) => {
+                this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
+                this.barHandleDragMoveDistance = event.distance.x;
+                if (!this.dragScrolling) {
+                    this.barHandleDragMove(isBefore);
+                }
+            });
+            dragRef.ended.subscribe((event) => {
+                this.clearDraggingStyles();
+                this.closeDragBackdrop();
+                event.source.reset();
+                this.stopScrolling();
+                this.dragScrolling = false;
+                this.dragScrollDistance = 0;
+                this.barHandleDragMoveDistance = 0;
+                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.dragContainer.dragEnded.emit({ item: this.item.origin });
+            });
+            dragRefs.push(dragRef);
+        });
+        return dragRefs;
     }
     createLinkHandleDrags() {
         const dragRefs = [];
@@ -3080,13 +2856,19 @@ class GanttBarDrag {
         return dragRefs;
     }
     openDragBackdrop(dragElement, start, end) {
-        // 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 + 1);
+        let left = dragRect.left - rootRect.left - (this.dom.side.clientWidth + 1);
+        if (this.dragScrolling) {
+            if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
+                left += autoScrollStep;
+            }
+            else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
+                left -= autoScrollStep;
+            }
+        }
         const width = dragRect.right - dragRect.left;
         // Note: updating styles will cause re-layout so we have to place them consistently one by one.
         dragMaskElement.style.left = left + 'px';
@@ -3124,7 +2906,8 @@ class GanttBarDrag {
             end = end.addDays(1);
         }
         if (this.dragScrolling) {
-            this.barElement.style.left = currentX - this.barDragMoveDistance + 'px';
+            const left = currentX - this.barDragMoveDistance;
+            this.barElement.style.left = left + 'px';
         }
         this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width));
         if (!this.isStartOrEndInsideView(start, end)) {
@@ -3140,13 +2923,13 @@ class GanttBarDrag {
             const width = this.item.refs.width + distance * -1;
             const start = this.ganttUpper.view.getDateByXPoint(x);
             const days = differenceInDays(this.item.end.value, start.value);
-            if (!this.isStartOrEndInsideView(start, this.item.end)) {
-                return;
-            }
             if (width > dragMinWidth && days > 0) {
                 this.barElement.style.width = width + 'px';
                 this.barElement.style.left = x + 'px';
                 this.openDragBackdrop(this.barElement, start, this.item.end);
+                if (!this.isStartOrEndInsideView(start, this.item.end)) {
+                    return;
+                }
                 this.item.updateDate(start, this.item.end);
             }
             else {
@@ -3158,12 +2941,12 @@ class GanttBarDrag {
             const width = this.item.refs.width + distance;
             const end = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width);
             const days = differenceInDays(end.value, this.item.start.value);
-            if (!this.isStartOrEndInsideView(this.item.start, end)) {
-                return;
-            }
             if (width > dragMinWidth && days > 0) {
                 this.barElement.style.width = width + 'px';
                 this.openDragBackdrop(this.barElement, this.item.start, end);
+                if (!this.isStartOrEndInsideView(this.item.start, end)) {
+                    return;
+                }
                 this.item.updateDate(this.item.start, end);
             }
             else {
@@ -3200,37 +2983,27 @@ class GanttBarDrag {
             this.linkDraggingLine = null;
         }
     }
-    // private startScrollInterval = () => {
-    //     this.stopScrolling();
-    //     interval(0, animationFrameScheduler)
-    //         .pipe(takeUntil(this.stopScrollTimers$))
-    //         .subscribe(() => {
-    //             const node = this.dom.mainContainer;
-    //             const scrollStep = autoScrollStep;
-    //             if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) {
-    //                 node.scrollBy(-scrollStep, 0);
-    //             } else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) {
-    //                 node.scrollBy(scrollStep, 0);
-    //             }
-    //         });
-    // };
-    // private startScrollingIfNecessary(pointerX: number, pointerY: number) {
-    //     const clientRect = this.dom.mainContainer.getBoundingClientRect();
-    //     if (isPointerNearClientRect(clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
-    //         const horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
-    //         if (horizontalScrollDirection) {
-    //             this._horizontalScrollDirection = horizontalScrollDirection;
-    //             this.dragScrolling = true;
-    //             this._ngZone.runOutsideAngular(this.startScrollInterval);
-    //         } else {
-    //             this.dragScrolling = false;
-    //             this.stopScrolling();
-    //         }
-    //     }
-    // }
-    // private stopScrolling() {
-    //     this.stopScrollTimers$.next();
-    // }
+    startScrollingIfNecessary(pointerX, pointerY) {
+        const clientRect = this.dom.mainContainer.getBoundingClientRect();
+        const scrollLeft = this.dom.mainContainer.scrollLeft;
+        if (isPointerNearClientRect(clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
+            const horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
+            if ((horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */ && scrollLeft > 0) ||
+                (horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */ &&
+                    scrollLeft < this.ganttUpper.view.width - clientRect.width)) {
+                this._horizontalScrollDirection = horizontalScrollDirection;
+                this.dragScrolling = true;
+                this._ngZone.runOutsideAngular(this.startScrollInterval);
+            }
+            else {
+                this.dragScrolling = false;
+                this.stopScrolling();
+            }
+        }
+    }
+    stopScrolling() {
+        this.stopScrollTimers$.next();
+    }
     isStartOrEndInsideView(start, end) {
         const itemStart = start.getUnixTime();
         const itemEnd = end.getUnixTime();
@@ -3271,17 +3044,15 @@ class GanttBarDrag {
         this.dragRefs.forEach((dragRef) => dragRef.dispose());
         this.destroy$.next();
         this.destroy$.complete();
-        // this.stopScrolling();
+        this.stopScrolling();
         this.stopScrollTimers$.complete();
     }
 }
-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: i0.NgZone }, { 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: i0.NgZone }], 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: i2.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: i0.NgZone }, { type: NgxGanttRootComponent, decorators: [{
-                    type: SkipSelf
-                }] }]; } });
+        }], ctorParameters: function () { return [{ type: i2.DragDrop }, { type: GanttDomService }, { type: GanttDragContainer }, { type: i0.NgZone }]; } });
 
 class GanttItemUpper {
     constructor(elementRef, ganttUpper) {
@@ -3487,59 +3258,176 @@ class NgxGanttBaselineComponent {
         itemElement.style.width = this.baselineItem.refs.width + 'px';
     }
 }
-NgxGanttBaselineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttBaselineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
+NgxGanttBaselineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttBaselineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: { baselineItem: "baselineItem" }, host: { properties: { "class.gantt-baseline": "this.ganttBaselineClass" } }, ngImport: i0, template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttBaselineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-baseline,gantt-baseline', template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { baselineItem: [{
+                type: Input
+            }], ganttBaselineClass: [{
+                type: HostBinding,
+                args: ['class.gantt-baseline']
+            }] } });
+
+class GanttMainComponent {
+    constructor(ganttUpper) {
+        this.ganttUpper = ganttUpper;
+        this.barClick = new EventEmitter();
+        this.lineClick = new EventEmitter();
+        this.ganttMainClass = true;
+    }
+    trackBy(index, item) {
+        return item.id || index;
+    }
+}
+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: { 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\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: { renderData: [{
+                type: Input
+            }], flatData: [{
+                type: Input
+            }], groupHeaderTemplate: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], barTemplate: [{
+                type: Input
+            }], rangeTemplate: [{
+                type: Input
+            }], barClick: [{
+                type: Output
+            }], lineClick: [{
+                type: Output
+            }], ganttMainClass: [{
+                type: HostBinding,
+                args: ['class.gantt-main-container']
+            }] } });
+
+class GanttCalendarHeaderComponent {
+    get view() {
+        return this.ganttUpper.view;
+    }
+    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`;
+    }
+    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();
+            });
+        });
+    }
+    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();
+            }
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
+    }
+    trackBy(point, index) {
+        return point.text || index;
+    }
+}
+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: 'ngx-gantt-baseline,gantt-baseline', template: "<div #content *ngIf=\"baselineItem\" class=\"baseline-content\"></div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GanttUpper, decorators: [{
+            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]
-                }] }]; }, propDecorators: { baselineItem: [{
-                type: Input
-            }], ganttBaselineClass: [{
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.gantt-baseline']
+                args: ['class']
             }] } });
 
-class GanttMainComponent {
-    constructor(ganttUpper) {
+const mainHeight = 5000;
+class GanttCalendarGridComponent {
+    get view() {
+        return this.ganttUpper.view;
+    }
+    constructor(ganttUpper, ngZone, elementRef) {
         this.ganttUpper = ganttUpper;
-        this.barClick = new EventEmitter();
-        this.lineClick = new EventEmitter();
-        this.ganttMainClass = true;
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.unsubscribe$ = new Subject();
+        this.headerHeight = headerHeight;
+        this.mainHeight = mainHeight;
+        this.todayBorderRadius = todayBorderRadius;
+        this.viewTypes = GanttViewType;
+        this.className = `gantt-calendar gantt-calendar-grid`;
     }
-    trackBy(index, item) {
-        return item.id || index;
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0];
+        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0];
+        if (isNumber(x)) {
+            if (line) {
+                line.style.left = `${x}px`;
+                line.style.top = `0px`;
+                line.style.bottom = `${-mainHeight}px`;
+            }
+        }
+        else {
+            todayEle.style.display = 'none';
+        }
+    }
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                this.setTodayPoint();
+            });
+        });
+    }
+    trackBy(point, index) {
+        return point.text || index;
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
     }
 }
-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: { 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: [{
+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-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" }]
+            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]
-                }] }]; }, propDecorators: { renderData: [{
-                type: Input
-            }], flatData: [{
-                type: Input
-            }], groupHeaderTemplate: [{
-                type: Input
-            }], itemTemplate: [{
-                type: Input
-            }], barTemplate: [{
-                type: Input
-            }], rangeTemplate: [{
-                type: Input
-            }], barClick: [{
-                type: Output
-            }], lineClick: [{
-                type: Output
-            }], ganttMainClass: [{
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
-                args: ['class.gantt-main-container']
+                args: ['class']
             }] } });
 
 class GanttLoaderComponent {
@@ -3569,6 +3457,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 }]
         }] });
 
+class GanttDragBackdropComponent {
+}
+GanttDragBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GanttDragBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop", host: { classAttribute: "gantt-drag-backdrop" }, ngImport: i0, 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" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttDragBackdropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gantt-drag-backdrop', host: {
+                        class: 'gantt-drag-backdrop'
+                    }, 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 NgxGanttToolbarComponent {
+    constructor(ganttUpper) {
+        this.ganttUpper = ganttUpper;
+        this.ganttItemClass = true;
+        this.ganttViewsMap = keyBy(ganttViews, 'value');
+    }
+    selectView(view) {
+        this.ganttUpper.changeView(view);
+    }
+}
+NgxGanttToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+NgxGanttToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttToolbarComponent, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
+                    type: Inject,
+                    args: [GANTT_UPPER_TOKEN]
+                }] }]; }, propDecorators: { template: [{
+                type: Input
+            }], ganttItemClass: [{
+                type: HostBinding,
+                args: ['class.gantt-toolbar']
+            }] } });
+
+class NgxGanttRootComponent {
+    get view() {
+        return this.ganttUpper.view;
+    }
+    constructor(elementRef, ngZone, dom, dragContainer, ganttUpper, printService) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this.dom = dom;
+        this.dragContainer = dragContainer;
+        this.ganttUpper = ganttUpper;
+        this.printService = printService;
+        this.unsubscribe$ = new Subject();
+        this.ganttUpper.dragContainer = dragContainer;
+    }
+    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(() => {
+                this.dom.initialize(this.elementRef);
+                if (this.printService) {
+                    this.printService.register(this.elementRef);
+                }
+                this.setupScrollClass();
+                this.setupResize();
+                this.setupViewScroll();
+                // 优化初始化时Scroll滚动体验问题，通过透明度解决，默认透明度为0，滚动结束后恢复
+                this.elementRef.nativeElement.style.opacity = '1';
+                this.ganttUpper.viewChange.pipe(startWith$1(null), takeUntil(this.unsubscribe$)).subscribe(() => {
+                    this.scrollToToday();
+                });
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+    }
+    setupViewScroll() {
+        if (this.ganttUpper.disabledLoadOnScroll) {
+            return;
+        }
+        this.dom
+            .getViewerScroll(passiveListenerOptions)
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe((event) => {
+            if (event.direction === ScrollDirection.LEFT) {
+                const dates = this.view.addStartDate();
+                if (dates) {
+                    event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
+                    if (this.ganttUpper.loadOnScroll.observers) {
+                        this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+                    }
+                }
+            }
+            if (event.direction === ScrollDirection.RIGHT) {
+                const dates = this.view.addEndDate();
+                if (dates && this.ganttUpper.loadOnScroll.observers) {
+                    this.ngZone.run(() => this.ganttUpper.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() }));
+                }
+            }
+        });
+    }
+    setupResize() {
+        this.dom
+            .getResize()
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+            this.setupScrollClass();
+        });
+    }
+    setupScrollClass() {
+        const mainContainer = this.dom.mainContainer;
+        const height = mainContainer.offsetHeight;
+        const scrollHeight = mainContainer.scrollHeight;
+        if (scrollHeight > height) {
+            this.elementRef.nativeElement.className = 'gantt gantt-scroll';
+        }
+        else {
+            this.elementRef.nativeElement.className = 'gantt';
+        }
+    }
+    scrollToToday() {
+        const x = this.view.getTodayXPoint();
+        this.dom.scrollMainContainer(x);
+    }
+    scrollToDate(date) {
+        let x;
+        if (typeof date === 'number') {
+            x = this.view.getXPointByDate(new GanttDate(date));
+        }
+        else {
+            x = this.view.getXPointByDate(date);
+        }
+        this.dom.scrollMainContainer(x);
+    }
+}
+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\" *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\" *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]
+                }] }, { type: GanttPrintService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { sideWidth: [{
+                type: Input
+            }], sideTemplate: [{
+                type: ContentChild,
+                args: ['sideTemplate', { static: true }]
+            }], mainTemplate: [{
+                type: ContentChild,
+                args: ['mainTemplate', { static: true }]
+            }], backdrop: [{
+                type: ViewChild,
+                args: [GanttDragBackdropComponent, { static: true, read: ElementRef }]
+            }] } });
+
 class NgxGanttComponent extends GanttUpper {
     set loading(loading) {
         if (loading) {