gantt-task-react-powern 0.6.22 → 0.6.24

package/dist/components/gantt/task-gantt-content.d.ts

@@ -26,5 +26,7 @@ export declare type TaskGanttContentProps = {
     setGanttEvent: (value: GanttEvent) => void;
     setFailedTask: (value: BarTask | null) => void;
     setSelectedTask: (taskId: string) => void;
+    onBarTasksUpdate?: (task: BarTask) => void;
+    sliderTime?: number;
 } & EventOption;
 export declare const TaskGanttContent: React.FC<TaskGanttContentProps>;

package/dist/components/other/tooltip.d.ts

@@ -22,6 +22,7 @@ export declare type TooltipProps = {
         fontFamily: string;
         type: string;
     }>;
+    isDragging?: boolean;
 };
 export declare const Tooltip: React.FC<TooltipProps>;
 export declare const StandardTooltipContent: React.FC<{

package/dist/index.js

@@ -722,7 +722,8 @@ var Tooltip = function Tooltip(_ref) {
       fontFamily = _ref.fontFamily,
       headerHeight = _ref.headerHeight,
       taskListWidth = _ref.taskListWidth,
-      TooltipContent = _ref.TooltipContent;
+      TooltipContent = _ref.TooltipContent,
+      isDragging = _ref.isDragging;
   var tooltipRef = React.useRef(null);
 
   var _useState = React.useState(0),
@@ -740,6 +741,14 @@ var Tooltip = function Tooltip(_ref) {
       var newRelatedY = task.index * rowHeight - scrollY + headerHeight;
       var newRelatedX;
 
+      if (isDragging) {
+        newRelatedX = taskListWidth + svgContainerWidth - tooltipWidth - 10;
+        newRelatedY = headerHeight + 5;
+        setRelatedY(newRelatedY);
+        setRelatedX(newRelatedX);
+        return;
+      }
+
       if (rtl) {
         newRelatedX = task.x1 - arrowIndent * 1.5 - tooltipWidth - scrollX;
 
@@ -779,7 +788,7 @@ var Tooltip = function Tooltip(_ref) {
       setRelatedY(newRelatedY);
       setRelatedX(newRelatedX);
     }
-  }, [tooltipRef, task, arrowIndent, scrollX, scrollY, headerHeight, taskListWidth, rowHeight, svgContainerHeight, svgContainerWidth, rtl]);
+  }, [tooltipRef, task, arrowIndent, scrollX, scrollY, headerHeight, taskListWidth, rowHeight, svgContainerHeight, svgContainerWidth, rtl, isDragging]);
   return React__default.createElement("div", {
     ref: tooltipRef,
     className: relatedX ? styles$2.tooltipDetailsContainer : styles$2.tooltipDetailsContainerHidden,
@@ -795,6 +804,8 @@ var Tooltip = function Tooltip(_ref) {
   }));
 };
 var StandardTooltipContent = function StandardTooltipContent(_ref2) {
+  var _task$plannedDuration, _task$actualDuration;
+
   var task = _ref2.task,
       fontSize = _ref2.fontSize,
       fontFamily = _ref2.fontFamily,
@@ -803,6 +814,8 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     fontSize: fontSize,
     fontFamily: fontFamily
   };
+  var computedPlannedDuration = task.start && task.end && task.end.getTime() - task.start.getTime() > 0 ? Math.max(1, Math.round((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24))) : (_task$plannedDuration = task.plannedDuration) != null ? _task$plannedDuration : 0;
+  var computedActualDuration = task.actualStart && task.actualEnd && task.actualEnd.getTime() - task.actualStart.getTime() > 0 ? Math.max(1, Math.round((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24))) : (_task$actualDuration = task.actualDuration) != null ? _task$actualDuration : 0;
   if (type == "planned") return React__default.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
     style: style
@@ -812,7 +825,7 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     }
   }, task.name + ": Planned dates: "), React__default.createElement("b", null, task.start.getMonth() + 1 + "/" + task.start.getDate() + "/" + task.start.getFullYear() + " - " + (task.end.getMonth() + 1) + "/" + task.end.getDate() + "/" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, "Duration: " + ~~Math.round((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
+  }, "Duration: " + computedPlannedDuration + " 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,
@@ -823,7 +836,7 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     }
   }, task.name + ": Actual dates: "), React__default.createElement("b", null, task.actualStart.getMonth() + 1 + "/" + task.actualStart.getDate() + "/" + task.actualStart.getFullYear() + " - " + (task.actualEnd.getMonth() + 1) + "/" + task.actualEnd.getDate() + "/" + task.actualEnd.getFullYear()), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, "Duration: " + ~~Math.round((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React__default.createElement("p", {
+  }, "Duration: " + computedActualDuration + " day(s)"), React__default.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
   }, !!task.progress && "Progress: " + task.progress + " %"));
 };
@@ -3054,6 +3067,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       setGanttEvent = _ref.setGanttEvent,
       setFailedTask = _ref.setFailedTask,
       setSelectedTask = _ref.setSelectedTask,
+      onBarTasksUpdate = _ref.onBarTasksUpdate,
       onDateChange = _ref.onDateChange,
       onProgressChange = _ref.onProgressChange,
       onDoubleClick = _ref.onDoubleClick,
@@ -3062,7 +3076,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       onCalendarError = _ref.onCalendarError,
       projectCalendar = _ref.projectCalendar,
       visibleStartY = _ref.visibleStartY,
-      visibleEndY = _ref.visibleEndY;
+      visibleEndY = _ref.visibleEndY,
+      sliderTime = _ref.sliderTime;
   var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
 
   var _useState = React.useState(0),
@@ -3097,35 +3112,98 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
             changedTask = _handleTaskBySVGMouse.changedTask;
 
         if (isChanged) {
-          var finalTask = changedTask;
+          var finalTask = _extends({}, changedTask);
+
+          var dragType = ganttEvent.type;
 
           if (changedTask.calender && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
-            finalTask = _extends({}, changedTask);
             var cal = finalTask.calender;
 
-            if (ganttEvent.action === "end") {
-              var snapped = snapToWorkingTime(finalTask.end, cal, "forward");
-              finalTask.end = snapped;
-              finalTask.x2 = taskXCoordinate(snapped, dates, columnWidth);
-            } else if (ganttEvent.action === "start") {
-              var _snapped = snapToWorkingTime(finalTask.start, cal, "forward");
+            if (dragType === "actual") {
+              if (ganttEvent.action === "end") {
+                var snapped = snapToWorkingTime(finalTask.actualEnd, cal, "forward");
+                finalTask.actualEnd = snapped;
+                finalTask.actualx2 = taskXCoordinate(snapped, dates, columnWidth);
+              } else if (ganttEvent.action === "start") {
+                var _snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+
+                finalTask.actualStart = _snapped;
+                finalTask.actualx1 = taskXCoordinate(_snapped, dates, columnWidth);
+              } else {
+                var _snapped2 = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+
+                var delta = _snapped2.getTime() - finalTask.actualStart.getTime();
+                finalTask.actualStart = _snapped2;
+                finalTask.actualEnd = new Date(finalTask.actualEnd.getTime() + delta);
+                finalTask.actualx1 = taskXCoordinate(finalTask.actualStart, dates, columnWidth);
+                finalTask.actualx2 = taskXCoordinate(finalTask.actualEnd, dates, columnWidth);
+              }
+
+              var actEnd = addToDate(startOfDate(finalTask.actualEnd, "day"), 1, "day");
+              var actIntervals = getWorkingIntervals(finalTask.actualStart, actEnd, cal);
+              var actSegs = actIntervals.map(function (iv) {
+                return {
+                  x1: taskXCoordinate(iv.start, dates, columnWidth),
+                  x2: taskXCoordinate(iv.end, dates, columnWidth)
+                };
+              }).filter(function (s) {
+                return s.x2 > s.x1;
+              });
+              finalTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
+              var actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+              finalTask.actualDuration = actDays;
+            } else {
+              if (ganttEvent.action === "end") {
+                var _snapped3 = snapToWorkingTime(finalTask.end, cal, "forward");
+
+                finalTask.end = _snapped3;
+                finalTask.x2 = taskXCoordinate(_snapped3, dates, columnWidth);
+              } else if (ganttEvent.action === "start") {
+                var _snapped4 = snapToWorkingTime(finalTask.start, cal, "forward");
+
+                finalTask.start = _snapped4;
+                finalTask.x1 = taskXCoordinate(_snapped4, dates, columnWidth);
+              } else {
+                var _snapped5 = snapToWorkingTime(finalTask.start, cal, "forward");
+
+                var _delta = _snapped5.getTime() - finalTask.start.getTime();
+
+                finalTask.start = _snapped5;
+                finalTask.end = new Date(finalTask.end.getTime() + _delta);
+                finalTask.x1 = taskXCoordinate(finalTask.start, dates, columnWidth);
+                finalTask.x2 = taskXCoordinate(finalTask.end, dates, columnWidth);
+              }
+
+              var planEnd = addToDate(startOfDate(finalTask.end, "day"), 1, "day");
+              var planIntervals = getWorkingIntervals(finalTask.start, planEnd, cal);
+              var planSegs = planIntervals.map(function (iv) {
+                return {
+                  x1: taskXCoordinate(iv.start, dates, columnWidth),
+                  x2: taskXCoordinate(iv.end, dates, columnWidth)
+                };
+              }).filter(function (s) {
+                return s.x2 > s.x1;
+              });
+              finalTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
+              var planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+              finalTask.plannedDuration = planDays;
+            }
+          } else {
+            if (dragType === "actual") {
+              var _actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
 
-              finalTask.start = _snapped;
-              finalTask.x1 = taskXCoordinate(_snapped, dates, columnWidth);
+              finalTask.actualDuration = _actDays;
             } else {
-              var _snapped2 = snapToWorkingTime(finalTask.start, cal, "forward");
+              var _planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
 
-              var delta = _snapped2.getTime() - finalTask.start.getTime();
-              finalTask.start = _snapped2;
-              finalTask.end = new Date(finalTask.end.getTime() + delta);
-              finalTask.x1 = taskXCoordinate(finalTask.start, dates, columnWidth);
-              finalTask.x2 = taskXCoordinate(finalTask.end, dates, columnWidth);
+              finalTask.plannedDuration = _planDays;
             }
           }
 
           setGanttEvent({
             action: ganttEvent.action,
-            changedTask: finalTask
+            changedTask: finalTask,
+            type: dragType
           });
         }
 
@@ -3158,56 +3236,123 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
             newChangedTask = _handleTaskBySVGMouse2.changedTask;
 
         var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
+        var dropType = type;
 
         if (newChangedTask.calender && (action === "move" || action === "end" || action === "start")) {
           var cal = newChangedTask.calender;
 
-          if (action === "end") {
-            var snappedEnd = snapToWorkingTime(newChangedTask.end, cal, "forward");
-            newChangedTask.end = snappedEnd;
-            newChangedTask.x2 = taskXCoordinate(snappedEnd, dates, columnWidth);
-          } else if (action === "start") {
-            var snappedStart = snapToWorkingTime(newChangedTask.start, cal, "forward");
+          if (dropType === "actual") {
+            if (action === "end") {
+              var snappedEnd = snapToWorkingTime(newChangedTask.actualEnd, cal, "forward");
+              newChangedTask.actualEnd = snappedEnd;
+              newChangedTask.actualx2 = taskXCoordinate(snappedEnd, dates, columnWidth);
+            } else if (action === "start") {
+              var snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+
+              if (snappedStart >= newChangedTask.actualEnd) {
+                setFailedTask(originalSelectedTask);
+                onCalendarError === null || onCalendarError === void 0 ? void 0 : onCalendarError(newChangedTask, "No working time in selected range");
+                setGanttEvent({
+                  action: ""
+                });
+                setIsMoving(false);
+                svg.current.removeEventListener("mousemove", handleMouseMove);
+                svg.current.removeEventListener("mouseup", handleMouseUp);
+                return Promise.resolve();
+              }
 
-            if (snappedStart >= newChangedTask.end) {
-              setFailedTask(originalSelectedTask);
-              onCalendarError === null || onCalendarError === void 0 ? void 0 : onCalendarError(newChangedTask, "No working time in selected range");
-              setGanttEvent({
-                action: ""
-              });
-              setIsMoving(false);
-              svg.current.removeEventListener("mousemove", handleMouseMove);
-              svg.current.removeEventListener("mouseup", handleMouseUp);
-              return Promise.resolve();
+              newChangedTask.actualStart = snappedStart;
+              newChangedTask.actualx1 = taskXCoordinate(snappedStart, dates, columnWidth);
+            } else {
+              var _snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+
+              var delta = _snappedStart.getTime() - newChangedTask.actualStart.getTime();
+              newChangedTask.actualStart = _snappedStart;
+              newChangedTask.actualEnd = new Date(newChangedTask.actualEnd.getTime() + delta);
+              newChangedTask.actualx1 = taskXCoordinate(_snappedStart, dates, columnWidth);
+              newChangedTask.actualx2 = taskXCoordinate(newChangedTask.actualEnd, dates, columnWidth);
             }
 
-            newChangedTask.start = snappedStart;
-            newChangedTask.x1 = taskXCoordinate(snappedStart, dates, columnWidth);
+            var actEnd = addToDate(startOfDate(newChangedTask.actualEnd, "day"), 1, "day");
+            var actIntervals = getWorkingIntervals(newChangedTask.actualStart, actEnd, cal);
+            var actSegs = actIntervals.map(function (iv) {
+              return {
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              };
+            }).filter(function (s) {
+              return s.x2 > s.x1;
+            });
+            newChangedTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
+            var actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+            newChangedTask.actualDuration = actDays;
           } else {
-            var _snappedStart = snapToWorkingTime(newChangedTask.start, cal, "forward");
+            if (action === "end") {
+              var _snappedEnd = snapToWorkingTime(newChangedTask.end, cal, "forward");
+
+              newChangedTask.end = _snappedEnd;
+              newChangedTask.x2 = taskXCoordinate(_snappedEnd, dates, columnWidth);
+            } else if (action === "start") {
+              var _snappedStart2 = snapToWorkingTime(newChangedTask.start, cal, "forward");
+
+              if (_snappedStart2 >= newChangedTask.end) {
+                setFailedTask(originalSelectedTask);
+                onCalendarError === null || onCalendarError === void 0 ? void 0 : onCalendarError(newChangedTask, "No working time in selected range");
+                setGanttEvent({
+                  action: ""
+                });
+                setIsMoving(false);
+                svg.current.removeEventListener("mousemove", handleMouseMove);
+                svg.current.removeEventListener("mouseup", handleMouseUp);
+                return Promise.resolve();
+              }
+
+              newChangedTask.start = _snappedStart2;
+              newChangedTask.x1 = taskXCoordinate(_snappedStart2, dates, columnWidth);
+            } else {
+              var _snappedStart3 = snapToWorkingTime(newChangedTask.start, cal, "forward");
+
+              var _delta2 = _snappedStart3.getTime() - newChangedTask.start.getTime();
 
-            var delta = _snappedStart.getTime() - newChangedTask.start.getTime();
-            newChangedTask.start = _snappedStart;
-            newChangedTask.end = new Date(newChangedTask.end.getTime() + delta);
-            newChangedTask.x1 = taskXCoordinate(_snappedStart, dates, columnWidth);
-            newChangedTask.x2 = taskXCoordinate(newChangedTask.end, dates, columnWidth);
+              newChangedTask.start = _snappedStart3;
+              newChangedTask.end = new Date(newChangedTask.end.getTime() + _delta2);
+              newChangedTask.x1 = taskXCoordinate(_snappedStart3, dates, columnWidth);
+              newChangedTask.x2 = taskXCoordinate(newChangedTask.end, dates, columnWidth);
+            }
+
+            var planEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
+            var planIntervals = getWorkingIntervals(newChangedTask.start, planEnd, cal);
+            var planSegs = planIntervals.map(function (iv) {
+              return {
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              };
+            }).filter(function (s) {
+              return s.x2 > s.x1;
+            });
+            newChangedTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
+            var planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+            newChangedTask.plannedDuration = planDays;
           }
+        } else if (action === "move" || action === "end" || action === "start") {
+          if (dropType === "actual") {
+            var _actDays2 = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
 
-          var snapEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
-          var newIntervals = getWorkingIntervals(newChangedTask.start, snapEnd, cal);
-          var segs = newIntervals.map(function (iv) {
-            return {
-              x1: taskXCoordinate(iv.start, dates, columnWidth),
-              x2: taskXCoordinate(iv.end, dates, columnWidth)
-            };
-          }).filter(function (s) {
-            return s.x2 > s.x1;
-          });
-          newChangedTask.plannedSegments = segs.length > 0 ? segs : undefined;
+            newChangedTask.actualDuration = _actDays2;
+          } else {
+            var _planDays2 = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+
+            newChangedTask.plannedDuration = _planDays2;
+          }
         }
 
         svg.current.removeEventListener("mousemove", handleMouseMove);
         svg.current.removeEventListener("mouseup", handleMouseUp);
+
+        if (onBarTasksUpdate && isNotLikeOriginal) {
+          onBarTasksUpdate(newChangedTask);
+        }
+
         setGanttEvent({
           action: ""
         });
@@ -3259,7 +3404,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       svg.current.addEventListener("mouseup", handleMouseUp);
       setIsMoving(true);
     }
-  }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, onCalendarError, projectCalendar, svg, isMoving, point, rtl, setFailedTask, setGanttEvent, dates, columnWidth]);
+  }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, onCalendarError, projectCalendar, svg, isMoving, point, rtl, setFailedTask, setGanttEvent, onBarTasksUpdate, dates, columnWidth]);
 
   var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
     try {
@@ -3345,7 +3490,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
   var getArrows = function getArrows(isCritical, criticalPathType) {
     return tasks.flatMap(function (_task) {
-      var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+      var _live = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? ganttEvent.changedTask : _task;
+
+      var task = _live.start.getTime() > 0 && _live.end.getTime() > 0 ? _live : undefined;
 
       if (!task) {
         return [];
@@ -3387,9 +3534,32 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     });
   };
 
+  var lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
+  var totalHeight = tasks.length * rowHeight;
+  React.useEffect(function () {
+    if (sliderTime !== undefined) {
+      console.log('Vertical line debug:', {
+        sliderTime: new Date(sliderTime).toLocaleString(),
+        lineX: lineX,
+        totalHeight: totalHeight,
+        tasksCount: tasks.length,
+        columnWidth: columnWidth,
+        datesRange: dates.length > 0 ? dates[0].toLocaleString() + " - " + dates[dates.length - 1].toLocaleString() : 'empty'
+      });
+    }
+  }, [sliderTime, lineX, totalHeight, tasks.length, dates, columnWidth]);
   return React__default.createElement("g", {
     className: "content"
-  }, React__default.createElement("g", {
+  }, lineX !== null && lineX > 0 && React__default.createElement("line", {
+    x1: lineX,
+    y1: 0,
+    x2: lineX,
+    y2: totalHeight,
+    stroke: "red",
+    strokeWidth: 2,
+    pointerEvents: "none",
+    opacity: 0.8
+  }), React__default.createElement("g", {
     className: "arrows"
   }, getArrows(false), getArrows(true, "secondary"), getArrows(true, "primary")), React__default.createElement("g", {
     className: "bar",
@@ -3397,8 +3567,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     fontSize: fontSize
   }, virtualItems.map(function (vi) {
     var _task = tasks[vi.index];
-
-    var task = _extends({}, _task, {
+    var task = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? _extends({}, ganttEvent.changedTask, {
+      y: 0
+    }) : _extends({}, _task, {
       y: 0
     });
 
@@ -3644,7 +3815,8 @@ var Gantt = function Gantt(_ref) {
       _ref$shouldNotShowLoa = _ref.shouldNotShowLoadingOverlay,
       shouldNotShowLoadingOverlay = _ref$shouldNotShowLoa === void 0 ? true : _ref$shouldNotShowLoa,
       projectCalendar = _ref.projectCalendar,
-      onCalendarError = _ref.onCalendarError;
+      onCalendarError = _ref.onCalendarError,
+      sliderTime = _ref.sliderTime;
   var effectiveCalendar = (_tasks$find$calender = (_tasks$find = tasks.find(function (t) {
     return t.calender;
   })) === null || _tasks$find === void 0 ? void 0 : _tasks$find.calender) != null ? _tasks$find$calender : projectCalendar;
@@ -3750,6 +3922,14 @@ var Gantt = function Gantt(_ref) {
       ganttEvent = _useState9[0],
       setGanttEvent = _useState9[1];
 
+  var handleBarTasksUpdate = function handleBarTasksUpdate(task) {
+    setBarTasks(function (prev) {
+      return prev.map(function (t) {
+        return t.id === task.id ? task : t;
+      });
+    });
+  };
+
   var taskHeight = React.useMemo(function () {
     return rowHeight * barFill / 100;
   }, [rowHeight, barFill]);
@@ -3894,17 +4074,6 @@ var Gantt = function Gantt(_ref) {
         setBarTasks(barTasks.filter(function (t) {
           return t.id !== changedTask.id;
         }));
-      } else if (action === "move" || action === "end" || action === "start" || action === "progress") {
-        var prevStateTask = barTasks.find(function (t) {
-          return t.id === changedTask.id;
-        });
-
-        if (prevStateTask && (prevStateTask.start.getTime() >= 0 && prevStateTask.start.getTime() !== changedTask.start.getTime() || prevStateTask.end.getTime() >= 0 && prevStateTask.end.getTime() !== changedTask.end.getTime() || (prevStateTask.actualStart.getTime() >= 0 && prevStateTask.actualStart.getTime()) !== changedTask.actualStart.getTime() || prevStateTask.actualEnd.getTime() >= 0 && prevStateTask.actualEnd.getTime() !== changedTask.actualEnd.getTime() || prevStateTask.progress !== changedTask.progress)) {
-          var newTaskList = barTasks.map(function (t) {
-            return t.id === changedTask.id ? changedTask : t;
-          });
-          setBarTasks(newTaskList);
-        }
       }
     }
   }, [ganttEvent, barTasks]);
@@ -4176,6 +4345,7 @@ var Gantt = function Gantt(_ref) {
     setGanttEvent: setGanttEvent,
     setFailedTask: setFailedTask,
     setSelectedTask: handleSelectedTask,
+    onBarTasksUpdate: handleBarTasksUpdate,
     onDateChange: onDateChange,
     onProgressChange: onProgressChange,
     onDoubleClick: onDoubleClick,
@@ -4184,14 +4354,20 @@ var Gantt = function Gantt(_ref) {
     onCalendarError: onCalendarError,
     projectCalendar: effectiveCalendar,
     visibleStartY: visibleStartY,
-    visibleEndY: visibleEndY
+    visibleEndY: visibleEndY,
+    sliderTime: sliderTime
   };
+  var tableTasks = React.useMemo(function () {
+    return ganttEvent.changedTask ? barTasks.map(function (t) {
+      return t.id === ganttEvent.changedTask.id ? ganttEvent.changedTask : t;
+    }) : barTasks;
+  }, [barTasks, ganttEvent.changedTask]);
   var tableProps = {
     rowHeight: rowHeight,
     rowWidth: listCellWidth,
     fontFamily: fontFamily,
     fontSize: fontSize,
-    tasks: barTasks,
+    tasks: tableTasks,
     leafTasks: leafTasks,
     scheduleType: scheduleType,
     locale: locale,
@@ -4259,7 +4435,8 @@ var Gantt = function Gantt(_ref) {
     taskListWidth: taskListWidth,
     TooltipContent: TooltipContent,
     rtl: rtl,
-    svgWidth: svgWidth
+    svgWidth: svgWidth,
+    isDragging: ganttEvent.action === "move" || ganttEvent.action === "start" || ganttEvent.action === "end" || ganttEvent.action === "progress"
   }), React__default.createElement(VerticalScroll, {
     ganttFullHeight: ganttFullHeight,
     ganttHeight: ganttHeight,
@@ -4469,12 +4646,41 @@ function computeCriticalPath(taskID, taskMap) {
   taskMap[taskID].paths = [];
 
   for (var j = 0; j < dependents.length; j++) {
-    var depDuration = taskMap[dependents[j]].task.end.getTime() - taskMap[dependents[j]].task.start.getTime();
-    var overlap = Math.max(taskMap[taskID].end - taskMap[dependents[j]].task.start.getTime(), 0);
+    var depStart = taskMap[dependents[j]].task.start.getTime();
+    var depEnd = taskMap[dependents[j]].task.end.getTime();
+    var depDuration = depEnd - depStart;
+    var startWeek = Math.floor((depStart / 86400000 + 4) / 7);
+    var endWeek = Math.floor((depEnd / 86400000 + 4) / 7);
+    var offTime = 0;
+
+    for (var d = 0; d < ((_taskMap$dependents$j = taskMap[dependents[j]].task.calendar) === null || _taskMap$dependents$j === void 0 ? void 0 : (_taskMap$dependents$j2 = _taskMap$dependents$j.off_days) === null || _taskMap$dependents$j2 === void 0 ? void 0 : _taskMap$dependents$j2.length) || 0; d++) {
+      var _taskMap$dependents$j, _taskMap$dependents$j2;
+
+      for (var w = startWeek; w <= endWeek; w++) {
+        var dayOfTheWeek = taskMap[dependents[j]].task.calendar.off_days[d];
+        var offDay = 86400000 * (7 * w - 4 + dayOfTheWeek);
+
+        if (offDay >= depStart && offDay <= depEnd && (offDay > taskMap[taskID].end || taskMap[taskID].task.calendar.off_days.includes(dayOfTheWeek))) {
+          offTime += 86400000;
+        }
+      }
+    }
+
+    for (var h = 0; h < ((_taskMap$dependents$j3 = taskMap[dependents[j]].task.calendar) === null || _taskMap$dependents$j3 === void 0 ? void 0 : (_taskMap$dependents$j4 = _taskMap$dependents$j3.holidays) === null || _taskMap$dependents$j4 === void 0 ? void 0 : _taskMap$dependents$j4.length) || 0; h++) {
+      var _taskMap$dependents$j3, _taskMap$dependents$j4;
+
+      var holiday = taskMap[dependents[j]].task.calendar.holidays[h];
+
+      if (holiday >= depStart && holiday <= depEnd) {
+        offTime += 86400000;
+      }
+    }
+
+    var overlap = Math.max(taskMap[taskID].end - depStart, 0);
     var paths = taskMap[dependents[j]].paths;
 
     for (var k = 0; k < paths.length; k++) {
-      var totalDuration = taskMap[taskID].end - taskMap[taskID].start - overlap + paths[k].duration;
+      var totalDuration = taskMap[taskID].end - taskMap[taskID].start - overlap - offTime + paths[k].duration;
 
       if (taskMap[taskID].paths.length < 2) {
         taskMap[taskID].paths.push({
@@ -4497,7 +4703,7 @@ function computeCriticalPath(taskID, taskMap) {
     }
 
     if (paths.length === 0) {
-      var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap;
+      var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap - offTime;
 
       if (taskMap[taskID].paths.length < 2) {
         taskMap[taskID].paths.push({