@worktile/gantt 15.1.0-next.3 → 15.1.0-next.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/bar/bar-drag.d.ts +0 -3
- package/esm2020/components/bar/bar-drag.mjs +67 -70
- package/esm2020/components/table/body/gantt-table-body.component.mjs +4 -4
- package/fesm2015/worktile-gantt.mjs +69 -106
- package/fesm2015/worktile-gantt.mjs.map +1 -1
- package/fesm2020/worktile-gantt.mjs +69 -106
- package/fesm2020/worktile-gantt.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, Content
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
|
|
5
5
|
import { take, takeUntil, skip, switchMap, debounceTime as debounceTime$1, map, pairwise, auditTime, startWith as startWith$1, finalize } from 'rxjs/operators';
|
|
6
|
-
import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, debounceTime, filter, merge, EMPTY, fromEvent, Observable
|
|
6
|
+
import { BehaviorSubject, Subject, from, takeUntil as takeUntil$1, startWith, debounceTime, filter, merge, EMPTY, fromEvent, Observable } from 'rxjs';
|
|
7
7
|
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';
|
|
8
8
|
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';
|
|
9
9
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
@@ -1737,7 +1737,7 @@ class GanttTableBodyComponent {
|
|
|
1737
1737
|
this.columns.changes.pipe(startWith(this.columns), takeUntil$1(this.destroy$)).subscribe(() => {
|
|
1738
1738
|
this.hasExpandIcon = false;
|
|
1739
1739
|
this.columns.forEach((column) => {
|
|
1740
|
-
column.classList.add('gantt-table-column');
|
|
1740
|
+
// column.classList.add('gantt-table-column');
|
|
1741
1741
|
if (!column.columnWidth) {
|
|
1742
1742
|
column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
|
|
1743
1743
|
}
|
|
@@ -1938,10 +1938,10 @@ class GanttTableBodyComponent {
|
|
|
1938
1938
|
}
|
|
1939
1939
|
}
|
|
1940
1940
|
GanttTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1941
|
-
GanttTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: { renderData: "renderData", flatData: "flatData", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"renderData\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n <ng-container *ngIf=\"!renderData?.length\">\n <ng-container *ngIf=\"!emptyTemplate\">\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n </ng-container>\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"renderData && renderData.length > 0\">\n <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n <ng-container *ngIf=\"groupTemplate; else default\">\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n </ng-container>\n <ng-template #default>\n <span class=\"group-title\">{{ item.title }}</span>\n </ng-template>\n </div>\n </div>\n\n <div\n *ngIf=\"!item.items\"\n (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n\n <div
|
|
1941
|
+
GanttTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: { renderData: "renderData", flatData: "flatData", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"renderData\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n <ng-container *ngIf=\"!renderData?.length\">\n <ng-container *ngIf=\"!emptyTemplate\">\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n </ng-container>\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"renderData && renderData.length > 0\">\n <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n <ng-container *ngIf=\"groupTemplate; else default\">\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n </ng-container>\n <ng-template #default>\n <span class=\"group-title\">{{ item.title }}</span>\n </ng-template>\n </div>\n </div>\n\n <div\n *ngIf=\"!item.items\"\n (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n\n <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n <!-- drag icon -->\n <gantt-icon\n *ngIf=\"first && draggable\"\n class=\"gantt-drag-handle\"\n iconName=\"drag\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n ></gantt-icon>\n <!-- expand icon -->\n <div\n *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n class=\"gantt-expand-icon\"\n [style.marginLeft.px]=\"item.level * 20\"\n >\n <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && item.expandable\">\n <gantt-icon\n *ngIf=\"!item.loading\"\n class=\"expand-icon\"\n [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n (click)=\"expandChildren($event, item)\"\n >\n </gantt-icon>\n <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n </ng-container>\n </div>\n <!-- column content -->\n <div class=\"gantt-table-column-content\">\n <ng-template\n [ngTemplateOutlet]=\"column.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </div>\n <ng-template\n [ngTemplateOutlet]=\"rowAfterTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </ng-container>\n </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }] });
|
|
1942
1942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
|
|
1943
1943
|
type: Component,
|
|
1944
|
-
args: [{ selector: 'gantt-table-body', template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"renderData\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n <ng-container *ngIf=\"!renderData?.length\">\n <ng-container *ngIf=\"!emptyTemplate\">\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n </ng-container>\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"renderData && renderData.length > 0\">\n <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n <ng-container *ngIf=\"groupTemplate; else default\">\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n </ng-container>\n <ng-template #default>\n <span class=\"group-title\">{{ item.title }}</span>\n </ng-template>\n </div>\n </div>\n\n <div\n *ngIf=\"!item.items\"\n (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n\n <div
|
|
1944
|
+
args: [{ selector: 'gantt-table-body', template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"renderData\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n <ng-container *ngIf=\"!renderData?.length\">\n <ng-container *ngIf=\"!emptyTemplate\">\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n </ng-container>\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"renderData && renderData.length > 0\">\n <ng-container *ngFor=\"let item of renderData; trackBy: trackBy\">\n <div class=\"gantt-table-group\" [ngClass]=\"item.class\" *ngIf=\"item.items\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n <ng-container *ngIf=\"groupTemplate; else default\">\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n </ng-container>\n <ng-template #default>\n <span class=\"group-title\">{{ item.title }}</span>\n </ng-template>\n </div>\n </div>\n\n <div\n *ngIf=\"!item.items\"\n (click)=\"itemClick.emit({ event: $event, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n\n <div class=\"gantt-table-column\" *ngFor=\"let column of columns; let first = first\" [style.width]=\"column.columnWidth\">\n <!-- drag icon -->\n <gantt-icon\n *ngIf=\"first && draggable\"\n class=\"gantt-drag-handle\"\n iconName=\"drag\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n ></gantt-icon>\n <!-- expand icon -->\n <div\n *ngIf=\"column?.showExpandIcon || (!hasExpandIcon && first)\"\n class=\"gantt-expand-icon\"\n [style.marginLeft.px]=\"item.level * 20\"\n >\n <ng-container *ngIf=\"item.level < gantt.maxLevel - 1 && item.expandable\">\n <gantt-icon\n *ngIf=\"!item.loading\"\n class=\"expand-icon\"\n [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n (click)=\"expandChildren($event, item)\"\n >\n </gantt-icon>\n <gantt-icon *ngIf=\"item.loading\" [iconName]=\"'loading'\"></gantt-icon>\n </ng-container>\n </div>\n <!-- column content -->\n <div class=\"gantt-table-column-content\">\n <ng-template\n [ngTemplateOutlet]=\"column.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </div>\n <ng-template\n [ngTemplateOutlet]=\"rowAfterTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </ng-container>\n </ng-container>\n</div>\n" }]
|
|
1945
1945
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1946
1946
|
type: Inject,
|
|
1947
1947
|
args: [GANTT_ABSTRACT_TOKEN]
|
|
@@ -2458,41 +2458,6 @@ function normalizePassiveListenerOptions(options) {
|
|
|
2458
2458
|
/** Options used to bind passive event listeners. */
|
|
2459
2459
|
const passiveListenerOptions = normalizePassiveListenerOptions({ passive: true });
|
|
2460
2460
|
|
|
2461
|
-
/**
|
|
2462
|
-
* Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
|
|
2463
|
-
* viewport. The value comes from trying it out manually until it feels right.
|
|
2464
|
-
*/
|
|
2465
|
-
const SCROLL_PROXIMITY_THRESHOLD = 0.05;
|
|
2466
|
-
/**
|
|
2467
|
-
* Gets whether the horizontal auto-scroll direction of a node.
|
|
2468
|
-
* @param clientRect Dimensions of the node.
|
|
2469
|
-
* @param pointerX Position of the user's pointer along the x axis.
|
|
2470
|
-
*/
|
|
2471
|
-
function getHorizontalScrollDirection(clientRect, pointerX) {
|
|
2472
|
-
const { left, right, width } = clientRect;
|
|
2473
|
-
const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;
|
|
2474
|
-
if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) {
|
|
2475
|
-
return 1 /* AutoScrollHorizontalDirection.LEFT */;
|
|
2476
|
-
}
|
|
2477
|
-
else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) {
|
|
2478
|
-
return 2 /* AutoScrollHorizontalDirection.RIGHT */;
|
|
2479
|
-
}
|
|
2480
|
-
return 0 /* AutoScrollHorizontalDirection.NONE */;
|
|
2481
|
-
}
|
|
2482
|
-
/**
|
|
2483
|
-
* Checks whether the pointer coordinates are close to a ClientRect.
|
|
2484
|
-
* @param rect ClientRect to check against.
|
|
2485
|
-
* @param threshold Threshold around the ClientRect.
|
|
2486
|
-
* @param pointerX Coordinates along the X axis.
|
|
2487
|
-
* @param pointerY Coordinates along the Y axis.
|
|
2488
|
-
*/
|
|
2489
|
-
function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
|
|
2490
|
-
const { top, right, bottom, left, width, height } = rect;
|
|
2491
|
-
const xThreshold = width * threshold;
|
|
2492
|
-
const yThreshold = height * threshold;
|
|
2493
|
-
return pointerY > top - yThreshold && pointerY < bottom + yThreshold && pointerX > left - xThreshold && pointerX < right + xThreshold;
|
|
2494
|
-
}
|
|
2495
|
-
|
|
2496
2461
|
const scrollThreshold = 50;
|
|
2497
2462
|
var ScrollDirection;
|
|
2498
2463
|
(function (ScrollDirection) {
|
|
@@ -2919,21 +2884,6 @@ class GanttBarDrag {
|
|
|
2919
2884
|
this.dragScrollDistance = 0;
|
|
2920
2885
|
/** Horizontal direction in which the list is currently scrolling. */
|
|
2921
2886
|
this._horizontalScrollDirection = 0 /* AutoScrollHorizontalDirection.NONE */;
|
|
2922
|
-
this.startScrollInterval = () => {
|
|
2923
|
-
this.stopScrolling();
|
|
2924
|
-
interval(0, animationFrameScheduler)
|
|
2925
|
-
.pipe(takeUntil(this.stopScrollTimers$))
|
|
2926
|
-
.subscribe(() => {
|
|
2927
|
-
const node = this.dom.mainContainer;
|
|
2928
|
-
const scrollStep = autoScrollStep;
|
|
2929
|
-
if (this._horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
|
|
2930
|
-
node.scrollBy(-scrollStep, 0);
|
|
2931
|
-
}
|
|
2932
|
-
else if (this._horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
|
|
2933
|
-
node.scrollBy(scrollStep, 0);
|
|
2934
|
-
}
|
|
2935
|
-
});
|
|
2936
|
-
};
|
|
2937
2887
|
}
|
|
2938
2888
|
createDragRef(element) {
|
|
2939
2889
|
const dragRef = this.dragDrop.createDrag(element);
|
|
@@ -2981,36 +2931,36 @@ class GanttBarDrag {
|
|
|
2981
2931
|
dragRef.withBoundaryElement(this.dom.mainItems);
|
|
2982
2932
|
dragRef.started.subscribe(() => {
|
|
2983
2933
|
this.setDraggingStyles();
|
|
2984
|
-
this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
|
|
2985
|
-
this.createDragScrollEvent(dragRef).subscribe(() => {
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
});
|
|
2934
|
+
// this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
|
|
2935
|
+
// this.createDragScrollEvent(dragRef).subscribe(() => {
|
|
2936
|
+
// if (dragRef.isDragging()) {
|
|
2937
|
+
// const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
|
|
2938
|
+
// this.dragScrollDistance = dragScrollDistance;
|
|
2939
|
+
// this.barDragMove();
|
|
2940
|
+
// }
|
|
2941
|
+
// });
|
|
2992
2942
|
this.dragContainer.dragStarted.emit({ item: this.item.origin });
|
|
2993
2943
|
});
|
|
2994
2944
|
dragRef.moved.subscribe((event) => {
|
|
2995
|
-
this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
|
|
2945
|
+
// this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
|
|
2996
2946
|
this.barDragMoveDistance = event.distance.x;
|
|
2997
2947
|
if (!this.dragScrolling) {
|
|
2998
2948
|
this.barDragMove();
|
|
2999
2949
|
}
|
|
3000
2950
|
});
|
|
3001
2951
|
dragRef.ended.subscribe((event) => {
|
|
2952
|
+
this.clearDraggingStyles();
|
|
2953
|
+
this.closeDragBackdrop();
|
|
2954
|
+
event.source.reset();
|
|
2955
|
+
// this.stopScrolling();
|
|
2956
|
+
// this.dragScrolling = false;
|
|
2957
|
+
// this.dragScrollDistance = 0;
|
|
2958
|
+
this.barDragMoveDistance = 0;
|
|
3002
2959
|
this.item.updateRefs({
|
|
3003
2960
|
width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
|
|
3004
2961
|
x: this.ganttUpper.view.getXPointByDate(this.item.start),
|
|
3005
2962
|
y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
|
|
3006
2963
|
});
|
|
3007
|
-
this.clearDraggingStyles();
|
|
3008
|
-
this.closeDragBackdrop();
|
|
3009
|
-
event.source.reset();
|
|
3010
|
-
this.stopScrolling();
|
|
3011
|
-
this.dragScrolling = false;
|
|
3012
|
-
this.dragScrollDistance = 0;
|
|
3013
|
-
this.barDragMoveDistance = 0;
|
|
3014
2964
|
this.dragContainer.dragEnded.emit({ item: this.item.origin });
|
|
3015
2965
|
});
|
|
3016
2966
|
this.barDragRef = dragRef;
|
|
@@ -3026,18 +2976,18 @@ class GanttBarDrag {
|
|
|
3026
2976
|
dragRef.withBoundaryElement(this.dom.mainItems);
|
|
3027
2977
|
dragRef.started.subscribe(() => {
|
|
3028
2978
|
this.setDraggingStyles();
|
|
3029
|
-
this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
|
|
3030
|
-
this.createDragScrollEvent(dragRef).subscribe(() => {
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
});
|
|
2979
|
+
// this.containerScrollLeft = this.dom.mainContainer.scrollLeft;
|
|
2980
|
+
// this.createDragScrollEvent(dragRef).subscribe(() => {
|
|
2981
|
+
// if (dragRef.isDragging()) {
|
|
2982
|
+
// const dragScrollDistance = this.dom.mainContainer.scrollLeft - this.containerScrollLeft;
|
|
2983
|
+
// this.dragScrollDistance = dragScrollDistance;
|
|
2984
|
+
// this.barHandleDragMove(isBefore);
|
|
2985
|
+
// }
|
|
2986
|
+
// });
|
|
3037
2987
|
this.dragContainer.dragStarted.emit({ item: this.item.origin });
|
|
3038
2988
|
});
|
|
3039
2989
|
dragRef.moved.subscribe((event) => {
|
|
3040
|
-
this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
|
|
2990
|
+
// this.startScrollingIfNecessary(event.pointerPosition.x, event.pointerPosition.y);
|
|
3041
2991
|
this.barHandleDragMoveDistance = event.distance.x;
|
|
3042
2992
|
if (!this.dragScrolling) {
|
|
3043
2993
|
this.barHandleDragMove(isBefore);
|
|
@@ -3056,18 +3006,18 @@ class GanttBarDrag {
|
|
|
3056
3006
|
this.item.updateDate(this.item.start, this.item.start.endOfDay());
|
|
3057
3007
|
}
|
|
3058
3008
|
}
|
|
3009
|
+
this.clearDraggingStyles();
|
|
3010
|
+
this.closeDragBackdrop();
|
|
3011
|
+
event.source.reset();
|
|
3012
|
+
// this.stopScrolling();
|
|
3013
|
+
// this.dragScrolling = false;
|
|
3014
|
+
// this.dragScrollDistance = 0;
|
|
3015
|
+
this.barHandleDragMoveDistance = 0;
|
|
3059
3016
|
this.item.updateRefs({
|
|
3060
3017
|
width: this.ganttUpper.view.getDateRangeWidth(this.item.start.startOfDay(), this.item.end.endOfDay()),
|
|
3061
3018
|
x: this.ganttUpper.view.getXPointByDate(this.item.start),
|
|
3062
3019
|
y: (this.ganttUpper.styles.lineHeight - this.ganttUpper.styles.barHeight) / 2 - 1
|
|
3063
3020
|
});
|
|
3064
|
-
this.clearDraggingStyles();
|
|
3065
|
-
this.closeDragBackdrop();
|
|
3066
|
-
event.source.reset();
|
|
3067
|
-
this.stopScrolling();
|
|
3068
|
-
this.dragScrolling = false;
|
|
3069
|
-
this.dragScrollDistance = 0;
|
|
3070
|
-
this.barHandleDragMoveDistance = 0;
|
|
3071
3021
|
this.dragContainer.dragEnded.emit({ item: this.item.origin });
|
|
3072
3022
|
});
|
|
3073
3023
|
dragRefs.push(dragRef);
|
|
@@ -3134,7 +3084,7 @@ class GanttBarDrag {
|
|
|
3134
3084
|
const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask');
|
|
3135
3085
|
const rootRect = this.dom.root.getBoundingClientRect();
|
|
3136
3086
|
const dragRect = dragElement.getBoundingClientRect();
|
|
3137
|
-
const left = dragRect.left - rootRect.left - this.dom.side.clientWidth;
|
|
3087
|
+
const left = dragRect.left - rootRect.left - (this.dom.side.clientWidth + 1);
|
|
3138
3088
|
const width = dragRect.right - dragRect.left;
|
|
3139
3089
|
// Note: updating styles will cause re-layout so we have to place them consistently one by one.
|
|
3140
3090
|
dragMaskElement.style.left = left + 'px';
|
|
@@ -3238,24 +3188,37 @@ class GanttBarDrag {
|
|
|
3238
3188
|
this.linkDraggingLine = null;
|
|
3239
3189
|
}
|
|
3240
3190
|
}
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3191
|
+
// private startScrollInterval = () => {
|
|
3192
|
+
// this.stopScrolling();
|
|
3193
|
+
// interval(0, animationFrameScheduler)
|
|
3194
|
+
// .pipe(takeUntil(this.stopScrollTimers$))
|
|
3195
|
+
// .subscribe(() => {
|
|
3196
|
+
// const node = this.dom.mainContainer;
|
|
3197
|
+
// const scrollStep = autoScrollStep;
|
|
3198
|
+
// if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) {
|
|
3199
|
+
// node.scrollBy(-scrollStep, 0);
|
|
3200
|
+
// } else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) {
|
|
3201
|
+
// node.scrollBy(scrollStep, 0);
|
|
3202
|
+
// }
|
|
3203
|
+
// });
|
|
3204
|
+
// };
|
|
3205
|
+
// private startScrollingIfNecessary(pointerX: number, pointerY: number) {
|
|
3206
|
+
// const clientRect = this.dom.mainContainer.getBoundingClientRect();
|
|
3207
|
+
// if (isPointerNearClientRect(clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
|
|
3208
|
+
// const horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
|
|
3209
|
+
// if (horizontalScrollDirection) {
|
|
3210
|
+
// this._horizontalScrollDirection = horizontalScrollDirection;
|
|
3211
|
+
// this.dragScrolling = true;
|
|
3212
|
+
// this._ngZone.runOutsideAngular(this.startScrollInterval);
|
|
3213
|
+
// } else {
|
|
3214
|
+
// this.dragScrolling = false;
|
|
3215
|
+
// this.stopScrolling();
|
|
3216
|
+
// }
|
|
3217
|
+
// }
|
|
3218
|
+
// }
|
|
3219
|
+
// private stopScrolling() {
|
|
3220
|
+
// this.stopScrollTimers$.next();
|
|
3221
|
+
// }
|
|
3259
3222
|
isStartOrEndInsideView(start, end) {
|
|
3260
3223
|
const itemStart = start.getUnixTime();
|
|
3261
3224
|
const itemEnd = end.getUnixTime();
|
|
@@ -3296,7 +3259,7 @@ class GanttBarDrag {
|
|
|
3296
3259
|
this.dragRefs.forEach((dragRef) => dragRef.dispose());
|
|
3297
3260
|
this.destroy$.next();
|
|
3298
3261
|
this.destroy$.complete();
|
|
3299
|
-
this.stopScrolling();
|
|
3262
|
+
// this.stopScrolling();
|
|
3300
3263
|
this.stopScrollTimers$.complete();
|
|
3301
3264
|
}
|
|
3302
3265
|
}
|