@syncfusion/ej2-gantt 22.2.11 → 23.1.36

package/src/gantt/renderer/timeline.js

@@ -74,7 +74,9 @@ var Timeline = /** @class */ (function () {
      */
     Timeline.prototype.refreshTimelineByTimeSpan = function () {
         this.validateTimelineProp();
-        this.parent.ganttChartModule.chartTimelineContainer.innerHTML = '';
+        if (!this.parent.pdfExportModule || (this.parent.pdfExportModule && !this.parent.pdfExportModule.isPdfExport) || (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps && !this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+            this.parent.ganttChartModule.chartTimelineContainer.innerHTML = '';
+        }
         this.createTimelineSeries();
     };
     /**
@@ -391,7 +393,10 @@ var Timeline = /** @class */ (function () {
         this.customTimelineSettings.topTier.format = this.validateFormat(this.topTier, this.customTimelineSettings.topTier.format);
         this.customTimelineSettings.weekStartDay = this.customTimelineSettings.weekStartDay >= 0 &&
             this.customTimelineSettings.weekStartDay <= 6 ? this.customTimelineSettings.weekStartDay : 0;
-        this.checkCurrentZoomingLevel();
+        if (!(this.parent.pdfExportModule && this.parent.pdfExportModule.helper.exportProps &&
+            this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+            this.checkCurrentZoomingLevel();
+        }
     };
     /**
      * To find the current zooming level of the Gantt control.
@@ -638,13 +643,15 @@ var Timeline = /** @class */ (function () {
             table = createElement('table', { className: cls.timelineHeaderTableContainer, styles: 'display: block;' });
             thead = createElement('thead', { className: cls.timelineHeaderTableBody, styles: 'display:block; border-collapse:collapse' });
             tr = createElement('tr', { innerHTML: this.createTimelineTemplate(tier) });
-            td = createElement('th');
-            div = createElement('div', { styles: 'width: 20px' });
-            td.appendChild(div);
-            tr.appendChild(td);
-            thead.appendChild(tr);
-            table.appendChild(thead);
-            this.parent.ganttChartModule.chartTimelineContainer.appendChild(table);
+            if (!this.parent.pdfExportModule || (this.parent.pdfExportModule && !this.parent.pdfExportModule.isPdfExport) || (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport && this.parent.pdfExportModule.helper.exportProps && !this.parent.pdfExportModule.helper.exportProps.fitToWidthSettings.isFitToWidth)) {
+                td = createElement('th');
+                div = createElement('div', { styles: 'width: 20px' });
+                td.appendChild(div);
+                tr.appendChild(td);
+                thead.appendChild(tr);
+                table.appendChild(thead);
+                this.parent.ganttChartModule.chartTimelineContainer.appendChild(table);
+            }
             tier = 'bottomTier';
             tr = null;
         }
@@ -1478,13 +1485,16 @@ var Timeline = /** @class */ (function () {
             this.parent.updateProjectDates(args.projectStartDate, args.ProjectEndDate, args.isTimelineRoundOff, isFrom);
             if (type === 'prevTimeSpan' && isFrom === 'publicMethod') {
                 this.parent.ganttChartModule.updateScrollLeft(0);
+                this.parent.timelineModule.isZoomToFit = false;
             }
             else if (type === 'nextTimeSpan' && isFrom === 'publicMethod') {
                 this.parent.ganttChartModule.updateScrollLeft(this.parent.timelineModule.totalTimelineWidth);
+                this.parent.timelineModule.isZoomToFit = false;
             }
             else if (type === 'nextTimeSpan' && isFrom === 'TaskbarEditing') {
                 var currentScrollLeft = document.getElementsByClassName('e-chart-scroll-container e-content')[0].scrollLeft;
                 this.parent.element.querySelector('.e-timeline-header-container').scrollLeft = currentScrollLeft;
+                this.parent.timelineModule.isZoomToFit = false;
             }
             this.parent.timelineModule.timeSpanActionEvent('actionComplete', type, isFrom);
         }

package/src/gantt/renderer/tooltip.js

@@ -88,8 +88,8 @@ var Tooltip = /** @class */ (function () {
                     if (taskbarTemplateNode) {
                         append(taskbarTemplateNode, tooltipTemplate);
                     }
-                    argsData.content = this.toolTipObj.content = taskbarTemplateNode ? tooltipTemplate :
-                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'taskbar'), data, parent, args);
+                    argsData.content = this.toolTipObj.content = taskbarTemplateNode ? tooltipTemplate : data ?
+                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'taskbar'), data, parent, args) : "";
                 }
                 else if (args.target.classList.contains('e-baseline-bar') ||
                     args.target.classList.contains('e-baseline-gantt-milestone')) {
@@ -101,8 +101,8 @@ var Tooltip = /** @class */ (function () {
                     if (baseLineTemplateNode) {
                         append(baseLineTemplateNode, baselineTemplate);
                     }
-                    argsData.content = this.toolTipObj.content = baseLineTemplateNode ? baselineTemplate :
-                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'baseline'), data, parent, args);
+                    argsData.content = this.toolTipObj.content = baseLineTemplateNode ? baselineTemplate : data ?
+                        parent.tooltipModule.getTooltipContent((data.ganttProperties.isMilestone ? 'milestone' : 'baseline'), data, parent, args) : "";
                 }
                 else if (args.target.classList.contains('e-event-markers')) {
                     argsData.content = this.toolTipObj.content = parent.tooltipModule.getTooltipContent('marker', data, parent, args);
@@ -169,7 +169,7 @@ var Tooltip = /** @class */ (function () {
     // eslint-disable-next-line
     Tooltip.prototype.tooltipCloseHandler = function (args) {
         this.tooltipMouseEvent = null;
-        if (!this.parent.isAdaptive) {
+        if (!this.parent.isAdaptive && !isNullOrUndefined(this.currentTarget)) {
             EventHandler.remove(this.currentTarget, 'mousemove', this.mouseMoveHandler);
         }
         this.currentTarget = null;
@@ -185,34 +185,38 @@ var Tooltip = /** @class */ (function () {
      */
     Tooltip.prototype.updateTooltipPosition = function (args) {
         args.element.style.visibility = 'visible';
-        // if (isNullOrUndefined(this.tooltipMouseEvent) || args.target.classList.contains('e-notes-info')) {
-        //     return;
-        // }
-        // const postion: { x: number, y: number } = this.getPointorPosition(this.tooltipMouseEvent);
-        // const containerPosition: { top: number, left: number, width?: number, height?: number } =
-        //  this.parent.getOffsetRect(this.parent.chartPane);
-        // const topEnd: number = containerPosition.top + this.parent.chartPane.offsetHeight;
-        // const leftEnd: number = containerPosition.left + this.parent.chartPane.offsetWidth;
-        // let tooltipPositionX: number = postion.x;
-        // let tooltipPositionY: number = postion.y;
-        // if (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
-        //     while (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
-        //         tooltipPositionX = leftEnd - args.element.offsetWidth - 10;
-        //         args.element.style.left = tooltipPositionX + 'px';
-        //     }
-        // } else {
-        //     tooltipPositionX = tooltipPositionX + 10;
-        //     args.element.style.left = tooltipPositionX + 'px';
-        // }
-        // if (window.innerHeight < args.element.offsetHeight + tooltipPositionY) {
-        //     tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
-        // }
-        // if ((topEnd < (tooltipPositionY + args.element.offsetHeight + 20))) {
-        //     tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
-        // } else {
-        //     tooltipPositionY = tooltipPositionY + 10;
-        // }
-        // args.element.style.top = tooltipPositionY + 'px';
+        var parentWithZoomStyle = this.parent.element.closest('[style*="zoom"]');
+        if (isNullOrUndefined(parentWithZoomStyle)) {
+            if (isNullOrUndefined(this.tooltipMouseEvent) || args.target.classList.contains('e-notes-info')) {
+                return;
+            }
+            var postion = this.getPointorPosition(this.tooltipMouseEvent);
+            var containerPosition = this.parent.getOffsetRect(this.parent.chartPane);
+            var topEnd = containerPosition.top + this.parent.chartPane.offsetHeight;
+            var leftEnd = containerPosition.left + this.parent.chartPane.offsetWidth;
+            var tooltipPositionX = postion.x;
+            var tooltipPositionY = postion.y;
+            if (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
+                while (leftEnd < (tooltipPositionX + args.element.offsetWidth + 10)) {
+                    tooltipPositionX = leftEnd - args.element.offsetWidth - 10;
+                    args.element.style.left = tooltipPositionX + 'px';
+                }
+            }
+            else {
+                tooltipPositionX = tooltipPositionX + 10;
+                args.element.style.left = tooltipPositionX + 'px';
+            }
+            if (window.innerHeight < args.element.offsetHeight + tooltipPositionY) {
+                tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
+            }
+            if ((topEnd < (tooltipPositionY + args.element.offsetHeight + 20))) {
+                tooltipPositionY = tooltipPositionY - args.element.offsetHeight - 10;
+            }
+            else {
+                tooltipPositionY = tooltipPositionY + 10;
+            }
+            args.element.style.top = tooltipPositionY + 'px';
+        }
     };
     /**
      * Method to get mouse pointor position

package/styles/bootstrap-dark.css

@@ -247,6 +247,10 @@
   content: "\e903";
 }
 
+.e-icon-rowselect::before {
+  content: "\e930";
+}
+
 .e-gantt-tooltip-arrow-left::before {
   content: "\e85b";
 }
@@ -299,6 +303,7 @@
 .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-right-hover {
   background-color: #21527d;
   border-color: #1a1a1a;
+  position: relative;
 }
 .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-left-hover:hover,
 .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-right-hover:hover {
@@ -306,6 +311,17 @@
   border-color: #1a1a1a;
   outline: 2px solid #75ACDB;
 }
+.e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-left-hover::after,
+.e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-right-hover::after {
+  content: "";
+  position: absolute;
+  width: 30px;
+  height: 40px;
+  top: -10px;
+}
+.e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-allow-block {
+  cursor: no-drop;
+}
 .e-bigger .e-gantt .e-tab .e-content {
   height: 242px !important;
 }
@@ -349,7 +365,6 @@
 }
 .e-bigger .e-gantt-dialog .e-dialog {
   border-radius: 6px;
-  width: 556px !important;
 }
 .e-bigger .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
   padding: 0 16px !important; /* stylelint-disable-line declaration-no-important */
@@ -491,10 +506,6 @@
   border-right: none !important; /* stylelint-disable-line declaration-no-important */
   border-left-color: #0070f0;
 }
-.e-gantt.e-gantt-rtl .e-toolbar-right {
-  left: auto !important; /* stylelint-disable-line declaration-no-important */
-  right: 0 !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-gantt.e-gantt-rtl .e-gantt-chart .e-timeline-header-container {
   border-right: none !important; /* stylelint-disable-line declaration-no-important */
   border-left: 1px solid !important; /* stylelint-disable-line declaration-no-important */
@@ -814,6 +825,12 @@
   vertical-align: middle;
   z-index: 3;
 }
+.e-gantt .e-gantt-chart .e-taskbar-main-container:hover {
+  z-index: 4;
+}
+.e-gantt .e-gantt-chart .e-taskbar-main-container.e-gantt-multi-taskbar:hover {
+  z-index: 4;
+}
 .e-gantt .e-gantt-chart .e-left-label-container.e-left-label-temp-container {
   -ms-flex-align: center;
       align-items: center;
@@ -953,72 +970,61 @@
   height: 16px;
   width: 16px;
   left: 14px;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-innerHTML1 {
   height: 16px;
   width: 16px;
   left: 30px;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-innerHTML2 {
   height: 16px;
   width: 16px;
   left: 60px;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-timelineHeader {
   height: 16px;
   width: 82px;
   left: 20px;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-maskcell01 {
   height: 12px;
   width: 88px;
   left: 14px;
   border-radius: 0;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-maskcell02 {
   height: 18px;
   width: 410px;
   border-radius: 0;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-maskcell03 {
   height: 12px;
   width: 88px;
   left: 14px;
   border-radius: 0;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-maskcell04 {
   height: 18px;
   width: 208px;
   border-radius: 0;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-maskcell05 {
   height: 12px;
   width: 108px;
   left: 64px;
   border-radius: 0;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-maskcell06 {
   height: 18px;
   width: 195px;
   left: 192px;
   border-radius: 0;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-maskcell07 {
   height: 18px;
   width: 156px;
   left: 388px;
   border-radius: 0;
-  background: #e1dfdd;
 }
 .e-gantt .e-gantt-chart .e-taskbar-left-resizer,
 .e-gantt .e-gantt-chart .e-taskbar-right-resizer {
@@ -1153,7 +1159,7 @@
   border-left: 1px dashed;
   position: absolute;
   width: 1px;
-  z-index: 2;
+  z-index: 4;
 }
 .e-gantt .e-gantt-chart .e-event-markers .e-span-label {
   border-radius: 3px;
@@ -1371,10 +1377,6 @@
   box-shadow: none;
 }
 
-.e-icon-rowselect::before {
-  content: "\e930";
-}
-
 .e-ganttpopup {
   -moz-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
   -ms-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
@@ -1433,6 +1435,15 @@
   font-size: 14px;
 }
 
+.e-bigger .e-gantt .e-gantt-chart .e-timeline-single-header-outer-div {
+  height: 64px !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-timeline-single-header-cell {
+  height: 64px !important; /* stylelint-disable-line declaration-no-important */
+  line-height: 64px !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-gantt-tooltip-label {
   padding-bottom: 2px;
   padding-right: 2px;
@@ -1477,16 +1488,6 @@
 .e-gantt.e-device .e-gridheader .e-icons {
   font-size: 12px;
 }
-.e-gantt.e-device .e-right-resize-gripper,
-.e-gantt.e-device .e-left-resize-gripper {
-  border: 7px solid;
-  z-index: -1;
-}
-.e-gantt.e-device .e-right-resize-gripper::before,
-.e-gantt.e-device .e-left-resize-gripper::before {
-  font-size: 14px;
-  margin-left: -7px;
-}
 .e-gantt.e-device .e-dependent-div .e-content {
   height: 100%;
 }
@@ -1549,6 +1550,12 @@
   color: #000;
 }
 
+.e-gantt-chart-resize-indicator {
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+}
+
 /*! Gantt theme */
 .e-gantt .e-gantt-splitter {
   border-color: #484848;
@@ -1905,75 +1912,6 @@
 .e-gantt .e-gantt-chart .e-grid .e-gridpopup .e-spanclicked {
   border-color: #000;
 }
-.e-gantt .e-gantt-chart .e-active-parent-task {
-  border-radius: 4px;
-  box-shadow: 4px 4px 3px 0 rgba(0, 0, 0, 0.5);
-}
-.e-gantt .e-gantt-chart .e-active-parent-task .e-gantt-parent-taskbar-inner-div {
-  background: #1a1a1a;
-  border: #1a1a1a;
-}
-.e-gantt .e-gantt-chart .e-active-parent-task .e-gantt-parent-progressbar-inner-div {
-  background-color: transparent;
-  border: transparent;
-}
-.e-gantt .e-gantt-chart .e-active-parent-task .e-task-label {
-  color: transparent;
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-task-label {
-  color: transparent !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-line {
-  border-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-connector-line-right-arrow {
-  border-left-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-connector-line-left-arrow {
-  border-right-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-child-taskbar-inner-div {
-  background: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
-  border: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-child-progressbar-inner-div {
-  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
-  border: transparent !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-milestone {
-  background-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-taskbar-inner-div {
-  background-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
-  border: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-progressbar-inner-div {
-  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
-  border: transparent !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-gantt-child-taskbar-inner-div {
-  background: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-  border: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-gantt-milestone {
-  background-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-child-taskbar-inner-div {
-  background: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
-  border: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-milestone {
-  background-color: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-line {
-  border-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-connector-line-right-arrow {
-  border-left-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-connector-line-left-arrow {
-  border-right-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-gantt .e-icons {
   color: #fff;
 }
@@ -2083,4 +2021,10 @@
 
 .e-gantt .e-gantt-chart .e-critical-milestone {
   background-color: #D13438;
+}
+
+.e-gantt-chart-resize-indicator {
+  border: 1px dashed #248aff;
+  border-bottom: none;
+  border-top: none;
 }