gantt-task-react-powern 0.6.30 → 0.6.32

package/dist/helpers/date-helper.d.ts

@@ -5,6 +5,22 @@ declare type DateHelperScales = "year" | "quarter" | "month" | "day" | "hour" |
 export declare const getCachedDateTimeFormat: (locString: string | string[], opts?: DateTimeFormatOptions) => DateTimeFormat;
 export declare const addToDate: (date: Date, quantity: number, scale: DateHelperScales) => Date;
 export declare const startOfDate: (date: Date, scale: DateHelperScales) => Date;
+/**
+ * Default number of columns the chart aims to render across the chart pane
+ * for each view mode. The Gantt component sizes columns so that this many
+ * fit at the current pane width when the view mode is selected.
+ *
+ * Modes not listed (Hour / QuarterDay / HalfDay / Year) fall through to the
+ * legacy `columnWidth` default.
+ */
+export declare const VIEW_MODE_DEFAULT_VISIBLE_COUNT: Partial<Record<ViewMode, number>>;
+/**
+ * Maximum number of columns the chart will show at once, even when the user
+ * widens the chart pane with the resize bar. The Gantt component clamps
+ * column width upward so visible count never exceeds this — overflow becomes
+ * horizontal scroll.
+ */
+export declare const VIEW_MODE_MAX_VISIBLE_COUNT: Partial<Record<ViewMode, number>>;
 export declare const ganttDateRange: (tasks: Task[], viewMode: ViewMode, preStepsCount: number, quarterStart?: number) => Date[];
 export declare const seedDates: (startDate: Date, endDate: Date, viewMode: ViewMode) => Date[];
 export declare const getLocaleMonth: (date: Date, locale: string) => string;

package/dist/index.js

@@ -75,6 +75,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   ViewMode["Year"] = "Year";
 })(exports.ViewMode || (exports.ViewMode = {}));
 
+var _VIEW_MODE_DEFAULT_VI, _VIEW_MODE_MAX_VISIBL;
 var intlDTCache = {};
 var getCachedDateTimeFormat = function getCachedDateTimeFormat(locString, opts) {
   if (opts === void 0) {
@@ -116,6 +117,8 @@ var getFiscalQuarterStartDate = function getFiscalQuarterStartDate(date, quarter
   return new Date(year, qStartMonth, 1);
 };
 
+var VIEW_MODE_DEFAULT_VISIBLE_COUNT = (_VIEW_MODE_DEFAULT_VI = {}, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Day] = 14, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Week] = 6, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Month] = 6, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Quarter] = 4, _VIEW_MODE_DEFAULT_VI);
+var VIEW_MODE_MAX_VISIBLE_COUNT = (_VIEW_MODE_MAX_VISIBL = {}, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Day] = 30, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Week] = 13, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Month] = 12, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Quarter] = 8, _VIEW_MODE_MAX_VISIBL);
 var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount, quarterStart) {
   var _tasks$, _tasks$2, _tasks$3, _tasks$4;
 
@@ -2045,8 +2048,8 @@ var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeig
 
     if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[0].x1;
     var candidates = [];
-    if (t.x1 !== undefined && t.x1 >= 0) candidates.push(t.x1);
-    if (t.actualx1 !== undefined && t.actualx1 >= 0) candidates.push(t.actualx1);
+    if (t.x2 > t.x1) candidates.push(t.x1);
+    if (t.actualx2 > t.actualx1) candidates.push(t.actualx1);
     return candidates.length > 0 ? Math.min.apply(Math, candidates) : 0;
   };
 
@@ -2059,8 +2062,8 @@ var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeig
 
     if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[t.actualSegments.length - 1].x2;
     var candidates = [];
-    if (t.x2 !== undefined && t.x2 >= 0) candidates.push(t.x2);
-    if (t.actualx2 !== undefined && t.actualx2 >= 0) candidates.push(t.actualx2);
+    if (t.x2 > t.x1) candidates.push(t.x2);
+    if (t.actualx2 > t.actualx1) candidates.push(t.actualx2);
     return candidates.length > 0 ? Math.max.apply(Math, candidates) : 0;
   };
 
@@ -3582,7 +3585,12 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
   var getArrows = function getArrows(isCritical, criticalPathType) {
     return tasks.flatMap(function (_task) {
-      var _live = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? ganttEvent.changedTask : _task;
+      var a = ganttEvent.action;
+      var isDraggingThis = (a === "move" || a === "start" || a === "end" || a === "progress") && !!ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id;
+
+      var _live = isDraggingThis ? _extends({}, ganttEvent.changedTask, {
+        y: _task.y
+      }) : _task;
 
       var task = _live.start.getTime() > 0 && _live.end.getTime() > 0 ? _live : undefined;
 
@@ -3591,13 +3599,16 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       }
 
       return task.barChildren.map(function (child) {
-        if (task.x2 > task.x1 || task.actualx2 > task.actualx1) {
+        var taskTo = tasks[child.index];
+        var fromDrawable = task.x2 > task.x1 || task.actualx2 > task.actualx1;
+        var toDrawable = !!taskTo && (taskTo.x2 > taskTo.x1 || taskTo.actualx2 > taskTo.actualx1);
+
+        if (fromDrawable && toDrawable) {
           var _task$criticalPathArr;
 
           var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
-            return arrow.taskId === tasks[child.index].id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
+            return arrow.taskId === taskTo.id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
           });
-          var taskTo = tasks[child.index];
           var yFrom = task.y + taskHeight / 2;
           var yTo = taskTo.y + taskHeight / 2;
           var minY = Math.min(yFrom, yTo);
@@ -3609,9 +3620,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
           if (!!criticalTask === isCritical) {
             return React__default.createElement(Arrow, {
-              key: "Arrow from " + task.id + " to " + tasks[child.index].id + (isCritical ? "-critical" : ""),
+              key: "Arrow from " + task.id + " to " + taskTo.id + (isCritical ? "-critical" : ""),
               taskFrom: task,
-              taskTo: tasks[child.index],
+              taskTo: taskTo,
               rowHeight: rowHeight,
               dependencyType: child.dependencyType,
               taskHeight: taskHeight,
@@ -3805,6 +3816,8 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 };
 
 var Gantt = function Gantt(_ref) {
+  var _ref3;
+
   var tasks = _ref.tasks,
       _ref$leafTasks = _ref.leafTasks,
       leafTasks = _ref$leafTasks === void 0 ? [] : _ref$leafTasks,
@@ -3816,8 +3829,7 @@ var Gantt = function Gantt(_ref) {
       endDate = _ref$endDate === void 0 ? new Date() : _ref$endDate,
       _ref$headerHeight = _ref.headerHeight,
       headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
-      _ref$columnWidth = _ref.columnWidth,
-      columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
+      columnWidthProp = _ref.columnWidth,
       _ref$listCellWidth = _ref.listCellWidth,
       listCellWidth = _ref$listCellWidth === void 0 ? "155px" : _ref$listCellWidth,
       _ref$rowHeight = _ref.rowHeight,
@@ -3898,6 +3910,7 @@ var Gantt = function Gantt(_ref) {
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
   var isDraggingTable = React.useRef(false);
+  var userResizedRef = React.useRef(false);
   var dragStartX = React.useRef(0);
   var dragStartWidth = React.useRef(0);
   var dragMaxWidth = React.useRef(Infinity);
@@ -3954,6 +3967,7 @@ var Gantt = function Gantt(_ref) {
     var _taskListRef$current$, _taskListRef$current, _ref2, _tableHorizontalConta, _tableHorizontalConta2, _tableInnerScrollRef$, _wrapperRef$current$o, _wrapperRef$current;
 
     isDraggingTable.current = true;
+    userResizedRef.current = true;
     dragStartX.current = e.clientX;
     dragStartWidth.current = tableContainerWidth != null ? tableContainerWidth : (_taskListRef$current$ = (_taskListRef$current = taskListRef.current) === null || _taskListRef$current === void 0 ? void 0 : _taskListRef$current.offsetWidth) != null ? _taskListRef$current$ : 0;
     dragMaxWidth.current = (_ref2 = (_tableHorizontalConta = (_tableHorizontalConta2 = tableHorizontalContainerRef.current) === null || _tableHorizontalConta2 === void 0 ? void 0 : _tableHorizontalConta2.scrollWidth) != null ? _tableHorizontalConta : (_tableInnerScrollRef$ = tableInnerScrollRef.current) === null || _tableInnerScrollRef$ === void 0 ? void 0 : _tableInnerScrollRef$.scrollWidth) != null ? _ref2 : Math.max(100, ((_wrapperRef$current$o = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetWidth) != null ? _wrapperRef$current$o : Infinity) - 200);
@@ -4020,38 +4034,99 @@ var Gantt = function Gantt(_ref) {
       failedTask = _useState11[0],
       setFailedTask = _useState11[1];
 
+  var _useState12 = React.useState(null),
+      computedColumnWidth = _useState12[0],
+      setComputedColumnWidth = _useState12[1];
+
+  var computedForViewModeRef = React.useRef(null);
+  React.useEffect(function () {
+    if (columnWidthProp != null) return;
+    if (svgContainerWidth <= 0) return;
+    var minVisible = VIEW_MODE_DEFAULT_VISIBLE_COUNT[viewMode];
+    if (!minVisible) return;
+    var maxVisible = VIEW_MODE_MAX_VISIBLE_COUNT[viewMode];
+    var prevViewMode = computedForViewModeRef.current;
+
+    if (prevViewMode != null && prevViewMode !== viewMode && computedColumnWidth != null) {
+      var visible = svgContainerWidth / computedColumnWidth;
+      var oldMin = VIEW_MODE_DEFAULT_VISIBLE_COUNT[prevViewMode];
+      var oldMax = VIEW_MODE_MAX_VISIBLE_COUNT[prevViewMode];
+      var _next = computedColumnWidth;
+
+      if (maxVisible && oldMin != null && oldMax != null && oldMax > oldMin) {
+        var t = Math.min(1, Math.max(0, (visible - oldMin) / (oldMax - oldMin)));
+        var targetVisible = minVisible + t * (maxVisible - minVisible);
+        _next = Math.floor(svgContainerWidth / targetVisible);
+      } else if (visible < minVisible) {
+        _next = Math.floor(svgContainerWidth / minVisible);
+      } else if (maxVisible && visible > maxVisible) {
+        _next = Math.ceil(svgContainerWidth / maxVisible);
+      }
+
+      _next = Math.max(20, _next);
+      computedForViewModeRef.current = viewMode;
+      userResizedRef.current = true;
+
+      if (_next !== computedColumnWidth) {
+        setComputedColumnWidth(_next);
+      }
+
+      return;
+    }
+
+    var alreadySnappedForView = computedForViewModeRef.current === viewMode && computedColumnWidth != null;
+    if (userResizedRef.current && alreadySnappedForView) return;
+    var next = Math.max(20, Math.floor(svgContainerWidth / minVisible));
+    computedForViewModeRef.current = viewMode;
+
+    if (next !== computedColumnWidth) {
+      setComputedColumnWidth(next);
+    }
+  }, [viewMode, svgContainerWidth, columnWidthProp, computedColumnWidth]);
+  var columnWidth = (_ref3 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref3 : 60;
   var effectiveColumnWidth = React.useMemo(function () {
     if (svgContainerWidth <= 0 || dateSetup.dates.length <= 0) return columnWidth;
+
+    if (columnWidthProp == null) {
+      var maxVisible = VIEW_MODE_MAX_VISIBLE_COUNT[viewMode];
+
+      if (maxVisible) {
+        return Math.max(columnWidth, Math.ceil(svgContainerWidth / maxVisible));
+      }
+
+      return columnWidth;
+    }
+
     return Math.max(columnWidth, Math.ceil(svgContainerWidth / dateSetup.dates.length));
-  }, [columnWidth, svgContainerWidth, dateSetup.dates.length]);
+  }, [columnWidth, columnWidthProp, viewMode, svgContainerWidth, dateSetup.dates.length]);
   var svgWidth = effectiveColumnWidth < 55 ? (dateSetup.dates.length + 0.5) * effectiveColumnWidth : dateSetup.dates.length * effectiveColumnWidth;
   var ganttFullHeight = React.useMemo(function () {
     return barTasks.length * rowHeight;
   }, [barTasks.length, rowHeight]);
 
-  var _useState12 = React.useState(0),
-      scrollY = _useState12[0],
-      setScrollY = _useState12[1];
+  var _useState13 = React.useState(0),
+      scrollY = _useState13[0],
+      setScrollY = _useState13[1];
 
-  var _useState13 = React.useState(-1),
-      scrollX = _useState13[0],
-      setScrollX = _useState13[1];
+  var _useState14 = React.useState(-1),
+      scrollX = _useState14[0],
+      setScrollX = _useState14[1];
 
-  var _useState14 = React.useState(false),
-      ignoreScrollEvent = _useState14[0],
-      setIgnoreScrollEvent = _useState14[1];
-
-  var _useState15 = React.useState(0),
-      lastTouchX = _useState15[0],
-      setLastTouchX = _useState15[1];
+  var _useState15 = React.useState(false),
+      ignoreScrollEvent = _useState15[0],
+      setIgnoreScrollEvent = _useState15[1];
 
   var _useState16 = React.useState(0),
-      lastTouchY = _useState16[0],
-      setLastTouchY = _useState16[1];
+      lastTouchX = _useState16[0],
+      setLastTouchX = _useState16[1];
+
+  var _useState17 = React.useState(0),
+      lastTouchY = _useState17[0],
+      setLastTouchY = _useState17[1];
 
-  var _useState17 = React.useState(false),
-      isProcessing = _useState17[0],
-      setIsProcessing = _useState17[1];
+  var _useState18 = React.useState(false),
+      isProcessing = _useState18[0],
+      setIsProcessing = _useState18[1];
 
   var buffer = rowHeight * 10;
   var visibleStartY = scrollY - buffer;
@@ -4291,7 +4366,7 @@ var Gantt = function Gantt(_ref) {
   };
 
   var handleScrollX = function handleScrollX(event) {
-    if (scrollX !== event.currentTarget.scrollLeft) {
+    if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
       setScrollX(event.currentTarget.scrollLeft);
       setIgnoreScrollEvent(true);
     } else {
@@ -4601,6 +4676,9 @@ function topologicalOrderingHelper(taskID, taskMap, sortedTaskList) {
   return true;
 }
 function getCriticalPaths(leafTasks) {
+  leafTasks = leafTasks.filter(function (t) {
+    return t.type !== "milestone" && (t.start.getTime() !== 0 || t.end.getTime() !== 0);
+  });
   var taskMap = {};
 
   for (var i = 0; i < leafTasks.length; i++) {
@@ -4783,28 +4861,26 @@ function computeCriticalPath(taskID, taskMap) {
           taskMap[taskID].paths[1].visited = false;
         }
       }
-
-      if (paths.length === 0) {
-        var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap - offTime;
-
-        if (taskMap[taskID].paths.length < 2) {
-          taskMap[taskID].paths.push({
-            duration: immediateChildDuration,
-            task: dependents[j],
-            parent: taskID,
-            visited: false
-          });
-        } else if (immediateChildDuration > taskMap[taskID].paths[0].duration) {
-          taskMap[taskID].paths[0].duration = immediateChildDuration;
-          taskMap[taskID].paths[0].task = dependents[j];
-          taskMap[taskID].paths[0].parent = taskID;
-          taskMap[taskID].paths[0].visited = false;
-        } else if (immediateChildDuration > taskMap[taskID].paths[1].duration) {
-          taskMap[taskID].paths[1].duration = immediateChildDuration;
-          taskMap[taskID].paths[1].task = dependents[j];
-          taskMap[taskID].paths[1].parent = taskID;
-          taskMap[taskID].paths[1].visited = false;
-        }
+    } else {
+      var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap - offTime;
+
+      if (taskMap[taskID].paths.length < 2) {
+        taskMap[taskID].paths.push({
+          duration: immediateChildDuration,
+          task: dependents[j],
+          parent: taskID,
+          visited: false
+        });
+      } else if (immediateChildDuration > taskMap[taskID].paths[0].duration) {
+        taskMap[taskID].paths[0].duration = immediateChildDuration;
+        taskMap[taskID].paths[0].task = dependents[j];
+        taskMap[taskID].paths[0].parent = taskID;
+        taskMap[taskID].paths[0].visited = false;
+      } else if (immediateChildDuration > taskMap[taskID].paths[1].duration) {
+        taskMap[taskID].paths[1].duration = immediateChildDuration;
+        taskMap[taskID].paths[1].task = dependents[j];
+        taskMap[taskID].paths[1].parent = taskID;
+        taskMap[taskID].paths[1].visited = false;
       }
     }
   }