@worktile/gantt 14.0.2 → 14.0.4

package/fesm2020/worktile-gantt.mjs

@@ -13,12 +13,13 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { __decorate, __param } from 'tslib';
 
 class GanttDatePoint {
-    constructor(start, text, x, y, additions) {
+    constructor(start, text, x, y, additions, style) {
         this.start = start;
         this.text = text;
         this.x = x;
         this.y = y;
         this.additions = additions;
+        this.style = style;
     }
 }
 
@@ -195,37 +196,6 @@ class GanttDate {
     }
 }
 
-var GanttViewType;
-(function (GanttViewType) {
-    GanttViewType["day"] = "day";
-    GanttViewType["quarter"] = "quarter";
-    GanttViewType["month"] = "month";
-    GanttViewType["year"] = "year";
-    GanttViewType["week"] = "week";
-})(GanttViewType || (GanttViewType = {}));
-const ganttViews = [
-    {
-        name: '日',
-        value: GanttViewType.day
-    },
-    {
-        name: '周',
-        value: GanttViewType.week
-    },
-    {
-        name: '月',
-        value: GanttViewType.month
-    },
-    {
-        name: '季',
-        value: GanttViewType.quarter
-    },
-    {
-        name: '年',
-        value: GanttViewType.year
-    }
-];
-
 var GanttLinkType;
 (function (GanttLinkType) {
     GanttLinkType[GanttLinkType["fs"] = 1] = "fs";
@@ -275,34 +245,28 @@ class GanttItemInternal {
         this.expanded = this.origin.expanded === undefined ? false : this.origin.expanded;
         this.start = item.start ? new GanttDate(item.start) : null;
         this.end = item.end ? new GanttDate(item.end) : null;
-        this.viewType = options && options.viewType ? options.viewType : GanttViewType.month;
+        //  默认填充 30 天
+        this.fillDays = options?.fillDays || 30;
         this.children = (item.children || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
+            return new GanttItemInternal(subItem, { fillDays: this.fillDays });
         });
         this.type = this.origin.type || GanttItemType.bar;
         this.progress = this.origin.progress;
-        // fill one month when start or end is null
+        // fill days when start or end is null
         this.fillItemStartOrEnd(item);
     }
     get refs() {
         return this.refs$.getValue();
     }
     fillItemStartOrEnd(item) {
-        let addInterval;
-        switch (this.viewType) {
-            case GanttViewType.day:
-            case GanttViewType.week:
-                addInterval = 0;
-                break;
-            default:
-                addInterval = 30;
-                break;
-        }
-        if (item.start && !item.end) {
-            this.end = new GanttDate(item.start).addDays(addInterval).endOfDay();
-        }
-        if (!item.start && item.end) {
-            this.start = new GanttDate(item.end).addDays(-addInterval).startOfDay();
+        if (this.fillDays > 0) {
+            const fillDays = this.fillDays - 1;
+            if (item.start && !item.end) {
+                this.end = new GanttDate(item.start).addDays(fillDays).endOfDay();
+            }
+            if (!item.start && item.end) {
+                this.start = new GanttDate(item.end).addDays(-fillDays).startOfDay();
+            }
         }
     }
     updateRefs(refs) {
@@ -317,7 +281,7 @@ class GanttItemInternal {
     addChildren(items) {
         this.origin.children = items;
         this.children = (items || []).map((subItem) => {
-            return new GanttItemInternal(subItem, { viewType: this.viewType });
+            return new GanttItemInternal(subItem, { fillDays: this.fillDays });
         });
     }
     setExpand(expanded) {
@@ -347,6 +311,37 @@ class GanttGroupInternal {
     }
 }
 
+var GanttViewType;
+(function (GanttViewType) {
+    GanttViewType["day"] = "day";
+    GanttViewType["quarter"] = "quarter";
+    GanttViewType["month"] = "month";
+    GanttViewType["year"] = "year";
+    GanttViewType["week"] = "week";
+})(GanttViewType || (GanttViewType = {}));
+const ganttViews = [
+    {
+        name: '日',
+        value: GanttViewType.day
+    },
+    {
+        name: '周',
+        value: GanttViewType.week
+    },
+    {
+        name: '月',
+        value: GanttViewType.month
+    },
+    {
+        name: '季',
+        value: GanttViewType.quarter
+    },
+    {
+        name: '年',
+        value: GanttViewType.year
+    }
+];
+
 class GanttBaselineItemInternal {
     constructor(item) {
         this.refs$ = new BehaviorSubject(null);
@@ -479,8 +474,8 @@ class GanttView {
     }
     // 根据X坐标获取对应时间
     getDateByXPoint(x) {
-        const indexOfSecondaryDate = Math.floor(x / this.getCellWidth());
-        const matchDate = this.secondaryDatePoints[indexOfSecondaryDate];
+        const indexOfSecondaryDate = Math.max(Math.floor(x / this.getCellWidth()), 0);
+        const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
         const dayWidth = this.getDayOccupancyWidth(matchDate?.start);
         if (dayWidth === this.getCellWidth()) {
             return matchDate?.start;
@@ -505,7 +500,8 @@ const viewOptions$4 = {
     end: new GanttDate().endOfQuarter().addQuarters(2),
     cellWidth: 280,
     addAmount: 1,
-    addUnit: 'quarter'
+    addUnit: 'quarter',
+    fillDays: 30
 };
 class GanttViewMonth extends GanttView {
     constructor(start, end, options) {
@@ -553,7 +549,8 @@ const viewOptions$3 = {
     max: new GanttDate().addYears(2).endOfYear(),
     cellWidth: 500,
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    fillDays: 30
 };
 class GanttViewQuarter extends GanttView {
     constructor(start, end, options) {
@@ -599,7 +596,8 @@ const viewOptions$2 = {
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    fillDays: 1
 };
 class GanttViewDay extends GanttView {
     constructor(start, end, options) {
@@ -651,7 +649,8 @@ const viewOptions$1 = {
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    fillDays: 1
 };
 class GanttViewWeek extends GanttView {
     constructor(start, end, options) {
@@ -698,7 +697,8 @@ const viewOptions = {
     start: new GanttDate().addYears(-2).startOfYear(),
     end: new GanttDate().addYears(2).endOfYear(),
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    fillDays: 30
 };
 class GanttViewYear extends GanttView {
     constructor(start, end, options) {
@@ -922,14 +922,14 @@ class GanttUpper {
             this.originItems.forEach((origin) => {
                 const group = this.groupsMap[origin.group_id];
                 if (group) {
-                    const item = new GanttItemInternal(origin, { viewType: this.viewType });
+                    const item = new GanttItemInternal(origin, { fillDays: this.view.options?.fillDays });
                     group.items.push(item);
                 }
             });
         }
         else {
             this.originItems.forEach((origin) => {
-                const item = new GanttItemInternal(origin, { viewType: this.viewType });
+                const item = new GanttItemInternal(origin, { fillDays: this.view.options?.fillDays });
                 this.items.push(item);
             });
         }
@@ -1045,10 +1045,10 @@ class GanttUpper {
     ngOnChanges(changes) {
         if (!this.firstChange) {
             if (changes.viewType && changes.viewType.currentValue && changes.viewType.currentValue !== changes.viewType.previousValue) {
-                this.viewTypeChange(changes.viewType.currentValue);
+                this.changeView(changes.viewType.currentValue);
             }
             if (changes.viewOptions) {
-                this.viewTypeChange(this.viewType);
+                this.changeView(this.viewType);
             }
             if (changes.originItems || changes.originGroups) {
                 this.setupExpandedState();
@@ -1115,7 +1115,7 @@ class GanttUpper {
         }
         return this.selectionModel.isSelected(id);
     }
-    viewTypeChange(type) {
+    changeView(type) {
         this.viewType = type;
         this.createView();
         this.setupGroups();
@@ -1125,8 +1125,8 @@ class GanttUpper {
         this.computeItemsRefs(...this.baselineItems);
         this.viewChange.emit(this.view);
     }
-    renderView(type) {
-        this.viewTypeChange(type);
+    rerenderView() {
+        this.changeView(this.viewType);
     }
 }
 GanttUpper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2093,6 +2093,7 @@ class GanttDomService {
         this.container = this.root.getElementsByClassName('gantt-container')[0];
         this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
         this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
+        this.mainItems = this.root.getElementsByClassName('gantt-main-items')[0];
         this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
         this.monitorScrollChange();
         this.disableBrowserWheelEvent();
@@ -2315,10 +2316,10 @@ class GanttCalendarComponent {
     }
 }
 GanttCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: GanttCalendarComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GanttCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text class=\"primary-text\" *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text class=\"secondary-text\" [class.secondary-text-weekend]=\"point.additions?.isWeekend\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GanttCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: GanttCalendarComponent, selector: "gantt-calendar-overlay", host: { properties: { "class.gantt-calendar-overlay": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: GanttCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-calendar-overlay', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text class=\"primary-text\" *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text class=\"secondary-text\" [class.secondary-text-weekend]=\"point.additions?.isWeekend\" [attr.x]=\"point.x\" [attr.y]=\"point.y\">\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
+            args: [{ selector: 'gantt-calendar-overlay', template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-overlay-main\" [attr.width]=\"view.width\" [attr.height]=\"headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line [attr.x1]=\"0\" [attr.x2]=\"view.width\" [attr.y1]=\"headerHeight\" [attr.y2]=\"headerHeight\" class=\"header-line\"></line>\n    </g>\n  </g>\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"headerHeight\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -2334,7 +2335,7 @@ class NgxGanttToolbarComponent {
         this.ganttViewsMap = keyBy(ganttViews, 'value');
     }
     selectView(view) {
-        this.ganttUpper.viewTypeChange(view);
+        this.ganttUpper.changeView(view);
     }
 }
 NgxGanttToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
@@ -2536,6 +2537,7 @@ class GanttBarDrag {
     createBarDrag() {
         const dragRef = this.dragDrop.createDrag(this.barElement);
         dragRef.lockAxis = 'x';
+        dragRef.withBoundaryElement(this.dom.mainItems);
         dragRef.started.subscribe(() => {
             this.setDraggingStyles();
             this.dragContainer.dragStarted.emit({ item: this.item.origin });
@@ -2552,7 +2554,6 @@ class GanttBarDrag {
                 start = start.addDays(1);
                 end = end.addDays(1);
             }
-            // this.openDragBackdrop(this.barElement, start, end);
             this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(currentX), this.ganttUpper.view.getDateByXPoint(currentX + this.item.refs.width));
             this.item.updateDate(start, end);
             this.dragContainer.dragMoved.emit({ item: this.item.origin });
@@ -2573,7 +2574,7 @@ class GanttBarDrag {
             const isBefore = index === 0;
             const dragRef = this.dragDrop.createDrag(handle);
             dragRef.lockAxis = 'x';
-            dragRef.withBoundaryElement(this.dom.root);
+            dragRef.withBoundaryElement(this.dom.mainItems);
             dragRef.started.subscribe(() => {
                 this.setDraggingStyles();
                 this.dragContainer.dragStarted.emit({ item: this.item.origin });
@@ -2582,20 +2583,22 @@ class GanttBarDrag {
                 if (isBefore) {
                     const x = this.item.refs.x + event.distance.x;
                     const width = this.item.refs.width + event.distance.x * -1;
+                    const start = this.ganttUpper.view.getDateByXPoint(x);
                     if (width > dragMinWidth) {
                         this.barElement.style.width = width + 'px';
                         this.barElement.style.left = x + 'px';
-                        this.openDragBackdrop(this.barElement, this.ganttUpper.view.getDateByXPoint(x), this.item.end);
-                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(x), this.item.end);
+                        this.openDragBackdrop(this.barElement, start, this.item.end);
+                        this.item.updateDate(start, this.item.end);
                     }
                 }
                 else {
                     const width = this.item.refs.width + event.distance.x;
+                    const end = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width);
                     if (width > dragMinWidth) {
                         this.barElement.style.width = width + 'px';
-                        this.openDragBackdrop(this.barElement, this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
+                        this.openDragBackdrop(this.barElement, this.item.start, end);
+                        this.item.updateDate(this.item.start, end);
                     }
-                    this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width));
                 }
                 this.dragContainer.dragMoved.emit({ item: this.item.origin });
                 event.source.reset();
@@ -2603,19 +2606,13 @@ class GanttBarDrag {
             dragRef.ended.subscribe((event) => {
                 if (isBefore) {
                     const width = this.item.refs.width + event.distance.x * -1;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(this.ganttUpper.view.getDateByXPoint(this.item.refs.x + event.distance.x), this.item.end);
-                    }
-                    else {
+                    if (width <= dragMinWidth) {
                         this.item.updateDate(this.item.end.startOfDay(), this.item.end);
                     }
                 }
                 else {
                     const width = this.item.refs.width + event.distance.x;
-                    if (width > dragMinWidth) {
-                        this.item.updateDate(this.item.start, this.ganttUpper.view.getDateByXPoint(this.item.refs.x + this.item.refs.width + event.distance.x));
-                    }
-                    else {
+                    if (width <= dragMinWidth) {
                         this.item.updateDate(this.item.start, this.item.start.endOfDay());
                     }
                 }
@@ -2841,7 +2838,16 @@ class NgxGanttBarComponent extends GanttItemUpper {
         });
     }
     ngAfterViewInit() {
-        this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
+        // 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.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
+            });
+        });
         this.setContentBackground();
         this.handles.changes
             .pipe(startWith(this.handles), switchMap(() =>