@worktile/gantt 15.1.0-next.3 → 15.1.0-next.5

package/fesm2020/worktile-gantt.mjs

@@ -3,7 +3,7 @@ import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, Content
 import * as i1 from '@angular/common';
 import { DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
 import { take, takeUntil, skip, switchMap, debounceTime as debounceTime$1, map, pairwise, auditTime, startWith as startWith$1, finalize } from 'rxjs/operators';
-import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, debounceTime, filter, merge, EMPTY, fromEvent, Observable, interval, animationFrameScheduler } from 'rxjs';
+import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, debounceTime, filter, merge, EMPTY, fromEvent, Observable } from 'rxjs';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, eachDayOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -1246,12 +1246,15 @@ class NgxGanttTableColumnComponent {
     }
 }
 NgxGanttTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableColumnComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name", showExpandIcon: "showExpandIcon" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
+NgxGanttTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: NgxGanttTableColumnComponent, selector: "ngx-gantt-column", inputs: { width: "width", name: "name", showExpandIcon: "showExpandIcon" }, host: { classAttribute: "gantt-table-column" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "headerTemplateRef", first: true, predicate: ["header"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: NgxGanttTableColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-gantt-column',
-                    template: ''
+                    template: '',
+                    host: {
+                        class: 'gantt-table-column'
+                    }
                 }]
         }], ctorParameters: function () { return [{ type: GanttUpper, decorators: [{
                     type: Inject,
@@ -1737,7 +1740,6 @@ class GanttTableBodyComponent {
         this.columns.changes.pipe(startWith(this.columns), takeUntil$1(this.destroy$)).subscribe(() => {
             this.hasExpandIcon = false;
             this.columns.forEach((column) => {
-                column.classList.add('gantt-table-column');
                 if (!column.columnWidth) {
                     column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
                 }
@@ -2458,41 +2460,6 @@ 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) {
@@ -2919,21 +2886,6 @@ class GanttBarDrag {
         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(() => {
-                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);
-                }
-            });
-        };
     }
     createDragRef(element) {
         const dragRef = this.dragDrop.createDrag(element);
@@ -2981,36 +2933,36 @@ class GanttBarDrag {
         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.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.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.clearDraggingStyles();
-            this.closeDragBackdrop();
-            event.source.reset();
-            this.stopScrolling();
-            this.dragScrolling = false;
-            this.dragScrollDistance = 0;
-            this.barDragMoveDistance = 0;
             this.dragContainer.dragEnded.emit({ item: this.item.origin });
         });
         this.barDragRef = dragRef;
@@ -3026,48 +2978,36 @@ class GanttBarDrag {
             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.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.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
                 this.barHandleDragMoveDistance = event.distance.x;
                 if (!this.dragScrolling) {
                     this.barHandleDragMove(isBefore);
                 }
             });
             dragRef.ended.subscribe((event) => {
-                if (isBefore) {
-                    const width = this.item.refs.width + event.distance.x * -1;
-                    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.item.start.endOfDay());
-                    }
-                }
+                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.clearDraggingStyles();
-                this.closeDragBackdrop();
-                event.source.reset();
-                this.stopScrolling();
-                this.dragScrolling = false;
-                this.dragScrollDistance = 0;
-                this.barHandleDragMoveDistance = 0;
                 this.dragContainer.dragEnded.emit({ item: this.item.origin });
             });
             dragRefs.push(dragRef);
@@ -3134,7 +3074,7 @@ class GanttBarDrag {
         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;
+        const left = dragRect.left - rootRect.left - (this.dom.side.clientWidth + 1);
         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';
@@ -3187,27 +3127,37 @@ class GanttBarDrag {
             const x = this.item.refs.x + distance;
             const width = this.item.refs.width + distance * -1;
             const start = this.ganttUpper.view.getDateByXPoint(x);
-            if (width > dragMinWidth) {
+            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 {
+                this.openDragBackdrop(this.barElement, this.item.end.startOfDay(), this.item.end);
+                this.item.updateDate(this.item.end.startOfDay(), this.item.end);
+            }
         }
         else {
             const width = this.item.refs.width + distance;
             const end = this.ganttUpper.view.getDateByXPoint(this.item.refs.x + width);
-            if (width > dragMinWidth) {
+            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 {
+                this.openDragBackdrop(this.barElement, this.item.start, this.item.start.endOfDay());
+                this.item.updateDate(this.item.start, this.item.start.endOfDay());
+            }
         }
         this.dragContainer.dragMoved.emit({ item: this.item.origin });
     }
@@ -3238,24 +3188,37 @@ class GanttBarDrag {
             this.linkDraggingLine = null;
         }
     }
-    startScrollingIfNecessary(pointerX, pointerY) {
-        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();
-            }
-        }
-    }
-    stopScrolling() {
-        this.stopScrollTimers$.next();
-    }
+    // 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();
+    // }
     isStartOrEndInsideView(start, end) {
         const itemStart = start.getUnixTime();
         const itemEnd = end.getUnixTime();
@@ -3296,7 +3259,7 @@ class GanttBarDrag {
         this.dragRefs.forEach((dragRef) => dragRef.dispose());
         this.destroy$.next();
         this.destroy$.complete();
-        this.stopScrolling();
+        // this.stopScrolling();
         this.stopScrollTimers$.complete();
     }
 }
@@ -3331,7 +3294,6 @@ class GanttItemUpper {
         this.refsUnsubscribe$.next();
         this.refsUnsubscribe$.complete();
         this.item = item;
-        this.setPositions();
         this.item.refs$.pipe(takeUntil(this.refsUnsubscribe$)).subscribe(() => {
             this.setPositions();
         });