@progress/kendo-angular-gantt 0.3.0-dev.202201111723 → 0.3.0-dev.202201131518
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/dist/cdn/js/kendo-angular-gantt.js +2 -2
- package/dist/cdn/main.js +4 -10
- package/dist/es/common/touch-enabled.js +9 -0
- package/dist/es/dependencies/utils.js +34 -0
- package/dist/es/dragging/dependency-drag-create.directive.js +347 -0
- package/dist/es/dragging/drag-validation-tooltip.component.js +27 -0
- package/dist/es/editing/{util.js → utils.js} +0 -0
- package/dist/es/gantt.component.js +125 -7
- package/dist/es/gantt.module.js +23 -6
- package/dist/es/index.js +4 -0
- package/dist/es/main.js +1 -0
- package/dist/es/models/events/dependency-add-event.interface.js +4 -0
- package/dist/es/models/view-item.interface.js +4 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/rendering/gantt-milestone-task.component.js +7 -4
- package/dist/es/rendering/gantt-summary-task.component.js +7 -4
- package/dist/es/rendering/gantt-task-base.js +30 -19
- package/dist/es/rendering/gantt-task.component.js +8 -6
- package/dist/es/rendering/gantt-tasks-table-body.component.js +5 -1
- package/dist/es/scrolling/drag-scroll-settings.js +20 -0
- package/dist/es/scrolling/timeline-scroll.directive.js +89 -0
- package/dist/es/scrolling/timeline-scroll.service.js +39 -0
- package/dist/es/scrolling/utils.js +80 -0
- package/dist/es/timeline/gantt-timeline.component.js +45 -3
- package/dist/es/utils.js +143 -12
- package/dist/es2015/common/touch-enabled.d.ts +9 -0
- package/dist/es2015/common/touch-enabled.js +9 -0
- package/dist/es2015/dependencies/utils.d.ts +15 -0
- package/dist/es2015/dependencies/utils.js +34 -0
- package/dist/es2015/dragging/dependency-drag-create.directive.d.ts +72 -0
- package/dist/es2015/dragging/dependency-drag-create.directive.js +324 -0
- package/dist/es2015/dragging/drag-validation-tooltip.component.d.ts +29 -0
- package/dist/es2015/dragging/drag-validation-tooltip.component.js +76 -0
- package/dist/es2015/editing/{util.d.ts → utils.d.ts} +0 -0
- package/dist/es2015/editing/{util.js → utils.js} +0 -0
- package/dist/es2015/gantt.component.d.ts +39 -3
- package/dist/es2015/gantt.component.js +117 -6
- package/dist/es2015/gantt.module.js +23 -6
- package/dist/es2015/index.d.ts +4 -0
- package/dist/es2015/index.js +4 -0
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/main.d.ts +1 -0
- package/dist/es2015/main.js +1 -0
- package/dist/es2015/models/events/dependency-add-event.interface.d.ts +26 -0
- package/dist/es2015/models/events/dependency-add-event.interface.js +4 -0
- package/dist/es2015/models/models.d.ts +2 -0
- package/dist/es2015/models/view-item.interface.d.ts +35 -0
- package/dist/es2015/models/view-item.interface.js +4 -0
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/rendering/gantt-milestone-task.component.d.ts +2 -1
- package/dist/es2015/rendering/gantt-milestone-task.component.js +18 -5
- package/dist/es2015/rendering/gantt-summary-task.component.d.ts +2 -1
- package/dist/es2015/rendering/gantt-summary-task.component.js +18 -5
- package/dist/es2015/rendering/gantt-task-base.d.ts +11 -5
- package/dist/es2015/rendering/gantt-task-base.js +30 -19
- package/dist/es2015/rendering/gantt-task.component.d.ts +2 -1
- package/dist/es2015/rendering/gantt-task.component.js +19 -7
- package/dist/es2015/rendering/gantt-tasks-table-body.component.d.ts +1 -0
- package/dist/es2015/rendering/gantt-tasks-table-body.component.js +10 -3
- package/dist/es2015/scrolling/drag-scroll-settings.d.ts +47 -0
- package/dist/es2015/scrolling/drag-scroll-settings.js +20 -0
- package/dist/es2015/scrolling/timeline-scroll.directive.d.ts +24 -0
- package/dist/es2015/scrolling/timeline-scroll.directive.js +78 -0
- package/dist/es2015/scrolling/timeline-scroll.service.d.ts +20 -0
- package/dist/es2015/scrolling/timeline-scroll.service.js +44 -0
- package/dist/es2015/scrolling/utils.d.ts +29 -0
- package/dist/es2015/scrolling/utils.js +80 -0
- package/dist/es2015/timeline/gantt-timeline.component.d.ts +25 -2
- package/dist/es2015/timeline/gantt-timeline.component.js +56 -3
- package/dist/es2015/utils.d.ts +70 -8
- package/dist/es2015/utils.js +143 -12
- package/dist/fesm2015/index.js +1337 -372
- package/dist/fesm5/index.js +1206 -298
- package/dist/npm/common/touch-enabled.js +11 -0
- package/dist/npm/dependencies/utils.js +34 -0
- package/dist/npm/dragging/dependency-drag-create.directive.js +349 -0
- package/dist/npm/dragging/drag-validation-tooltip.component.js +29 -0
- package/dist/npm/editing/{util.js → utils.js} +0 -0
- package/dist/npm/gantt.component.js +127 -9
- package/dist/npm/gantt.module.js +22 -5
- package/dist/npm/index.js +8 -0
- package/dist/npm/main.js +2 -0
- package/dist/npm/models/events/dependency-add-event.interface.js +6 -0
- package/dist/npm/models/view-item.interface.js +6 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/rendering/gantt-milestone-task.component.js +6 -3
- package/dist/npm/rendering/gantt-summary-task.component.js +6 -3
- package/dist/npm/rendering/gantt-task-base.js +30 -19
- package/dist/npm/rendering/gantt-task.component.js +7 -5
- package/dist/npm/rendering/gantt-tasks-table-body.component.js +5 -1
- package/dist/npm/scrolling/drag-scroll-settings.js +22 -0
- package/dist/npm/scrolling/timeline-scroll.directive.js +91 -0
- package/dist/npm/scrolling/timeline-scroll.service.js +41 -0
- package/dist/npm/scrolling/utils.js +83 -0
- package/dist/npm/timeline/gantt-timeline.component.js +44 -2
- package/dist/npm/utils.js +143 -12
- package/dist/systemjs/kendo-angular-gantt.js +1 -1
- package/package.json +5 -4
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { Subject } from 'rxjs';
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*
|
|
9
|
+
* Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
|
|
10
|
+
* The scrolling is performed based on client (viewport) coordinates.
|
|
11
|
+
*/
|
|
12
|
+
export declare class TimelineScrollService {
|
|
13
|
+
readonly horizontalScroll: Subject<number>;
|
|
14
|
+
readonly verticalScroll: Subject<number>;
|
|
15
|
+
readonly scrollCancel: Subject<any>;
|
|
16
|
+
ngOnDestroy(): void;
|
|
17
|
+
requestHorizontalScroll(clientTop: number): void;
|
|
18
|
+
requestVerticalScroll(clientLeft: number): void;
|
|
19
|
+
requestScrollCancel(): void;
|
|
20
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as tslib_1 from "tslib";
|
|
6
|
+
import { Injectable } from '@angular/core';
|
|
7
|
+
import { Subject } from 'rxjs';
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*
|
|
11
|
+
* Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
|
|
12
|
+
* The scrolling is performed based on client (viewport) coordinates.
|
|
13
|
+
*/
|
|
14
|
+
let TimelineScrollService = class TimelineScrollService {
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*
|
|
18
|
+
* Notifies the timeline-scroll.directive to scroll into view to requested coordinates.
|
|
19
|
+
* The scrolling is performed based on client (viewport) coordinates.
|
|
20
|
+
*/
|
|
21
|
+
constructor() {
|
|
22
|
+
this.horizontalScroll = new Subject();
|
|
23
|
+
this.verticalScroll = new Subject();
|
|
24
|
+
this.scrollCancel = new Subject();
|
|
25
|
+
}
|
|
26
|
+
ngOnDestroy() {
|
|
27
|
+
this.horizontalScroll.complete();
|
|
28
|
+
this.verticalScroll.complete();
|
|
29
|
+
this.scrollCancel.complete();
|
|
30
|
+
}
|
|
31
|
+
requestHorizontalScroll(clientTop) {
|
|
32
|
+
this.horizontalScroll.next(clientTop);
|
|
33
|
+
}
|
|
34
|
+
requestVerticalScroll(clientLeft) {
|
|
35
|
+
this.verticalScroll.next(clientLeft);
|
|
36
|
+
}
|
|
37
|
+
requestScrollCancel() {
|
|
38
|
+
this.scrollCancel.next();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
TimelineScrollService = tslib_1.__decorate([
|
|
42
|
+
Injectable()
|
|
43
|
+
], TimelineScrollService);
|
|
44
|
+
export { TimelineScrollService };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*
|
|
9
|
+
* Scrolls the element in the given direction by the provided step in the provided scroll axis.
|
|
10
|
+
*
|
|
11
|
+
* If the targeted scroll incrementation doesn't yield any result due to device pixel ratio issues (https://github.com/dimitar-pechev/RenderingIndependentScrollOffsets#readme),
|
|
12
|
+
* increments the step with 1px and again attempts to change the scrollTop of the element, until the content is actually scrolled.
|
|
13
|
+
*
|
|
14
|
+
* Cuts the operation short after 20 unsuccessful attempts to prevent infinite loops in possible corner-case scenarios.
|
|
15
|
+
*/
|
|
16
|
+
export declare const scrollElement: (element: Element, step: number, direction: ScrollDirection, scrollAxis: ScrollAxis) => void;
|
|
17
|
+
/**
|
|
18
|
+
* @hidden
|
|
19
|
+
*
|
|
20
|
+
* As client coordinates are not restricted to the range 0px - {viewportSize}px, but can have negative starting values or ending values greater than the viewport size,
|
|
21
|
+
* this function extracts the visible boundaries of the provided element - fall-backing to 0 when the top/left are below 0,
|
|
22
|
+
* and fall-backing to the actual visible size of the container for bottom/right.
|
|
23
|
+
*/
|
|
24
|
+
export declare const getViewportBoundaries: (element: Element) => {
|
|
25
|
+
top: number;
|
|
26
|
+
left: number;
|
|
27
|
+
right: number;
|
|
28
|
+
bottom: number;
|
|
29
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
6
|
+
import { ScrollAxis, ScrollDirection } from './drag-scroll-settings';
|
|
7
|
+
import { isPresent } from '../utils';
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*
|
|
11
|
+
* Checks if the beginning of the scrollable element is reached (top/left).
|
|
12
|
+
* Floors the top value.
|
|
13
|
+
*/
|
|
14
|
+
const isUpperLimitReached = (element, axis) => Math.floor(element[axis]) <= 0;
|
|
15
|
+
const ɵ0 = isUpperLimitReached;
|
|
16
|
+
/**
|
|
17
|
+
* @hidden
|
|
18
|
+
*
|
|
19
|
+
* Checks if the end of the scrollable element is reached (bottom/right).
|
|
20
|
+
* Ceils the top value.
|
|
21
|
+
*/
|
|
22
|
+
const isBottomLimitReached = (element, axis) => {
|
|
23
|
+
const elementSize = axis === ScrollAxis.Horizontal ?
|
|
24
|
+
element.scrollWidth - element.clientWidth :
|
|
25
|
+
element.scrollHeight - element.clientHeight;
|
|
26
|
+
return Math.ceil(element[axis]) >= elementSize;
|
|
27
|
+
};
|
|
28
|
+
const ɵ1 = isBottomLimitReached;
|
|
29
|
+
/**
|
|
30
|
+
* @hidden
|
|
31
|
+
*
|
|
32
|
+
* Scrolls the element in the given direction by the provided step in the provided scroll axis.
|
|
33
|
+
*
|
|
34
|
+
* If the targeted scroll incrementation doesn't yield any result due to device pixel ratio issues (https://github.com/dimitar-pechev/RenderingIndependentScrollOffsets#readme),
|
|
35
|
+
* increments the step with 1px and again attempts to change the scrollTop of the element, until the content is actually scrolled.
|
|
36
|
+
*
|
|
37
|
+
* Cuts the operation short after 20 unsuccessful attempts to prevent infinite loops in possible corner-case scenarios.
|
|
38
|
+
*/
|
|
39
|
+
export const scrollElement = (element, step, direction, scrollAxis) => {
|
|
40
|
+
if (!(isPresent(element) && isDocumentAvailable())) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
const initialScrollPosition = element[scrollAxis];
|
|
44
|
+
let currentStep = step;
|
|
45
|
+
let iterations = 0;
|
|
46
|
+
while (initialScrollPosition === element[scrollAxis] &&
|
|
47
|
+
!(direction === ScrollDirection.Backwards && isUpperLimitReached(element, scrollAxis)) &&
|
|
48
|
+
!(direction === ScrollDirection.Forward && isBottomLimitReached(element, scrollAxis)) &&
|
|
49
|
+
iterations < 20 // cut the operation short in 20 attempts - in case of a wild corner case
|
|
50
|
+
) {
|
|
51
|
+
element[scrollAxis] += (currentStep * direction);
|
|
52
|
+
// try with a larger step if the current one doesn't update the scroll position successfully
|
|
53
|
+
currentStep += 1;
|
|
54
|
+
iterations += 1;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* @hidden
|
|
59
|
+
*
|
|
60
|
+
* As client coordinates are not restricted to the range 0px - {viewportSize}px, but can have negative starting values or ending values greater than the viewport size,
|
|
61
|
+
* this function extracts the visible boundaries of the provided element - fall-backing to 0 when the top/left are below 0,
|
|
62
|
+
* and fall-backing to the actual visible size of the container for bottom/right.
|
|
63
|
+
*/
|
|
64
|
+
export const getViewportBoundaries = (element) => {
|
|
65
|
+
const elementRect = element.getBoundingClientRect();
|
|
66
|
+
// if the beginning of the scrollable container is above/before the current viewport, fall-back to 0
|
|
67
|
+
const topLimit = Math.max(elementRect.top, 0);
|
|
68
|
+
const leftLimit = Math.max(elementRect.left, 0);
|
|
69
|
+
// if the end of the scrollable container is beneath/after the current viewport, fall-back to its client height
|
|
70
|
+
// add the distance from the start of the viewport to the beginning of the container to ensure scrolling bottom begins when the actual end of the container is reached
|
|
71
|
+
const bottomLimit = topLimit + Math.min(elementRect.bottom, element.clientHeight);
|
|
72
|
+
const rightLimit = leftLimit + Math.min(elementRect.right, element.clientWidth);
|
|
73
|
+
return {
|
|
74
|
+
top: topLimit,
|
|
75
|
+
bottom: bottomLimit,
|
|
76
|
+
left: leftLimit,
|
|
77
|
+
right: rightLimit
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
export { ɵ0, ɵ1 };
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { AfterViewInit, ElementRef, NgZone, Renderer2, TemplateRef } from '@angular/core';
|
|
5
|
+
import { AfterViewInit, ElementRef, EventEmitter, NgZone, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
|
|
6
6
|
import { ScrollSyncService } from '../scrolling/scroll-sync.service';
|
|
7
7
|
import { DependencyDomService } from '../dependencies/dependency-dom.service';
|
|
8
|
-
import { TimelineViewType, TaskClassFn } from '../models/models';
|
|
8
|
+
import { TimelineViewType, TaskClassFn, DragScrollSettings } from '../models/models';
|
|
9
9
|
/**
|
|
10
10
|
* @hidden
|
|
11
11
|
*/
|
|
@@ -14,10 +14,24 @@ export declare class GanttTimelineComponent implements AfterViewInit {
|
|
|
14
14
|
private dependencyDomService;
|
|
15
15
|
private renderer;
|
|
16
16
|
private zone;
|
|
17
|
+
/**
|
|
18
|
+
* Represents the scrollable container of the timeline content.
|
|
19
|
+
* Used externally by the DependencyDragCreateDirective.
|
|
20
|
+
*/
|
|
17
21
|
timelineContent: ElementRef<HTMLElement>;
|
|
18
22
|
timelineColumns: ElementRef<HTMLElement>;
|
|
19
23
|
timelineHeaderWrap: ElementRef<HTMLElement>;
|
|
20
24
|
tasksContainer: ElementRef<HTMLElement>;
|
|
25
|
+
/**
|
|
26
|
+
* Represents the view container ref used for rendering the dependency drag popop.
|
|
27
|
+
* Used externally by the DependencyDragCreateDirective.
|
|
28
|
+
*/
|
|
29
|
+
dragPopupContainer: ViewContainerRef;
|
|
30
|
+
/**
|
|
31
|
+
* Represents the polyline element used for rendering the dependency drag editing interaction.
|
|
32
|
+
* Used externally by the DependencyDragCreateDirective.
|
|
33
|
+
*/
|
|
34
|
+
dependencyDragCreatePolyline: ElementRef<SVGPolylineElement>;
|
|
21
35
|
hostClass: boolean;
|
|
22
36
|
rows: any[];
|
|
23
37
|
slots: any[];
|
|
@@ -29,8 +43,17 @@ export declare class GanttTimelineComponent implements AfterViewInit {
|
|
|
29
43
|
summaryTaskTemplate: TemplateRef<any>;
|
|
30
44
|
taskClass: TaskClassFn;
|
|
31
45
|
isTaskSelected: (item: object) => boolean;
|
|
46
|
+
renderDependencyDragClues: boolean;
|
|
47
|
+
dragScrollSettings: DragScrollSettings;
|
|
32
48
|
hasChildren: (item: object) => boolean;
|
|
33
49
|
dependencies: any[];
|
|
50
|
+
timelineContainerPress: EventEmitter<any>;
|
|
51
|
+
timelineContainerDrag: EventEmitter<any>;
|
|
52
|
+
timelineContainerRelease: EventEmitter<any>;
|
|
53
|
+
/**
|
|
54
|
+
* Specifies whether the draggable will attach or detach its pointer event listeners.
|
|
55
|
+
*/
|
|
56
|
+
readonly draggableEnabled: boolean;
|
|
34
57
|
private subscriptions;
|
|
35
58
|
constructor(scrollSyncService: ScrollSyncService, dependencyDomService: DependencyDomService, renderer: Renderer2, zone: NgZone);
|
|
36
59
|
ngAfterViewInit(): void;
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as tslib_1 from "tslib";
|
|
6
|
-
import { Component, ElementRef, HostBinding, Input, NgZone, Renderer2, TemplateRef, ViewChild } from '@angular/core';
|
|
6
|
+
import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
|
|
7
7
|
import { Subscription } from 'rxjs';
|
|
8
8
|
import { filter, map, switchMap, take } from 'rxjs/operators';
|
|
9
|
+
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
9
10
|
import { ScrollSyncService } from '../scrolling/scroll-sync.service';
|
|
10
11
|
import { DependencyDomService } from '../dependencies/dependency-dom.service';
|
|
11
12
|
import { isPresent } from '../utils';
|
|
12
|
-
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
13
13
|
/**
|
|
14
14
|
* @hidden
|
|
15
15
|
*/
|
|
@@ -21,6 +21,10 @@ let GanttTimelineComponent = class GanttTimelineComponent {
|
|
|
21
21
|
this.zone = zone;
|
|
22
22
|
this.hostClass = true;
|
|
23
23
|
this.dependencies = [];
|
|
24
|
+
// as all drag-and-drop operations are on the timeline container, use a single draggable instance
|
|
25
|
+
this.timelineContainerPress = new EventEmitter();
|
|
26
|
+
this.timelineContainerDrag = new EventEmitter();
|
|
27
|
+
this.timelineContainerRelease = new EventEmitter();
|
|
24
28
|
this.subscriptions = new Subscription();
|
|
25
29
|
this.subscriptions.add(
|
|
26
30
|
// task changes indicates change in row content, number, height, etc.
|
|
@@ -32,6 +36,12 @@ let GanttTimelineComponent = class GanttTimelineComponent {
|
|
|
32
36
|
this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
|
|
33
37
|
}));
|
|
34
38
|
}
|
|
39
|
+
/**
|
|
40
|
+
* Specifies whether the draggable will attach or detach its pointer event listeners.
|
|
41
|
+
*/
|
|
42
|
+
get draggableEnabled() {
|
|
43
|
+
return this.renderDependencyDragClues;
|
|
44
|
+
}
|
|
35
45
|
ngAfterViewInit() {
|
|
36
46
|
const timelineHeader = this.timelineHeaderWrap.nativeElement;
|
|
37
47
|
const rightContainer = this.timelineContent.nativeElement;
|
|
@@ -62,6 +72,14 @@ tslib_1.__decorate([
|
|
|
62
72
|
ViewChild('tasksContainer', { static: true }),
|
|
63
73
|
tslib_1.__metadata("design:type", ElementRef)
|
|
64
74
|
], GanttTimelineComponent.prototype, "tasksContainer", void 0);
|
|
75
|
+
tslib_1.__decorate([
|
|
76
|
+
ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
|
|
77
|
+
tslib_1.__metadata("design:type", ViewContainerRef)
|
|
78
|
+
], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
|
|
79
|
+
tslib_1.__decorate([
|
|
80
|
+
ViewChild('dependencyDragCreatePolyline', { static: false }),
|
|
81
|
+
tslib_1.__metadata("design:type", ElementRef)
|
|
82
|
+
], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
|
|
65
83
|
tslib_1.__decorate([
|
|
66
84
|
HostBinding('class.k-gantt-timeline'),
|
|
67
85
|
tslib_1.__metadata("design:type", Boolean)
|
|
@@ -106,6 +124,14 @@ tslib_1.__decorate([
|
|
|
106
124
|
Input(),
|
|
107
125
|
tslib_1.__metadata("design:type", Function)
|
|
108
126
|
], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
|
|
127
|
+
tslib_1.__decorate([
|
|
128
|
+
Input(),
|
|
129
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
130
|
+
], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
|
|
131
|
+
tslib_1.__decorate([
|
|
132
|
+
Input(),
|
|
133
|
+
tslib_1.__metadata("design:type", Object)
|
|
134
|
+
], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
|
|
109
135
|
tslib_1.__decorate([
|
|
110
136
|
Input(),
|
|
111
137
|
tslib_1.__metadata("design:type", Function)
|
|
@@ -114,6 +140,18 @@ tslib_1.__decorate([
|
|
|
114
140
|
Input(),
|
|
115
141
|
tslib_1.__metadata("design:type", Array)
|
|
116
142
|
], GanttTimelineComponent.prototype, "dependencies", void 0);
|
|
143
|
+
tslib_1.__decorate([
|
|
144
|
+
Output(),
|
|
145
|
+
tslib_1.__metadata("design:type", EventEmitter)
|
|
146
|
+
], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
|
|
147
|
+
tslib_1.__decorate([
|
|
148
|
+
Output(),
|
|
149
|
+
tslib_1.__metadata("design:type", EventEmitter)
|
|
150
|
+
], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
|
|
151
|
+
tslib_1.__decorate([
|
|
152
|
+
Output(),
|
|
153
|
+
tslib_1.__metadata("design:type", EventEmitter)
|
|
154
|
+
], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
|
|
117
155
|
GanttTimelineComponent = tslib_1.__decorate([
|
|
118
156
|
Component({
|
|
119
157
|
selector: 'kendo-gantt-timeline',
|
|
@@ -133,7 +171,17 @@ GanttTimelineComponent = tslib_1.__decorate([
|
|
|
133
171
|
</table>
|
|
134
172
|
</div>
|
|
135
173
|
</div>
|
|
136
|
-
<div
|
|
174
|
+
<div
|
|
175
|
+
#timelineContent
|
|
176
|
+
class="k-grid-content"
|
|
177
|
+
kendoGanttTimelineScrollable
|
|
178
|
+
[scrollSettings]="dragScrollSettings"
|
|
179
|
+
kendoDraggable
|
|
180
|
+
[enableDrag]="draggableEnabled"
|
|
181
|
+
(kendoPress)="timelineContainerPress.emit($event)"
|
|
182
|
+
(kendoDrag)="timelineContainerDrag.emit($event)"
|
|
183
|
+
(kendoRelease)="timelineContainerRelease.emit($event)"
|
|
184
|
+
>
|
|
137
185
|
<div class="k-gantt-tables">
|
|
138
186
|
<table
|
|
139
187
|
class="k-gantt-rows"
|
|
@@ -186,6 +234,7 @@ GanttTimelineComponent = tslib_1.__decorate([
|
|
|
186
234
|
[taskClass]="taskClass"
|
|
187
235
|
[hasChildren]="hasChildren"
|
|
188
236
|
[isTaskSelected]="isTaskSelected"
|
|
237
|
+
[renderDependencyDragClues]="renderDependencyDragClues"
|
|
189
238
|
>
|
|
190
239
|
</tbody>
|
|
191
240
|
</table>
|
|
@@ -196,7 +245,11 @@ GanttTimelineComponent = tslib_1.__decorate([
|
|
|
196
245
|
kendoGanttDependency
|
|
197
246
|
[dependency]="dependency"
|
|
198
247
|
/>
|
|
248
|
+
<polyline #dependencyDragCreatePolyline />
|
|
199
249
|
</svg>
|
|
250
|
+
|
|
251
|
+
<!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
|
|
252
|
+
<ng-container #dragPopupContainer></ng-container>
|
|
200
253
|
</div>
|
|
201
254
|
</div>
|
|
202
255
|
`
|
package/dist/es2015/utils.d.ts
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Day } from '@progress/kendo-date-math';
|
|
6
6
|
import { GanttColumnBase, GanttColumnGroupComponent } from './columns/columns';
|
|
7
|
+
import { DependencyType } from './models/dependency-type.enum';
|
|
8
|
+
import { ViewItem } from './models/view-item.interface';
|
|
7
9
|
/**
|
|
8
10
|
* @hidden
|
|
9
11
|
*/
|
|
@@ -66,32 +68,92 @@ export declare const isString: (contender: any) => contender is string;
|
|
|
66
68
|
* Native Omit appears in TS v3.5, we can use it when we drop Angular 8 (requires v3.4)
|
|
67
69
|
*/
|
|
68
70
|
export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
|
71
|
+
/**
|
|
72
|
+
* @hidden
|
|
73
|
+
*
|
|
74
|
+
* Gets the closest timeline task wrapper element from an event target.
|
|
75
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
76
|
+
*/
|
|
77
|
+
export declare const getClosestTaskWrapper: (element: Element, parentScope: Element) => Element;
|
|
78
|
+
/**
|
|
79
|
+
* @hidden
|
|
80
|
+
*
|
|
81
|
+
* Checks whether the queried item or its parent items has a `k-task-wrap` selector.
|
|
82
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
83
|
+
*/
|
|
84
|
+
export declare const isTaskWrapper: (contender: Element, parentScope: Element) => boolean;
|
|
69
85
|
/**
|
|
70
86
|
* @hidden
|
|
71
87
|
*
|
|
72
88
|
* Gets the closest timeline task element from an event target.
|
|
73
|
-
* Restricts the search up to the provided
|
|
89
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
74
90
|
*/
|
|
75
|
-
export declare const getClosestTask: (element: Element,
|
|
91
|
+
export declare const getClosestTask: (element: Element, parentScope: Element) => Element;
|
|
76
92
|
/**
|
|
77
93
|
* @hidden
|
|
78
94
|
*
|
|
79
95
|
* Gets the closest timeline task element index from an event target.
|
|
80
96
|
* Uses the `data-task-index` attribute assigned to each task.
|
|
81
|
-
* Restricts the search up to the provided
|
|
97
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
82
98
|
*/
|
|
83
|
-
export declare const getClosestTaskIndex: (element: Element,
|
|
99
|
+
export declare const getClosestTaskIndex: (element: Element, parentScope: Element) => number;
|
|
84
100
|
/**
|
|
85
101
|
* @hidden
|
|
86
102
|
*
|
|
87
103
|
* Checks whether the queried item or its parent items has a `k-task` selector.
|
|
88
|
-
* Restricts the search up to the provided
|
|
104
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
89
105
|
*/
|
|
90
|
-
export declare const isTask: (contender: Element,
|
|
106
|
+
export declare const isTask: (contender: Element, parentScope: Element) => boolean;
|
|
91
107
|
/**
|
|
92
108
|
* @hidden
|
|
93
109
|
*
|
|
94
110
|
* Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
|
|
95
|
-
* Restricts the search up to the provided
|
|
111
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
112
|
+
*/
|
|
113
|
+
export declare const isClearButton: (contender: Element, parentScope: Element) => boolean;
|
|
114
|
+
/**
|
|
115
|
+
* @hidden
|
|
116
|
+
*
|
|
117
|
+
* Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
|
|
118
|
+
*/
|
|
119
|
+
export declare const isDependencyDragClue: (element: Element) => boolean;
|
|
120
|
+
/**
|
|
121
|
+
* @hidden
|
|
122
|
+
*
|
|
123
|
+
* Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
|
|
124
|
+
*/
|
|
125
|
+
export declare const isDependencyDragStartClue: (element: Element) => boolean;
|
|
126
|
+
/**
|
|
127
|
+
* @hidden
|
|
128
|
+
*
|
|
129
|
+
* Gets the `DependencyType` for an attempted dependency create from the provided two elements.
|
|
130
|
+
* The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
|
|
131
|
+
*/
|
|
132
|
+
export declare const getDependencyTypeFromTargetTasks: (fromTaskClue: Element, toTaskClue: Element) => DependencyType;
|
|
133
|
+
/**
|
|
134
|
+
* @hidden
|
|
135
|
+
*
|
|
136
|
+
* Checks whether the two provided drag clues belong to the same task element.
|
|
137
|
+
*/
|
|
138
|
+
export declare const sameTaskClues: (fromTaskClue: Element, toTaskClue: Element, parentScope: Element) => boolean;
|
|
139
|
+
/**
|
|
140
|
+
* @hidden
|
|
141
|
+
*
|
|
142
|
+
* Fits a contender number between a min and max range.
|
|
143
|
+
* If the contender is below the min value, the min value is returned.
|
|
144
|
+
* If the contender is above the max value, the max value is returned.
|
|
145
|
+
*/
|
|
146
|
+
export declare const fitToRange: (contender: number, min: number, max: number) => number;
|
|
147
|
+
/**
|
|
148
|
+
* @hidden
|
|
149
|
+
*
|
|
150
|
+
* Checks whether either of the two provided tasks is a parent of the other.
|
|
151
|
+
*/
|
|
152
|
+
export declare const areParentChild: (taskA: ViewItem, taskB: ViewItem) => boolean;
|
|
153
|
+
/**
|
|
154
|
+
* @hidden
|
|
155
|
+
*
|
|
156
|
+
* Extracts an element from the provided client coords.
|
|
157
|
+
* Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
|
|
96
158
|
*/
|
|
97
|
-
export declare const
|
|
159
|
+
export declare const elementFromPoint: (clientX: number, clientY: number) => HTMLElement;
|
package/dist/es2015/utils.js
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { isDocumentAvailable, closestInScope, matchesClasses } from '@progress/kendo-angular-common';
|
|
6
6
|
import { addDays, addWeeks, cloneDate, firstDayInWeek } from '@progress/kendo-date-math';
|
|
7
|
+
import { DependencyType } from './models/dependency-type.enum';
|
|
7
8
|
/**
|
|
8
9
|
* @hidden
|
|
9
10
|
*/
|
|
@@ -107,24 +108,43 @@ export const isNumber = (contender) => typeof contender === 'number' && !isNaN(c
|
|
|
107
108
|
* @hidden
|
|
108
109
|
*/
|
|
109
110
|
export const isString = (contender) => typeof contender === 'string';
|
|
111
|
+
/**
|
|
112
|
+
* @hidden
|
|
113
|
+
*
|
|
114
|
+
* Gets the closest timeline task wrapper element from an event target.
|
|
115
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
116
|
+
*/
|
|
117
|
+
export const getClosestTaskWrapper = (element, parentScope) => {
|
|
118
|
+
return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
|
|
119
|
+
};
|
|
120
|
+
/**
|
|
121
|
+
* @hidden
|
|
122
|
+
*
|
|
123
|
+
* Checks whether the queried item or its parent items has a `k-task-wrap` selector.
|
|
124
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
125
|
+
*/
|
|
126
|
+
export const isTaskWrapper = (contender, parentScope) => {
|
|
127
|
+
const taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
|
|
128
|
+
return isPresent(taskWrapper);
|
|
129
|
+
};
|
|
110
130
|
/**
|
|
111
131
|
* @hidden
|
|
112
132
|
*
|
|
113
133
|
* Gets the closest timeline task element from an event target.
|
|
114
|
-
* Restricts the search up to the provided
|
|
134
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
115
135
|
*/
|
|
116
|
-
export const getClosestTask = (element,
|
|
117
|
-
return closestInScope(element, matchesClasses('k-task'),
|
|
136
|
+
export const getClosestTask = (element, parentScope) => {
|
|
137
|
+
return closestInScope(element, matchesClasses('k-task'), parentScope);
|
|
118
138
|
};
|
|
119
139
|
/**
|
|
120
140
|
* @hidden
|
|
121
141
|
*
|
|
122
142
|
* Gets the closest timeline task element index from an event target.
|
|
123
143
|
* Uses the `data-task-index` attribute assigned to each task.
|
|
124
|
-
* Restricts the search up to the provided
|
|
144
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
125
145
|
*/
|
|
126
|
-
export const getClosestTaskIndex = (element,
|
|
127
|
-
const task = closestInScope(element, matchesClasses('k-task'),
|
|
146
|
+
export const getClosestTaskIndex = (element, parentScope) => {
|
|
147
|
+
const task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
|
|
128
148
|
if (!isPresent(task)) {
|
|
129
149
|
return null;
|
|
130
150
|
}
|
|
@@ -134,19 +154,130 @@ export const getClosestTaskIndex = (element, gantt) => {
|
|
|
134
154
|
* @hidden
|
|
135
155
|
*
|
|
136
156
|
* Checks whether the queried item or its parent items has a `k-task` selector.
|
|
137
|
-
* Restricts the search up to the provided
|
|
157
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
138
158
|
*/
|
|
139
|
-
export const isTask = (contender,
|
|
140
|
-
const task = closestInScope(contender, matchesClasses('k-task'),
|
|
159
|
+
export const isTask = (contender, parentScope) => {
|
|
160
|
+
const task = closestInScope(contender, matchesClasses('k-task'), parentScope);
|
|
141
161
|
return isPresent(task);
|
|
142
162
|
};
|
|
143
163
|
/**
|
|
144
164
|
* @hidden
|
|
145
165
|
*
|
|
146
166
|
* Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
|
|
147
|
-
* Restricts the search up to the provided
|
|
167
|
+
* Restricts the search up to the provided parent element from the second param.
|
|
148
168
|
*/
|
|
149
|
-
export const isClearButton = (contender,
|
|
150
|
-
const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'),
|
|
169
|
+
export const isClearButton = (contender, parentScope) => {
|
|
170
|
+
const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
|
|
151
171
|
return isPresent(clearButtonContainer);
|
|
152
172
|
};
|
|
173
|
+
/**
|
|
174
|
+
* @hidden
|
|
175
|
+
*
|
|
176
|
+
* Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
|
|
177
|
+
*/
|
|
178
|
+
export const isDependencyDragClue = (element) => {
|
|
179
|
+
if (!isPresent(element)) {
|
|
180
|
+
return false;
|
|
181
|
+
}
|
|
182
|
+
return element.classList.contains('k-task-dot');
|
|
183
|
+
};
|
|
184
|
+
/**
|
|
185
|
+
* @hidden
|
|
186
|
+
*
|
|
187
|
+
* Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
|
|
188
|
+
*/
|
|
189
|
+
export const isDependencyDragStartClue = (element) => {
|
|
190
|
+
if (!isPresent(element)) {
|
|
191
|
+
return false;
|
|
192
|
+
}
|
|
193
|
+
return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
|
|
194
|
+
};
|
|
195
|
+
/**
|
|
196
|
+
* @hidden
|
|
197
|
+
*
|
|
198
|
+
* Gets the `DependencyType` for an attempted dependency create from the provided two elements.
|
|
199
|
+
* The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
|
|
200
|
+
*/
|
|
201
|
+
export const getDependencyTypeFromTargetTasks = (fromTaskClue, toTaskClue) => {
|
|
202
|
+
if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
|
|
203
|
+
return null;
|
|
204
|
+
}
|
|
205
|
+
const fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
|
|
206
|
+
const toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
|
|
207
|
+
const dependencyTypeName = `${fromTaskType}${toTaskType}`;
|
|
208
|
+
switch (dependencyTypeName) {
|
|
209
|
+
case 'FF': return DependencyType.FF;
|
|
210
|
+
case 'FS': return DependencyType.FS;
|
|
211
|
+
case 'SF': return DependencyType.SF;
|
|
212
|
+
case 'SS': return DependencyType.SS;
|
|
213
|
+
default: return null;
|
|
214
|
+
}
|
|
215
|
+
};
|
|
216
|
+
/**
|
|
217
|
+
* @hidden
|
|
218
|
+
*
|
|
219
|
+
* Checks whether the two provided drag clues belong to the same task element.
|
|
220
|
+
*/
|
|
221
|
+
export const sameTaskClues = (fromTaskClue, toTaskClue, parentScope) => {
|
|
222
|
+
if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
|
|
223
|
+
return false;
|
|
224
|
+
}
|
|
225
|
+
const fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
|
|
226
|
+
const toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
|
|
227
|
+
return fromTaskWrapper === toTaskWrapper;
|
|
228
|
+
};
|
|
229
|
+
/**
|
|
230
|
+
* @hidden
|
|
231
|
+
*
|
|
232
|
+
* Fits a contender number between a min and max range.
|
|
233
|
+
* If the contender is below the min value, the min value is returned.
|
|
234
|
+
* If the contender is above the max value, the max value is returned.
|
|
235
|
+
*/
|
|
236
|
+
export const fitToRange = (contender, min, max) => {
|
|
237
|
+
if (contender > max) {
|
|
238
|
+
return max;
|
|
239
|
+
}
|
|
240
|
+
else if (contender < min) {
|
|
241
|
+
return min;
|
|
242
|
+
}
|
|
243
|
+
else {
|
|
244
|
+
return contender;
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
/**
|
|
248
|
+
* @hidden
|
|
249
|
+
*
|
|
250
|
+
* Checks whether either of the two provided tasks is a parent of the other.
|
|
251
|
+
*/
|
|
252
|
+
export const areParentChild = (taskA, taskB) => {
|
|
253
|
+
let parentChildRelationship = false;
|
|
254
|
+
let taskAParent = taskA;
|
|
255
|
+
while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
|
|
256
|
+
if (taskAParent.data === taskB.data) {
|
|
257
|
+
parentChildRelationship = true;
|
|
258
|
+
break;
|
|
259
|
+
}
|
|
260
|
+
taskAParent = taskAParent.parent;
|
|
261
|
+
}
|
|
262
|
+
let taskBParent = taskB;
|
|
263
|
+
while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
|
|
264
|
+
if (taskBParent.data === taskA.data) {
|
|
265
|
+
parentChildRelationship = true;
|
|
266
|
+
break;
|
|
267
|
+
}
|
|
268
|
+
taskBParent = taskBParent.parent;
|
|
269
|
+
}
|
|
270
|
+
return parentChildRelationship;
|
|
271
|
+
};
|
|
272
|
+
/**
|
|
273
|
+
* @hidden
|
|
274
|
+
*
|
|
275
|
+
* Extracts an element from the provided client coords.
|
|
276
|
+
* Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
|
|
277
|
+
*/
|
|
278
|
+
export const elementFromPoint = (clientX, clientY) => {
|
|
279
|
+
if (!isDocumentAvailable()) {
|
|
280
|
+
return null;
|
|
281
|
+
}
|
|
282
|
+
return document.elementFromPoint(clientX, clientY);
|
|
283
|
+
};
|