gantt-task-react-powern 0.4.13 → 0.4.14

package/dist/index.js

@@ -436,6 +436,7 @@ var styles$2 = {"tooltipDefaultContainer":"_3T42e","tooltipDefaultContainerParag
 
 var Tooltip = function Tooltip(_ref) {
   var task = _ref.task,
+      type = _ref.type,
       rowHeight = _ref.rowHeight,
       rtl = _ref.rtl,
       svgContainerHeight = _ref.svgContainerHeight,
@@ -479,14 +480,14 @@ var Tooltip = function Tooltip(_ref) {
           newRelatedY += rowHeight;
         }
       } else {
-        newRelatedX = task.x2 + arrowIndent * 1.5 + taskListWidth - scrollX;
+        newRelatedX = type == "planned" ? task.x2 + arrowIndent * 1.5 + taskListWidth - scrollX : task.actualx2 + arrowIndent * 1.5 + taskListWidth - scrollX;
 
         var _tooltipLeftmostPoint = tooltipWidth + newRelatedX;
 
         var fullChartWidth = taskListWidth + svgContainerWidth;
 
         if (_tooltipLeftmostPoint > fullChartWidth) {
-          newRelatedX = task.x1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth;
+          newRelatedX = type == "planned" ? task.x1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth : task.actualx1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth;
         }
 
         if (newRelatedX < taskListWidth) {
@@ -515,28 +516,41 @@ var Tooltip = function Tooltip(_ref) {
   }, React__default.createElement(TooltipContent, {
     task: task,
     fontSize: fontSize,
-    fontFamily: fontFamily
+    fontFamily: fontFamily,
+    type: type
   }));
 };
 var StandardTooltipContent = function StandardTooltipContent(_ref2) {
   var task = _ref2.task,
       fontSize = _ref2.fontSize,
-      fontFamily = _ref2.fontFamily;
+      fontFamily = _ref2.fontFamily,
+      type = _ref2.type;
   var style = {
     fontSize: fontSize,
     fontFamily: fontFamily
   };
-  return React__default.createElement("div", {
+  if (type == "planned") return React__default.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
     style: style
   }, React__default.createElement("b", {
     style: {
       fontSize: fontSize + 6
     }
-  }, task.name + ": " + task.start.getDate() + "-" + (task.start.getMonth() + 1) + "-" + task.start.getFullYear() + " - " + task.end.getDate() + "-" + (task.end.getMonth() + 1) + "-" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React__default.createElement("p", {
+  }, task.name + ": Planned dates: "), React__default.createElement("b", null, task.start.getDate() + "-" + (task.start.getMonth() + 1) + "-" + task.start.getFullYear() + " - " + task.end.getDate() + "-" + (task.end.getMonth() + 1) + "-" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
   }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
+  }, !!task.progress && "Progress: " + task.progress + " %"));else return React__default.createElement("div", {
+    className: styles$2.tooltipDefaultContainer,
+    style: style
+  }, React__default.createElement("b", {
+    style: {
+      fontSize: fontSize + 6
+    }
+  }, task.name + ": Actual dates: "), React__default.createElement("b", null, task.actualStart.getDate() + "-" + (task.actualStart.getMonth() + 1) + "-" + task.actualStart.getFullYear() + " - " + task.actualEnd.getDate() + "-" + (task.actualEnd.getMonth() + 1) + "-" + task.actualEnd.getFullYear()), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React__default.createElement("p", {
+    className: styles$2.tooltipDefaultContainerParagraph
+  }, "Duration: " + ~~((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
+    className: styles$2.tooltipDefaultContainerParagraph
   }, !!task.progress && "Progress: " + task.progress + " %"));
 };
 
@@ -1111,13 +1125,15 @@ var Arrow = function Arrow(_ref) {
 };
 
 var drownPathAndTriangle = function drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
+  var taskToStart = Math.min(taskTo.x1, taskTo.actualx1);
+  var taskFromEnd = Math.max(taskFrom.x2, taskFrom.actualx2);
   var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
   var taskToEndPosition = taskTo.y + taskHeight / 2;
-  var taskFromEndPosition = taskFrom.x2 + arrowIndent * 2;
-  var taskFromHorizontalOffsetValue = taskFromEndPosition < taskTo.x1 ? "" : "H " + (taskTo.x1 - arrowIndent);
-  var taskToHorizontalOffsetValue = taskFromEndPosition > taskTo.x1 ? arrowIndent : taskTo.x1 - taskFrom.x2 - arrowIndent;
-  var path = "M " + taskFrom.x2 + " " + (taskFrom.y + taskHeight / 2) + " \n  h " + arrowIndent + " \n  v " + indexCompare * rowHeight / 2 + " \n  " + taskFromHorizontalOffsetValue + "\n  V " + taskToEndPosition + " \n  h " + taskToHorizontalOffsetValue;
-  var trianglePoints = taskTo.x1 + "," + taskToEndPosition + " \n  " + (taskTo.x1 - 5) + "," + (taskToEndPosition - 5) + " \n  " + (taskTo.x1 - 5) + "," + (taskToEndPosition + 5);
+  var taskFromEndPosition = taskFromEnd + arrowIndent * 2;
+  var taskFromHorizontalOffsetValue = taskFromEndPosition < taskToStart ? "" : "H " + (taskToStart - arrowIndent);
+  var taskToHorizontalOffsetValue = taskFromEndPosition > taskToStart ? arrowIndent : taskToStart - taskFromEnd - arrowIndent;
+  var path = "M " + taskFromEnd + " " + (taskFrom.y + taskHeight / 2) + " \n  h " + arrowIndent + " \n  v " + indexCompare * rowHeight / 2 + " \n  " + taskFromHorizontalOffsetValue + "\n  V " + taskToEndPosition + " \n  h " + taskToHorizontalOffsetValue;
+  var trianglePoints = taskToStart + "," + taskToEndPosition + " \n  " + (taskToStart - 5) + "," + (taskToEndPosition - 5) + " \n  " + (taskToStart - 5) + "," + (taskToEndPosition + 5);
   return [path, trianglePoints];
 };
 
@@ -1309,23 +1325,6 @@ var progressWithByParams = function progressWithByParams(taskX1, taskX2, progres
 
   return [progressWidth, progressX];
 };
-
-var progressByX = function progressByX(x, task) {
-  if (x >= task.x2) return 100;else if (x <= task.x1) return 0;else {
-    var barWidth = task.x2 - task.x1;
-    var progressPercent = Math.round((x - task.x1) * 100 / barWidth);
-    return progressPercent;
-  }
-};
-
-var progressByXRTL = function progressByXRTL(x, task) {
-  if (x >= task.x2) return 0;else if (x <= task.x1) return 100;else {
-    var barWidth = task.x2 - task.x1;
-    var progressPercent = Math.round((task.x2 - x) * 100 / barWidth);
-    return progressPercent;
-  }
-};
-
 var getProgressPoint = function getProgressPoint(progressX, taskY, taskHeight) {
   var point = [progressX - 5, taskY + taskHeight, progressX + 5, taskY + taskHeight, progressX, taskY + taskHeight - 8.66];
   return point.join(",");
@@ -1342,6 +1341,17 @@ var startByX = function startByX(x, xStep, task) {
   return newX;
 };
 
+var startByActualX = function startByActualX(x, xStep, task) {
+  if (x >= task.actualx2 - task.handleWidth * 2) {
+    x = task.actualx2 - task.handleWidth * 2;
+  }
+
+  var steps = Math.round((x - task.actualx1) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX = task.actualx1 + additionalXValue;
+  return newX;
+};
+
 var endByX = function endByX(x, xStep, task) {
   if (x <= task.x1 + task.handleWidth * 2) {
     x = task.x1 + task.handleWidth * 2;
@@ -1353,6 +1363,17 @@ var endByX = function endByX(x, xStep, task) {
   return newX;
 };
 
+var endByActualX = function endByActualX(x, xStep, task) {
+  if (x <= task.actualx1 + task.handleWidth * 2) {
+    x = task.actualx1 + task.handleWidth * 2;
+  }
+
+  var steps = Math.round((x - task.actualx2) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX = task.actualx2 + additionalXValue;
+  return newX;
+};
+
 var moveByX = function moveByX(x, xStep, task) {
   var steps = Math.round((x - task.x1) / xStep);
   var additionalXValue = steps * xStep;
@@ -1361,13 +1382,21 @@ var moveByX = function moveByX(x, xStep, task) {
   return [newX1, newX2];
 };
 
+var moveByActualX = function moveByActualX(x, xStep, task) {
+  var steps = Math.round((x - task.actualx1) / xStep);
+  var additionalXValue = steps * xStep;
+  var newX1 = task.actualx1 + additionalXValue;
+  var newX2 = newX1 + task.actualx2 - task.actualx1;
+  return [newX1, newX2];
+};
+
 var dateByX = function dateByX(x, taskX, taskDate, xStep, timeStep) {
   var newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
   newDate = new Date(newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
   return newDate;
 };
 
-var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) {
+var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
   var result;
 
   switch (selectedTask.type) {
@@ -1376,58 +1405,40 @@ var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action,
       break;
 
     default:
-      result = handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl);
+      result = handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl);
       break;
   }
 
   return result;
 };
 
-var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) {
+var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
   var changedTask = _extends({}, selectedTask);
 
   var isChanged = false;
 
   switch (action) {
-    case "progress":
-      if (rtl) {
-        changedTask.progress = progressByXRTL(svgX, selectedTask);
-      } else {
-        changedTask.progress = progressByX(svgX, selectedTask);
-      }
-
-      isChanged = changedTask.progress !== selectedTask.progress;
-
-      if (isChanged) {
-        var _progressWithByParams2 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
-            progressWidth = _progressWithByParams2[0],
-            progressX = _progressWithByParams2[1];
-
-        changedTask.progressWidth = progressWidth;
-        changedTask.progressX = progressX;
-      }
-
-      break;
-
     case "start":
       {
-        var newX1 = startByX(svgX, xStep, selectedTask);
-        changedTask.x1 = newX1;
-        isChanged = changedTask.x1 !== selectedTask.x1;
+        var newX1 = type == "planned" ? startByX(svgX, xStep, selectedTask) : startByActualX(svgX, xStep, selectedTask);
+        if (type == "planned") changedTask.x1 = newX1;else if (type == "actual") changedTask.actualx1 = newX1;
+        isChanged = changedTask.x1 !== selectedTask.x1 || changedTask.actualx1 !== selectedTask.actualx1;
 
         if (isChanged) {
           if (rtl) {
-            changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
+            if (type == "planned") changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
+            if (type == "actual") changedTask.actualEnd = dateByX(newX1, selectedTask.actualx1, selectedTask.actualEnd, xStep, timeStep);
           } else {
-            changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+            if (type == "planned") changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+            if (type == "actual") changedTask.actualStart = dateByX(newX1, selectedTask.actualx1, selectedTask.actualStart, xStep, timeStep);
           }
 
-          var _progressWithByParams3 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
-              _progressWidth = _progressWithByParams3[0],
-              _progressX = _progressWithByParams3[1];
+          var _progressWithByParams2 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
+              progressWidth = _progressWithByParams2[0],
+              progressX = _progressWithByParams2[1];
 
-          changedTask.progressWidth = _progressWidth;
-          changedTask.progressX = _progressX;
+          changedTask.progressWidth = progressWidth;
+          changedTask.progressX = progressX;
         }
 
         break;
@@ -1435,23 +1446,25 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
 
     case "end":
       {
-        var newX2 = endByX(svgX, xStep, selectedTask);
-        changedTask.x2 = newX2;
-        isChanged = changedTask.x2 !== selectedTask.x2;
+        var newX2 = type == "planned" ? endByX(svgX, xStep, selectedTask) : endByActualX(svgX, xStep, selectedTask);
+        if (type == "planned") changedTask.x2 = newX2;else if (type == "actual") changedTask.actualx2 = newX2;
+        isChanged = changedTask.x2 !== selectedTask.x2 || changedTask.actualx2 !== selectedTask.actualx2;
 
         if (isChanged) {
           if (rtl) {
-            changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
+            if (type == "planned") changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
+            if (type == "actual") changedTask.actualStart = dateByX(newX2, selectedTask.actualx2, selectedTask.actualStart, xStep, timeStep);
           } else {
-            changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+            if (type == "planned") changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+            if (type == "actual") changedTask.actualEnd = dateByX(newX2, selectedTask.actualx2, selectedTask.actualEnd, xStep, timeStep);
           }
 
-          var _progressWithByParams4 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
-              _progressWidth2 = _progressWithByParams4[0],
-              _progressX2 = _progressWithByParams4[1];
+          var _progressWithByParams3 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
+              _progressWidth = _progressWithByParams3[0],
+              _progressX = _progressWithByParams3[1];
 
-          changedTask.progressWidth = _progressWidth2;
-          changedTask.progressX = _progressX2;
+          changedTask.progressWidth = _progressWidth;
+          changedTask.progressX = _progressX;
         }
 
         break;
@@ -1459,24 +1472,27 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
 
     case "move":
       {
-        var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
-            newMoveX1 = _moveByX[0],
-            newMoveX2 = _moveByX[1];
+        var _ref = type == "planned" ? moveByX(svgX - initEventX1Delta, xStep, selectedTask) : moveByActualX(svgX - initEventX1Delta, xStep, selectedTask),
+            newMoveX1 = _ref[0],
+            newMoveX2 = _ref[1];
 
-        isChanged = newMoveX1 !== selectedTask.x1;
+        if (type == "planned") isChanged = newMoveX1 !== selectedTask.x1;
+        if (type == "actual") isChanged = newMoveX1 !== selectedTask.actualx1;
 
         if (isChanged) {
-          changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-          changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-          changedTask.x1 = newMoveX1;
-          changedTask.x2 = newMoveX2;
-
-          var _progressWithByParams5 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
-              _progressWidth3 = _progressWithByParams5[0],
-              _progressX3 = _progressWithByParams5[1];
+          if (type == "planned") {
+            changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+            changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+            changedTask.x1 = newMoveX1;
+            changedTask.x2 = newMoveX2;
+          }
 
-          changedTask.progressWidth = _progressWidth3;
-          changedTask.progressX = _progressX3;
+          if (type == "actual") {
+            changedTask.actualStart = dateByX(newMoveX1, selectedTask.actualx1, selectedTask.actualStart, xStep, timeStep);
+            changedTask.actualEnd = dateByX(newMoveX2, selectedTask.actualx2, selectedTask.actualEnd, xStep, timeStep);
+            changedTask.actualx1 = newMoveX1;
+            changedTask.actualx2 = newMoveX2;
+          }
         }
 
         break;
@@ -1497,9 +1513,9 @@ var handleTaskBySVGMouseEventForMilestone = function handleTaskBySVGMouseEventFo
   switch (action) {
     case "move":
       {
-        var _moveByX2 = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
-            newMoveX1 = _moveByX2[0],
-            newMoveX2 = _moveByX2[1];
+        var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
+            newMoveX1 = _moveByX[0],
+            newMoveX2 = _moveByX[1];
 
         isChanged = newMoveX1 !== selectedTask.x1;
 
@@ -1582,8 +1598,7 @@ var sortTasks = function sortTasks(taskA, taskB) {
 var BarDisplay = function BarDisplay(_ref) {
   var x = _ref.x,
       y = _ref.y,
-      actualX1 = _ref.actualX1,
-      actualX2 = _ref.actualX2,
+      type = _ref.type,
       width = _ref.width,
       height = _ref.height,
       isSelected = _ref.isSelected,
@@ -1601,31 +1616,41 @@ var BarDisplay = function BarDisplay(_ref) {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 
-  return React__default.createElement("g", {
+  if (type == "planned") return React__default.createElement("g", {
     onMouseDown: onMouseDown
   }, React__default.createElement("rect", {
     x: x,
     width: width,
     y: y,
-    height: height / 2,
+    height: height,
     ry: barCornerRadius,
     rx: barCornerRadius,
     fill: getBarColor(),
     strokeWidth: 2,
     stroke: styles.criticalPathColor
   }), React__default.createElement("rect", {
-    x: actualX1,
-    width: actualX2 - actualX1,
-    y: y + height / 2,
-    height: height / 2,
+    x: progressX,
+    width: progressWidth,
+    y: y,
+    height: height,
+    ry: barCornerRadius,
+    rx: barCornerRadius,
+    fill: getProcessColor()
+  }));else return React__default.createElement("g", {
+    onMouseDown: onMouseDown
+  }, React__default.createElement("rect", {
+    x: x,
+    width: width,
+    y: y,
+    height: height,
     ry: barCornerRadius,
     rx: barCornerRadius,
     fill: styles.taskProgressColor
   }), React__default.createElement("rect", {
     x: progressX,
     width: progressWidth,
-    y: y + height / 2,
-    height: height / 2,
+    y: y,
+    height: height,
     ry: barCornerRadius,
     rx: barCornerRadius,
     fill: getProcessColor()
@@ -1664,29 +1689,29 @@ var Bar = function Bar(_ref) {
       isProgressChangeable = _ref.isProgressChangeable,
       isDateChangeable = _ref.isDateChangeable,
       rtl = _ref.rtl,
+      type = _ref.type,
       onEventStart = _ref.onEventStart,
       isSelected = _ref.isSelected;
   var progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
-  var handleHeight = task.height - 2;
-  return React__default.createElement("g", {
+  var handleHeight = task.height / 2 - 1;
+  if (type == "planned") return React__default.createElement("g", {
     className: styles$6.barWrapper,
     tabIndex: 0
   }, React__default.createElement(BarDisplay, {
     x: task.x1,
     y: task.y,
-    actualX1: task.actualx1,
-    actualX2: task.actualx2,
+    type: type,
     startProgressWidth: task.progressStartWidth,
     endProgressWidth: task.progressEndWidth,
     width: task.x2 - task.x1,
-    height: task.height,
+    height: task.height / 2,
     progressX: task.progressX,
     progressWidth: task.progressWidth,
     barCornerRadius: task.barCornerRadius,
     styles: task.styles,
     isSelected: isSelected,
     onMouseDown: function onMouseDown(e) {
-      isDateChangeable && onEventStart("move", task, e);
+      isDateChangeable && onEventStart("move", task, e, "planned");
     }
   }), React__default.createElement("g", {
     className: "handleGroup"
@@ -1697,7 +1722,7 @@ var Bar = function Bar(_ref) {
     height: handleHeight,
     barCornerRadius: task.barCornerRadius,
     onMouseDown: function onMouseDown(e) {
-      onEventStart("start", task, e);
+      onEventStart("start", task, e, "planned");
     }
   }), React__default.createElement(BarDateHandle, {
     x: task.x2 - task.handleWidth - 1,
@@ -1706,18 +1731,63 @@ var Bar = function Bar(_ref) {
     height: handleHeight,
     barCornerRadius: task.barCornerRadius,
     onMouseDown: function onMouseDown(e) {
-      onEventStart("end", task, e);
+      onEventStart("end", task, e, "planned");
     }
   })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
     progressPoint: progressPoint,
     onMouseDown: function onMouseDown(e) {
-      onEventStart("progress", task, e);
+      onEventStart("progress", task, e, "planned");
+    }
+  })));else return React__default.createElement("g", {
+    className: styles$6.barWrapper,
+    tabIndex: 0
+  }, React__default.createElement(BarDisplay, {
+    x: task.actualx1,
+    y: task.y + task.height / 2,
+    type: type,
+    startProgressWidth: task.progressStartWidth,
+    endProgressWidth: task.progressEndWidth,
+    width: task.actualx2 - task.actualx1,
+    height: task.height / 2,
+    progressX: task.progressX,
+    progressWidth: task.progressWidth,
+    barCornerRadius: task.barCornerRadius,
+    styles: task.styles,
+    isSelected: isSelected,
+    onMouseDown: function onMouseDown(e) {
+      isDateChangeable && onEventStart("move", task, e, "actual");
+    }
+  }), React__default.createElement("g", {
+    className: "handleGroup"
+  }, isDateChangeable && React__default.createElement("g", null, React__default.createElement(BarDateHandle, {
+    x: task.actualx1 + 1,
+    y: task.y + task.height / 2 + 1,
+    width: task.handleWidth,
+    height: handleHeight,
+    barCornerRadius: task.barCornerRadius,
+    onMouseDown: function onMouseDown(e) {
+      onEventStart("start", task, e, "actual");
+    }
+  }), React__default.createElement(BarDateHandle, {
+    x: task.actualx2 - task.handleWidth - 1,
+    y: task.y + task.height / 2 + 1,
+    width: task.handleWidth,
+    height: handleHeight,
+    barCornerRadius: task.barCornerRadius,
+    onMouseDown: function onMouseDown(e) {
+      onEventStart("end", task, e, "actual");
+    }
+  })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
+    progressPoint: progressPoint,
+    onMouseDown: function onMouseDown(e) {
+      onEventStart("progress", task, e, "actual");
     }
   })));
 };
 
 var BarSmall = function BarSmall(_ref) {
   var task = _ref.task,
+      type = _ref.type,
       isProgressChangeable = _ref.isProgressChangeable,
       isDateChangeable = _ref.isDateChangeable,
       onEventStart = _ref.onEventStart,
@@ -1729,8 +1799,7 @@ var BarSmall = function BarSmall(_ref) {
   }, React__default.createElement(BarDisplay, {
     x: task.x1,
     y: task.y,
-    actualX1: task.actualx1,
-    actualX2: task.actualx2,
+    type: type,
     startProgressWidth: task.progressStartWidth,
     endProgressWidth: task.progressEndWidth,
     width: task.x2 - task.x1,
@@ -1842,35 +1911,39 @@ var TaskItem = function TaskItem(props) {
       isSelected = _props.isSelected,
       onEventStart = _props.onEventStart;
 
-  var _useState = React.useState(React__default.createElement("div", null)),
+  var _useState = React.useState([React__default.createElement("div", null)]),
       taskItem = _useState[0],
       setTaskItem = _useState[1];
 
   React.useEffect(function () {
     switch (task.typeInternal) {
       case "milestone":
-        setTaskItem(React__default.createElement(Milestone, Object.assign({}, props)));
+        setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);
         break;
 
       case "project":
-        setTaskItem(React__default.createElement(Project, Object.assign({}, props)));
+        setTaskItem([React__default.createElement(Project, Object.assign({}, props))]);
         break;
 
       case "smalltask":
-        setTaskItem(React__default.createElement(BarSmall, Object.assign({}, props)));
+        setTaskItem([React__default.createElement(BarSmall, Object.assign({}, props))]);
         break;
 
       default:
-        setTaskItem(React__default.createElement(Bar, Object.assign({}, props)));
+        setTaskItem([React__default.createElement(Bar, Object.assign({}, props, {
+          type: "planned"
+        })), React__default.createElement(Bar, Object.assign({}, props, {
+          type: "actual"
+        }))]);
         break;
     }
   }, [task, isSelected]);
-  return React__default.createElement("g", {
+  return React__default.createElement("g", null, React__default.createElement("g", {
     onKeyDown: function onKeyDown(e) {
       switch (e.key) {
         case "Delete":
           {
-            if (isDelete) onEventStart("delete", task, e);
+            if (isDelete) onEventStart("delete", task, e, "planned");
             break;
           }
       }
@@ -1878,21 +1951,42 @@ var TaskItem = function TaskItem(props) {
       e.stopPropagation();
     },
     onMouseEnter: function onMouseEnter(e) {
-      onEventStart("mouseenter", task, e);
+      onEventStart("mouseenter", task, e, "planned");
     },
     onMouseLeave: function onMouseLeave(e) {
-      onEventStart("mouseleave", task, e);
+      onEventStart("mouseleave", task, e, "planned");
     },
     onDoubleClick: function onDoubleClick(e) {
-      onEventStart("dblclick", task, e);
+      onEventStart("dblclick", task, e, "planned");
     },
     onClick: function onClick(e) {
-      onEventStart("click", task, e);
+      onEventStart("click", task, e, "planned");
+    }
+  }, taskItem[0]), React__default.createElement("g", {
+    onKeyDown: function onKeyDown(e) {
+      switch (e.key) {
+        case "Delete":
+          {
+            if (isDelete) onEventStart("delete", task, e, "actual");
+            break;
+          }
+      }
+
+      e.stopPropagation();
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      onEventStart("mouseenter", task, e, "actual");
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      onEventStart("mouseleave", task, e, "actual");
+    },
+    onDoubleClick: function onDoubleClick(e) {
+      onEventStart("dblclick", task, e, "actual");
     },
-    onFocus: function onFocus() {
-      onEventStart("select", task);
+    onClick: function onClick(e) {
+      onEventStart("click", task, e, "actual");
     }
-  }, taskItem);
+  }, taskItem[1]));
 };
 
 var TaskGanttContent = function TaskGanttContent(_ref) {
@@ -1948,7 +2042,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
         point.x = event.clientX;
         var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
 
-        var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, xStep, timeStep, initEventX1Delta, rtl),
+        var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, ganttEvent.type, xStep, timeStep, initEventX1Delta, rtl),
             isChanged = _handleTaskBySVGMouse.isChanged,
             changedTask = _handleTaskBySVGMouse.changedTask;
 
@@ -1977,16 +2071,17 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
         var action = ganttEvent.action,
             originalSelectedTask = ganttEvent.originalSelectedTask,
-            changedTask = ganttEvent.changedTask;
+            changedTask = ganttEvent.changedTask,
+            type = ganttEvent.type;
         if (!changedTask || !point || !(svg !== null && svg !== void 0 && svg.current) || !originalSelectedTask) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
         var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
 
-        var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, xStep, timeStep, initEventX1Delta, rtl),
+        var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, type, xStep, timeStep, initEventX1Delta, rtl),
             newChangedTask = _handleTaskBySVGMouse2.changedTask;
 
-        var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.progress !== newChangedTask.progress;
+        var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
         svg.current.removeEventListener("mousemove", handleMouseMove);
         svg.current.removeEventListener("mouseup", handleMouseUp);
         setGanttEvent({
@@ -2042,7 +2137,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
 
-  var handleBarEventStart = function handleBarEventStart(action, task, event) {
+  var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
     try {
       return Promise.resolve(function () {
         if (!event) {
@@ -2082,7 +2177,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
               setGanttEvent({
                 action: action,
                 changedTask: task,
-                originalSelectedTask: task
+                originalSelectedTask: task,
+                type: type
               });
             }
           } else if (action === "mouseleave") {
@@ -2101,17 +2197,19 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
             if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
             point.x = event.clientX;
             var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
-            setInitEventX1Delta(cursor.x - task.x1);
+            if (type == "planned") setInitEventX1Delta(cursor.x - task.x1);else if (type == "actual") setInitEventX1Delta(cursor.x - task.actualx1);
             setGanttEvent({
               action: action,
               changedTask: task,
-              originalSelectedTask: task
+              originalSelectedTask: task,
+              type: type
             });
           } else {
             setGanttEvent({
               action: action,
               changedTask: task,
-              originalSelectedTask: task
+              originalSelectedTask: task,
+              type: type
             });
           }
         }();
@@ -2712,6 +2810,7 @@ var Gantt = function Gantt(_ref) {
     scrollX: scrollX,
     scrollY: scrollY,
     task: ganttEvent.changedTask,
+    type: ganttEvent.type,
     headerHeight: headerHeight,
     taskListWidth: taskListWidth,
     TooltipContent: TooltipContent,