@syncfusion/ej2-gantt 22.2.7 → 22.2.9

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 (58) hide show
  1. package/CHANGELOG.md +25 -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 +102 -51
  6. package/dist/es6/ej2-gantt.es2015.js.map +1 -1
  7. package/dist/es6/ej2-gantt.es5.js +102 -51
  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 +18 -18
  13. package/src/gantt/actions/context-menu.js +8 -2
  14. package/src/gantt/actions/dependency.js +1 -1
  15. package/src/gantt/actions/taskbar-edit.js +19 -1
  16. package/src/gantt/base/css-constants.d.ts +1 -0
  17. package/src/gantt/base/css-constants.js +1 -0
  18. package/src/gantt/base/gantt.js +10 -3
  19. package/src/gantt/base/task-processor.js +5 -4
  20. package/src/gantt/renderer/chart-rows.js +13 -1
  21. package/src/gantt/renderer/edit-tooltip.js +7 -7
  22. package/src/gantt/renderer/timeline.js +8 -1
  23. package/src/gantt/renderer/tooltip.js +28 -29
  24. package/styles/bootstrap-dark.css +1 -1
  25. package/styles/bootstrap.css +1 -1
  26. package/styles/bootstrap4.css +1 -1
  27. package/styles/bootstrap5-dark.css +1 -1
  28. package/styles/bootstrap5.css +1 -1
  29. package/styles/fabric-dark.css +1 -1
  30. package/styles/fabric.css +1 -1
  31. package/styles/fluent-dark.css +1 -1
  32. package/styles/fluent.css +1 -1
  33. package/styles/gantt/_layout.scss +1 -1
  34. package/styles/gantt/bootstrap-dark.css +1 -1
  35. package/styles/gantt/bootstrap.css +1 -1
  36. package/styles/gantt/bootstrap4.css +1 -1
  37. package/styles/gantt/bootstrap5-dark.css +1 -1
  38. package/styles/gantt/bootstrap5.css +1 -1
  39. package/styles/gantt/fabric-dark.css +1 -1
  40. package/styles/gantt/fabric.css +1 -1
  41. package/styles/gantt/fluent-dark.css +1 -1
  42. package/styles/gantt/fluent.css +1 -1
  43. package/styles/gantt/highcontrast-light.css +1 -1
  44. package/styles/gantt/highcontrast.css +1 -1
  45. package/styles/gantt/material-dark.css +1 -1
  46. package/styles/gantt/material.css +1 -1
  47. package/styles/gantt/material3-dark.css +1 -1
  48. package/styles/gantt/material3.css +1 -1
  49. package/styles/gantt/tailwind-dark.css +1 -1
  50. package/styles/gantt/tailwind.css +1 -1
  51. package/styles/highcontrast-light.css +1 -1
  52. package/styles/highcontrast.css +1 -1
  53. package/styles/material-dark.css +1 -1
  54. package/styles/material.css +1 -1
  55. package/styles/material3-dark.css +1 -1
  56. package/styles/material3.css +1 -1
  57. package/styles/tailwind-dark.css +1 -1
  58. package/styles/tailwind.css +1 -1
@@ -1677,7 +1677,7 @@ class TaskProcessor extends DateProcessor {
1677
1677
  }
1678
1678
  }
1679
1679
  if (!this.parent.taskFields.child) {
1680
- this.parent.taskFields.child = 'Children';
1680
+ this.parent.setProperties({ taskFields: { child: 'Children' } }, true);
1681
1681
  }
1682
1682
  this.constructDataSource(data);
1683
1683
  hierarchicalData = this.hierarchyData;
@@ -2111,6 +2111,7 @@ class TaskProcessor extends DateProcessor {
2111
2111
  segment.endDate = !taskSettings.duration && taskSettings.endDate
2112
2112
  && segment.endDate > data.ganttProperties.endDate ? data.ganttProperties.endDate : segment.endDate;
2113
2113
  segment.offsetDuration = 1;
2114
+ segment.duration = this.getDuration(segment.startDate, segment.endDate, data.ganttProperties.durationUnit, data.ganttProperties.isAutoSchedule, data.ganttProperties.isMilestone);
2114
2115
  }
2115
2116
  }
2116
2117
  else {
@@ -2718,17 +2719,17 @@ class TaskProcessor extends DateProcessor {
2718
2719
  let isValid = false;
2719
2720
  let modifiedsDate = new Date(startDate.getTime());
2720
2721
  let hour = 0;
2721
- if (ganttData && ganttData.durationUnit == 'hour') {
2722
+ if (!isNullOrUndefined(ganttData) && ganttData.durationUnit == 'hour') {
2722
2723
  modifiedsDate = new Date(modifiedsDate.getTime() + ganttData.duration * 60 * 60 * 1000);
2723
2724
  }
2724
- if (ganttData && ganttData.durationUnit == 'minute') {
2725
+ if (!isNullOrUndefined(ganttData) && (ganttData.durationUnit == 'minute') || !isNullOrUndefined(ganttData) && ganttData.durationUnit == "day" && ganttData.duration < 1) {
2725
2726
  modifiedsDate = new Date(modifiedsDate.getTime() + ganttData.duration * 60 * 1000);
2726
2727
  }
2727
2728
  for (let i = 0; i < this.parent.dayWorkingTime.length; i++) {
2728
2729
  hour = hour + this.parent.dayWorkingTime[i].to - this.parent.dayWorkingTime[i].from;
2729
2730
  }
2730
2731
  let dateDiff = modifiedsDate.getTime() - sDate.getTime();
2731
- if (ganttData && ganttData.durationUnit == 'minute' && ganttData.duration < (hour * 60)) {
2732
+ if (!isNullOrUndefined(ganttData) && (ganttData.durationUnit == 'minute' && ganttData.duration < (hour * 60)) || !isNullOrUndefined(ganttData) && ganttData.durationUnit == "day" && ganttData.duration < 1) {
2732
2733
  if (tierMode === 'Day') {
2733
2734
  if ((Math.floor((dateDiff / (1000 * 60 * 60)) % 24) >= hour || dateDiff === 0)) {
2734
2735
  isValid = true;
@@ -4033,6 +4034,7 @@ const chartRowCell = 'e-chart-row-cell';
4033
4034
  const chartRow = 'e-chart-row';
4034
4035
  const rowExpand = 'e-row-expand';
4035
4036
  const rowCollapse = 'e-row-collapse';
4037
+ const collapseParent = 'e-collapse-parent';
4036
4038
  const taskBarLeftResizer = 'e-taskbar-left-resizer';
4037
4039
  const taskBarRightResizer = 'e-taskbar-right-resizer';
4038
4040
  const childProgressResizer = 'e-child-progress-resizer';
@@ -6484,6 +6486,13 @@ class Timeline {
6484
6486
  tier = 'bottomTier';
6485
6487
  tr = null;
6486
6488
  }
6489
+ if (this.parent.height === "Auto" || this.parent.timelineModule.isSingleTier) {
6490
+ var timelineContainer = this.parent.element.getElementsByClassName('e-timeline-header-container')[0]['offsetHeight'];
6491
+ this.parent.element.getElementsByClassName('e-chart-scroll-container e-content')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
6492
+ if (!isNullOrUndefined(this.parent.element.getElementsByClassName('e-gridcontent')[0])) {
6493
+ this.parent.treeGrid.element.getElementsByClassName('e-gridcontent')[0]['style'].height = 'calc(100% - ' + timelineContainer + 'px)';
6494
+ }
6495
+ }
6487
6496
  }
6488
6497
  /**
6489
6498
  * To validate timeline tier count.
@@ -6980,7 +6989,7 @@ class Timeline {
6980
6989
  // PDf export collection
6981
6990
  timelineCell.value = value;
6982
6991
  timelineCell.isWeekend = isWeekendCell;
6983
- timelineCell.width = cellWidth;
6992
+ timelineCell.width = thWidth;
6984
6993
  return parentTr;
6985
6994
  }
6986
6995
  /**
@@ -10014,7 +10023,7 @@ class ChartRows extends DateProcessor {
10014
10023
  width = endLeft - left;
10015
10024
  }
10016
10025
  else {
10017
- left = ganttProp.left < ganttProp.autoLeft ? ganttProp.left : ganttProp.autoLeft;
10026
+ left = ganttProp.left < ganttProp.autoLeft ? ganttProp.autoLeft : ganttProp.left;
10018
10027
  width = ganttProp.autoWidth;
10019
10028
  }
10020
10029
  return left + width;
@@ -10523,6 +10532,18 @@ class ChartRows extends DateProcessor {
10523
10532
  }
10524
10533
  }
10525
10534
  else if (taskbarElement) {
10535
+ if (taskbarElement && this.parent.enableVirtualization && !args.data.expanded) {
10536
+ const childElement = trElement.querySelector('.' + collapseParent);
10537
+ if (childElement) {
10538
+ for (let i = 0; i < childElement.childNodes.length; i++) {
10539
+ const taskbar = childElement.childNodes[i];
10540
+ const mainTaskbar = taskbar.querySelector('.' + traceChildTaskBar);
10541
+ if (mainTaskbar) {
10542
+ mainTaskbar.style.backgroundColor = args.taskbarBgColor;
10543
+ }
10544
+ }
10545
+ }
10546
+ }
10526
10547
  if (taskbarElement.querySelector(classCollections[0]) &&
10527
10548
  getComputedStyle(taskbarElement.querySelector(classCollections[0])).backgroundColor !== args.taskbarBgColor) {
10528
10549
  taskbarElement.querySelector(classCollections[0]).style.backgroundColor = args.taskbarBgColor;
@@ -10794,10 +10815,10 @@ class ChartRows extends DateProcessor {
10794
10815
  this.templateData = record;
10795
10816
  const parentTrNode = this.getTableTrNode();
10796
10817
  const leftLabelNode = this.leftLabelContainer();
10797
- const collapseParent = createElement('div', {
10818
+ const collapseParent$$1 = createElement('div', {
10798
10819
  className: 'e-collapse-parent'
10799
10820
  });
10800
- parentTrNode[0].childNodes[0].childNodes[0].appendChild(collapseParent);
10821
+ parentTrNode[0].childNodes[0].childNodes[0].appendChild(collapseParent$$1);
10801
10822
  const tasks = this.parent.dataOperation.setSortedChildTasks(record);
10802
10823
  this.parent.dataOperation.updateOverlappingIndex(tasks);
10803
10824
  let tRow;
@@ -11262,7 +11283,7 @@ class Dependency {
11262
11283
  ganttRecord = predecessorsCollection[count];
11263
11284
  if ((!ganttRecord.hasChildRecords && !this.parent.allowParentDependency) || this.parent.allowParentDependency) {
11264
11285
  this.updatePredecessorHelper(ganttRecord, predecessorsCollection);
11265
- if (!ganttRecord.ganttProperties.isAutoSchedule) {
11286
+ if (!ganttRecord.ganttProperties.isAutoSchedule && this.parent.editSettings.allowEditing) {
11266
11287
  this.parent.connectorLineEditModule['calculateOffset'](ganttRecord);
11267
11288
  }
11268
11289
  }
@@ -13043,35 +13064,34 @@ class Tooltip$1 {
13043
13064
  */
13044
13065
  updateTooltipPosition(args) {
13045
13066
  args.element.style.visibility = 'visible';
13046
- if (isNullOrUndefined(this.tooltipMouseEvent) || args.target.classList.contains('e-notes-info')) {
13047
- return;
13048
- }
13049
- const postion = this.getPointorPosition(this.tooltipMouseEvent);
13050
- const containerPosition = this.parent.getOffsetRect(this.parent.chartPane);
13051
- const topEnd = containerPosition.top + this.parent.chartPane.offsetHeight;
13052
- const leftEnd = containerPosition.left + this.parent.chartPane.offsetWidth;
13053
- let tooltipPositionX = postion.x;
13054
- let tooltipPositionY = postion.y;
13055
- if (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
13056
- while (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
13057
- tooltipPositionX = leftEnd - args.element.offsetWidth - 10;
13058
- args.element.style.left = tooltipPositionX + 'px';
13059
- }
13060
- }
13061
- else {
13062
- tooltipPositionX = tooltipPositionX + 10;
13063
- args.element.style.left = tooltipPositionX + 'px';
13064
- }
13065
- if (window.innerHeight < args.element.offsetHeight + tooltipPositionY) {
13066
- tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
13067
- }
13068
- if ((topEnd < (tooltipPositionY + args.element.offsetHeight + 20))) {
13069
- tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
13070
- }
13071
- else {
13072
- tooltipPositionY = tooltipPositionY + 10;
13073
- }
13074
- args.element.style.top = tooltipPositionY + 'px';
13067
+ // if (isNullOrUndefined(this.tooltipMouseEvent) || args.target.classList.contains('e-notes-info')) {
13068
+ // return;
13069
+ // }
13070
+ // const postion: { x: number, y: number } = this.getPointorPosition(this.tooltipMouseEvent);
13071
+ // const containerPosition: { top: number, left: number, width?: number, height?: number } =
13072
+ // this.parent.getOffsetRect(this.parent.chartPane);
13073
+ // const topEnd: number = containerPosition.top + this.parent.chartPane.offsetHeight;
13074
+ // const leftEnd: number = containerPosition.left + this.parent.chartPane.offsetWidth;
13075
+ // let tooltipPositionX: number = postion.x;
13076
+ // let tooltipPositionY: number = postion.y;
13077
+ // if (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
13078
+ // while (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
13079
+ // tooltipPositionX = leftEnd - args.element.offsetWidth - 10;
13080
+ // args.element.style.left = tooltipPositionX + 'px';
13081
+ // }
13082
+ // } else {
13083
+ // tooltipPositionX = tooltipPositionX + 10;
13084
+ // args.element.style.left = tooltipPositionX + 'px';
13085
+ // }
13086
+ // if (window.innerHeight < args.element.offsetHeight + tooltipPositionY) {
13087
+ // tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
13088
+ // }
13089
+ // if ((topEnd < (tooltipPositionY + args.element.offsetHeight + 20))) {
13090
+ // tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
13091
+ // } else {
13092
+ // tooltipPositionY = tooltipPositionY + 10;
13093
+ // }
13094
+ // args.element.style.top = tooltipPositionY + 'px';
13075
13095
  }
13076
13096
  /**
13077
13097
  * Method to get mouse pointor position
@@ -13881,14 +13901,14 @@ let Gantt = class Gantt extends Component {
13881
13901
  };
13882
13902
  this.focusModule = new FocusModule(this);
13883
13903
  if (this.zoomingLevels.length === 0) {
13884
- this.zoomingLevels = this.getZoomingLevels();
13904
+ this.setProperties({ zoomingLevels: this.getZoomingLevels() }, true);
13885
13905
  }
13886
13906
  this.resourceFieldsMapping();
13887
13907
  if (isNullOrUndefined(this.resourceFields.unit)) { //set resourceUnit as unit if not mapping
13888
- this.resourceFields.unit = 'unit';
13908
+ this.setProperties({ resourceFields: { unit: 'unit' } }, true);
13889
13909
  }
13890
13910
  if (!isNullOrUndefined(this.taskFields.work)) {
13891
- this.taskType = 'FixedWork';
13911
+ this.setProperties({ taskType: 'FixedWork' }, true);
13892
13912
  }
13893
13913
  this.taskIds = [];
13894
13914
  }
@@ -14491,6 +14511,13 @@ let Gantt = class Gantt extends Component {
14491
14511
  if (this.enableCriticalPath && criticalModule && criticalModule.criticalPathCollection) {
14492
14512
  this.criticalPathModule.criticalConnectorLine(criticalModule.criticalPathCollection, criticalModule.detailPredecessorCollection, true, criticalModule.predecessorCollectionTaskIds);
14493
14513
  }
14514
+ this.calculateDimensions();
14515
+ const pane1 = this.splitterModule.splitterObject.element.querySelectorAll('.e-pane')[0];
14516
+ const pane2 = this.splitterModule.splitterObject.element.querySelectorAll('.e-pane')[1];
14517
+ this.splitterModule.splitterPreviousPositionGrid = pane1.scrollWidth + 1 + 'px';
14518
+ this.splitterModule.splitterPreviousPositionChart = pane2.scrollWidth + 1 + 'px';
14519
+ this.splitterModule.splitterObject.paneSettings[0].size = this.splitterModule['getSpliterPositionInPercentage'](this.splitterModule.splitterPreviousPositionGrid);
14520
+ this.splitterModule.splitterObject.paneSettings[1].size = this.splitterModule.splitterPreviousPositionChart;
14494
14521
  }
14495
14522
  }
14496
14523
  keyActionHandler(e) {
@@ -18074,13 +18101,13 @@ class EditTooltip {
18074
18101
  * @returns {void} .
18075
18102
  */
18076
18103
  updateTooltipPosition(args) {
18077
- const containerPosition = this.parent.getOffsetRect(this.parent.chartPane);
18078
- const leftEnd = containerPosition.left + this.parent.chartPane.offsetWidth;
18079
- let tooltipPositionX = args.element.offsetLeft;
18080
- if (leftEnd < (tooltipPositionX + args.element.offsetWidth)) {
18081
- tooltipPositionX += leftEnd - (tooltipPositionX + args.element.offsetWidth);
18082
- }
18083
- args.element.style.left = tooltipPositionX + 'px';
18104
+ // const containerPosition: { top: number, left: number } = this.parent.getOffsetRect(this.parent.chartPane);
18105
+ // const leftEnd: number = containerPosition.left + this.parent.chartPane.offsetWidth;
18106
+ // let tooltipPositionX: number = args.element.offsetLeft;
18107
+ // if (leftEnd < (tooltipPositionX + args.element.offsetWidth)) {
18108
+ // tooltipPositionX += leftEnd - (tooltipPositionX + args.element.offsetWidth);
18109
+ // }
18110
+ // args.element.style.left = tooltipPositionX + 'px';
18084
18111
  args.element.style.visibility = 'visible';
18085
18112
  }
18086
18113
  /**
@@ -18706,6 +18733,12 @@ class TaskbarEdit extends DateProcessor {
18706
18733
  */
18707
18734
  updateMouseDownProperties(event) {
18708
18735
  const e = this.getCoordinate(event);
18736
+ const parentWithZoomStyle = this.parent.element.closest('[style*="zoom"]');
18737
+ if (parentWithZoomStyle) {
18738
+ const zoom1 = parseFloat(getComputedStyle(parentWithZoomStyle).zoom);
18739
+ e.pageX = e.pageX / zoom1;
18740
+ e.pageY = e.pageY / zoom1;
18741
+ }
18709
18742
  if (e.pageX || e.pageY) {
18710
18743
  const containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
18711
18744
  if (this.parent.enableRtl) {
@@ -18915,6 +18948,12 @@ class TaskbarEdit extends DateProcessor {
18915
18948
  updateMouseMoveProperties(event) {
18916
18949
  const containerPosition = this.parent.getOffsetRect(this.parent.ganttChartModule.chartBodyContainer);
18917
18950
  const e = this.getCoordinate(event);
18951
+ const parentWithZoomStyle = this.parent.element.closest('[style*="zoom"]');
18952
+ if (parentWithZoomStyle) {
18953
+ const zoom1 = parseFloat(getComputedStyle(parentWithZoomStyle).zoom);
18954
+ e.pageX = e.pageX / zoom1;
18955
+ e.pageY = e.pageY / zoom1;
18956
+ }
18918
18957
  if (e.pageX || e.pageY) {
18919
18958
  if (this.parent.enableRtl) {
18920
18959
  this.mouseMoveX = Math.abs(e.pageX - (containerPosition.left +
@@ -20305,6 +20344,12 @@ class TaskbarEdit extends DateProcessor {
20305
20344
  }
20306
20345
  // eslint-disable-next-line
20307
20346
  triggerDependencyEvent(e, mouseUp) {
20347
+ const parentWithZoomStyle = this.parent.element.closest('[style*="zoom"]');
20348
+ let zoomedPageY;
20349
+ if (parentWithZoomStyle) {
20350
+ const zoom1 = parseFloat(getComputedStyle(parentWithZoomStyle).zoom);
20351
+ zoomedPageY = e.pageY / zoom1;
20352
+ }
20308
20353
  const fromItem = this.taskBarEditRecord.ganttProperties;
20309
20354
  const toItem = this.connectorSecondRecord ? this.connectorSecondRecord.ganttProperties : null;
20310
20355
  let predecessor;
@@ -20366,7 +20411,7 @@ class TaskbarEdit extends DateProcessor {
20366
20411
  table[1].innerText = toItem.taskName;
20367
20412
  table[2].innerText = this.parent.localeObj.getConstant(currentTarget);
20368
20413
  const tooltipElement = this.parent.connectorLineModule.tooltipTable.parentElement.parentElement;
20369
- if (tooltipElement.offsetTop + tooltipElement.offsetHeight > e.pageY) {
20414
+ if (tooltipElement.offsetTop + tooltipElement.offsetHeight > zoomedPageY) {
20370
20415
  tooltipElement.style.top = (e.pageY - tooltipElement.offsetHeight - 20) + 'px';
20371
20416
  }
20372
20417
  }
@@ -30494,7 +30539,13 @@ class ContextMenu$2 {
30494
30539
  }
30495
30540
  break;
30496
30541
  case 'DeleteTask':
30497
- this.parent.editModule.deleteRecord(this.rowData);
30542
+ if ((this.parent.selectionSettings.mode !== 'Cell' && this.parent.selectionModule.selectedRowIndexes.length > 1)
30543
+ || (this.parent.selectionSettings.mode === 'Cell' && this.parent.selectionModule.getSelectedRowCellIndexes().length)) {
30544
+ this.parent.editModule.startDeleteAction();
30545
+ }
30546
+ else {
30547
+ this.parent.editModule.deleteRecord(this.rowData);
30548
+ }
30498
30549
  break;
30499
30550
  case 'ToTask':
30500
30551
  if (!isNullOrUndefined(this.rowData)) {
@@ -30645,7 +30696,7 @@ class ContextMenu$2 {
30645
30696
  this.parent.ganttChartModule.targetElement;
30646
30697
  // Closed edited cell before opening context menu
30647
30698
  // eslint-disable-next-line
30648
- if (!isNullOrUndefined(this.parent.editModule) && this.parent.editModule.cellEditModule && this.parent.editModule.cellEditModule.isCellEdit && target.parentElement.classList.contains('e-row')) {
30699
+ if ((!isNullOrUndefined(this.parent.editModule) && this.parent.editModule.cellEditModule && this.parent.editModule.cellEditModule.isCellEdit && target.parentElement.classList.contains('e-row')) || target.parentElement.classList.contains('e-treecolumn-container')) {
30649
30700
  this.parent.treeGrid.closeEdit();
30650
30701
  }
30651
30702
  if (!isNullOrUndefined(args.element) && args.element.id === this.parent.element.id + '_contextmenu') {