gantt-task-react-powern 0.6.29 → 0.6.31

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;
 
@@ -1425,7 +1428,7 @@ var GridBody = function GridBody(_ref) {
         height: rowHeight,
         fill: rowFill
       }));
-      var cal = task.calender;
+      var cal = task.calendar;
 
       if (cal) {
         for (var _i = 0, _x = 0; _i < dates.length; _i++, _x += columnWidth) {
@@ -2207,9 +2210,9 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
   var plannedSegments;
   var actualSegments;
 
-  if (task.calender && task.start && task.end && task.start.getTime() > 0) {
+  if (task.calendar && task.start && task.end && task.start.getTime() > 0) {
     var planEnd = addToDate(startOfDate(task.end, "day"), 1, "day");
-    var intervals = getWorkingIntervals(task.start, planEnd, task.calender);
+    var intervals = getWorkingIntervals(task.start, planEnd, task.calendar);
     var segs = intervals.map(function (iv) {
       return {
         x1: taskXCoordinate(iv.start, dates, columnWidth),
@@ -2221,10 +2224,10 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
     if (segs.length > 0) plannedSegments = segs;
   }
 
-  if (task.calender && task.actualStart && task.actualEnd && task.actualStart.getTime() > 0) {
+  if (task.calendar && task.actualStart && task.actualEnd && task.actualStart.getTime() > 0) {
     var actEnd = addToDate(startOfDate(task.actualEnd, "day"), 1, "day");
 
-    var _intervals = getWorkingIntervals(task.actualStart, actEnd, task.calender);
+    var _intervals = getWorkingIntervals(task.actualStart, actEnd, task.calendar);
 
     var _segs = _intervals.map(function (iv) {
       return {
@@ -3208,8 +3211,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
           var dragType = ganttEvent.type;
 
-          if (changedTask.calender && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
-            var cal = finalTask.calender;
+          if (changedTask.calendar && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
+            var cal = finalTask.calendar;
 
             if (dragType === "actual") {
               if (ganttEvent.action === "end") {
@@ -3330,8 +3333,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
         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 (newChangedTask.calendar && (action === "move" || action === "end" || action === "start")) {
+          var cal = newChangedTask.calendar;
 
           if (dropType === "actual") {
             if (action === "end") {
@@ -3628,18 +3631,6 @@ 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"
   }, lineX !== null && lineX > 0 && React__default.createElement("line", {
@@ -3647,7 +3638,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     y1: 0,
     x2: lineX,
     y2: totalHeight,
-    stroke: "red",
+    stroke: "blue",
     strokeWidth: 2,
     pointerEvents: "none",
     opacity: 0.8
@@ -3817,6 +3808,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,
@@ -3828,8 +3821,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,
@@ -3910,6 +3902,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);
@@ -3966,6 +3959,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);
@@ -4032,38 +4026,70 @@ 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 alreadySnappedForView = computedForViewModeRef.current === viewMode && computedColumnWidth != null;
+    if (userResizedRef.current && alreadySnappedForView) return;
+    var target = VIEW_MODE_DEFAULT_VISIBLE_COUNT[viewMode];
+    if (!target) return;
+    var next = Math.max(20, Math.floor(svgContainerWidth / target));
+
+    if (next !== computedColumnWidth) {
+      setComputedColumnWidth(next);
+    }
+
+    computedForViewModeRef.current = viewMode;
+  }, [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;