@syncfusion/ej2-gantt 20.3.61 → 20.4.38

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

@@ -53,19 +53,8 @@ var ConnectorLine = /** @class */ (function () {
      */
     ConnectorLine.prototype.createConnectorLineObject = function (parentGanttData, childGanttData, predecessor) {
         var connectorObj = {};
-        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 updatedRecords = this.parent.pdfExportModule && this.parent.pdfExportModule.isPdfExport ?
+            this.parent.flatData : this.expandedRecords;
         var parentIndex = updatedRecords.indexOf(parentGanttData);
         var childIndex = updatedRecords.indexOf(childGanttData);
         var parentGanttRecord = parentGanttData.ganttProperties;
@@ -131,6 +120,9 @@ var ConnectorLine = /** @class */ (function () {
             }
         }
         this.parent.ganttChartModule.chartBodyContent.appendChild(this.dependencyViewContainer);
+        for (var i = 0; i < this.dependencyViewContainer.children.length; i++) {
+            this.dependencyViewContainer.children[i].children[0].setAttribute('tabindex', '-1');
+        }
     };
     /**
      * To get parent position.
@@ -449,85 +441,96 @@ var ConnectorLine = /** @class */ (function () {
             connectorContainer = '<div id="ConnectorLine' + data.connectorLineId + '" style="background-color:black">';
             var div = '<div class="' + cls.connectorLineContainer +
                 '" tabindex="-1" style="';
+            var direction = this.parent.enableRtl ? 'right:' : 'left:';
             var eLine = '<div class="' + cls.connectorLine + '" style="' +
                 (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            var rightArrow = '<div class="' + cls.connectorLineRightArrow + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            var leftArrow = '<div class="' + cls.connectorLineLeftArrow + '" style="' +
-                (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
-            var duplicateStingOne = leftArrow + (isMilestone ? 'left:0px;' : '') +
-                this.getBorderStyles('right', 10) +
+            var rightArrow = void 0;
+            var leftArrow = void 0;
+            if (this.parent.enableRtl) {
+                leftArrow = '<div class="' + cls.connectorLineRightArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+                rightArrow = '<div class="' + cls.connectorLineLeftArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+            }
+            else {
+                rightArrow = '<div class="' + cls.connectorLineRightArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+                leftArrow = '<div class="' + cls.connectorLineLeftArrow + '" style="' +
+                    (!isNullOrUndefined(this.lineColor) ? 'outline-color:' + this.lineColor + ';' : '');
+            }
+            var duplicateStingOne = leftArrow + (isMilestone ? (this.parent.enableRtl ? 'right:0px;' : 'left:0px;') : '') +
+                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10) +
                 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                 'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
-            var duplicateStingTwo = this.getBorderStyles('left', 10) +
+            var duplicateStingTwo = this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                 'top:' + (-6) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                 '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 + borderTopWidth - (this.lineStroke - 1))) + 'position:relative;"></div>';
-            var duplicateStingFour = leftArrow + 'left:' +
+            var duplicateStingFour = leftArrow + (this.parent.enableRtl ? 'right:' : 'left:') +
                 (((data.childLeft + data.childWidth) - (data.parentLeft)) + 10) + 'px;' +
-                this.getBorderStyles('right', 10);
+                this.getBorderStyles((this.parent.enableRtl ? 'left' : 'right'), 10);
             var duplicateStingFive = 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;' +
                 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 :
+                div = div + direction + (data.parentLeft + data.parentWidth) + '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="FSType1">';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
+                div = div + direction + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
                     ((((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10) + 1) :
                     (((data.childLeft - (data.parentLeft + data.parentWidth + 10)) + this.lineStroke) - 10)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
+                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;' +
                     'width:0px;' + this.getBorderStyles('right', this.lineStroke) +
                     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;' +
+                div = div + direction + ((data.childLeft - (data.parentLeft + data.parentWidth + 10)) - 10) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
                     '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) + addTop +
+                div = div + direction + 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;
-                div = div + 'left:' + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
+                div = div + direction + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
                     (isMilestoneParent ? 11 : 10) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
+                div = div + direction + (data.parentWidth + 10 - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'width:0px;' +
                     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;' +
+                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 20)) + 'px;' +
                     'width:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + 30) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft +
+                div = div + direction + (data.parentWidth - (((data.parentLeft +
                     data.parentWidth) - data.childLeft) + 20)) + 'px;width:0px;' +
                     this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) +
                     this.getBorderStyles('left', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft +
+                div = div + direction + (data.parentWidth - (((data.parentLeft +
                     data.parentWidth) - data.childLeft) + 20)) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 10)) + 'px;' +
-                    this.getBorderStyles('left', 10) + 'border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
+                div = div + direction + (data.parentWidth - (((data.parentLeft + data.parentWidth) - data.childLeft) + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;top:' + (-6 - this.lineStroke) +
                     'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType3') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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) +
+                div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) + 'px;' +
                     'top:' + (-6) + 'px;width:0;height:0;position:relative;"></div>';
                 div = div + eLine;
@@ -541,49 +544,49 @@ var ConnectorLine = /** @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) - data.childLeft) + (30 - this.lineStroke)) +
+                div = div + direction + (((data.parentLeft + data.parentWidth) - data.childLeft) + (30 - this.lineStroke)) +
                     'px;width:0px;' + 'height:' + (this.getconnectorLineGap(data) - this.lineStroke) + 'px;' +
                     this.getBorderStyles('left', this.lineStroke) + 'position:relative;' +
                     'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:' + (((data.parentLeft +
-                    data.parentWidth) - data.childLeft) + (18 - this.lineStroke)) + 'px;width:' + (12 + this.lineStroke) + 'px;' : 'left:' +
+                div = div + (isMilestoneParent ? direction + (((data.parentLeft +
+                    data.parentWidth) - data.childLeft) + (18 - this.lineStroke)) + 'px;width:' + (12 + this.lineStroke) + 'px;' : direction +
                     (((data.parentLeft + data.parentWidth) - data.childLeft) + 20) + 'px;width:10px;') +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FSType4') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6) + 'px;' +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
                     (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth) - 20) +
+                div = div + direction + (data.childLeft - (data.parentLeft + data.parentWidth) - 20) +
                     'px;top:' + (-(6 + (5 + this.lineStroke) + Math.round(this.lineStroke / 2))) + 'px;width:10px;' +
                     this.getBorderStyles('top', this.lineStroke) +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;left:' +
+                div = div + 'top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' + direction +
                     (data.childLeft - (data.parentLeft + data.parentWidth) - 20) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'top:' +
+                div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     (isMilestoneParent ? ((data.childLeft - (data.parentLeft + data.parentWidth + 20) + 1) + this.lineStroke) :
                         ((data.childLeft - (data.parentLeft + data.parentWidth + 20)) + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType4') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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;
+                div = div + direction + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
                 div = div + eLine;
                 div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:' +
                     (data.childLeft - data.parentLeft) + 'px;' + duplicateStingThree;
@@ -592,11 +595,11 @@ var ConnectorLine = /** @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType3') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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;
+                div = div + direction + '10px;' + duplicateStingTwo;
                 div = div + eLine;
                 div = div + 'top:' + (-(6 + (5 + this.lineStroke) + (this.lineStroke / 2))) + 'px;width:10px;' + duplicateStingThree;
                 div = div + eLine;
@@ -605,7 +608,7 @@ var ConnectorLine = /** @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType2') {
-                div = div + 'left:' + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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;
@@ -618,14 +621,14 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + 'width:' + setInnerElementWidthSSType2 + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:' + setInnerElementWidthSSType2 + 'px;' +
-                    this.getBorderStyles('left', 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
+                div = div + direction + setInnerElementWidthSSType2 + 'px;' +
+                    this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' +
                     (5 + this.lineStroke) + 'px;width:0;' +
                     'height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SSType1') {
-                div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((data.parentIndex * data.rowHeight) + addTop +
                         this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType1">';
@@ -638,114 +641,114 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + eLine;
                 div = div + 'width:10px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + rightArrow;
-                div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
+                div = div + direction + '10px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType1') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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) -
+                div = div + direction + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) - 1) : ((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth))) + 'px;' +
                     'width:' + (isMilestoneParent ? (21 + this.lineStroke) : (20 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) -
+                div = div + direction + (((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 20) + 'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (heightValue + borderTopWidth - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
+                div = div + direction + (isMilestone ? 4 : 10) + 'px;width:' + (isMilestone ?
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (16 + this.lineStroke)) :
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + (10 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + (isMilestone ? 'left:0px;' : '') + this.getBorderStyles('right', 10) +
+                div = div + (isMilestone ? direction + '0px;' : '') + this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) + 'px;' +
                     'border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType2') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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:' +
+                div = div + (isMilestoneParent ? direction + '-1px;' : '') + 'width:' +
                     (isMilestoneParent ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) +
                         (21 + this.lineStroke)) : (((data.childLeft + data.childWidth) -
                         (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 20) +
                     'px;width:0px;' + this.getBorderStyles('left', 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) :
+                div = div + direction + (isMilestone ? (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 4) :
                     (((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 10)) + 'px;' +
                     'width:' + (isMilestone ? (16 + this.lineStroke) : (10 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + 'left:' + ((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 'px;' +
-                    this.getBorderStyles('right', 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
+                div = div + direction + ((data.childLeft + data.childWidth) - (data.parentLeft + data.parentWidth)) + 'px;' +
+                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-6 - this.lineStroke) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) + 'px;border-top-width:' + (5 + this.lineStroke) +
                     'px;width:0;height:0;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType3') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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;
-                div = div + (isMilestone ? ('left:4px;width:' +
+                div = div + (isMilestone ? (direction + '4px;width:' +
                     (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 16)) :
-                    ('left:10px;width:' + (((data.parentLeft + data.parentWidth) -
+                    (direction + '10px;width:' + (((data.parentLeft + data.parentWidth) -
                         (data.childLeft + data.childWidth)) + 10))) + 'px;top:' + (-(6 + (5 + this.lineStroke) +
                     (this.lineStroke / 2))) + 'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft + data.parentWidth) - (data.childLeft + data.childWidth)) + 20) +
+                div = div + direction + (((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 + 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) -
+                div = div + (isMilestoneParent ? (direction + (((data.parentLeft + data.parentWidth) -
+                    (data.childLeft + data.childWidth)) - 1) + 'px;width:21') : (direction + ((data.parentLeft + data.parentWidth) -
                     (data.childLeft + data.childWidth)) + 'px;width:20')) +
                     'px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'FFType4') {
-                div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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) -
+                div = div + (direction + ((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth))) + 'px;' +
-                    this.getBorderStyles('right', 10) + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
+                    this.getBorderStyles((!this.parent.enableRtl ? 'right' : 'left'), 10) + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:' + (((data.childLeft + data.childWidth) -
+                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 4) +
-                    'px;width:' + (16 + this.lineStroke)) : ('left:' + (((data.childLeft + data.childWidth) -
+                    'px;width:' + (16 + this.lineStroke)) : (direction + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + 10) + 'px;width:' + (10 + this.lineStroke))) +
                     'px;' + duplicateStingFive;
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) -
+                div = div + direction + (((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 + borderTopWidth - this.lineStroke + 1)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestoneParent ? ('left:-1px;width:' + (((data.childLeft + data.childWidth) -
+                div = div + (isMilestoneParent ? (direction + '-1px;width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (21 + this.lineStroke))) : ('width:' + (((data.childLeft + data.childWidth) -
                     (data.parentLeft + data.parentWidth)) + (20 + this.lineStroke)))) + 'px;top:' +
                     (-(13 + ((this.lineStroke - 1) * 2))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType4') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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;' +
@@ -753,11 +756,11 @@ var ConnectorLine = /** @class */ (function () {
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;' +
                     'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (isMilestone ? ((((data.childLeft + data.childWidth) - (data.parentLeft)) + (14 + this.lineStroke)) +
+                div = div + direction + (isMilestone ? ((((data.childLeft + data.childWidth) - (data.parentLeft)) + (14 + this.lineStroke)) +
                     'px;width:16') : ((((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' +
                     (10 + this.lineStroke))) + 'px;' + duplicateStingFive;
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) + 'px;top:' +
+                div = div + direction + (((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 + borderTopWidth - this.getconnectorLineGap(data) - (this.lineStroke - 1))) + 'position:relative;"></div>';
                 div = div + eLine;
@@ -773,25 +776,25 @@ var ConnectorLine = /** @class */ (function () {
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType3') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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;
-                div = div + (isMilestone ? 'left:4px;width:' + (16 + this.lineStroke) : 'left:10px;width:' +
+                div = div + (isMilestone ? direction + '4px;width:' + (16 + this.lineStroke) : direction + '10px;width:' +
                     (10 + this.lineStroke)) + 'px;top:' + (-(13 + ((this.lineStroke - 1) * 2) - 1)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
+                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:0px;' +
                     this.getBorderStyles('left', this.lineStroke) +
                     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:' +
+                div = div + direction + '20px;top:' + (-(13 + ((this.lineStroke - 1) * 2))) + 'px;width:' +
                     ((data.parentLeft - (data.childLeft + data.childWidth + 20)) + this.lineStroke) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType1') {
-                div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.parentLeft - 10) + '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="SFType1">';
                 div = div + eLine;
@@ -803,12 +806,12 @@ var ConnectorLine = /** @class */ (function () {
                 div = div + 'width:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + (30 + this.lineStroke)) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) +
+                div = div + direction + (((data.childLeft + data.childWidth) - (data.parentLeft)) + 30) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     this.getBorderStyles('top', (this.getconnectorLineGap(data) - this.lineStroke)) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + (isMilestone ? ('left:' + (((data.childLeft + data.childWidth) -
-                    (data.parentLeft)) + 15) + 'px;width:' + (15 + this.lineStroke)) : ('left:' +
+                div = div + (isMilestone ? (direction + (((data.childLeft + data.childWidth) -
+                    (data.parentLeft)) + 15) + 'px;width:' + (15 + this.lineStroke)) : (direction +
                     (((data.childLeft + data.childWidth) - (data.parentLeft)) + 20) + 'px;width:' + (10 + this.lineStroke))) + 'px;' +
                     this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + duplicateStingFour + 'top:' + (-6 - this.lineStroke) + 'px;' +
@@ -816,23 +819,23 @@ var ConnectorLine = /** @class */ (function () {
                     (5 + this.lineStroke) + 'px;position:relative;"></div></div>';
             }
             if (this.getParentPosition(data) === 'SFType2') {
-                div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
+                div = div + direction + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((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) +
+                div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + eLine;
-                div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
+                div = div + direction + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +
                     'px;width:0px;' + this.getBorderStyles('left', this.lineStroke) +
                     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) -
+                div = div + (isMilestone ? (direction + '4px;width:' + (((data.parentLeft) - (data.childLeft + data.childWidth))
+                    - (14 - this.lineStroke))) : (direction + '10px;width:' + (((data.parentLeft) -
                     (data.childLeft + data.childWidth)) - (20 - this.lineStroke)))) +
                     'px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
                 div = div + leftArrow;
-                div = div + 'left:0px;' + this.getBorderStyles('right', 10) +
+                div = div + direction + '0px;' + this.getBorderStyles((this.parent.enableRtl ? 'right' : 'left'), 10) +
                     'top:' + (-6 - this.lineStroke) + 'px;border-bottom-width:' + (5 + this.lineStroke) +
                     'px;border-top-width:' + (5 + this.lineStroke) + 'px;width:0;height:0;position:relative;"></div></div>';
             }

package/src/gantt/renderer/edit-tooltip.js

@@ -23,6 +23,7 @@ var EditTooltip = /** @class */ (function () {
         this.toolTipObj = new Tooltip({
             opensOn: opensOn,
             position: 'TopRight',
+            enableRtl: this.parent.enableRtl,
             mouseTrail: mouseTrail,
             cssClass: cls.ganttTooltip,
             target: target ? target : null,
@@ -72,12 +73,15 @@ var EditTooltip = /** @class */ (function () {
             this.parent.tooltipModule.toolTipObj.close();
             this.updateTooltip(segmentIndex);
             if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointLeftDrag') {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + cls.connectorPointLeft));
             }
             else if (this.taskbarEdit.connectorSecondAction === 'ConnectorPointRightDrag') {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.connectorSecondElement.querySelector('.' + cls.connectorPointRight));
             }
             else {
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
                 this.toolTipObj.open(this.taskbarEdit.taskBarEditElement);
             }
         }
@@ -110,14 +114,29 @@ var EditTooltip = /** @class */ (function () {
                 this.toolTipObj.content = this.getTooltipText(segmentIndex);
                 this.toolTipObj.refresh(this.taskbarEdit.taskBarEditElement);
                 if (this.taskbarEdit.taskBarEditAction === 'LeftResizing') {
-                    this.toolTipObj.offsetX = -taskWidth;
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = 0;
+                    }
+                    else {
+                        this.toolTipObj.offsetX = -taskWidth;
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'RightResizing' ||
                     this.taskbarEdit.taskBarEditAction === 'ParentResizing') {
-                    this.toolTipObj.offsetX = 0;
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = -taskWidth;
+                    }
+                    else {
+                        this.toolTipObj.offsetX = 0;
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'ProgressResizing') {
-                    this.toolTipObj.offsetX = -(taskWidth - progressWidth);
+                    if (this.parent.enableRtl) {
+                        this.toolTipObj.offsetX = -(progressWidth);
+                    }
+                    else {
+                        this.toolTipObj.offsetX = -(taskWidth - progressWidth);
+                    }
                 }
                 else if (this.taskbarEdit.taskBarEditAction === 'MilestoneDrag') {
                     this.toolTipObj.offsetX = -(this.parent.chartRowsModule.milestoneHeight / 2);

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", "term");
+                this.eventMarkersContainer.setAttribute('role', 'term');
                 this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
             }
             this.eventMarkersContainer.innerHTML = '';
@@ -48,8 +48,15 @@ var EventMarker = /** @class */ (function () {
         var rightArrow;
         for (var i = 0; i < this.parent.eventMarkers.length; i++) {
             left = this.parent.dataOperation.getTaskLeft(this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true), false);
+            var align = void 0;
+            if (this.parent.enableRtl) {
+                align = "right:" + left + "px;";
+            }
+            else {
+                align = "left:" + left + "px;";
+            }
             eventMarkerElement = createElement('div', {
-                className: cls.eventMarkersChild, styles: "left:" + left + "px;  height:100%;",
+                className: cls.eventMarkersChild, styles: align + "  height:100%;",
                 id: 'stripline' + i
             });
             if (this.parent.eventMarkers[i].label) {
@@ -58,6 +65,12 @@ var EventMarker = /** @class */ (function () {
                 });
                 var property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
                 spanElement[property] = this.parent.eventMarkers[i].label;
+                if (this.parent.enableRtl) {
+                    spanElement.style.right = '5px';
+                }
+                else {
+                    spanElement.style.left = '5px';
+                }
                 eventMarkerElement.appendChild(spanElement);
                 rightArrow = createElement('div', {
                     className: 'e-gantt-right-arrow'