@progress/kendo-angular-gantt 0.2.1-dev.202112091741 → 0.3.0-dev.202201131518

package/dist/es2015/timeline/gantt-timeline.component.js

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, ElementRef, HostBinding, Input, NgZone, Renderer2, TemplateRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { filter, map, switchMap, take } from 'rxjs/operators';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { ScrollSyncService } from '../scrolling/scroll-sync.service';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { isPresent } from '../utils';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
 /**
  * @hidden
  */
@@ -21,6 +21,10 @@ let GanttTimelineComponent = class GanttTimelineComponent {
         this.zone = zone;
         this.hostClass = true;
         this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
         this.subscriptions = new Subscription();
         this.subscriptions.add(
         // task changes indicates change in row content, number, height, etc.
@@ -32,6 +36,12 @@ let GanttTimelineComponent = class GanttTimelineComponent {
             this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
         }));
     }
+    /**
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     */
+    get draggableEnabled() {
+        return this.renderDependencyDragClues;
+    }
     ngAfterViewInit() {
         const timelineHeader = this.timelineHeaderWrap.nativeElement;
         const rightContainer = this.timelineContent.nativeElement;
@@ -62,6 +72,14 @@ tslib_1.__decorate([
     ViewChild('tasksContainer', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
 ], GanttTimelineComponent.prototype, "tasksContainer", void 0);
+tslib_1.__decorate([
+    ViewChild('dragPopupContainer', { static: false, read: ViewContainerRef }),
+    tslib_1.__metadata("design:type", ViewContainerRef)
+], GanttTimelineComponent.prototype, "dragPopupContainer", void 0);
+tslib_1.__decorate([
+    ViewChild('dependencyDragCreatePolyline', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], GanttTimelineComponent.prototype, "dependencyDragCreatePolyline", void 0);
 tslib_1.__decorate([
     HostBinding('class.k-gantt-timeline'),
     tslib_1.__metadata("design:type", Boolean)
@@ -106,6 +124,14 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
 ], GanttTimelineComponent.prototype, "isTaskSelected", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], GanttTimelineComponent.prototype, "renderDependencyDragClues", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], GanttTimelineComponent.prototype, "dragScrollSettings", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -114,6 +140,18 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Array)
 ], GanttTimelineComponent.prototype, "dependencies", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerPress", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerDrag", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], GanttTimelineComponent.prototype, "timelineContainerRelease", void 0);
 GanttTimelineComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-gantt-timeline',
@@ -133,7 +171,17 @@ GanttTimelineComponent = tslib_1.__decorate([
                     </table>
                 </div>
             </div>
-            <div #timelineContent class="k-grid-content">
+            <div
+                #timelineContent
+                class="k-grid-content"
+                kendoGanttTimelineScrollable
+                [scrollSettings]="dragScrollSettings"
+                kendoDraggable
+                [enableDrag]="draggableEnabled"
+                (kendoPress)="timelineContainerPress.emit($event)"
+                (kendoDrag)="timelineContainerDrag.emit($event)"
+                (kendoRelease)="timelineContainerRelease.emit($event)"
+            >
                 <div class="k-gantt-tables">
                     <table
                         class="k-gantt-rows"
@@ -186,6 +234,7 @@ GanttTimelineComponent = tslib_1.__decorate([
                             [taskClass]="taskClass"
                             [hasChildren]="hasChildren"
                             [isTaskSelected]="isTaskSelected"
+                            [renderDependencyDragClues]="renderDependencyDragClues"
                         >
                         </tbody>
                     </table>
@@ -196,7 +245,11 @@ GanttTimelineComponent = tslib_1.__decorate([
                         kendoGanttDependency
                         [dependency]="dependency"
                     />
+                    <polyline #dependencyDragCreatePolyline />
                 </svg>
+
+                <!-- 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 -->
+                <ng-container #dragPopupContainer></ng-container>
             </div>
         </div>
     `

package/dist/es2015/toolbar/toolbar-template.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ToolbarPosition } from './../models/toolbar-position';
+import { ToolbarPosition } from '../models/toolbar-settings';
 import { TemplateRef } from '@angular/core';
 /**
  * Represents the toolbar template of the Gantt.

package/dist/es2015/toolbar/toolbar.component.d.ts

@@ -13,6 +13,8 @@ export declare class ToolbarComponent {
     gantt: GanttComponent;
     private scrollSyncService;
     context: any;
+    showAddTask: boolean;
+    showViewSelector: boolean;
     position: 'top' | 'bottom';
     readonly toolbarTemplateRef: TemplateRef<any>;
     readonly renderTemplate: boolean;

package/dist/es2015/toolbar/toolbar.component.js

@@ -36,6 +36,14 @@ let ToolbarComponent = class ToolbarComponent {
         this.scrollSyncService.resetTimelineScrollLeft();
     }
 };
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ToolbarComponent.prototype, "showAddTask", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ToolbarComponent.prototype, "showViewSelector", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String),
@@ -46,8 +54,10 @@ ToolbarComponent = tslib_1.__decorate([
         selector: 'kendo-gantt-toolbar',
         template: `
         <ng-container *ngIf="!renderTemplate">
+            <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
             <span class="k-spacer k-toolbar-spacer"></span>
             <kendo-gantt-view-selector
+                *ngIf="showViewSelector"
                 [views]="gantt.viewTypes"
                 [activeView]="gantt.activeView"
                 (activeViewChange)="onViewChange($event)"></kendo-gantt-view-selector>

package/dist/es2015/utils.d.ts

@@ -4,6 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { Day } from '@progress/kendo-date-math';
 import { GanttColumnBase, GanttColumnGroupComponent } from './columns/columns';
+import { DependencyType } from './models/dependency-type.enum';
+import { ViewItem } from './models/view-item.interface';
 /**
  * @hidden
  */
@@ -66,32 +68,92 @@ export declare const isString: (contender: any) => contender is string;
  * Native Omit appears in TS v3.5, we can use it when we drop Angular 8 (requires v3.4)
  */
 export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task wrapper element from an event target.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export declare const getClosestTaskWrapper: (element: Element, parentScope: Element) => Element;
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export declare const isTaskWrapper: (contender: Element, parentScope: Element) => boolean;
 /**
  * @hidden
  *
  * Gets the closest timeline task element from an event target.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export declare const getClosestTask: (element: Element, gantt: Element) => Element;
+export declare const getClosestTask: (element: Element, parentScope: Element) => Element;
 /**
  * @hidden
  *
  * Gets the closest timeline task element index from an event target.
  * Uses the `data-task-index` attribute assigned to each task.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export declare const getClosestTaskIndex: (element: Element, gantt: Element) => number;
+export declare const getClosestTaskIndex: (element: Element, parentScope: Element) => number;
 /**
  * @hidden
  *
  * Checks whether the queried item or its parent items has a `k-task` selector.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export declare const isTask: (contender: Element, gantt: Element) => boolean;
+export declare const isTask: (contender: Element, parentScope: Element) => boolean;
 /**
  * @hidden
  *
  * Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export declare const isClearButton: (contender: Element, parentScope: Element) => boolean;
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
+ */
+export declare const isDependencyDragClue: (element: Element) => boolean;
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
+ */
+export declare const isDependencyDragStartClue: (element: Element) => boolean;
+/**
+ * @hidden
+ *
+ * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
+ * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
+ */
+export declare const getDependencyTypeFromTargetTasks: (fromTaskClue: Element, toTaskClue: Element) => DependencyType;
+/**
+ * @hidden
+ *
+ * Checks whether the two provided drag clues belong to the same task element.
+ */
+export declare const sameTaskClues: (fromTaskClue: Element, toTaskClue: Element, parentScope: Element) => boolean;
+/**
+ * @hidden
+ *
+ * Fits a contender number between a min and max range.
+ * If the contender is below the min value, the min value is returned.
+ * If the contender is above the max value, the max value is returned.
+ */
+export declare const fitToRange: (contender: number, min: number, max: number) => number;
+/**
+ * @hidden
+ *
+ * Checks whether either of the two provided tasks is a parent of the other.
+ */
+export declare const areParentChild: (taskA: ViewItem, taskB: ViewItem) => boolean;
+/**
+ * @hidden
+ *
+ * Extracts an element from the provided client coords.
+ * Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
  */
-export declare const isClearButton: (contender: Element, gantt: Element) => boolean;
+export declare const elementFromPoint: (clientX: number, clientY: number) => HTMLElement;

package/dist/es2015/utils.js

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { isDocumentAvailable, closestInScope, matchesClasses } from '@progress/kendo-angular-common';
 import { addDays, addWeeks, cloneDate, firstDayInWeek } from '@progress/kendo-date-math';
+import { DependencyType } from './models/dependency-type.enum';
 /**
  * @hidden
  */
@@ -107,24 +108,43 @@ export const isNumber = (contender) => typeof contender === 'number' && !isNaN(c
  * @hidden
  */
 export const isString = (contender) => typeof contender === 'string';
+/**
+ * @hidden
+ *
+ * Gets the closest timeline task wrapper element from an event target.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export const getClosestTaskWrapper = (element, parentScope) => {
+    return closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item or its parent items has a `k-task-wrap` selector.
+ * Restricts the search up to the provided parent element from the second param.
+ */
+export const isTaskWrapper = (contender, parentScope) => {
+    const taskWrapper = closestInScope(contender, matchesClasses('k-task-wrap'), parentScope);
+    return isPresent(taskWrapper);
+};
 /**
  * @hidden
  *
  * Gets the closest timeline task element from an event target.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export const getClosestTask = (element, gantt) => {
-    return closestInScope(element, matchesClasses('k-task'), gantt);
+export const getClosestTask = (element, parentScope) => {
+    return closestInScope(element, matchesClasses('k-task'), parentScope);
 };
 /**
  * @hidden
  *
  * Gets the closest timeline task element index from an event target.
  * Uses the `data-task-index` attribute assigned to each task.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export const getClosestTaskIndex = (element, gantt) => {
-    const task = closestInScope(element, matchesClasses('k-task'), gantt);
+export const getClosestTaskIndex = (element, parentScope) => {
+    const task = closestInScope(element, matchesClasses('k-task-wrap'), parentScope);
     if (!isPresent(task)) {
         return null;
     }
@@ -134,19 +154,130 @@ export const getClosestTaskIndex = (element, gantt) => {
  * @hidden
  *
  * Checks whether the queried item or its parent items has a `k-task` selector.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export const isTask = (contender, gantt) => {
-    const task = closestInScope(contender, matchesClasses('k-task'), gantt);
+export const isTask = (contender, parentScope) => {
+    const task = closestInScope(contender, matchesClasses('k-task'), parentScope);
     return isPresent(task);
 };
 /**
  * @hidden
  *
  * Checks whether the queried item or its parent items has a `k-task-actions` selector - used for the clear button.
- * Restricts the search up to the provided gantt element from the second param.
+ * Restricts the search up to the provided parent element from the second param.
  */
-export const isClearButton = (contender, gantt) => {
-    const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), gantt);
+export const isClearButton = (contender, parentScope) => {
+    const clearButtonContainer = closestInScope(contender, matchesClasses('k-task-actions'), parentScope);
     return isPresent(clearButtonContainer);
 };
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` selector - used for the dependency drag clues.
+ */
+export const isDependencyDragClue = (element) => {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot');
+};
+/**
+ * @hidden
+ *
+ * Checks whether the queried item has a `k-task-dot` & `k-task-start` selector - used for the dependency drag start clues.
+ */
+export const isDependencyDragStartClue = (element) => {
+    if (!isPresent(element)) {
+        return false;
+    }
+    return element.classList.contains('k-task-dot') && element.classList.contains('k-task-start');
+};
+/**
+ * @hidden
+ *
+ * Gets the `DependencyType` for an attempted dependency create from the provided two elements.
+ * The two linked drag clue HTML elements are used to extract this data (via their CSS classes).
+ */
+export const getDependencyTypeFromTargetTasks = (fromTaskClue, toTaskClue) => {
+    if (!isDependencyDragClue(fromTaskClue) || !isDependencyDragClue(toTaskClue)) {
+        return null;
+    }
+    const fromTaskType = isDependencyDragStartClue(fromTaskClue) ? 'S' : 'F';
+    const toTaskType = isDependencyDragStartClue(toTaskClue) ? 'S' : 'F';
+    const dependencyTypeName = `${fromTaskType}${toTaskType}`;
+    switch (dependencyTypeName) {
+        case 'FF': return DependencyType.FF;
+        case 'FS': return DependencyType.FS;
+        case 'SF': return DependencyType.SF;
+        case 'SS': return DependencyType.SS;
+        default: return null;
+    }
+};
+/**
+ * @hidden
+ *
+ * Checks whether the two provided drag clues belong to the same task element.
+ */
+export const sameTaskClues = (fromTaskClue, toTaskClue, parentScope) => {
+    if (!isPresent(fromTaskClue) || !isPresent(toTaskClue)) {
+        return false;
+    }
+    const fromTaskWrapper = getClosestTaskWrapper(fromTaskClue, parentScope);
+    const toTaskWrapper = getClosestTaskWrapper(toTaskClue, parentScope);
+    return fromTaskWrapper === toTaskWrapper;
+};
+/**
+ * @hidden
+ *
+ * Fits a contender number between a min and max range.
+ * If the contender is below the min value, the min value is returned.
+ * If the contender is above the max value, the max value is returned.
+ */
+export const fitToRange = (contender, min, max) => {
+    if (contender > max) {
+        return max;
+    }
+    else if (contender < min) {
+        return min;
+    }
+    else {
+        return contender;
+    }
+};
+/**
+ * @hidden
+ *
+ * Checks whether either of the two provided tasks is a parent of the other.
+ */
+export const areParentChild = (taskA, taskB) => {
+    let parentChildRelationship = false;
+    let taskAParent = taskA;
+    while (isPresent(taskAParent) && isPresent(taskAParent.data)) {
+        if (taskAParent.data === taskB.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskAParent = taskAParent.parent;
+    }
+    let taskBParent = taskB;
+    while (!parentChildRelationship && isPresent(taskBParent) && isPresent(taskBParent.data)) {
+        if (taskBParent.data === taskA.data) {
+            parentChildRelationship = true;
+            break;
+        }
+        taskBParent = taskBParent.parent;
+    }
+    return parentChildRelationship;
+};
+/**
+ * @hidden
+ *
+ * Extracts an element from the provided client coords.
+ * Using the `event.target` is not reliable under mobile devices with the current implementation of the draggable, so use this instead.
+ */
+export const elementFromPoint = (clientX, clientY) => {
+    if (!isDocumentAvailable()) {
+        return null;
+    }
+    return document.elementFromPoint(clientX, clientY);
+};