@syncfusion/ej2-gantt 21.1.38 → 21.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/ej2-gantt.min.js +2 -2
  3. package/dist/ej2-gantt.umd.min.js +2 -2
  4. package/dist/ej2-gantt.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-gantt.es2015.js +67 -24
  6. package/dist/es6/ej2-gantt.es2015.js.map +1 -1
  7. package/dist/es6/ej2-gantt.es5.js +68 -24
  8. package/dist/es6/ej2-gantt.es5.js.map +1 -1
  9. package/dist/global/ej2-gantt.min.js +2 -2
  10. package/dist/global/ej2-gantt.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +20 -23
  13. package/src/gantt/actions/context-menu.js +1 -1
  14. package/src/gantt/actions/dependency.js +1 -1
  15. package/src/gantt/actions/dialog-edit.js +1 -0
  16. package/src/gantt/actions/edit.js +8 -2
  17. package/src/gantt/actions/taskbar-edit.d.ts +1 -1
  18. package/src/gantt/actions/taskbar-edit.js +2 -2
  19. package/src/gantt/base/date-processor.js +2 -2
  20. package/src/gantt/base/gantt.d.ts +1 -0
  21. package/src/gantt/base/gantt.js +3 -1
  22. package/src/gantt/base/task-processor.d.ts +1 -1
  23. package/src/gantt/base/task-processor.js +31 -6
  24. package/src/gantt/renderer/chart-rows.js +16 -8
  25. package/src/gantt/renderer/nonworking-day.js +3 -1
  26. package/styles/bootstrap-dark.css +4 -0
  27. package/styles/bootstrap.css +4 -0
  28. package/styles/bootstrap4.css +4 -0
  29. package/styles/bootstrap5-dark.css +4 -0
  30. package/styles/bootstrap5.css +4 -0
  31. package/styles/fabric-dark.css +4 -0
  32. package/styles/fabric.css +4 -0
  33. package/styles/fluent-dark.css +3 -3
  34. package/styles/fluent.css +3 -3
  35. package/styles/gantt/_layout.scss +0 -8
  36. package/styles/gantt/_theme.scss +4 -0
  37. package/styles/gantt/bootstrap-dark.css +4 -0
  38. package/styles/gantt/bootstrap.css +4 -0
  39. package/styles/gantt/bootstrap4.css +4 -0
  40. package/styles/gantt/bootstrap5-dark.css +4 -0
  41. package/styles/gantt/bootstrap5.css +4 -0
  42. package/styles/gantt/fabric-dark.css +4 -0
  43. package/styles/gantt/fabric.css +4 -0
  44. package/styles/gantt/fluent-dark.css +3 -3
  45. package/styles/gantt/fluent.css +3 -3
  46. package/styles/gantt/highcontrast-light.css +4 -0
  47. package/styles/gantt/highcontrast.css +4 -0
  48. package/styles/gantt/material-dark.css +4 -0
  49. package/styles/gantt/material.css +4 -0
  50. package/styles/gantt/tailwind-dark.css +4 -0
  51. package/styles/gantt/tailwind.css +4 -0
  52. package/styles/highcontrast-light.css +4 -0
  53. package/styles/highcontrast.css +4 -0
  54. package/styles/material-dark.css +4 -0
  55. package/styles/material.css +4 -0
  56. package/styles/tailwind-dark.css +4 -0
  57. package/styles/tailwind.css +4 -0
@@ -602,10 +602,10 @@ class DateProcessor {
602
602
  */
603
603
  getDurationAsSeconds(duration, durationUnit) {
604
604
  let value = 0;
605
- if (!durationUnit || durationUnit === 'day') {
605
+ if (!durationUnit || durationUnit.toLocaleLowerCase() === 'day') {
606
606
  value = this.parent.secondsPerDay * duration;
607
607
  }
608
- else if (durationUnit === 'hour') {
608
+ else if (durationUnit.toLocaleLowerCase() === 'hour') {
609
609
  value = duration * 3600;
610
610
  }
611
611
  else {
@@ -1753,6 +1753,7 @@ class TaskProcessor extends DateProcessor {
1753
1753
  */
1754
1754
  prepareDataSource(data) {
1755
1755
  this.prepareRecordCollection(data, 0);
1756
+ this.parent.initialLoadData = extend({}, {}, this.parent.flatData, true);
1756
1757
  // Method to maintain the shared task uniqueIds
1757
1758
  if (this.parent.viewType === 'ResourceView') {
1758
1759
  this.calculateSharedTaskUniqueIds();
@@ -2570,7 +2571,7 @@ class TaskProcessor extends DateProcessor {
2570
2571
  return 0;
2571
2572
  }
2572
2573
  else {
2573
- return this.getTaskWidth(sDate, eDate);
2574
+ return this.getTaskWidth(sDate, eDate, ganttProp);
2574
2575
  }
2575
2576
  }
2576
2577
  getTaskbarHeight() {
@@ -2684,13 +2685,29 @@ class TaskProcessor extends DateProcessor {
2684
2685
  * @returns {number} .
2685
2686
  * @private
2686
2687
  */
2687
- getTaskWidth(startDate, endDate) {
2688
+ getTaskWidth(startDate, endDate, ganttData) {
2688
2689
  const sDate = new Date(startDate.getTime());
2689
2690
  const eDate = new Date(endDate.getTime());
2690
2691
  const tierMode = this.parent.timelineModule.bottomTier !== 'None' ? this.parent.timelineModule.bottomTier :
2691
2692
  this.parent.timelineModule.topTier;
2693
+ let isValid = false;
2694
+ let modifiedsDate = new Date(startDate.getTime());
2695
+ let hour = 0;
2696
+ if (ganttData && ganttData.durationUnit == 'hour') {
2697
+ modifiedsDate = new Date(modifiedsDate.getTime() + ganttData.duration * 60 * 60 * 1000);
2698
+ }
2699
+ if (ganttData && ganttData.durationUnit == 'minute') {
2700
+ modifiedsDate = new Date(modifiedsDate.getTime() + ganttData.duration * 60 * 60 * 60 * 1000);
2701
+ }
2702
+ for (let i = 0; i < this.parent.dayWorkingTime.length; i++) {
2703
+ hour = hour + this.parent.dayWorkingTime[i].to - this.parent.dayWorkingTime[i].from;
2704
+ }
2705
+ let dateDiff = modifiedsDate.getTime() - sDate.getTime();
2692
2706
  if (tierMode === 'Day') {
2693
- if (this.getSecondsInDecimal(sDate) === this.parent.defaultStartTime) {
2707
+ if ((Math.floor((dateDiff / (1000 * 60 * 60)) % 24) >= hour || dateDiff === 0)) {
2708
+ isValid = true;
2709
+ }
2710
+ if (this.getSecondsInDecimal(sDate) === this.parent.defaultStartTime && isValid) {
2694
2711
  sDate.setHours(0, 0, 0, 0);
2695
2712
  }
2696
2713
  if (this.getSecondsInDecimal(eDate) === this.parent.defaultEndTime) {
@@ -2700,11 +2717,19 @@ class TaskProcessor extends DateProcessor {
2700
2717
  eDate.setHours(0, 0, 0, 0);
2701
2718
  }
2702
2719
  }
2720
+ else {
2721
+ isValid = true;
2722
+ }
2703
2723
  if ((sDate).getTime() === (eDate).getTime()) {
2704
2724
  return (this.parent.perDayWidth);
2705
2725
  }
2706
2726
  else {
2707
- return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * 24)) * this.parent.perDayWidth);
2727
+ if (isValid) {
2728
+ return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * 24)) * this.parent.perDayWidth);
2729
+ }
2730
+ else {
2731
+ return ((this.getTimeDifference(sDate, eDate) / (1000 * 60 * 60 * hour)) * this.parent.perDayWidth);
2732
+ }
2708
2733
  }
2709
2734
  }
2710
2735
  /**
@@ -3846,13 +3871,13 @@ class TaskProcessor extends DateProcessor {
3846
3871
  minStartDate.getTime() === maxEndDate.getTime() ? true : false;
3847
3872
  if (this.compareDates(previousStartDate, minStartDate) !== 0) {
3848
3873
  this.parent.setRecordValue(ganttProp.isAutoSchedule ? 'startDate' : 'autoStartDate', minStartDate, parentData.ganttProperties, true);
3849
- if ((((!isNullOrUndefined(ganttProp.autoDuration)) ? ganttProp.autoDuration === 0 : ganttProp.duration === 0)) && parentData['isManual'] && milestone) {
3874
+ if ((((!isNullOrUndefined(ganttProp.autoDuration)) ? ganttProp.autoDuration === 0 : ganttProp.duration === 0)) && parentData['isManual'] && milestone && (parentData.hasChildRecords && parentData.ganttProperties.isAutoSchedule && this.parent.editModule.taskbarEditModule.taskbarEditedArgs.action !== "TaskbarEditing")) {
3850
3875
  this.parent.setRecordValue('startDate', minStartDate, parentData.ganttProperties, true);
3851
3876
  }
3852
3877
  }
3853
3878
  if (this.compareDates(previousEndDate, maxEndDate) !== 0) {
3854
3879
  this.parent.setRecordValue(ganttProp.isAutoSchedule ? 'endDate' : 'autoEndDate', maxEndDate, parentData.ganttProperties, true);
3855
- if ((((!isNullOrUndefined(ganttProp.autoDuration)) ? ganttProp.autoDuration === 0 : ganttProp.duration === 0)) && parentData['isManual'] && milestone) {
3880
+ if ((((!isNullOrUndefined(ganttProp.autoDuration)) ? ganttProp.autoDuration === 0 : ganttProp.duration === 0)) && parentData['isManual'] && milestone && (parentData.hasChildRecords && parentData.ganttProperties.isAutoSchedule && this.parent.editModule.taskbarEditModule.taskbarEditedArgs.action !== "TaskbarEditing")) {
3856
3881
  this.parent.setRecordValue('endDate', maxEndDate, parentData.ganttProperties, true);
3857
3882
  }
3858
3883
  }
@@ -9345,7 +9370,7 @@ class ChartRows extends DateProcessor {
9345
9370
  '<div class="' + manualParentMilestoneBottom + '" style="top:' +
9346
9371
  (this.milesStoneRadius) + 'px;border-right-width:' + this.milesStoneRadius + 'px; border-left-width:' +
9347
9372
  this.milesStoneRadius + 'px; border-top-width:' + this.milesStoneRadius + 'px;"></div></div>';
9348
- return this.createDivElement(data.ganttProperties.width === 0 ? milestoneTemplate : !data.ganttProperties.isMilestone ? template : null);
9373
+ return this.createDivElement(data.ganttProperties.duration !== 0 ? template : milestoneTemplate);
9349
9374
  }
9350
9375
  /**
9351
9376
  * To get parent taskbar node.
@@ -9541,7 +9566,7 @@ class ChartRows extends DateProcessor {
9541
9566
  const template = '<div class="' + taskBarMainContainer + ' ' +
9542
9567
  this.parent.getUnscheduledTaskClass(data.ganttProperties) + ' ' +
9543
9568
  ((data.ganttProperties.cssClass) ? data.ganttProperties.cssClass : '') + '" ' +
9544
- ' tabindex="-1" role="term" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
9569
+ ' tabindex="-1" role="term" style="' + ((data.ganttProperties.isMilestone && !manualParent && !(data.hasChildRecords && !data.ganttProperties.isAutoSchedule)) ?
9545
9570
  ('width:' + this.milestoneHeight + 'px;height:' +
9546
9571
  this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;' + (this.parent.enableRtl ? 'right:' : 'left:') + (data.ganttProperties.left -
9547
9572
  (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
@@ -9866,6 +9891,10 @@ class ChartRows extends DateProcessor {
9866
9891
  }
9867
9892
  }
9868
9893
  else {
9894
+ let dupChartBody;
9895
+ dupChartBody = createElement('tbody', {
9896
+ id: this.parent.element.id + 'GanttTaskTableBody'
9897
+ });
9869
9898
  for (let i = 0; i < this.parent.currentViewData.length; i++) {
9870
9899
  const tempTemplateData = this.parent.currentViewData[i];
9871
9900
  if (this.parent.viewType === 'ResourceView') {
@@ -9878,9 +9907,9 @@ class ChartRows extends DateProcessor {
9878
9907
  }
9879
9908
  }
9880
9909
  const tRow = this.getGanttChartRow(i, tempTemplateData);
9881
- this.ganttChartTableBody.appendChild(tRow);
9910
+ dupChartBody.appendChild(tRow);
9882
9911
  if (this.parent.enableImmutableMode) {
9883
- this.refreshedTr.push(this.ganttChartTableBody.querySelectorAll('tr')[i]);
9912
+ this.refreshedTr.push(dupChartBody.querySelectorAll('tr')[i]);
9884
9913
  this.refreshedData.push(this.parent.currentViewData[i]);
9885
9914
  }
9886
9915
  // To maintain selection when virtualization is enabled
@@ -9888,6 +9917,7 @@ class ChartRows extends DateProcessor {
9888
9917
  this.parent.selectionModule.maintainSelectedRecords(parseInt(tRow.getAttribute('aria-rowindex'), 10));
9889
9918
  }
9890
9919
  }
9920
+ this.ganttChartTableBody.replaceChildren(...dupChartBody.childNodes);
9891
9921
  }
9892
9922
  this.parent.renderTemplates();
9893
9923
  this.triggerQueryTaskbarInfo();
@@ -9934,7 +9964,6 @@ class ChartRows extends DateProcessor {
9934
9964
  }
9935
9965
  if (this.templateData.hasChildRecords) {
9936
9966
  const parentTaskbarTemplateNode = this.getParentTaskbarNode(i, taskbarContainerNode);
9937
- const milestoneTemplateNode = this.getMilestoneNode(i, taskbarContainerNode);
9938
9967
  if (!this.templateData.ganttProperties.isAutoSchedule) {
9939
9968
  const manualTaskbar = this.getManualTaskbar();
9940
9969
  if (!isNullOrUndefined(manualTaskbar[0])) {
@@ -9946,11 +9975,14 @@ class ChartRows extends DateProcessor {
9946
9975
  taskbarContainerNode[0].appendChild([].slice.call(manualTaskbar)[0]);
9947
9976
  }
9948
9977
  }
9949
- if (parentTaskbarTemplateNode && parentTaskbarTemplateNode.length > 0) {
9978
+ if ((this.templateData.ganttProperties.autoDuration !== 0) && !this.templateData.ganttProperties.isMilestone && parentTaskbarTemplateNode && parentTaskbarTemplateNode.length > 0) {
9950
9979
  taskbarContainerNode[0].appendChild([].slice.call(parentTaskbarTemplateNode)[0]);
9951
9980
  }
9952
- else if (milestoneTemplateNode && milestoneTemplateNode.length > 0) {
9953
- taskbarContainerNode[0].appendChild([].slice.call(milestoneTemplateNode)[0]);
9981
+ else if ((this.templateData.ganttProperties.duration === 0 && this.templateData.ganttProperties.isMilestone && this.templateData.ganttProperties.isAutoSchedule)) {
9982
+ const milestoneTemplateNode = this.getMilestoneNode(i, taskbarContainerNode);
9983
+ if (milestoneTemplateNode && milestoneTemplateNode.length > 0) {
9984
+ taskbarContainerNode[0].appendChild([].slice.call(milestoneTemplateNode)[0]);
9985
+ }
9954
9986
  }
9955
9987
  if (this.parent.renderBaseline && this.templateData.ganttProperties.baselineStartDate &&
9956
9988
  this.templateData.ganttProperties.baselineEndDate) {
@@ -11098,7 +11130,7 @@ class Dependency {
11098
11130
  this.dateValidateModule.calculateEndDate(childGanttRecord);
11099
11131
  }
11100
11132
  this.parent.dataOperation.updateWidthLeft(childGanttRecord);
11101
- if (!this.parent.isLoad && childGanttRecord.parentItem && this.parent.isInPredecessorValidation &&
11133
+ if (!this.parent.isLoad && !this.parent.isFromOnPropertyChange && childGanttRecord.parentItem && this.parent.isInPredecessorValidation &&
11102
11134
  this.parent.getParentTask(childGanttRecord.parentItem).ganttProperties.isAutoSchedule) {
11103
11135
  if (this.parentIds.indexOf(childGanttRecord.parentItem.uniqueID) === -1) {
11104
11136
  this.parentIds.push(childGanttRecord.parentItem.uniqueID);
@@ -14140,6 +14172,9 @@ let Gantt = class Gantt extends Component {
14140
14172
  * @private
14141
14173
  */
14142
14174
  renderGantt(isChange) {
14175
+ if (isChange) {
14176
+ this.isFromOnPropertyChange = isChange;
14177
+ }
14143
14178
  // predecessor calculation
14144
14179
  if (this.predecessorModule && this.taskFields.dependency) {
14145
14180
  this.predecessorModule['parentIds'] = [];
@@ -14154,7 +14189,6 @@ let Gantt = class Gantt extends Component {
14154
14189
  this.timelineModule.validateTimelineProp();
14155
14190
  }
14156
14191
  if (isChange) {
14157
- this.isFromOnPropertyChange = isChange;
14158
14192
  if (this.enableValidation) {
14159
14193
  this.dataOperation.updateGanttData();
14160
14194
  }
@@ -19329,7 +19363,7 @@ class TaskbarEdit extends DateProcessor {
19329
19363
  : ganttRecord.left;
19330
19364
  const tierMode = this.parent.timelineModule.bottomTier !== 'None' ? this.parent.timelineModule.bottomTier :
19331
19365
  this.parent.timelineModule.topTier;
19332
- let remainingContribution = (1 / (this.parent.timelineModule.getIncrement(this.getDateByLeft(left), 1, 'Day') / (1000 * 60 * 60 * 24)));
19366
+ let remainingContribution = (1 / (this.parent.timelineModule.getIncrement(this.getDateByLeft(left, isNullOrUndefined(ganttRecord) ? ganttRecord.isMilestone : null, ganttRecord), 1, 'Day') / (1000 * 60 * 60 * 24)));
19333
19367
  let remainDays = this.parent.perDayWidth - (this.parent.perDayWidth / remainingContribution);
19334
19368
  const remainDaysInDecimal = remainDays / this.parent.perDayWidth;
19335
19369
  if (isRoundOff === undefined) {
@@ -19377,7 +19411,7 @@ class TaskbarEdit extends DateProcessor {
19377
19411
  const milliSecondsPerPixel = (24 * 60 * 60 * 1000) / this.parent.perDayWidth;
19378
19412
  pStartDate.setTime(pStartDate.getTime() + (left * milliSecondsPerPixel));
19379
19413
  /* To render the milestone in proper date while editing */
19380
- if (isMilestone) {
19414
+ if (isMilestone && !isNullOrUndefined(property.predecessor) && property.predecessor.length > 0) {
19381
19415
  pStartDate.setDate(pStartDate.getDate() - 1);
19382
19416
  this.parent.dateValidationModule.setTime(this.parent.defaultEndTime, pStartDate);
19383
19417
  pStartDate = this.parent.dateValidationModule.checkStartDate(pStartDate, property, true);
@@ -21916,6 +21950,7 @@ class DialogEdit {
21916
21950
  renderNotesTab(itemName) {
21917
21951
  const ganttObj = this.parent;
21918
21952
  const inputModel = this.beforeOpenArgs[itemName];
21953
+ inputModel.enableHtmlSanitizer = this.parent.enableHtmlSanitizer;
21919
21954
  const ganttProp = this.editedRecord.ganttProperties;
21920
21955
  const divElement = this.createDivElement('', ganttObj.element.id + '' + itemName + 'TabContainer');
21921
21956
  RichTextEditor.Inject(Toolbar$2, Link, HtmlEditor, QuickToolbar, Count);
@@ -24230,7 +24265,7 @@ class Edit$2 {
24230
24265
  this.parent.predecessorModule.isValidatedParentTaskID = '';
24231
24266
  }
24232
24267
  if (this.parent.allowParentDependency && ganttRecord.hasChildRecords && this.parent.previousRecords[ganttRecord.uniqueID].ganttProperties.startDate &&
24233
- (args.action === "DrawConnectorLine")) {
24268
+ (args.action === "DrawConnectorLine") || (args.action === "DialogEditing")) {
24234
24269
  this.updateChildItems(ganttRecord);
24235
24270
  }
24236
24271
  this.updateParentItemOnEditing();
@@ -24504,7 +24539,13 @@ class Edit$2 {
24504
24539
  }
24505
24540
  else if (isNullOrUndefined(previousData)) {
24506
24541
  calcEndDate = previousStartDate;
24507
- this.calculateDateByRoundOffDuration(childRecords[i], calcEndDate);
24542
+ const initialData = this.parent.initialLoadData[childRecords[i].index];
24543
+ if (this.parent.isLoad) {
24544
+ this.calculateDateByRoundOffDuration(initialData, calcEndDate);
24545
+ }
24546
+ else {
24547
+ this.calculateDateByRoundOffDuration(childRecords[i], calcEndDate);
24548
+ }
24508
24549
  if (this.parent.isOnEdit && this.validatedChildItems.indexOf(childRecords[i]) === -1) {
24509
24550
  this.validatedChildItems.push(childRecords[i]);
24510
24551
  }
@@ -28929,12 +28970,14 @@ class NonWorkingDay {
28929
28970
  }
28930
28971
  updateHolidayLabelHeight() {
28931
28972
  const height = this.parent.getContentHeight();
28973
+ let gantttable = document.getElementById("ganttContainer");
28932
28974
  // eslint-disable-next-line
28933
28975
  let toolbarHeight = 0;
28934
28976
  if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
28935
28977
  toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
28936
28978
  }
28937
- const viewportHeight = this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
28979
+ const viewportHeight = (this.parent.height === 'auto') ? gantttable.offsetHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight :
28980
+ this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
28938
28981
  const top = (viewportHeight < height) ? viewportHeight / 2 : height / 2;
28939
28982
  const labels = this.holidayContainer.querySelectorAll('.' + holidayLabel);
28940
28983
  for (let i = 0; i < labels.length; i++) {
@@ -30222,7 +30265,7 @@ class ContextMenu$2 {
30222
30265
  splitTaskDuration = Math.ceil(currentTaskDifference / this.parent.timelineSettings.timelineUnitSize);
30223
30266
  splitTaskDuration -= 1;
30224
30267
  }
30225
- const contextMenuClickDate = this.parent.dataOperation.getEndDate(startDate, splitTaskDuration, this.rowData.ganttProperties.durationUnit, this.rowData, false);
30268
+ const contextMenuClickDate = this.parent.dataOperation.getEndDate(startDate, splitTaskDuration, (this.parent.timelineSettings.bottomTier.unit !== "None") ? this.parent.timelineSettings.bottomTier.unit.toLocaleLowerCase() : this.parent.timelineSettings.topTier.unit.toLocaleLowerCase(), this.rowData, false);
30226
30269
  return contextMenuClickDate;
30227
30270
  }
30228
30271
  contextMenuBeforeOpen(args) {