gantt-task-react-v 1.0.49 → 1.0.50

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

@@ -10929,12 +10929,12 @@
     distances: { columnWidth },
     ganttFullHeight,
     isUnknownDates,
+    rtl,
     startDate,
     viewMode,
     showTodayLine = true,
     showDataDateLine = false,
     dataDate = null,
-    dataDateX,
     todayColor = null,
     dataDateColor = null,
     todayLabel = "Today",
@@ -10962,147 +10962,141 @@
             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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      todayElement,
-      dataDateElement
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
+      dataDateElement,
+      todayElement
     ] });
   };
   const GanttToday = React.memo(GanttTodayInner);
@@ -12006,9 +12000,9 @@
   const BarDisplay = ({
     taskId,
     barCornerRadius,
-    // isCritical,
-    // isSelected,
-    // hasChildren,
+    isCritical,
+    isSelected,
+    hasChildren,
     height,
     progressWidth,
     progressX,
@@ -12017,11 +12011,60 @@
     x,
     y,
     customStyle,
-    dataDateX,
-    splitbarColors,
-    showProgressBar = true,
-    progressBarColor
+    showProgress = true,
+    progressColor
   }) => {
+    const processColor = React.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 = React.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__ */ jsxRuntime.jsxs(
       "g",
       {
@@ -12039,40 +12082,7 @@
           }
         },
         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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x,
-                  width: localSplit,
-                  y,
-                  height,
-                  ry: barCornerRadius,
-                  rx: barCornerRadius,
-                  fill: leftFill,
-                  className: styles$8.barBackground
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: x + localSplit,
-                  width: Math.max(0, width - localSplit),
-                  y,
-                  height,
-                  ry: barCornerRadius,
-                  rx: barCornerRadius,
-                  fill: rightFill,
-                  className: styles$8.barBackground
-                }
-              )
-            ] });
-          })() : /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x,
@@ -12081,11 +12091,11 @@
               height,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: "unset",
+              fill: barColor,
               className: styles$8.barBackground
             }
           ),
-          showProgressBar && /* @__PURE__ */ jsxRuntime.jsx(
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -12094,7 +12104,7 @@
               height,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: progressBarColor || "var(--gantt-bar-progress-color)"
+              fill: processColor
             }
           )
         ]
@@ -12149,8 +12159,8 @@
     taskName: taskName2,
     taskHalfHeight,
     taskHeight,
-    // isSelected,
-    // isCritical,
+    isSelected,
+    isCritical,
     progressWidth,
     progressX,
     taskYOffset,
@@ -12159,11 +12169,36 @@
     x2,
     startMoveFullTask,
     customStyle,
-    dataDateX,
-    splitbarColors,
-    showProgressBar = true,
-    progressBarColor
+    showProgress = true,
+    progressColor
   }) => {
+    const barColor = React.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 = React.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,
@@ -12197,53 +12232,20 @@
         },
         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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: x1,
-                  width: localSplit,
-                  y: taskYOffset,
-                  height: taskHeight,
-                  rx: barCornerRadius,
-                  ry: barCornerRadius,
-                  className: styles$7.projectBackground,
-                  fill: leftFill
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -12252,13 +12254,13 @@
               height: taskHeight,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: progressBarColor || "var(--gantt-bar-progress-color)"
+              fill: processColor
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
-              fill: "unset",
+              fill: barColor,
               x: x1,
               width,
               y: taskYOffset,
@@ -12273,7 +12275,7 @@
             {
               className: styles$7.projectTop,
               points: projectLeftTriangle,
-              fill: "unset"
+              fill: barColor
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -12281,7 +12283,7 @@
             {
               className: styles$7.projectTop,
               points: projectRightTriangle,
-              fill: "unset"
+              fill: barColor
             }
           )
         ]
@@ -12352,10 +12354,8 @@
       x2,
       movingAction,
       ganttRelationEvent,
-      dataDateX,
-      splitbarColors,
-      showProgressBar,
-      progressBarColor
+      showProgress = true,
+      progressColor
     } = props;
     React.useMemo(() => width < 30, [width]);
     const handleHeight = React.useMemo(() => taskHeight - 2, [taskHeight]);
@@ -12417,10 +12417,8 @@
             isCritical,
             hasChildren,
             startMoveFullTask,
-            dataDateX,
-            splitbarColors,
-            showProgressBar,
-            progressBarColor
+            showProgress,
+            progressColor
           }
         );
       } else {
@@ -12440,10 +12438,8 @@
             isCritical,
             hasChildren,
             startMoveFullTask,
-            dataDateX,
-            splitbarColors,
-            showProgressBar,
-            progressBarColor
+            showProgress,
+            progressColor
           }
         );
       }
@@ -13002,10 +12998,8 @@
       taskBarMovingAction,
       waitCommitTasks,
       viewMode,
-      dataDateX,
-      splitbarColors,
-      showProgressBar,
-      progressBarColor
+      showProgress = true,
+      progressColor
     } = props;
     const renderedHolidays = React.useMemo(() => {
       const { columnWidth } = distances;
@@ -13092,11 +13086,6 @@
           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__ */ jsxRuntime.jsx(
             "svg",
@@ -13141,10 +13130,8 @@
                   onDeleteTask,
                   renderCustomLabel,
                   viewMode,
-                  dataDateX: dataDateXLocal,
-                  splitbarColors,
-                  showProgressBar,
-                  progressBarColor
+                  showProgress,
+                  progressColor
                 }
               )
             },
@@ -13354,10 +13341,6 @@
       isDateChangeable,
       isRelationChangeable,
       visibleTasksMirror,
-      dataDateX,
-      splitbarColors,
-      showProgressBar,
-      progressBarColor,
       onArrowDoubleClick
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
@@ -18803,9 +18786,8 @@
       dataDateColor,
       todayLabel = "Today",
       dataDateLabel = "Data Date",
-      splitbarColors,
-      showProgressBar = true,
-      progressBarColor
+      showProgress = true,
+      progressColor
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -19934,29 +19916,6 @@
       () => svgWidth + additionalLeftSpace + additionalRightSpace,
       [additionalLeftSpace, additionalRightSpace, svgWidth]
     );
-    const dataDateX = React.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 = React.useMemo(
       () => ({
         additionalLeftSpace,
@@ -19969,7 +19928,6 @@
         showTodayLine,
         showDataDateLine,
         dataDate,
-        dataDateX,
         todayColor,
         dataDateColor,
         todayLabel,
@@ -19986,7 +19944,6 @@
         showTodayLine,
         showDataDateLine,
         dataDate,
-        dataDateX,
         todayColor,
         dataDateColor,
         todayLabel,
@@ -20026,11 +19983,6 @@
     const renderTaskBarProps = React.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;
@@ -20066,16 +20018,13 @@
         taskHeight,
         taskYOffset,
         visibleTasksMirror,
-        viewMode
+        viewMode,
+        showProgress,
+        progressColor
       }),
       [
         viewMode,
         taskBar,
-        splitbarColors,
-        dataDate,
-        dataDateX,
-        showProgressBar,
-        progressBarColor,
         authorizedRelations,
         additionalLeftSpace,
         additionalRightSpace,
@@ -20108,7 +20057,9 @@
         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 = React.useMemo(