@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.
Files changed (98) hide show
  1. package/dist/cdn/js/kendo-angular-gantt.js +2 -2
  2. package/dist/cdn/main.js +4 -10
  3. package/dist/es/common/touch-enabled.js +9 -0
  4. package/dist/es/dependencies/utils.js +34 -0
  5. package/dist/es/dragging/dependency-drag-create.directive.js +347 -0
  6. package/dist/es/dragging/drag-validation-tooltip.component.js +27 -0
  7. package/dist/es/editing/{util.js → utils.js} +0 -0
  8. package/dist/es/gantt.component.js +125 -7
  9. package/dist/es/gantt.module.js +23 -6
  10. package/dist/es/index.js +4 -0
  11. package/dist/es/main.js +1 -0
  12. package/dist/es/models/events/dependency-add-event.interface.js +4 -0
  13. package/dist/es/models/view-item.interface.js +4 -0
  14. package/dist/es/package-metadata.js +1 -1
  15. package/dist/es/rendering/gantt-milestone-task.component.js +7 -4
  16. package/dist/es/rendering/gantt-summary-task.component.js +7 -4
  17. package/dist/es/rendering/gantt-task-base.js +30 -19
  18. package/dist/es/rendering/gantt-task.component.js +8 -6
  19. package/dist/es/rendering/gantt-tasks-table-body.component.js +5 -1
  20. package/dist/es/scrolling/drag-scroll-settings.js +20 -0
  21. package/dist/es/scrolling/timeline-scroll.directive.js +89 -0
  22. package/dist/es/scrolling/timeline-scroll.service.js +39 -0
  23. package/dist/es/scrolling/utils.js +80 -0
  24. package/dist/es/timeline/gantt-timeline.component.js +45 -3
  25. package/dist/es/utils.js +143 -12
  26. package/dist/es2015/common/touch-enabled.d.ts +9 -0
  27. package/dist/es2015/common/touch-enabled.js +9 -0
  28. package/dist/es2015/dependencies/utils.d.ts +15 -0
  29. package/dist/es2015/dependencies/utils.js +34 -0
  30. package/dist/es2015/dragging/dependency-drag-create.directive.d.ts +72 -0
  31. package/dist/es2015/dragging/dependency-drag-create.directive.js +324 -0
  32. package/dist/es2015/dragging/drag-validation-tooltip.component.d.ts +29 -0
  33. package/dist/es2015/dragging/drag-validation-tooltip.component.js +76 -0
  34. package/dist/es2015/editing/{util.d.ts → utils.d.ts} +0 -0
  35. package/dist/es2015/editing/{util.js → utils.js} +0 -0
  36. package/dist/es2015/gantt.component.d.ts +39 -3
  37. package/dist/es2015/gantt.component.js +117 -6
  38. package/dist/es2015/gantt.module.js +23 -6
  39. package/dist/es2015/index.d.ts +4 -0
  40. package/dist/es2015/index.js +4 -0
  41. package/dist/es2015/index.metadata.json +1 -1
  42. package/dist/es2015/main.d.ts +1 -0
  43. package/dist/es2015/main.js +1 -0
  44. package/dist/es2015/models/events/dependency-add-event.interface.d.ts +26 -0
  45. package/dist/es2015/models/events/dependency-add-event.interface.js +4 -0
  46. package/dist/es2015/models/models.d.ts +2 -0
  47. package/dist/es2015/models/view-item.interface.d.ts +35 -0
  48. package/dist/es2015/models/view-item.interface.js +4 -0
  49. package/dist/es2015/package-metadata.js +1 -1
  50. package/dist/es2015/rendering/gantt-milestone-task.component.d.ts +2 -1
  51. package/dist/es2015/rendering/gantt-milestone-task.component.js +18 -5
  52. package/dist/es2015/rendering/gantt-summary-task.component.d.ts +2 -1
  53. package/dist/es2015/rendering/gantt-summary-task.component.js +18 -5
  54. package/dist/es2015/rendering/gantt-task-base.d.ts +11 -5
  55. package/dist/es2015/rendering/gantt-task-base.js +30 -19
  56. package/dist/es2015/rendering/gantt-task.component.d.ts +2 -1
  57. package/dist/es2015/rendering/gantt-task.component.js +19 -7
  58. package/dist/es2015/rendering/gantt-tasks-table-body.component.d.ts +1 -0
  59. package/dist/es2015/rendering/gantt-tasks-table-body.component.js +10 -3
  60. package/dist/es2015/scrolling/drag-scroll-settings.d.ts +47 -0
  61. package/dist/es2015/scrolling/drag-scroll-settings.js +20 -0
  62. package/dist/es2015/scrolling/timeline-scroll.directive.d.ts +24 -0
  63. package/dist/es2015/scrolling/timeline-scroll.directive.js +78 -0
  64. package/dist/es2015/scrolling/timeline-scroll.service.d.ts +20 -0
  65. package/dist/es2015/scrolling/timeline-scroll.service.js +44 -0
  66. package/dist/es2015/scrolling/utils.d.ts +29 -0
  67. package/dist/es2015/scrolling/utils.js +80 -0
  68. package/dist/es2015/timeline/gantt-timeline.component.d.ts +25 -2
  69. package/dist/es2015/timeline/gantt-timeline.component.js +56 -3
  70. package/dist/es2015/utils.d.ts +70 -8
  71. package/dist/es2015/utils.js +143 -12
  72. package/dist/fesm2015/index.js +1337 -372
  73. package/dist/fesm5/index.js +1206 -298
  74. package/dist/npm/common/touch-enabled.js +11 -0
  75. package/dist/npm/dependencies/utils.js +34 -0
  76. package/dist/npm/dragging/dependency-drag-create.directive.js +349 -0
  77. package/dist/npm/dragging/drag-validation-tooltip.component.js +29 -0
  78. package/dist/npm/editing/{util.js → utils.js} +0 -0
  79. package/dist/npm/gantt.component.js +127 -9
  80. package/dist/npm/gantt.module.js +22 -5
  81. package/dist/npm/index.js +8 -0
  82. package/dist/npm/main.js +2 -0
  83. package/dist/npm/models/events/dependency-add-event.interface.js +6 -0
  84. package/dist/npm/models/view-item.interface.js +6 -0
  85. package/dist/npm/package-metadata.js +1 -1
  86. package/dist/npm/rendering/gantt-milestone-task.component.js +6 -3
  87. package/dist/npm/rendering/gantt-summary-task.component.js +6 -3
  88. package/dist/npm/rendering/gantt-task-base.js +30 -19
  89. package/dist/npm/rendering/gantt-task.component.js +7 -5
  90. package/dist/npm/rendering/gantt-tasks-table-body.component.js +5 -1
  91. package/dist/npm/scrolling/drag-scroll-settings.js +22 -0
  92. package/dist/npm/scrolling/timeline-scroll.directive.js +91 -0
  93. package/dist/npm/scrolling/timeline-scroll.service.js +41 -0
  94. package/dist/npm/scrolling/utils.js +83 -0
  95. package/dist/npm/timeline/gantt-timeline.component.js +44 -2
  96. package/dist/npm/utils.js +143 -12
  97. package/dist/systemjs/kendo-angular-gantt.js +1 -1
  98. 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 #timelineContent class="k-grid-content">
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
  `
@@ -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 gantt element from the second param.
89
+ * Restricts the search up to the provided parent element from the second param.
74
90
  */
75
- export declare const getClosestTask: (element: Element, gantt: 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 gantt element from the second param.
97
+ * Restricts the search up to the provided parent element from the second param.
82
98
  */
83
- export declare const getClosestTaskIndex: (element: Element, gantt: Element) => number;
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 gantt element from the second param.
104
+ * Restricts the search up to the provided parent element from the second param.
89
105
  */
90
- export declare const isTask: (contender: Element, gantt: Element) => boolean;
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 gantt element from the second param.
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 isClearButton: (contender: Element, gantt: Element) => boolean;
159
+ export declare const elementFromPoint: (clientX: number, clientY: number) => HTMLElement;
@@ -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 gantt element from the second param.
134
+ * Restricts the search up to the provided parent element from the second param.
115
135
  */
116
- export const getClosestTask = (element, gantt) => {
117
- return closestInScope(element, matchesClasses('k-task'), gantt);
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 gantt element from the second param.
144
+ * Restricts the search up to the provided parent element from the second param.
125
145
  */
126
- export const getClosestTaskIndex = (element, gantt) => {
127
- const task = closestInScope(element, matchesClasses('k-task'), gantt);
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 gantt element from the second param.
157
+ * Restricts the search up to the provided parent element from the second param.
138
158
  */
139
- export const isTask = (contender, gantt) => {
140
- const task = closestInScope(contender, matchesClasses('k-task'), gantt);
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 gantt element from the second param.
167
+ * Restricts the search up to the provided parent element from the second param.
148
168
  */
149
- export const isClearButton = (contender, gantt) => {
150
- const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
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
+ };