@syncfusion/ej2-gantt
Version:
Essential JS 2 Gantt Component
1,134 lines • 194 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, createElement, Complex, addClass, removeClass, Event, formatUnit, Browser, closest } from '@syncfusion/ej2-base';
import { Internationalization, extend, getValue, isObjectArray, isObject, setValue, isUndefined } from '@syncfusion/ej2-base';
import { Property, NotifyPropertyChanges, L10n, EventHandler } from '@syncfusion/ej2-base';
import { isNullOrUndefined, KeyboardEvents, Collection, append, remove } from '@syncfusion/ej2-base';
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { TaskProcessor } from './task-processor';
import { GanttChart } from './gantt-chart';
import { Timeline } from '../renderer/timeline';
import { GanttTreeGrid } from './tree-grid';
import { SortSettings } from '../models/models';
import { LoadingIndicator } from '../models/models';
import { TaskFields, TimelineSettings, Holiday, EventMarker, DayWorkingTime, EditSettings, SelectionSettings } from '../models/models';
import { FilterSettings, SplitterSettings, TooltipSettings, LabelSettings } from '../models/models';
import { SearchSettings, ResourceFields } from '../models/models';
import { DateProcessor } from './date-processor';
import { ChartRows } from '../renderer/chart-rows';
import { Dependency } from '../actions/dependency';
import * as cls from './css-constants';
import { DataManager } from '@syncfusion/ej2-data';
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { getActualProperties } from '@syncfusion/ej2-grids';
import { ConnectorLine } from '../renderer/connector-line';
import { Splitter } from './splitter';
import { Tooltip } from '../renderer/tooltip';
import { FocusModule } from '../actions/keyboard';
import { isCountRequired } from './utils';
import { WeekWorkingTime } from '../models/week-working-time';
/**
*
* Represents the Gantt chart component.
* ```html
* <div id='gantt'></div>
* <script>
* var ganttObject = new Gantt({
* taskFields: { id: 'taskId', name: 'taskName', startDate: 'startDate', duration: 'duration' }
* });
* ganttObject.appendTo('#gantt');
* </script>
* ```
*/
var Gantt = /** @class */ (function (_super) {
__extends(Gantt, _super);
function Gantt(options, element) {
var _this = _super.call(this, options, element) || this;
_this.isRowSelected = false;
_this.showIndicator = true;
_this.singleTier = 0;
_this.expandedRecords = [];
_this.isLocaleChanged = false;
_this.triggeredColumnName = '';
_this.totalUndoAction = 0;
_this.previousFlatData = [];
_this.isExpandPerformed = false;
_this.oldRecords = [];
_this.updateDuration = false;
_this.isConvertedMilestone = false;
/** @hidden */
_this.isCancelled = false;
/** @hidden */
_this.isCollapseAll = false;
/** @hidden */
_this.previousRecords = {};
/** @hidden */
_this.editedRecords = [];
/** @hidden */
_this.modifiedRecords = [];
/** @hidden */
_this.isOnEdit = false;
/** @hidden */
_this.isOnDelete = false;
/** @hidden */
_this.isOnAdded = false;
/** @hidden */
_this.isExpandCollapseLevelMethod = false;
/** @hidden */
_this.isFromEventMarker = false;
/** @hidden */
_this.isDynamicData = false;
/** @hidden */
_this.isConnectorLineUpdate = false;
/** @hidden */
_this.staticSelectedRowIndex = -1;
_this.needsID = true;
/** @hidden */
_this.showActiveElement = true;
/** @hidden */
_this.addDeleteRecord = false;
/** @hidden */
_this.enableHeaderFocus = true;
/** @hidden */
_this.enableValidation = true;
/**
* @private
*/
_this.isTreeGridRendered = false;
/**
* @private
*/
_this.isFromOnPropertyChange = false;
/**
* @private
*/
_this.isFromRenderBaseline = false;
/**
* @private
*/
_this.isGanttChartRendered = false;
/**
* @private
*/
_this.isEdit = false;
/**
* To get the module name
*
* @returns {string} .
* @private
*/
_this.eventMarkerColloction = [];
setValue('mergePersistData', _this.mergePersistGanttData, _this);
return _this;
}
Gantt.prototype.getModuleName = function () {
return 'gantt';
};
/**
* For internal use only - Initialize the event handler
*
* @returns {void} .
* @private
*/
Gantt.prototype.preRender = function () {
this.initProperties();
};
Gantt.prototype.getCurrentDayStartTime = function (date) {
var dayStartTime;
if (this.weekWorkingTime.length > 0) {
dayStartTime = this['getStartTime'](date);
}
else {
dayStartTime = this.defaultStartTime;
}
return dayStartTime;
};
Gantt.prototype.getCurrentDayEndTime = function (date) {
var dayEndTime;
if (this.weekWorkingTime.length > 0) {
dayEndTime = this['getEndTime'](date);
}
else {
dayEndTime = this.defaultEndTime;
}
return dayEndTime;
};
Gantt.prototype.getStartTime = function (date) {
var day = date.getDay();
var startTime;
switch (day) {
case 0:
startTime = this.sundayDefaultStartTime;
break;
case 1:
startTime = this.mondayDefaultStartTime;
break;
case 2:
startTime = this.tuesdayDefaultStartTime;
break;
case 3:
startTime = this.wednesdayDefaultStartTime;
break;
case 4:
startTime = this.thursdayDefaultStartTime;
break;
case 5:
startTime = this.fridayDefaultStartTime;
break;
default:
startTime = this.saturdayDefaultStartTime;
break;
}
return startTime;
};
Gantt.prototype.getEndTime = function (date) {
var day = date.getDay();
var endTime;
switch (day) {
case 0:
endTime = this.sundayDefaultEndTime;
break;
case 1:
endTime = this.mondayDefaultEndTime;
break;
case 2:
endTime = this.tuesdayDefaultEndTime;
break;
case 3:
endTime = this.wednesdayDefaultEndTime;
break;
case 4:
endTime = this.thursdayDefaultEndTime;
break;
case 5:
endTime = this.fridayDefaultEndTime;
break;
default:
endTime = this.saturdayDefaultEndTime;
break;
}
return endTime;
};
Gantt.prototype.getNonWorkingRange = function (date) {
var day = date.getDay();
var nonWorkingTimeRange;
switch (day) {
case 0:
nonWorkingTimeRange = this.sundayNonWorkingTimeRanges;
break;
case 1:
nonWorkingTimeRange = this.mondayNonWorkingTimeRanges;
break;
case 2:
nonWorkingTimeRange = this.tuesdayNonWorkingTimeRanges;
break;
case 3:
nonWorkingTimeRange = this.wednesdayNonWorkingTimeRanges;
break;
case 4:
nonWorkingTimeRange = this.thursdayNonWorkingTimeRanges;
break;
case 5:
nonWorkingTimeRange = this.fridayNonWorkingTimeRanges;
break;
default:
nonWorkingTimeRange = this.saturdayNonWorkingTimeRanges;
break;
}
return nonWorkingTimeRange;
};
Gantt.prototype.getWorkingRange = function (date) {
var day = date.getDay();
var workingTimeRanges;
switch (day) {
case 0:
workingTimeRanges = this.sundayWorkingTimeRanges;
break;
case 1:
workingTimeRanges = this.mondayWorkingTimeRanges;
break;
case 2:
workingTimeRanges = this.tuesdayWorkingTimeRanges;
break;
case 3:
workingTimeRanges = this.wednesdayWorkingTimeRanges;
break;
case 4:
workingTimeRanges = this.thursdayWorkingTimeRanges;
break;
case 5:
workingTimeRanges = this.fridayWorkingTimeRanges;
break;
default:
workingTimeRanges = this.saturdayWorkingTimeRanges;
break;
}
return workingTimeRanges;
};
Gantt.prototype.getSecondsPerDay = function (date) {
var day = date.getDay();
var totalSeconds;
switch (day) {
case 0:
totalSeconds = this.sundaySeconds;
break;
case 1:
totalSeconds = this.mondaySeconds;
break;
case 2:
totalSeconds = this.tuesdaySeconds;
break;
case 3:
totalSeconds = this.wednesdaySeconds;
break;
case 4:
totalSeconds = this.thursdaySeconds;
break;
case 5:
totalSeconds = this.fridaySeconds;
break;
case 6:
totalSeconds = this.saturdaySeconds;
break;
default:
totalSeconds = this.secondsPerDay;
break;
}
return totalSeconds;
};
Gantt.prototype.initProperties = function () {
this.globalize = new Internationalization(this.locale);
this.isAdaptive = Browser.isDevice;
this.flatData = [];
this.currentViewData = [];
this.updatedRecords = [];
this.ids = [];
this.ganttColumns = [];
this.updateOffsetOnTaskbarEdit = this.UpdateOffsetOnTaskbarEdit === false ?
this.UpdateOffsetOnTaskbarEdit : this.updateOffsetOnTaskbarEdit;
this.localeObj = new L10n(this.getModuleName(), this.getDefaultLocale(), this.locale);
this.dataOperation = new TaskProcessor(this);
this.nonWorkingHours = [];
this.mondayNonWorkingHours = [];
this.tuesdayNonWorkingHours = [];
this.wednesdayNonWorkingHours = [];
this.thursdayNonWorkingHours = [];
this.fridayNonWorkingHours = [];
this.saturdayNonWorkingHours = [];
this.sundayNonWorkingHours = [];
this.nonWorkingTimeRanges = [];
this.mondayNonWorkingTimeRanges = [];
this.tuesdayNonWorkingTimeRanges = [];
this.wednesdayNonWorkingTimeRanges = [];
this.thursdayNonWorkingTimeRanges = [];
this.fridayNonWorkingTimeRanges = [];
this.saturdayNonWorkingTimeRanges = [];
this.sundayNonWorkingTimeRanges = [];
this.workingTimeRanges = [];
this.mondayWorkingTimeRanges = [];
this.tuesdayWorkingTimeRanges = [];
this.wednesdayWorkingTimeRanges = [];
this.thursdayWorkingTimeRanges = [];
this.fridayWorkingTimeRanges = [];
this.saturdayWorkingTimeRanges = [];
this.sundayWorkingTimeRanges = [];
this.defaultEndTime = null;
this.defaultStartTime = null;
this.mondayDefaultStartTime = null;
this.mondayDefaultEndTime = null;
this.tuesdayDefaultStartTime = null;
this.tuesdayDefaultEndTime = null;
this.wednesdayDefaultStartTime = null;
this.wednesdayDefaultEndTime = null;
this.thursdayDefaultStartTime = null;
this.thursdayDefaultEndTime = null;
this.fridayDefaultStartTime = null;
this.fridayDefaultEndTime = null;
this.saturdayDefaultStartTime = null;
this.saturdayDefaultEndTime = null;
this.sundayDefaultStartTime = null;
this.sundayDefaultEndTime = null;
this.durationUnitTexts = {
days: 'days',
hours: 'hours',
minutes: 'minutes',
day: 'day',
hour: 'hour',
minute: 'minute'
};
this.durationUnitEditText = {
minute: ['m', 'min', 'minute', 'minutes'],
hour: ['h', 'hr', 'hour', 'hours'],
day: ['d', 'dy', 'day', 'days']
};
this.perDayWidth = null;
this.isMileStoneEdited = false;
this.chartVerticalLineContainer = null;
this.updatedConnectorLineCollection = [];
this.connectorLineIds = [];
this.predecessorsCollection = [];
this.isInPredecessorValidation = this.enablePredecessorValidation;
this.isValidationEnabled = true;
this.isLoad = true;
this.editedTaskBarItem = null;
this.validationDialogElement = null;
this.currentEditedArgs = {};
this.dialogValidateMode = {
respectLink: false,
removeLink: false,
preserveLinkWithEditing: true
};
this.secondsPerDay = this.dataOperation.getSecondsPerDay();
this.nonWorkingDayIndex = [];
this.dataOperation.getNonWorkingDayIndex();
this.columnMapping = {};
this.controlId = this.element.id;
this.cloneProjectStartDate = this.enablePersistence && this.cloneProjectStartDate ?
this.cloneProjectStartDate : null;
this.cloneProjectEndDate = this.enablePersistence && this.cloneProjectEndDate ?
this.cloneProjectEndDate : null;
this.totalHolidayDates = this.dataOperation.getHolidayDates();
this.ganttChartModule = new GanttChart(this);
this.timelineModule = new Timeline(this);
this.chartRowsModule = new ChartRows(this);
this.treeGridModule = new GanttTreeGrid(this);
this.dateValidationModule = new DateProcessor(this);
this.predecessorModule = new Dependency(this);
this.connectorLineModule = new ConnectorLine(this);
this.splitterModule = new Splitter(this);
this.tooltipModule = new Tooltip(this);
this.keyConfig = {
home: 'home',
end: 'end',
downArrow: 'downarrow',
upArrow: 'uparrow',
collapseAll: 'ctrl+uparrow',
expandAll: 'ctrl+downarrow',
collapseRow: 'ctrl+shift+uparrow',
expandRow: 'ctrl+shift+downarrow',
saveRequest: '13',
escape: '27',
addRow: 'insert',
addRowDialog: 'ctrl+insert',
editRowDialog: 'ctrl+f2',
delete: 'delete',
tab: 'tab',
shiftTab: 'shift+tab',
focusTask: 'shift+f5',
indentLevel: 'shift+leftarrow',
outdentLevel: 'shift+rightarrow',
focusSearch: 'ctrl+shift+70',
contextMenu: 'shift+F10',
undo: 'ctrl+z',
redo: 'ctrl+y',
selectAll: 'ctrl+a'
};
this.focusModule = new FocusModule(this);
if (this.zoomingLevels.length === 0) {
this.setProperties({ zoomingLevels: this.getZoomingLevels() }, true);
}
this.resourceFieldsMapping();
if (isNullOrUndefined(this.resourceFields.unit)) { //set resourceUnit as unit if not mapping
this.setProperties({ resourceFields: { unit: 'unit' } }, true);
}
this.taskIds = [];
};
Gantt.prototype.isUndoRedoItemPresent = function (action) {
if (this.undoRedoModule && this.undoRedoActions && this.undoRedoActions.indexOf(action) !== -1) {
return true;
}
else {
return false;
}
};
/**
* @returns {string} .
* @private
*/
Gantt.prototype.getDateFormat = function () {
if (!isNullOrUndefined(this.dateFormat)) {
return this.dateFormat;
}
else {
var ganttDateFormat = this.globalize.getDatePattern({ skeleton: 'yMd' });
return ganttDateFormat;
}
};
/**
* To get timezone offset.
*
* @returns {number} .
* @private
*/
Gantt.prototype.getDefaultTZOffset = function () {
var janMonth = new Date(new Date().getFullYear(), 0, 1);
var julMonth = new Date(new Date().getFullYear(), 6, 1); //Because there is no reagions DST inbetwwen this range
return Math.max(janMonth.getTimezoneOffset(), julMonth.getTimezoneOffset());
};
/**
* To check whether the date is in DST.
*
* @param {Date} date - Defines the date to check whether it is DST.
* @returns {boolean} .
* @private
*/
Gantt.prototype.isInDst = function (date) {
return date.getTimezoneOffset() < this.getDefaultTZOffset();
};
/**
* Method to map resource fields.
*
* @returns {void} .
*/
Gantt.prototype.resourceFieldsMapping = function () {
var resourceSettings = this.resourceFields;
resourceSettings.id = !isNullOrUndefined(resourceSettings.id) ? resourceSettings.id : this.resourceIDMapping;
resourceSettings.name = !isNullOrUndefined(resourceSettings.name) ? resourceSettings.name : this.resourceNameMapping;
};
/**
* To validate height and width
*
* @param {string | number} value .
* @returns {string} .
*/
Gantt.prototype.validateDimentionValue = function (value) {
if (!isNullOrUndefined(value)) {
if (typeof (value) === 'string' && value !== 'auto' && value.indexOf('%') === -1) {
return value.indexOf('px') === -1 ? value + 'px' : value;
}
else if (typeof (value) === 'number') {
return value + 'px';
}
else {
return value.toString();
}
}
else {
return null;
}
};
/**
* To calculate dimensions of Gantt control
*
* @returns {void} .
*/
Gantt.prototype.calculateDimensions = function () {
var settingsHeight = this.validateDimentionValue(this.height);
var settingsWidth = this.validateDimentionValue(this.width);
if (!isNullOrUndefined(this.width) && typeof (this.width) === 'string' && this.width.indexOf('%') !== -1) {
settingsWidth = this.width;
}
var elementStyleHeight = this.element.style.height;
var elementStyleWidth = this.element.style.width;
if (settingsWidth) {
this.element.style.width = settingsWidth;
}
if (settingsHeight) {
this.element.style.height = settingsHeight;
}
if (!settingsHeight && !elementStyleHeight) {
this.element.style.height = 'auto'; // old 450px
}
if (!settingsWidth && !elementStyleWidth) {
this.element.style.width = 'auto';
}
this.ganttHeight = this.element.offsetHeight;
this.ganttWidth = this.element.offsetWidth;
};
/**
* @returns {void} .
* @private
*/
Gantt.prototype.render = function () {
if (this.isReact) {
this.treeGrid.isReact = true;
this.treeGrid.grid.isReact = true;
}
if (this.isVue) {
this.treeGrid.isVue = true;
this.treeGrid.grid.isVue = true;
/* eslint-disable-next-line */
this.treeGrid.vueInstance = this.vueInstance;
/* eslint-disable-next-line */
this.treeGrid.grid.vueInstance = this.vueInstance;
}
this.element.setAttribute('role', 'application');
createSpinner({ target: this.element }, this.createElement);
this.trigger('load', {});
this.element.classList.add(cls.root);
if (this.isAdaptive) {
this.element.classList.add(cls.adaptive);
}
else {
this.element.classList.remove(cls.adaptive);
}
this.calculateDimensions();
if (!isNullOrUndefined(this.toolbarModule)) {
this.renderToolbar();
}
this.splitterModule.renderSplitter();
this.notify('renderPanels', null);
this.actionFailures();
if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === 'Shimmer') {
this.showMaskRow();
}
else {
this.showSpinner();
}
if (this.dataMap) {
this.dataMap.clear();
}
this.dataOperation.checkDataBinding();
};
Gantt.prototype.actionFailures = function () {
var failureCases = [];
var lettersRegex = /^[a-zA-Z\s/]+$/;
var allPropertiesNull = true;
var fields = this.taskFields['properties'];
var shouldBreak = false;
Object.keys(fields).forEach(function (key) {
if (fields[key] !== null) {
allPropertiesNull = false;
shouldBreak = true;
}
});
var isPrimary = true;
for (var i = 0; i < this.columns.length; i++) {
if (this.columns[i]['isPrimaryKey']) {
isPrimary = false;
break;
}
}
if (allPropertiesNull) {
failureCases.push('Gantt Task Fields are not configured properly. The task fields are crucial for both the project and resource views to function properly. Please ensure that the gantt task fields are properly configured!');
}
if (this.viewType === 'ResourceView') {
if (!this.resourceFields.id) {
failureCases.push('Gantt Resource Fields are not properly configured, which is crucial for the Resource View. Please ensure that the resource fields are configured correctly!');
}
}
if (this.dataSource instanceof DataManager && isNullOrUndefined(this.taskFields.hasChildMapping)) {
failureCases.push('hasChildMapping property is not configured for load-on-demand. Please ensure its properly configured in the Gantt Task Fields!');
}
if (!isNullOrUndefined(this.timelineSettings.topTier.format) && this.timelineSettings.topTier.format !== '' && !lettersRegex.test(this.timelineSettings.topTier.format)) {
failureCases.push('The provided top tier format is invalid. Please ensure that you provide a valid format for these tier. Make sure to use only letters and avoid numbers or special characters!');
}
if (!isNullOrUndefined(this.timelineSettings.bottomTier.format) && this.timelineSettings.bottomTier.format !== '' && !lettersRegex.test(this.timelineSettings.bottomTier.format)) {
failureCases.push('The provided bottom tier format is invalid. Please ensure that you provide a valid format for these tier. Make sure to use only letters and avoid numbers or special characters!');
}
if (isPrimary && this.viewType !== 'ResourceView') {
failureCases.push('Primarykey is not configured properly. The primarykey is crucial for doing CRUD operations or map taskId in column field of gantt!');
}
if (this.eventMarkers.length > 0) {
this.eventMarkers.forEach(function (markers) {
if (!markers.day) {
failureCases.push('Day is not configured properly in event markers.Please ensure that the day in event markers is properly configured!');
}
});
}
/* eslint-disable-next-line */
function checkModule(moduleName, settings, injectedModules, failureCases) {
/* eslint-disable-next-line */
var modules;
if (!isNullOrUndefined(injectedModules)) {
modules = injectedModules.filter(function (e) { return e.prototype.getModuleName() === moduleName; });
}
if (settings && !isNullOrUndefined(modules) && modules.length === 0) {
failureCases.push("Module " + moduleName + " is not available in Gantt component! You either misspelled the module name or forgot to load it!");
}
}
checkModule('sort', this.allowSorting, this.injectedModules, failureCases);
var editSettings;
if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing ||
this.editSettings.allowNextRowEdit || this.editSettings.allowTaskbarEditing || this.editSettings.mode ||
this.editSettings.newRowPosition || this.editSettings.showDeleteConfirmDialog) {
editSettings = true;
}
checkModule('edit', editSettings, this.injectedModules, failureCases);
checkModule('reorder', this.allowReordering, this.injectedModules, failureCases);
checkModule('excelExport', this.allowExcelExport, this.injectedModules, failureCases);
var dragAndDrop;
if (this.allowRowDragAndDrop || this.allowTaskbarDragAndDrop) {
dragAndDrop = true;
}
checkModule('rowDragAndDrop', dragAndDrop, this.injectedModules, failureCases);
checkModule('criticalPath', this.enableCriticalPath, this.injectedModules, failureCases);
checkModule('undoRedo', this.enableUndoRedo, this.injectedModules, failureCases);
checkModule('resize', this.allowResizing, this.injectedModules, failureCases);
var toolbar;
if (this.toolbar && this.toolbar.length > 0) {
toolbar = true;
}
checkModule('toolbar', toolbar, this.injectedModules, failureCases);
var filter;
if (this.allowFiltering || (this.toolbar && this.toolbar.indexOf('Search') !== -1)) {
filter = true;
}
checkModule('filter', filter, this.injectedModules, failureCases);
checkModule('selection', this.allowSelection, this.injectedModules, failureCases);
var dayMarkers;
if (this.highlightWeekends || (this.holidays && this.holidays.length > 0)
|| (this.eventMarkers && this.eventMarkers.length > 0)) {
dayMarkers = true;
}
checkModule('dayMarkers', dayMarkers, this.injectedModules, failureCases);
checkModule('contextMenu', this.enableContextMenu, this.injectedModules, failureCases);
checkModule('columnMenu', this.showColumnMenu, this.injectedModules, failureCases);
checkModule('pdfExport', this.allowPdfExport, this.injectedModules, failureCases);
checkModule('virtualScroll', this.enableVirtualization, this.injectedModules, failureCases);
if (failureCases.length > 0) {
/* eslint-disable-next-line */
var failureEventArgs_1 = {
error: {}
};
/* eslint-disable-next-line */
failureCases.forEach(function (err, index) {
failureEventArgs_1.error[parseInt(index, 10)] = err;
});
this.trigger('actionFailure', failureEventArgs_1);
}
};
Gantt.prototype.hideMaskRow = function () {
var isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
if (!isNullOrUndefined(this.contentMaskTable) && (isTablePresent !== 0 || this.contentMaskTable)) {
var maskTable = this.contentMaskTable;
remove(maskTable);
this.contentMaskTable = null;
}
isTablePresent = this.element.querySelectorAll('.e-masked-table').length;
if (!isNullOrUndefined(this.headerMaskTable) && (isTablePresent !== 0 || this.headerMaskTable)) {
var maskTable = this.headerMaskTable;
remove(maskTable);
this.headerMaskTable = null;
}
while ((this.element.querySelectorAll('.e-table-background')).length !== 0) {
this.element.querySelectorAll('.e-table-background')[0].remove();
}
while ((this.element.querySelectorAll('.e-temp-timeline')).length !== 0) {
this.element.querySelectorAll('.e-temp-timeline')[0].remove();
}
if (this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer).length !== 0) {
for (var i = 0; i < this.singleTier; i++) {
if (!isNullOrUndefined(this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer)[parseInt(i.toString(), 10)])) {
this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer)[parseInt(i.toString(), 10)]['style'].visibility = 'visible';
}
}
}
if (!isNullOrUndefined(this.element.querySelector('.' + cls.timelineHeaderContainer))) {
this.element.querySelector('.' + cls.timelineHeaderContainer)['style'].position = 'relative';
}
if (!isNullOrUndefined(this.element.getElementsByClassName(cls.chartBodyContent)[0])) {
this.element.getElementsByClassName(cls.chartBodyContent)[0]['style'].visibility = 'visible';
}
};
Gantt.prototype.showMaskRow = function () {
var ganttHeader = this.chartPane.childNodes[0].childNodes[0];
this.scrollLeftValue = this.chartPane.childNodes[0].childNodes[0]['scrollLeft'];
var ganttContent = this.chartPane.childNodes[0].childNodes[1];
if (this.treeGrid.element) {
this.ganttChartModule['setVirtualHeight']();
}
if (!this.contentMaskTable) {
if (ganttContent) {
var content = ganttContent;
this.renderBackGround(content);
if (this.ganttChartModule.scrollObject['isSetScrollLeft']) {
if (this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer).length !== 0) {
this.singleTier = this.timelineModule.isSingleTier ? 1 : 2;
for (var i = 0; i < this.singleTier; i++) {
this.element.querySelectorAll('.' + cls.timelineHeaderTableContainer)[parseInt(i.toString(), 10)]['style'].visibility = 'hidden';
}
}
if (this.singleTier === 0) {
this.singleTier = 2;
}
}
this.element.getElementsByClassName(cls.chartBodyContent)[0]['style'].visibility = 'hidden';
this.contentMaskTable = this.contentMaskTable = this.createMaskTable(content);
}
if (ganttHeader && this.ganttChartModule.scrollObject['isSetScrollLeft']) {
this.element.querySelector('.' + cls.timelineHeaderContainer)['style'].position = 'static';
var content = ganttHeader;
this.renderHeaderBackground(content);
this.headerMaskTable = this.headerMaskTable = this.createMaskTable(content);
}
}
};
Gantt.prototype.renderHeaderBackground = function (element) {
var parentElement = element;
// const timelineHeight: any = element.getBoundingClientRect().height;
var header = closest(parentElement, '.' + cls.timelineHeaderContainer) ? true : false;
if (header) {
var div = this.createElement('div', { className: 'e-table-background' });
// const tempRow: Element = this.createElement('tr', {
// className: 'e-masked-row e-row', attrs: {
// style: 'height: ' + timelineHeight + 'px;'
// }
// });
var backgroundLines = 0;
var containerWidth = Math.round(element.getBoundingClientRect().width);
for (var i = 0; i < 3; i++) {
if (this.enableRtl) {
div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
style: 'left: ' + (containerWidth -= ((160))) + 'px; top:0px;'
} }));
}
else {
div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
style: 'left: ' + (backgroundLines += ((160))) + 'px; top:0px;'
} }));
}
}
parentElement.insertBefore(div, parentElement.firstChild);
}
};
Gantt.prototype.renderBackGround = function (element) {
var parentElement = element;
// const timelineHeight: number = element.getBoundingClientRect().height;
var content = closest(parentElement, '.' + cls.chartBodyContainer) ? true : false;
if (content) {
var div = this.createElement('div', { className: 'e-table-background' });
// const tempRow: Element = this.createElement('tr', {
// className: 'e-masked-row e-row', attrs: {
// style: 'height: ' + timelineHeight + 'px;'
// }
// });
var backgroundLines = 0;
var containerWidth = Math.round(element.getBoundingClientRect().width);
for (var i = 0; i < 3; i++) {
if (this.enableRtl) {
div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
style: 'left: ' + (containerWidth -= (160)) + 'px;z-index:1;'
} }));
}
else {
div.appendChild(this.createElement('div', { className: 'e-div-background', attrs: {
style: 'left: ' + (backgroundLines += (160)) + 'px;z-index:1;'
} }));
}
}
parentElement.insertBefore(div, parentElement.firstChild);
}
};
/* eslint-disable-next-line */
Gantt.prototype.createMaskTable = function (element) {
var parentElement = element;
var shimmerContainerHeight = element.getBoundingClientRect().height;
var header = closest(parentElement, '.' + cls.timelineHeaderContainer) ? true : false;
/* eslint-disable-next-line */
var maskTable;
if (header) {
maskTable = this.createEmptyTimeLineTable(shimmerContainerHeight);
maskTable.style.position = 'sticky';
maskTable.style.left = 0 + 'px';
if (this.enableRtl) {
maskTable.style.removeProperty('left');
}
}
else {
maskTable = this.createEmptyMaskTable(shimmerContainerHeight);
maskTable.style.position = 'absolute';
maskTable.style.zIndex = 1;
}
if (!header) {
maskTable.style.height = element.getBoundingClientRect().height + 'px';
parentElement.insertBefore(maskTable, parentElement.firstChild);
}
else {
maskTable.style.height = element.getBoundingClientRect().height + 'px';
var div = this.createElement('div', { className: 'e-temp-timeline' });
div.style.width = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] + 'px';
div.style.position = 'sticky';
if (this.enableRtl) {
div.style['margin-right'] = Math.abs(this.scrollLeftValue) + 'px';
}
else {
div.style['margin-left'] = this.scrollLeftValue + 'px';
}
div.appendChild(maskTable);
parentElement.insertBefore(div, parentElement.firstChild);
}
return maskTable;
};
Gantt.prototype.createEmptyTimeLineTable = function (timelineHeight) {
var table = this.createElement('table', { className: 'e-table e-masked-table' });
var tbody = this.createElement('tbody', { className: 'e-masked-tbody' });
/* eslint-disable-next-line */
var row = [];
var duplicateRow = this.createElement('tr', {
className: 'e-masked-row e-row', attrs: {
style: 'height: ' + timelineHeight / 2 + 'px;'
}
});
for (var i = 0; i < this.singleTier; i++) {
row.push(duplicateRow.cloneNode(true));
}
this.topBottomHeader = 0;
for (var i = 0; i < row.length; i++) {
tbody.appendChild(this.applyTimelineMaskRow(row[parseInt(i.toString(), 10)]));
this.topBottomHeader = this.topBottomHeader + 1;
}
table.appendChild(tbody);
table.style.width = 100 + '%';
return table;
};
Gantt.prototype.applyTimelineMaskRow = function (row) {
var maskRow = row;
var num = 4;
if (this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 166 > 4) {
num = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 166;
}
for (var i = 0; i < num; i++) {
maskRow.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
}
for (var i = 0; i < maskRow.childNodes.length - 1; i++) {
maskRow.childNodes[parseInt(i.toString(), 10)]['style']['width'] = 166 + 'px';
}
var maskCells = [].slice.call(maskRow.childNodes);
for (var i = 0; i < maskCells.length; i++) {
var maskCell = maskCells[parseInt(i.toString(), 10)];
switch (this.topBottomHeader) {
case 0:
{
if (this.enableRtl) {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-timelineHeader"></span>';
maskCell.children[0]['style'].left = -20 + 'px';
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-timelineHeader"></span>';
}
break;
}
case 1:
{
maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
maskCell.appendChild(this.createElement('td', { className: 'e-timeline-masked-top-header-cell' }));
var innerMaskCells = [].slice.call(maskCell.childNodes);
for (var i_1 = 0; i_1 < innerMaskCells.length; i_1++) {
var htmlInner = innerMaskCells[parseInt(i_1.toString(), 10)];
if (i_1 === 0) {
if (this.enableRtl) {
htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML"></span>';
htmlInner.children[0]['style'].left = -14 + 'px';
}
else {
htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML"></span>';
}
}
else if (i_1 === 1) {
if (this.enableRtl) {
htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML1"></span>';
htmlInner.children[0]['style'].left = -30 + 'px';
}
else {
htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML1"></span>';
}
}
else {
if (this.enableRtl) {
htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML2"></span>';
htmlInner.children[0]['style'].left = -60 + 'px';
}
else {
htmlInner.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-innerHTML2"></span>';
}
}
}
break;
}
}
}
return maskRow;
};
Gantt.prototype.createEmptyMaskTable = function (timelineHeight) {
var table = this.createElement('table', { className: 'e-table e-masked-table' });
var tbody = this.createElement('tbody', { className: 'e-masked-tbody' });
/* eslint-disable-next-line */
var row = [];
var duplicateRow = this.createElement('tr', { className: 'e-masked-row e-row', attrs: {
style: 'height: ' + timelineHeight / 7 + 'px;'
} });
this.columnLoop = 0;
for (var i = 0; i < 6; i++) {
row.push(duplicateRow.cloneNode(true));
}
for (var j = 0; j < row.length; j++) {
if (this.columnLoop < 4) {
this.columnLoop = this.columnLoop + 1;
}
else if (this.columnLoop === 4) {
this.columnLoop = 1;
}
tbody.appendChild(this.applyMaskRow(row[parseInt(j.toString(), 10)]));
}
table.appendChild(tbody);
table.style.width = 100 + '%';
var div = this.createElement('div', { className: 'e-temp-container' });
div.style.width = 'calc(100% - ' + 17 + 'px)';
div.style.overflow = 'hidden';
div.appendChild(table);
return div;
};
Gantt.prototype.applyMaskRow = function (row) {
var maskRow = row;
if (this.columnLoop < 4) {
var num = 2;
if (this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 300 > 2) {
num = this.element.getElementsByClassName('e-timeline-header-container')[0]['offsetWidth'] / 300;
}
for (var i = 0; i < num; i++) {
maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
}
}
else {
maskRow.appendChild(this.createElement('td', { className: 'e-masked-cell e-rowcell' }));
}
var maskCells = [].slice.call(maskRow.childNodes);
for (var i = 0; i < maskCells.length; i++) {
var maskCell = maskCells[parseInt(i.toString(), 10)];
switch (this.columnLoop) {
case 1:
if (i === 0) {
if (this.enableRtl) {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell01"></span>';
maskCell.children[0]['style'].left = -14 + 'px';
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell01"></span>';
}
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell02"></span>';
}
break;
case 2:
if (i === 0) {
if (this.enableRtl) {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell03"></span>';
maskCell.children[0]['style'].left = -14 + 'px';
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell03"></span>';
}
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell04"></span>';
}
break;
case 3:
if (i === 0) {
if (this.enableRtl) {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell05"></span>';
maskCell.children[0]['style'].left = -64 + 'px';
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell05"></span>';
}
}
else {
if (this.enableRtl) {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell06"></span>';
maskCell.children[0]['style'].left = -192 + 'px';
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell06"></span>';
}
}
break;
case 4:
if (this.enableRtl) {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell07"></span>';
maskCell.children[0]['style'].left = -388 + 'px';
}
else {
maskCell.innerHTML = '<span class="e-mask e-skeleton e-skeleton-text e-shimmer-wave e-maskcell07"></span>';
}
break;
}
}
return maskRow;
};
/**
* Method used to show spinner.
*
* @returns {void} .
*/
Gantt.prototype.showSpinner = function () {
showSpinner(this.element);
};
/**
* Method used to hide spinner.
*
* @returns {void} .
*/
Gantt.prototype.hideSpinner = function () {
hideSpinner(this.element);
};
/**
* @returns {void} .
* @private
*/
Gantt.prototype.processTimeline = function () {
this.timelineModule.processTimelineUnit();
this.timelineModule.calculateZoomingLevelsPerDayWidth(); // To calculate the perDaywidth
};
/**
* @param {boolean} isChange -Defines whether task data is changed.
* @returns {void} .
* @private
*/
Gantt.prototype.renderGantt = function (isChange) {
if (isChange) {
this.isFromOnPropertyChange = isChange;
}
if (this.enableValidation) {
this.dataOperation.calculateProjectDates();
this.timelineModule.validateTimelineProp();
}
var flatData = this.flatData;
var flatDataCollection = new Map();
if (flatData != null) {
for (var _i = 0, flatData_1 = flatData; _i < flatData_1.length; _i++) {
var record = flatData_1[_i];
flatDataCollection.set(record.ganttProperties.rowUniqueID.toString(), record);
}
}
if (this.allowParentDependency) {
this.predecessorModule.updateParentPredecessor(flatDataCollection);
}
if (this.predecessorModule && this.taskFields.dependency) {
this.predecessorModule['parentIds'] = [];
this.predecessorModule['parentRecord'] = [];
this.predecessorModule.updatePredecessors(flatDataCollection);
if (this.isInPredecessorValidation && this.enableValidation && this.autoCalculateDateScheduling &&
!(this.isLoad && !this.treeGrid.loadChildOnDemand && this.taskFields.hasChildMapping)) {
this.predecessorModule.updatedRecordsDateByPredecessor(flatDataCollection);
}
}
if (this.enableValidation) {
this.dataOperation.calculateProjectDates();
this.timelineModule.validateTimelineProp();
this.dataOperation.updateGanttData();
}
if (isChange) {
if (this.dataSource instanceof Object && isCountRequired(this)) {
var count = getValue('count', this.dataSource);
this.treeGrid.dataSource = { result: