@syncfusion/ej2-gantt
Version:
Essential JS 2 Gantt Component
1,136 lines • 215 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.showLoadingIndicator = function () {
if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === 'Shimmer') {
this.showMaskRow();
}
else {
this.showSpinner();
}
};
Gantt.prototype.hideLoadingIndicator = function () {
if (!isNullOrUndefined(this.loadingIndicator) && this.loadingIndicator.indicatorType === 'Shimmer') {
this.hideMaskRow();
}
else {
this.hideSpinner();
}
};
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.editedPredecessorRecords = [];
this.validationDialogElement = null;
this.currentEditedArgs = {};
this.dialogValidateMode = {
respectLink: false,
removeLink: false,
preserveLinkWithEditing: true
};
if (this.taskFields.constraintType && this.taskFields.constraintDate) {
this.dialogValidateMode.respectMustStartOn = false;
this.dialogValidateMode.respectMustFinishOn = false;
this.dialogValidateMode.respectStartNoLaterThan = false;
this.dialogValidateMode.respectFinishNoLaterThan = false;
}
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;
}
};
/**
* Inserts a record into the flatData array at the specified index and updates the flatDataMap.
* @param {IGanttData} record - The Gantt data record to insert, containing ganttProperties with a rowUniqueID.
* @param {number} index - The index at which to insert the record in the flatData array.
* @returns {void}.
* @private
*/
Gantt.prototype.insertRecord = function (record, index) {
this.flatData.splice(index, 0, record);
};
/**
* Removes one or more Gantt records from the flatData array starting at the specified index and deletes their entries from the flatDataMap.
* @param {number} startIndex - The starting index from which to remove records in the flatData array.
* @param {number} count - The number of records to remove (default is 1).
* @returns {void}
* @private
*/
Gantt.prototype.removeRecords = function (startIndex, count) {
if (count === void 0) { count = 1; }
this.flatData.splice(startIndex, count);
};
/**
* @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;
}
if (this.taskFields &&
this.taskFields.constraintDate &&
this.taskFields.constraintType &&
!this.updateOffsetOnTaskbarEdit) {
this.updateOffsetOnTaskbarEdit = false;
}
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();
this.showLoadingIndicator();
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.convertToWBSPredecessor = function (value, record) {
var _this = this;
return value.split(',').map(function (item) {
var match = item.trim().match(/^(.*?)(FS|SS|FF|SF|\+|\s|$)(.*)/i);
if (match) {
var newId = _this.getRecordByID(match[1]).ganttProperties.wbsCode; // New ID to replace
var remaining = (match[2] + match[3]).trim(); // Keep original remaining part
return newId + remaining; // Combine new ID + remaining
}
else {
return item.trim(); // If no match, return as is
}
}).join(',');
};
Gantt.prototype.updateWBSPredecessor = function (record) {
var wbsPredValue = ((record[this.taskFields.dependency] && record[this.taskFields.dependency] !== '') ? this.convertToWBSPredecessor(record[this.taskFields.dependency], record) : null);
record['WBSPredecessor'] = wbsPredValue;
record.ganttProperties.wbsPredecessor = wbsPredValue;
};
/* eslint-disable-next-line */
Gantt.prototype.updateWBSCodes = function (record, wbsMap, siblingCountMap, avoidWBSCode) {
var parent = this.getParentTask(record.parentItem);
// Determine index of this record among siblings of same parent
var currentIndex = (siblingCountMap.get(parent) || 0) + 1;
siblingCountMap.set(parent, currentIndex);
var wbsCode;
if (!parent) {
// Top-level task
wbsCode = "" + currentIndex;
}
else {
// Use parent WBS code + current index
var parentWBS = wbsMap.get(parent);
wbsCode = parentWBS + "." + currentIndex;
}
// Save WBS
wbsMap.set(record, wbsCode);
if (!avoidWBSCode) {
record['WBSCode'] = wbsCode.toString();
record.ganttProperties.wbsCode = wbsCode.toString();
}
return { wbsMap: wbsMap, siblingCountMap: siblingCountMap };
};
Gantt.prototype.getMaxRootWBSCode = function (parentDataCollection, parentItem) {
var maxCode = '';
for (var _i = 0, parentDataCollection_1 = parentDataCollection; _i < parentDataCollection_1.length; _i++) {
var item = parentDataCollection_1[_i];
var current = item.ganttProperties.wbsCode;
if (!current) {
continue;
}
var maxParts = maxCode.split('.').map(Number);
var currParts = current.split('.').map(Number);
var len = Math.max(maxParts.length, currParts.length);
var isGreater = false;
for (var i = 0; i < len; i++) {
var a = currParts[i] ? currParts[i] : 0;
var b = maxParts[i] ? maxParts[i] : 0;
if (a > b) {
isGreater = true;
break;
}
else if (a < b) {
break;
}
}
if (isGreater || !maxCode) {
maxCode = current;
}
}
// Increment the last segment
if (!maxCode) {
return parentItem.ganttProperties.wbsCode + '.' + '1';
}
else {
var parts = maxCode.split('.').map(Number);
parts[parts.length - 1]++;
return parts.join('.');
}
};
Gantt.prototype.generateWBSCodes = function (flatDataCollection) {
var wbsMap = new Map();
var recordsWithDependencies = [];
var siblingCountMap = new Map();
for (var _i = 0, flatDataCollection_1 = flatDataCollection; _i < flatDataCollection_1.length; _i++) {
var record = flatDataCollection_1[_i];
if (this.enableAutoWbsUpdate || this.isLoad) {
var result = this.updateWBSCodes(record, wbsMap, siblingCountMap);
wbsMap = result.wbsMap;
siblingCountMap = result.siblingCountMap;
}
else if (!record.ganttProperties.wbsCode) {
var wbsCode = void 0;
if (record.parentItem) {
var parentTask = this.getParentTask(record.parentItem);
wbsCode = parentTask.ganttProperties.wbsCode;
wbsCode = this.getMaxRootWBSCode(parentTask.childRecords, parentTask);
}
else {
wbsCode = this.getMaxRootWBSCode(this.treeGrid.parentData);
}
record['WBSCode'] = wbsCode;
record.ganttProperties.wbsCode = wbsCode;
}
if (record[this.taskFields.dependency]) {
recordsWithDependencies.push(record);
}
else {
record['WBSPredecessor'] = null;
record.ganttProperties.wbsPredecessor = null;
}
}
for (var _a = 0, recordsWithDependencies_1 = recordsWithDependencies; _a < recordsWithDependencies_1.length; _a++) {
var record = recordsWithDependencies_1[_a];
this.updateWBSPredecessor(record);
}
};
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.assignTimeToDate = function (dateValue, seconds) {
var date = new Date(dateValue);
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds % 3600) / 60);
var secs = seconds % 60;
date.setHours(hours, minutes, secs, 0);
return date;
};
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: '