@syncfusion/ej2-gantt 19.4.55 → 20.1.47-1460716

package/dist/ts/gantt/renderer/edit-tooltip.ts

@@ -0,0 +1,228 @@
+import { Gantt } from '../base/gantt';
+import { getValue, Internationalization, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Tooltip, TooltipEventArgs } from '@syncfusion/ej2-popups';
+import { BeforeTooltipRenderEventArgs, ITaskData } from '../base/interface';
+import { TaskbarEdit } from '../actions/taskbar-edit';
+import * as cls from '../base/css-constants';
+/**
+ * File for handling taskbar editing tooltip in Gantt.
+ */
+export class EditTooltip {
+    public parent: Gantt;
+    public toolTipObj: Tooltip;
+    public taskbarTooltipContainer: HTMLElement;
+    public taskbarTooltipDiv: HTMLElement;
+    private taskbarEdit: TaskbarEdit;
+    constructor(gantt: Gantt, taskbarEdit: TaskbarEdit) {
+        this.parent = gantt;
+        this.taskbarEdit = taskbarEdit;
+    }
+
+    /**
+     * To create tooltip.
+     *
+     * @param {string} opensOn .
+     * @param {boolean} mouseTrail .
+     * @param {string} target .
+     * @returns {void}
+     * @private
+     */
+    public createTooltip(opensOn: string, mouseTrail: boolean, target?: string): void {
+        this.toolTipObj = new Tooltip(
+            {
+                opensOn: opensOn,
+                position: 'TopRight',
+                mouseTrail: mouseTrail,
+                cssClass: cls.ganttTooltip,
+                target: target ? target : null,
+                animation: { open: { effect: 'None' }, close: { effect: 'None' } }
+            }
+        );
+        this.toolTipObj.beforeRender = (args: TooltipEventArgs) => {
+            const argsData: BeforeTooltipRenderEventArgs = {
+                data: this.taskbarEdit.taskBarEditRecord,
+                args: args,
+                content: this.toolTipObj.content
+            };
+            this.parent.trigger('beforeTooltipRender', argsData);
+        };
+        this.toolTipObj.afterOpen = (args: TooltipEventArgs) => {
+            this.updateTooltipPosition(args);
+        };
+        this.toolTipObj.isStringTemplate = true;
+        this.toolTipObj.appendTo(this.parent.chartPane);
+    }
+
+    /**
+     * Method to update tooltip position
+     *
+     * @param {TooltipEventArgs} args .
+     * @returns {void} .
+     */
+    private updateTooltipPosition(args: TooltipEventArgs): void {
+        const containerPosition: { top: number, left: number } = this.parent.getOffsetRect(this.parent.chartPane);
+        const leftEnd: number = containerPosition.left + this.parent.chartPane.offsetWidth;
+        let tooltipPositionX: number = args.element.offsetLeft;
+        if (leftEnd < (tooltipPositionX + args.element.offsetWidth)) {
+            tooltipPositionX += leftEnd - (tooltipPositionX + args.element.offsetWidth);
+        }
+        args.element.style.left = tooltipPositionX + 'px';
+        args.element.style.visibility = 'visible';
+    }
+    /**
+     * To show/hide taskbar edit tooltip.
+     *
+     * @param {boolean} bool .
+     * @param {number} segmentIndex .
+     * @returns {void}
+     * @private
+     */
+    public showHideTaskbarEditTooltip(bool: boolean, segmentIndex: number): void {
+        if (bool && this.parent.tooltipSettings.showTooltip) {
+            this.createTooltip('Custom', false);
+            this.parent.tooltipModule.toolTipObj.close();
+            this.updateTooltip(segmentIndex);
+            if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointLeftDrag') {
+                this.toolTipObj.open(
+                    this.taskbarEdit.connectorSecondElement.querySelector('.' + cls.connectorPointLeft));
+            } else if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointRightDrag') {
+                this.toolTipObj.open(
+                    this.taskbarEdit.connectorSecondElement.querySelector('.' + cls.connectorPointRight));
+            } else {
+                this.toolTipObj.open(this.taskbarEdit.taskBarEditElement);
+            }
+        } else if (!isNullOrUndefined(this.toolTipObj)) {
+            this.toolTipObj.destroy();
+            this.toolTipObj = null;
+        }
+    }
+
+    /**
+     * To update tooltip content and position.
+     *
+     * @param {number} segmentIndex .
+     * @returns {void} .
+     * @private
+     */
+    public updateTooltip(segmentIndex: number): void {
+        const ganttProp: ITaskData = this.taskbarEdit.taskBarEditRecord.ganttProperties;
+        const taskWidth: number = segmentIndex === -1 ? ganttProp.width :
+            ganttProp.segments[segmentIndex].width;
+
+        const progressWidth: number = segmentIndex === -1 ? ganttProp.progressWidth :
+            ganttProp.segments[segmentIndex].progressWidth;
+
+        const left: number = segmentIndex === -1 ? ganttProp.left : ganttProp.left + ganttProp.segments[segmentIndex].left;
+
+        if (!isNullOrUndefined(this.toolTipObj)) {
+            if (this.taskbarEdit.taskBarEditAction === 'ConnectorPointLeftDrag' ||
+                this.taskbarEdit.taskBarEditAction === 'ConnectorPointRightDrag') {
+                this.toolTipObj.content = this.getTooltipText(segmentIndex);
+                this.toolTipObj.offsetY = -3;
+            } else {
+                this.toolTipObj.content = this.getTooltipText(segmentIndex);
+                this.toolTipObj.refresh(this.taskbarEdit.taskBarEditElement);
+                if (this.taskbarEdit.taskBarEditAction === 'LeftResizing') {
+                    this.toolTipObj.offsetX = -taskWidth;
+                } else if (this.taskbarEdit.taskBarEditAction === 'RightResizing' ||
+                    this.taskbarEdit.taskBarEditAction === 'ParentResizing') {
+                    this.toolTipObj.offsetX = 0;
+                } else if (this.taskbarEdit.taskBarEditAction === 'ProgressResizing') {
+                    this.toolTipObj.offsetX = -(taskWidth - progressWidth);
+                } else if (this.taskbarEdit.taskBarEditAction === 'MilestoneDrag') {
+                    this.toolTipObj.offsetX = -(this.parent.chartRowsModule.milestoneHeight / 2);
+                } else if (taskWidth > 5) {
+                    this.toolTipObj.offsetX = -(taskWidth + left - this.taskbarEdit.tooltipPositionX);
+                }
+            }
+        }
+    }
+
+    /**
+     * To get updated tooltip text.
+     *
+     * @param {number} segmentIndex .
+     * @returns {void} .
+     * @private
+     */
+    private getTooltipText(segmentIndex: number): string | HTMLElement {
+        let tooltipString: string | HTMLElement = '';
+        const instance: Internationalization = this.parent.globalize;
+        let editRecord: ITaskData = this.taskbarEdit.taskBarEditRecord.ganttProperties as ITaskData;
+        if (!isNullOrUndefined(editRecord.segments) && editRecord.segments.length > 0 && segmentIndex !== -1
+            && this.taskbarEdit.taskBarEditAction !== 'ProgressResizing') {
+            editRecord = editRecord.segments[segmentIndex];
+        }
+        if (this.parent.tooltipSettings.editing) {
+            const templateNode: NodeList = this.parent.tooltipModule.templateCompiler(
+                this.parent.tooltipSettings.editing, this.parent, this.taskbarEdit.taskBarEditRecord, 'TooltipEditingTemplate');
+            if (getValue('tooltipEle', this.toolTipObj)) {
+                this.parent.renderTemplates();
+            }
+            tooltipString = (templateNode[0] as HTMLElement);
+        } else {
+            let startDate: string;
+            let endDate: string;
+            let duration: string;
+            if (!isNullOrUndefined(editRecord.startDate)) {
+                startDate = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('startDate') +
+                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    instance.formatDate(editRecord.startDate, { format: this.parent.getDateFormat() }) + '</td></tr>';
+            }
+            if (!isNullOrUndefined(editRecord.endDate)) {
+                endDate = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('endDate') +
+                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    instance.formatDate(editRecord.endDate, { format: this.parent.getDateFormat() }) + '</td></tr>';
+            }
+            if (!isNullOrUndefined(editRecord.duration)) {
+                duration = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('duration') +
+                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' +
+                    this.parent.getDurationString(editRecord.duration, (editRecord as ITaskData).durationUnit) + '</td></tr>';
+            }
+            switch (this.taskbarEdit.taskBarEditAction) {
+            case 'ProgressResizing':
+                const progress: string = '<tr><td class = "e-gantt-tooltip-label">' + this.parent.localeObj.getConstant('progress') +
+                    '</td><td>:</td><td class = "e-gantt-tooltip-value">' + (editRecord as ITaskData).progress + '</td></tr>';
+                tooltipString =  '<table class = "e-gantt-tooltiptable"><tbody>' +
+                    progress + '</tbody></table>';
+
+                break;
+            case 'LeftResizing':
+                tooltipString =  '<table class = "e-gantt-tooltiptable"><tbody>' +
+                startDate + duration + '</tbody></table>';
+                break;
+            case 'RightResizing':
+            case 'ParentResizing':
+                tooltipString =  '<table class = "e-gantt-tooltiptable"><tbody>' +
+                    endDate + duration + '</tbody></table>';
+                break;
+            case 'ChildDrag':
+            case 'ParentDrag':
+            case 'MilestoneDrag':
+            case 'ManualParentDrag':
+                let sDate: string = ''; let eDate: string = '';
+                if (!isNullOrUndefined(this.taskbarEdit.taskBarEditRecord.ganttProperties.startDate)) {
+                    sDate = startDate;
+                }
+                if (!isNullOrUndefined(this.taskbarEdit.taskBarEditRecord.ganttProperties.endDate)) {
+                    eDate = endDate;
+                }
+                tooltipString =  '<table class = "e-gantt-tooltiptable"><tbody>' + sDate + eDate + '</tbody></table>';
+                break;
+            case 'ConnectorPointLeftDrag':
+            case 'ConnectorPointRightDrag':
+                tooltipString = this.parent.connectorLineModule.tooltipTable;
+                if (isNullOrUndefined(this.toolTipObj)) {
+                    this.parent.connectorLineModule.tooltipTable.innerHTML =
+                            this.parent.connectorLineModule.getConnectorLineTooltipInnerTd(
+                                this.parent.editModule.taskbarEditModule.taskBarEditRecord.ganttProperties.taskName,
+                                this.parent.editModule.taskbarEditModule.fromPredecessorText, '', ''
+                            );
+                }
+                break;
+            }
+        }
+        return tooltipString;
+    }
+
+}

package/dist/ts/gantt/renderer/event-marker.ts

@@ -0,0 +1,96 @@
+/**
+ * To render and update event markers in Gantt
+ */
+import { Gantt } from '../base/gantt';
+import { createElement, formatUnit, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
+import * as cls from '../base/css-constants';
+export class EventMarker {
+    public parent: Gantt;
+    public eventMarkersContainer: HTMLElement;
+    constructor(gantt: Gantt) {
+        this.parent = gantt;
+        this.eventMarkersContainer = null;
+    }
+    /**
+     * @returns {void} .
+     * @private
+     */
+    public renderEventMarkers(): void {
+        if (this.parent.eventMarkers && this.parent.eventMarkers.length > 0) {
+            if (!this.parent.ganttChartModule.chartBodyContent.contains(this.eventMarkersContainer)) {
+                this.eventMarkersContainer = createElement('div', {
+                    className: cls.eventMarkersContainer
+                });
+                this.eventMarkersContainer.setAttribute("role", "EventMarker");
+                this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
+            }
+            this.eventMarkersContainer.innerHTML = '';
+            this.getEventMarkersElements(this.eventMarkersContainer);
+        } else {
+            this.removeContainer();
+        }
+    }
+    /**
+     * @returns {void} .
+     * @private
+     */
+    public removeContainer(): void {
+        if (this.eventMarkersContainer) {
+            remove(this.eventMarkersContainer);
+            this.eventMarkersContainer = null;
+        }
+    }
+    /**
+     * Method to get event markers as html string
+     *
+     * @param {HTMLElement} container .
+     * @returns {void} .
+     */
+    private getEventMarkersElements(container: HTMLElement): void {
+        let left: number;
+        let eventMarkerElement: HTMLElement;
+        let spanElement: HTMLElement;
+        let rightArrow: HTMLElement;
+
+        for (let i: number = 0; i < this.parent.eventMarkers.length; i++) {
+            left = this.parent.dataOperation.getTaskLeft(
+                this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true), false);
+            eventMarkerElement = createElement('div', {
+                className: cls.eventMarkersChild, styles: `left:${left}px;  height:100%;`,
+                id: 'stripline' + i
+            });
+            if (this.parent.eventMarkers[i].label) {
+                spanElement = createElement('div', {
+                    className: cls.eventMarkersSpan
+                });
+                const property: string = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
+                spanElement[property] = this.parent.eventMarkers[i].label;
+                eventMarkerElement.appendChild(spanElement);
+                rightArrow = createElement('div', {
+                    className: 'e-gantt-right-arrow'
+                });
+                eventMarkerElement.appendChild(rightArrow);
+            }
+            if (this.parent.eventMarkers[i].cssClass) {
+                eventMarkerElement.classList.add(this.parent.eventMarkers[i].cssClass);
+            }
+            eventMarkerElement.setAttribute('tabindex', '-1');
+            if (!isNullOrUndefined(this.parent.eventMarkers[i].day)) {
+                eventMarkerElement.setAttribute('aria-label', this.parent.localeObj.getConstant('eventMarkers') + ' '
+                    + (typeof this.parent.eventMarkers[i].day === 'string' ?
+                        this.parent.eventMarkers[i].day : this.parent.getFormatedDate(this.parent.eventMarkers[i].day as Date))
+                    + ' ' + this.parent.eventMarkers[i].label);
+            }
+            container.appendChild(eventMarkerElement);
+        }
+    }
+    /**
+     * @returns {void} .
+     * @private
+     */
+    public updateContainerHeight(): void {
+        if (this.eventMarkersContainer) {
+            this.eventMarkersContainer.style.height = formatUnit(this.parent.getContentHeight());
+        }
+    }
+}

package/dist/ts/gantt/renderer/nonworking-day.ts

@@ -0,0 +1,205 @@
+/**
+ * To render holidays and weekends in Gantt
+ */
+import { Gantt } from '../base/gantt';
+import { createElement, formatUnit, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
+import * as cls from '../base/css-constants';
+
+export class NonWorkingDay {
+    private parent: Gantt;
+    public nonworkingContainer: HTMLElement;
+    private holidayContainer: HTMLElement;
+    private weekendContainer: HTMLElement;
+    constructor(gantt: Gantt) {
+        this.parent = gantt;
+        this.nonworkingContainer = null;
+        this.holidayContainer = null;
+        this.weekendContainer = null;
+    }
+    /**
+     * Method append nonworking container
+     *
+     * @returns {void} .
+     */
+    private createNonworkingContainer(): void {
+        if (!this.parent.ganttChartModule.chartBodyContent.contains(this.nonworkingContainer)) {
+            this.nonworkingContainer = createElement('div', {
+                className: cls.nonworkingContainer
+            });
+            this.nonworkingContainer.setAttribute("role","NonWorkingDays")
+            this.parent.ganttChartModule.chartBodyContent.appendChild(this.nonworkingContainer);
+        }
+    }
+    /**
+     * calculation for holidays rendering.
+     *
+     * @returns {void} .
+     * @private
+     */
+    public renderHolidays(): void {
+        if (this.parent.holidays && this.parent.holidays.length > 0) {
+            this.createNonworkingContainer();
+            if (!this.nonworkingContainer.contains(this.holidayContainer)) {
+                this.holidayContainer = createElement('div', {
+                    className: cls.holidayContainer
+                });
+                this.nonworkingContainer.appendChild(this.holidayContainer);
+            }
+            this.holidayContainer.innerHTML = this.getHolidaysElement().innerHTML;
+        } else if (this.holidayContainer && this.holidayContainer.parentNode) {
+            remove(this.holidayContainer);
+            if (this.nonworkingContainer && this.nonworkingContainer.childNodes.length === 0) {
+                remove(this.nonworkingContainer);
+            }
+        }
+    }
+    /**
+     * Method to return holidays as html string
+     *
+     * @returns {HTMLElement} .
+     */
+    private getHolidaysElement(): HTMLElement {
+        let fromDate: Date;
+        let toDate: Date;
+        const container: HTMLElement = createElement('div');
+        const height: number = this.parent.contentHeight;
+        let toolbarHeight: number = 0;
+        if(!isNullOrUndefined(this.parent.toolbarModule)) {
+           toolbarHeight =  this.parent.toolbarModule.element.offsetHeight 
+        }
+        const viewportHeight: number = this.parent.ganttHeight- toolbarHeight-this.parent.ganttChartModule.chartTimelineContainer.offsetHeight; 
+        for (let i: number = 0; i < this.parent.holidays.length; i++) {
+            if (this.parent.holidays[i].from && this.parent.holidays[i].to) {
+                fromDate = this.parent.dateValidationModule.getDateFromFormat(this.parent.holidays[i].from);
+                toDate = this.parent.dateValidationModule.getDateFromFormat(this.parent.holidays[i].to);
+                toDate.setDate(toDate.getDate() + 1);
+                fromDate.setHours(0, 0, 0, 0);
+                toDate.setHours(0, 0, 0, 0);
+            } else if (this.parent.holidays[i].from) {
+                fromDate = this.parent.dateValidationModule.getDateFromFormat(this.parent.holidays[i].from);
+                fromDate.setHours(0, 0, 0, 0);
+            } else if (this.parent.holidays[i].to) {
+                fromDate = this.parent.dateValidationModule.getDateFromFormat(this.parent.holidays[i].to);
+                fromDate.setHours(0, 0, 0, 0);
+            }
+            const width: number = (this.parent.holidays[i].from && this.parent.holidays[i].to) ?
+                this.parent.dataOperation.getTaskWidth(fromDate, toDate) : this.parent.perDayWidth;
+            const left: number = this.parent.dataOperation.getTaskLeft(fromDate, false);
+            const holidayDiv: HTMLElement = createElement('div', {
+                className: cls.holidayElement, styles: `left:${left}px; width:${width}px; height:100%;`
+            });
+            const spanTop: number = (viewportHeight < height) ? viewportHeight / 2 : height / 2;
+            const spanElement: HTMLElement = createElement('span', {
+                className: cls.holidayLabel, styles: `top:${spanTop}px;left:${(width / 2)}px;`
+            });
+            const property: string = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
+            spanElement[property] = this.parent.holidays[i].label ? this.parent.holidays[i].label : '';
+            holidayDiv.appendChild(spanElement);
+            if (this.parent.holidays[i].cssClass) {
+                holidayDiv.classList.add(this.parent.holidays[i].cssClass);
+            }
+            container.appendChild(holidayDiv);
+        }
+        return container;
+    }
+    /**
+     * @returns {void} .
+     * @private
+     */
+    public renderWeekends(): void {
+        if (this.parent.highlightWeekends) {
+            this.createNonworkingContainer();
+            if (!this.nonworkingContainer.contains(this.weekendContainer)) {
+                this.weekendContainer = createElement('div', {
+                    className: cls.weekendContainer
+                });
+                this.nonworkingContainer.appendChild(this.weekendContainer);
+            }
+            this.weekendContainer.innerHTML = this.getWeekendElements().innerHTML;
+        } else if (this.weekendContainer) {
+            remove(this.weekendContainer);
+            if (this.nonworkingContainer && this.nonworkingContainer.childNodes.length === 0) {
+                remove(this.nonworkingContainer);
+            }
+        }
+    }
+    /**
+     * Method to get weekend html string
+     *
+     * @returns {HTMLElement} .
+     */
+    private getWeekendElements(): HTMLElement {
+        const container: HTMLElement = createElement('div');
+        const startDate: Date = new Date(this.parent.timelineModule.timelineStartDate.getTime());
+        const endDate: Date = new Date(this.parent.timelineModule.timelineEndDate.getTime());
+        const nonWorkingIndex: number[] = this.parent.nonWorkingDayIndex;
+        let isFirstCell: boolean = true;
+        do {
+            if (nonWorkingIndex.indexOf(startDate.getDay()) !== -1) {
+                const left: number = this.parent.dataOperation.getTaskLeft(startDate, false);
+                let width: number = this.parent.perDayWidth;
+                if (isFirstCell) {
+                    const start: Date =  new Date(startDate.getTime());
+                    const tempEnd: Date = new Date(start.getTime());
+                    tempEnd.setDate(tempEnd.getDate() + 1);
+                    tempEnd.setHours(0, 0, 0, 0);
+                    width = this.parent.dataOperation.getTaskWidth(start, tempEnd);
+                    isFirstCell = false;
+                }
+                const weekendDiv: HTMLElement = createElement('div', {
+                    className: cls.weekend, styles: `left:${left}px;width:${width}px;height:100%;`
+                });
+                container.appendChild(weekendDiv);
+            }
+            startDate.setDate(startDate.getDate() + 1);
+            startDate.setHours(0, 0, 0, 0);
+        } while (startDate < endDate);
+        return container;
+    }
+
+    private updateHolidayLabelHeight(): void {
+        const height: number = this.parent.getContentHeight();
+        let toolbarHeight: number = 0;
+        if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
+           toolbarHeight =  this.parent.toolbarModule.element.offsetHeight 
+        }
+        const viewportHeight: number =  this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
+        const top: number = (viewportHeight < height) ? viewportHeight / 2 : height / 2;
+        const labels: NodeList = this.holidayContainer.querySelectorAll('.' + cls.holidayLabel);
+        for (let i: number = 0; i < labels.length; i++) {
+            (labels[i] as HTMLElement).style.top = formatUnit(top);
+        }
+    }
+    /**
+     * Method to update height for all internal containers
+     *
+     * @returns {void} .
+     * @private
+     */
+    public updateContainerHeight(): void {
+        const height: number = this.parent.getContentHeight();
+        if (this.holidayContainer) {
+            this.holidayContainer.style.height = formatUnit(height);
+            this.updateHolidayLabelHeight();
+        }
+        if (this.weekendContainer) {
+            this.weekendContainer.style.height = formatUnit(height);
+        }
+    }
+    /**
+     * Method to remove containers of holiday and weekend
+     *
+     * @returns {void} .
+     */
+    public removeContainers(): void {
+        if (this.holidayContainer) {
+            remove(this.holidayContainer);
+        }
+        if (this.weekendContainer) {
+            remove(this.weekendContainer);
+        }
+        if (this.nonworkingContainer) {
+            remove(this.nonworkingContainer);
+        }
+    }
+}

package/dist/ts/gantt/renderer/render.ts

@@ -0,0 +1,5 @@
+/**
+ * Add renderer for all individual elements
+ */
+
+//export * from DayMarkers;