@worktile/gantt 14.0.3 → 14.0.5

package/fesm2020/worktile-gantt.mjs

@@ -474,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;
@@ -857,13 +857,12 @@ class GanttUpper {
         this.dragEnded = new EventEmitter();
         this.barClick = new EventEmitter();
         this.viewChange = new EventEmitter();
+        this.expandChange = new EventEmitter();
         this.linkDragEnded = new EventEmitter();
         this.items = [];
         this.groups = [];
         this.baselineItems = [];
         this.baselineItemsMap = {};
-        // public viewChange = new EventEmitter<GanttView>();
-        this.expandChange = new EventEmitter();
         this.firstChange = true;
         this.unsubscribe$ = new Subject();
         this._selectable = false;
@@ -897,6 +896,7 @@ class GanttUpper {
     get multiple() {
         return this._multiple;
     }
+    // public viewChange = new EventEmitter<GanttView>();
     get element() {
         return this.elementRef.nativeElement;
     }
@@ -1000,7 +1000,7 @@ class GanttUpper {
         this.groups.forEach((group) => {
             group.setExpand(expanded);
         });
-        this.expandChange.next();
+        this.expandChange.next(null);
         this.cdr.detectChanges();
     }
     initSelectionModel() {
@@ -1083,7 +1083,7 @@ class GanttUpper {
     }
     expandGroup(group) {
         group.setExpand(!group.expanded);
-        this.expandChange.emit();
+        this.expandChange.emit(group);
         this.cdr.detectChanges();
     }
     // public functions
@@ -1130,7 +1130,7 @@ class GanttUpper {
     }
 }
 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 });
-GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.11", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", showToolbar: "showToolbar", toolbarOptions: "toolbarOptions", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick", viewChange: "viewChange" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
+GanttUpper.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.11", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", showToolbar: "showToolbar", toolbarOptions: "toolbarOptions", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick", viewChange: "viewChange", expandChange: "expandChange" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
@@ -1183,6 +1183,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                 type: Output
             }], viewChange: [{
                 type: Output
+            }], expandChange: [{
+                type: Output
             }], barTemplate: [{
                 type: ContentChild,
                 args: ['bar', { static: true }]
@@ -2093,6 +2095,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();
@@ -2536,6 +2539,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 +2556,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 +2576,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 +2585,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 +2608,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 +2840,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(() => 
@@ -3048,7 +3056,7 @@ class NgxGanttComponent extends GanttUpper {
                 this.childrenResolve(item.origin)
                     .pipe(take(1), finalize(() => {
                     item.loading = false;
-                    this.expandChange.emit();
+                    this.expandChange.emit(item);
                     this.cdr.detectChanges();
                 }))
                     .subscribe((items) => {
@@ -3058,12 +3066,12 @@ class NgxGanttComponent extends GanttUpper {
             }
             else {
                 this.computeItemsRefs(...item.children);
-                this.expandChange.emit();
+                this.expandChange.emit(item);
             }
         }
         else {
             item.setExpand(false);
-            this.expandChange.emit();
+            this.expandChange.emit(item);
         }
     }
     selectItem(selectEvent) {