@progress/kendo-angular-gantt 2.0.0-next.202204010911 → 2.0.0-next.202204121022

package/esm2015/common/mapping.service.js

@@ -0,0 +1,64 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { getter } from '@progress/kendo-common';
+import { DEFAULT_DEPENDENCY_MODEL_FIELDS } from '../models/gantt-dependency-model-fields.interface';
+import { DEFAULT_TASK_MODEL_FIELDS } from '../models/gantt-task-model-fields.interface';
+import { isPresent } from '../utils';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class MappingService {
+    constructor() {
+        this._taskFields = Object.assign({}, DEFAULT_TASK_MODEL_FIELDS);
+        this._dependencyFields = Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS);
+    }
+    /**
+     * Gets or sets the model fields for the task data items.
+     * Uses the default values for fields which are not specified.
+     */
+    set taskFields(fields) {
+        this._taskFields = Object.assign(Object.assign({}, DEFAULT_TASK_MODEL_FIELDS), fields);
+    }
+    get taskFields() {
+        return this._taskFields;
+    }
+    /**
+     * Gets or sets the model fields for the depenency data items.
+     * Uses the default values for fields which are not specified.
+     */
+    set dependencyFields(fields) {
+        this._dependencyFields = Object.assign(Object.assign({}, DEFAULT_DEPENDENCY_MODEL_FIELDS), fields);
+    }
+    get dependencyFields() {
+        return this._dependencyFields;
+    }
+    /**
+     * Retrieves the value for the specified task field.
+     * Supports nested fields as well (e.g. 'manager.id').
+     */
+    extractFromTask(dataItem, field) {
+        if (!isPresent(this.taskFields)) {
+            return null;
+        }
+        return getter(this.taskFields[field])(dataItem);
+    }
+    /**
+     * Retrieves the value for the specified dependency field.
+     * Supports nested fields as well (e.g. 'manager.id').
+     */
+    extractFromDependency(dataItem, field) {
+        if (!isPresent(this.dependencyFields)) {
+            return null;
+        }
+        return getter(this.dependencyFields[field])(dataItem);
+    }
+}
+MappingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MappingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MappingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MappingService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/common/option-changes.service.js

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class OptionChangesService {
+    constructor() {
+        this.viewChanges = new EventEmitter();
+        this.columnChanges = new EventEmitter();
+    }
+    notifyColumnChanges() {
+        this.columnChanges.emit();
+    }
+    notifyViewChanges() {
+        this.viewChanges.emit();
+    }
+}
+OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionChangesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: OptionChangesService, decorators: [{
+            type: Injectable
+        }] });

package/esm2015/common/touch-enabled.js

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { InjectionToken } from '@angular/core';
+/**
+ * @hidden
+ */
+export const TOUCH_ENABLED = new InjectionToken('gantt-touch-enabled');

package/esm2015/dependencies/dependency-dom.service.js

@@ -0,0 +1,70 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+/**
+ * @hidden
+ */
+export class DependencyDomService {
+    constructor(mapper) {
+        this.mapper = mapper;
+        this.notifier = new Subject();
+        /**
+         * Maps each rendered task to its HTML element.
+         * Uses the task ID field value as key.
+         */
+        this.tasks = new Map();
+    }
+    /**
+     * Emits each time some of the tasks or the view have changed.
+     * Fires also on the first change of the table rows and the parent container.
+     */
+    get taskChanges() {
+        return this.notifier.asObservable();
+    }
+    get dependencyDomArgs() {
+        return {
+            tasks: this.tasks,
+            contentContainer: this.contentContainer,
+            timelineRow: this.timelineRow
+        };
+    }
+    ngOnDestroy() {
+        this.tasks.clear();
+        this.tasks = null;
+        this.contentContainer = null;
+    }
+    registerTimelineRow(timelineRow) {
+        this.timelineRow = timelineRow;
+        this.notifyChanges();
+    }
+    registerContentContainer(contentContainer) {
+        this.contentContainer = contentContainer;
+        this.notifyChanges();
+    }
+    registerTask(task, element) {
+        const id = this.mapper.extractFromTask(task, 'id');
+        this.tasks.set(id, element);
+        this.notifyChanges();
+    }
+    unregisterTask(task) {
+        const id = this.mapper.extractFromTask(task, 'id');
+        this.tasks.delete(id);
+        this.notifyChanges();
+    }
+    /**
+     * Notifies all dependency directives that a change in one of the elements has occured.
+     */
+    notifyChanges() {
+        this.notifier.next(this.dependencyDomArgs);
+    }
+}
+DependencyDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDomService, deps: [{ token: i1.MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+DependencyDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDomService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DependencyDomService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.MappingService }]; } });

package/esm2015/dependencies/dom-dependency-args.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/dependencies/gantt-dependency.directive.js

@@ -0,0 +1,82 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
+import { isPresent } from '../utils';
+import { dependencyCoordinates, getElementRect } from './utils';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/mapping.service";
+import * as i2 from "./dependency-dom.service";
+/**
+ * Defines the size of the arrow that will be drawn at the end of each Gantt dependency.
+ */
+const ARROW_SIZE = 4;
+/**
+ * Defines the distance the polyline will cover from the task element before making a turn.
+ */
+const MIN_DISTANCE_BEFORE_TURN = 10;
+/**
+ * @hidden
+ */
+export class GanttDependencyDirective {
+    constructor(polyline, zone, renderer, mapper, dependencyDomService) {
+        this.polyline = polyline;
+        this.zone = zone;
+        this.renderer = renderer;
+        this.mapper = mapper;
+        this.dependencyDomService = dependencyDomService;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(dependencyDomService.taskChanges
+            .pipe(switchMap(changes => 
+        // reacts only on the very last event emission,
+        // ensures that the tasks are drawn in the DOM
+        this.zone.onStable.pipe(take(1), map(() => changes))))
+            .subscribe(changes => this.updatePoints(changes)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (isPresent(changes.dependency)) {
+            this.updatePoints(this.dependencyDomService.dependencyDomArgs);
+        }
+    }
+    updatePoints({ timelineRow, contentContainer, tasks }) {
+        if (!isPresent(timelineRow) || !isPresent(contentContainer) ||
+            !isPresent(tasks) || tasks.size === 0 ||
+            !tasks.has(this.mapper.extractFromDependency(this.dependency, 'fromId')) || !tasks.has(this.mapper.extractFromDependency(this.dependency, 'toId'))) {
+            this.clearPoints();
+            return;
+        }
+        const fromCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'fromId')), contentContainer);
+        const toCoordinates = getElementRect(tasks.get(this.mapper.extractFromDependency(this.dependency, 'toId')), contentContainer);
+        const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+        const points = dependencyCoordinates(fromCoordinates, toCoordinates, timelineRowHeight, this.dependency.type, MIN_DISTANCE_BEFORE_TURN, ARROW_SIZE);
+        this.drawPoints(points);
+    }
+    clearPoints() {
+        this.renderer.setAttribute(this.polyline.nativeElement, 'points', '');
+    }
+    drawPoints(points) {
+        if (!isPresent(points) || points.length === 0) {
+            this.clearPoints();
+            return;
+        }
+        const parsedCoords = points.map(({ left, top }) => `${left},${top}`).join(' ');
+        this.renderer.setAttribute(this.polyline.nativeElement, 'points', parsedCoords);
+    }
+}
+GanttDependencyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttDependencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.MappingService }, { token: i2.DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
+GanttDependencyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: { dependency: "dependency" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttDependencyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttDependency]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.MappingService }, { type: i2.DependencyDomService }]; }, propDecorators: { dependency: [{
+                type: Input
+            }] } });

package/esm2015/dependencies/utils.js

@@ -0,0 +1,195 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { DependencyType } from '../models/dependency-type.enum';
+/**
+ * @hidden
+ *
+ * Gets the offset (top and left values) relative to a target element.
+ */
+export const getOffsetRelativeToParent = (element, targetParent) => {
+    let offset = {
+        top: 0,
+        left: 0
+    };
+    if (!targetParent.contains(element)) {
+        return offset;
+    }
+    let offsetParent = element;
+    while (offsetParent && offsetParent !== targetParent) {
+        offset.top += offsetParent.offsetTop;
+        offset.left += offsetParent.offsetLeft;
+        offsetParent = offsetParent.offsetParent;
+    }
+    return offset;
+};
+/**
+ * @hidden
+ */
+export const getElementRect = (element, relativeContainer) => {
+    const { top, left } = getOffsetRelativeToParent(element, relativeContainer);
+    return {
+        top: top + element.offsetHeight / 2,
+        left: left,
+        right: left + element.offsetWidth
+    };
+};
+/**
+ * @hidden
+ */
+export const dependencyCoordinates = (from, to, rowHeight, type, minDistanceBeforeTurn, arrowSize) => {
+    const points = [];
+    const minTurnHeight = Math.floor(rowHeight / 2);
+    const drawingDown = from.top < to.top;
+    let top, left;
+    // FF and SS are composed of 4 connected polyline points (not counting the arrow)
+    /*
+        [[[]]]-       -[[[]]]
+              |       |
+        [[[]]]-       -[[[]]]
+     */
+    if (type === DependencyType.FF || type === DependencyType.SS) {
+        // polyline start from first task
+        const dir = type === DependencyType.SS ? 'left' : 'right';
+        top = from.top;
+        left = from[dir];
+        points.push({ top, left });
+        // first turn point
+        left = Math[dir === 'left' ? 'min' : 'max'](from[dir], to[dir]);
+        left = dir === 'left' ? left - minDistanceBeforeTurn : left + minDistanceBeforeTurn;
+        points.push({ top, left });
+        // second turn point
+        top = to.top;
+        points.push({ top, left });
+        // second task reached
+        left = dir === 'left' ? to[dir] - arrowSize : to[dir] + arrowSize;
+        points.push({ top, left });
+        // arrow pointing to the second task
+        points.push(...getArrow(top, left, dir !== 'left', arrowSize));
+    }
+    else {
+        // FS and SF are composed of 4 or 6 connected polyline points (not counting the arrow), depending on the position of the tasks
+        /*
+            [[[]]]-               [[[]]]-
+                  |                     |
+                  -[[[]]]           -----
+                                    |
+                                    -[[[]]]
+        */
+        const startDir = type === DependencyType.SF ? 'left' : 'right';
+        const endDir = type === DependencyType.SF ? 'right' : 'left';
+        const additionalTurn = type === DependencyType.SF
+            ? from[startDir] - minDistanceBeforeTurn * 2 < to[endDir]
+            : from[startDir] + minDistanceBeforeTurn * 2 > to[endDir];
+        // polyline start from first task
+        top = from.top;
+        left = from[startDir];
+        points.push({ top, left });
+        // first turn point
+        left = startDir === 'left'
+            ? left - minDistanceBeforeTurn
+            : left + minDistanceBeforeTurn;
+        points.push({ top, left });
+        // if second task start is before the first task end in FS
+        // if second task end is after the first task start in SF
+        if (additionalTurn) {
+            // additional turn start
+            top = drawingDown
+                ? top + minTurnHeight
+                : top - minTurnHeight;
+            points.push({ top, left });
+            // additional turn end
+            left = startDir === 'left'
+                ? to[endDir] + minDistanceBeforeTurn
+                : to[endDir] - minDistanceBeforeTurn;
+            points.push({ top, left });
+        }
+        // second task level reached
+        top = to.top;
+        points.push({ top, left });
+        // second task element reached
+        left = endDir === 'left' ? to[endDir] - arrowSize : to[endDir] + arrowSize;
+        points.push({ top, left });
+        // arrow pointing to the second task
+        points.push(...getArrow(top, left, endDir !== 'left', arrowSize));
+    }
+    return points;
+};
+const getArrow = (top, left, isArrowWest, arrowSize) => {
+    const points = isArrowWest
+        ? getArrowWest(top, left, arrowSize)
+        : getArrowEast(top, left, arrowSize);
+    return points;
+};
+const getArrowWest = (top, left, arrowSize) => {
+    const points = [];
+    points.push({
+        top: top - arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left: left - arrowSize + 1
+    });
+    points.push({
+        top: top + arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left
+    });
+    return points;
+};
+const getArrowEast = (top, left, arrowSize) => {
+    const points = [];
+    points.push({
+        top: top + arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left: left + arrowSize - 1
+    });
+    points.push({
+        top: top - arrowSize / 2,
+        left
+    });
+    points.push({
+        top,
+        left
+    });
+    return points;
+};
+/**
+ * @hidden
+ *
+ * Translates the provided client `left` and `top` coords to coords relative to the provided container.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export const clientToOffsetCoords = (clientLeft, clientTop, offsetContainer) => {
+    // client (viewport) coordinates of the target container
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const offsetContainerClientRect = offsetContainer.getBoundingClientRect();
+    return {
+        left: clientLeft - offsetContainerClientRect.left + offsetContainer.scrollLeft,
+        top: clientTop - offsetContainerClientRect.top + offsetContainer.scrollTop
+    };
+};
+/**
+ * @hidden
+ *
+ * Retrieves the `left` and `top` values of the center of the provided element.
+ * The retrieved values are relative to the current viewport (client values).
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems#standard_cssom_coordinate_systems
+ */
+export const getElementClientCenterCoords = (element) => {
+    // client (viewport) coordinates of the targeted element
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value
+    const { left, top, width, height } = element.getBoundingClientRect();
+    return {
+        left: left + (width / 2),
+        top: top + (height / 2)
+    };
+};