@syncfusion/ej2-gantt 20.2.50 → 20.3.47

package/src/gantt/renderer/chart-rows.js

@@ -111,7 +111,7 @@ var ChartRows = /** @class */ (function (_super) {
      * @private
      */
     ChartRows.prototype.getIndicatorNode = function (indicator) {
-        var templateString = '<label class="' + cls.label + ' ' + cls.taskIndicatorDiv + '" role="LabelIndicator" style="line-height:'
+        var templateString = '<label class="' + cls.label + ' ' + cls.taskIndicatorDiv + '"style="line-height:'
             + (this.parent.rowHeight) + 'px;' +
             'left:' + this.getIndicatorleft(indicator.date) + 'px;"><i class="' + indicator.iconClass + '"></i> </label>';
         return this.createDivElement(templateString);
@@ -627,7 +627,7 @@ var ChartRows = /** @class */ (function (_super) {
      */
     ChartRows.prototype.getTaskBaselineNode = function () {
         var data = this.templateData;
-        var template = '<div class="' + cls.baselineBar + ' ' + '" role="BaselineBar" style="margin-top:' + this.baselineTop +
+        var template = '<div class="' + cls.baselineBar + ' ' + '" role="term" style="margin-top:' + this.baselineTop +
             'px;left:' + data.ganttProperties.baselineLeft + 'px;' +
             'width:' + data.ganttProperties.baselineWidth + 'px;height:' +
             this.baselineHeight + 'px;' + (this.baselineColor ? 'background-color: ' + this.baselineColor + ';' : '') + '"></div>';
@@ -880,10 +880,10 @@ var ChartRows = /** @class */ (function (_super) {
         var className = (this.parent.gridLines === 'Horizontal' || this.parent.gridLines === 'Both') ?
             'e-chart-row-border' : '';
         table.innerHTML = '<tr class="' + this.getRowClassName(this.templateData) + ' ' + cls.chartRow + '"' +
-            'role="ChartRow" style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
+            'style="display:' + this.getExpandDisplayProp(this.templateData) + ';height:' +
             this.parent.rowHeight + 'px;">' +
             '<td class="' + cls.chartRowCell + ' ' + className
-            + '" role="ChartCell" style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
+            + '"style="width:' + this.parent.timelineModule.totalTimelineWidth + 'px;"></td></tr>';
         return table.childNodes;
     };
     /**
@@ -948,7 +948,7 @@ var ChartRows = /** @class */ (function (_super) {
     };
     ChartRows.prototype.leftLabelContainer = function () {
         var template = '<div class="' + ((this.leftTaskLabelTemplateFunction) ? cls.leftLabelTempContainer :
-            cls.leftLabelContainer) + ' ' + '" tabindex="-1" role="LeftLabel" style="height:' +
+            cls.leftLabelContainer) + ' ' + '" tabindex="-1" role="term" style="height:' +
             (this.parent.rowHeight - 2) + 'px;width:' + this.taskNameWidth(this.templateData) + '"></div>';
         return this.createDivElement(template);
     };
@@ -960,7 +960,7 @@ var ChartRows = /** @class */ (function (_super) {
         var template = '<div class="' + cls.taskBarMainContainer + ' ' +
             this.parent.getUnscheduledTaskClass(data.ganttProperties) + ' ' +
             ((data.ganttProperties.cssClass) ? data.ganttProperties.cssClass : '') + '" ' +
-            ' tabindex="-1" role="TaskBar" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
+            ' tabindex="-1" role="term" style="' + ((data.ganttProperties.isMilestone && !manualParent) ?
             ('width:' + this.milestoneHeight + 'px;height:' +
                 this.milestoneHeight + 'px;margin-top:' + this.milestoneMarginTop + 'px;left:' + (data.ganttProperties.left -
                 (this.milestoneHeight / 2)) + 'px;') : ('width:' + data.ganttProperties.width +
@@ -971,26 +971,26 @@ var ChartRows = /** @class */ (function (_super) {
     };
     ChartRows.prototype.rightLabelContainer = function () {
         var template = '<div class="' + ((this.rightTaskLabelTemplateFunction) ? cls.rightLabelTempContainer :
-            cls.rightLabelContainer) + '" ' + ' tabindex="-1" role="RightLabel" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
+            cls.rightLabelContainer) + '" ' + ' tabindex="-1" role="term" style="left:' + this.getRightLabelLeft(this.templateData) + 'px; height:'
             + (this.parent.rowHeight - 2) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarLeftResizer = function () {
         var lResizerLeft = -(this.parent.isAdaptive ? 12 : 2);
         var template = '<div class="' + cls.taskBarLeftResizer + ' ' + cls.icon + '"' +
-            ' role="LeftResizer" style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
+            'style="left:' + lResizerLeft + 'px;height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarRightResizer = function () {
         var rResizerLeft = this.parent.isAdaptive ? -2 : -10;
         var template = '<div class="' + cls.taskBarRightResizer + ' ' + cls.icon + '"' +
-            ' role="RightResizer" style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
+            'style="left:' + (this.templateData.ganttProperties.width + rResizerLeft) + 'px;' +
             'height:' + (this.taskBarHeight) + 'px;"></div>';
         return this.createDivElement(template);
     };
     ChartRows.prototype.childTaskbarProgressResizer = function () {
         var template = '<div class="' + cls.childProgressResizer + '"' +
-            ' role="ProgressResizer" style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
+            'style="left:' + (this.templateData.ganttProperties.progressWidth - 6) + 'px;margin-top:' +
             (this.taskBarHeight - 4) + 'px;"><div class="' + cls.progressBarHandler + '"' +
             '><div class="' + cls.progressHandlerElement + '"></div>' +
             '<div class="' + cls.progressBarHandlerAfter + '"></div></div>';
@@ -1001,9 +1001,16 @@ var ChartRows = /** @class */ (function (_super) {
         var pointerLeft = -((this.parent.isAdaptive ? 14 : 2) + this.connectorPointWidth);
         var mileStoneLeft = -(this.connectorPointWidth + 2);
         var pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
+        var marginTop;
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+            marginTop = '';
+        }
+        else {
+            marginTop = 'margin-top:' + this.connectorPointMargin + 'px';
+        }
         var template = '<div class="' + cls.leftConnectorPointOuterDiv + '" style="' +
             ((data.ganttProperties.isMilestone) ? ('margin-top:' + pointerTop + 'px;left:' + mileStoneLeft +
-                'px;') : ('margin-top:' + this.connectorPointMargin + 'px;left:' + pointerLeft + 'px;')) + '">' +
+                'px;') : (marginTop + ';left:' + pointerLeft + 'px;')) + '">' +
             '<div class="' + cls.connectorPointLeft + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
             '" style="width: ' + this.connectorPointWidth + 'px;' +
             'height: ' + this.connectorPointWidth + 'px;">' + this.touchLeftConnectorpoint + '</div></div>';
@@ -1013,10 +1020,16 @@ var ChartRows = /** @class */ (function (_super) {
         var data = this.templateData;
         var pointerRight = this.parent.isAdaptive ? 10 : -2;
         var pointerTop = Math.floor(this.milesStoneRadius - (this.connectorPointWidth / 2));
+        var marginTop;
+        if ((!this.templateData.ganttProperties.isAutoSchedule && this.templateData.hasChildRecords)) {
+            marginTop = '';
+        }
+        else {
+            marginTop = 'margin-top:' + this.connectorPointMargin + 'px';
+        }
         var template = '<div class="' + cls.rightConnectorPointOuterDiv + '" style="' +
             ((data.ganttProperties.isMilestone) ? ('left:' + (this.milestoneHeight - 2) + 'px;margin-top:' +
-                pointerTop + 'px;') : ('left:' + (data.ganttProperties.width + pointerRight) + 'px;margin-top:' +
-                this.connectorPointMargin + 'px;')) + '">' +
+                pointerTop + 'px;') : ('left:' + (data.ganttProperties.width + pointerRight) + 'px;' + marginTop + ';')) + '">' +
             '<div class="' + cls.connectorPointRight + ' ' + this.parent.getUnscheduledTaskClass(data.ganttProperties) +
             '" style="width:' + this.connectorPointWidth + 'px;height:' + this.connectorPointWidth + 'px;">' +
             this.touchRightConnectorpoint + '</div></div>';
@@ -1316,14 +1329,17 @@ var ChartRows = /** @class */ (function (_super) {
         var taskbarContainerNode = this.taskbarContainer();
         taskbarContainerNode[0].setAttribute('aria-label', this.generateAriaLabel(this.templateData));
         taskbarContainerNode[0].setAttribute('rowUniqueId', this.templateData.ganttProperties.rowUniqueID);
-        if (!this.templateData.hasChildRecords) {
-            var connectorLineLeftNode = this.getLeftPointNode();
+        var connectorLineLeftNode = this.getLeftPointNode();
+        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !this.templateData.hasChildRecords) {
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
         }
         if (this.templateData.hasChildRecords) {
             var parentTaskbarTemplateNode = this.getParentTaskbarNode(i, taskbarContainerNode);
             if (!this.templateData.ganttProperties.isAutoSchedule) {
                 var manualTaskbar = this.getManualTaskbar();
+                manualTaskbar[0].appendChild([].slice.call(connectorLineLeftNode)[0]);
+                var connectorLineRightNode = this.getRightPointNode();
+                manualTaskbar[0].appendChild([].slice.call(connectorLineRightNode)[0]);
                 taskbarContainerNode[0].appendChild([].slice.call(manualTaskbar)[0]);
             }
             if (parentTaskbarTemplateNode && parentTaskbarTemplateNode.length > 0) {
@@ -1398,7 +1414,7 @@ var ChartRows = /** @class */ (function (_super) {
                     ? this.getMilestoneBaselineNode() : this.getTaskBaselineNode();
             }
         }
-        if (!this.templateData.hasChildRecords) {
+        if ((this.templateData.ganttProperties.isAutoSchedule && this.parent.viewType == 'ProjectView') || !this.templateData.hasChildRecords) {
             var connectorLineRightNode = this.getRightPointNode();
             taskbarContainerNode[0].appendChild([].slice.call(connectorLineRightNode)[0]);
         }
@@ -1801,6 +1817,21 @@ var ChartRows = /** @class */ (function (_super) {
         }
         return defaultValue;
     };
+    ChartRows.prototype.generateBaselineAriaLabel = function (data) {
+        data = this.templateData;
+        var defaultValue = '';
+        var nameConstant = this.parent.localeObj.getConstant('name');
+        var startDateConstant = this.parent.localeObj.getConstant('startDate');
+        var endDateConstant = this.parent.localeObj.getConstant('endDate');
+        var taskNameVal = data.ganttProperties.taskName;
+        var startDateVal = data.ganttProperties.baselineStartDate;
+        var endDateVal = data.ganttProperties.baselineEndDate;
+        defaultValue += 'Baseline' + ' ';
+        defaultValue += nameConstant + ' ' + taskNameVal + ' ';
+        defaultValue += startDateConstant + ' ' + this.parent.getFormatedDate(startDateVal) + ' ';
+        defaultValue += endDateConstant + ' ' + this.parent.getFormatedDate(endDateVal) + ' ';
+        return defaultValue;
+    };
     ChartRows.prototype.generateSpiltTaskAriaLabel = function (data, ganttProp) {
         var defaultValue = '';
         var startDateConstant = this.parent.localeObj.getConstant('startDate');

package/src/gantt/renderer/connector-line.js

@@ -53,8 +53,19 @@ var ConnectorLine = /** @class */ (function () {
      */
     ConnectorLine.prototype.createConnectorLineObject = function (parentGanttData, childGanttData, predecessor) {
         var connectorObj = {};
-        var updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
-            this.parent.flatData : this.expandedRecords;
+        var updatedRecords;
+        if (this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport) {
+            if (this.parent.pdfExportModule['helper']['exportProps'].exportType &&
+                this.parent.pdfExportModule['helper']['exportProps'].exportType === 'CurrentViewData') {
+                updatedRecords = this.expandedRecords;
+            }
+            else {
+                updatedRecords = this.parent.flatData;
+            }
+        }
+        else {
+            updatedRecords = this.expandedRecords;
+        }
         var parentIndex = updatedRecords.indexOf(parentGanttData);
         var childIndex = updatedRecords.indexOf(childGanttData);
         var parentGanttRecord = parentGanttData.ganttProperties;
@@ -377,6 +388,63 @@ var ConnectorLine = /** @class */ (function () {
             isMilestoneValue = (data.milestoneParent && data.milestoneChild) ? 0 : data.milestoneParent ? -5 : data.milestoneChild ? 5 : 0;
         }
         var heightValue = isVirtual ? connectorLine.height : (height + isMilestoneValue);
+        var borderTopWidth = 0;
+        var addTop = 0;
+        if (this.parent.currentViewData[data.parentIndex] && this.parent.currentViewData[data.childIndex]) {
+            var fromRecordIsParent = this.parent.currentViewData[data.parentIndex].hasChildRecords;
+            var toRecordIsParent = this.parent.currentViewData[data.childIndex].hasChildRecords;
+            var fromRecordIsManual = this.parent.currentViewData[data.parentIndex].ganttProperties.isAutoSchedule;
+            var toRecordIsManual = this.parent.currentViewData[data.childIndex].ganttProperties.isAutoSchedule;
+            var isValid = true;
+            if (((fromRecordIsParent && fromRecordIsManual) && !toRecordIsParent) || ((toRecordIsParent && toRecordIsManual) &&
+                !fromRecordIsParent) || (fromRecordIsParent && fromRecordIsManual && toRecordIsManual && toRecordIsParent)
+                || (!fromRecordIsParent && !toRecordIsParent)) {
+                isValid = false;
+            }
+            if (isValid) {
+                if (((fromRecordIsParent && !fromRecordIsManual) && (toRecordIsParent && !toRecordIsManual))) {
+                    addTop = -11;
+                }
+                else if (!((fromRecordIsParent && !fromRecordIsManual) && (toRecordIsParent && !toRecordIsManual))) {
+                    if (data.childIndex > data.parentIndex) {
+                        if (!fromRecordIsParent && toRecordIsParent) {
+                            borderTopWidth = -11;
+                        }
+                        else {
+                            borderTopWidth = 11;
+                            addTop = -11;
+                        }
+                    }
+                    else {
+                        if ((fromRecordIsParent && !toRecordIsParent)) {
+                            borderTopWidth = -11;
+                        }
+                        else {
+                            borderTopWidth = 11;
+                            addTop = -11;
+                        }
+                    }
+                }
+                if (this.parent.currentViewData[data.parentIndex].ganttProperties.isMilestone) {
+                    if (data.parentIndex > data.childIndex) {
+                        addTop = -5;
+                        borderTopWidth = 10;
+                    }
+                    else if (data.type === 'SS' || data.type === 'FF') {
+                        addTop = -5;
+                    }
+                }
+                else if (this.parent.currentViewData[data.childIndex].ganttProperties.isMilestone) {
+                    if (data.parentIndex > data.childIndex) {
+                        addTop = 5;
+                        borderTopWidth = -10;
+                    }
+                    else if (data.type === 'SS' || data.type === 'FF') {
+                        addTop = 5;
+                    }
+                }
+            }
+        }
         if (this.getParentPosition(data)) {
             connectorContainer = '<div id="ConnectorLine' + data.connectorLineId + '" style="background-color:black">';
             var div = '<div class="' + cls.connectorLineContainer +
@@ -396,7 +464,7 @@ var ConnectorLine = /** @class */ (function () {
                 'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
             var duplicateStingThree = this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>' + eLine +
                 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                this.getBorderStyles('top', (heightValue - (this.lineStroke - 1))) + 'position:relative;"></div>';
+                this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
             var duplicateStingFour = leftArrow + 'left:' +
                 (((data.childLeft + data.childWidth) - (data.parentLeft)) + 10) + 'px;' +
                 this.getBorderStyles('right', 10);
@@ -404,7 +472,7 @@ var ConnectorLine = /** @class */ (function () {
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType1">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
@@ -414,7 +482,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
                     'width:0px;' + this.getBorderStyles('right', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
@@ -424,7 +492,7 @@ var ConnectorLine = /** @class */ (function () {
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType2') {
-                div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine.top : ((data.parentIndex * data.rowHeight) +
+                div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine.top : ((data.parentIndex * data.rowHeight) + addTop +
                     this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType2">';
                 div = div + eLine;
@@ -434,7 +502,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'left:' + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'width:0px;' +
-                    this.getBorderStyles('top', (heightValue - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
                     'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
@@ -456,7 +524,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType3">';
                 div = div + rightArrow;
                 div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
@@ -466,7 +534,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + 'width:10px;' + this.getBorderStyles('top', this.lineStroke) +
                     'position:relative;top:' + (-(6 + (5 + this.lineStroke) + Math.round(this.lineStroke / 2))) + 'px;"></div>';
                 div = div + eLine;
-                div = div + 'width:' + this.lineStroke + 'px;' + this.getBorderStyles('top', (heightValue - this.getconnectorLineGap(data) - this.lineStroke + 1)) +
+                div = div + 'width:' + this.lineStroke + 'px;' + this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke + 1)) +
                     'position:relative;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
                 div = div + eLine;
                 div = div + 'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
@@ -486,7 +554,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType4">';
                 div = div + rightArrow;
                 div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
@@ -502,7 +570,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;left:' +
                     (data.childLeft - (data.parentLeft + data.parentWidth) - 20) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke + 1)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
@@ -512,7 +580,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType4">';
                 div = div + rightArrow;
                 div = div + 'left:' + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
@@ -525,7 +593,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType3">';
                 div = div + rightArrow;
                 div = div + 'left:10px;' + duplicateStingTwo;
@@ -538,14 +606,14 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType2') {
                 div = div + 'left:' + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType2">';
                 div = div + eLine;
                 div = div + 'width:' + (setInnerChildWidthSSType2 + 1) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'width:' + setInnerElementWidthSSType2 + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
@@ -558,7 +626,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType1') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) +
+                    ((data.parentIndex * data.rowHeight) + addTop +
                         this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType1">';
                 div = div + eLine;
@@ -566,7 +634,7 @@ var ConnectorLine = /** @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'width:10px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
@@ -576,7 +644,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType1') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType1">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
@@ -587,7 +655,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'left:' + (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 20) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (16 + this.lineStroke)) :
@@ -600,7 +668,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType2') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType2">';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'width:' +
@@ -611,7 +679,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) +
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) +
                     'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
@@ -626,7 +694,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -639,7 +707,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + 'left:' + (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 20) +
                     'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke + 1)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? ('left:' + (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : ('left:' + ((data.parentLeft + data.parentWidth) -
@@ -649,7 +717,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType4">';
                 div = div + leftArrow;
                 div = div + ('left:' + ((data.childLeft + data.childWidth) -
@@ -668,7 +736,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + 'left:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 20) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke + 1)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? ('left:-1px;width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (21 + this.lineStroke))) : ('width:' + (((data.childLeft + data.childWidth) -
@@ -678,7 +746,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
                     'height:' + heightValue + 'px;position:absolute" data-connectortype="SFType4">';
                 div = div + duplicateStingFour + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) +
@@ -691,7 +759,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) + 'px;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.getconnectorLineGap(data) - (this.lineStroke - 1))) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     (((data.childLeft + data.childWidth) - (data.parentLeft)) + (30 + this.lineStroke)) + 'px;' +
@@ -706,7 +774,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -716,7 +784,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - (this.lineStroke - 1))) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     ((data.parentLeft - (data.childLeft + data.childWidth + 20)) + this.lineStroke) + 'px;' +
@@ -724,13 +792,13 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType1') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType1">';
                 div = div + eLine;
                 div = div + 'width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + 'width:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + (30 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
@@ -749,7 +817,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType2') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + addTop + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType2">';
                 div = div + eLine;
                 div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
@@ -757,7 +825,7 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
-                    this.getBorderStyles('top', (heightValue - this.lineStroke)) + 'position:relative;"></div>';
+                    this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
                 div = div + (isMilestone ? ('left:4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
                     - (14 - this.lineStroke))) : ('left:10px;width:' + (((data.parentLeft) -

package/src/gantt/renderer/event-marker.js

@@ -15,7 +15,7 @@ var EventMarker = /** @class */ (function () {
                 this.eventMarkersContainer = createElement('div', {
                     className: cls.eventMarkersContainer
                 });
-                this.eventMarkersContainer.setAttribute("role", "EventMarker");
+                this.eventMarkersContainer.setAttribute("role", "term");
                 this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
             }
             this.eventMarkersContainer.innerHTML = '';

package/src/gantt/renderer/nonworking-day.js

@@ -19,7 +19,6 @@ var NonWorkingDay = /** @class */ (function () {
             this.nonworkingContainer = createElement('div', {
                 className: cls.nonworkingContainer
             });
-            this.nonworkingContainer.setAttribute("role", "NonWorkingDays");
             this.parent.ganttChartModule.chartBodyContent.appendChild(this.nonworkingContainer);
         }
     };

package/src/gantt/renderer/tooltip.js

@@ -387,7 +387,8 @@ var Tooltip = /** @class */ (function () {
      */
     Tooltip.prototype.getPredecessorTooltipData = function (args) {
         var predeceesorParent = args.target.parentElement.id;
-        var taskIds = predeceesorParent.match(/\d+/g);
+        var taskIds = predeceesorParent.match(/ConnectorLineparent(.*)child(.*)/);
+        taskIds.shift();
         var fromTask;
         var toTask;
         if (this.parent.viewType === 'ResourceView') {