gantt-task-react-v 1.0.49 → 1.0.50

package/dist/gantt-task-react.es.js

@@ -10912,12 +10912,12 @@ const GanttTodayInner = ({
   distances: { columnWidth },
   ganttFullHeight,
   isUnknownDates,
+  rtl,
   startDate,
   viewMode,
   showTodayLine = true,
   showDataDateLine = false,
   dataDate = null,
-  dataDateX,
   todayColor = null,
   dataDateColor = null,
   todayLabel = "Today",
@@ -10945,147 +10945,141 @@ const GanttTodayInner = ({
           return 1 + percent * 0.5;
         }
         case ViewMode.Year: {
-          const todayOfYear = Math.floor(
-            (today.getTime() - new Date(today.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
-          );
-          const totalDaysInYear = new Date(today.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
-          const percent = todayOfYear / totalDaysInYear;
+          const percent = today.getMonth() / 12;
           return 1 + percent * 0.5;
         }
         default:
           return 1;
       }
     };
-    const x = additionalLeftSpace + todayIndex * columnWidth * extraMultiplier();
-    return /* @__PURE__ */ jsxs("g", { className: "today-line", children: [
+    const tickX = todayIndex * columnWidth * extraMultiplier();
+    const x = rtl ? tickX + columnWidth : tickX;
+    const color = todayColor || "var(--gantt-calendar-today-color)";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "line",
+        "rect",
         {
-          x1: x,
-          y1: 0,
-          x2: x,
-          y2: ganttFullHeight,
-          className: styles$c.todayLine,
-          stroke: todayColor || void 0
+          x: additionalLeftSpace + x,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
+          fill: color
         }
       ),
       /* @__PURE__ */ jsx(
-        "polygon",
+        "circle",
         {
-          className: styles$c.todayTriangle,
-          fill: todayColor || void 0,
-          points: `${x},0 ${x - 5},8 ${x + 5},8`
+          className: styles$c.ganttTodayCircle,
+          cx: x + 1,
+          cy: 6,
+          r: 6,
+          fill: color
         }
       ),
       /* @__PURE__ */ jsx(
         "text",
         {
-          x,
-          y: 15,
-          className: styles$c.todayLabel,
-          fill: todayColor || void 0,
-          textAnchor: "middle",
+          x: additionalLeftSpace + x + 8,
+          y: 10,
+          fill: color,
+          fontSize: 12,
+          fontWeight: 600,
           children: todayLabel
         }
       )
-    ] }, "today-line");
+    ] });
   }, [
-    isUnknownDates,
-    showTodayLine,
-    startDate,
-    viewMode,
     additionalLeftSpace,
     columnWidth,
     ganttFullHeight,
+    isUnknownDates,
+    rtl,
+    startDate,
+    viewMode,
+    showTodayLine,
     todayColor,
     todayLabel
   ]);
   const dataDateElement = useMemo(() => {
-    if (isUnknownDates || !showDataDateLine || !dataDate) {
+    if (!showDataDateLine || !dataDate) {
       return null;
     }
-    let x;
-    if (dataDateX !== void 0) {
-      x = dataDateX;
-    } else {
-      const dataDateIndex = getDatesDiff(dataDate, startDate, viewMode);
-      const extraMultiplier = () => {
-        switch (viewMode) {
-          case ViewMode.Week: {
-            const percent = dataDate.getDay() / 7;
-            return 1 + percent * 0.2;
-          }
-          case ViewMode.Month: {
-            const dayInMonth = dataDate.getDate();
-            const maxDaysInMonth = getDaysInMonth(
-              dataDate.getMonth(),
-              dataDate.getFullYear()
-            );
-            const percent = dayInMonth / maxDaysInMonth;
-            return 1 + percent * 0.5;
-          }
-          case ViewMode.Year: {
-            const dataDateOfYear = Math.floor(
-              (dataDate.getTime() - new Date(dataDate.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
-            );
-            const totalDaysInYear = new Date(dataDate.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
-            const percent = dataDateOfYear / totalDaysInYear;
-            return 1 + percent * 0.5;
-          }
-          default:
-            return 1;
+    const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
+    const extraMultiplier = () => {
+      switch (viewMode) {
+        case ViewMode.Week: {
+          const percent = dataDate.getDay() / 7;
+          return 1 + percent * 0.2;
         }
-      };
-      x = additionalLeftSpace + dataDateIndex * columnWidth * extraMultiplier();
-    }
-    return /* @__PURE__ */ jsxs("g", { className: "data-date-line", children: [
+        case ViewMode.Month: {
+          const dayInMonth = dataDate.getDate();
+          const maxDaysInMonth = getDaysInMonth(
+            dataDate.getMonth(),
+            dataDate.getFullYear()
+          );
+          const percent = dayInMonth / maxDaysInMonth;
+          return 1 + percent * 0.5;
+        }
+        case ViewMode.Year: {
+          const percent = dataDate.getMonth() / 12;
+          return 1 + percent * 0.5;
+        }
+        default:
+          return 1;
+      }
+    };
+    const tickX = dataIndex * columnWidth * extraMultiplier();
+    const x = rtl ? tickX + columnWidth : tickX;
+    const color = dataDateColor || "var(--gantt-calendar-today-color)";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "line",
+        "rect",
         {
-          x1: x,
-          y1: 0,
-          x2: x,
-          y2: ganttFullHeight,
-          className: styles$c.dataDateLine,
-          stroke: dataDateColor || void 0
+          x: additionalLeftSpace + x,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
+          fill: color,
+          opacity: 0.9
         }
       ),
       /* @__PURE__ */ jsx(
-        "polygon",
+        "circle",
         {
-          className: styles$c.dataDateTriangle,
-          fill: dataDateColor || void 0,
-          points: `${x},0 ${x - 5},8 ${x + 5},8`
+          className: styles$c.ganttTodayCircle,
+          cx: x + 1,
+          cy: 6,
+          r: 6,
+          fill: color
         }
       ),
       /* @__PURE__ */ jsx(
         "text",
         {
-          x,
-          y: 30,
-          className: styles$c.dataDateLabel,
-          fill: dataDateColor || void 0,
-          textAnchor: "middle",
-          children: dataDateLabel
+          x: additionalLeftSpace + x + 8,
+          y: 10,
+          fill: color,
+          fontSize: 12,
+          fontWeight: 600,
+          children: dataDateLabel || "Data Date"
         }
       )
-    ] }, "data-date-line");
+    ] });
   }, [
-    isUnknownDates,
-    showDataDateLine,
-    dataDate,
-    dataDateX,
-    startDate,
-    viewMode,
     additionalLeftSpace,
     columnWidth,
     ganttFullHeight,
+    rtl,
+    startDate,
+    viewMode,
+    showDataDateLine,
+    dataDate,
     dataDateColor,
     dataDateLabel
   ]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    todayElement,
-    dataDateElement
+  return /* @__PURE__ */ jsxs("g", { className: "today", children: [
+    dataDateElement,
+    todayElement
   ] });
 };
 const GanttToday = memo(GanttTodayInner);
@@ -11989,9 +11983,9 @@ const styles$8 = {
 const BarDisplay = ({
   taskId,
   barCornerRadius,
-  // isCritical,
-  // isSelected,
-  // hasChildren,
+  isCritical,
+  isSelected,
+  hasChildren,
   height,
   progressWidth,
   progressX,
@@ -12000,11 +11994,60 @@ const BarDisplay = ({
   x,
   y,
   customStyle,
-  dataDateX,
-  splitbarColors,
-  showProgressBar = true,
-  progressBarColor
+  showProgress = true,
+  progressColor
 }) => {
+  const processColor = useMemo(() => {
+    if (progressColor) {
+      return progressColor;
+    }
+    if (isCritical) {
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-progress-selected-critical-color)";
+        }
+        return "var(--gantt-group-progress-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-progress-selected-critical-color)";
+      }
+      return "var(--gantt-bar-progress-critical-color)";
+    }
+    if (hasChildren) {
+      if (isSelected) {
+        return "var(--gantt-group-progress-selected-color)";
+      }
+      return "var(--gantt-group-progress-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-bar-progress-selected-color)";
+    }
+    return "var(--gantt-bar-progress-color)";
+  }, [isSelected, isCritical, hasChildren, progressColor]);
+  const barColor = useMemo(() => {
+    if (isCritical) {
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-background-selected-critical-color)";
+        }
+        return "var(--gantt-group-background-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-background-selected-critical-color)";
+      }
+      return "var(--gantt-bar-background-critical-color)";
+    }
+    if (hasChildren) {
+      if (isSelected) {
+        return "var(--gantt-group-background-selected-color)";
+      }
+      return "var(--gantt-group-background-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-bar-background-selected-color)";
+    }
+    return "var(--gantt-bar-background-color)";
+  }, [isSelected, isCritical, hasChildren]);
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -12022,40 +12065,7 @@ const BarDisplay = ({
         }
       },
       children: [
-        typeof dataDateX === "number" ? (() => {
-          var _a, _b;
-          const localSplit = Math.max(0, Math.min(width, dataDateX - x));
-          const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _a.onTime) || "var(--gantt-bar-background-color)";
-          const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _b.delayed) || "var(--gantt-bar-background-color)";
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x,
-                width: localSplit,
-                y,
-                height,
-                ry: barCornerRadius,
-                rx: barCornerRadius,
-                fill: leftFill,
-                className: styles$8.barBackground
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x + localSplit,
-                width: Math.max(0, width - localSplit),
-                y,
-                height,
-                ry: barCornerRadius,
-                rx: barCornerRadius,
-                fill: rightFill,
-                className: styles$8.barBackground
-              }
-            )
-          ] });
-        })() : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "rect",
           {
             x,
@@ -12064,11 +12074,11 @@ const BarDisplay = ({
             height,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: "unset",
+            fill: barColor,
             className: styles$8.barBackground
           }
         ),
-        showProgressBar && /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12077,7 +12087,7 @@ const BarDisplay = ({
             height,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: progressBarColor || "var(--gantt-bar-progress-color)"
+            fill: processColor
           }
         )
       ]
@@ -12132,8 +12142,8 @@ const ProjectDisplay = ({
   taskName: taskName2,
   taskHalfHeight,
   taskHeight,
-  // isSelected,
-  // isCritical,
+  isSelected,
+  isCritical,
   progressWidth,
   progressX,
   taskYOffset,
@@ -12142,11 +12152,36 @@ const ProjectDisplay = ({
   x2,
   startMoveFullTask,
   customStyle,
-  dataDateX,
-  splitbarColors,
-  showProgressBar = true,
-  progressBarColor
+  showProgress = true,
+  progressColor
 }) => {
+  const barColor = useMemo(() => {
+    if (isCritical) {
+      if (isSelected) {
+        return "var(--gantt-project-background-selected-critical-color)";
+      }
+      return "var(--gantt-project-background-critical-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-project-background-selected-color)";
+    }
+    return "var(--gantt-project-background-color)";
+  }, [isSelected, isCritical]);
+  const processColor = useMemo(() => {
+    if (progressColor) {
+      return progressColor;
+    }
+    if (isCritical) {
+      if (isSelected) {
+        return "var(--gantt-project-progress-selected-critical-color)";
+      }
+      return "var(--gantt-project-progress-critical-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-project-progress-selected-color)";
+    }
+    return "var(--gantt-project-progress-color)";
+  }, [isSelected, isCritical, progressColor]);
   const projectLeftTriangle = [
     x1,
     taskYOffset + taskHeight / 2 - 1,
@@ -12180,53 +12215,20 @@ const ProjectDisplay = ({
       },
       className: styles$7.projectWrapper,
       children: [
-        typeof dataDateX === "number" ? (() => {
-          var _a, _b;
-          const localSplit = Math.max(0, Math.min(width, dataDateX - x1));
-          const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _a.onTime) || "var(--gantt-project-background-color)";
-          const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _b.delayed) || "var(--gantt-project-background-color)";
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x1,
-                width: localSplit,
-                y: taskYOffset,
-                height: taskHeight,
-                rx: barCornerRadius,
-                ry: barCornerRadius,
-                className: styles$7.projectBackground,
-                fill: leftFill
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x1 + localSplit,
-                width: Math.max(0, width - localSplit),
-                y: taskYOffset,
-                height: taskHeight,
-                rx: barCornerRadius,
-                ry: barCornerRadius,
-                className: styles$7.projectBackground,
-                fill: rightFill
-              }
-            )
-          ] });
-        })() : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "rect",
           {
+            fill: barColor,
             x: x1,
             width,
             y: taskYOffset,
             height: taskHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$7.projectBackground,
-            fill: "unset"
+            className: styles$7.projectBackground
           }
         ),
-        showProgressBar && /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12235,13 +12237,13 @@ const ProjectDisplay = ({
             height: taskHeight,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: progressBarColor || "var(--gantt-bar-progress-color)"
+            fill: processColor
           }
         ),
         /* @__PURE__ */ jsx(
           "rect",
           {
-            fill: "unset",
+            fill: barColor,
             x: x1,
             width,
             y: taskYOffset,
@@ -12256,7 +12258,7 @@ const ProjectDisplay = ({
           {
             className: styles$7.projectTop,
             points: projectLeftTriangle,
-            fill: "unset"
+            fill: barColor
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12264,7 +12266,7 @@ const ProjectDisplay = ({
           {
             className: styles$7.projectTop,
             points: projectRightTriangle,
-            fill: "unset"
+            fill: barColor
           }
         )
       ]
@@ -12335,10 +12337,8 @@ const Bar = (props) => {
     x2,
     movingAction,
     ganttRelationEvent,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   useMemo(() => width < 30, [width]);
   const handleHeight = useMemo(() => taskHeight - 2, [taskHeight]);
@@ -12400,10 +12400,8 @@ const Bar = (props) => {
           isCritical,
           hasChildren,
           startMoveFullTask,
-          dataDateX,
-          splitbarColors,
-          showProgressBar,
-          progressBarColor
+          showProgress,
+          progressColor
         }
       );
     } else {
@@ -12423,10 +12421,8 @@ const Bar = (props) => {
           isCritical,
           hasChildren,
           startMoveFullTask,
-          dataDateX,
-          splitbarColors,
-          showProgressBar,
-          progressBarColor
+          showProgress,
+          progressColor
         }
       );
     }
@@ -12985,10 +12981,8 @@ const TaskGanttContentInner = (props) => {
     taskBarMovingAction,
     waitCommitTasks,
     viewMode,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   const renderedHolidays = useMemo(() => {
     const { columnWidth } = distances;
@@ -13075,11 +13069,6 @@ const TaskGanttContentInner = (props) => {
         x2: taskX2,
         comparisonDates
       } = getTaskCoordinates2(task);
-      const containerXAbs = Math.max(
-        containerX + (additionalLeftSpace || 0),
-        0
-      );
-      const dataDateXLocal = typeof dataDateX === "number" ? dataDateX - containerXAbs : void 0;
       tasksRes.push(
         /* @__PURE__ */ jsx(
           "svg",
@@ -13124,10 +13113,8 @@ const TaskGanttContentInner = (props) => {
                 onDeleteTask,
                 renderCustomLabel,
                 viewMode,
-                dataDateX: dataDateXLocal,
-                splitbarColors,
-                showProgressBar,
-                progressBarColor
+                showProgress,
+                progressColor
               }
             )
           },
@@ -13337,10 +13324,6 @@ const TaskGanttContentInner = (props) => {
     isDateChangeable,
     isRelationChangeable,
     visibleTasksMirror,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor,
     onArrowDoubleClick
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "content", children: [
@@ -18786,9 +18769,8 @@ const Gantt = (props) => {
     dataDateColor,
     todayLabel = "Today",
     dataDateLabel = "Data Date",
-    splitbarColors,
-    showProgressBar = true,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19917,29 +19899,6 @@ const Gantt = (props) => {
     () => svgWidth + additionalLeftSpace + additionalRightSpace,
     [additionalLeftSpace, additionalRightSpace, svgWidth]
   );
-  const dataDateX = useMemo(() => {
-    if (!dataDate)
-      return void 0;
-    try {
-      const roundedDataDate = roundStartDate(dataDate);
-      const x = taskXCoordinate(
-        roundedDataDate,
-        startDate,
-        viewMode,
-        distances.columnWidth
-      );
-      return additionalLeftSpace + x;
-    } catch {
-      return void 0;
-    }
-  }, [
-    dataDate,
-    startDate,
-    viewMode,
-    distances,
-    additionalLeftSpace,
-    roundStartDate
-  ]);
   const gridProps = useMemo(
     () => ({
       additionalLeftSpace,
@@ -19952,7 +19911,6 @@ const Gantt = (props) => {
       showTodayLine,
       showDataDateLine,
       dataDate,
-      dataDateX,
       todayColor,
       dataDateColor,
       todayLabel,
@@ -19969,7 +19927,6 @@ const Gantt = (props) => {
       showTodayLine,
       showDataDateLine,
       dataDate,
-      dataDateX,
       todayColor,
       dataDateColor,
       todayLabel,
@@ -20009,11 +19966,6 @@ const Gantt = (props) => {
   const renderTaskBarProps = useMemo(
     () => ({
       ...taskBar,
-      splitbarColors,
-      dataDate,
-      dataDateX,
-      showProgressBar,
-      progressBarColor,
       taskBarMovingAction: (task) => {
         var _a2;
         return task.id === ((_a2 = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _a2.id) ? changeInProgress.action : null;
@@ -20049,16 +20001,13 @@ const Gantt = (props) => {
       taskHeight,
       taskYOffset,
       visibleTasksMirror,
-      viewMode
+      viewMode,
+      showProgress,
+      progressColor
     }),
     [
       viewMode,
       taskBar,
-      splitbarColors,
-      dataDate,
-      dataDateX,
-      showProgressBar,
-      progressBarColor,
       authorizedRelations,
       additionalLeftSpace,
       additionalRightSpace,
@@ -20091,7 +20040,9 @@ const Gantt = (props) => {
       visibleTasksMirror,
       (_b = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _b.id,
       changeInProgress == null ? void 0 : changeInProgress.action,
-      handleDeleteTasks
+      handleDeleteTasks,
+      showProgress,
+      progressColor
     ]
   );
   const renderTaskListProps = useMemo(